@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body,p{font-size:var(--default); color:var(--c-primary)}
body,input,textarea,button,select{font-family:'Poppins','Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p{font-language-override: 1.5;}
@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;word-break: keep-all;}
	p {line-height: 1.6;word-break: keep-all;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {

    /* 타이틀. 기본 브랜드 색 */
	--c-primary: #001E81;
    /* 본문, 기본 텍스트 */
	--c-base: #424C7D;
    /* 주요 강조 */
    --c-01:#164CFB;
    --c-02:#0AA9FF;
    --c-03:#F5CB0C;

	--w: #fff;

    /* 배경 */
    --bg-default:#F7F9FF; 
    --bg-surface:#F3F5FF;
	--bg-gradient: linear-gradient(270deg, #0B2879 0%, #0168EA 100%);
	--bg-op-dark: rgba(0, 77, 255, 0.20);
    --bg-dark:#050817;
    --bg-primary:#016DF3;

    --b-01:var(--bg-dark);

    /* border용 */
	--br-01: rgba(40,40,40,.1);

	/* 게시판용 root */
	--border-01: rgba(40,40,40,.1);

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

	--default:17rem;
    --kr-5xl:70rem;
    --kr-4xl:57rem;
    --kr-3xl:48rem;
    --kr-2xl:35rem;
    --kr-xl: 24rem;
    --kr-lg:22rem;
    --kr-md:20rem;
    
    --en-2xl:70rem;
    
    --space-2xl-:-200rem;
    --space-2xl:200rem;
    --space-xl:164rem;
    --space-lg:130rem;
    --space-default:120rem;
    --space-md:100rem;
    --space-sm: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);

    --wrap:1520rem;
}

/* 국문타이틀 */
[data-font-kr]{font-family: var(--lang-ko);}
[data-font-kr="5xl"]{font-size: var(--kr-5xl); line-height: 1.3; font-weight: 700; } /* h2 */
[data-font-kr="4xl"], [data-font-kr="4xl"] *{font-size: var(--kr-4xl); line-height: 1.29; font-weight: 700;} /* h3 */
[data-font-kr="3xl"]{font-size: var(--kr-3xl); line-height: 1.33; font-weight: 700;} /* h4 */
[data-font-kr="2xl"]{font-size: var(--kr-2xl); line-height: 1.4;font-weight: 700; }
[data-font-kr="xl"], [data-font-kr="xl"] * {font-size: var(--kr-xl); line-height: 1.54; font-weight: 700;}
[data-font-kr="lg"] {font-size: var(--kr-lg); line-height: 1.5; font-weight: 700;}
[data-font-kr="md"] {font-size: var(--kr-md); line-height: 1.6; font-weight: 600;}  /* board-title */
[data-font-kr="sm"] {font-size: var(--default); line-height: 1.65; font-weight: 700;} /* bold */
[data-font-kr="body md"] {font-size: 20rem; line-height: 1.65; font-weight: 400;} /* medium */

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

.caption{font-weight: 700; font-family: var(--lang-en); font-size: 19rem; position: relative; display: inline-flex; align-items: center;}
.caption.no::before{display: none;}
.caption::before{content: ""; width: 8rem; height: 8rem; border-radius: 20rem; background-color: var(--c-01); margin-right: 14rem;}
.caption.op{color: var(--op-w30);}
.caption.w{color: var(--w);}
.caption.gray{color: rgba(159, 169, 187, 0.53);}

.caption-tt{display: inline-flex; align-items: center; justify-content: center; padding: 4rem 13rem; border-radius: 6rem; background-color: var(--bg-surface); font-size: 15rem; line-height: 1.8;} 
.caption-tt.primary{background-color: var(--c-01); color: var(--w); font-weight: 600;}
.caption-tt.dark{background-color: var(--bg-dark); color: var(--w); font-weight: 600;}


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

 [data-bg="1"]{background-color: var(--c-primary) !important;}
 [data-bg="2"]{background-color: var(--bg-default) !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{
      --wrap:1480rem;

      --kr-5xl:65rem;
    }
}
@media (max-width:1480px){

    :root {

         --space-xl:130rem;

         --kr-5xl:60rem;
        --kr-4xl:50rem;
        --kr-3xl:38rem;
        --kr-2xl:26rem;
       
        --kr-lg:22rem;
        --kr-md:20rem;
        
        --en-2xl:60rem;
        
         --space-2xl-:-180rem;
        --space-2xl:180rem;
	}

}


@media all and (max-width:1200px){
	:root {
        --kr-5xl:55rem;
       --kr-4xl:46rem;
        --kr-xl: 22rem;
       --kr-3xl: 34rem;
	}
}

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


        --kr-5xl:50rem;
        --kr-4xl:40rem;
        --kr-md:18rem;
        --en-2xl:50rem;

         --space-2xl-:-160rem;
        --space-2xl:160rem;
        --space-xl:100rem;
        --default:16rem;
	}

    .caption{font-size: 17rem;}
    [data-font-en="md"]{font-size: 20rem;}
}

@media (max-width:860px){

	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
		--kr-5xl: 44rem;
		--kr-4xl: 36rem;
		--kr-3xl: 21rem;
		--kr-xl: 20rem;
		--kr-lg: 16rem;
		--en-2xl:42rem;
		--space-2xl-:-110rem;
		--space-2xl:110rem;
		--space-md:80rem;
		--space-xl:80rem;
	}
}

@media (max-width: 540px){
	:root {
        --kr-md:16rem;
        --kr-5xl: 34rem;
        --kr-4xl: 23rem;
        --kr-2xl: 21rem;
        --en-2xl: 24rem;
        --space-md: 54rem;
        --space-xl:55rem;
        --space-2xl-:-80rem;
        --space-2xl:80rem;
        --kr-xl: 17rem;
        --default:15rem;
 }

    [data-font-en="md"]{font-size: 18rem;}

    .caption-tt{font-size: 12rem;padding: 4rem 10rem;}
    .caption{font-size: 15rem;}
    .caption::before{width: 6rem; height: 6rem; margin-right: 10rem;}
}

/* **************************************** *
 * 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;} /* 빼지마세요 */
 
 @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:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}


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

/* tag common */
p{line-height:1.6; font-weight:300;}

/* button common */
.btn-wrap{display: flex;}
.btn-basic{border:2px solid var(--c-01); transition: var(--trans-01); border-radius: 100rem;  gap: 24rem;  min-width: 168rem; height: 54rem; display: inline-flex !important; align-items: center; justify-content: space-between;}
.btn-basic *{transition: var(--trans-01);}
.btn-basic em{text-transform: uppercase; font-weight: 700; color: var(--c-01);}
.btn-basic svg{width: 7rem; height: 7rem; transform: scale(0);}
.btn-basic svg path{stroke-width: 2;}
.btn-basic span{width: 6rem; height: 6rem; border-radius: 90rem; background-color: var(--c-01); display: flex; align-items: center; justify-content: center;}
.btn-basic.en{padding: 12rem 22rem;}
.btn-basic.en em{font-family: var(--lang-en); font-size: 14rem; }
.btn-basic.kr{padding: 12rem 24rem;}
.btn-basic.kr em{font-family: var(--lang-ko); font-size: 15rem;}
.btn-basic.w{border-color: var(--op-w30);}
.btn-basic.w em{color: var(--w);}
.btn-basic.square{border-radius: 5rem; padding: 16rem;}
.btn-basic.square em{font-size: 15rem; font-weight: 400;}
.btn-basic.primary{background-color: var(--c-01);}
.btn-basic.arrow span{width: 26rem; height: 26rem;}
.btn-basic.arrow svg{transform: scale(1);}
.btn-basic.dark{background-color: var(--c-primary); border-color: var(--c-primary);}
.btn-basic.dark em{color: var(--w);}
.btn-basic.primary span{background-color: var(--w); }
.btn-basic.primary span path{stroke: var(--c-01);}
.btn-basic.download svg{display: none;}
.btn-basic.download span{width: 18rem; height: 16rem; background-color:transparent; background-image: url(../img/common/icon-download.svg); background-repeat: no-repeat; background-size: cover; border-radius: 0; }

.btn-round{ width: 92rem; height: 92rem; border-radius: 100%; background-color: var(--c-01); display: flex; align-items: center; justify-content: center;  }

.scroll-down{position: absolute;right: 80rem;bottom: 0;display: inline-flex;align-items: center;z-index: 10;flex-direction: column; gap: 12rem;}
.scroll-down span{width: 1px; height: 78rem; background-color: var(--op-w30); display: block; position: relative;}
.scroll-down span i{width: 8rem; height: 8rem; background-color: var(--w); border-radius: 30rem; display: block; position: absolute; left: 50%; margin-left: -4rem; animation: drop 1.6s linear 0s infinite; will-change: transform;}
.scroll-down span i::after{content: ""; position: absolute; left: 50%; top: 50%; width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; border-radius: 50%; background-color: var(--op-w80);  animation: ring 1.6s ease-out 0.2s infinite;}

@keyframes drop {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(70rem); opacity: 1; }
}

@keyframes ring {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(5); opacity: 0; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .scroll-down span i { animation: none; }
  .scroll-down span i::after { animation: none; }
}


.comm-tab{align-items: center; gap: 36rem;}
.comm-tab li{color: var(--op-w50); position: relative;}
.comm-tab li.active{color: var(--w);}
.comm-tab li.active::before{content: ""; width: 100%; height: 2px; background-color: var(--w); position: absolute; left: 0; bottom: -7rem;}

.category{display: inline-flex; background-color: var(--c-01); padding: 4rem 16rem; border-radius: 4rem; color: var(--w); font-size: 14rem; font-weight: 600; font-family: var(--lang-en);}
.category.yellow{background-color: var(--c-03);}


/* 팝업 */
body.popup-open{overflow:hidden}

.popup-layer-inner{padding: 24rem 23rem 34rem 23rem; border-radius: 10rem;}
.popup-layer-inner > strong:not(.accordion-custom__tit){color: var(--w); display: block; padding-bottom: 25rem; border-bottom: 1px dashed var(--op-w20); }
.popup-layer-inner .form-wrap{margin-top:27rem;}
.form-input{width:100%;padding:8rem 22rem; height: 54rem; border:1rem solid var(--op-w30);border-radius:6rem; color:var(--op-w50);font-size:16rem; background-color: transparent;}
.form-item{margin-bottom:21rem}
.form-label{display:block;margin-bottom:8rem;font-weight:700;color:var(--w);}
.form-label span{color: var(--c-01);}
.form-wrap{width:100%;max-width:600rem;margin:27rem auto 0;}
.form-wrap .checkmark{border-radius: 3rem;}
.form-wrap .check-box em{color: var(--op-w40);font-size: 16rem;position: relative;font-weight: 500;top: -3rem; font-weight: 300;}
.form-wrap .check-box em i{color: var(--c-01);}
.form-wrap .check-box em a{color: var(--op-w70);}
.form-wrap .btn-wrap{margin-top: 40rem; justify-content: center;}
.form-wrap + .btn-wrap{margin-top: 40rem; justify-content: center;}

.popup-layer-close{top: 20rem; right: 10rem; width: 40rem; height: 40rem; }
.privacy-box{display:none;margin-top:12rem;padding:10rem;border:1rem solid var(--op-w20); resize: none; overflow-y: auto; border-radius:6rem;background:var(--bg-02);max-height:100rem;overflow:auto;font-size:14rem}
.privacy-box *{font-size: 13rem; color: var(--op-w40);}


.main-media__inner{ --wrap-offset: calc((100vw - min(100vw, var(--wrap))) / 2); padding-left: var(--wrap-offset);}
.main-media__track{width: calc(100vw - var(--wrap-offset));}

/* #footer .popup-layer-inner .form-wrap::-webkit-scrollbar {width: 10rem;border-radius: 10rem; overflow: hidden;background-color: var(--op-w10);}
#footer .popup-layer-inner .form-wrap::-webkit-scrollbar-thumb {background-color: var(--c-primary);border-radius: 10rem;  overflow: hideen; }
#footer .popup-layer-inner .form-wrap::-webkit-scrollbar-track{ background-color: rgba(255,255,255,0.03);border-radius: 10rem;overflow: hidden;} */

.footer-popup .popup-layer-inner .form-wrap::-webkit-scrollbar {width: 10rem;border-radius: 10rem; overflow: hidden;background-color: var(--op-w10);}
.footer-popup .popup-layer-inner .form-wrap::-webkit-scrollbar-thumb {background-color: var(--c-primary);border-radius: 10rem;  overflow: hideen; }
.footer-popup .popup-layer-inner .form-wrap::-webkit-scrollbar-track{ background-color: rgba(255,255,255,0.03);border-radius: 10rem;overflow: hidden;}


.footer-popup .popup-layer-inner{border:1px solid var(--c-primary)}
.footer-popup .popup-layer-inner .form-wrap{max-height: 420rem; overflow-y: scroll;}

.footer-popup .form-area > em{color: var(--w); margin-bottom: 4rem;}
.footer-popup .form-area{flex-direction: column; align-items: flex-start; margin-bottom: 21rem;}
.footer-popup .form-area select{background: url(../img/board/arrow-select_w.svg) no-repeat 97% 50% !important;background-size: 12rem !important;}
.footer-popup .form-area input:is([type="text"], [type="password"]){border-radius: 6rem;}
.footer-popup .form-area input:is([type="text"], [type="password"]), 
.footer-popup .form-select select{background-color: transparent; border:1px solid var(--op-w30) !important;height: 54rem; padding: 8rem 22rem; font-size: 15rem;}
.footer-popup .form-area input:is([type="text"], [type="password"]){color: var(--w);}
.footer-popup .form-area input:is([type="text"], [type="password"])::placeholder{font-size: 15rem;}
.footer-popup .form-area textarea{height: 130rem; resize: none; color: var(--w); background-color: transparent; border-radius: 6rem; border:1px solid var(--op-w30); font-size: 15rem; padding: 20rem;}
.footer-popup .form-area textarea::placeholder{font-size:15rem}
.footer-popup .accordion-custom__list *{color: var(--w);}
.footer-popup .accordion-custom__list > li{background-color: var(--op-w10);padding: 20rem 20rem 20rem 50rem;border-radius: 6rem;}
.footer-popup .accordion-custom__list > li > strong::after{background-image:url(../img/sub/ic-lnb-down.svg);width: 20rem;height: 18rem;background-size: cover;transform: translateY(-50%) rotate(180deg) !important;}
.footer-popup .accordion-custom__list > li.on strong::after{transform: translateY(-50%) rotate(0deg)  !important;}
.footer-popup .accordion-custom__cont{margin-top: 10rem; padding-top: 10rem; border-top-color: transparent;}
.footer-popup .accordion-custom__tit{ color: var(--w); font-size: 15rem;}
.footer-popup .privacy-popup__inr > strong{font-size: var(--default);}
.footer-popup .privacy-popup__inr dl dt::before{background-color: var(--op-w50);}
.popup-inquiery .check-box [type="checkbox"]:not(:checked) + .checkmark,
.popup-inquiery .check-box [type="checkbox"]:checked + .checkmark {width: 24rem; height: 24rem; border-radius: 5rem; border-color: var(--bd-03); background: #fff;}
.popup-inquiery .check-box [type="checkbox"]:checked + .checkmark {background: var(--c-01);}
.popup-inquiery .check-box [type="checkbox"]:not(:checked) + .checkmark:after,
.popup-inquiery .check-box [type="checkbox"]:checked + .checkmark:after {top: 4rem; left: 8rem; height: 10rem; border-color: #fff; transform:rotate(45deg); -webkit-transform: rotate(45deg);}
.popup-inquiery .accordion-custom .check-box {z-index: 31; position: absolute; /* left: 20rem; top: 24rem; */}
.popup-inquiery .accordion-custom {position: relative;}
.form-item:last-child{display: flex;}

.footer-popup .form-wrap .check-box input:not([type="radio"]){width: 24rem;height: 24rem;/* top: 24rem;left: 10rem;  */z-index: 10; }
.footer-popup .form-select select{color: var(--w);}

.popup-layer__inquiery{margin-top: 20rem;}

@media (hover: hover) and (pointer: fine){
	
    .btn-basic:not(.download):hover{background-color: var(--c-01);}
    .btn-basic:not(.download):hover svg{transform: scale(1);}
    .btn-basic:not(.download):hover span{background-color: var(--w); width: 26rem; height: 26rem;}
    .btn-basic:not(.w):hover em{color: var(--w);}
    .btn-basic.w:hover{background-color: var(--w);}
    .btn-basic.w:hover em{color: var(--c-primary);}
    .btn-basic.w:hover span{background-color: var(--c-01);}
    .btn-basic.w:hover path{stroke: var(--w);}
    .btn-basic.en:hover{padding: 12rem 12rem 12rem 22rem;}
    .btn-basic.kr:not(.download):hover{padding: 12rem 12rem 12rem 24rem;}
    .btn-basic.download:hover span{background-image: url(../img/common/icon-download.svg);}
    .btn-basic.download:hover{border-color: var(--c-01); background-color: var(--c-01);}
}

@media (max-width:1680px){

    .main-media__inner{padding-left: 60rem;}
}
@media all and (max-width:1200px){
	.btn-round{width: 72rem; height: 72rem;}
    .btn-round svg{width: 14rem; height: 14rem;}
}
@media all and (max-width:1023px){
	
    .scroll-down{right: 40rem;}
    .scroll-down img{width: 10rem;}
    .scroll-down span i{width: 6rem; height: 6rem; margin-left: -3rem;}
    
    .main-media__inner{padding-left: 40rem;}
}

@media (max-width:860px){


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

    .comm-tab{gap: 24rem;}
    .category{padding: 3rem 8rem;font-size: 12rem;}

    .btn-basic{height: 50rem;}
    .btn-basic.square em{font-size: 14rem;}
    .btn-basic.kr{padding: 12rem 16rem 12rem 20rem;}
    .btn-basic.kr em{font-size: 14rem;letter-spacing: -0.6rem;}
    .btn-basic.download{}

    .btn-round{width: 56rem; height: 56rem;}
    .btn-round svg{width: 12rem; height: 12rem;}
    
    .scroll-down{right: 20rem;}
    .scroll-down img{width: 6rem;}
    .scroll-down span{height: 30rem;}
    .scroll-down span i{width: 4rem; height: 4rem; margin-left: -2rem;}

     .main-media__inner{padding-left: 20rem;}

     .footer-popup .popup-layer-inner .form-wrap{max-height: 78vh;}
     .footer-popup .form-wrap .checkmark{top: 23rem !important;}
     .footer-popup .accordion-custom__tit{padding-left: 23rem;}

    .btn-basic.en em {font-size: 12rem;}
    .btn-basic {min-width: 147rem}
}


#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:151rem; height:151rem; background-color:var(--op-b30); color: var(--c-01); border:2px solid var(--c-01);  backdrop-filter: blur(10rem); box-shadow: 0 0 32px 0 rgba(22, 76, 251, 0.50);}
#cursor.overlay .cur_cir::before{content:"DRAG"; /* color: var(--c-01); */}
#cursor.overlay.close .cur_cir{background-color:#db590f;}
#cursor.overlay.close .cur_cir::before{content:"close";} 
#cursor.overlay.close.pointer .cur_cir{opacity:1; width:150rem; height:150rem; background-color:rgba(64, 110, 182, 0.7);}
#cursor.overlay.close.pointer .cur_cir::before{content:"more";}

#cursor.test .cur_cir{position:relative; opacity:1; width:117rem; height:117rem; background-color:#cc3838; transform:rotate(0) scale(1) translate(0, 0) !important;}
#cursor.test .cur_cir::before{content:"더보기"; display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:15px; color:#fff; letter-spacing:-0.03em; transform:translate(-50%, -50%);}

[cursor-type]{cursor: pointer;}

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