@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:1.588;}
body, input, textarea, button, select{font-family:var(--lang-ko), '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

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

@media (max-width:540px){
	body{letter-spacing:-0.1rem; font-size:15rem;}
	p{line-height:1.6;}
}

/* **************************************** *
 * global root
 * **************************************** */
:root {
	/* 포인트 (Figma: c/primary, c/secondary) */
	--c-primary: #30DFD8;
	--c-secondary: #379B97;

	/* title / body (Figma: b/title, b-default) */
	--b-title: #1D2828;
	--b-default: #666666;

	/* 게시판 세팅용 */
	--b-01: var(--b-title);
	--border-01: #eee;

	--w: #fff;

	/* background-color (Figma: bg/dark) */
	--bg-default: #F8F8F8;
	--bg-dark: #030710;
	--bg-light: #E7F6F6;

	/* border */
	--br-default: var(--op-b10);

	/* 포인트 글로우 (Figma c/primary 기반) */
	--glow: rgba(48,223,216,.2);
	--glow-line: rgba(48,223,216,.3);

	/* 폰트 패밀리 (Figma: 영문 Quantico / 국문 Pretendard) */
	--lang-en: 'Quantico';
	--lang-ko: "Pretendard";
	
	/* 폰트사이즈 */
	--default: 17rem;

	--font-58: 58rem;
	--font-53: 53rem;
	--font-45: 45rem;
	--font-43: 43rem;
	--font-35: 35rem;
	--font-26: 26rem;
	--font-21: 21rem;
	--font-18: 18rem;
	--font-17: 17rem;
	--font-16: 16rem;
	--font-15: 15rem;
	--font-13: 13rem;

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

	/* 투명도 블랙 */
    --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-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);

	/* 트랜지션 */
	--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;
}

/* 텍스트 스타일 — Heading */
[data-heading]{font-family:var(--lang-ko); color:var(--b-title);}
[data-heading="5xl"]{font-size:var(--font-53); line-height:1.132; font-weight:700;}
[data-heading="4xl"]{font-size:var(--font-43); line-height:1.395; font-weight:700;}
[data-heading="3xl"]{font-size:var(--font-35); line-height:1.428; font-weight:700;}
[data-heading="xl"]{font-size:var(--font-26); line-height:1.538; font-weight:700;}
[data-heading="lg"]{font-size:var(--font-21); line-height:1.476; font-weight:600;}
[data-heading="md"]{font-size:var(--font-18); line-height:1.611;}

[data-heading-en] {font-family:var(--lang-en); letter-spacing:-0.04em; color: var(--b-title);}
[data-heading-en="5xl"]{ font-size:var(--font-58); line-height:1.189; font-weight:300; }
[data-heading-en="4xl"]{font-family:var(--lang-en); font-size:var(--font-45); line-height:1.155; font-weight:700;}

/* 텍스트 스타일 — Body */
.semibold {font-weight:600;}
.bold {font-weight: 700;}
.sm {font-size:var(--font-16); line-height:1.688;}
.xsm {font-size:var(--font-15); line-height:1.333;}

.en {font-family: var(--lang-en) !important; letter-spacing: -0.02em;}
.en.xsm {font-size:var(--font-13); line-height:1.461;}

[data-caption] {font-family: var(--lang-en); font-size:var(--font-13); line-height:1.461; letter-spacing: -0.02%; color: var(--op-b40); text-transform:uppercase;}

[data-rd]{overflow:hidden;}
[data-rd="10"]{border-radius:max(0.5208vw, 5rem);}
[data-rd="20"]{border-radius:max(1.0417vw, 10rem);}
[data-rd="30"]{border-radius:max(1.5625vw, 15rem);}

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

/* color utility class */
.c-primary{color:var(--c-primary);}
.c-secondary{color:var(--c-secondary);}
.c-white {color: var(--w);}

.b-title{color:var(--b-title);}
.b-default{color:var(--b-default);}

.bg-default{background-color:var(--bg-default);}
.bg-dark{background-color:var(--bg-dark);}
.bg-light{background-color:var(--bg-light);}


@media (max-width:1600px){
	:root{
		--font-58: 50rem;
	}
}

@media (max-width:1480px){
	:root{
		--font-43: 40rem;
	}
}

/* @media (max-width:1480px){
	:root{
		--font-58: 46rem;
		--font-53: 43rem;
		--font-45: 35rem;
		--font-43: 35rem;
		--font-35: 30rem;
	}
}

@media all and (max-width:1200px){
	:root{
		--font-58: 40rem;
		--font-53: 38rem;
		--font-45: 32rem;
		--font-43: 32rem;
		--font-35: 28rem;
		--font-26: 24rem;
	}
} */

@media all and (max-width:1023px){
	:root{
		--font-58: 42rem;
		--font-53: 42rem;
		--font-45: 35rem;
		--font-43: 35rem;
		--font-35: 26rem;
		--font-26: 23rem;
		--font-21: 19rem;

		/* 간격 */
		--space200: 180rem;
		--space180: 150rem;
		--space170: 150rem;
		--space150: 120rem;
		--space140: 120rem;
		--space130: 120rem;
		--space120: 100rem;
		--space110: 100rem;
		--space100: 80rem;
		--space80: 60rem;
	}
}

@media (max-width:860px){
	:root{
		--lang-ko: -apple-system, BlinkMacSystemFont, Sans-serif;
		--font-58: 32rem;
		--font-53: 32rem;
		--font-45: 27rem;
		--font-43: 27rem;
		--font-35: 24rem;
		--font-26: 22rem;
		--font-18: 16rem;
	}
}

@media (max-width:540px){
	:root{
		--default: 15rem;

		--font-58: 26rem;
		--font-53: 26rem;
		--font-45: 24rem;
		--font-43: 24rem;
		--font-35: 20rem;
		--font-26: 20rem;
		--font-21: 18rem;
		--font-18: 15rem;
		--font-17: 15rem;
		--font-16: 14rem;
		--font-15: 14rem;
		--font-14: 13rem;
		--font-13: 12rem;

		/* 간격 */
		--space200: 100rem;
		--space180: 70rem;
		--space170: 70rem;
		--space150: 70rem;
		--space140: 70rem;
		--space130: 70rem;
		--space120: 50rem;
		--space110: 50rem;
		--space100: 50rem;
		--space80: 40rem;
	}
}

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

.wrap{margin: 0 calc((100% - 1600rem)/2);}
.wrap-wide{margin: 0 calc((100% - 1600rem)/2); padding-left: calc((((100% - 1600rem) / 2) - 15rem));}
.sub-wrap {max-width:1325rem; margin: 0 auto;}
.wrap-narrow{max-width:1206rem;}
.pd-left {padding-left: calc((((100% - 1600rem) / 2) - 15rem));}

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

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

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

@media all and (max-width:540px){
	*[class^="wrap"]{margin:0 20rem !important;}
	.sub-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);}

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

/* arrow-basic (대각선 화살표 / Figma arrow-basic)
 *  - 변형: 기본(white) / .white / .color */
.arrow-basic{display:inline-block; width:20rem; height:20rem; background: var(--b-title); mask-image: url(../img/layout/arrow-basic.svg); mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: contain; transition: var(--trans-01);}
.arrow-basic.white{background: var(--b-title);}
.arrow-basic.gray{opacity: .3; background: var(--b-title);}

/* btn-basic (Figma btn-basic)*/
*.btn-basic{display:inline-flex; justify-content:center; align-items:center; gap:12rem; position:relative; box-sizing:border-box; min-width:56rem; padding:18rem 20rem; border-radius:5rem; border: 1px solid var(--br-default); backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem); background: var(--b-title); font-weight:600; font-size:var(--font-15); line-height:1.333; color:var(--w); box-shadow:0 0 30rem rgba(48,223,216,0); transition:var(--trans-01);}
*.btn-basic.gray {color: var(--op-b30); border-color: var(--br-default); background: var(--w);}
*.btn-basic.white {border-color:var(--op-w10); background:var(--op-w10);}

*.btn-basic .arrow-basic {background: var(--w);}
*.btn-basic.gray .arrow-basic {opacity: .3; background: var(--b-title);}
*.btn-basic.white .arrow-basic {background: var(--w);}

@media (hover:hover) and (pointer:fine){
	*.btn-basic:hover{border-color:var(--glow-line); color:var(--c-primary); box-shadow:0 0 15rem var(--glow);}
	*.btn-basic:hover .arrow-basic {background:var(--c-primary);}

	*.btn-basic.gray:hover{color:var(--b-title);}
	*.btn-basic.gray:hover .arrow-basic {opacity: 1;}

	*.btn-basic.white:hover{border-color: rgba(48, 223, 216, 0.30); background:var(--w); color:var(--b-title);box-shadow: 0 0 30px 0 rgba(48, 223, 216, 0.20);}
	*.btn-basic.white:hover .arrow-basic {background: var(--b-title);}
}

/* btn-basic--icon: 텍스트 없는 아이콘 전용 버전 */
*.btn-basic:not(:has(span)){width:60rem; height:60rem; padding:0;}

@media all and (max-width:1023px){}

@media (max-width:540px){
	*.btn-basic{height: 50rem; padding:12rem 15rem; font-size:14rem;}
	*.btn-basic:not(:has(span)) {width: 50rem; height: 50rem; gap: 0; min-width: 50rem;}
}

/* **************************************** *
 * section-aside (섹션 사이드 세로 인덱스 / Figma page-aside)
 *  - 섹션에 position:relative 필수
 * **************************************** */
.section-aside{position:absolute; top:0; left:calc((100% -  1600rem) / 2); bottom:0; width:200rem; pointer-events:none; z-index:1;}
.section-aside::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--br-default);}
.section-aside__label {position: sticky; top: 0; display:inline-flex; align-items: center; gap: 15rem; margin-left: -4rem; padding: 40rem 0;}
.section-aside__label::before {content:''; width:8rem; height:8rem; border-radius:50%; background:var(--c-primary); flex-shrink:0; box-shadow: 0 0 15rem var(--c-primary);}

/* dark bg 섹션 */
.section-aside--dark::before{background:var(--op-w10);}
.section-aside--dark .section-aside__label{color:var(--op-w30);}

@media all and (max-width:1900px){
	.section-aside {left: 40rem;}
}

@media (max-width:1023px){
	.section-aside{display:none;}
}

/* **************************************** *
 * notice-item (공지사항 카드 / Figma notice-item)
 * **************************************** */
.notice-item{display:flex; flex-direction:column; border:1px solid var(--op-b10); border-radius:10rem; overflow:hidden; flex-shrink:0; text-decoration:none; transition: var(--trans-01);}
.notice-item__thumb{position:relative; height:300rem; background:#F8F8F8; border-bottom:1px solid rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.notice-item__thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.notice-item__body{position: relative; padding:35rem 30rem; display:flex; flex-direction:column; gap:9rem; background:#fff; flex:1;}
.notice-item__body::before {position: absolute; left: 30rem; top: -10rem; content:''; width: 30rem; height:20rem; background: #ddd; mask:url(../img/layout/ic-quotaion.svg) no-repeat center / contain; transition: var(--trans-01);}
.notice-item__title{max-width: 80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.notice-item__desc{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; min-height: 55rem;}
.notice-item__date{padding-top:40rem; color:var(--op-b30); font-family: var(--lang-en); font-size: var(--font-13);}

@media (hover:hover) and (pointer:fine){
	.notice-item:hover {border: 1px solid rgba(48, 223, 216, 0.30); box-shadow: 0 0 40rem 0 rgba(48, 223, 216, 0.20);}
	.notice-item:hover .notice-item__thumb img{transform:scale(1.04); transition:transform 0.6s ease;}
	.notice-item:hover .notice-item__body::before {background: var(--c-primary);}
}

@media all and (max-width:1200px){
	.notice-item__thumb {height: 280rem;}
}

@media (max-width:860px){
	.notice-item__thumb {height: 220rem;}
	.notice-item__body {padding: 30rem 20rem;}
	.notice-item__body::before {left: 20rem;}
	.notice-item__date {padding-top: 20rem;}
}

@media (max-width:540px){
	.notice-item__thumb{height:220rem;}
	.notice-item__body{padding:25rem 20rem 20rem;}
	.notice-item__date{padding-top:25rem;}
	.notice-item__thumb {height: 190rem;}
	.notice-item__desc {min-height: 48rem;}
	.notice-item__title {font-size: 16rem !important;}
}


/* **************************************** *
 * drag-indicator (드래그 슬라이더 안내 / Figma drag)
 * **************************************** */
 #cursor{mix-blend-mode:normal;position:fixed; top:0; left:0; z-index:1000; pointer-events:none; will-change:transform;}
#cursor .cur_cir{opacity:0; width:32px; height:32px; margin-top:-50%; margin-left:-50%; transition:opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 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); border-radius:50%;}

#cursor.on .cur_cir::before{width:100%; text-align:center;display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:13px; color:#fff; letter-spacing:-0.03em; transform:translate(-50%, -50%);}
#cursor.on .cur_cir{position:relative; opacity:1; transform:rotate(0) scale(1) translate(0, 0) !important;}
#cursor.on span {font-family: var(--lang-en); font-size: var(--font-14); font-weight: 700; letter-spacing: -0.02; color: var(--w);}

#cursor.drag .cur_cir {mix-blend-mode:multiply; position: relative; width:110rem; height:110rem; box-shadow: 10rem 10rem 20rem 0 var(--op-b20);}
#cursor.drag .cur_cir::before,
#cursor.drag .cur_cir::after {position: absolute; content:''; width: 0; height: 0; top: 50%; border-style: solid; border-width: 5rem 8.66rem 5rem 0px; border-color: transparent var(--c-secondary) transparent transparent;}
#cursor.drag .cur_cir::before {left: -20rem;}
#cursor.drag .cur_cir::after {right: -20rem; transform: scaleX(-1) translateY(-50%);}
#cursor.drag .cur_cir span {display:flex; align-items:center; justify-content:center; position:relative; width:110rem; height:110rem; border-radius:100%; background:var(--c-secondary); font-size: var(--font-13); font-weight: 300; overflow:hidden;}
#cursor.drag .cur_cir span::before {content:'DRAG';}
#cursor.drag .cur_cir i {display: none;}


/* **************************************** *
 * caption-box (카테고리 및 태그 스타일 / Figma caption-box)
 *  - 기본: 흰 배경, 파란 테두리
 *  - .fill: primary 배경 (밝은 파란)
 *  - .fill.secondary: secondary 배경 (어두운 파란)
 *  - .lg: 큰 사이즈
 * **************************************** */
.caption-box{display:inline-flex; align-items:center; justify-content:center; line-height: 1; padding:5rem 10rem; border-radius:100rem; background:var(--w); border:1px solid var(--c-primary); box-shadow:0 0 5rem rgba(48, 223, 216, 0.2); font-family:var(--lang-en); font-size:var(--font-13); font-weight:400; letter-spacing:-0.02%; color:var(--c-primary); text-align:center; white-space:nowrap; text-transform:uppercase;}
.caption-box.fill{border:none; background:var(--c-primary); box-shadow:none; color:var(--w); font-weight:700;}
.caption-box.fill.secondary{background:var(--c-secondary); color:var(--w); font-weight:700;}
.caption-box.lg{padding:8rem 12rem; border-radius:20rem; font-size:var(--font-16);}
.caption-box.gray {background: #ccc;}

@media (max-width:860px){
	.caption-box {padding: 5rem 8rem 4rem;}
}

@media (max-width:540px){
	.caption-box.lg {padding:6rem 9rem; font-size: 13rem;}
}


/* **************************************** *
 * partner-list
 * **************************************** */
.partner-grid {display:grid; width:100%; position: relative; grid-template-columns: repeat(5, 1fr);}
.partner-list {position: relative; }
.partner-grid::before,
.partner-cell:nth-child(5n-2)::after {position: absolute; left: 50%; content:'';  width: 100vw; height: 1px; background: var(--op-w10); transform: translateX(-50%);}
.partner-grid::before {top: 0;}
.partner-cell:nth-child(5n-2)::after {bottom: 0;}
.partner-cell {position: relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--op-w10); padding:30rem;}
.partner-cell img {max-width:200rem; max-height:100rem;}
.partner-cell--text span {display:block;font-family:var(--lang-en);font-size: var(--font-18);font-weight:500;line-height:1.4;letter-spacing:-0.01em;color:var(--op-w70);text-align:center;word-break:keep-all;transition:var(--trans-01);}
.partner-cell--text:hover span {color:var(--w);}

@media all and (max-width:1200px){
	.partner-cell img {max-width: 100%;}
}

@media all and (max-width:1023px){
	.partner-cell:nth-child(5n) {border-right: 0;}
	.partner-cell img {max-width:120rem;}
	.partner-cell--text span {font-size:18rem;}
	.partner-list {width: calc(100% + 80rem); margin: 0 -40rem;}
}

@media (max-width:860px){
	.partner-cell:nth-child(5n-2)::after {display: none;}
	.partner-grid {grid-template-columns: repeat(4, 1fr);}
	.partner-cell {border-bottom: 1px solid var(--op-w10);}
	.partner-cell:nth-last-child(-n+4) {border-bottom: 0;}
	.partner-cell:nth-child(5n) {border-right: 1px solid var(--op-w10);}
	.partner-cell:nth-child(4n){border-right:0;}
}

@media (max-width:540px){
	.main-partner-list {width: calc(100% + 40rem); margin: 0 -20rem;}
	.partner-list {width: calc(100% + 40rem); margin: 0 -20rem;}
	.partner-grid {grid-template-columns: repeat(2, 1fr);}
	.partner-cell:nth-child(2n) {border-right: 0;}
	.partner-cell:nth-last-child(-n+4) {border-bottom: 1px solid var(--op-w10);}
	.partner-cell:nth-last-child(-n+2) {border-bottom: 0;}
	.partner-cell img {max-width: 100%; max-height: 80rem;}
	.partner-cell--text span {font-size:15rem;}
}