@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;}
body{line-height: 1.529; font-weight: 300;}

@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 {

    /* admin setting 용 */
    --c-01: #00A3AD;
	--b-01: #111111;

    /* color */
    --w: #fff;
    --c-primary: #00A3AD;
    --c-title:#111111;
    --c-default:#2F2F2F;

    /* background-color */
	--bg-dark: #111819;
	--bg-gray: #F0F0F0;
    --bg-light: #F2F7F8;
    --bg-primary:#003B48;

    /* border-color */
	--bd-01: #CDD9DA;

	/* 게시판용 root */
	--border-01: #CDD9DA;

	--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-en1:'Poppins';
    --lang-en2:'Inter';
	--lang-ko:"Pretendard";

	--default:17rem;

	--font-80:80rem;
    --font-62:62rem;
    --font-60:60rem;
	--font-54:54rem;
    --font-35:35rem;
	--font-27:27rem;
    --font-24:24rem;
	--font-22:22rem;
    --font-18:18rem;
	--font-17:17rem;
    --font-16:16rem;
    --font-15:15rem;
    --font-13:13rem;
    
    --space200:200rem;
    --space180:180rem;
    --space170:170rem;
    --space160:160rem;
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;

    --bd-radius10:max(0.5208vw, 5rem);;
    --bd-radius20:max(1.0417vw, 10rem);

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

/* 굵기차이는 css로 별도로 작업되었습니다. */
[data-font-heading-ko]{font-family: var(--lang-ko);}
[data-font-heading-ko="5xl"]{font-size: var(--font-80); line-height: 1.0625; font-weight: 600;}
[data-font-heading-ko="4xl"]{font-size: var(--font-62); line-height: 1.338; font-weight: 700;}
[data-font-heading-ko="3xl"]{font-size: var(--font-54); line-height: 1.314; font-weight: 700;}
[data-font-heading-ko="2xl"]{font-size: var(--font-35); line-height: 1.285; font-weight: 700;}
[data-font-heading-ko="xl"]{font-size: var(--font-27); line-height: 1.333; font-weight: 700;}
[data-font-heading-ko="lg"]{font-size: var(--font-24); line-height: 1.375; font-weight: 700;}
[data-font-heading-ko="md"]{font-size: var(--font-18); line-height: 1.44; font-weight: 600;}

[data-font-heading-en]{font-family: var(--lang-en1);}
[data-font-heading-en="3xl"]{font-size: var(--font-60);}
[data-font-heading-en="2xl"]{font-size: var(--font-27);}
[data-font-heading-en="xl"]{font-size: var(--font-24);}
[data-font-heading-en="lg"]{font-size: var(--font-22);}

[class^="en-"]{font-family: var(--lang-en2);}
.ko-small{font-size: 15rem; line-height: 1.68;}
.en-default{line-height: 1.7; }
.en-small{font-size: 15rem; line-height: 1.6; }
.en-xsmall{font-size: 13rem; line-height: 1.846;}

.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 700;}

 /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-primary) !important;}
 [data-color="title"]{color:var(--c-title) !important;}

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

 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid var(--op-b10);}
 [data-radius]{overflow:hidden;}
 [data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

 /* bg */
 [data-bg="dark"] {background: var(--bg-dark);}
 [data-bg="light"] {background: var(--bg-light);}
 [data-bg="gray"] {background: var(--bg-gray);}
 [data-bg="primary"] {background: var(--bg-primary);}
 [data-bg="img"] {background: url(../img/sub/section-bg.jpg) no-repeat center / cover;}


@media (max-width:1600px){
    :root{
      
    }
}
@media (max-width:1480px){
    :root {
       
        --font-80:72rem;
        --font-62:52rem;
        --font-60:50rem;
        --font-54:44rem;
        --font-35:30rem;
        --font-27:24rem;
	}
}


@media all and (max-width:1200px){
	:root {
       --font-80:62rem;
       --font-62:42rem;

         --space180:130rem;
        --space150:110rem;
        --space140:110rem;
        --space130:100rem;
        
	}
}

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

        --font-80:50rem;
        --font-62:36rem;
        --font-60:32rem;
        --font-54:24rem;
        --font-35:24rem;
        --font-27:20rem;
        --font-24:20rem;
        --font-22:18rem;
        --font-18:17rem;
        --font-17:16rem;
        --font-16:15rem;

        --default:16rem;

        --space200:150rem;
        --space180:100rem;
        --space170:100rem;
        --space160:100rem;
        --space150:100rem;
        --space140:100rem;
        --space130:80rem;
        --space120:80rem;
    
	}

    body{word-break: keep-all;}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
     
        --font-80:44rem;
        --font-62:32rem;
        --font-60:30rem;
        --font-54:22rem;
        --font-35:22rem;

        --space180:82rem;
        --space150:82rem;
        --space140:82rem;
        --space130:82rem;
         --space120:54rem;
	}
}

@media (max-width: 540px){
	:root {
        --font-80:36rem;
        --font-62:24rem;
        --font-60:24rem;
        --font-54:22rem;
        --font-35:20rem;
        --font-27:18rem;
        --font-24:18rem;
        --font-18:16rem;
        --font-17:15rem;
        --font-16:14rem;

        --space200:80rem;
        --space180:54rem;
        --space170:54rem;
        --space150:54rem;
        --space140:54rem;
        --space130:54rem;
        --space120:44rem;
        --space80:30rem;
        
	}

    [data-font-heading-ko="5xl"] {line-height: 1.3;}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{max-width:1804rem;}
 .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;}
 *[class^="swiper-btn--"]{backdrop-filter: blur(5rem); -webkit-backdrop-filter: blur(5rem); position:relative;width:50rem;height:50rem;cursor:pointer;display: flex;align-items: center;font-size: 0; font-weight: 600; background: var(--op-b80); border-radius: 100%;}
 *[class^="swiper-btn--"]::after{content:"";display:block;min-width: 50rem;height: 50rem;background:url(../img/layout/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 14rem;}
 .swiper-btn--prev{flex-direction: row-reverse;}
 
 .swiper-btn--next::after{/* transform:rotate(-90deg); */}
 .swiper-btn--prev::after{transform: rotate(180deg);}
 .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);}

 @media (max-width: 540px){
    *[class^="swiper-btn--"] {width: 35rem; height: 35rem;}
    *[class^="swiper-btn--"]::after {min-width: 35rem; height: 35rem; background-size: 12rem;}
 }


/* **************************************** *
 * site custom
 * **************************************** */
figure img{object-fit: cover !important}

/* 공통 타이틀*/
.caption{color: var(--c-primary); display: block;}
.comm-title{}
.comm-title *{display: block;}
.comm-title .caption{font-size: 15rem; line-height: 1.6; font-weight: 600; font-family: var(--lang-en2);}
body.sub .comm-title .caption + *{margin-top: 17rem;}

.line{width: 100%; height: 1px; border-top: 1px solid var(--op-w10); display: block;}

/* 기본: 글자 숨김 + 블러 */
.split-motion .char{display:inline-block; opacity:0; filter:blur(6rem); transform:translateY(0.4rem); transition:opacity .5s ease, filter .6s ease, transform .6s ease; will-change:opacity, filter, transform;}
.split-motion .char.space{width:0.3em; }
.split-motion .char{font-weight: 700;}
.split-motion.is-in .char{opacity:1; filter:blur(0); transform:translateY(0);}

[data-ani="blur"]{opacity:0;filter:blur(6rem);transform:translateY(10rem);transition:all 1.2s ease; /* transition-delay:.1s; */}
[data-ani="blur"].is_moved{opacity:1;filter:blur(0);transform:translateY(0);}


/* button common */
*.btn-default{display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box;padding: 17rem 30rem; height: 58rem; background:var(--w);  min-width:172rem; transition: var(--trans-01);border-radius: 90rem;}
*.btn-default span{font-size: 15rem; font-weight: 500; color: var(--c-title);}
*.btn-default::after{content: ""; margin-left: 30rems; width: 14rem; height: 14rem; display: flex; align-items: center; justify-content: center; background-image: url(../img/layout/arrow-basic_b.svg); background-repeat: no-repeat; background-size: contain;}
*.btn-default *{transition: all .2s ease}
*.btn-default.black{background-color:var(--op-b80); backdrop-filter: blur(2.5rem); }
*.btn-default.black span{color: var(--w);}
*.btn-default.black::after{background-image: url(../img/layout/arrow-basic_w.svg);}

@media (hover: hover) and (pointer: fine){
	*.btn-default:hover{background: var(--c-primary)!important; }
    *.btn-default:hover span{color:#fff;}
    *.btn-default:hover::after{background-image: url(../img/layout/arrow-basic_w.svg);}
}

@media all and (max-width:1023px){
	*.btn-default{padding: 13rem 20rem; height: 52rem; min-width: 152rem;}
}

@media (max-width: 540px){
	*.btn-default{padding:19rem 20rem;font-size:14rem;min-width:160rem;}

    body.sub .comm-title .caption + *{margin-top: 8rem;}
    *.btn-default span{font-size: 14rem;}
}