html {background:#000;}
/* layout */
#wrap {position:absolute; left:50%; top:50%; width:1024px; 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 .teacher {position:absolute; left:-100%; bottom:0; opacity:1; z-index:4;}
#intro .teacherName {position:absolute; left:30px; top:400px; opacity:0; z-index:4;}
#intro .explan {position:absolute; left:395px; top:-100%; z-index:4;}
#intro .introTxt01 {position:absolute; left:448px; top:119px; display:none; z-index:4;}
#intro .introTxt02 {position:absolute; left:449px; top:152px; display:none; z-index:4;}
#intro .introTxt03 {position:absolute; left:449px; top:238px; opacity:0; transform:scale(4,4); z-index:4;}
#intro .introTxt04_blet {position:absolute; left:350px; top:475px; display:none; z-index:4;}
#intro .introTxt04 {position:absolute; left:382px; top:480px; display:none; z-index:4;}
#intro .lesson {position:absolute; left:320px; top:506px; display:none; width:550px; height:46px; background:url('../images/img/bg_lesson.png') left top no-repeat; z-index:4;}
#intro .lesson p {position:absolute; left:45px; top:15px; opacity:0;}
#intro .lesson p span {font-size:16px; color:#000; font-weight:600; line-height:1.2;}
#intro .book {position:absolute; right:-100%; top:197px; z-index:4;}
#intro .bookAdd {position:absolute; right:18px; top:84px; opacity:0; z-index:3;}
#intro .download {position:absolute; left:727px; top:590px; z-index:6;}
#intro .download a.pdf {position:absolute; left:0; top:0; width:63px; height:68px; opacity:0; background:url('../images/img/txt_pdf_down.png') left top no-repeat;}
#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_active.png') left top no-repeat;}
#intro .download a.mp3 {position:absolute; left:65px; top:0; width:63px; height:68px; opacity:0; background:url('../images/img/txt_mp3_down.png') left top no-repeat;}
#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_active.png') left top no-repeat;}
#intro .start {display:none; position:absolute; right:6px; top:599px; z-index:6;}
#intro .start a {display:block; width:140px; height:52px; 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_active.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_pdf_down_active.png') url('../images/img/txt_mp3_down_hover.png') url('../images/img/txt_mp3_down_active.png') url('../images/img/img_start_hover.png') url('../images/img/img_start_active.png');
}
.copyRight {display:none; position:absolute; left:15px; bottom:11px;}
.effectspeak01, .effectspeak02, .effectspeak03, .effectspeak04, .effectspeak05, .effectspeak06, .effectspeak07, .pagespeak, .bgeffect {display:none;}
.bgspeak {display:none;}
.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; }
/* sub content */
#contentWrap {width:100%; height:724px; background:url('../images/img/bg_content_wrap.jpg') left top no-repeat; background-size:cover;}
#contentWrap.organize {background:url('../images/img/bg_content_wrap_organize.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%; height:74px;}
#contentWrap #header .headerTit:after {content:""; display:block; clear:both;}
#contentWrap #header .headerTit .s01 {position:absolute; left:30px; top:16px; display:none; z-index:2;}
#contentWrap #header .headerTit .s02 {position:absolute; left:184px; top:17px; opacity:0; transform:scale(4,4); z-index:3;}
#contentWrap #header .headerLesson {position:absolute; left:0; top:74px; height:39px; width:100%; z-index:4;}
#contentWrap #header .headerLesson .lecture {display:none; position:absolute; left:36px; top:11px; font-size:15px; color:#fff; line-height:1.2;}
#contentWrap #header .headerLesson .txt {position:absolute; left:97px; top:11px; opacity:0;}
#contentWrap #header .headerLesson .txt span {font-size:15px; color:#000; line-height:1.2;}
#contentWrap #header .navi {position:absolute; right:0; top:0; z-index:6;}
#contentWrap #header .navi.interval {right:89px;}
#contentWrap #header .navi > ul {float:right;}
#contentWrap #header .navi > ul:after {content:""; display:block; clear:both;}
#contentWrap #header .navi > ul > li {float:left; opacity:0;}
#contentWrap #header .navi > ul > li a {display:block; text-indent:-9999px;}
#contentWrap #header .navi > ul > li > ul {position:absolute; left:0; top:63px; display:none;}
#contentWrap #header .navi > ul > li > ul li {float:left;}
#contentWrap #header .navi > ul > li:nth-child(1) > a {width:103px; height:73px; background:url('../images/img/navi01.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1).on > a {background:url('../images/img/navi01_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1) > a.hover {background:url('../images/img/navi01_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(1) > a:hover {background:url('../images/img/navi01_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > a {width:89px; height:73px; background:url('../images/img/navi02.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > a.hover {background:url('../images/img/navi02_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > a:hover {background:url('../images/img/navi02_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(2) > ul {left:30px;}
#contentWrap #header .navi > ul > li:nth-child(2).on > a {background:url('../images/img/navi02_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3) > a {width:119px; height:73px; background:url('../images/img/navi03.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3).on > a {background:url('../images/img/navi03_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3) > a.hover {background:url('../images/img/navi03_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(3) > a:hover {background:url('../images/img/navi03_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(4) > a {width:132px; height:73px; background:url('../images/img/navi04.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(4) > a.hover {background:url('../images/img/navi04_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(4) > a:hover {background:url('../images/img/navi04_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(4) > ul {left:292px;}
#contentWrap #header .navi > ul > li:nth-child(4).on > a {background:url('../images/img/navi04_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(5) > a {width:103px; height:73px; background:url('../images/img/navi05.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(5).on > a {background:url('../images/img/navi05_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(5) > a.hover {background:url('../images/img/navi05_on.gif') left top no-repeat;}
#contentWrap #header .navi > ul > li:nth-child(5) > a:hover {background:url('../images/img/navi05_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(1) > a {width:119px; height:73px; background:url('../images/img/navi01_other.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(1).on > a {background:url('../images/img/navi01_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(1) > a.hover {background:url('../images/img/navi01_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(1) > a:hover {background:url('../images/img/navi01_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(2) > a {width:140px; height:73px; background:url('../images/img/navi02_other.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(2).on > a {background:url('../images/img/navi02_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(2) > a.hover {background:url('../images/img/navi02_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(2) > a:hover {background:url('../images/img/navi02_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(3) > a {width:143px; height:73px; background:url('../images/img/navi03_other.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(3).on > a {background:url('../images/img/navi03_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(3) > a.hover {background:url('../images/img/navi03_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(3) > a:hover {background:url('../images/img/navi03_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(3) > ul {left:292px;}
#contentWrap #header .navi.other > ul > li:nth-child(4) > a {width:143px; height:73px; background:url('../images/img/navi04_other.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(4).on > a {background:url('../images/img/navi04_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(4) > a.hover {background:url('../images/img/navi04_other_on.gif') left top no-repeat;}
#contentWrap #header .navi.other > ul > li:nth-child(4) > a:hover {background:url('../images/img/navi04_other_on.gif') left top no-repeat;}
#contentWrap .footer {position:absolute; left:0; bottom:0; width:100%; height:36px; z-index:3;}
#contentWrap .footer:after {content:""; display:block; clear:both;}
#contentWrap .footer .copyRight {display:inline-block; position:relative; left:0; bottom:auto; padding:12px 0 0 15px;}
#contentWrap .footer .paging {position:absolute; right:8px; bottom:5px;}
#contentWrap .footer .paging * {vertical-align:middle;}
#contentWrap .footer .paging img {padding:0 8px; margin:-2px 0 0 0;}
#contentWrap .footer .paging span {font-size:18px; color:#fff; font-weight:600; line-height:17px;}
#contentWrap .footer .paging u {font-size:18px; color:#004359; font-weight:600; line-height:17px; text-decoration:none;}
#contentWrap .footer .paging .click {position:absolute; top:-46px; right:-12px; display:none;}
/* movie move */
.partChange {display:none; position:absolute; top:63px; z-index:6;}
.partChange.sub02 {left:507px;}
.partChange.sub02 ul:after {content:""; display:block; clear:both;}
.partChange.sub02 ul li {float:left;}
.partChange.sub02 ul li a {display:block;}
.partChange.sub02 ul li:nth-child(1) a {width:134px; height:34px; background:url('../images/img/navi02_01.png') left top no-repeat;}
.partChange.sub02 ul li:nth-child(1) a:hover {background:url('../images/img/navi02_01_on.png') left top no-repeat;}
.partChange.sub02 ul li:nth-child(1) a.on {background:url('../images/img/navi02_01_on.png') left top no-repeat;}
.partChange.sub02 ul li:nth-child(2) a {width:104px; height:34px; background:url('../images/img/navi02_02.png') left top no-repeat;}
.partChange.sub02 ul li:nth-child(2) a:hover {background:url('../images/img/navi02_02_on.png') left top no-repeat;}
.partChange.sub02 ul li:nth-child(2) a.on {background:url('../images/img/navi02_02_on.png') left top no-repeat;}
.partChange.sub05 {left:770px;}
.partChange.sub05 ul:after {content:""; display:block; clear:both;}
.partChange.sub05 ul li {float:left;}
.partChange.sub05 ul li a {display:block;}
.partChange.sub05 ul li:nth-child(1) a {width:84px; height:34px; background:url('../images/img/navi04_01.png') left top no-repeat;}
.partChange.sub05 ul li:nth-child(1) a:hover {background:url('../images/img/navi04_01_on.png') left top no-repeat;}
.partChange.sub05 ul li:nth-child(1) a.on {background:url('../images/img/navi04_01_on.png') left top no-repeat;}
.partChange.sub05 ul li:nth-child(2) a {width:86px; height:34px; background:url('../images/img/navi04_02.png') left top no-repeat;}
.partChange.sub05 ul li:nth-child(2) a:hover {background:url('../images/img/navi04_02_on.png') left top no-repeat;}
.partChange.sub05 ul li:nth-child(2) a.on {background:url('../images/img/navi04_02_on.png') left top no-repeat;}
/* single */
.partChange.sub02.single {left:571px;}
.partChange.sub02.single ul li:nth-child(1) a {width:108px; height:34px; background:url('../images/img/navi02_01_single.png') left top no-repeat;}
.partChange.sub02.single ul li:nth-child(1) a:hover {background:url('../images/img/navi02_01_single.png') left top no-repeat;}
.partChange.sub02.single ul li:nth-child(1) a.on {background:url('../images/img/navi02_01_single.png') left top no-repeat;}
.partChange.sub05.single {left:731px;}
.partChange.sub05.single ul li:nth-child(1) a {width:134px; height:35px; background:url('../images/img/navi05_01_single.png') left top no-repeat;}
.partChange.sub05.single ul li:nth-child(1) a:hover {background:url('../images/img/navi05_01_single.png') left top no-repeat;}
.partChange.sub05.single ul li:nth-child(1) a.on {background:url('../images/img/navi05_01_single.png') left top no-repeat;}
.partChange.sub05.single2 {left:787px;}
.partChange.sub05.single2 ul li:nth-child(1) a {width:134px; height:35px; background:url('../images/img/navi05_01_single2.png') left top no-repeat;}
.partChange.sub05.single2 ul li:nth-child(1) a:hover {background:url('../images/img/navi05_01_single2.png') left top no-repeat;}
.partChange.sub05.single2 ul li:nth-child(1) a.on {background:url('../images/img/navi05_01_single2.png') left top no-repeat;}
.partChange.sub05.single3 {left:730px;}
.partChange.sub05.single3 ul li:nth-child(1) a {width:156px; height:34px; background:url('../images/img/navi05_01_single3.png') left top no-repeat;}
.partChange.sub05.single3 ul li:nth-child(1) a:hover {background:url('../images/img/navi05_01_single3.png') left top no-repeat;}
.partChange.sub05.single3 ul li:nth-child(1) a.on {background:url('../images/img/navi05_01_single3.png') left top no-repeat;}
/* today lesson */
.todayLesson {display:none; margin:0 0 0 60px;}
.todayLesson:after {content:""; display:block; clear:both;}
.todayLesson .todayTit {width:100%; padding:50px 0 22px 0; overflow:hidden;}
.todayLesson .todayConf {width:100%; margin:0 0 95px 0; overflow:hidden;}
.todayLesson .todayConf ul:after {content:""; display:block; clear:both;}
.todayLesson .todayConf ul li {display:block; margin:0 0 0 6px; padding:3px 0 0 40px; background:url('../images/img/bg_todayconf_li.png') left top no-repeat;}
.todayLesson .todayTit02 {width:100%; padding:0 0 20px 0; overflow:hidden;}
.todayLesson .todayConf02 ul:after {content:""; display:block; clear:both;}
.todayLesson .todayConf02 ul li {display:block; margin:0 0 0 10px;}
.todayLesson {display:none; margin:0 0 0 60px;}
.todayLesson:after {content:""; display:block; clear:both;}
.todayLesson .todayTit {width:100%; padding:50px 0 22px 0; overflow:hidden;}
.todayLesson .todayConf {width:100%; margin:0 0 95px 0; overflow:hidden;}
.todayLesson .todayConf ul:after {content:""; display:block; clear:both;}
.todayLesson .todayConf ul li {display:block; margin:0 0 0 6px; padding:3px 0 0 40px; background:url('../images/img/bg_todayconf_li.png') left top no-repeat;}
/* final lesson */
.finalLesson {display:none;}
.finalLesson:after {content:""; display:block; clear:both;}
.finalLesson .finalTit {padding:50px 0 11px 60px;}
.finalLesson .finalTit:after {content:""; display:block; clear:both;}
.finalLesson .finalConf {padding:0 0 0 42px;}
.finalLesson .finalConf02 {padding:0 0 0 70px;}
.finalLesson .nextWrap {display:none; position:absolute; left:0; bottom:66px;}
.finalLesson .nextWrap:after {content:""; display:block; clear:both;}
.finalLesson .nextTit {padding:0 0 10px 60px;}
.finalLesson .nextTit:after {content:""; display:block; clear:both;}
.finalLesson .nextConf {padding:0 0 0 70px;}
.finTeacher {position:absolute; right:-100%; bottom:0; }
/* 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%;
}