/*공통*/
@import url("reset.css");
/* @import url("board.css"); */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {

	--max-w : 1920px;
	--conts-w : 1300px;
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);	

	--main-color : #e60012;
	--black : #000;
	--light-black : #333;
	--dep-gray : #171717;
	--dark-gray : #222;
	--white : #fafafa;
	--gray : #757575;
	
	--font-gray : #666;
	--font-gray-2 : #999;

	--Poppins : 'Poppins', sans-serif;
	--Roboto : 'Roboto', sans-serif;
	--Montserrat : 'Montserrat', sans-serif;
	--Archivo : 'Archivo', sans-serif;

	--font-14 : 14px;
	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-22 : 22px;
	--font-24 : 24px;
	--font-26 : 26px;
	--font-28 : 28px;
	--font-30 : 30px;
	--font-32 : 32px;
	--font-36 : 36px;
	--font-40 : 40px;
	--font-50 : 50px;
	--font-54 : 54px;
	--font-60 : 60px;
	--font-72 : 72px;

	--gap-8 : 8px;
	--gap-16 : 16px;
	--gap-20 : 20px;
	--gap-24 : 24px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-50 : 50px;
	--gap-60 : 60px;
	--gap-80 : 80px;
	--gap-100 : 100px;
	--gap-120 : 120px;
	--gap-140 : 140px;
	--gap-160 : 160px;
	--gap-200 : 200px;

	--radius-8 : 8px;
	--radius-16 : 16px;
	--radius-20 : 20px;
	--radius-24 : 24px;
	--radius-32 : 32px;


	--headerH : 100px;
	--footerH : 185px;

}

@media screen and (max-width: 1280px) {
	:root {
		--gap-100 : 80px;
		--gap-120 : 80px;
		--gap-140 : 100px;
		--gap-160 : 140px;
		--gap-200 : 160px;
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--font-15 : 15px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-22 : 20px;
		--font-26 : 24px;
		--font-28 : 26px;
		--font-30 : 28px;
		--font-32 : 30px;
		--font-36 : 34px;
		--font-40 : 36px;
		--font-50 : 42px;
		--font-54 : 48px;
		--font-60 : 52px;
		--font-72 : 62px;

		--gap-28 : 24px;
		--gap-32 : 28px;
		--gap-40 : 36px;
		--gap-50 : 42px;
		--gap-60 : 54px;
		--gap-80 : 70px;
		--gap-140 : 80px;
		--gap-160 : 120px;
		--gap-200 : 140px;

		/*--headerH : 180px;*/
		--headerH : 100px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--font-14 : 12px;
		--font-16 : 14px;
		--font-18 : 15px;
		--font-20 : 18px;
		--font-22 : 18px;
		--font-24 : 20px;
		--font-26 : 22px;
		--font-28 : 22px;
		--font-30 : 24px;
		--font-32 : 26px;
		--font-36 : 28px;
		--font-40 : 32px;
		--font-50 : 36px;
		--font-54 : 40px;
		--font-60 : 42px;
		--font-72 : 50px;

		--gap-16 : 14px;
		--gap-20 : 18px;
		--gap-24 : 22px;
		--gap-32 : 26px;
		--gap-40 : 32px;
		--gap-50 : 36px;
		--gap-60 : 48px;
		--gap-80 : 60px;
		--gap-100 : 60px;
		--gap-120 : 60px;
		--gap-140 : 60px;
		--gap-160 : 100px;
		--gap-200 : 120px;

		--radius-16 : 12px;
		--radius-20 : 15px;
		--radius-24 : 18px;
		--radius-32 : 26px;

		--footerH : 160px;
	}
}

@media screen and (max-width: 648px) {
	:root {
		--headerH : 126px;
	}
}
@media screen and (max-width: 480px) {
	:root {
		--font-14 : 11px;
		--font-16 : 13px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-22 : 16px;
		--font-24 : 17px;
		--font-26 : 18px;
		--font-28 : 18px;
		--font-30 : 20px;
		--font-32 : 20px;
		--font-36 : 22px;
		--font-40 : 24px;
		--font-50 : 32px;
		--font-54 : 32px;
		--font-60 : 36px;
		--font-72 : 42px;

		--gap-8 : 5px;	
		--gap-16 : 10px;
		--gap-20 : 14px;
		--gap-24 : 18px;
		--gap-32 : 22px;
		--gap-40 : 24px;
		--gap-50 : 28px;
		--gap-60 : 32px;
		--gap-80 : 40px;
		--gap-100 : 40px;
		--gap-120 : 40px;
		--gap-140 : 40px;
		--gap-160 : 80px;
		--gap-200 : 100px;

		--radius-8 : 4px;
		--radius-16 : 6px;
		--radius-20 : 10px;
		--radius-24 : 12px;
		--radius-32 : 16px;

		--headerH : 110px;
		--footerH : 140px;
	}
}


#wrap {width:100%; position:relative; overflow:hidden; min-height:var(--nvh); min-width:280px;}


header {width:100%; height:100px; background:var(--black); position:fixed; left:0; top:0; z-index:1000; min-width:280px;}
header > .wrap {width:96%; max-width:1300px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between;}
header .lf-box {display:flex; align-items:flex-end; gap:100px;}
header .rt-box {display:flex; align-items:center; gap:20px; justify-content:flex-end;}
header .logo {width:80px; height:40px; display:block; font-size:0; background:url(../../img/com/logo.png) center no-repeat; background-size:cover !important;}
header .gnb-wrap .gnb-box {display:flex; align-items:center; gap:var(--gap-40);}
header .gnb-wrap .gnb-box .gnb a {font-size:var(--font-20); font-weight:700; padding-bottom:5px; background-image:linear-gradient(var(--main-color),var(--main-color)); background-repeat:no-repeat; background-position:left bottom; background-size:0 3px; transition:background-size 0.2s linear;}
header .gnb-wrap .gnb-box .gnb:hover a {color:var(--main-color); background-size:100% 3px;}
header .com-search {display:flex; align-items:center; height:50px;}
header .com-search .search-input-box {border-radius:100px; background:#fff; width:300px; height:100%;}
header .com-search .search-input-box input[type="text"] {width:100%; height:100%; padding:0 calc(var(--gap-40) + 10px) 0 var(--gap-24); border:none; background:transparent; color:var(--black);}
header .com-search .search-input-box input:-webkit-autofill {border-radius:100px; -webkit-box-shadow: 0 0 0 1000px #fff inset;box-shadow: 0 0 0 1000px #fff inset;-webkit-text-fill-color:#000;text-fill-color:#000;}
header .com-search .btn-sesarch {width:max-content; height:100%; display:flex; align-items:center; justify-content:center; border-radius:100px; background:var(--main-color); padding:0 var(--gap-20); margin-left:calc(var(--gap-40) * -1); font-size:var(--font-16); font-weight:700;}
header .com-search .btn-sesarch span {display:block; position:relative; padding-left:calc(var(--font-16) + 4px);}
header .com-search .btn-sesarch span:before {content:""; width:var(--font-16); height:var(--font-16); background:url(../../img/com/icon_search.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
header .com-search.active {display:flex;}
header .plan-wrap{display:flex;  height:50px; border-radius:100px; align-items:center; gap:var(--gap-20); background:var(--main-color);font-weight:700;}
header .plan-wrap .plan-btn{width:max-content; height:100%; display:flex; align-items:center; justify-content:center; border-radius:100px; background:var(--main-color); padding:0 var(--gap-20); font-size:var(--font-16); font-weight:700;}
header .plan-wrap .plan-btn span {display:block; position:relative; padding-left:calc(var(--font-16) + 4px);line-height:51px;}
header .plan-wrap .plan-btn span:before{content:""; width:var(--font-16); height:var(--font-18); background:url(../../img/com/icon_plan.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}

header .login-wrap {display:flex; align-items:center; gap:var(--gap-40);}
header .login-wrap a {font-size:var(--font-16); font-weight:700; position:relative;}
header .login-wrap a:before {content:""; width:1px; height:calc(var(--font-16) * 0.75); background:#333; position:absolute; left:calc((var(--gap-40) / 2) * -1); top:50%; transform:translateY(-50%);}
header .login-wrap a:first-child:before {display:none;}
header .login-wrap a:hover {color:var(--main-color);}
header .login-wrap a.sign-up {color:var(--main-color);}
header .login-wrap.active {display:flex;}
header .header-button-wrap {display:none; align-items:center; gap:var(--gap-20);}
header .header-button-wrap button {width:72px; height:72px; border-radius:50%; font-size:0; cursor:pointer; position:relative;}
header .header-button-wrap button:before {content:""; width:50%; height:100%; background-size:100% auto; background-repeat:no-repeat; background-position:center; position:absolute; left:50%; top:0; transform:translateX(-50%);}
header .header-button-wrap button.btn-search-open {background:var(--main-color);}
header .header-button-wrap button.btn-search-open:before {background-image:url(../../img/com/icon_search.svg);}
header .header-button-wrap button.btn-login-open {background:var(--dark-gray);}
header .header-button-wrap button.btn-login-open:before {background-image:url(../../img/com/icon_user.svg);}
header .header-button-wrap button.btn-plan-open{background:var(--main-color);}
header .header-button-wrap button.btn-plan-open:before{background-image:url(../../img/com/icon_plan.svg);}


@media screen and (max-width: 1280px) {
	header .lf-box {gap:40px;}
	header .rt-box {gap:20px;}
	header .com-search .search-input-box {width:200px;}
}

@media screen and (max-width: 1024px) {
	header .gnb-wrap {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
	header .com-search {width:100%; height:68px; position:absolute; left:0; top:var(--headerH); background:#fff; z-index:11; display:none;}
	header .com-search .search-input-box {border-radius:0; width:100%;}
	header .com-search .btn-sesarch {border-radius:0; font-size:var(--font-26); margin-left:0;}
	header .com-search .btn-sesarch span {padding-left:calc(var(--gap-24) + 4px);}
	header .com-search .btn-sesarch span:before {width:var(--gap-24); height:var(--gap-24);}
	header .plan-wrap .plan-btn{width:100%; height:68px; position:absolute; left:0; top:var(--headerH); z-index:11; gap:0; display:none;}
	header .login-wrap {width:100%; height:68px; position:absolute; left:0; top:var(--headerH); z-index:11; gap:0; display:none;}
	header .login-wrap a {flex:1; height:100%; background:var(--dark-gray); display:flex; align-items:center; justify-content:center; font-size:var(--font-20); font-weight:500;}
	header .login-wrap a:before {display:none;}
	header .login-wrap a:last-child {background:var(--main-color); color:#fff;}
	header .login-wrap a:hover {color:#fff;}
	header .header-button-wrap button {width:50px; height:50px;}
	header .header-button-wrap {display:flex; gap:var(--gap-20);}
	/*header {padding-bottom:80px;}
	header .logo {width:120px; height:60px;}
	header .gnb-wrap {width:100%; height:80px; position:absolute; left:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:10;}
	header .gnb-wrap .gnb-box .gnb a {font-size:var(--font-36); font-weight:500;}
	header .com-search {width:100%; height:80px; position:absolute; left:0; bottom:0; background:#fff; z-index:11; display:none;}
	header .com-search .search-input-box {border-radius:0; width:100%;}
	header .com-search .btn-sesarch {border-radius:0; font-size:var(--font-26); margin-left:0;}
	header .com-search .btn-sesarch span {padding-left:calc(var(--gap-24) + 4px);}
	header .com-search .btn-sesarch span:before {width:var(--gap-24); height:var(--gap-24);}
	header .login-wrap {width:100%; height:80px; position:absolute; left:0; bottom:0; z-index:11; gap:0; display:none;}
	header .login-wrap a {flex:1; height:100%; background:var(--dark-gray); display:flex; align-items:center; justify-content:center; font-size:var(--font-30); font-weight:500;}
	header .login-wrap a:before {display:none;}
	header .login-wrap a:last-child {background:var(--main-color);}
	header .login-wrap a:hover {color:#fff;}
	header .header-button-wrap {display:flex;}*/
	
}

@media screen and (max-width: 648px) {
	header {height:70px; padding-bottom:56px;}
	header .logo {width:80px; height:40px;}
	header .gnb-wrap {width:100%; height:56px ;position:absolute; left:0; top:auto; bottom:0; display:flex; align-items:center; justify-content:center; z-index:10; transform:none;}
	header .gnb-wrap .gnb-box .gnb a {font-size:var(--font-30); font-weight:700;}
	header .com-search {height:56px; top:auto; bottom:0;}
	header .com-search .btn-sesarch {font-size:var(--font-20);}
	header .com-search .btn-sesarch span {padding-left:calc(var(--gap-24) + 4px);}
	header .com-search .btn-sesarch span:before {width:var(--gap-24); height:var(--gap-24);}
	header .login-wrap {height:56px; top:auto; bottom:0;}
	header .login-wrap a {font-size:var(--font-24);}
	header .header-button-wrap button {width:52px; height:52px;}
}

@media screen and (max-width: 480px) {
	header {height:60px; padding-bottom:50px;}
	header .logo {width:64px; height:32px;}
	header .gnb-wrap {height:50px;}
	header .com-search {height:50px;}
	header .login-wrap {height:50px;}
	header .header-button-wrap button {width:42px; height:42px;}
}


footer {width:100%; margin-top:var(--gap-50);}
footer .footer-top {width:100%; height:48px; background:#111; display:flex; align-items:center; justify-content:center;}
footer .footer-top > .wrap {width:92%; margin:0 auto;}
footer .footer-top .fnb-wrap {width:100%; display:flex; align-items:center; justify-content:center; gap:0 96px;}
footer .footer-top .fnb-wrap .fnb-box {display:flex; align-items:center; gap:30px;}
footer .footer-top .fnb-wrap .fnb-box .head {font-size:var(--font-18); font-weight:700; color:var(--white);}
footer .footer-top .fnb-wrap .fnb-box ul {display:flex; align-items:center; gap:3px var(--gap-20); flex-wrap:wrap;}
footer .footer-top .fnb-wrap .fnb-box ul li a {font-size:var(--font-14); color:#aaa; background-image:linear-gradient(var(--main-color), var(--main-color)); background-repeat:no-repeat; background-position:left bottom; background-size:0 1px; transition:background-size 0.2s linear;}
footer .footer-top .fnb-wrap .fnb-box ul li:hover a {color:var(--main-color); background-size:100% 1px;}
footer .footer-bottom {width:100%; padding:var(--gap-40) 0;}
footer .footer-bottom > .wrap {width:92%; margin:0 auto;}
footer .footer-bottom .logo {width:80px; height:40px; margin:0 auto; background:url(../../img/com/logo.png) center no-repeat; background-size:cover; font-size:0;}
footer .footer-bottom .copyright {width:100%; text-align:center; margin-top:var(--gap-16); font-size:13px; color:var(--font-gray); line-height:1.6; letter-spacing:0;}
footer .footer-bottom .copyright span {display:block;}

@media screen and (max-width: 1280px) {
	footer .footer-top .fnb-wrap {gap:0 50px;}
	footer .footer-top .fnb-wrap .fnb-box {gap:25px;}
}

@media screen and (max-width: 1024px) {
	footer .footer-top {padding:var(--gap-32) 0; height:100%;}
	footer .footer-top .fnb-wrap {flex-wrap:wrap; gap:var(--gap-40);}
	footer .footer-top .fnb-wrap .fnb-box {width:100%; flex-wrap:wrap; gap:var(--gap-8);}
	footer .footer-top .fnb-wrap .fnb-box .head {width:100%; font-size:var(--font-24);}
	footer .footer-top .fnb-wrap .fnb-box ul {width:100%;}
	footer .footer-top .fnb-wrap .fnb-box ul li a {font-size:var(--font-18);}
	footer .footer-bottom .logo {margin-right:auto; margin-left:0;}
	footer .footer-bottom .copyright {text-align:left; font-size:var(--font-18);}
}

@media screen and (max-width: 768px) {
	footer .footer-bottom .copyright {line-height:1.3; margin-top:var(--gap-24);}
	footer .footer-bottom .copyright span:last-child {margin-top:var(--gap-24);}
}


.button {display:flex; align-items:center; justify-content:center; border-radius:4px;}
.button.basic {min-width:200px; height:48px; border-radius:4px; font-size:var(--font-16); font-weight:700;}
.button.wide {width:100%; height:60px; font-size:var(--font-20); font-weight:700;}
.button.medium {height:50px; font-size:var(--font-20); font-weight:700;}
.button.small {height:40px; font-size:var(--font-14); font-weight:700;}
.button.auto {width:max-content; padding:0 var(--gap-24);}
.button.fill {background:var(--main-color);}
.button.black {background:var(--dep-gray); color:var(--white);}
.button.light-black {background:var(--light-black); color:var(--white);}
.button.line {border:1px solid var(--main-color); background:#fff; color:var(--main-color);}

@media screen and (max-width: 1024px) {
	.button.basic {min-width:320px; height:60px; font-size:var(--font-20);}
}

@media screen and (max-width: 768px) {
	.button.wide {font-size:var(--font-26);}
	.button.basic {font-size:var(--font-24);}
	.button.small {font-size:var(--font-18);}
}

@media screen and (max-width: 648px) {
	.button.basic {min-width:200px; height:60px;}
}

@media screen and (max-width: 480px) {
	.button.basic {min-width:160px; height:50px;}
	.button.wide {height:50px;}
	.button.small {height:36px;}
}



@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}