@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-defaultt);font-weight: 400; line-height: 1.5; word-break: keep-all;}
body,input,textarea,button,select{font-family:"Suit", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

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

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

/* **************************************** *
 * global root
 * **************************************** */
 :root {
    /* 포인트 */
	--c-primary: #1B361E;
	--c-secondary: #F5C978; 	
	--c-third: #B2D550; 	

    /* title / body */
	--b-title:#222221;
	--b-defaultt:#666;

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

	--w: #fff;

	/* background-color */
	--bg-default: #F8F8F8;
	--bg-light: #F0EEE6;
	--bg-dark: #1F1F1F;

	/* border 안쓰면 빼세요*/
	--br-default: var(--op-b10);	

	 /* 폰트 사용 */
	--lang-en:'Buenard';
	--lang-ko:"Suit";
	--lang-title:"DwImpactamin";

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

	--font-67:67rem;
    --font-52:52rem;
    --font-45:45rem;
	--font-35:35rem;
	--font-27:27rem;
    --font-24:24rem;
    --font-22:22rem;
	--font-19:19rem;
    --font-16:16rem;
    --font-15:15rem;
    --font-14:14rem;

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

	--margin:60rem;

	/* 배경흐림 */
	--backdrop: blur(5rem);

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

[data-heading]{font-family: var(--lang-title); color: var(--b-title); letter-spacing: -3%;}
[data-heading="5xl"]{font-size: var(--font-67); line-height: 1.3; }
[data-heading="4xl"]{font-size: var(--font-52); line-height: 1.338;}
[data-heading="3xl"]{font-size: var(--font-45); line-height: 1.4;}
[data-heading="2xl"]{font-size: var(--font-35); line-height: 1.285;}
[data-heading="xl"]{font-size: var(--font-24); line-height: 1.333;}
[data-heading="lg"]{font-size: var(--font-22); line-height: 1.375;}
[data-heading="md"]{font-family: var(--lang-ko); font-size: var(--font-19); font-weight: 700; line-height: 1.4; letter-spacing: 0;}

/* 서브할때 추가된 사이즈 */
[data-sub-heading] {color: var(--b-title); font-weight: 400;}
[data-sub-heading="title"]{font-family: var(--lang-title); font-size: var(--font-27); line-height: 1.44;}

/* 본문 폰트 */
.lang-title {font-family: var(--lang-title);}
.sm {font-size: var(--font-16); line-height: 1.6;}
.xsm {font-size: var(--font-15); line-height: 1.5;}

.en {font-family: var(--lang-en);}
.en.sm {font-size: var(--font-16); font-weight: 700; letter-spacing: -0.02;}
.en.xsm {font-size: var(--font-14); font-weight: 700; letter-spacing: -0.02;}

/* 폰트 굵기 */
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
 
/* 배경흐림 */
.backdrop {backdrop-filter: var(--backdrop);}

  /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-primary) !important;}
 [data-color="primary"]{color:var(--c-primary) !important;}
 [data-color="c2"]{color:var(--c-secondary) !important;}
 [data-color="secondary"]{color:var(--c-secondary) !important;}
 [data-color="third"]{color:var(--c-third) !important;}
 [data-color="title"]{color:var(--b-title) !important;}

 [data-color="w"],
 [data-color="w"] *{color: var(--w);} /* 영역만 글자 흰색 */

 [data-bg="1"]{background-color: var(--bg-default) !important;}
 [data-bg="default"]{background-color: var(--bg-default) !important;}
 [data-bg="primary"]{background-color: var(--c-primary) !important;}
 [data-bg="light"]{background-color: var(--bg-light) !important;}
 [data-bg="dark"]{background-color: var(--bg-dark) !important;}

 /* boarder 값 기본 셋 */
.border{border:1px solid var(--br-default);}
 [data-radius]{overflow:hidden;}
 [data-radius="5"]{border-radius:max(0.2604vw, 3rem);}
 [data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

@media (max-width:1600px){
    :root{
      
    }
}
@media (max-width:1480px){
    :root {
       
	}
}


@media all and (max-width:1280px){
	:root {
       --font-67:62rem;
	}
}

@media all and (max-width:1200px){
	:root {
		--margin: 40rem;
		
		--font-52:45rem;
		--font-45:40rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-67:52rem;
		--font-52:40rem;
		--font-45:37rem;
		--font-35:32rem;
		--font-27:24rem;
		--font-24: 21rem;

		--space180:150rem;
		--space150:120rem;
		--space140:120rem;
		--space130:100rem;
		--space120:100rem;
		--space110:100rem;
		--space100:80rem;
		--space80:60rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;

		--font-67:45rem;
		--font-52:35rem;
		--font-45:32rem;
		--font-35:27rem;
		--font-27:21rem;
		--font-24:19rem;
	}
}

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

        --font-67:32rem;
		--font-52:26rem;
		--font-45:22rem;
		--font-35:22rem;
		--font-27:20rem;
		--font-24:18rem;
		--font-19:16rem;
		--font-16:14rem;
		--font-15:14rem;
		--font-14:13rem;

		--margin: 20rem;

		--space180:80rem;
		--space160:80rem;
		--space150:80rem;
		--space140:60rem;
		--space130:60rem;
		--space120:60rem;
		--space110:50rem;
		--space100:50rem;
		--space80:40rem;
	}

	[data-heading] {letter-spacing: 0;}

	.en.sm {font-size: var(--font-14);}
	.en.xsm {font-size: 12rem;}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1400rem;}
 .wrap-wide{width:100%; padding: 0 var(--margin);}
 .wrap-narrow{max-width:1206rem;} /* 빼지마세요 */
 
 @media all and (max-width:1919px){
	 .wrap-wide{max-width: none;}
 }
 
 @media all and (max-width:1480px){
	 .wrap{margin:0 var(--margin);max-width:none;}
 }

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

 /* **************************************** *
 * swiper set
 * 
 * 사이트 기본 슬라이드 스타일에 맞게 마음껏 수정하면 됩니다.
 * 특정 페이지에서만 다른 스타일 슬라이드를 사용한다면 부모 클레스 상쇄하여 사용 
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;}
 .swiper-controls > div{cursor: pointer;}
 .button-next.swiper-button-disabled,
 .button-prev.swiper-button-disabled{opacity:0.5;}
 
 .swiper-controls{display:flex; justify-content:center; align-items:center;}
 .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--next::after{/* transform:rotate(-90deg); */}
 .swiper-controls .swiper-btn--prev::after{transform: rotate(180deg);}
 .swiper-controls .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-secondary) !important;}

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


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

/* button common */
*.btn-basic {display:inline-flex;justify-content:space-between;align-items:center;position:relative; height: 54rem;box-sizing:border-box; transition: var(--trans-01);}
*.btn-basic p {display: inline-flex; align-items: center; height: 100%; padding: 0 25rem; font-size: var(--font-15); font-weight: 600; color: var(--w); background: var(--c-primary); border-radius: 100rem; backdrop-filter: var(--backdrop); border: 1px solid transparent; transition: var(--trans-01);}
*.btn-basic i {overflow: hidden; position: relative; height: 100%; aspect-ratio: 1/1; margin-left: 0; border-radius: 100%; background: var(--c-primary); backdrop-filter: var(--backdrop); transition: var(--trans-01);}
*.btn-basic i::after {position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 14rem; background-image: url(../img/layout/arrow-basic_w.svg); transform-origin: 50% 50%; transition: var(--trans-01);}

*.btn-basic.white p {color: var(--w); background: var(--op-w20);}
*.btn-basic.white i {background: var(--op-w20);}
*.btn-basic.white i::after {background-image: url(../img/layout/arrow-basic_w.svg);}

*.btn-basic.line p {color: var(--b-title); background: var(--w); border: 1px solid var(--b-title);}
*.btn-basic.line i {background: var(--w); border: 1px solid var(--b-title);}
*.btn-basic.line i::after {background-image: url(../img/layout/arrow-basic.svg);}

*.btn-more{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:120rem;height:120rem;margin-left:-60rem;margin-top:-60rem;border-radius:100%;pointer-events:none;transform:translateZ(0);backface-visibility:hidden;}
*.btn-more::before{content:'';position:absolute;inset:0;width:100%;height:100%;border-radius:100%;background:var(--c-primary);mix-blend-mode:multiply;pointer-events:none;transform:scale(0.001);transition:transform .35s ease;will-change:transform;backface-visibility:hidden;}
*.btn-more > *{opacity:0;transition:opacity .25s ease;transition-delay:0s;}
*.btn-more i{position:relative;z-index:2;width:10rem;height:10rem;opacity:0;transition:opacity .25s ease;}
*.btn-more i::before,*.btn-more i::after{position:absolute;left:0;top:50%;content:'';width:100%;height:2rem;background:var(--w);}
*.btn-more i::after{transform:rotate(90deg);}
*.btn-more p{position:relative;z-index:2;margin-top:10rem;font-size:var(--font-14);font-weight:700;color:var(--w);letter-spacing:-0.02;opacity:0;transition:opacity .25s ease;}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover p{color: var(--b-title); background: var(--c-secondary); border-color: transparent;}
	*.btn-basic:hover i {margin-left: 5rem; background: var(--c-secondary); border-color: transparent;}
	*.btn-basic:hover i::after {background-image: url(../img/layout/arrow-basic.svg); transform: rotate(45deg);}

	*.btn-basic.white.v2:hover p {color: var(--w); background: var(--c-primary);}
	*.btn-basic.white.v2:hover i {background: var(--c-primary);}
	*.btn-basic.white.v2:hover i::after {background-image: url(../img/layout/arrow-basic_w.svg);}

	a:has(.btn-more):hover .btn-more {opacity: 1; transition-delay: 0.1s;}
	a:has(.btn-more):hover .btn-more::before {transform:scale(1);}
	a:has(.btn-more):hover .btn-more i,
	a:has(.btn-more):hover .btn-more p {opacity:1;}
}

@media (max-width: 540px){
	*.btn-basic {min-height: 50rem; height: auto;}
	*.btn-basic p {padding: 12rem 20rem;}
	*.btn-basic i {display: none;}
}

/* 마우스커스텀 */    
#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[class^="swiper--"] .cur_cir {display: flex; align-items: center; justify-content: center; width: 120rem; height: 120rem; background: var(--c-secondary);}
#cursor[class^="swiper--"] .cur_cir span {display: inline-block; margin-top: -1.5rem; color: var(--b-title); letter-spacing: -0.02; line-height: 1;}
#cursor[class^="swiper--"] .cur_cir i {width: 12rem; height: 12rem; margin: 0 10rem; background: url(../img/common/arrow-basic.svg) no-repeat center / contain;}
#cursor.swiper--prev .cur_cir {flex-direction: row-reverse;}
#cursor.swiper--prev .cur_cir i {margin-left: -5rem; transform: scaleX(-1);}
#cursor.swiper--prev span::before {content:'PREV';}
#cursor.swiper--next span {margin-left: 15rem;}
#cursor.swiper--next span::before {content:'NEXT';}

#cursor.more .cur_cir {mix-blend-mode:multiply; display: flex; align-items: center; justify-content: center; width: 120rem; height: 120rem; background: var(--c-primary);}
#cursor.more .cur_cir {flex-direction: column-reverse;}
#cursor.more .cur_cir i {position: relative; width: 10rem; height: 10rem;}
#cursor.more .cur_cir i::before,
#cursor.more .cur_cir i::after {position: absolute; left: 0; top: 50%; content:''; width: 100%; height: 2rem; background: var(--w);}
#cursor.more .cur_cir i::after {transform: rotate(90deg);}
#cursor.more .cur_cir span {margin-top: 10rem; color: var(--w);}
#cursor.more .cur_cir span::before {content:'VIEW MORE';}

#cursor.drag .cur_cir {position: relative; width:100rem; height:100rem; 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-primary) 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:100rem; height:100rem; border-radius:100%; background:var(--c-primary); overflow:hidden;}
#cursor.drag .cur_cir span::before {content:'DRAG';}
#cursor.drag .cur_cir i {display: none;}

#cursor.drag--v2 .cur_cir {position: relative; width:100rem; height:100rem; box-shadow: 10rem 10rem 20rem 0 var(--op-b20);}
#cursor.drag--v2 .cur_cir::before,
#cursor.drag--v2 .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--v2 .cur_cir::before {left: -20rem;}
#cursor.drag--v2 .cur_cir::after {right: -20rem; transform: scaleX(-1) translateY(-50%);}
#cursor.drag--v2 .cur_cir span {display:flex; align-items:center; justify-content:center; position:relative; width:100rem; height:100rem; color: var(--c-primary); border-radius:100%; background:var(--c-secondary); overflow:hidden;}
#cursor.drag--v2 .cur_cir span::before {content:'DRAG';}
#cursor.drag--v2 .cur_cir i {display: none;}

/* zoom */
.zoom-view{position:relative; max-width:390rem;}
.zoom-view__btn{display:block; position:relative; width:100%; padding:0; background:none; border:0; cursor:pointer;}
.zoom-view__img{display:block; width:100%; height:auto;}
.zoom-view__hint{display:flex; align-items:center; position:absolute; opacity:0; top:12rem; right:12rem; line-height:1; padding:8rem 12rem; background:rgba(0, 0, 0, .55); font-size:13rem; color:#fff; transition:opacity .25s ease, transform .25s ease; transform:translateY(-4rem); border-radius:999rem; pointer-events:none; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem);}
.zoom-view__hint::before{content:""; display:block; width:13rem; height:13rem; margin-right:6rem; background:#000; background:url(../../../img/board/ic-search_w.svg) no-repeat 50% 50%; background-size:cover;}
.zoom-modal{display:none; position:fixed; z-index:9999; inset:0;}
.zoom-modal.is-open{display:block;}
.zoom-modal__dim{position:absolute; background:rgba(0, 0, 0, .78); inset:0;}
.zoom-modal__panel{display:flex; position:absolute; inset:0; flex-direction:column;}
.zoom-modal__close{position:absolute; top:12rem; right:12rem; width:42rem; height:42rem; background:rgba(255, 255, 255, .14); border:0; border-radius:999rem; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem); cursor:pointer;}
.zoom-modal__close::before,
.zoom-modal__close::after{content:''; position:absolute; top:50%; left:50%; width:16rem; height:2rem; background:#fff;}
.zoom-modal__close::before{transform:translate(-50%, -50%) rotate(45deg);}
.zoom-modal__close::after{transform:translate(-50%, -50%) rotate(-45deg);}
.zoom-modal__stage{display:flex; justify-content:center; align-items:center; overflow:hidden; padding:65rem 16rem 16rem; flex:1; touch-action:none;}
.zoom-modal__img{transform:translate3d(0, 0, 0) scale(1); max-width:100%; max-height:100%; transform-origin:50% 50%; will-change:transform; user-select:none; -webkit-user-drag:none; pointer-events:none;}
.zoom-modal__stage{touch-action:none; overscroll-behavior:contain;}
.zoom-modal__img{pointer-events:none;}
.zoom-view__icon{display:flex; justify-content:center; align-items:center; position:absolute; opacity:1; top:12rem; right:12rem; width:36rem; height:36rem; background:rgba(0,0,0,.55); border-radius:999rem; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem);}
.zoom-view__icon::before{content:''; display:block; position:relative; width:15rem; height:15rem; background:url(../../../img/board/ic-search_w.svg) no-repeat 50% 50%; background-size:cover;}
.zoom-view__icon::after{}

@media (hover: hover) and (pointer: fine){
	.zoom-view__btn:hover .zoom-view__hint{opacity:1; transform:translateY(0);}
}

@media (max-width: 540px){
	.zoom-modal__img{transition:none;}
}

@media (hover: hover) and (pointer: fine){
	.zoom-view__icon{display:none;}
}

@media (hover: none){
	.zoom-view__hint{display:none;}
}

/* 해시태그 리스트 */
[data-list="tag-list"] {display:flex; gap:3rem; flex-wrap:wrap; justify-content:center; align-items:center;}
[data-list="tag-list"] > * {margin-bottom: 0;}
[data-list="tag-list"] li {display:inline-flex; align-items:center; justify-content:center; padding:5rem 12rem; border:1px solid var(--op-b10); border-radius:100rem; font-size:var(--font-15); color:var(--b-defaultt);}
[data-list="tag-list"] li::before {position:relative; top:auto; content:'#'; margin-right:1px; background:none;}

@media all and (max-width:1023px){
	[data-list="tag-list"] li {font-size: var(--font-14);}
}

@media (max-width: 540px){
	[data-list="tag-list"] li {padding: 5rem 10rem; font-size: 12rem; line-height: 1.4;}
}

/* 스크롤 다운 */
 .scroll-indicator{position: absolute; left: 0; bottom: 30rem; display: flex; flex-direction: column; align-items: center; padding: 0 16rem; font-family: var(--lang-en);}
 .scroll-dot {position: absolute; top: 0; left: 0; width: 1px; height:20rem; background: var(--w); animation: scrollDown 1.8s ease-in-out infinite;}
 .scroll-indicator p {color: var(--op-w20); font-size: 13rem; letter-spacing: -0.02; writing-mode: vertical-rl; text-orientation: mixed;}

/* 애니메이션 */
@keyframes scrollDown{
	0%{top: 0; opacity: 0;}
	10% {opacity: 1;}
	90% {opacity: 1;}
	100%{top: 100%; transform: translateY(-100%); opacity: 0;}
}