@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-02)}
body,input,textarea,button,select{font-family:"Pretendard", '맑은 고딕', '돋움', 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: #0D345E;
	--c-second: #D41879;

    /* title / body */
	--b-default: #555555;
	--b-title: #111111;
	--b-02: #666666;
	--b-03: #aaaaaa;

	--w: #fff;

	--bg-dark: #030B10;
	--bg-01: #202124;
	--bg-02: #f0f0f0;

	--br-01: #E1E1E1;

	/* 게시판용 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:'Poppins';
	--lang-ko:"Pretendard";

	--default:16rem;

	--kr-5xl:76rem;
	--kr-4xl:70rem;
    --kr-3xl:55rem;
	--kr-lg:24rem;

	--en-xl:35rem;
	--en-lg:22rem;

    --kr-md:18rem;
	--kr-sm:15rem;
	--kr-2sm:13rem;

	--en-sm:14rem;
    
	--space200:200rem;
	 --space180:180rem;
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;
	--space50:50rem;

	--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);
}

h2, h3, h4, h5, h6 {color: var(--b-title); font-weight: 700;}

.font-h3,h3{font-size:var(--font-55); line-height: 1.375; font-weight: 700;}

/* 폰트 타이틀 */
 [data-font-kr="5xl"] {font-size:var(--kr-5xl); line-height: 1.4;}
 [data-font-kr="4xl"] {font-size:var(--kr-4xl); line-height: 1.4;}
 [data-font-kr="3xl"] {font-size:var(--kr-3xl); line-height: 1.3;}
 [data-font-kr="2xl"] {font-size:var(--kr-2xl); line-height: 1.3;}
 [data-font-kr="xl"] {font-size:var(--kr-xl); line-height: 1.2;}
 [data-font-kr="lg"] {font-size:var(--kr-lg); line-height: 1.2;}

 [data-font-en="xl"] {font-size: var(--en-xl);}
 [data-font-en="lg"] {font-size: var(--en-lg);}

 /* 폰트 본문 */
 [data-font-kr] {font-family: var(--lang-ko); line-height: 1.3;}
 [data-font-kr="md"] {font-size: var(--kr-md); font-weight: 600; line-height: 1.5;}
 [data-font-kr="sm"] {font-size: var(--kr-sm);}
 [data-font-kr="2sm"] {font-size: var(--kr-2sm);}

 [data-font-kr~="semibold"],
 [data-font-en~="semibold"] {font-weight: 600;}
 [data-font-kr~="bold"],
 [data-font-en~="bold"] {font-weight: 700;}
 
 [data-font-en] {font-family: var(--lang-en);}
 [data-font-en="sm"] {font-size: var(--en-sm);}

 /* 컬러 기본 셋 */
 [data-color="primary"]{color:var(--c-primary) !important;}
 [data-color="second"]{color:var(--c-second) !important;}
 [data-color="b1"]{color:var(--b-01) !important;}
 [data-color="b2"]{color:var(--b-02) !important;}

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

 [data-bg="dark"]{background-color: var(--bg-dark) !important;}
 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid;}
 [data-radius]{overflow:hidden;}
 [data-radius="12"]{border-radius:max(0.6250vw, 5rem);}
 [data-radius="24"]{border-radius:max(1.2500vw, 10rem);}

@media all and (max-width:1023px){
	:root {
		--kr-5xl:66rem;
		--kr-4xl:60rem;
		--kr-3xl:45rem;
		--kr-lg:24rem;

		--en-xl:35rem;
		--en-lg:22rem;

		--kr-md:18rem;
		--kr-sm:15rem;
		--kr-2sm:13rem;

		--en-sm:14rem;
		
		--space200:160rem;
		--space150:120rem;
		--space140:140rem;
		--space130:130rem;
		--space120:120rem;
		--space110:110rem;
		--space100:100rem;
		--space80:80rem;
		--space50:50rem;
	}
}

@media (max-width:860px){
	:root {
		--kr-5xl:60rem;
		--kr-4xl:55rem;
		--kr-3xl:40rem;
		--kr-lg:24rem;

		--en-xl:30rem;
		--en-lg:22rem;

		--kr-md:18rem;
		--kr-sm:15rem;
		--kr-2sm:13rem;

		--en-sm:14rem;
		
		--space200:120rem;
		--space150:120rem;
		--space140:140rem;
		--space130:130rem;
		--space120:120rem;
		--space110:110rem;
		--space100:100rem;
		--space80:80rem;
		--space50:50rem;
	}
}

@media (max-width: 540px){
	:root {
		--kr-5xl:34rem;
		--kr-4xl:30rem;
		--kr-3xl:24rem;
		--kr-lg:20rem;

		--en-xl:22rem;
		--en-lg:16rem;

		--kr-md:15rem;
		--kr-sm:14rem;
		--kr-2sm:12rem;

		--en-sm:13rem;
		
		--space200:80rem;
		--space150:80rem;
		--space140:140rem;
		--space130:130rem;
		--space120:100rem;
		--space110:100rem;
		--space100:80rem;
		--space80:50rem;
		--space50:30rem;
	}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{margin: 0 50rem;}
 .wrap-narrow{max-width:1206rem;} /* 빼지마세요 */
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem; 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 .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-primary);}


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

/* button common */
*.btn-basic {overflow: hidden; display:inline-block; position:relative;box-sizing:border-box; transition: var(--trans-01); border-radius: 100rem;}
*.btn-basic p {position: relative; display:inline-flex; align-items:center; min-width:120rem; padding: 20rem 27rem; padding-right: 30rem; border-radius: 100rem; border:1px solid var(--c-primary);}
*.btn-basic span {position: relative; font-weight:600; color: var(--c-primary);}
*.btn-basic::before {backdrop-filter: blur(12rem); -webkit-filter: blur(12rem); position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: transparent;}
*.btn-basic::after {opacity: 0; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; border-radius: 100rem; border: 8rem solid var(--op-w05); transition: var(--trans-01);}
*.btn-basic i {position: relative; width: 14rem; height: 14rem; margin-right: 0; transition: var(--trans-01);}
*.btn-basic i::before {position: absolute; left:0; top: 50%; content:''; width: 2rem; height: 2rem; border-radius: 100%; transition: var(--trans-01);}
*.btn-basic i::after {opacity: 0; position: absolute; left:0; top: 0; content:''; width: 0; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center left; background-image: url(../img/layout/arrow-basic_w.svg); transition: var(--trans-01);}

*.btn-basic.white p {border: 1px solid var(--op-w10);}
*.btn-basic.white span {color: var(--w);}
*.btn-basic.white::before {background: var(--op-w20);}
*.btn-basic.white::after {border-color: var(--op-w10);}
*.btn-basic.white i::before {background: var(--w);}

*.btn-basic.fill.white {background: var(--w);}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover::after {opacity: 1;}
	*.btn-basic.white:hover {border: 1px solid var(--w);}
	*.btn-basic.white:hover p {border: 1px solid var(--w);}
	*.btn-basic:hover i {margin-right: 12rem;}
	*.btn-basic:hover i::before {opacity: 0;}
	*.btn-basic:hover i::after {opacity: 1; width: 100%;}
}

@media all and (max-width:1023px){
	*.btn-basic p {padding: 18rem 24rem; padding-right: 26rem;}
}

@media (max-width:860px){

}

@media (max-width: 540px){
	
}

/* 마우스커스텀 */    
#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.drag .cur_cir {position: relative; display: flex; align-items: center; width: 120rem; height: 120rem;}
#cursor.drag .cur_cir::before {position: absolute; left: -21rem; content:''; width: 12rem; height: 18rem; background: url(../img/layout/cursor-arrow.svg) no-repeat center / contain;}
#cursor.drag .cur_cir::after {position: absolute; right: -21rem; content:''; width: 12rem; height: 18rem; background: url(../img/layout/cursor-arrow.svg) no-repeat center / contain; transform: scaleX(-1);}
#cursor.drag .cur_cir p {position: relative; width: 100%; height: 100%; color: var(--w); font-family: var(--lang-en); font-size: var(--en-sm); font-weight: 600; border-radius: 100%; background: var(--c-primary); box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.50);}
#cursor.drag .cur_cir p::before {display: flex; justify-content: center; align-items: center; content:'DRAG'; width: 120rem; height: 120rem; }

[cursor-type]{cursor: pointer;}

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

@media (max-width: 540px){
	*.btn-basic p {padding: 12rem 18rem; padding-right: 18rem; font-size: 14rem;}
	*.btn-basic i {display: none;}
}