@import url("layout.css");

#main_container{position:relative; }
#header{position:fixed; }

/* section*/
.section{position:relative;}

/** section02 **/
.section02 h3{font-family: 'notosans'; color:#003657; font-size:1.25rem; margin:2rem auto 1rem; text-align:center; overflow:hidden;}
.section02 h3 span{color:#007bc7; }
.section02:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:45vh; background:#eef9ff; z-index:0;}

/* main popup */
.mainPopup{width:27rem; position:absolute; left:5%; top:20%; background-color:rgba(7,21,58,.96); padding:0 1rem .5rem; z-index:10; border-radius:0 0 10px 10px;}
.mainPopup .cont {position:relative; text-align:center;}
.mainPopup video{width:100%; height:14rem;}
.mainPopup h4{font-family:'notosans';color:#fff; font-size: .9rem; padding: .7rem 0; font-weight:400; text-align: center;}
.mainPopup p{position:relative; text-align:right; padding:0 5px;}
.mainPopup p > a{color:#fff; font-size:14px; vertical-align: top; opacity: .8; transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
.mainPopup p > a i{font-size:1rem; vertical-align: top; margin-top:2px; margin-left:3px;}
#videoPlay{position:absolute;  width:100%; left:0; top:2.6rem; height:14rem; z-index:1; text-align:center; background:rgba(0,0,0,0.1);}
#videoPlay i{position:relative; top:50%; margin-top:-2rem; font-size:4rem; color:rgba(0,0,0,0.5);}
/* .mainPopup a{position:absolute; right:10px; top:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:rgba(0,0,0,0.75); font-size:14px; color:#fff; opacity: .5; }*/
.mainPopup a:hover,
.mainPopup a:focus{ opacity: 1;}
.mainPopup .subtitle {display:block; width:100%; height:90px; line-height:1.8; font-size:.75rem; resize:none;}

/* main popup2 */
.mainPopup2{width:27rem; position:absolute; right:5%; top:20%; background-color:rgba(7,21,58,.96); padding:0 1rem .5rem; z-index:10; border-radius:0 0 10px 10px;}
.mainPopup2 .cont {position:relative; text-align:center;}
.mainPopup2 .cont img{width: 100%; height: 100%;}

/* visual */
.visual{position:relative; width:100%; height:100%; font-family: 'notosans'; overflow:hidden;}
.visual div[class^='slick']{height:100%;}
.visual .img{position:relative; width:100%; height:100%; z-index: 0;}
.visual .img p{width:100%; height:100%; background-size:cover; background-repeat: no-repeat; background-position:center;}
.visual .img .slick-arrow{display:none !important;}
.visual .slogan{position:absolute; left:50%; top:50%; width:95%; max-width:70rem; color:#fff; text-align:center; word-break: keep-all; overflow:hidden; z-index: 1; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.visual .txt p{font-size:3.25rem; line-height:1.3; font-family: 'notosans'; font-weight: 200; letter-spacing: -3px; text-shadow: 2px 2px 5px rgba(0,0,0,.45);}
.visual .txt p em{font-weight: 600;}
.visual .txt p em.col1{color:#90c31f;}
.visual .txt p em.col2{color:#007bc7;}
.visual .txt span{position:relative; display:block; padding:1.5rem 0; font-size: 1rem; font-weight: 200;/* opacity: .5; */letter-spacing: 1px; text-shadow: 2px 2px 5px rgba(0,0,0,.40);}
.visual .control{text-align:center; color:#fff; line-height:1rem; z-index: 1; text-shadow: 2px 2px 5px rgba(0,0,0,.40);}
.visual .control > a{display:inline-block; font-size:1rem; }
.visual .control .page{display:inline-block; font-family: 'notosans'; letter-spacing: 1px; vertical-align: top; margin: 0 .25rem;}
.visual .control .page *{display:inline-block; vertical-align: top;}
.visual .control .page strong{font-size:1rem; font-weight: 400;}
.visual .control .page span{/*opacity: .75;*/ font-size:.9rem; font-weight: 200;}
.visual .control #visualPlay{display:none;}
.visual .arrow{position:relative; overflow:hidden; margin-top:2rem;}
.visual .arrow:before{content:""; position:absolute; left:2.5rem; top:50%; width:calc(100% - 5rem); height:1px; margin-top:-1px; background:rgba(255,255,255,0.5);}
.visual .arrow a{display:block; width:2rem; height:2rem;}
.visual .arrow .prev{float:left; background:url('/images/web/eng/main/ico_arrow_left.png') no-repeat left center/cover; }
.visual .arrow .next{float:right; background:url('/images/web/eng/main/ico_arrow_right.png') no-repeat right center/cover; }
.visual a, .visual .page em{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
/* visual:active */

/* gallery */
.gallery{position:relative; width:100%; font-family: 'notosans'; overflow:hidden; z-index:1;}
.gallery h4{font-family: 'notosans'; color:#003657; font-size:1.25rem;}
.gallery .slider{width:100%; padding:2rem 0 0; overflow:hidden; }
.gallery .sEl a{position:relative; display:block; padding:1rem 1.25rem 0; overflow:hidden; }
.gallery .sEl .img{position:relative; width:100%; height:17rem; overflow: hidden; background:rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.25);}
.gallery .sEl .img:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0;
    background:linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-webkit-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-moz-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important; z-index: 1;}
.gallery .sEl .img:after{ content:""; position:absolute; left:50%; top:50%; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:url('/images/web/eng/main/ico_more.png') no-repeat center; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 2; opacity: 0;}
.gallery .sEl img{position:relative; left:50%; width:auto; height:100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.gallery .sEl span{display:block; padding-top:2rem; font-weight: 600; color:#444; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; background:url('/images/web/eng/main/ico_dots.png') no-repeat left 1rem;}
.gallery .more{display:block; width:10rem; line-height:3rem; font-size:.9rem; font-weight: 600; text-align:center; margin:3rem auto 0; color:#fff; border-radius:2rem; background:#007BC7;}
.gallery .slick-arrow{position:absolute; top:11rem; width:2.75rem; height:2.75rem; text-align:center; border-radius:50%; background:#00294c; z-index:1; text-indent:-9999em; overflow:hidden;}
.gallery .slick-prev{left:0;}
.gallery .slick-next{right:0;}
.gallery .slick-arrow:before{position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; font-family: 'xeicon'; color:#fff; line-height:2.75rem; text-indent:0;}
.gallery .slick-prev:before{content:"\e906";}
.gallery .slick-next:before{content:"\e907";}
.gallery a, .gallery :before, .gallery :after{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** gallery:active **/
.gallery .sEl a:hover,
.gallery .sEl a:focus{margin-top:-2rem;}
.gallery .sEl a:hover .img:before,
.gallery .sEl a:focus .img:before{opacity: .75;}
.gallery .sEl a:hover .img:after,
.gallery .sEl a:focus .img:after{opacity: 1;}
.gallery .sEl a:hover span,
.gallery .sEl a:focus span{color:#005e98;}

/* 바로가기01 */
.m_link01{width:100%; height:calc(100vh - 7.2rem); margin-top:7.2rem;}
.m_link01 li{position:relative; width:50%; height:calc(50vh - 3.6rem); display:table; float:left;}
.m_link01 li.lk01{background:url('/images/web/eng/main/img_link01.jpg') no-repeat center/cover;}
.m_link01 li.lk02{background:url('/images/web/eng/main/img_link02.jpg') no-repeat center/cover;}
.m_link01 li.lk03{background:url('/images/web/eng/main/img_link03.jpg') no-repeat center/cover;}
.m_link01 li.lk04{background:url('/images/web/eng/main/img_link04.jpg') no-repeat center/cover;}
.m_link01 li a{position:relative; display:table-cell; vertical-align: middle; text-align:center; font-family: 'notosans';}
.m_link01 li a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:calc(50vh - 3.2rem); opacity: 0;
    background:linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-webkit-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-moz-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;}
.m_link01 li a:after{content:""; position:absolute; left:1.5rem; top:1.5rem; width:calc(100% - 3rem); height:calc(50vh - 6.2rem); border:1px solid rgba(255,255,255,0.5); opacity: 0;}
.m_link01 li a p{position:relative; font-weight: 700; font-size:2rem; text-shadow: 2px 2px 5px rgba(0,0,0,0.35); text-transform: uppercase; color:#fff; letter-spacing: .5px;}
.m_link01 li a p:after{content:"VIEW MORE"; line-height:3rem; display:none; width:10rem; border-radius:2rem; font-size:.9rem; font-weight: 200; border:1px solid rgba(255,255,255,0.5); margin:1rem auto 0; color:#fff;}
.m_link01 :before, .m_link01 :after{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
/** 바로가기01:active **/
.m_link01 li a:hover:before,
.m_link01 li a:focus:before{opacity: .75;}
.m_link01 li a:hover:after,
.m_link01 li a:focus:after{opacity: 1;}
.m_link01 li a:hover p:after,
.m_link01 li a:focus p:after{display:block;}

/* 하단배너 */
.bnWrap{padding:1.5rem 0;}
.bnWrap .bnBox{position:absolute; left:0; top:.55rem; width:13rem;}
.bnWrap .bnBox h3{display:inline-block; font-family: 'notosans'; font-size:.9rem; font-weight: 200; text-transform: uppercase; margin-right:.5rem;}
.bnWrap .bnBox a{display:inline-block; width:1.25rem; height:1.25rem; text-align:center; line-height:1.25rem; font-size:.75rem; color:#fff; background:#000;}
.bnWrap #bnPlay{display:none;}
.bnWrap .slider{margin-left:13rem;}
.bnWrap .slider .sEl{padding:0 2rem;}

/* fullpage nav */
#sideNav{position:fixed; right:1rem; top:50%; padding:0;}
#sideNav li{width:100%; margin:.35rem 0;}
#sideNav li a{position:relative; display:block; padding-right:1.5rem;}
#sideNav li a:after{content:""; position:absolute; right:0; top:50%; width:20px; height:20px; border-radius:50%; margin-top:-10px; border:2px solid #fff; opacity: 0;}
#sideNav li a:before{content:""; position:absolute; right:7.5px; top:50%; width:5px; height:5px; border-radius:50%; margin-top:-2.5px; background:#fff; opacity: .7;}
#sideNav li a span{display:block; width:5.5rem; line-height:1.6rem; text-align:center; color:#666; font-family: 'notosans'; font-size:13px; letter-spacing: 1px; font-weight: 400;  border-radius:1rem; padding:0 .4rem; color:transparent;}
#sideNav, #sideNav li, #sideNav a{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
/* fullpage nav : active */
#sideNav li.active a span{  color:#fff;
    background:linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-webkit-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important;
    background:-moz-linear-gradient(to left, #017cc6 0%, #8fc320 100%) !important; box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
#sideNav li.active a:before{ opacity: 1;}
#sideNav li.active a:after{ opacity: 1;}
/* fullpage nav : secondPage */
.fp-viewing-secondPage #sideNav li a:after{border-color:#acacac;}
.fp-viewing-secondPage #sideNav li a:before{background:#acacac;}
/* fullpage nav : footer */
.fp-viewing-3 #sideNav,
.fp-viewing-3 #scrollNav{display:none;}

/* scroll nav */
#scrollNav{position: fixed; right:1.3rem; bottom:2rem; color:#fff; width:1.1rem; height:8rem; padding-top:2.25rem; text-align:center;}
#scrollNav::before{content:""; position:absolute; left:50%; top:5rem; width:1px; height:2rem; background:#fff;}
#scrollNav span{position:absolute; left:-1.05rem; top:0; font-family: 'notosans'; font-weight: 600; font-size:.7rem; letter-spacing: 1px; transform: rotate(90deg); -webkit-transform: rotate(90deg);}
/** secondPage : scroll nav **/
.fp-viewing-secondPage #scrollNav{color:#ccc;}
.fp-viewing-secondPage #scrollNav:before{background:#ccc;}

@media screen and (max-width: 1645px){

    /* fullpage/scroll nav */
    #sideNav{right:.25rem;}
    #sideNav:before,
    #scrollNav{display:none;}

}

@media screen and (max-width: 1560px){

    .section02:before{opacity: .5;}

    /* scroll nav */
    #sideNav li a{padding-right:1rem;}
    #sideNav li a span{width:4.5rem; font-size:12px; letter-spacing: 0;}
    #sideNav li a:before{right:6px; width:3px; height:3px; margin-top:-1.5px;}
    #sideNav li a:after{width:15px; height:15px; margin-top:-7.5px;}

}

@media screen and (max-width: 1440px){

     /* popup */
    .popupWrap{width:auto; right:0;}
    .popupBox{padding:0 1rem;}

    /* fullpage nav */
    .fullpageNav{display:none;}
}

@media screen and (max-width: 1240px){

    .fp-table, .fp-tableCell{height:auto !important;}

    .section02{padding:3rem 0;}
    .section02:after{display:none;}
    .section02 h3{margin-top:0;}

    /* visual */
    .visual{height:33rem;}
    .visual .slogan > p{font-size:2.75rem;}

    /* 바로가기01 */
    .m_link01{margin:0; height:auto;}
}

@media screen and (max-width: 1024px){

    /* main popup */
    .mainPopup,
    .mainPopup video{display:none;}

    /* visual */
    .visual .slogan{top:7rem; left:2.5%; transform: none; -webkit-transform: none; -ms-transform: none; }

    /* 바로가기01 */
    .m_link01 li{height:15rem;}
    .m_link01 li a p{font-size:1.25rem; font-weight: 600;}
    .m_link01 li a p:after{line-height:2.5rem; font-size:.8rem; }
}

@media screen and (max-width: 960px){

    /* visual */
    .visual .txt p{font-size:2.75rem;}
}

@media screen and (max-width: 768px){

    /* visual */
    .visual{height:28rem;}
    .visual .arrow a{width:1.5rem; height:1.5rem;}

    /* 바로가기01 */
    .m_link01 li{height:11rem;}
    .m_link01 li a p{font-size:1rem;}
    .m_link01 li a:after{left:.75rem; top:.75rem; width:calc(100% - 1.5rem); height:calc(100% - 1.5rem);}
    .m_link01 li a p:after{width:8rem; line-height:2rem; font-size:.7rem;}

    /* 하단배너 */
    .bnWrap .bnBox{position:relative; left:auto; top:auto; width:auto; border-bottom:1px solid #ddd; padding-bottom:.5rem; margin-bottom:1rem;}
    .bnWrap .slider{margin-left:0;}
    .bnWrap .slider .sEl{padding:0 .5rem;}
}

@media screen and (max-width: 680px){

	.visual{height:23rem;}
    .visual .txt p{font-size:2.25rem;}
}

@media screen and (max-width: 560px){

    .section02 h3{margin-bottom:0;}

    /* visual */
    .visual .img p{background-position:70% center;}
    .visual .txt p{font-size:1.9rem; letter-spacing: 0; text-align:left;}
    .visual .txt span{ font-size:.7rem; text-align:left;}

    /* gallery */
    .gallery .slider{ padding:1rem .5rem 0;}
    .gallery .slick-arrow{ top:8.5rem; width:2.2rem; height:2.2rem;}
    .gallery .slick-arrow:before{ line-height:2.2rem; }
    .gallery .sEl .img{height:14rem;}
    .gallery .sEl a{padding:1rem .5rem 0;}

    /* 바로가기01 */
    .m_link01 li{width:100%; height:auto; display:block;}
    .m_link01 li a{display:block; padding:3rem 0;}

    /* 하단배너 */
    .bnWrap .slider .sEl img{width:100%; height:auto;}
}

@media screen and (max-width: 420px){

    .visual{height:23rem;}
    .visual .arrow{margin-top:1rem;}
    .visual .arrow a{width:1rem; height:1rem;}
    .visual .txt p{font-size:1.5rem;}

    .gallery .more{font-size:.8rem; margin-top:1.5rem; line-height:2.5rem;}

}