@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -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:1440px;	position:relative;	margin-left:auto;	margin-right:auto;}


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

/* header */
#header{position: relative; z-index: 99; height: 100px; transition: .2s ease-in-out;}
#header:hover{background-color: #fff;}
#header .inner{height: 100%;}
#header.on{position: absolute; width: 100%;}
#header.onn{position: fixed; top: 0; width: 100%; background-color: #fff;}
#header .pcGnb{}
#header .pcGnb > ul{display: flex;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li:not(:last-child){margin-right: 30px;}
#header .pcGnb > ul > li > a{color: #333; display: block; line-height: 100px; font-size: var(--fz14); font-family: 'Montserrat', sans-serif;}
#header.on .pcGnb > ul > li > a{color: #fff;}
#header.on:hover .pcGnb > ul > li > a{color: #000;}
#header.onn .pcGnb > ul > li > a{color: #000;}
#header .pcGnb > ul > li > ul{background-color: #f8f8f8; padding: 10px; width: 180px; position: absolute; left: 50%; transform: translateX(-50%); display: none;}
#header .pcGnb > ul > li:hover > ul{display: block;}
#header .pcGnb > ul > li > ul > li{text-align: center;}
#header .pcGnb > ul > li > ul > li:not(:last-child){margin-bottom: 20px;}
#header .pcGnb > ul > li > ul > li > a{font-size: var(--fz14);}
#header .pcGnb > ul > li > ul > li:hover > a{color: #000;}
#header #logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#header #logo a{vertical-align: -webkit-baseline-middle;}
#header #logo a img{max-height: 26px;}
#header.on #logo a img{filter: invert(1);}
#header.on:hover #logo a img{filter: invert(0);}
#header.onn #logo a img{filter: invert(0);}
#header .r_menu{position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: flex; align-items: center; gap:18px;}
#header .r_menu li{}
#header .r_menu li a{}
#header .r_menu li a img{max-height: 21px; display: block; margin-top: -2px;}
#header.on .r_menu li a img{filter: invert(1)}
#header.on:hover .r_menu li a img{filter: invert(0)}
#header.onn .r_menu li a img{filter: invert(0)}
#header .r_menu li a span{color: #000;}
#header.on .r_menu li a span{color: #fff;}
#header.on:hover .r_menu li a span{color: #000;}
#header.onn .r_menu li a span{color: #000;}
#header .menuToggle{display: none;}

@media all and (max-width:1280px){
    #header{height: 60px;}
    #header .pcGnb{display: none;}
    #header #logo{transform: translate(0, -50%); left: 0;}
    #header #logo img{max-width: 164px;}
    #header .r_menu{right: 45px;}
    #header .menuToggle{display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
    #header .menuToggle span{color: #000; cursor: pointer;}
    #header.on .menuToggle span{color: #fff;}
    #header.on:hover .menuToggle span{color: #000;}
    #header.onn .menuToggle span{color: #000;}
}

.moGnb{display: none; top: -100%; position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 99; transition: .3s;}
.moGnb > ul{}
.moGnb > ul > li{border-bottom: 1px solid #eee; cursor: pointer;}
.moGnb > ul > li > a{font-size: var(--fz20); display: block; padding: 12px; position: relative;}
.moGnb > ul > li > a.on{pointer-events: none;}
.moGnb > ul > li > a.on::after{content: '↓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);}
.moGnb > ul > li > ul{display: none; background-color: #f8f8f8;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li:not(:last-child){border-bottom: 1px solid #eee;}
.moGnb > ul > li > ul > li > a{display: block; padding: 12px 24px; font-size: var(--fz16);}

@media all and (max-width:1280px){
    .moGnb{display: block;}
    .moGnb.on{top: 60px;}
}

/* footer */
#footer {background-color: #f8f8f8; padding: 50px 0 40px;}
#footer .top{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: flex-end;}
#footer .top .l_cont{}
#footer .top .l_cont span{display: inline-block; margin-right: 18px; font-size: var(--fz14); color: #666; line-height: 2em;}
#footer .top .r_cont{text-align: right; font-size: var(--fz14);}
#footer .top .r_cont b{font-size: var(--fz18); color: #313131; font-weight: 700;}
#footer .bottom{display: flex; justify-content: space-between; align-items: center;}
#footer .bottom .f_logo{}
#footer .bottom .f_logo img{max-height: 22px;}
#footer .bottom .copy{font-size: var(--fz14); color: #666;}

@media all and (max-width:640px){
    #footer{padding: 40px 0 30px;}
    #footer .top{flex-direction: column; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px;}
    #footer .top .r_cont{text-align: left; margin-top: 20px;}
    #footer .bottom{flex-direction: column; align-items: flex-start;}
    #footer .bottom .f_logo{margin-bottom: 10px;}
    #footer .bottom .f_logo img{max-height: 18px;}
}