@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; height: -webkit-fill-available;}
body.on{overflow: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1400px;	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:1279px) {	
.s-inner {width:94%;}
}

/* header */
#header{position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 80px; transition: .4s;}
#header:hover{background-color: #fff;}
#header.on{background-color: #fff;}
#header .share{position: absolute; top: 50%; transform: translateY(-50%); left: 40px; cursor: pointer;}
#header .share i{color: #fff; font-size: 24px;}
#header:hover .share i{color: #000;}
#header.on .share i{color: #000;}
#header #logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#header #logo a{display: block; width: 410px; height: 21px; background: url(/images/common/logo_w.svg) no-repeat center center / 410px auto;}
#header:hover #logo a{ background: url(/images/common/logo.svg) no-repeat center center / 410px auto;}
#header.on #logo a{ background: url(/images/common/logo.svg) no-repeat center center / 410px auto;}
#header .menuToggle{position: absolute; top: 50%; transform: translateY(-50%); right: 40px; cursor: pointer;}
#header .menuToggle i{color: #fff; font-size: 24px;}
#header:hover .menuToggle i{color: #000;}
#header.on .menuToggle i{color: #000;}

.mo_bg{position: fixed; top: 0; left: 0; z-index: -10; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; opacity: 0; transition: .4s;}
.mo_bg.on{z-index: 200; opacity: 1;}
.moGnb{width: 340px; height: 100%; background-color: #fff; position: fixed; right: -340px; top: 0; z-index: -10; transition: .4s;}
.moGnb.on{z-index: 201; right: 0;}
.moGnb .top{}
.moGnb .top a{display: block; height: 210px; width: 100%; background: #1852c8 url(/images/common/moGnb_img.webp) no-repeat right 10px center / auto; padding: 30px;}
.moGnb .top a .txt{display: flex; align-items: center; height: 100%; font-family: 'GmarketSans', sans-serif; font-size: 24px; color: #fff; font-weight: 700; line-height: 1.3em; transform: rotate(0.1deg);}
.moGnb .menu{}
.moGnb .menu li{position: relative;}
.moGnb .menu li a{display: block; line-height: 76px; padding: 0 30px; font-size: 18px; font-weight: 500; color: #000000; font-weight: 500;}
.moGnb .menu li:hover a{color: #1852c8;}
.moGnb .menu li a::after{content: '↗'; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-size: 24px; font-weight: 400;}
.moGnb .menu li+li a{border-top: 1px solid #e5e5e5;}
.moGnb .share_btn2{position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap:20px;}
.moGnb .share_btn2 li{}
.moGnb .share_btn2 li a{}
.moGnb .share_btn2 img{max-width: 48px;}

.fixed_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: -99; opacity: 0; transition: .4s; cursor: pointer;}
.fixed_bg.on{z-index: 200; opacity: 1;}
.fixed_cont{position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);background-color: #fff; border-radius: 20px; padding: 30px; text-align: center; z-index: -99; opacity: 0; transition: .4s;}
.fixed_cont.on{z-index: 201; opacity: 1;}
.fixed_cont h3{font-size: 18px; color: #000; margin-bottom: 16px; line-height: 1em; }
.fixed_cont .fixed_share_btn{display: flex; gap:10px;}
.fixed_cont .fixed_share_btn li{}
.fixed_cont .fixed_share_btn li a{}
.fixed_cont .fixed_share_btn li a img{max-width: 48px;}

@media all and (max-width:768px){
	#header{height: 60px;}
	#header .share{left: 3%;}
	#header .share i{font-size: 22px;}
	#header #logo a{width: 340px; background-size: 100% auto !important;}
	#header .menuToggle{right: 3%;}
	#header .menuToggle i{font-size: 22px;}
	.moGnb{width: 260px; right: -260px;}
	.moGnb .top a{padding: 20px; height: 160px; background-size: 130px;}
	.moGnb .top a .txt{font-size: 20px;}
	.moGnb .menu li a{line-height: 56px; font-size: 17px; padding: 0 20px;}
	.moGnb .menu li a::after{font-size: 22px; right: 20px;}
	.moGnb .share_btn2{gap:10px;}
	.moGnb .share_btn2 img{max-width: 40px;}
}
@media all and (max-width:500px){
	#header .share i{font-size: 20px;}
	#header #logo a{width: 320px;}
	#header .menuToggle i{font-size: 20px;}
}
@media all and (max-width:400px){
	#header .share i{font-size: 19px;}
	#header #logo a{width: 280px;}
	#header .menuToggle i{font-size: 19px;}
}


/* footer */
#footer {padding: 70px 0 100px;}
#footer .s-inner{display: flex; justify-content: space-between; align-items: center;}
#footer .s-inner .copy{font-size: 20px; font-weight: 500; color: #000; opacity: 0.5;}
#footer .s-inner .share_btn{display: flex; gap:20px; align-items: center;}
#footer .s-inner .share_btn li{}
#footer .s-inner .share_btn li a{}
#footer .s-inner .share_btn li a img{max-width:48px;}

@media all and (max-width:1280px){
	#footer{padding: 60px 0 90px;}
}
@media all and (max-width:1024px){
	#footer{padding: 50px 0 80px;}
	#footer .s-inner .copy{font-size: 18px;}
	#footer .s-inner .share_btn{gap:10px;}
}
@media all and (max-width:768px){
	#footer{padding: 45px 0 75px;}
	#footer .s-inner{flex-direction: column; justify-content: center;}
	#footer .s-inner .copy{font-size: 18px;}
	#footer .s-inner .share_btn{gap:10px; margin-top: 30px;}
	#footer .s-inner .share_btn li a img{max-width: 40px;}
}
@media all and (max-width:500px){
	#footer{padding: 40px 0 60px;}
	#footer .s-inner .copy{font-size: 3vw; white-space: nowrap;}
}