@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:var(--fs-default); color:var(--c-default); font-weight: 300;}
body,input,textarea,button,select{font-family:"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p,li,a{line-height: 1.611;}
@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: 14rem;}
	p {line-height: 1.5;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
    /* 포인트 */
	--c-01: #5466C9;
    --c-primary: #5466C9;
	--c-secondary: #3B4FC1;

    /* title / body */
	--c-title:var(--w);
    --c-default:var(--op-w70);
    --b-01:#222;

	--w: #fff;
	
    --br-default: var(--op-w10);

    --bg-surface:#161522;
	--bg-default: #0A0A12;
    --bg-light-surface:#F3F3F6;    

	--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-title:'Plus Jakarta Sans';
    --lang-en:'Manrope';
    --lang-ko:"Pretendard";
	--lang-body:var(--lang-ko);
    --lang-point:'Roboto Serif';

    /* 폰트사이즈 */
	--fs-default:18rem;
	--fs-5xl:54rem;
    --fs-4xl:52rem;
    --fs-3xl:42rem;
    --fs-2xl:34rem;
    --fs-xl:24rem;
    --fs-lg:22rem;
    
    --space160:160rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80: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);
}

[data-font-heading]{font-weight: 500; color: var(--c-title);}
[data-font-heading="5xl"]{font-size: var(--fs-5xl); line-height: 1.314; font-weight: 600;}
[data-font-heading="4xl"]{font-size:var(--fs-4xl); line-height: 1.384;}
[data-font-heading="3xl"]{font-size:var(--fs-3xl); line-height: 1.428;}
[data-font-heading="2xl"]{font-size:var(--fs-2xl); line-height: 1.46;}
[data-font-heading="xl"]{font-size:var(--fs-xl)}
[data-font-heading="lg"]{font-size:var(--fs-lg);  font-weight: 700;}

.font-en{font-family: var(--lang-en-title);}

/* 라이트 버전 */
[data-ver="light"]{
    --bg-default: #f8f8f8;
    --bg-surface:#F3F3F6;

	--br-default: var(--op-b10);
    --c-title:#222;
    --c-default:#666;
}

[data-ver="dark"]{
    background-color: var(--bg-default);
}
[data-ver="dark"] [data-font-heading]{color: var(--w);}

 /* 컬러 기본 셋 */
 [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);}
[data-radius="24"]{border-radius:max(1.25vw, 12rem);}
[data-radius="30"]{border-radius:max(1.5625vw, 15rem);}

@media (max-width:1600px){
    :root{
      
    }
}
@media (max-width:1480px){
    :root {
       --space160:140rem;
	}
}


@media all and (max-width:1200px){
	:root {
       --fs-5xl:44rem;
       --fs-4xl:40rem;
       --fs-xl:22rem;
       --space160:120rem;

	}
}

@media all and (max-width:1023px){
	:root {
    
         --fs-5xl:38rem;
         --fs-4xl:38rem;
         --fs-3xl:30rem;
         --fs-2xl:26rem;
         --fs-lg:20rem;
         --fs-xl:20rem;
        --space160:100rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
        --fs-4xl:32rem;
        --space160:80rem;
        --fs-3xl:28rem;
        --fs-2xl:23rem;
        --fs-lg:18rem;
         
     
	}
}

@media (max-width: 540px){
    body{word-break: keep-all;}
	:root {

--fs-5xl: 26rem;

--fs-4xl: 25rem;

--fs-3xl:24rem;

--fs-2xl:20rem;

--fs-lg:17rem;

--fs-xl:17rem;

--space160:72rem;
}

    [data-font-heading],
    [data-font-heading="5xl"]{font-weight: 700;}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{width:min(1700rem,90%);margin:0 auto;}
 .wrap-narrow{max-width:1260rem;} /* 빼지마세요 */
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem;	 max-width: none;}
 }
 
 @media all and (max-width:1680px){
    .wrap-narrow,
	 .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;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-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-01);}


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

figure{overflow: hidden; }
figure img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;} 

.point{font-family: var(--lang-point);font-style: italic;}

/* 공통 타이틀 */
.comm-title h3 + *{margin-top: 32rem;}
.comm-title p{font-weight: 300; }
.comm-title p b{font-weight: 600;}

[data-ver="light"] .comm-title h3{color: var(--c-title); font-weight: 600;}
[data-ver="light"] .comm-title p{color: var(--c-default);}


@media all and (max-width:1200px){
	.comm-title h3 + *{margin-top: 24rem;}
}

@media all and (max-width:1023px){
	.comm-title h3 + *{margin-top: 16rem;}
}
/* --------------------------------------------------
   공통 버튼 스타일 (base) + 추가 클래스
   >> op-border, 
-------------------------------------------------- */
/* 
<a href="" class="btn-base">
    <span>view more</span>
    <i class="bar"></i>
    <div>
        <i class="btn-arrow front"></i>
        <i class="btn-arrow back"></i>
    </div>
</a>
*/

.btn-wrap{display: flex; align-items: center;}
.btn-base{min-width: 187rem;height: 60rem;border-radius: 7rem;display: flex;align-items: center;border: 1px solid var(--op-w20); transition: var(--trans-01);}
.btn-base *{transition: var(--trans-01);}
.btn-base span{font-size: 14rem;padding: 0 24rem; text-transform: uppercase; color: var(--w); font-weight: 700;font-family:  var(--lang-en);flex: 1;text-align: center;}
.btn-base > div{width: 60rem;height: 60rem;overflow: hidden;display: flex;max-width: 60rem; position: relative;}
.btn-base > div i{min-width: 60rem;height: 60rem; transform: translateX(-60rem); background-image: url(../img/layout/btn-arrow_w.svg);background-size: 11rem;background-repeat: no-repeat;display: flex;align-items: center;justify-content: center;background-position: 50% 50%;}
.btn-base .bar{display: block; width: 1px; height:12rem; background-color: var(--op-w20) ; display: block;}

.btn-base.op-border{border-color: var(--c-primary); background-color: rgba(84, 102, 201, 0.20);}
.btn-base.c-border{border-color: var(--c-primary);}
.btn-base.c-border span{color: var(--c-primary);}
.btn-base.c-border > div i{background-image: url(../img/layout/btn-arrow_c.svg);}
.btn-base.ko-w span{font-family: var(--lang-ko); font-size: 15rem; font-weight: 600;}
.btn-base.ko-c{background-color: var(--c-primary);}
.btn-base.ko-c span{font-family: var(--lang-ko); font-size: 15rem; font-weight: 600;}

@media (hover: hover) and (pointer: fine){
    .btn-base:hover > div i{transform: translateX(0);}
    .btn-base:not(.ko-w):hover{background-color: var(--c-primary);}
    .btn-base.c-border:hover span{color: var(--w);}
    .btn-base.c-border:hover > div i	{background-image: url(../img/layout/btn-arrow_w.svg);}
    .btn-base.ko-w:hover, .btn-base.ko-w.fill{background-color: var(--w);}
    .btn-base.ko-w:hover span, .btn-base.ko-w.fill span{color: var(--c-primary);}
    .btn-base.ko-w:hover .bar,
 .btn-base.ko-w.fill .bar{background-color: var(--c-primary); opacity: .4;}
    .btn-base.ko-w:hover > div i,
.btn-base.ko-w.fill > div i{background-image: url(../img/layout/btn-arrow_c.svg);}
}

@media (max-width: 540px){
    .btn-base{height: 50rem; min-width: auto;}
    .btn-base span{padding: 0 18rem;font-size: 13rem !important;}
    .btn-base > div i,
    .btn-base > div{width: 48rem; height: 48rem; min-width: 48rem; max-width: 48rem;}
    .btn-base > div i{transform: translateX(-48rem);}
	.btn-base.ko-w span {font-size: 13rem;}

}

.compare-choose{justify-content: center; gap: 30rem; transition: var(--trans-01); align-items: center;}
.compare-choose *{transition: var(--trans-01);}
.compare-choose__part{max-width: 480rem; width: 100%;}
.compare-choose__part em{display: inline-flex;left: 50%;transform: translateX(-50%);position: relative;padding: 10rem 20rem;align-items: center;justify-content: center;font-size: 19rem;color: var(--w);font-weight: 600;border-radius: 90rem;border:1px solid var(--w);margin-bottom: 27rem;}
.compare-hoose__desc,
.compare-choose__box{border-radius: 21rem; border:1px solid var(--op-w10); background-color: var(--op-b20); padding: 44rem;}
.compare-choose__box li{ height: 90rem; border-radius: 10rem; border:1px solid var(--op-w10); padding: 0 32rem; width: 100%; display:flex; justify-content: space-between; align-items: center; position: relative;}
.compare-choose__box li::before{content: "";width: 34rem;height: 32rem;background-image: url(../img/main/ic-compare_w.svg); background-repeat: no-repeat; background-size: cover;position: absolute;left: 50%;transform: translateX(-50%);top: -27rem;z-index: 2;} 
.compare-choose__box li:nth-child(1)::before{display: none;}
.compare-choose__box li *{color: var(--w);}
.compare-choose__box li + li{margin-top: 18rem;}
.compare-choose__box li i{width: 30rem; height: 30rem; display: flex;align-items: center; justify-content: center;}
.compare-choose__box li i svg{max-width: 100%; max-height: 100%;}
.compare-choose__box li strong{font-weight: 500;}
.compare-choose__box li strong span{display: block; font-size: 13rem; line-height: 1.2;}
.compare-choose__part.first li:nth-child(1) img{height: 100%;}
.compare-choose__part.first li:nth-child(1) .no-hover{display: none;}
.compare-choose__part.second li:nth-child(1){background-color: rgba(255,255,255,0.01);}
.compare-choose__part.second li:nth-child(2){background-color: rgba(255,255,255,0.03);}
.compare-choose__part.second li:nth-child(3),
.compare-choose__part.first li:nth-child(2){background-color: rgba(255,255,255,0.07);}
.compare-choose__part.second li:nth-child(4),
.compare-choose__part.first li:nth-child(3){background-color: rgba(255,255,255,0.1);}
.compare-choose__part.second li:nth-child(5),
.compare-choose__part.first li:nth-child(4){background-color: rgba(255,255,255,0.19);}
.compare-choose__part.first li:nth-child(1){border:0;height: auto;text-align: center;position: relative;height: 197rem;}
.compare-choose__part.first li:nth-child(1) span{font-size:13rem; letter-spacing: 7.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.compare-choose__part.first li:nth-child(1) img{display: block;margin: 0 auto;height: 100%;position: absolute;left: 50%;transform: translateX(-50%);}
.compare-choose__part.first li:nth-child(2)::before{display: none;}

.compare-last{background-color: var(--c-primary); position: relative; max-width: 996rem; margin: 60rem auto 0; flex-direction: column; width: 100%; border-radius: 10rem; display: flex; align-items: center; justify-content: center; gap: 7rem; height: 120rem; color: var(--w);}
.compare-last strong{font-size: 21rem; font-weight: 500; text-align: center;}
.compare-last p{font-size: 15rem;text-align: center;}
.compare-last img{position: absolute; left: 50%; transform: translateX(-50%); top: -50rem;}

.compare-choose__area strong{color: var(--w); font-weight: 500;}
.compare-choose__area i svg{width: 42rem; height: 42rem;}

@media (min-width: 1024px){
    .compare-choose__part.active{max-width: 540rem; }
    .compare-choose__part.active .compare-choose__box{background-color: var(--c-secondary);}
    .compare-choose__part.active li{background-color: var(--op-w10) !important; height: 105rem;}
    .compare-choose__part.active.first li:nth-child(1){background-color:transparent !important}
    .compare-choose__part.active.first li:nth-child(1) .no-hover{display: block;}
    .compare-choose__part.active.first li:nth-child(1) .default{display: none;}
    .compare-choose:has(.active) .compare-choose__part:not(.active) li{opacity: .4;}
    .compare-choose:has(.active) .compare-choose__part:not(.active) em{opacity: .4;}
    .compare-choose__part.active .compare-hoose__desc{background-color: rgba(84, 102, 201, 0.20); border-color: var(--c-primary);}
}

@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){

    .compare-last,
	.compare-choose__part em{font-size: 17rem;}
    .compare-hoose__desc strong{font-size: 16rem;}

    .compare-choose__part em{padding: 8rem 16rem 9rem;}
    .rolling-img img{margin: 0 40rem;}

    .compare-hoose__desc, .compare-choose__box{padding: 32rem;}
    
}
@media (max-width:860px){
.compare-last{height: 104rem;}
.compare-last strong{font-size: 17rem;}

.compare-choose{gap: 14rem;}
.compare-hoose__desc, .compare-choose__box{padding: 20rem;}
.compare-choose__box li{padding: 0 20rem;}
}
@media (max-width: 540px){
    .compare-hoose__desc{padding: 30rem; border-radius: 15rem;}

    .compare-last{height: auto; padding: 18rem 0; margin: 26rem auto 0;}
    .compare-last, .compare-choose__part em{font-size: 14rem;}
     .compare-last img{top: -33rem;height: 46rem;}
    .compare-choose__part em{margin-bottom: 15rem;}
    .compare-hoose__desc strong{font-size: 14rem;}
   
    .compare-choose{gap: 40rem;}
    .compare-choose{flex-direction: column;}
    .compare-choose__box li{height: 72rem; padding: 0 16rem;}
    .compare-choose__box li p{font-size: 14rem;}
    .compare-choose__part.first li:nth-child(1){height: 140rem;}

    .compare-hoose__desc, .compare-choose__box{padding: 14rem;}

    .rolling-img img{margin: 0 22rem;}
    .compare-last strong {font-size: 15rem; line-height: 1.3;2026-02-24}
    
}

/* Common */

a.scroll-down{z-index:10;font-weight:500;position:relative;font-size:13rem;line-height:1;color:var(--w);display:flex;flex-direction:column;align-items:center;justify-content:center;}
a.scroll-down i{width:6rem;height:6rem;background-color:#d9d9d9;border-radius:10rem;display:block;opacity:0;transform:translateY(-6rem);animation:scrollDotFall 1.4s ease-in-out infinite;}
a.scroll-down span{width:24rem;height:48rem;border-radius:10rem;border:1px solid var(--br-default);display:flex;justify-content:center;align-items:flex-start;margin-bottom:14rem;padding:4rem 0;overflow:hidden;}

[data-ver="light"] a.scroll-down i{background-color: var(--b-01);}
[data-ver="light"] a.scroll-down {color: var(--c-title);}

@media (prefers-reduced-motion: reduce){
    a.scroll-down i{animation:none;opacity:1;transform:none;}
}

@keyframes scrollDotFall{
    0%{opacity:0;transform:translateY(-6rem);}
    15%{opacity:1;}
    70%{opacity:0;transform:translateY(34rem);}
    100%{opacity:0;transform:translateY(34rem);}
}

.quick { position:fixed; z-index:100; right:53rem; top:87vh; }
.quick__btn { width:83rem; height:83rem; position:relative; background-color:var(--c-primary); display:flex; align-items:center; justify-content:center; border-radius:100%; }
.quick__btn::after { content:""; animation:zomm_out 2s ease 0s infinite; width:100%; height:100%; border-radius:100%; background-color:rgba(84,102,201,0.8); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; }
.quick__txt {position:absolute;right:calc(83rem + 14rem);top:50%;transform:translateY(-50%) translateX(80rem);display:inline-flex;opacity:0;transition:var(--trans-01);font-size:13rem;white-space:nowrap;text-align:right;background-color:var(--op-w10);border-radius:6rem;padding:7rem 12rem;backdrop-filter:blur(44rem);color: var(--op-w70);pointer-events:none;}


@keyframes zomm_out{
    0%{transform: translate(-50%,-50%) scale(.6); opacity: .5;}
    90%, 100%{transform: translate(-50%,-50%) scale(1.2); opacity: 0;}
}

@keyframes zomm_out{
    0%{transform: translate(-50%,-50%) scale(1);o;opacity: .7;}
    90%, 100%{transform: translate(-50%,-50%) scale(1.9);opacity: 0;}
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
.quick.is-open .quick__txt { opacity:1; transform:translateY(-50%) translateX(0); }

}
@media all and (max-width:1023px){
	.quick{top: 84vh;}
}

@media (max-width:860px){

    .quick{top: 89vh;}
    .quick__btn{width: 64rem; height: 64rem;}
}
@media (max-width: 540px){
	a.scroll-down{position: absolute; font-size: 0; right: 0;}
    a.scroll-down span{width: 20rem; height: 34rem; margin-bottom: 8rem;}
    a.scroll-down i{width: 3rem; height: 3rem;}

    .quick{top: inherit; bottom: 30rem; right: 20rem;}
    .quick__btn{width: 50rem; height: 50rem;}
}