@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#333; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
body.on{overflow-y: hidden;}
#wrap {	position:relative; width:100%; min-width:320px; font-size:1rem; font-size: 1.6rem;}
.inner {width:1320px; height: 100%; position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {width:1280px; height: 100%; position:relative;	margin-left:auto;	margin-right:auto;}
#pageCont{padding-bottom: 80px;}


/* 반응형 */
@media all and (max-width:1319px) {	
    .inner {width:96%;}
}
@media all and (max-width:1279px) {	
    .s-inner {width:96%;}
}

/* header */
#header{}
#header .header_top{background-color: #f05134; height: 38px;}
#header .header_top ul{display: flex; height: 100%; justify-content: flex-end; align-items: center;}
#header .header_top ul > li{}
#header .header_top ul > li > a{font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 1.2rem; color: #fff; border-right: 1px solid #e69289; line-height: 1em; padding: 0 10px;}
#header .header_top ul > li:last-child a{border-right: 0; padding-right: 0;}

#header .header_bottom{height: 90px; position: relative;}
#header .header_bottom #logo{ position: absolute; left: 20px; top: 17px; z-index: 99;}
#header .header_bottom #logo a{}
#header .header_bottom #logo a img{}
#header .header_bottom {}

#header #pcGnb {width:100%; text-align:center; position: absolute;}
#header #pcGnb > ul{text-align: right;}
#header #pcGnb > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#header #pcGnb > ul > li > a {display:block; font-size:1.8rem; color:#000; line-height:90px; position:relative; font-weight: 500; font-weight: 500; width: 128px;}
#header #pcGnb > ul > li > ul {display:none; width: 166px; border-bottom: 2px solid #EE3335; position: absolute; z-index: 9; background:#fff; overflow:hidden; left: -16px;}
#header #pcGnb > ul > li > ul > li > a {display:block; width:100%; font-size:1.6rem; color:#333; padding:12px 0;}
#header #pcGnb > ul > li > ul > li:hover{background-color: #fff5f4;}
#header #pcGnb > ul > li > ul > li:hover > a{color: #EE3335;}

#header #pcGnb > ul > li:hover > a{color:#EE3335;}

#menuToggle {display: none; position:absolute; right:0; top:25px; width:30px; height:22px; cursor:pointer; z-index:101; z-index:101}
#menuToggle span {display:block; position:absolute; left:0; height:2px; background:#232323; transition:0.5s all; -webkit-transition:0.5s all;}
#menuToggle span.t {top:0; width:75%}
#menuToggle span.m {top:50%; margin-top:-1px; width:100%}
#menuToggle span.b {bottom:0; width:50%;}

#Mnav {display: none; width:100%; height:100%; position:fixed; top:0; right:-100%; background:#323232; z-index:100; padding:60px 6%; box-sizing:border-box; transition:all 0.5s}
#Mnav > ul > li {box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.3); padding:5% 3%}
#Mnav > ul > li > a{color: #fff; font-weight: 600;}
#Mnav > ul > li > ul {overflow:hidden; margin-top:10px;}
#Mnav > ul > li > ul > li {width:33.33%; float:left; margin:3px 0;}
#Mnav > ul > li > ul > li > a {font-size:1.6rem; color:rgba(255,255,255,0.6);}
#Mnav > ul > li > ul > li > a:hover {color:#EE3335}

#header.on #Mnav {right:0;}
#header.on #menuToggle span {background:#fff;}
#header.on #menuToggle span.t {width:100%; transform:translateY(10px) rotate(45deg);}
#header.on #menuToggle span.m {width:0;}
#header.on #menuToggle span.b {width:100%; transform:translateY(-10px) rotate(-45deg)}

@media all and (max-width:1280px){
    #header .header_bottom #logo{left: 0;}
    #header #pcGnb > ul > li > a{width: 110px;}
    #header #pcGnb > ul > li > ul{left: -28px;}
}
@media all and (max-width:999px){
    #header .header_top{height: 32px;}
    #header .header_bottom{height: 70px;}
    #header .header_bottom #logo{top: 10px;}
    #header .header_bottom #logo a img{max-width: 212px;}
    #header #pcGnb{display: none;}
    #menuToggle{display: block;}
    #Mnav{display: block; overflow-y: scroll;}
}
@media all and (max-width:640px){
    #Mnav > ul > li{padding: 3%;}
    #Mnav > ul > li > ul > li > a{font-size: 1.4rem;}
    #Mnav > ul > li > ul{margin-top: 5px;}
}

/* footer */
#footer {}
#footer .footer_top{background-color: #3a3636; height: 50px;}
#footer .footer_top a{line-height: 50px; color: #fff; margin-right: 20px; font-size: 1.5rem;}
#footer .footer_bottom{height: 170px; background-color: #565252;}
#footer .footer_bottom .s-inner{display: flex; align-items: center;}
#footer .footer_bottom .s-inner .f_logo{margin-right: 50px;}
#footer .footer_bottom .s-inner .f_logo img{max-width: 100%;}
#footer .footer_bottom .s-inner .info{}
#footer .footer_bottom .s-inner .info span{display: inline-block; color: #eee; font-size: 1.5rem; margin-right: 1rem; line-height: 1.8em;}
#footer .footer_bottom .s-inner .info .copy{color: #bbbbbb; font-size: 1.5rem;}

@media all and (max-width:640px){
    #footer .footer_top{text-align: center;}
    #footer .footer_top a{margin-right: 0; margin: 0 1rem;}
    #footer .footer_bottom .s-inner .f_logo img{max-width: 212px;}
    #footer .footer_bottom{text-align: center; height: auto; padding: 6% 0;}
    #footer .footer_bottom .s-inner{flex-direction: column;}
    #footer .footer_bottom .s-inner .f_logo{margin-right: 0; margin-bottom: 2rem;}
    #footer .footer_bottom .s-inner .info span{font-size: 1.3rem;}
    #footer .footer_bottom .s-inner .info .copy{font-size: 1.3rem;}
}

.quick_box{position: absolute;transform: translateY(260px); right: 40px; z-index: 999;}
.quick_box .quick{}
.quick_box .quick li{margin-bottom: 10px;}

#go_top{cursor: pointer; position: fixed; right: 40px; bottom: 20px;}

@media all and (max-width:1400px){
    .quick_box{display: none;}
}
@media all and (max-width:999px){
    #go_top{right: 3%; bottom: 2%;}
    #go_top img{max-width:10vw;}
}