/*공통*/
@import url("reset.css");
@import url("animate.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');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6ExtraBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}


@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
     font-family: 'S-CoreDream-7Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}


:root {

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

	--main-color : #45ACEF;
	--sub-color : #004F9A;
	--red : #FF0000;
	--yellow : #ffe557;
	--blue : #2f8ade;

	--Poppins : 'Poppins', sans-serif;
	--Roboto : 'Roboto', sans-serif;
	--Montserrat : 'Montserrat', sans-serif;
	--NanumSquare : 'NanumSquare', sans-serif;
	--Archivo : 'Archivo', sans-serif;
	--DM : "DM Serif Display", serif;
    --scoreDream : 'S-CoreDream';

	--font-12 : 12px;
	--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-60 : 60px;
	--font-72 : 72px;

	--gap-8 : 8px;
	--gap-16 : 16px;
	--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;

}

@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-18 : 16px;
		--font-20 : 18px;
		--font-22 : 20px;
		--font-26 : 24px;
		--font-28 : 26px;
		--font-30 : 28px;
		--font-32 : 28px;
		--font-36 : 34px;
		--font-40 : 36px;
		--font-50 : 42px;
		--font-60 : 52px;
		--font-72 : 62px;

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

@media screen and (max-width: 768px) {
	:root {
		--font-12 : 11px;
		--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 : 24px;
		--font-36 : 28px;
		--font-40 : 32px;
		--font-50 : 36px;
		--font-60 : 42px;
		--font-72 : 50px;

		--gap-16 : 14px;
		--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;
	}
}

@media screen and (max-width: 480px) {
	:root {		
		--font-12 : 9px;
		--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-60 : 36px;
		--font-72 : 42px;

		--gap-8 : 5px;	
		--gap-16 : 10px;
		--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;
	}
}

body {width:100%; min-height:var(--nvh); background:#000;}

#wrap {min-width:320px;}

header {width:100%; position:fixed; left:0; top:0; z-index:100;}
header:after {content:""; width:100%; height:0; background:rgba(0,0,0,0.7); position:absolute; left:0; top:0; z-index:0; transition:height 0.3s linear;}
header > .wrap {width:95%; max-width:var(--wid-w); margin:0 auto; height:80px; display:flex; align-items:center; justify-content:space-between; z-index:10; position:relative;}
header .logo {width:120px; height:21px; background:url(/img/logo_w.svg) center no-repeat; background-size:cover; font-size:0; display:block;}
header .header-conts {display:flex; align-items:center; justify-content:flex-end; gap:var(--gap-24);}
header .gnb-wrap ul.gnb-box {display:flex; align-items:center; gap:0 var(--gap-24);}
header .gnb-wrap ul.gnb-box li.gnb {position:relative;}
header .gnb-wrap ul.gnb-box li.gnb > a {font-size:var(--font-18); color:#fff; height:80px; display:flex; align-items:center; justify-content:center; position:relative; font-family:var(--Archivo);}
header .gnb-wrap ul.gnb-box li.gnb > a > span {position:relative;}
header .gnb-wrap ul.gnb-box li.gnb > a > span:after {content:""; width:0; height:2px; background:var(--yellow); position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.3s ease-in-out;}
header .gnb-wrap ul.gnb-box li.gnb:hover > a,
header .gnb-wrap ul.gnb-box li.gnb.on > a {color:var(--yellow);}
header .gnb-wrap ul.gnb-box li.gnb:hover > a > span:after,
header .gnb-wrap ul.gnb-box li.gnb.on> a > span:after {width:100%;}
header .sns-wrap {display:flex; align-items:center; gap:0 var(--gap-16);}
header .sns-wrap a {width:20px; height:20px; background-repeat:no-repeat; background-size:100% auto; background-position:center; font-size:0; display:block;}
header .sns-wrap a.twitter {background-image:url(/img/twitter_w.svg);}
header .sns-wrap a.instagram {background-image:url(/img/instagram_w.svg);}
header .sns-wrap a.youtube {background-image:url(/img/youtube_w.svg);}
header .sns-wrap span:nth-child(-n+2) a {width:18px; height:18px;}
header .btn-sitemap {width:30px; height:30px; font-size:0; cursor:pointer; background:url(/img/icon_menu.svg) center no-repeat; background-size:cover; display:none;}
header .btn-sitemap.active {background-image:url(/img/icon_close.svg);}

header .sitemap {width:100%; height:var(--nvh); background:#000; position:fixed; left:0; top:0; z-index:9; padding:80px 0; visibility:hidden; opacity:0; transition:visibility 0.5s ease-in-out, opacity 0.5s ease-in-out;}
header .sitemap .sitemap-wrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
header .sitemap .sitemap-wrap ul.mo-gnb-box {width:100%;}
header .sitemap .sitemap-wrap ul.mo-gnb-box li.mo-gnb {text-align:center; margin-top:var(--gap-16);}
header .sitemap .sitemap-wrap ul.mo-gnb-box li.mo-gnb:first-child {margin-top:0;}
header .sitemap .sitemap-wrap ul.mo-gnb-box li.mo-gnb > a {font-size:var(--font-40); font-weight:700; color:#fff; font-family:var(--Archivo);}
header .sitemap .mo-sns-wrap {display:flex; align-items:center; gap:0 var(--gap-24); margin-top:var(--gap-60);}
header .sitemap .mo-sns-wrap a {width:30px; height:30px; background-repeat:no-repeat; background-size:100% auto; background-position:center; font-size:0; display:block;}
header .sitemap .mo-sns-wrap a.twitter {background-image:url(/img/twitter_w.svg);}
header .sitemap .mo-sns-wrap a.instagram {background-image:url(/img/instagram_w.svg);}
header .sitemap .mo-sns-wrap a.youtube {background-image:url(/img/youtube_w.svg);}
header .sitemap.active {visibility:visible; opacity:1;}

header.fix:after {height:100%;}


@media screen and (max-width: 768px) {
	header .gnb-wrap,
	header .sns-wrap {display:none;}
	header .btn-sitemap {display:block;}
}

@media screen and (max-width: 480px) {
	header > .wrap {height:70px;}
	header .logo {width:91px; height:16px;}
	header .btn-sitemap {width:25px; height:25px;}
	header .sitemap .mo-sns-wrap a {width:24px; height:24px;}
}


footer {width:100%;}
footer > .wrap {width:95%; max-width:var(--wid-w); margin:0 auto; height:100px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
footer em {width:100%; display:block; font-family:var(--DM); text-align:center; color:#fff; font-size:var(--font-16); font-style:italic;}
footer .copyright {font-size:var(--font-14); color:rgba(255,255,255,0.7); text-align:center; width:100%; font-weight:300;}
footer.fix {position:fixed; left:0; bottom:0;}


.check {position:relative;}
.check input[type="checkbox"] {position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.check input[type="checkbox"] + label {width:18px; height:18px; border:1px solid #fff; border-radius:4px; display:block; cursor:pointer; position:relative;}
.check input[type="checkbox"]:checked + label:before {content:""; width:100%; height:100%; background:url(/img/icon_check.svg) center no-repeat; background-size:70% auto; position:absolute; left:0; top:0;}

.radio-select {position:relative;}
.radio-select .option-list {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#eee; border:1px solid rgba(255,255,255,0.5); width:100%; display:none;}
.radio-select .option-list ul {width:100%;}
.radio-select .option-list ul li {width:100%;}
.radio-select .option-list ul li .radio-box {position:relative;}
.radio-select .option-list ul li .radio-box input[type="radio"] {position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.radio-select .option-list ul li .radio-box input[type="radio"] + label {font-size:12px; cursor:pointer; height:30px; display:flex; align-items:center; justify-content:center; color:#333; width:100%;}
.radio-select .option-list ul li .radio-box input[type="radio"]:checked + label {color:var(--red);}
.radio-select .option-list ul li:hover .radio-box input[type="radio"] + label { color:var(--red);}
.radio-select .option-list.active {display:block;}

@media screen and (max-width: 600px) {
	.check input[type="checkbox"] + label {width:15px; height:15px; border-radius:3px;}
}

@media screen and (max-width: 480px) {
	.check input[type="checkbox"] + label {width:14px; height:14px; border-radius:2px;}
}


.button {width:150px; height:50px; display:flex; align-items:center; justify-content:center; border:1px solid #fff; font-size:var(--font-16); color:#fff; transition:all 0.3s ease-in-out;}
.button:hover {background:#fff; color:#333;}

@media screen and (max-width: 768px) {
	.button {width:120px; height:42px;}
}

@media screen and (max-width: 480px) {
	.button {width:100px; height:36px;}
}


.select {position:relative;}
.select select {width:0; height:0; position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.select .select-txt {width:100%; height:50px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.5); padding:0 var(--gap-16); font-size:var(--font-18); color:#fff; text-align:left; position:relative;}
.select .select-txt:after {content:""; width:10px; height:10px; background:url(/img/arrow_down.svg) center no-repeat; background-size:cover; position:absolute; right:var(--gap-16); top:50%; transform:translateY(-50%);}
.select .option-list {width:100%; padding:var(--gap-16) 0; background:#fff; position:absolute; left:0; top:50px; display:none; z-index:50; max-height:150px; overflow-y:auto;}
.select .option-list li {font-size:var(--font-18); color:#333; padding:var(--gap-8) var(--gap-16); cursor:pointer;}

.radio {position:relative;}
.radio input[type="radio"] {position:absolute; left:0; top:0; width:0; height:0; opacity:0; visibility:hidden;}
.radio input[type="radio"] + label {width:16px; height:16px; border-radius:50%; font-size:0; cursor:pointer; border:1px solid #fff; display:block;}
.radio input[type="radio"] + label:after {content:""; width:8px; height:8px; border-radius:50%; background:var(--yellow); position:absolute; left:5px; top:5px; display:none;}
.radio input[type="radio"]:checked + label {border-color:var(--yellow);}
.radio input[type="radio"]:checked + label:after {display:block;}


@media screen and (max-width: 768px) {
	.select .select-txt {height:45px;}	
}

@media screen and (max-width: 480px) {
	.select .select-txt {height:40px;}
	.select .select-txt:after {width:8px; height:8px;}
	.radio input[type="radio"] + label {width:12px; height:12px;}
	.radio input[type="radio"] + label:after {width:6px; height:6px; left:4px; top:4px;}
}



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

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

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