@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:28rem;color: var(--b-default);font-weight: 300;word-break: keep-all;}
body,input,textarea,button,select{font-family:'Montserrat',"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
P{font-family:var(--lang-ko);}
p{line-height:1.65; color:rgba(255,255,255,0.8); font-weight:200;}
@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: #14b8ea;

    /* title / body */
	--b-title:#131927;
	--b-default:#666;

	/* 게시판 세팅용/절대지우지마세요*/
	--b-01:var(--b-title);
	--border-01: #eee;

	--w: #fff;

	/* background-color */
	--bg-default: #212027;
    --bg-surface:#0D223A;

	/* border */
	--br-default: #E1E1E1;
    --br-light:rgba(255,255,255,0.05);

	 /* 폰트 사용 */
	--lang-en:'Montserrat';
	--lang-ko:"Pretendard";
    --caption:'Oswald';

	/* 폰트사이즈 */
	--default:17rem;
	--font-155:155rem;
	--font-53:53rem;
	--font-48:48rem;
	--font-32:32rem;
	--font-27:27rem;
	--font-22:22rem;
	--font-19:19rem;
	--font-13:13rem;

	/* 간격 */
    --space150:150rem;
    --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);


	/* 메인비주얼 */
	--progress-duration: 3100ms;

	/* 트렌지션 */
	--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;
}

[data-heading]{font-family:var(--lang-ko); color:var(--b-title);}
[data-heading="5xl"]{font-size:var(--font-53); line-height:1.3; font-weight:600;}
[data-heading="4xl"]{font-size:var(--font-48); line-height:1.5; font-weight:700;}
[data-heading="3xl"]{font-size:var(--font-32); line-height:1.5; font-weight:700;}
[data-heading="2xl"]{font-size:var(--font-27); line-height:1.4; font-weight:700;}
[data-heading="xl"]{font-size:var(--font-22); line-height:1.45; font-weight:600;}
[data-heading="lg"]{font-size:var(--font-19); line-height:1.68; font-weight:600;}
[data-heading="en-4xl"]{font-family:var(--lang-en); font-size:var(--font-155); line-height:1; font-weight:700;}
[data-text="caption"]{font-size:var(--font-13); line-height:1.54; font-weight: 600;}

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

.c-white{color: var(--w);}

@media (max-width:1600px){
    :root{
        --font-155:130rem;
        --font-53:50rem;
        --font-48:46rem;
        --space150:140rem;
        --space140:130rem;
        --space130:120rem;
        --space120:110rem;
        --space110:100rem;
        --space100:90rem;
        --space80:74rem;
    }
}
@media (max-width:1480px){
    :root {
        --font-155:120rem;
        --font-53:46rem;
        --font-48:42rem;
        --font-32:30rem;
        --space150:130rem;
        --space140:120rem;
        --space130:110rem;
        --space120:100rem;
        --space110:90rem;
        --space100:80rem;
        --space80:68rem;
	}
}


@media all and (max-width:1200px){
	:root {
        --font-155:100rem;
        --font-53:42rem;
        --font-48:38rem;
        --font-32:28rem;
        --font-27:24rem;
        --font-19:18rem;
        --space150:120rem;
        --space140:110rem;
        --space130:100rem;
        --space120:90rem;
        --space110:80rem;
        --space100:70rem;
        --space80:60rem;
	}
}

@media all and (max-width:1023px){
	:root {
        --font-155:80rem;
        --font-53:38rem;
        --font-48:34rem;
        --font-32:26rem;
        --font-27:22rem;
        --font-22:20rem;
        --font-19:17rem;
        --default:16rem;

        --space150:100rem;
        --space140:90rem;
        --space130:80rem;
        --space120:70rem;
        --space110:60rem;
        --space100:60rem;
        --space80:50rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
        --font-155:60rem;
        --font-53:32rem;
        --font-48:28rem;
        --font-32:24rem;
        --font-27:20rem;
        --font-22:18rem;
        --font-19:17rem;

        --space150:80rem;
        --space140:70rem;
        --space130:60rem;
        --space120:60rem;
        --space110:50rem;
        --space100:50rem;
        --space80:44rem;
	}
}

@media (max-width: 540px){
	
	:root {
        --font-155:44rem;
        --font-53:25rem;
        --font-48:24rem;
        --font-32:22rem;
        --font-27:18rem;
        --font-22:17rem;
        --font-19:16rem;
        --default:15rem;

        --space150:60rem;
        --space140:56rem;
        --space130:50rem;
        --space120:50rem;
        --space110:44rem;
        --space100:40rem;
        --space80:36rem;
	}
    [data-heading="5xl"]{font-weight: 700;}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1400rem;}
 .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: #b7b7b7;border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}
 .swiper-pagination-bullet-active {opacity: 1;	background: var(--c-primary);}



/* ==============================
   공통 — 섹션 워터마크
============================== */
.comm-watermark--wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0;width: 100%;}
.comm-watermark{position:absolute;top: -34rem;gap: 100rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;font-family:var(--lang-en);font-size:190rem;font-weight:800;line-height:1;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg, rgb(35 58 78 / 40%) 6.47%, rgb(7 17 26 / 70%) 131.47%);white-space:nowrap;}

/* ==============================
   공통 컴포넌트
============================== */
/* 다크 배경 공통 */
.dark-bg,body{ background-image: url(../img/common/texture.svg); background-repeat: repeat; background-color:#07111a;}


/* sec-caption — 섹션 소제목 레이블 (파란 점 + 대문자 영문) */
.sec-caption{position:relative;display:inline-flex;align-items:center;padding-left:16rem;font-family:var(--lang-en);font-size:14rem;font-weight:600;color: #fff;letter-spacing:0.5rem;text-transform:uppercase;line-height:28rem;}
.sec-caption::before{content:"";position:absolute;left:0;top: 2rem;/* transform:translateY(-50%); */width:6rem;height:6rem;background:var(--c-primary);}
.sec-caption.is-dark{color:var(--op-b80);}

/* comm-title — sec-caption + heading 공통 래퍼 */
.comm-title{display:flex; flex-direction:column; gap:12rem;}
.comm-title.is-center{align-items:center; text-align:center;}

/* btn-basic — MORE VIEW 버튼 */
*.btn-basic{display:inline-flex;justify-content:space-between;align-items:center;width:180rem;height:54rem;padding: 13rem 15rem 13rem 26rem;background:var(--c-primary);border:1px solid var(--c-primary);font-family:var(--lang-en);font-weight:600;font-size:12rem;letter-spacing:0.5rem;text-transform:uppercase;color:var(--w);border-radius:6rem;transition:var(--trans-01); position: relative; overflow: hidden; }
/* *.btn-basic::after{content:""; display:block; width:30rem; height:12rem; min-width:30rem; background-image:url(../img/common/arr-btn_w.svg); background-repeat:no-repeat; background-size:contain; background-position:50% 50%;} */
*.btn-basic.is-white{background:#fff; color:var(--c-primary);}
*.btn-basic.is-border{background:transparent; color:var(--c-primary);}
*.btn-basic.is-white::after,
*.btn-basic.is-border::after{background-image:url(../img/common/arr-btn_p.svg);}

*.btn-basic .arrow-wrap{width: 22rem;height: 22rem;position: relative;/* overflow: hidden; */flex-shrink: 0;/* margin-left: 16rem; */z-index: 2;}
*.btn-basic .arrow-wrap::before{content: '';width: 1px;height: 12rem;background-color: var(--op-w40);position: absolute;left: -15px;top: 5rem;}
*.btn-basic .arrow-wrap > span{position: absolute;width:100%;height: 100%;left: 0;display: flex;align-items: center;justify-content: center;top: 0;}
*.btn-basic .arrow-wrap img{width: auto; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);}
*.btn-basic .arr-a {transform: translateX(0);opacity: 1; transition: transform 0.28s ease-in, opacity 0.28s ease-in;}
*.btn-basic .arr-b {transform: translateX(-30%);opacity: 0; transition: transform 0.28s ease-out 0.2s, opacity 0.28s ease-out 0.2s;}

@media (hover: hover) and (pointer: fine){
    *.btn-basic:hover .arr-a{transform:translateX(30%); opacity:0;}
    *.btn-basic:hover .arr-b{transform:translateX(0); opacity:1;}

    /* default btn-basic hover → border 스타일 */
    *.btn-basic:not(.is-border):hover{background:transparent; color:var(--c-primary);}
    *.btn-basic:not(.is-border):hover .arrow-wrap::before{background-color:var(--c-primary);}
    *.btn-basic:not(.is-border):hover .arrow-wrap img{filter:brightness(0) saturate(100%) invert(58%) sepia(71%) saturate(710%) hue-rotate(163deg) brightness(102%) contrast(90%);}

    /* is-border hover → filled 스타일 */
    *.btn-basic.is-border:hover{background:var(--c-primary); color:var(--w);}
    *.btn-basic.is-border:hover .arrow-wrap::before{background-color:var(--op-w40);}
    *.btn-basic.is-border:hover .arrow-wrap img{filter:none;}
}
.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(246, 254, 255, 0.735);
    transform: scale(0);
    animation: ripple-out 0.6s linear;
    pointer-events: none;
  }
  @keyframes ripple-out {
    to { transform: scale(4); opacity: 0; }
  }



@media (max-width:1023px){
    .comm-watermark{font-size:170rem}
    .comm-watermark > *:not(:nth-child(2)){display: none;}
}
@media (max-width:860px){
    *.btn-basic{width:165rem; height:50rem; padding:12rem 14rem 12rem 22rem;}
}

@media (max-width:540px){

    .comm-watermark{font-size:120rem; top: -24rem;}

    .comm-title{gap: 8rem;}


    .sec-caption{font-size: 12rem; letter-spacing: -0.8rem; padding-left: 12rem;}
    .sec-caption::before{width: 5rem; height: 5rem; top: 5rem;}

    *.btn-basic{width:154rem; height:46rem; font-size:11rem; padding:10rem 12rem 10rem 20rem;}
}

/* ==============================
   main-contact
============================== */
.main-contact{position: relative; overflow: visible !important;}
.main-contact--box{text-align: center;z-index: 2;height: 430rem;background: rgba(20, 26, 39, 0.40);backdrop-filter: blur(22rem);border-top: 1px solid var(--br-light);display: flex;align-items: center;justify-content: center;position: relative;}
.main-contact--box .wrap{display: flex; flex-direction: column; gap: 42rem; align-items: center; justify-content: center;}
.main-contact__logo{position:absolute;left:50%;top: -81rem;transform:translateX(-50%);width:135rem;height:135rem;z-index:2;display:block;animation:logo-float 3.6s ease-in-out infinite;}
.main-contact__logo::after{content:""; position:absolute; left:50%; bottom:-20rem; transform:translateX(-50%); width:220rem; height:60rem; background:radial-gradient(ellipse at center, rgba(20,184,234,0.4) 0%, transparent 70%); filter:blur(15rem); pointer-events:none;animation:logo-shadow 3.6s ease-in-out infinite;}

@keyframes logo-float{
    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(-16rem);}
}
@keyframes logo-shadow{
    0%,100%{transform:translateX(-50%) scaleX(1);opacity:1;}
    50%{transform:translateX(-50%) scaleX(0.65);opacity:0.45;}
}
.main-contact__logo img{width:100%; height:100%; display:block;}
.main-contact__panel{height:430rem; background:rgba(20,26,39,0.4); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); margin-top:299rem;}

.comm-ling-bg{position: absolute;max-width: 1700rem;height: 100%;width: 100%;left: 50%;transform: translateX(-50%);z-index: -1; top: 0;display: flex;justify-content: space-between;}
.comm-ling-bg i{display: block; width: 1rem; height: 100%; background: var(--br-light)}

@media (max-width:1200px){
	/* main-contact */
	.main-contact--box{height:380rem;}
}

@media (max-width:1023px){
	/* main-contact */
	.main-contact--box{height:340rem;}
	.main-contact--box .wrap{gap:30rem;}
	.main-contact__logo{top:-70rem; width:100rem; height:100rem;}
	.main-contact__panel{margin-top:240rem;}
}

@media (max-width:860px){
	/* main-contact */
	.main-contact--box{height:300rem;}
	.main-contact--box .wrap{gap:24rem;}
	.main-contact__logo{top:-65rem; }
    .comm-ling-bg > i:nth-child(1),
    .comm-ling-bg > i:nth-child(3){display: none;}
}

@media (max-width:540px){
	/* main-contact */
	.main-contact--box{height:286rem;}
	.main-contact--box .wrap{gap:20rem;}
	.main-contact__logo{width:80rem; height:80rem; top:-43rem;}
	.main-contact__panel{height:360rem; margin-top:220rem;}
}