@charset "utf-8";
@font-face
{font-family:'NotoSansKR-Medium';
src:url('font/NotoSansCJKkr-Medium.eot');
src:url('font/NotoSansCJKkr-Medium.eot?#iefix') format('embedded-opentype'),url('font/NotoSansCJKkr-Medium.woff') format('woff');font-weight:normal;font-style:normal}

@font-face
{font-family:'NotoSansKR-Regular';
src:url('font/NotoSansCJKkr-Regular.eot');
src:url('font/NotoSansCJKkr-Regular.eot?#iefix') format('embedded-opentype'),url('font/NotoSansCJKkr-Regular.woff') format('woff');font-weight:normal;font-style:normal}

@font-face
{font-family:'NotoSansKR-Bold';
src:url('font/NotoSansCJKkr-Bold.eot');
src:url('font/NotoSansCJKkr-Bold.eot?#iefix') format('embedded-opentype'),url('font/NotoSansCJKkr-Bold.woff') format('woff');font-weight:normal;font-style:normal}

@font-face{font-family:'ProximaNovaBold';src:url('font/ProximaNovaBold.woff') format('woff');font-weight:normal;font-style:normal}

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);


html{-webkit-text-size-adjust:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{width:100%;height:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,button,input{margin:0;padding:0;-webkit-text-size-adjust:none;word-break:keep-all}
input,textarea{border-radius:0;resize:none;background:transparent;border:0}
body,h1,h2,h3,h4,h5,h6,input,button{font-family:'NotoSansKR-Medium',Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif;font-size:12px}
body{color:#666;word-wrap:break-word;word-break:break-all}
button{background:none; border:0; color:#fff; cursor:pointer}
a{color:#666;text-decoration:none}
a:hover{text-decoration:underline}

body.fx{overflow:hidden}

/*스크롤바색상*/
body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,1);background-color:#000}
body::-webkit-scrollbar{width:1px;background-color:#000}
body::-webkit-scrollbar-thumb{background-color:#000}

.hide-on-pc{display:block}
.hide-on-mobile{display:none}

/*----------------------------------------------------------------------------------------------------------------------------*/
body{overflow-x:hidden}
.logo-article{overflow:hidden}

.logo-article:before
{background-color:#fff;content:"";height:0;left:50%;overflow:hidden;position:fixed;top:50%;
-webkit-transform:translate(-50%,-50%) rotate(-180deg);-ms-transform:translate(-50%,-50%) rotate(-180deg);transform:translate(-50%,-50%) rotate(-180deg);transition:height .9s cubic-bezier(.55,.085,0,.99);width:200%;z-index:9000}

.logo-article:after
{position:fixed;top:50%;left:50%;display:block;content:"";width:224px;height:78px;background-image:url(../images/img_intro_logo.png);background-size:contain;opacity:0;
-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:opacity .9s,visibility .9s;z-index:9900;}

body.off{overflow:hidden}
body.is-pagetransition .logo-article:before{height:200%}
body.is-pagetransition .logo-article:after{opacity:1;visibility:visible}
body.is-pagetransitionend .logo-article:before{opacity:1}
body.is-pagetransitionend .logo-article:after{opacity:0}


#box-main .box-wMainTop{position:relative;min-width:1260px;}

#box-main .box-wMainTop .slide-wrap{position:relative;min-height:500px;background:no-repeat 50% 50%;background-size:cover;overflow:hidden; }
#box-main .box-wMainTop .slide-wrap:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.2)}

#box-main .box-wMainTop .slide-wrap .txt-wrap{position:absolute;top:50%;left:300px;right:300px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);text-align:center;z-index:100; 
 border:5px double rgba(255, 255, 255, 0.5); padding:100px 0}

#box-main .box-wMainTop .slide-wrap .txt-wrap .txt-1{font-family:ProximaNovaBold;font-size:68px;line-height:78px;color:#fff;opacity:0;transform:translate(0,60px)}
#box-main .box-wMainTop .slide-wrap .txt-wrap .txt-2{margin-top:10px;font-family:NotoSansKR-Bold;font-size:20px;line-height:43px;color:#fff;opacity:0;transform:translate(0,60px)}
#box-main .box-wMainTop .slide-wrap.ani-on .txt-wrap .txt-1{opacity:0.7;transition:All 1s ease;transform:translate(0,0);transition-delay:.3s}
#box-main .box-wMainTop .slide-wrap.ani-on .txt-wrap .txt-2{opacity:0.7;transition:All 1s ease;transform:translate(0,0);transition-delay:.4s}



#skipCt{overflow-x:hidden;min-width:1260px;}
#header{position:absolute;top:0;left:0;right:0;z-index:1000;transition:top .4s;min-width:1260px}


#header:after{content:'';display:block;clear:both;background:url('../images/bg_header_line.png') repeat-x 0 0;position:absolute;top:72px;left:0;height:1px;width:100%;
background:url('../images/bg_header_line.png') repeat-x 0 0;animation:mymove 2s;animation-fill-mode:forwards;animation-timing-function:ease-in}

@keyframes mymove{from{width:0;background:#fff}to{width:100%;background:url('../images/bg_header_line.png') repeat-x 0 0}}


#gnb{text-align:center; padding:5px 0 0 0;}
#gnb li{display:inline-block}
#gnb li a{display:block;font-family: 'Nanum Square'; font-size:18px;line-height:22px;height:30px;color:#fff; padding:20px 50px ;transition:all .3s;position:relative; }
#gnb li a span{position:relative;display:block}
#gnb li a:focus,#gnb li a:hover{text-decoration:none}
#gnb li a span:after{content:'';display:block;clear:both;background:#fff;height:1px;position:absolute;bottom:-25px;left:0;right:0;width:0;transition:all .1s;right:0;transform:skew(0deg)}
#gnb li.sel a span:after,#gnb li a:focus span:after,#gnb li a:hover span:after{content:'';display:block;clear:both;left:0;right:0;width:100%;transform:skew(0deg)}

#header h1 a{position:absolute;top:10px;left:8%; background:url('../images/logo_h1.png') no-repeat 0 0;background-position:0 0;width:141px;height:49px;display:block;text-indent:101%;overflow:hidden;white-space:nowrap;}

#header .mm {width:30px; float:right; position:absolute; top:20px; right:8%;color:#fff;}

#footer{min-width:1260px;overflow:hidden;background:#000;position:fixed}
#footer .box-menu-3{padding:15px 0}
#footer .box-menu-3 .inner{position:relative;width:1080px;margin:0 auto}
#footer .box-menu-3 .box-txt{text-align:center}
#footer .box-menu-3 .box-txt .txt-2{font-size:11px; font-family:'NotoSansKR'; color:rgba(255,255,255,0.7)}




/*===========================================================2018.01.19. 미디어쿼리=========================================================================================*/


@media all and (max-width:1400px)
{

#header .mm img {margin-top:50px; width:200%;}

#header:after {margin-top:130px;}
#header h1 a{position:absolute;top:50px;left:8%; background-size:contain; width:300px; height:100px; display:block;}

.slick-wrap video {display:none}
.box-wMainTop {position:fixed;height:170vh;background:url('../images/m_main.jpg') no-repeat 100% 10%;background-size:cover;}

#box-main .box-wMainTop .slide-wrap .txt-wrap {border:0;margin-top:12%;}
#box-main .box-wMainTop .slide-wrap .txt-wrap .txt-1{font-size:58px;line-height:62px;}
#box-main .box-wMainTop .slide-wrap .txt-wrap .txt-2{margin-top:60px;font-size:40px;line-height:20px; padding-bottom:20px}

#box-main .box-wMainTop .slide-wrap .txt-wrap{left:120px;right:120px;}

#gnb{display:none}
#gnb li{display:inline-block}
#gnb li a{display:block;font-family: 'Nanum Square'; font-size:2em;line-height:22px;height:30px;color:#fff; padding:20px;transition:all .3s;position:relative; }
#gnb li a span{position:relative;display:block}
#gnb li a:focus,#gnb li a:hover{text-decoration:none}
#gnb li a span:after{content:'';display:block;clear:both;background:#fff;height:1px;position:absolute;bottom:-25px;left:0;right:0;width:0;transition:all .1s;right:0;transform:skew(0deg)}
#gnb li.sel a span:after,#gnb li a:focus span:after,#gnb li a:hover span:after{content:'';display:block;clear:both;left:0;right:0;width:100%;transform:skew(0deg)}

}