@charset "utf-8";

/* 레이아웃 공통 */
html, body {position:relative; width:100%;height:100%;}
body.freeze {overflow-x:hidden; overflow-y:hidden}
body.dimmed #header, body.dimmed #footer {z-index:auto}
body {color:#000; font-size:16px; line-height:1.6; font-family: 'Noto Sans KR', sans-serif; transform: skew(-0.03deg); word-break:break-all}
#wrap{height: 100%;}
#wrap.min_width{min-width: 1200px;}

.init_of h1,.init_of h2,.init_of h3,.init_of h4,.init_of h5,.init_of h6,.init_of th,.init_of legend,.init_of dt{font-weight:normal}
.init_of a,.init_of label{display:inline-block;text-decoration:none;}
.init_of ol,.init_of ul,.init_of dl{list-style-type:none}
.init_of .popLy-files a {display:block;}

/* 본문바로가기 */
.skipnav {position:absolute;z-index:1999;top:-100px;width:100%;padding:0;list-style:none;font-size:14px;}
.skipnav li {position:relative;top:0;left:0;width:100%}
.skipnav li a {display:block;position:absolute;top:0;width:100%;padding:15px 0;background:#000;color:#fff;text-align:center;text-decoration:none}
.skipnav li a:focus,.skipnav li a:active {top:100px}

/* slick 플러그인 */
.slick-slider .slick-list {display:block; overflow-x:hidden; overflow-y:hidden; position:relative}
.slick-slider .slick-list.dragging {cursor:pointer}
.slick-slider .slick-list .slick-track {display:block; position:relative; top:0; left:0}
.slick-slider .slick-list .slick-track:before, .slick-slider .slick-list .slick-track:after {display:table; content:''}
.slick-slider .slick-list .slick-track:after {clear:both}
.slick-slider .slick-list.slick-loading .slick-track {visibility:hidden}
.slick-slider .slick-list .slick-track .slick-slide {display:none; float:left}
.slick-slider[dir='rtl'] .slick-list .slick-track .slick-slide {float:right}
.slick-slider .slick-list .slick-track .slick-slide img {display:inline-block}
.slick-slider .slick-list .slick-track .slick-slide.slick-loading img {display:none}
.slick-slider.slick-initialized .slick-list .slick-track .slick-slide {display:block}
.slick-slider .slick-list .slick-track.slick-loading .slick-slide {visibility:hidden}
.slick-slider .slick-arrow.slick-hidden {display:none}

/* 가운데영역 */
.container{max-width: 1200px; margin: 0 auto;}

/* header_로그인페이지 */
#header.v2{width: 100%; background: #fff; border-bottom: 1px solid #d9d9d9; }
.header{position: relative;}
#header.v2 .logo span{display: inline-block; margin-bottom: 27px; font-size: 18px; color: #140903; line-height: 1; font-weight: 300; transform: skew(-0.03deg); font-family: 'NotoSansCJKkr', sans-serif;}
#header.v2 .logo a{display: block; padding: 30px 0;}
#header.v2 .logo a img{display: block;}

/* 회원로그인 */
#header.v2 .member_login{position: absolute; right:85px; top:50%; transform: translateY(-50%); line-height: 1;}
#header.v2 .member_login a{margin-right: 33px; display: inline-block; text-align: center; }
#header.v2 .member_login a span.img{display: inline-block; margin:0 auto 27px; vertical-align: bottom;}
#header.v2 .member_login a span:nth-child(2){display: block; font-family: 'NotoSansCJKkr', sans-serif; font-weight: 300; font-size: 15px; color:#737478; }
#header.v2 .member_login a:nth-of-type(1) span.img{width: 32px; height: 35px; background: url(../images/common/icon1.png)no-repeat;}
#header.v2 .member_login a:nth-of-type(2) span.img{width: 32px; height: 37px; background: url(../images/common/icon2.png)no-repeat;}

/* header */
#header.v1{position: absolute; top: 0;  z-index: 3; width: 100%; height: 92px; background: rgba(0,0,0,.2); text-align: center; transition: all .4s;}
#header.v1 .logo{position: absolute; left: 0; display: inline-block;}
#header.v1 .logo a{display: block; padding: 27px 0 27px 45px;}
#header.v1 .logo a img.pc{display: block;}
#header.v1 .logo a img.mobile{display: none;}
#header.v1 nav{}
#header.v1 nav > ul{font-size: 0;}
#header.v1 nav > ul li{display: inline-block;}
#header.v1 nav > ul li a{display: block; padding: 28px 43px; color: #000; font-weight: 700; font-size: 22px; letter-spacing: -1px; text-decoration: none;}
#header.v1 nav > ul li a span{position: relative; transition: all .2s; text-decoration: none;}
#header.v1 nav > ul li a span::before{content: ""; position: absolute; bottom: -4px; left: 0; width: 0; border-bottom: 3px solid #fff;}
#header.v1 nav > ul li a span::after{content: ""; position: absolute; bottom: -4px; right: 0; width: 0; border-bottom: 3px solid #fff;}
#header.v1:hover  nav > ul li a span{color: #fff;}
#header.v1:hover{background: #000;}
#header.v1 nav > ul li a:hover span::before,
#header.v1 nav > ul li a:hover span::after{display: block; width: 51%; transition: all .2s;}
#header.v1 .menu{position: absolute; top:0; right: 72px; font-size: 0;}
#header.v1 .menu li{display: inline-block;  vertical-align: middle;}
#header.v1 .menu li a{display: block; padding: 24px 16px; transition: all .2s;}
#header.v1 .menu li a:hover{transform: scale(1.1);}
#header.v1 .menu li:last-child a{padding-right: 0;}
#header.v1 .menu li img{}
#header.v1 .menu.login{}
#header.v1 .menu.logout{}

@media (max-width: 1199px) {

    #header.v1 nav{display: none;}

    .container{padding: 0 10px!important;}

}

@media (max-width: 576px) {

    #header.v1 .menu{right: 10px;}
    #header.v1 .menu li a{padding: 24px 6px;}

    #header.v1 .logo a img.pc{display: none;}
    #header.v1 .logo a img.mobile{display: block;}
    #header.v1 .logo a{padding: 37px 0 27px 10px;}

    #wrap.min_width #header.v1 .logo a{padding: 27px 0 27px 45px;}

}

/* footer */
#footer{height: 241px; background: #fff;}
#footer .footer{line-height: 1;}
#footer .footer_top {padding: 36px 0; border-bottom: 1px solid #dddddd;}
#footer .footer_top ul{font-size: 0;}
#footer .footer_top ul li{display: inline-block; margin-right: 31px;}
#footer .footer_top ul li:last-child{margin-right: 0;}
#footer .footer_top ul a{display: block; color: #000; font-weight: 500; font-size: 16px;}
#footer .footer_top ul:first-child{float: left;}
#footer .footer_top ul:last-child{float: right;}
#footer .footer address{padding:  33px 0 53px; line-height: 28px; color: #6f7178; font-size: 15px; font-weight: 500; font-style: normal;}

@media (max-width: 768px) {

    #footer .footer_top ul:first-child{width: 100%; margin-bottom: 10px;}
    #footer .footer_top ul:last-child{float: none;}
    #footer .footer_top ul li{margin-right: 2%; line-height: 22px;}

}

@media (max-width: 414px) {

    #footer .footer_top ul:last-child li{width: 100%;}

}