@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*
 * SUMMARY:
 * 0) ROOT
 * 1) WRAP
 * 2) SITE CUSTOM
    - 사이트 전반적으로 함께 쓰이는 속성
	- 메인, 서브 함께 쓰이는 속성
*/

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:var(--default); color:var(--b-default); font-weight:300; word-break:keep-all; line-height:var(--lh-default);}
body, input, textarea, button, select{font-family:'Plus Jakarta Sans',"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p, li{font-family: var(--lang-ko);}

@media (max-width:860px){
	body, p, li, a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif; text-wrap:balance;}
}

@media (max-width:540px){
	body{letter-spacing:-0.1rem;}

	p{line-height:1.6;}
}

/* **************************************** *
 * global root
 * **************************************** */

 :root {
    /* 포인트 */
	--c-primary: #1E1C58;
	--c-secondary: #201BB9;
	--c-third: #3D5EFF;

	/* 외부 서비스 브랜드컬러 */
	--naver: #26B451;

    /* title / body */
	--b-title: #231F20;
	--b-default: #7F838C;

	/* 게시판 세팅용 */
	--b-01: #0B1625;
	--border-01: #eee;

	--w: #fff;

	/* background-color */
	--bg-primary: #071438;
	--bg-dark: #101116;
	--bg-darkest: #000918;
	--bg-light: #F5F8FC;
	--bg-default: #F6F6F6;

	/* border */
	--bd: #E8ECF5;
	--bd-light: #D9E2F5;
	--br-default: #E8ECF5;

	/* 폰트 사용 */
	--lang-en: 'Plus Jakarta Sans';
	--lang-ko: "Pretendard";
	--lang-display: "HANAMDAUM";

	/* 폰트사이즈 */
	--default: 17rem;
	--lh-default: 1.529;

	--font-80: 80rem;
	--font-60: 60rem;
	--font-50: 50rem;
	--font-44: 44rem;
	--font-32: 32rem;
	--font-28: 28rem;
	--font-27: 27rem;
	--font-22: 22rem;
	--font-19: 19rem;
	--font-18: 18rem;
	--font-17: 17rem;
	--font-15: 15rem;
	--font-13: 13rem;
	--font-11: 11rem;

	/* 간격 */
	--space200: 200rem;
	--space170: 170rem;
	--space150: 150rem;
	--space140: 140rem;
	--space130: 130rem;
	--space120: 120rem;
	--space110: 110rem;
	--space100: 100rem;
	--space80: 80rem;

	/* 투명도 블랙 */
	--op-b05: rgba(0,0,0,.05);
	--op-b10: rgba(0,0,0,.1);
	--op-b20: rgba(0,0,0,.2);
	--op-b30: rgba(0,0,0,.3);
	--op-b40: rgba(0,0,0,.4);
	--op-b50: rgba(0,0,0,.5);
	--op-b60: rgba(0,0,0,.6);
	--op-b70: rgba(0,0,0,.7);
	--op-b80: rgba(0,0,0,.8);
	--op-b90: rgba(0,0,0,.9);

	/* 투명도 화이트 */
	--op-w05: rgba(255,255,255,.05);
	--op-w10: rgba(255,255,255,.1);
	--op-w20: rgba(255,255,255,.2);
	--op-w30: rgba(255,255,255,.3);
	--op-w40: rgba(255,255,255,.4);
	--op-w50: rgba(255,255,255,.5);
	--op-w60: rgba(255,255,255,.6);
	--op-w70: rgba(255,255,255,.7);
	--op-w80: rgba(255,255,255,.8);
	--op-w90: rgba(255,255,255,.9);

	/* 투명도 다크네이비 */
	--op-darkest60: rgba(0,9,24,.6);

	/* 트랜지션 */
	--trans-01: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04: all 0.5s ease;

	/* 쉐도우 */
	--shadow: 5rem 10rem 15rem rgba(0,0,0,0.05);
}

/* heading 폰트 시스템 */
[data-heading]{font-family:var(--lang-ko); color:var(--b-title);}
[data-heading="5xl"]{font-family:var(--lang-display); font-size:var(--font-80); line-height:1.2625; font-weight:400; letter-spacing:-0.04em;}
[data-heading="4xl"]{font-size:var(--font-50); line-height:1.34; font-weight:700; letter-spacing:-0.01em;}
[data-heading="3xl"]{font-family:var(--lang-display); font-size:var(--font-60); line-height:1.117; font-weight:400; letter-spacing:-0.01em;}
[data-heading="2xl"]{font-size:var(--font-32); line-height:1.344; font-weight:700; letter-spacing:-0.01em;}
[data-heading="xl"]{font-size:var(--font-27); line-height:1.593; font-weight:700; letter-spacing:-0.01em;}
[data-heading="lg"]{font-size:var(--font-22); line-height:1.364; font-weight:700; letter-spacing:-0.01em;}
[data-heading="md"]{font-size:var(--font-19); line-height:1.579; font-weight:700; letter-spacing:-0.01em;}
[data-heading="counter"]{font-family:var(--lang-display); font-size:var(--font-44); line-height:1.523; font-weight:400; letter-spacing:-0.01em;}

[data-heading-en]{font-family:var(--lang-en); color:var(--b-title);}
[data-heading-en="5xl"]{font-size:var(--font-80); line-height:1; font-weight:700; letter-spacing:0;}
[data-heading-en="4xl"]{font-size:var(--font-50); line-height:1.32; font-weight:700; letter-spacing:-0.01em;}
[data-heading-en="lg"]{font-size:var(--font-28); line-height:1.286; font-weight:800; letter-spacing:-0.01em; text-transform:uppercase;}

/* body 폰트 시스템 */
[data-body]{font-family:var(--lang-ko);}
[data-body="semibold"]{font-size:var(--font-17); line-height:1.529; font-weight:600;}
[data-body="xsm"]{font-size:var(--font-15); line-height:1.333; font-weight:300;}
[data-body="xsm-sb"]{font-size:var(--font-15); line-height:1.333; font-weight:600;}
[data-body="en-extrabold"]{font-family:var(--lang-en); font-size:var(--font-17); line-height:1.529; font-weight:800; letter-spacing:-0.01em;}
[data-body="en-xsm"]{font-family:var(--lang-en); font-size:var(--font-13); line-height:1.385; font-weight:400;}
[data-body="en-xsm-bold"]{font-family:var(--lang-en); font-size:var(--font-13); line-height:1.385; font-weight:700;}
[data-body="en-xxsm-bold"]{font-family:var(--lang-en); font-size:var(--font-11); line-height:1.455; font-weight:700;}

/* 접근성 유틸 */
.blind{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* 컬러 시스템 */
.c-primary{color:var(--c-primary);}
.c-secondary{color:var(--c-secondary);}
.c-third{color:var(--c-third);}
.b-title{color:var(--b-title);}
.bg-dark{background-color:var(--bg-dark);}
.bg-primary{background-color:var(--bg-primary);}
.bg-light{background-color:var(--bg-light);}
.bg-default{background-color:var(--bg-default);}

/* border 값 기본 셋 */
[data-radius]{overflow:hidden;}
[data-radius="5"]{border-radius:5rem;}
[data-radius="20"]{border-radius:max(1.0417vw, 10rem);}
[data-radius="30"]{border-radius:max(1.5625vw, 15rem);}

[data-border]{border:1px solid;}
[data-border="default"]{border-color:var(--bd);}

@media (max-width:1480px){
	:root{
		--font-80: 64rem;

		--space200: 170rem;
		--space170: 140rem;
		--space150: 130rem;
		--space140: 120rem;
		--space130: 115rem;
		--space120: 100rem;
		--space110: 95rem;
		--space80: 70rem;
    }
}

@media all and (max-width:1200px){
	:root{
		--font-50: 45rem; 

		--space200: 140rem;
		--space170: 120rem;
		--space150: 110rem;
		--space140: 105rem;
		--space130: 100rem;
		--space120: 90rem;
		--space110: 80rem;
		--space80: 60rem;
    }
}

@media all and (max-width:1023px){
	:root{
		--font-80: 55rem;
		--font-60: 42rem;
		--font-50: 42rem;
		--font-44: 35rem;
		--font-32: 27rem;
		--font-28: 24rem;
		--font-27: 24rem;
		--font-22: 19rem;
		--font-19: 18rem;
		--font-18: 17rem;
		--font-17: 16rem;
		--font-15: 14rem;
		--default: 16rem;
		--space200: 140rem;
		--space170: 140rem;
		--space150: 90rem;
		--space140: 85rem;
		--space130: 80rem;
		--space120: 70rem;
		--space110: 65rem;
		--space80: 50rem;
    }
}

@media (max-width: 540px){
	:root{
		--font-80: 32rem;
		--font-60: 24rem;
		--font-50: 24rem;
		--font-44: 21rem;
		--font-32: 20rem;
		--font-28: 16rem;
		--font-27: 19rem;
		--font-22: 18rem;
		--font-19: 17rem;
		--font-18: 16rem;
		--font-17: 15rem;
		--default: 15rem;
		--space200: 80rem;
		--space170: 70rem;
		--space150: 55rem;
		--space140: 50rem;
		--space130: 48rem;
		--space120: 42rem;
		--space110: 38rem;
		--space80: 32rem;
    }

	[data-body="xsm"]{line-height:1.5;}
}

/* **************************************** *
 * wrapper
 * **************************************** */
*[class^="wrap"]{position:relative; margin:0 auto;}

.sub-inner{margin:0 var(--margin);}

.wrap{max-width:1520rem;}
.wrap-wide{max-width:1804rem;}

/* 빼지마세요 */
.wrap-narrow{max-width:1206rem;}

@media all and (max-width:1920px){
	.wrap-wide{margin:0 50rem; max-width:none;}
}

@media all and (max-width:1680px){
	.wrap{margin:0 60rem; max-width:none;}
}

@media all and (max-width:1023px){
	*[class^="wrap"]{margin:0 40rem; max-width:none; width:auto;}
}

@media all and (max-width:540px){
	*[class^="wrap"]{margin:0 20rem;}
}

/* **************************************** *
 * swiper set
 * **************************************** */
.swiper-controls{display:flex; justify-content:center; align-items:center;}
.swiper-controls .wrap *{cursor:pointer;}
.swiper-controls > div{cursor:pointer;}
.swiper-controls *[class^="swiper-btn--"]{position:relative; width:30rem; height:30rem; cursor:pointer; display:flex; align-items:center; margin:0 25rem; font-size:16rem; font-weight:600;}
.swiper-controls *[class^="swiper-btn--"]::after{content:""; display:block; min-width:30rem; height:30rem; background:url(/theme/basic/img/common/arrow-basic.svg) no-repeat 50% 50%; background-size:8rem;}
.swiper-controls .swiper-btn--prev{flex-direction:row-reverse;}

.swiper-controls .swiper-btn--prev::after{transform:rotate(180deg);}
.swiper-controls .swiper-button-disabled{opacity:0.5;}

.swiper-container img{width:100%;}

.button-next.swiper-button-disabled, .button-prev.swiper-button-disabled{opacity:0.5;}

.swiper-pagination-bullet{width:10rem; height:10rem; background:#b7b7b7; border-radius:100%;}
.swiper-pagination{display:flex; gap:15rem;}
.swiper-pagination-bullet-active{opacity:1; background:var(--c-primary);}

@media (max-width:540px){
	.swiper-pagination{gap:8rem;}
}

/* **************************************** *
 * site custom
 * **************************************** */

/* btn-basic */
*.btn-basic{display:inline-flex; gap:20rem; align-items:center; position:relative; box-sizing:border-box; padding:6rem 6rem 6rem 16rem; height:55rem; background:var(--w); border:none; font-weight:600; font-size:var(--font-15); color:var(--b-title); min-width:124rem; transition:var(--trans-01); border-radius:5rem; font-family:var(--lang-ko); letter-spacing:0; white-space:nowrap;}
.swiper-slide .btn-basic{display:inline-flex; width:auto;}
*.btn-basic .btn-basic__arrow{display:flex; align-items:center; justify-content:center; width:38rem; height:38rem; min-width:38rem; background:var(--op-b05); border-radius:3rem; transition:var(--trans-01);}
*.btn-basic .btn-basic__arrow::after{content:""; display:block; width:15rem; height:15rem; background-color:var(--b-title); background-image:none; -webkit-mask-image:url(../img/common/arrow-basic.svg); mask-image:url(../img/common/arrow-basic.svg); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:50% 50%; mask-position:50% 50%; -webkit-mask-size:contain; mask-size:contain; transform:rotate(-45deg); transition: var(--trans-01);}

*.btn-basic--dark{background:var(--bg-dark); color:var(--w);}
*.btn-basic--dark .btn-basic__arrow{background:var(--op-w10);}
*.btn-basic--dark .btn-basic__arrow::after{background-color:var(--w);}

*.btn-basic--secondary{background:var(--c-secondary); color:var(--w);}
*.btn-basic--secondary .btn-basic__arrow{background:var(--op-w10);}
*.btn-basic--secondary .btn-basic__arrow::after{background-color:var(--w);}

*.btn-basic--download .btn-basic__arrow::after{width:13rem; height:14rem; -webkit-mask-image:url(../img/common/ic-download_w.svg); mask-image:url(../img/common/ic-download_w.svg); -webkit-mask-size:contain; mask-size:contain; transform:none;}

*.btn-basic--list{background:var(--bg-default); color:var(--b-title); justify-content:center; width:180rem; padding:6rem 16rem 6rem 6rem;}
*.btn-basic--list .btn-basic__list-icon{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3rem; width:38rem; height:38rem; min-width:38rem; background:var(--b-title); border-radius:3rem;}
*.btn-basic--list .btn-basic__list-icon i{display:block; width:16rem; height:1px; background:var(--w);}
*.btn-basic--list .btn-basic__list-text{flex:1 0 0; text-align:center;}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:is(:not(.btn-basic--dark)):hover{background:var(--c-primary); color:var(--w);}
	*.btn-basic:hover .btn-basic__arrow{background:var(--w);}
	*.btn-basic:hover .btn-basic__arrow::after {transform: rotate(0);}

	*.btn-basic--dark:hover .btn-basic__arrow{background:var(--c-secondary);}
	*.btn-basic--secondary:hover .btn-basic__arrow{background:var(--w);}
	*.btn-basic--secondary:hover .btn-basic__arrow::after{background-color:var(--c-primary);}

	*.btn-basic.btn-basic--list:hover{background:var(--b-title);}
	*.btn-basic--list:hover .btn-basic__list-icon{background:var(--w);}
	*.btn-basic--list:hover .btn-basic__list-icon i{background:var(--b-title);}
}

@media (max-width:540px){
	*.btn-basic{gap:14rem; padding:5rem 5rem 5rem 14rem; height:48rem; font-size:14rem; min-width:110rem;}
	*.btn-basic .btn-basic__arrow{width:34rem; height:34rem; min-width:34rem;}
	*.btn-basic--list{width:160rem; padding:5rem 14rem 5rem 5rem;}
	*.btn-basic--list .btn-basic__list-icon{width:34rem; height:34rem; min-width:34rem;}
}

/* title-em (섹션 태그) */
.title-em{display:inline-flex; align-items:center; justify-content:center; padding:7rem 10rem; border:1px solid var(--bd-light); border-radius:3rem; font-family:var(--lang-en); font-size:var(--font-11); font-weight:700; line-height:1.455; color:var(--c-secondary); text-transform:uppercase; letter-spacing:0; white-space:nowrap;}
.title-em--dark{border-color:var(--op-w10); color:var(--w);}
.title-em--dim{border-color:var(--op-w10); color:var(--op-w50);}
.title-em--muted{border-color:var(--bd); color:var(--op-b20);}

/* btn-top-wrap (우측 고정 퀵메뉴) */
.btn-top-wrap{position:fixed; bottom:50rem; right:50rem; visibility:hidden; opacity:0; transition:var(--trans-01); display:flex; flex-direction:column; gap:5rem; z-index:100;}
.btn-top-wrap.fixed.active{opacity:1; visibility:visible;}
.btn-top-wrap.active{opacity:1; visibility:visible;}

.btn-inquiry{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6rem; width:80rem; height:80rem; background:var(--c-secondary); border-radius:5rem; filter:drop-shadow(5rem 10rem 15rem rgba(0,0,0,0.05)); text-decoration:none; transition:var(--trans-01);}
.btn-inquiry__icon{width:22rem; height:16rem; display:block;}
.btn-inquiry p{font-size:13rem; font-weight:700; line-height:1.538; color:var(--w); font-family:var(--lang-ko); text-align:center; white-space:nowrap;}

.btn-top-wrap__top{width:80rem;}
a.btn-top{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6rem; width:100%; height:80rem; background:var(--c-primary); border-radius:5rem; filter:drop-shadow(5rem 10rem 15rem rgba(0,0,0,0.05)); font-family:var(--lang-en); font-size:12rem; font-weight:700; line-height:1.5; color:var(--w); transition:var(--trans-01);}
a.btn-top::before{content:""; display:block; width:15rem; height:15rem; background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%; background-size:contain; transform:rotate(-90deg);}

@media (hover: hover) and (pointer: fine){
	.btn-inquiry:hover{background:var(--c-primary);}
	a.btn-top:hover{background:var(--c-secondary);}
}

@media (max-width:540px){
	.btn-top-wrap{right:20rem; bottom:20rem;}
	.btn-inquiry{width:50rem; height:50rem;}
	.btn-inquiry__icon {width: 18rem; height: auto;}
	.btn-inquiry p{font-size:11rem; display:none}
	.btn-top-wrap__top{width:50rem;}
	a.btn-top{height:50rem; font-size:10rem; gap:1rem}
	a.btn-top::before{width:12rem; height:12rem;}

	.title-em {padding:4rem 6rem; font-size: 10rem;}
}

/* 커스텀 커서 (DRAG) */
#cursor{position:fixed; top:0; left:0; z-index:1000; pointer-events:none; opacity:0; will-change:transform;}
#cursor .cur_cir{position:relative; opacity:0; width:32rem; height:32rem; margin-top:-50%; margin-left:-50%; border-radius:50rem; transition:opacity 0.3s cubic-bezier(0.25,1,0.5,1), width 0.3s cubic-bezier(0.25,1,0.5,1), height 0.3s cubic-bezier(0.25,1,0.5,1), background-color 0.3s cubic-bezier(0.25,1,0.5,1);}
#cursor.on .cur_cir{opacity:1;}
#cursor.drag .cur_cir{display:flex; align-items:center; justify-content:space-between; width:110rem; height:50rem; padding: 0 15rem; border-radius:50rem; background:var(--c-primary); transform:none !important;}
#cursor.drag .cur_cir::before,
#cursor.drag .cur_cir::after{content:''; width: 0; height: 0; border-style: solid; border-width: 3rem 0 3rem 5.196rem; border-color: transparent transparent transparent var(--w);}
#cursor.drag .cur_cir::before{transform: scaleX(-1);}
#cursor.drag .cur_cir span {margin-top: -2rem; }
#cursor.drag .cur_cir span::before{display: inline-block; content:"DRAG"; font-family:var(--lang-en); font-size:11rem; font-weight:700; color:var(--w); white-space:nowrap; line-height: 1;}

@media (max-width:1023px){
	#cursor{display:none !important;}
}

/* 게시판 새글 N 배지 — GNB·모바일 메뉴·전체메뉴(푸터 메뉴는 제외).
   마크업은 board_new.extend.php 가 data-new="1" 만 심고 글자는 여기서 그린다. */
:is(#gnb, .gnb-mobile-menu, .site-map-list) a[data-new="1"]::after{content:"N"; position:relative; top:-8rem; margin-left:2rem; font-family:var(--lang-en); font-size:10rem; font-weight:700; line-height:1; letter-spacing:0; color:var(--c-primary);}

/* 게시글 전용 — 뷰·글쓰기는 읽기 좋은 폭으로 좁힌다(SITE-SET 캐논 §12-8). */
.wrap-post{max-width:900rem;}