@charset "utf-8";
@import url("unable/board.css");
@import url("unable/board_renew.css");
@import url("custom_board.css");

/*
 * layout.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) open-control
 * 4) 언어선택
 * 5) 준비중
 * 6) 관련사이트-목록열기형
 * 7) 레이아웃설정
 *
 */

/* 1) root 설정  */
:root {
	--color-base: #222;
	--color-point: #f37021;
	--color-orange: #f39800;
	--color-blue: #036eb8;
	--color-green: #109448;
	--color-sky: #2ea7e0;
	--color-white: #fff;
	--color-black: #000;
	--font-base: 16rem;
	--font-gms: "Gmarket Sans", Sans-serif;
	--font-pre: "Pretendard", Sans-serif;
	--font-nsneo: "NanumSquareNeo", Sans-serif;
	--font-sans: var(--font-pre);
	--trans-ani: 0.3s ease 0s;
	--font15: 15rem;
	--font16: 16rem;
	--font17: 17rem;
	--font18: 18rem;
	--font20: 20rem;
	--font22: 22rem;
	--font23: 23rem;
	--font25: 25rem;
	--font30: 30rem;
	--font35: 35rem;
	--font40: 40rem;
	--font45: 45rem;
	--font50: 50rem;
	--font55: 55rem;
	--font60: 60rem;
	--font70: 70rem;
	--font80: 80rem;
	--inr: 1500;
	--inr-sub: 1400;
	--inr-wide: 1760;
	--inr-width: 0.92;
	--r: 20rem;
	--container: 1500;
}
@media (max-width: 1024px) {
	:root {
		--font-base: clamp(14rem, 1.563vw, 16rem);
		--font15: clamp(14rem, 1.465vw, 15rem);
		--font16: clamp(14rem, 1.563vw, 15rem);
		--font17: clamp(14rem, 1.66vw, 17rem);
		--font18: clamp(15rem, 1.758vw, 18rem);
		--font20: clamp(16rem, 1.953vw, 20rem);
		--font22: clamp(18rem, 2.148vw, 22rem);
		--font23: clamp(18rem, 2.246vw, 23rem);
		--font25: clamp(20rem, 2.441vw, 25rem);
		--font30: clamp(22rem, 2.93vw, 30rem);
		--font35: clamp(22rem, 3.418vw, 35rem);
		--font40: clamp(25rem, 3.906vw, 40rem);
		--font45: clamp(28rem, 4.395vw, 45rem);
		--font50: clamp(30rem, 5.371vw, 50rem);
		--font55: clamp(30rem, 4.88vw, 55rem);
		--font60: clamp(35rem, 5.859vw, 60rem);
		--font70: clamp(45rem, 6.836vw, 70rem);
		--font80: clamp(50rem, 7.81vw, 80rem);
	}
}
@media (max-width: 480px) {
	:root {
		--r: 10rem;
	}
}

/* 2) 폰트설정 */
body { font-size: var(--font-base, 16rem); }
.gm { font-family: var(--font-gsans); }
.pre { font-family: var(--font-pre); }
.show-mo { display: none; }

@media (min-width: 1921px) {
	html { font-size: 0.052vw /* 1px */; }
}
@media (max-width: 1300px) {
	html { font-size: 0.077vw /* 1px */; }
}
@media (max-width: 1024px) {
	html { font-size: 0.098vw /* 1px */; }
}
@media (max-width: 768px) {
	html { font-size: 0.13vw /* 1px */; }
}
@media (max-width: 480px) {
	html { font-size: 0.271vw /* 1.3px */; }
}

/* 3) open-control */
.open-control { position: relative; }
.open-control .list { position: absolute; top: 100%; display: none; width: 100%; padding: 15rem; background-color: #fff; border: 1rem solid #eee; }
.open-control .list a { display: inline-block; }

/* 4) 언어선택 */
.lang-area { position: relative; min-width: 120rem; }
.lang-area .open-control__btn { display: flex; align-items: center; gap: 10rem; font-weight: 500; font-size: 17rem; background-color: transparent; }
.lang-area .list ul { display: flex; flex-direction: column; gap: 5rem; font-size: 15rem; }
.lang-area .list a { font-weight: 600; opacity: 0.5; transition: 0.3s ease; }
.lang-area .list a:hover { opacity: 1; }

/* 5) 준비중 */
.ready-page { padding: 120rem 0; text-align: center; }
.ready-page strong { display: block; font-size: 35rem; }
.ready-page strong i { display: block; margin-bottom: 10rem; font-size: 45rem; opacity: 0.2; }
.ready-page p { margin-top: 20rem; font-size: 18rem; line-height: 1.4; }
@media (max-width: 480px) {
	.ready-page { padding: 80rem 0; }
	.ready-page strong { font-size: 30rem; }
	.ready-page p { font-size: 16rem; word-break: keep-all; }
	.ready-page p br { display: none; }
}

/* 6) 관련사이트-목록열기형 */
.relate-site { position: relative; max-width: 260rem; }
.relate-site .open-control__btn { position: relative; width: 100%; height: 55rem; box-sizing: border-box; padding: 0 30rem 0 20rem; font-weight: 600; font-size: 15rem; text-align: left; color: #333; background-color: transparent; border: 1rem solid rgba(14, 14, 14, 0.15); transition: 0.3s ease; }
.relate-site .open-control__btn .xi-plus-min { position: absolute; top: 50%; right: 20rem; margin-top: -10rem; font-size: 20rem; transition: transform 0.3s; }
.relate-site .open-control__btn.active { border-color: #111; }
.relate-site .open-control__btn.active .xi-plus-min { transform: rotate(45deg); }
.relate-site .list { position: absolute; top: auto; bottom: 100%; display: none; width: 100%; box-sizing: border-box; padding: 35rem 20rem; background: #fff; border: 1rem solid #111; border-bottom: 0; }
.relate-site .list ul > li { margin-top: 10rem; }
.relate-site .list ul > li:first-child { margin-top: 0; }
.relate-site .list a { display: inline-block; font-weight: 500; font-size: 14rem; opacity: 0.5; transition: opacity 0.3s; }
.relate-site .list a:hover { opacity: 1; }
@media (max-width: 480px) {
	.relate-site { max-width: 100%; }
}

/* 7) 레이아웃설정 */
:where(.inr, .inr-sub) { position: relative; width: calc(var(--inr-width) * 100%); max-width: calc(var(--inr) * 1rem); margin: 0 auto !important; }
.inr-wide { max-width: calc(var(--inr-wide) * 1rem); }
.inr-sub { max-width: calc(var(--inr-sub) * 1rem); }
.container { position: relative; width: calc(var(--inr-width) * 100%); max-width: calc(var(--inr) * 1rem); margin-inline: auto;
	&.container--wide { max-width: 1740rem; }
}
.orange { color: #f39800; }
.blue { color: #036eb8; }
.text-orange { color: #f39800; }
.text-blue { color: #036eb8; }
.text-gray { color: #bbb; }

/* header */
#header { position: absolute; inset: 0 0 auto; z-index: 50; width: 100%; height: 100rem; background: transparent; }
#header .inr { display: flex; align-items: center; justify-content: space-between; height: 100%; }
#header h1 a { display: block; }
#header h1 img { height: 48rem; object-fit: contain; }
/* gnb */
#header nav { height: 100%; }
#header nav .gnb { display: flex; align-items: center; height: 100%; }
#header nav .gnb > li a { display: inline-block; word-break: keep-all; }
#header nav .gnb > li { position: relative; height: 100%; }
#header nav .gnb > li > a { display: flex; align-items: center; height: 100%; padding: 0 35rem; font-weight: 400; font-size: var(--font18); color: var(--color-white); }
#header nav .gnb > li > .box > ul { display: flex; flex-direction: column; padding: 10rem 0; }
#header nav .gnb > li > .box.depth02 { width: 100%; min-width: 180rem; box-sizing: border-box; background-color: var(--color-white); border: 1rem solid #888; border-radius: 8rem; box-shadow: 0 10rem 20rem rgba(0, 0, 0, 0.1); }
#header nav .gnb > li > .box.depth02 > ul > li { padding: 0 10rem; }
#header nav .gnb > li > .box.depth02 > ul > li > a { display: block; box-sizing: border-box; padding: 8rem 10rem; font-weight: 400; font-size: 15rem; color: #555; transition: opacity 0.3s ease; }
#header nav .gnb > li.none { display: none !important; }
/* depth03 */
#header nav .gnb > li > .box.depth02 .depth03 { padding-bottom: 5rem; }
#header nav .gnb > li > .box.depth02 .depth03 li a { display: block; padding: 5rem 10rem; font-size: 15rem; color: #a9a9a9; }
#header nav .gnb > li > .box.depth02 .depth03 li span { position: relative; padding-left: 10rem; }
#header nav .gnb > li > .box.depth02 .depth03 li span::before { position: absolute; top: 7rem; left: 0; width: 4rem; height: 4rem; background: #ccc; border-radius: 50%; content: ""; }
/* gnb active */
#header nav .gnb > li > .box.depth02 { position: absolute; left: 50%; transform: translate(-50%, -20rem); visibility: hidden; opacity: 0; transition: 0.3s ease; transition-property: opacity, visibility, transform; }
#header nav .gnb > li.active > .box.depth02 { transform: translate(-50%, -10rem); visibility: visible; opacity: 1; }
#header nav .gnb > li > .box.depth02 > ul > li > a:hover { color: var(--color-point); }
#header nav .gnb > li > .box.depth02 .depth03 li a:hover { color: var(--color-point); }
#header nav .gnb > li > .box.depth02 .depth03 li a:hover span::before { background: var(--color-point); }

@media (max-width: 1400px) {
	#header nav .gnb > li > a { padding: 0 20rem; }
}
@media (max-width: 1024px) {
	#header { height: 80rem; }
	#header nav { display: none; }
}
@media (max-width: 767px) {
	#header h1 img { height: 40rem; }
}
@media (max-width: 480px) {
	#header { height: 60rem; }
	#header h1 img { height: 35rem; }
}
/* maga menu */
.mega-menu { position: fixed; top: 0; left: 0; z-index: 9999; display: flex; align-items: stretch; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; transition: 0.3s ease; transition-property: opacity, visibility; }
.mega-menu.active { visibility: visible; opacity: 1; }
.gnb-mob { width: 80%; overflow-y: auto; background-color: #fff; }
.gnb-mob .gnb { padding: 30rem; }
.gnb-mob .gnb > li { position: relative; border-bottom: 1rem solid rgba(0, 0, 0, 0.1); }
.gnb-mob .gnb > li > a { display: flex; align-items: center; padding: 20rem 20rem; font-weight: 500; font-size: 23rem; }
.gnb-mob .gnb > li .open { position: absolute; top: 20rem; right: 20rem; width: 20rem; height: 20rem; font-size: 0; background-color: transparent; }
.gnb-mob .gnb > li .open:before { display: block; font-size: 20rem; font-family: xeicon !important; content: "\e913"; }
.gnb-mob .gnb > li > a.active ~ .open:before { content: "\e91a"; }
.gnb-mob .gnb > li > a.on { color: var(--color-point); }
.gnb-mob .box { display: none; padding: 30rem; background-color: #f3f3f3; }
.gnb-mob .box ul { display: flex; flex-direction: column; gap: 10rem; }
.gnb-mob .box a { display: block; font-size: 18rem; }
.gnb-mob .box a span { line-height: 1.4; background: linear-gradient(90deg, #222, #222); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2rem; transition: 0.5s; }
.gnb-mob .box a.on span { font-weight: 700; background-size: 100% 2rem; }
#wrap .mega-menu [data-gnbname="video_sub01"]{ display: none; }
/* maga control */
[class*="mega-menu__"] { display: block; background-color: transparent; }
[class*="mega-menu__"] span { position: relative; display: block; width: 30rem; height: 18rem; margin: 0 auto; font-size: 0; }
[class*="mega-menu__"] span i, [class*="mega-menu__"] span:before, [class*="mega-menu__"] span:after { position: absolute; display: block; height: 2rem; background-color: #fff; transform: rotate(0); }
[class*="mega-menu__"] span:before, [class*="mega-menu__"] span:after { width: 100%; content: ""; }
[class*="mega-menu__"] span:before { top: 0; right: 0; transition: 0.5s ease 0s; }
[class*="mega-menu__"] span:after { bottom: 0; left: 0; transition: 0.5s ease 0s; }
[class*="mega-menu__"] span i { top: 8rem; left: 0; width: 100%; opacity: 1; transition: opacity 0.3s, transform 0.5s ease 1.1s; }
[class*="mega-menu__"].active i { opacity: 0; }
[class*="mega-menu__"].active span:before { top: 5rem; right: 0; transform: rotate(45deg); }
[class*="mega-menu__"].active span:after { bottom: 7rem; left: 0; transform: rotate(-45deg); }
/* mega menu - open btn */
/* pc에서만 사용한다면 display none처리 */
.mega-menu__btn { display: none; }
/* mega menu - close btn */
.mega-menu__close { flex: auto; width: auto; height: auto; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mega-menu__close em { display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; }
.mega-menu__close span { width: 26rem; height: 24rem; }
.mega-menu__close span i, .mega-menu__close span:before, .mega-menu__close span:after { background-color: #fff; }
.mega-menu__close.active span:before { top: 11rem; }
.mega-menu__close.active span:after { bottom: 11rem; }
.mega-menu__close:focus { outline: none; }
@media (hover: hover) {
	.gnb-mob .box a:hover span { background-size: 100% 2rem; }
}
@media (max-width: 1024px) {
	[class*="mega-menu__"] { display: block; }
	.mega-menu__close { display: flex; justify-content: flex-end; padding-top: 20rem; padding-right: 30rem; }
	.mega-menu .open { display: block; }
}
@media (max-width: 480px) {
	.mega-menu__close { padding-right: 10rem; }
	.gnb-mob .gnb { padding: 20rem 0; }
	.gnb-mob .gnb > li > a { font-size: 18rem; }
	.gnb-mob .box { padding: 25rem 20rem; }
	.gnb-mob .box a { font-size: 16rem; }
}

/* 애니메이션 */
[data-motion="blur"] { transform: scale(1.1); filter: blur(10px); opacity: 0; transition: 1s ease 0s; }
[data-motion="blur"].motion_in { transform: scale(1); filter: blur(0); opacity: 1; }
[data-motion="slide-up"] { transform: translateY(50rem); opacity: 0; transition: 1s ease 0s; }
[data-motion="slide-up"].motion_in { transform: translateY(0); opacity: 1; }
[data-motion="slide-left"] { transform: translateX(50rem); opacity: 0; transition: 1s ease 0s; }
[data-motion="slide-left"].motion_in { transform: translateX(0); opacity: 1; }
[data-motion="slide-right"] { transform: translateX(-50rem); opacity: 0; transition: 1s ease 0s; }
[data-motion="slide-right"].motion_in { transform: translateX(0); opacity: 1; }
[data-motion="slide_showX"] { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s; }
[data-motion="slide_showX"].motion_in { clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%); transition-delay: var(--aniDelay, 0.2s); }
[data-motion="slide_show_right"] { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s; }
[data-motion="slide_show_right"].motion_in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay: var(--aniDelay, 0.2s); }

/* footer */
footer { padding: 65rem 0; font-weight: 300; color: var(--color-white); background: #262729; }
footer .inr { display: flex; align-items: flex-start; justify-content: space-between; gap: 30rem; }
footer .logo { width: 210rem; max-width: 100%; }
footer .addrress .copy { margin-top: 25rem; line-height: 1.5; opacity: 0.5; }
footer .addrress .info { display: flex; flex-wrap: wrap; align-items: center; gap: 15rem 30rem; opacity: 0.8; }
footer .addrress .info strong { margin-right: 10rem; font-weight: 500; }
footer .sns { display: flex; align-items: center; gap: 25rem; }
footer .sns i { font-size: 30rem; opacity: 0.5; transition: 0.2s; }
footer .sns a:hover i { opacity: 1; }

/* Quick */
.mainQuick { position: fixed; right: 30rem; bottom: 30rem; z-index: 50; transition: all 0.5s ease-in-out; }
.mainQuick .list li { display: flex; align-items: center; justify-content: flex-end; gap: 12rem; }
.mainQuick .list li + li { margin-top: 10rem; }
.mainQuick .list li a { display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; background:#1d990e; border-radius: 50%; }
.mainQuick .list li a img { height: 22rem; }
.mainQuick .list li a i { font-size: 25rem; color: var(--color-white); }
.mainQuick .list li:nth-child(1) a img{filter:invert(1);}
.mainQuick .list li:nth-child(2) a { background: #03cf5d; }
.mainQuick .list li:nth-child(3) a { background: linear-gradient(to bottom right, #723fd6, #ef3173, #ffb618); }
.mainQuick .list li:nth-child(4) a { background: #ff0000; }
.mainQuick .list li:nth-child(4) a img { height: 18rem; }
.mainQuick .list li:nth-child(5) a { background: var(--color-sky); }
.mainQuick .list li:nth-child(6) a { background: #ff6714; }
.mainQuick .list li span { display: inline-block; padding: 8rem 12rem; font-weight: 300; font-size: 14rem; font-family: var(--font-pre); color: var(--color-white); background: rgba(0, 0, 0, 0.5); border-radius: 30rem; visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; }
.mainQuick .list li:hover span { visibility: visible; opacity: 1; }
.mainQuick .topBtn { display: flex; align-items: center; justify-content: center; width: 50rem; height: 0; background: var(--color-white); border-radius: 50%; box-shadow: 0 0 12rem rgba(0, 0, 0, 0.12); visibility: hidden; opacity: 0; transition: all 0.5s; }
.mainQuick.fix .list li.top .topBtn { height: 50rem; visibility: visible; opacity: 1; }

@media (max-width: 767px) {
	footer { padding: 50rem 0; }
	footer .inr { flex-wrap: wrap; }
	footer .logo { width: 190rem; }
	.mainQuick .list li span{ display: none; }
}
@media (max-width: 480px) {
	.mainQuick { right: 15rem; bottom: 15rem; }
	.mainQuick .list li a { width: 40rem; height: 40rem; }
	.mainQuick .list li:nth-child(3) a img { height: 13rem; }
	.mainQuick .list li a img { height: 20rem; }
	.mainQuick .list li a i { font-size: 22rem; }
	.mainQuick .topBtn { width: 40rem; }
	.mainQuick.fix .list li.top .topBtn { height: 40rem; }
	.mainQuick .list li + li { margin-top: 6rem; }
}

/* #region utilities */
.visually-hidden { position: absolute; width: 0; height: 0; contain: content; clip-path: rect(0 0 0 0); }
.text-primary { color: var(--color-point); }
.text-blue { color: var(--color-blue); }
.text-orange { color: var(--color-orange); }
.text-green { color: var(--color-green); }
.text-black { color: var(--color-black); }
.text-center { text-align: center; }
.text-left { text-align: left; }

@media (min-width: 768px) {
	#wrap .show-mob { display: none; }
}
@media (min-width: 1280px) {
	#wrap .show-tab { display: none; }
}
@media (max-width: 1279px) {
	#wrap .hide-tab { display: none; }
}
@media (max-width: 767px) {
	#wrap .hide-mob { display: none; }
}
/* #endregion utilities */