html {background:#000; overflow-x:hidden; overflow-y:hidden;}
body {overflow-x:hidden; overflow-y:hidden;}

/* layout */
#wrap {position:absolute; left:50%; top:50%; width:1024px; height:724px; margin:-362px 0 0 -512px; overflow:hidden;}


/* intro */
#intro {position:relative; width:100%; height:100%; background:url('../images/img/bg_intro.jpg') left top no-repeat; background-size:cover; overflow:hidden;}

#intro .headTxt {position:absolute; left:0; top:65px; width:100%; text-align:center; font-size:22px; color:#666; line-height:1.2; letter-spacing:-0.5px; opacity:0; z-index:2;}
#intro .teacher {position:absolute; left:-100%; bottom:22px; opacity:0; z-index:2;}
#intro .teacher .t1 {}
#intro .teacher .t2 {position:absolute; left:-2px; bottom:152px;}

#intro .hTit {position:absolute; left:0; top:182px; width:100%; text-align:center; opacity:0; z-index:2;}
#intro .mTit {position:absolute; left:50%; top:265px; width:446px; margin:0 0 0 -223px; opacity:0; z-index:2;}
#intro .circle {position:absolute; left:0; bottom:99px; width:100%; text-align:center; opacity:0; z-index:1;}
#intro .book {position:absolute; right:-100%; top:204px; z-index:1;}

#intro .lesson {position:absolute; left:234px; top:468px; width:557px; opacity:0; background:url('../images/img/bg_lesson.png') left top no-repeat; z-index:5;}
#intro .lesson .tit {position:absolute; left:18px; top:9px; font-size:17px; color:#fff; line-height:1.2; letter-spacing:-1px; font-style:italic; padding:0 0 8px 0;}
#intro .lesson .txt {position:relative; display:inline-block; height:40px; opacity:0; padding:0 0 0 160px;}
#intro .lesson p {opacity:0; padding:12px 0 0 0;}
#intro .lesson p span {font-size:18px; color:#000; line-height:1.2; letter-spacing:-0.5px;}

#intro .download {position:absolute; left:50%; bottom:115px; width:160px; font-size:0; line-height:0; margin:0 0 0 -80px; text-align:center; z-index:4;}
#intro .download a {opacity:0; display:inline-block; }
#intro .download a.mp3 {width:74px; height:74px; margin:0 10px 0 0; background:url('../images/img/txt_mp3_down.png') left top no-repeat; z-index:2;}
#intro .download a.mp3:hover {background:url('../images/img/txt_mp3_down_hover.png') left top no-repeat;}
#intro .download a.mp3:active {background:url('../images/img/txt_mp3_down_click.png') left top no-repeat;}

#intro .download a.pdf {width:74px; height:74px; background:url('../images/img/txt_pdf_down.png') left top no-repeat; z-index:5;}
#intro .download a.pdf:hover {background:url('../images/img/txt_pdf_down_hover.png') left top no-repeat;}
#intro .download a.pdf:active {background:url('../images/img/txt_pdf_down_click.png') left top no-repeat;}

#intro .start {position:absolute; right:42px; bottom:82px; z-index:20; opacity:0;}
#intro .start a {display:block; width:113px; height:32px; background:url('../images/img/img_start.png') left top no-repeat;}
#intro .start a:hover {background:url('../images/img/img_start_hover.png') left top no-repeat;}
#intro .start a:active {background:url('../images/img/img_start_click.png') left top no-repeat;}
 

body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url('../images/img/txt_pdf_down_hover.png') url('../images/img/txt_mp3_down_hover.png') url('../images/img/img_start_hover.png') 
content:url('../images/img/txt_pdf_down_click.png') url('../images/img/txt_mp3_down_click.png') url('../images/img/img_start_click.png');
}


.lightSweep {
	position: absolute;
  	overflow: hidden;
	-webkit-filter: brightness(2);
	-webkit-mask-size: 300% 300%;
	-webkit-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 80%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0); 
	-moz-filter: brightness(2);
	-moz-mask-size: 300% 300%;
	-moz-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 80%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0); 
	-o-filter: brightness(2);
	-o-mask-size: 300% 300%;
	-o-mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 80%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0); 
	filter: brightness(2);
	mask-size: 300% 300%;
	mask-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 80%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0); 
}

.lightSweepStart { -webkit-mask-position: 180% 0px; -moz-mask-position: 180% 0px; -o-mask-position: 180% 0px; mask-position: 180% 0px;  }
.lightSweepEnd { -webkit-mask-position: 0% 0px; -moz-mask-position: 0% 0px; -o-mask-position: 0% 0px; mask-position: 0% 0px; }

.movieOpen {display:none;}
.copyRight {display:; position:absolute; left:0; bottom:0; width:100%; height:36px; z-index:99;}
.copyRight img {position:absolute; left:26px; top:12px;}
.effectspeak01, .effectspeak02, .effectspeak03, .effectspeak04, .effectspeak05, .effectspeak06, .effectspeak07, .pagespeak, .bgeffect, .introeffect {display:none;}
.effectspeak08, .effectspeak09, .effectspeak10 {display:none;}
.bgspeak {display:none;}


/* modal margin */
[id^="modal-"] {margin:auto;}
.movieOpen {visibility:hidden;}
.popmovie {position:relative; width:720px; height:448px;}
.popmovie:after {content:""; display:block; clear:both;}
.popmovie .closeBtn {position:absolute; left:50%; bottom:0; margin:0 0 0 -53px; width:107px; height:28px; background:url('../images/img/skip1.png') left top no-repeat;}
.popmovie .closeBtn:hover {background:url('../images/img/skip2.png') left top no-repeat;}
/*** video ****/
#videoWrap {position:relative; width:100%; overflow:hidden;}
#video_background {display:none; width:100%; overflow:hidden;}
#videoWrap .playSub {position:absolute; left:50%; top:50%; margin:-100px 0 0 -102px; cursor:pointer;}

#dummy img {width:100%;}


.video-container {
    position: relative;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* sub content */
#contentWrap {width:100%; height:724px; margin:0 auto; color:white; background:url('../images/img/bg_contentwrap.jpg') left top no-repeat;}
#contentWrap.end {background:url('../images/img/bg_contentwrap_end.jpg') left top no-repeat;}
#contentWrap #header {position:relative; width:100%; height:113px; z-index:3;}
#contentWrap #header:after {content:""; display:block; clear:both;}

#contentWrap #header .headerTit {position:relative; width:100%;}
#contentWrap #header .headerTit:after {content:""; display:block; clear:both;}
#contentWrap #header .headerTit .s01 {position:absolute; left:25px; top:17px; display:none; z-index:2;}

#contentWrap #header .headerLesson {position:absolute; left:0; top:78px; width:1024px; height:35px; z-index:0; background:url('../images/img/bg_header_lesson.png') left top no-repeat;}
#contentWrap #header .headerLesson .ab {position:absolute; left:14px; top:9px; font-size:17px; color:#fff; opacity:0; line-height:1.2; letter-spacing:-0.5px;}
#contentWrap #header .headerLesson p {font-size:18px; color:#000; opacity:0; line-height:1.2; margin:8px 0 0 165px;}
#contentWrap #header .headerLesson p span {font-size:18px; color:#000; letter-spacing:-0.5px; line-height:1.2;}

#contentWrap #header .navi {position:absolute; right:13px; top:0; z-index:6;}
#contentWrap #header .navi > ul {float:right;}
#contentWrap #header .navi > ul:after {content:""; display:block; clear:both;}
#contentWrap #header .navi > ul > li {float:left;}
#contentWrap #header .navi > ul > li a {display:block; font-size:16px; color:#fff; line-height:50px; letter-spacing:-0.5px; text-align:center;}

#contentWrap #header .navi > ul > li:nth-child(1) > a {width:145px; height:50px; background:url('../images/img/navi01.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1).on > a {background:url('../images/img/navi01_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1) > a.hover {background:url('../images/img/navi01_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1) > a:hover {background:url('../images/img/navi01_on.png') left bottom no-repeat;}

#contentWrap #header .navi > ul > li:nth-child(2) > a {width:139px; height:50px; background:url('../images/img/navi02.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > a.hover {background:url('../images/img/navi02_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > a:hover {background:url('../images/img/navi02_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2).on > a {background:url('../images/img/navi02_on.png') left bottom no-repeat;}

#contentWrap #header .navi > ul > li:nth-child(3) > a {width:125px; height:50px; background:url('../images/img/navi03.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3).on > a {background:url('../images/img/navi03_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3) > a.hover {background:url('../images/img/navi03_on.png') left bottom no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3) > a:hover {background:url('../images/img/navi03_on.png') left bottom no-repeat;}

/* today lesson */
.todayLesson {display:none; padding:8px 0 0 102px;}
.todayLesson:after {content:""; display:block; clear:both;}
.todayLesson .todayTit {width:100%; margin:6px 0 0 0; background:url('../images/img/bg_todaytit.png') left top no-repeat; overflow:hidden;}
.todayLesson .todayTit p {font-size:18px; color:#fff; line-height:1.2; letter-spacing:-0.5px; padding:46px 0 24px 56px;}
.todayLesson .todayTit2 {width:100%; margin:6px 0 0 -42px; background:url('../images/img/bg_todaytit2.png') left top no-repeat; overflow:hidden;}
.todayLesson .todayTit2 p {font-size:18px; color:#fff; line-height:1.2; letter-spacing:-0.5px; padding:42px 0 21px 100px;}
.todayLesson .todayTit3 {width:100%; margin:6px 0 0 -22px; background:url('../images/img/bg_todaytit3.png') left top no-repeat; overflow:hidden;}
.todayLesson .todayTit3 p {font-size:18px; color:#fff; line-height:1.2; letter-spacing:-0.5px; padding:42px 0 21px 100px;}
.todayLesson .todayConf {width:775px; background:#fff; border-radius:6px; margin:0 0 0 24px;}
.todayLesson .todayConf:after {content:""; display:block; clear:both;}
.todayLesson .todayConf ul.title {padding:46px 0 46px 55px}
.todayLesson .todayConf ul.title li {font-size:18px; color:#000; line-height:1.2; letter-spacing:-0.5px; padding:0 0 0 25px; background:url('../images/img/bg_todayconf_title.png') left top no-repeat;}
.todayLesson .todayConf ul.cont {padding:32px 0 32px 55px}
.todayLesson .todayConf ul.cont li {position:relative; font-size:18px; color:#000; line-height:1.2; letter-spacing:-0.5px; padding:5px 0 5px 43px; margin:12px 0;}
.todayLesson .todayConf ul.cont li span {position:absolute; left:0; top:0; display:inline-block; width:28px; height:28px; font-size:15px; color:#000; line-height:30px; letter-spacing:-0.5px; text-align:center; background:url('../images/img/bg_todayconf_cont.png') left top no-repeat;}
.todayLesson .todayConf ul.cont li:last-child {padding-bottom:32px;}
.todayLesson .todayConf ul.next {padding:24px 0 24px 55px}
.todayLesson .todayConf ul.next li {font-size:18px; color:#000; line-height:1.2; letter-spacing:-0.5px;}



#contentWrap .footer {position:absolute; left:0; bottom:0; width:100%; height:37px; z-index:3;}
#contentWrap .footer:after {content:""; display:block; clear:both;}
#contentWrap .footer .copyRight {display:inline-block; position:relative; left:0; bottom:auto; padding:0 0 0 28px;}
#contentWrap .footer .copyRight img {left:15px; top:12px;}
#contentWrap .footer .paging {position:absolute; right:8px; bottom:5px; z-index:999;}
#contentWrap .footer .paging * {vertical-align:top;}
#contentWrap .footer .paging img {padding:0 8px; margin:0 0 0 0;}
#contentWrap .footer .paging a {display:inline-block; width:24px; height:24px; margin:0 4px;}
#contentWrap .footer .paging a.pBtn {background:url('../images/img/btn_page_prev.png') left top no-repeat;}
#contentWrap .footer .paging a.nBtn {background:url('../images/img/btn_page_next.png') left top no-repeat;}
/*#contentWrap .footer .paging a.pBtn:hover {background:url('../images/img/btn_page_prev_on.png') left top no-repeat;}
#contentWrap .footer .paging a.nBtn:hover {background:url('../images/img/btn_page_next_on.png') left top no-repeat;}*/
#contentWrap .footer .paging span {display:inline-block; font-size:18px; color:#a73ad4; line-height:24px;}
#contentWrap .footer .paging u {display:inline-block; font-size:18px; color:#fff; line-height:24px; text-decoration:none;}
#contentWrap .footer .paging .click {position:absolute; top:-45px; right:60px; display:none;}