@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); line-height:1.588;  color:var(--c-body); transition: background-color .5s cubic-bezier(0.215, 0.61, 0.355, 1);}
body,input,textarea,button,select{font-family:'Poppins',"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-body: #575757;
    --c-title:#2C2C2C;

    /* 주요 강조 */
    --c-title:#2C2C2C;

    /* 주요 브랜드 색 */
    --c-primary: #0091CD;
    --c-secondary:#0CA1BA;
    --c-01: #0091CD;
	--w: #fff;

    /* 배경 */
    --bg-default:#F3F3F3; 
    --bg-part:#002056;
    --bg-dark:#101217;
    --b-01:#101217;

    --br-01:#3E3F3F;
    --br-02:#282828;

	--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 2s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 3s ease;

	--lang-en:'Poppins';
	--lang-ko:"Pretendard";
    --lang-en-body:'Manrope', sans-serif;

    /* 기본사이즈 */
	--default:20rem;

    --kr-4xl:68rem;
    --kr-3xl:56rem;
    --kr-2xl:44rem;
    --kr-xl:28rem;
    --kr-lg:22rem;
    --kr-md:18rem;
    
    --en-2xl:70rem;
    --en-xl:26rem;
    --en-lg:22rem;
    --en-md:18rem;
    
    --space-200:200rem;
    --space-160:160rem;
    --space-150:150rem;
    --space-130:130rem;
    --space-100:100rem;
    --space-80:80rem;
    --space-60:60rem;

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

    --wrap:1520rem;
    --wrap-wd:1700rem;
   
}

/* 국문타이틀 */
[data-font-kr]:not([data-font-kr^="body"]){font-weight: 700;}
[data-font-kr]{font-family: var(--lang-ko); color:var(--c-title)}
[data-font-kr="4xl"], [data-font-kr="4xl"] *{font-size: var(--kr-4xl); line-height: 1.35; } /* h2 */
[data-font-kr="3xl"]{font-size: var(--kr-3xl); line-height: 1.28; } /* h3 */
[data-font-kr="2xl"]{font-size: var(--kr-2xl); line-height: 1.31; }
[data-font-kr="xl"], [data-font-kr="xl"] * {font-size: var(--kr-xl); line-height: 1.36;}
[data-font-kr="lg"] {font-size: var(--kr-lg); line-height: 1.36; } /* board-title */
[data-font-kr="md"] {font-size: var(--kr-md); line-height: 1.33; ;} 

/* 국문 body */
[data-font-kr="body medium"]{font-size:17rem; font-weight: 400; line-height: 1.7;}
[data-font-kr="body bold"]{font-weight: 700; line-height: 1.7;}
[data-font-kr="body small"]{font-size:15rem; line-height: 1.46;}

/* 영문타이틀 */
[data-font-en]{font-family: var(--lang-en); font-weight: 600;}
[data-font-en="2xl"], [data-font-en="2xl"] *{ font-size: var(--en-2xl); line-height: 1.07;  } /* h3 */
[data-font-en="xl"]{ font-size: var(--en-xl); line-height: 1.53; } 
[data-font-en="lg"]{ font-size: var(--en-lg); line-height: 1.5; } 
[data-font-en="md"]{ font-size: var(--en-md); line-height: 1.5; } 

/* 영문Body */
[data-font-en^="body"]{font-family: 'Manrope';}
[data-font-en^="body bold"]{font-size: 17rem; font-weight: 700;}
[data-font-en^="body medium"]{font-family: 'Poppins'; font-size: 18rem; font-weight: 500;}
[data-font-en^="body small"]{font-family: 'Poppins'; font-size: 14rem; font-weight: 400;}

.caption{font-weight: 700; font-family: var(--lang-en); font-size: 30rem; position: relative; color: var(--c-primary) !important;}

 /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-01) !important;}
 [data-color="c2"]{color:var(--c-02) !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="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="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

@media (max-width:1600px){
    :root{
      
            --kr-xl: 24rem;
        --default:18rem;
        --space-200:160rem;
        --space-160:120rem;
        --space-150:120rem;
        --space-130:100rem;
        --space-100:100rem;

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

	}
}


@media all and (max-width:1200px){
	:root {

        --kr-3xl:46rem;
         --kr-xl: 20rem;
        --kr-lg:20rem;
        --kr-md:16rem;

        --en-xl: 26rem;
         --en-lg:20rem;

        --space-160:100rem;
        --space-100:80rem;
       
	}
}

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

        --kr-3xl:36rem;
        --kr-2xl:36rem;
        --kr-lg:18rem;
    --default:16rem;

        
        --en-2xl:52rem;
        --en-lg:18rem;
        --en-xl:22rem;

        --space-200:100rem;
        --space-160:100rem;
        --space-150:100rem;
        --space-100:60rem;
    
	}
}

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


        --space-200:80rem;
        --space-160:80rem;
        --space-150:80rem;
        --space-130:80rem;
        --space-100:80rem;
     
	}
}

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

        --kr-3xl:26rem;
        --kr-2xl:26rem;
        --kr-lg:16rem;
    --default:15rem;


        --en-2xl:36rem;
        --en-lg:16rem;

        --space-200:64rem;
        --space-160:64rem;
        --space-150:64rem;
        --space-130:64rem;
        --space-100:64rem;
        --space-60:40rem;
	}

    [data-font-kr="body medium"]{font-size:15rem;}
    [data-font-en^="body medium"] {font-size: 15rem;}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{max-width:1700rem;}
 .wrap-narrow{max-width:1206rem;} /* 빼지마세요 */
 .wrap-narrow2{max-width:1400rem;} 
 
 @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:1480px){
	 .wrap-narrow2 {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:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}

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

/* button common */
.btn-wrap{display: flex;}
.btn-default{display: flex; transform: var(--trans-02); width: 190rem; height: 54rem; align-items: center; padding: 19rem 16rem; position: relative; border-radius: 5rem; background-color: var(--op-w10); transition: var(--trans-01); }
.btn-default span{color: var(--w); position: relative;}
.btn-default svg{position: absolute; right: 8rem; bottom: 10rem;}
.btn-default i{width: 42rem; height: 42rem; border-radius: 3rem; background-color: var(--op-w10); opacity: 0; position: absolute; left: 40rem; top: 6rem; transition:all .5s ease-in-out !important;}
.btn-default *{transform: var(--trans-02);}
.btn-default.gray{background-color: transparent; border:1px solid var(--op-b10); }
.btn-default.gray span{color: var(--c-body);}
.btn-default.gray svg path{fill: var(--c-primary);}
.btn-default.primary{background-color: var(--c-01);}
/* .btn-default.primary svg path{fill: var(--w);} */

.btn-cross{display: flex; width: 180rem; transition: var(--trans-01); height: 54rem; border-radius: 5rem; align-items: center; justify-content: center; position: relative; background-color: var(--op-w20); backdrop-filter: blur(6.5rem);}
.btn-cross svg{position: absolute; transition: var(--trans-01);}
.btn-cross .left{left: 8rem; bottom: 10rem;}
.btn-cross .right{right: 8rem; top: 10rem;}

.comm-tit{}
.comm-tit h3{margin-top: 30rem;}
.comm-tit h3 *{font-weight: 700;}

/* 다크버전 */
*[data-theme="dark"],
*[data-theme="dark"] *{
    --c-title:var(--w);
    --c-body:var(--w);
    
}

#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.overlay .cur_cir{width:204rem; height:204rem; position: relative;}
#cursor.overlay .cur_cir span{width: 100%; height: 100%; border-radius: 100% ; display: flex; align-items: center; justify-content: center; background-color:rgba(0, 145, 205, 0.71); border:1px solid var(--c-primary); backdrop-filter: blur(5rem); box-shadow: drop-shadow(10px 23px 54px rgba(84, 84, 84, 0.32)); position: relative;  }
#cursor.overlay .cur_cir span::before{content: "";  background-image: url(../img/main/ic-arrow.svg); width: 62rem; height: 62rem; background-repeat: no-repeat; background-size: contain; }
#cursor.overlay .cur_cir::before{content:""; background-image: url(../img/main/drag.svg); background-repeat: no-repeat; background-size: contain; width: 19rem; height: 30rem; position: absolute; top: 16rem; left: 176rem;}

#cursor.moreview .cur_cir{position:relative; opacity:1; width:122rem; height:122rem; background-color:var(--c-primary); transform:rotate(0) scale(1) translate(0, 0) !important;}
#cursor.moreview .cur_cir::before{content:"Drag"; display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:13rem; font-family: var(--lang-en); color:#fff; letter-spacing:-0.03em; transform:translate(-50%, -50%);}
#cursor.moreview .cur_cir span{width: 162rem; height: 20rem; background: url(../img/main/drag-arrow.svg) no-repeat; background-size: contain; position: absolute; left: -20rem; top: 50%; transform: translateY(-50%);}
/* #cursor.moreview .cur_cir img{position:absolute; top: 50%; transform: translateY(-50%); left: -20rem;} */

[cursor-type]{cursor: pointer;}





@media (hover: hover) and (pointer: fine){
    *.btn-default:hover i{opacity: 1; transform: translateX(100rem); background-color: var(--op-w20);}
	*.btn-default:hover,
    .btn-cross:hover{background: var(--c-primary); }
    .btn-cross:hover .left{transform: translateY(-27rem) rotate(90deg);}
    .btn-cross:hover .right{transform: translateY(27rem) rotate(90deg);}
    .btn-default.gray:hover span{color:var(--w)}
    .btn-default.gray:hover svg path{fill: var(--w);}
}

@media all and (max-width:1200px){
	.comm-tit h3{margin-top: 20rem;}
}
@media (max-width: 1023px){
	#cursor{display: none !important;}
}   
		

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

@media (max-width: 540px){
	*.btn-basic{padding:19rem 20rem;font-size:14rem;min-width:160rem;display: flex;}
    .comm-tit h3{margin-top: 10rem;}
}