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 .lesson {opacity:0; position:absolute; left:0; top:613px; width:100%; z-index:30;}
#intro .lesson p {opacity:0; width:100%; font-size:18px; text-align:center; color:#fff; font-weight:400; line-height:1.4;}
#intro .lesson p span {font-size:18px; text-align:center; color:#fff; font-weight:400; line-height:1.4;}


#intro .download {position:absolute; left:850px; bottom:185px; width:15%; z-index:34;}
#intro .download a {display:inline-block; opacity:0;}
#intro .download a.mp3 {width:63px; height:68px; 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:63px; height:68px; 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:30px; bottom:35px; z-index:46; opacity:0;}
#intro .start a {display:block; width:116px; height:110px; 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');
}


.movieOpen {display:none;}
.copyRight {display:; position:absolute; left:0; bottom:0; width:100%; height:35px; z-index:99;}
.copyRight img {position:absolute; left:15px; top:10px;}
.effectspeak01, .effectspeak02, .effectspeak03, .effectspeak04, .effectspeak05, .effectspeak06, .effectspeak07, .pagespeak, .bgeffect {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; background:url('../images/img/bg_contentwrap.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 .headerLesson {position:absolute; left:30px; top:83px; height:22px; width:100%; opacity:0;}
#contentWrap #header .headerLesson p {opacity:0; font-size:16px;  color:#fff; font-weight:400; line-height:22px;}
#contentWrap #header .headerLesson p span {font-size:16px; color:#fff; font-weight:400; line-height:22px;}

#contentWrap .footer {position:absolute; left:0; bottom:0; width:100%; height:35px; 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 .copyRight img {left:15px; top:10px;}
#contentWrap .footer .paging {position:absolute; right:8px; bottom:4px; z-index:999;}
#contentWrap .footer .paging * {vertical-align:middle;}
#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 8px 0;}
#contentWrap .footer .paging a.pBtn {background:url('../images/img/btn_page_prev.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 {background:url('../images/img/btn_page_next.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 {font-size:18px; color:#fff; line-height:24px;}
#contentWrap .footer .paging u {font-size:18px; color:#00b7ee; line-height:24px; text-decoration:none;}
#contentWrap .footer .paging .click {position:absolute; top:-45px; right:60px; display:none;}


.endTit {position:absolute; left:0; top:320px; width:100%; text-align:center; z-index:4; opacity:0; overflow:hidden;}