@charset "utf-8";

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

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #F37F2B;
	--b-01: #000;
	--b-02: #333;
	--g-01: #888;
	--g-02: #aaa;
	--f-01: #fff;
	--gr-01: linear-gradient(90deg, #E1932C 0%, #D7582A 100%);
	--bg-01: #2B2B2B;
	--bg-02: #F0F0F0;
	--bg-03: #fafafa;
	--bg-04: #f6f6f6;
	--bg-05: #F37F2B;
	--br-01: #e1e1e1;
	--br-02: #ddd;

	/* 게시판용 root */
	--border-01: #eee;
	--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;
	--lang-en:'Work Sans';
	--lang-en--02:'Schibsted Grotesk';
	--lang-ko:"Pretendard";
	--font-size-72:72rem;
	--font-size-54: 44rem;
	--font-size-40:40rem;
	--font-size-35:35rem;
	--font-size-27: 24rem;
	--font-size-24: 23rem;
	--font-size-20:20rem;
	--font-size-18:18rem;
	--font-size-16:16rem;
	--font-size-15:15rem;
	--font-size-14:14rem;
}

.font-tp--01{font-size:var(--font-size-72); font-weight: 700;}
.font-tp--02{font-size:var(--font-size-54); font-weight: 700;}
.font-tp--03{font-size:var(--font-size-35); font-weight: 700;}
.font-tp--04{font-size:var(--font-size-27); font-weight: 700;}
.font-tp--05{font-size:var(--font-size-20); font-weight: 600;}
.font-tp--06{font-size:var(--font-size-18); line-height: 1.5;}
.font-tp--07{font-size:var(--font-size-15);}
.font-tp--08{font-size:var(--font-size-14);}
.font-tp--09{font-size:var(--font-size-40); font-weight: 700;}

.font-tp-en--00 {font-size: var(--font-size-15); font-weight: 700;}
.font-tp-en--01 {font-size:var(--font-size-72); font-weight: 700; letter-spacing: -.5rem;}
.font-tp-en--04 {font-size:var(--font-size-27); font-weight: 700;}

 /* 컬러 기본 셋 */
 [data-color="1"]{color:var(--c-01) !important;}
 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 [data-bg="3"]{background-color: var(--bg-03) !important;}
 [data-bg="4"]{background-color: var(--bg-04) !important;}
 [data-color="white"],
 [data-color="white"] *{color: var(--f-01);} /* 영역만 글자 흰색 */
 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid;}
 [data-radius]{overflow:hidden;}
 [data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

 
@media all and (max-width:1200px){
	:root {
		--font-size-72:65rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-size-72:55rem;
		--font-size-54: 34rem;
		--font-size-40:32rem;
		--font-size-35:32rem;
		--font-size-27:24rem;
		--font-size-15:14rem;
	}
}

@media (max-width:860px){
	:root {
		--font-size-72:50rem;
		--font-size-18:16rem;

		/* --lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif; */
	}
}

@media (max-width: 540px){
	:root {
		--font-size-72:30rem;
		--font-size-54:28rem;
		--font-size-40:28rem;
		--font-size-35:20rem;
		--font-size-27:18rem;
		--font-size-24:18rem;
		--font-size-20:15rem;
		--font-size-18:14rem;
		--font-size-15:13rem;
		--font-size-14:13rem;
		
	}
}

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

 .wrap{max-width: 1520rem;}
 .wrap-wide{margin: 0 102rem;}
 .wrap-narrow{max-width:1440rem;}
 .wrap-narrow.v2{max-width:1200rem;}
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem; max-width: none;}
 }
 
 @media all and (max-width:1680px){
	 .wrap,
	 .wrap-narrow{margin:0 60rem;max-width:none;}
 }

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

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

 /* **************************************** *
 * 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; font-size: 0;}
 .swiper-controls *[class^="swiper-btn--"]{position: relative; width: 80rem; height: 60rem; font-size: 0; border-radius: 30rem; border: 1px solid var(--b-01); transition: var(--trans-01);}
 .swiper-controls .swiper-btn--prev{transform: scaleX(-1);}
 
 .swiper-controls .swiper-button-disabled{opacity: 0.2;}
 
 .swiper-controls .swiper-pagination-bullet{opacity: 1; width:10rem; height:10rem; background:#fff;}
 .swiper-controls .swiper-pagination-bullet-active {background: var(--c-01); transform: rotate(45deg);}
 .swiper-controls .swiper-pagination{display:flex; gap:17rem;}

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



/* **************************************** *
 * site custom
 * **************************************** */
/* tag common */
p{line-height:1.6;}

/* button common */
*.btn-basic{overflow: hidden;position:relative;display: inline-flex;align-items: center; height: 60rem;text-transform: uppercase;box-sizing:border-box;background:var(--c-01);/* border:1px solid var(--c-01); */font-weight:600;font-size:15rem;color:var(--f-01);transition: var(--trans-01);border-radius: 100rem;}
*.btn-basic > span {z-index: 1; display: flex; align-items: center;justify-content: space-between; min-width:175rem; height: 100%;padding: 0 25rem; font-size: var(--font-size-15); font-weight: 700; white-space: nowrap;}
*.btn-basic i {display: block; width: 20rem; height: 15rem; margin-left: 18rem; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(../img/layout/arrow-basic_w.svg);}
*.btn-basic::before{opacity: 0; content:"";position: absolute;left:0;top: 55rem;width: 100%; aspect-ratio: 1/1; border-radius: 100%; background: var(--b-01); transition: var(--trans-01); transition-delay: .1s;}

*.btn-arrow {overflow: hidden; position: relative; display: inline-block; padding: 25rem 32rem; border-radius: 100rem; border: 1px solid var(--b-01);}
*.btn-arrow i {position: relative; display: block; width: 20rem; height: 15rem; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(../img/layout/arrow-basic.svg); transition: var(--trans-01);}
*.btn-arrow::before {opacity: 0; content:"";position: absolute;left:0;top: 55rem;width: 100%; aspect-ratio: 1/1; border-radius: 100%; background: var(--gr-01); transition: var(--trans-01); transition-delay: .1s;}
*.btn-arrow.white {border-color: var(--f-01); background: rgba(255, 255, 255, .1);}
*.btn-arrow.white i {background-image: url(../img/layout/arrow-basic_w.svg);}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover {border-color: var(--b-01);}
	*.btn-arrow:hover {border-color: var(--c-01) !important;}
	*.btn-arrow:hover i {background-image: url(../img/layout/arrow-basic_w.svg);}
	*.btn-basic:hover::before,
	*.btn-arrow:hover::before {opacity: 1; top: 0; border-radius: 0;}

	.swiper-controls *.swiper-button-disabled:hover {border-color: var(--b-01) !important;}
	.swiper-controls *.swiper-button-disabled:hover i {background-image: url(../img/layout/arrow-basic.svg);}
	.swiper-controls *.swiper-button-disabled:hover::before {opacity: 0; top: 55rem; border-radius: 100%;}
}

@media all and (max-width:1023px){
	*.btn-basic > span {min-width: 155rem; padding: 0 20rem; font-weight: 600;}
	*.btn-basic i {margin-left: 15rem;}
}

@media (max-width: 540px){
	*.btn-basic {height: auto;}
	*.btn-basic > span {min-width: 135rem; padding: 15rem 17rem; font-size: var(--font-size-14);}
	*.btn-arrow i,
	*.btn-basic i {width: 15rem; height: 10rem;}

	*.btn-arrow {padding: 15rem 20rem;}
}


/* 마우스커스텀 */    
#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.basic .cur_cir{backdrop-filter: blur(10rem); -webkit-backdrop-filter: blur(10rem); width:135rem; height:135rem; background:rgba(255, 255, 255, .25); box-shadow: 0 26rem 23rem rgba(0, 0, 0, .12);}
#cursor.basic .cur_cir::before{content:"VIEW MORE"; font-size: 13rem; font-weight: 700;}

#cursor.drag .cur_cir{backdrop-filter: blur(10rem); -webkit-backdrop-filter: blur(10rem); width:120rem; height:120rem; background:rgba(255, 255, 255, .25); box-shadow: 0 26rem 23rem rgba(0, 0, 0, .12);}
#cursor.drag .cur_cir p{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--f-01);}
#cursor.drag .cur_cir p::before {content: "DRAG"; line-height: 1; font-size: 13rem; font-weight: 700;}
#cursor.drag .cur_cir::before,
#cursor.drag .cur_cir::after {position: absolute; top: 50%; content:''; width: 0; height: 0; margin-top: -5rem; border:6rem solid transparent; border-left-width:7rem; border-right-width: 7rem; border-left-color: var(--f-01);} 
#cursor.drag .cur_cir::before {left: 12rem; transform: scaleX(-1);}
#cursor.drag .cur_cir::after {right: 12rem;}

[cursor-type]{cursor: pointer;}

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