@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:1rem; }
.inner {	width:1720px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}


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


/* header */
#header{height: 100px; width: 100%; position: fixed; top: 0; left: 0; background: #fff; z-index: 999; transition: 0s;}
#header .inner{display: flex; justify-content: space-between; align-items: center; height: 100%;}
#header .inner #logo{}
#header .inner #logo a{}
#header .inner #logo a img{}
#header .inner #hash_wrap_bx{display: flex; align-items: center; height: 100%;}
#header .inner #hash_wrap_bx > ul{display: flex; height: 100%;}
#header .inner #hash_wrap_bx > ul > li{position: relative;}
#header .inner #hash_wrap_bx > ul > li > a{font-size: 2rem; font-weight: 600; color: #000; transform: rotate(0.1deg); display: inline-block; padding: 0 45px; height: 100%; display: flex; align-items: center;}
#header .inner #hash_wrap_bx > ul > li > a.on{color: #3c7833; position: relative;}
#header .inner #hash_wrap_bx > ul > li > a.on::before{content: ''; position: absolute; width: 7px; height: 7px; background-color: #3c7833; top: 45%; transform: translateY(-50%); left: -15px; border-radius: 100%;}

.smenu{display: none; padding:15px 0; width:180px; background: #f06500; position: absolute; top: 100%; left: 50%; margin-left: -90px;}
.smenu li a{display:block; width:100%;padding:10px; color:#fff;box-sizing: border-box; font-size: 1.8rem; text-align: center;}
.smenu li a:hover {text-decoration:underline}

#header .inner .app{display: flex;margin-left: 20px; gap: 10px;}
#header .inner .app a{display: flex; border: 1px solid #eee; border-radius: 100px; padding: 10px 20px; width: 145px; align-items: center; gap: 10px; transition: 0.3s;color: #000; }
#header .inner .app a:hover{transition: 0.3s; color: #fff; background: #f06500; border: 1px solid #f06500;}
#header .inner .app a img{width: 20px;}
#header .inner .app a:nth-child(2):hover img{filter: invert(1);}
#header .inner .app a p{width: 72px; text-align: center; font-size: 1.4rem;}

#header .right_cont{display: none;}
#header .menu-toggle{display: none; cursor: pointer;}
#header .menu-toggle span{display: block; width: 2em; height: 2px; background-color: #000;}
#header .menu-toggle span:nth-child(1){margin-bottom: 6px;}
#header .menu-toggle span:nth-child(3){margin-top: 6px;}

@keyframes call {
    0%{filter: brightness(0.6)}
	50%{filter: brightness(2)}
	100%{filter: brightness(0.6)}
}

@media all and (max-width:1480px) {
    #header .inner #hash_wrap_bx > ul > li > a{font-size: 1.8rem; padding: 0 30px;}
    #header .inner .app{margin-left: 10px;}
}
@media all and (max-width:1280px) {
    #header{height: 80px;}
    #header .inner #hash_wrap_bx > ul > li > a{font-size: 1.6rem; padding: 0 20px;}
    .smenu{width: 150px; margin-left: -75px;}
    .smenu li a{font-size: 1.6rem;}
    #header .inner .app a{width: 130px; gap: 5px; padding: 5px 15px;}
}
@media all and (max-width:1100px) {
    #header .inner #hash_wrap_bx{display: none;}
	#header .right_cont{display: flex;}
    #header .menu-toggle{display: flex; align-items: center; flex-wrap: wrap; width: 2em; align-content: center; margin-left: 20px;}
}
@media all and (max-width:768px){
    #header{height: 70px;}
    #header .inner .app a{width: 40px; height: 40px; padding: 0; justify-content: center;}
    #header .inner .app a p{display: none;}
    #header .inner .app a img{width: 15px;}
}
@media all and (max-width:640px){
    #header .inner #logo a img{max-width: 170px;}
    #header .inner .app a{width: 35px; height: 35px;}
    #header .menu-toggle{margin-left: 15px;}
}


#header .mo-list{display: none; position: fixed; top: 80px; left: 0; width: 100; background: rgba(0, 0, 0, 0.8);}
#header .mo-list a{color: #fff; display: block; width: 100vw; padding: 1.5em; text-align: center; font-size: 1.8rem;}
#header .mo-list a:hover{background: #000; color: #f06500;}

@media all and (max-width:768px){
    #header .mo-list{top: 70px;}
}


/* footer */
#footer{background: #222222; padding: 40px 0; text-align: center;}
#footer ul{display: flex; margin: 25px auto 40px; justify-content: center; font-size: 1.4rem; color: #fff; opacity: 0.5; gap: 5px 25px; width: 535px; flex-wrap: wrap;}
#footer ul span{margin-right: 5px;}
#footer p{font-size: 1.2rem; color: #fff; opacity: 0.3;}

@media all and (max-width:768px){
    #footer .logo{width: 150px; margin: 0 auto;}
    #footer .logo img{width: 100%;}
    #footer ul{width: 95%; margin: 25px auto 35px;}
}