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


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


/* header */
#header{position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 7px 0 20px rgba(0,0,0,0.05); height: 90px; z-index: 999;}
#header #logo{width: 213px; height: 100%; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 98;}
#header #logo a{display: block; width: 100%; height: 100%; background: url(/images/common/logo.webp) no-repeat center center / contain;}
#header .pcGnb{position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
#header .pcGnb > ul{display: flex; gap:0 70px; justify-content: center;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 19px; font-weight: 600; color: #222; line-height: 90px;}
#header .pcGnb > ul > li:hover > div > a{color: #0093e9;}
#header .pcGnb > ul > li > ul{position: absolute; left: 50%; transform: translateX(-50%); background-color: #0093e9; width: 200px; text-align: center; display: none;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li + li{border-top: 1px solid rgba(255,255,255,0.1);}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; font-weight: 500; color: #fff; line-height: 50px; display: block;}
#header .pcGnb > ul > li > ul > li:hover > a{background-color: #0073cb;}
#header .r_cont{position: absolute; right: 40px; top: 50%; transform: translateY(-50%); gap:40px; display: flex; align-content: center;}
#header .r_cont .call{}
#header .r_cont .call p{font-size: 14px; color: #666666;}
#header .r_cont .call h3{font-family: 'Poppins', sans-serif; font-size: 23px; color: #222; font-weight: 500;}
#header .r_cont .call h3 span{color: #0093e9; font-weight: 700;}
#header .r_cont .blog{}
#header .r_cont .blog a{}
#header .r_cont .blog a img{max-width: 52px;}
#header .r_cont .menuToggle{display: flex; align-items: center; justify-content: center; display: none; cursor: pointer;}
#header .r_cont .menuToggle span{color: #000; font-size: 32px;}

@media all and (max-width:1440px){
	#header{height: 70px;}
	#header #logo{left: 3%; width: 180px;}
	#header .pcGnb{display: none;}
	#header .r_cont{right: 3%; gap:30px; align-items: center;}
	#header .r_cont .call p{font-size: 13px;}
	#header .r_cont .call h3{font-size: 21px;}
	#header .r_cont .blog a img{max-width: 46px;}
	#header .r_cont .menuToggle{display: flex;}
}
@media all and (max-width:640px){
	#header{height: 60px;}
	#header #logo{width: 156px;}
	#header .r_cont .call{display: none;}
	#header .r_cont .blog{display: none;}
	#header .r_cont .menuToggle span{font-size: 30px;}
}


.moGnb{position: fixed; background-color: #f8f8f8; right: -100%; top: 0px; z-index: 98; width: 100%; height: 100%; transition: .6s; display: none;}
.moGnb.on{right: 0;}
.moGnb > ul{ text-align: left; padding-top: 65px;}
.moGnb > ul > li{}
.moGnb > ul > li > div{position: relative;}
.moGnb > ul > li > div.on::after{content: '↓'; font-family: 'SUIT', sans-serif; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);font-size: 18px; color: #fff;}
.moGnb > ul > li.on > div.on::after{content: '↑';}
.moGnb > ul > li > div{cursor: pointer;}
.moGnb > ul > li > div > a{color: #222; font-size: 20px; font-weight: 700; display: block; padding: 20px 30px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.moGnb > ul > li.on > div > a{ color: #278de8;}
.moGnb > ul > li > div.on > a{pointer-events: none; }
.moGnb > ul > li:hover > div > a{color: #278de8;}
.moGnb > ul > li > ul{margin-top: 0px; background-color: #e5e5e5; display: none;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li > a{color: #333; opacity: 0.8; font-size: 18px; transition: .6s; font-weight: 500; display: block; padding: 10px 30px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.moGnb > ul > li > div > span > a b{display: none;}
.moGnb > ul > li > ul > li:hover > a{opacity: 1;}

.mo_bg{background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:-2; opacity: 0; transition: .6s; display: none;}
.mo_bg.on{z-index: 97; opacity: 1;}


@media all and (max-width:976px){
	.mo_bg{display: block;}
	.moGnb {display: block;}
	.moGnb > ul > li > div> a{font-size: 18px; padding: 15px 25px;}
	.moGnb > ul > li > div.on::after{right: 25px;}
	.moGnb > ul > li > ul > li > a{font-size: 16px;}
	.moGnb > ul > li{cursor: pointer;}
	.moGnb > ul > li > div a.on{pointer-events: none;}
}
@media all and (max-width:640px){
}


/* footer */
#footer{background-color: #f8f8f8; padding: 65px 0;}
#footer .inner{}
#footer .inner .f_logo{max-width: 213px;}
#footer .inner .f_logo img{max-width: 100%;}
#footer .inner .info{margin-top: 35px;}
#footer .inner .info span{display: inline-block; font-size: 16px; font-weight: 500; color: #999; margin-right: 25px; line-height: 1.6em;}
#footer .inner .copy{font-weight: 500; color: #cccccc; font-size: 15px; margin-top: 20px;}


@media all and (max-width:1440px){
	#footer{padding: 50px 0;}
	#footer .inner .f_logo img{max-width: 180px;}
	#footer .inner .info{margin-top: 30px;}
	#footer .inner .info span{font-size: 15px; margin-right: 20px;}
	#footer .inner .copy{margin-top: 15px; font-size: 14px;}
}
@media all and (max-width:640px){
	#footer{padding: 40px 0; text-align: center;}
	#footer .inner .f_logo{margin-left: auto; margin-right: auto;}
	#footer .inner .f_logo img{max-width: 156px;}
	#footer .inner .info{margin-top: 25px;}
	#footer .inner .info span{margin-right: 0; margin: 0 5px; font-size: 14px;}
	#footer .inner .copy{font-size: 12px;}
}


/* quick */
.quick{position: fixed; right: 30px; bottom: 30px; z-index: 98; display: flex; flex-direction: column; align-items: flex-end;}
.quick .go_top{width: 80px; height: 80px; background-color: #0093e9; border-radius: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 25px; cursor: pointer;}
.quick .top_network{background-color: #ffffff; padding: 15px 30px; display: flex; align-items: center; gap:10px; border-radius: 28px; cursor: pointer;}
.quick .top_network img{}
.quick .top_network p{font-size: 17px; font-weight: 600; color: #0f0f0f;}

@media all and (max-width:1440px){
	.quick{bottom: 20px; right: 20px;}
	.quick .go_top{width: 72px; height: 72px; margin-bottom: 20px;}
	.quick .top_network{padding: 12px 24px;}
	.quick .top_network p{font-size: 16px;}
	.quick .top_network img{max-width: 23px;}
}
@media all and (max-width:976px){
	.quick{bottom:3%; right:3%;}
	.quick .go_top{width: 64px; height: 64px; margin-bottom: 20px;}
	.quick .top_network{padding: 12px 20px;}
	.quick .top_network p{font-size: 16px;}
	.quick .top_network img{max-width: 21px;}
}
@media all and (max-width:640px){
	.quick .go_top{width: 56px; height: 56px; margin-bottom: 12px;}
	.quick .top_network{padding: 0px; width: 56px; height: 56px; display: flex; justify-content: center; align-items: center;}
	.quick .top_network p{display: none;}
}
@media all and (max-width:480px){
	.quick .go_top{width: 48px; height: 48px;}
	.quick .top_network{width: 48px; height: 48px;}
}