/* #======================================================= section1 */
.section1{ position: relative; z-index: 2;}
.section1 .videoWrap {position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:0; }
.section1 .videoWrap iframe, .section1 .videoWrap object, .section1 .videoWrap embed{position:absolute; top:0; left:0; width:100%; height:100%; }

.video-area { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; }

.section1 .videoSlogan { position: absolute; left: 50%; transform:translateX(-50%); top:39%; text-align: center; }
.section1 .videoSlogan p { font-size:50px; font-weight:400; font-style:normal; line-height:50px; color:rgba(255,255,255,1); letter-spacing: 1px; text-shadow:rgba(0,0,0,0.5) 0px 2px 6px; background-color:rgba(0,0,0,0); padding:0; }
.section1 .videoSlogan p:first-child{ font-size: 13px; padding-bottom: 30px; line-height: 13px;}

#section1 .control{ font-size: 0; position: absolute; bottom: 210px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center;}
#section1 .control li{ display: inline-block; padding: 0 5px;}
#section1 .control li a{ display: block; font-size: 18px; color: #fff; width: 40px; height: 40px; line-height: 35px; border-radius: 50%; border: 2px solid #fff; text-align: center;}
#section1 .control li i{ color: #fff;}

#section1 .control .play-pause a.hide{ display: none;}
#section1 .control .mute-onoff a.hide{ display: none;}

.vidbox .ratio iframe, .end-video .videoWrap iframe{pointer-events: none;}

#section1 .vscrollDown { position: absolute; bottom: 100px; right: 0; left: 0; margin: auto; width: 65px; height: 45px; background: url(http://img.einet.kr/responsive/home/carousel/theme02/scroll_down.png) 0 0 no-repeat; z-index: 10; cursor: pointer; }

/* 1024px */
@media (max-width: 1024px) {
    #section1{ margin-top: 75px;}
    #section1 .videoSlogan { top: 28%; }
    #section1 .videoSlogan p { font-size:25px; font-weight:400; font-style:normal; line-height:25px; color:rgba(255,255,255,1); letter-spacing: 1px; text-shadow:rgba(0,0,0,0.5) 0px 2px 6px; background-color:rgba(0,0,0,0); padding:0; }
    #section1 .videoSlogan p:first-child{ width: 200%; position: relative; transform: scale(.5); left: -50%; padding-bottom: 15px; }

    #section1 .control li a{ display: block; font-size: 10px; color: #fff; width: 20px; height: 20px; line-height: 17px; border-radius: 50%; border: 1px solid #fff; text-align: center;}

    #section1 .control{ bottom: 30px; display: none; }
}





/* #======================================================= section2 */
#section2{ z-index: 2; background-color: #fff;}
#lastsection .play-pause, #section2 .play-pause{ position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(50% - 20px); z-index: 10; text-align: center;}
#lastsection .play-pause a, #section2 .play-pause a{ display: inline-block; font-size: 18px; color: #fff; width: 40px; height: 40px; line-height: 35px; border-radius: 50%; border: 2px solid #fff; text-align: center;}
#lastsection .play-pause i, #section2 .play-pause i{ color: #fff;}

#lastsection .play-pause a.hide, #section2 .play-pause a.hide{ display: none;}

#section2 .vidbox-wrap{position:relative; width:100%; margin:10px auto 10px;}

.ta-l{text-align:left; padding-left:100px; padding-right:50px;}
.ta-r{text-align:right; padding-right:100px; padding-left:50px;}
.clb:after{content:""; display:block; clear:both; }
.ratio{width:100%; position:relative}
.ratio:before{content:""; display:block; padding-top:56.2555555555%; }
.ratio__box{position:absolute; width:100%; height:100%; left:0; top:0; }

.video-box{width:100%; height:100%;}
#section2 .vidbox-row{ margin-top: 0; position:relative}

#section2 .vidbox-row__inbox{width:50%; height:100%; position:absolute; overflow:hidden; position:relative}
#section2 .vidbox-row__inbox.type-vid.right{margin-left:50%}
#section2 .vidbox-row__inbox.type-txt{position:absolute; width:50%}
#section2 .vidbox-row__inbox.type-txt.type-a{background-color: #fefefe; right:0; height:100%}
#section2 .vidbox-row__inbox.type-txt.type-b{background-color: #fefefe; left:0; height:100%}
#section2 .vidbox-row__table{width:100%; height:100%; display:table}
#section2 .vidbox-row__cell{display:table-cell; vertical-align:middle; width:1%}
#section2 .vidbox-row__inner{display:inline-block}
#section2 .vidbox-row__tit{ font-size:50px; }
#section2 .vidbox-row__sub{ font-size:16px; margin-top:45px; line-height: 22px; word-break:keep-all; opacity: .6;}

.vidbox .videoWrap iframe{position:absolute; top:-10%; left:-10%; width:120%; height:120%}
.vidbox .videoWrap{padding-top:56.2555555%; margin-top:-5%}

/* 1024px */
@media (max-width: 1024px){
    #lastsection .play-pause, #section2 .play-pause{ position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(50% - 10px); z-index: 10; text-align: center;}
    #lastsection .play-pause a, #section2 .play-pause a{ display: inline-block; font-size: 10px; color: #fff; width: 20px; height: 20px; line-height: 17px; border-radius: 50%; border: 1px solid #fff; text-align: center;}

    .vidbox .videoWrap{ margin-top: 75px; }
    .vidbox .videoWrap iframe{display:block; position:absolute; top:0; left:0; width:100%; height:100%; }

    .ta-l{text-align:left; padding-left:15px; padding-right:15px}
    .ta-r{text-align:right; padding-right:15px; padding-left:15px}
    #section2 .vidbox-row__inbox{width:auto}
    #section2 .vidbox-row__inbox.type-vid{width:50%}
    #section2 .vidbox-row__inbox.type-txt{width:50%}
    #section2 .vidbox-row__tit{font-size:15px; line-height:15px; position: relative; }
    #section2 .vidbox-row__sub{font-size:24px; line-height: 28px; margin-top:0; width: 200%; position: relative; transform: scale(.5); left: -50%; display: none; }
}




/* #======================================================= section3 */
#section3{ position: relative; z-index: 2;}


/* #======================================================= section4 */
#section4{ position: relative; background-color: #fff; z-index: 2;}
#section4 .deco{ position: absolute; font-size: 16px; transform: rotate(90deg); width: 100px; top: 130px; left: 60px;}
#section4 .wrap1200{ position: relative; overflow: hidden;}

#section4 .img{ padding-top: 0; width: 680px; height: 400px;}

#section4 .wrap1200 > div:nth-child(2){height: 400px; padding-left: 55px; position: relative;}
#section4 .wrap1200 h3{ font-size: 50px; line-height: 50px; padding-bottom: 30px;}
#section4 .wrap1200 p.ha{ font-size: 16px; line-height: 16px; padding-bottom: 20px;}
#section4 .wrap1200 p.kor{ opacity: .4; font-size: 16px; line-height: 22px;}

#section4 .wrap1200 a{ position: absolute; display: block; bottom: 25px; font-size: 16px; padding-bottom: 10px; color: #263a4f; transition: .3s; }
#section4 .wrap1200 a:after{position: absolute; content: ''; width: 100%; height: 3px; background-color: #263a4f; bottom: 0; left: 0; transition: .3s;}
#section4 .wrap1200 a i{ color: rgba(38,58,79,0); font-size: 16px; padding-left: 25px; transition: .3s;}
#section4 .wrap1200 a:hover{ color: #a3cc01;  }
#section4 .wrap1200 a:hover:after{ background-color: #a3cc01; }
#section4 .wrap1200 a:hover i{ color: rgba(163,204,1,1); font-size: 16px; padding-left: 50px; }
/*  1024px */
@media (max-width: 1024px){
    #section4{ padding-top: 0; padding-bottom: 0;}
    #section4 .deco{ position: relative; font-size: 10px; transform: rotate(0); padding-left: 15px; padding-bottom: 15px; width: auto; top: unset; left: unset;}
    #section4 .img{ padding-top: 56.25%; width:100%; height: 0; margin-bottom: 30px;}

    #section4 .wrap1200 > div:nth-child(2){ width: 100%; height:auto; padding-left: 0; position: relative; text-align: center;}
    #section4 .wrap1200 h3{ font-size: 35px; line-height: 35px; padding-bottom: 25px;}
    #section4 .wrap1200 p.ha{ font-size: 16px; line-height: 16px; padding-bottom: 10px;}
    #section4 .wrap1200 p.kor{ opacity: .4; font-size: 16px; line-height: 22px; padding-bottom: 32.5px;}

    #section4 .wrap1200 a{ position: relative; display: inline-block; bottom: 0; font-size: 15px; padding-bottom: 10px; margin-bottom: 40px; color: #263a4f; transition: .3s; }
    #section4 .wrap1200 a:after{position: absolute; content: ''; width: 100%; height: 3px; background-color: #263a4f; bottom: 0; left: 0; transition: .3s;}
    #section4 .wrap1200 a i{ color: rgba(38,58,79,0); font-size: 15px; padding-left: 0; transition: .3s;}
    #section4 .wrap1200 a:hover i{font-size: 15px; padding-left: 15px; }
    
}

/* #======================================================= section5 */
#section5 .top-img, #section6 .top-img{ position: relative; height: 800px; padding-top: 0; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; z-index: 2;}
#section5 .top-img:after, #section6 .top-img:after{ content: ''; position: absolute; width: 100%; height: 100%; background-color: #333; opacity: .5; left: 0; top: 0;}
#section5 .top-img p, #section6 .top-img p{ position: absolute; display: block; top: calc(50% - 20px); width: 100%; font-size: 50px; text-shadow: 0 1px 2px rgba(51,51,51,0.3); text-align: center; z-index: 3;}

#section5 .bottom{ position: relative; padding-bottom: 45px; background-image: url(../img/common/section05-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;}
#section5 .bottom #deco1{ pointer-events: none; position: fixed; font-size: 250px; transform: rotate(90deg); opacity: 0;  top: 500px; left: -350px; }
#deco1.visible, #deco2.visible{ opacity: .1!important;  }


#section5 .bottom .wrap1200{ text-align: center;}
#section5 .bottom .wrap1200 > h3{ font-size: 50px; line-height: 50px; padding-bottom: 25px;} 
#section5 .bottom .wrap1200 > p.ha{ font-size: 16px; opacity: .3; padding-bottom: 25px;}
#section5 .bottom .wrap1200 > a{ margin-bottom: 10px;}
/*  1024px */
@media (max-width: 1024px){
    #section5 .top-img, #section6 .top-img{ position: relative; height: 40vw; }
    #section5 .top-img p, #section6 .top-img p{ top: calc(50% - 10px); width: 100%; font-size: 25px; }
    

    #section5 .bottom{ padding-top: 30px; padding-bottom: 20px; background-image: url(../img/common/m-section05-bg.jpg); }
    #section5 .bottom #deco1{ position: absolute; font-size: 124px; transform: rotate(90deg); opacity: .1; z-index: 1; top: 182.5px; left: -235px;}

    #section5 .bottom .wrap1200 > h3{ font-size: 35px; line-height: 35px; padding-bottom: 13px;} 
    #section5 .bottom .wrap1200 > p.ha{ font-size: 16px; opacity: .3; padding-bottom: 15px;}
    #section5 .bottom .wrap1200 > a{ margin-bottom: 30px;}
    
}

/* #======================================================= section6 */
#section6 .bottom{ position: relative; padding-bottom: 80px; background-image: url(../img/common/section06-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
#section6 .bottom #deco2{ pointer-events: none; position: fixed; font-size: 250px; transform: rotate(90deg); opacity: 0; z-index: 1; top: 460px; left: -200px;}

#section6 .bottom .wrap1200{ text-align: center;}
#section6 .bottom .wrap1200 > h3{ font-size: 50px; line-height: 50px; padding-bottom: 30px;} 
#section6 .bottom .wrap1200 > a{ margin-bottom: 50px;}

#section6 .bottom .wrap1200 .swiper-wrap{ overflow: hidden;}
#section6 .bottom .special-swiper{ width: 1020px;}
#section6 .bottom .append-buttons{width: calc(100% - 1020px);}

#section6 .bottom .special-swiper .swiper-slide{ padding-top: 56.25%; background-size: cover; background-position: center; background-repeat: no-repeat;}

#section6 .bottom .append-buttons a{ display: block; width: 100%; padding-left: 30px; height: 40px; line-height: 40px; font-size: 14px; color: #263a4f; text-align: left;}
#section6 .bottom .append-buttons a.active{ background-color: #263a4f; color: #fff; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}

/*  1024px */
@media (max-width: 1024px){

    #section6 .bottom{ padding-top: 35px; padding-bottom: 35px; background-image: url(../img/common/m-section06-bg.jpg); }
    #section6 .bottom #deco2{ position: absolute; font-size: 124px; transform: rotate(90deg); opacity: .1; z-index: 1; top: 120.5px; left: -155px;}

    #section6 .bottom .wrap1200 > h3{ font-size: 35px; line-height: 35px; padding-bottom: 13px;} 
    #section6 .bottom .wrap1200 > a{ margin-bottom: 15px;}

    #section6 .bottom .special-swiper{ width: 100%;}
    #section6 .bottom .append-buttons{width: 100%;}

    .special-next, .special-prev{ top: calc(50% + 10px);}
    #section6 .bottom .append-buttons a{ display: block; width: 165px; padding-left: 10px; padding-right: 10px; height: 30px; line-height: 30px; font-size: 16px; color: #263a4f; text-align: left;}
    #section6 .bottom .append-buttons a.active{ background-color: #263a4f; color: #fff; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}  
}



#section7{ position: relative; z-index: 3;}



/* #======================================================= section8 */
#section8{ padding-top: 80px; padding-bottom: 50px; background-image: url(../img/common/section08-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center; z-index: 3;}
#section8 h3{ font-size: 50px; line-height: 50px; padding-bottom: 30px; margin-bottom: 30px; position: relative;}
#section8 h3::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100px; height: 3px; background-color: #263a4f;}
#section8 p{ font-size: 16px; opacity: .3;}


/*  1024px */
@media (max-width: 1024px){
    #section8{ padding-top: 40px; padding-bottom: 25px; background-image: url(../img/common/m-section08-bg.jpg); margin-bottom: 0;}
    #section8 h3{ font-size: 35px; line-height: 35px; padding-bottom: 17.5px; margin-bottom: 17.5px; position: relative;}
    #section8 h3::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 50px; height: 2px; background-color: #263a4f;}
    #section8 p{ font-size: 16px; opacity: .3;}
}




#lastsection{ position: relative; z-index: 0; width: 100%; top: 0; }