@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.02em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.6rem; }
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1730px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1729px) {	
    .s-inner {width:94%;}
    }
    /* @media all and (max-width:1280px) {	
        .s-inner {width:calc(100% - 50px)}
        } */
@media all and (max-width:1399px) {	
.inner {width:94%;}
}



#header{position: fixed; width: 100%; z-index: 300; height:130px; font-family: 'GmarketSansMedium'; transition: opacity 0.2s;}
#header:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 130px; background: transparent;}
#header.on{height: 100%;}
#header #logo{z-index: 9999; position: absolute; left: 40px; top: 55px;  }
#header #logo a{display: block; background: url('/images/common/logo.png')no-repeat; width: 192px; height: 16px;}
#header.on #logo a{background: url('/images/common/logo_w.png')no-repeat;}
#header.on:before{display: none;}
#header.scroll {opacity: 0.2;}

#header.main{background: transparent;}
#header.main #logo a{background: url('/images/common/logo_w.png')no-repeat;}
#header.main:before{display: none;}
@media all and (max-width:976px){
    #header{height: 70px;}
}

#cataLink{position: absolute; right: 100px; top: 55px;}
#cataLink a{color: #666; font-weight: lighter;}
#header.main #cataLink a{color: rgba(255, 255, 255, 0.8);}

#menuToggle {position:absolute; right:40px; top: 55px; width:23px; height:20px; cursor:pointer; z-index:1011; }
#menuToggle.on{position: fixed; display: block; z-index: 1002}
#menuToggle span {display:block; position:absolute; right:0; height:1px; background:#000; transition:0.5s all; -webkit-transition:0.5s all;}
.on #menuToggle span {background-color: #000;}
header:hover #menuToggle span {background-color: #000;}
#menuToggle span.t {top:0; width:100%}
#menuToggle span.m {top:50%; margin-top:-1px; width:100%}
#menuToggle span.b {bottom:0; width:100%;}

#menuToggle.on span.t{width: 100%; background-color:#fff; transform: translateY(5px) rotate(45deg); top: 7px;}
#menuToggle.on span.m{width: 0;}
#menuToggle.on span.b{width: 100%; background-color:#fff; transform: translateY(-2px) rotate(-45deg); bottom: 5px;}

#menuToggle.main{right: 40px;}
#menuToggle.main span.t{background-color: #fff;}
#menuToggle.main span.m{background-color: #fff;}
#menuToggle.main span.b{background-color: #fff;}


#header #gnb_mo{position: absolute; visibility: hidden; top: 50%; left: 50%; z-index: 1001; transform: translate(-50%, -50%); text-align: center;}
#header #gnb_mo li{opacity: 0;}
/* #header #gnb_mo li:nth-child(2){transition: opacity 1s .3s ease-in;}
#header #gnb_mo li:nth-child(3){transition: opacity 1s .4s ease-in;}
#header #gnb_mo li:nth-child(4){transition: opacity 1s .5s ease-in;}
#header #gnb_mo li:nth-child(5){transition: opacity 1s .6s ease-in;} */
#header #gnb_mo a{ color: #fff; font-size: 3.7rem; line-height: 2.5;}
#header #gnb_mo.on{visibility: visible;}
#header #gnb_mo.on li{animation: gnb_mo .6s forwards ease-in;}
#header #gnb_mo li:nth-child(2){animation-delay: .1s;}
#header #gnb_mo li:nth-child(3){animation-delay: .2s;}
#header #gnb_mo li:nth-child(4){animation-delay: .3s;}
#header #gnb_mo li:nth-child(5){animation-delay: .4s;}
@keyframes gnb_mo {
    0%{opacity: 0;}
    100%{opacity: 1;}
}


.menu_bg{width: 100%; height: 100vh; background-color:#181b1c;position: fixed; left: 0; top: 0; visibility: hidden; opacity: 0; transition: .4s ease; z-index: 209;}
.menu_bg.on{visibility: visible; opacity: 1;}


@media all and (max-width:1280px){
    #header:before{height: 70px;}
    #header #logo{left: 25px; top: 30px; }
    #header.on #logo{left: 25px; top: 30px; }
    #header.main #logo{left: 25px; top: 30px; }
    #header #logo a{background-size: contain; width: 140px;}
    #header.on #logo a{background-size: contain; width: 140px;}
    #header.main #logo a{background-size: contain; width: 140px;}
    #menuToggle{right: 25px; top: 25px;}
    #menuToggle.main{right: 25px;}

    #header #gnb_mo a{font-size: 2.8rem;}

    #cataLink{top: 25px; right: 80px;}
    #header.main #cataLink{right: 80px;}
}
@media all and (max-width:420px){
    #cataLink{top: 27px; right: 65px;}
    #cataLink a{font-size: 0.9em;}
    #header.main #cataLink a{font-size: 0.9em;}
}

/* footer */
#footer.main{background:#181b1c;}

#footer { width:100%;	clear:both;	position:relative;	margin:0 auto;	background:transparent;	height: 140px;  padding: 35px 40px 0 40px; }
#footer p.company{margin-bottom:10px; color: #666666; font-size: 0.9rem;}
#footer.main p.company{color: #b4b6b8;}
#footer > ul{margin: 0; line-height: 14px;}
#footer > ul li {color: #666666; font-size: 0.8rem; font-family: 'GmarketSansMedium'; display: inline-block; margin: 0;}
#footer > ul li span{margin-right: 5px;}
#footer > ul li p{display: inline-block;}
#footer.main > ul li{color: #757b7e;}
/* #footer ul li.copy{width: 100%;} */
@media all and (max-width:740px){
    #footer p.company{margin-bottom: 5px;}
}
@media all and (max-width:480px){
    #footer {padding: 30px 25px 0 25px;}
}
@media all and (max-width:380px){
    #footer {padding: 20px 25px 0 25px;}
}


#goTopBtm{position: fixed; right: 40px; bottom: 120px;}
.main #goTopBtm{display: none;}
@media all and (max-width:768px){
    #goTopBtm{right: 10px;}
}