@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
*/

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #5EC1D0;
	--c-02: #D7DF21;
	--gr-01: linear-gradient(102deg, rgba(73, 203, 222, 0.19) 40.55%, rgba(216, 218, 0, 0.17) 148.33%);
    --gr-02: linear-gradient(102deg, #49CBDE 40.55%, rgba(216, 218, 0, 0.90) 148.33%);
	--b-01: #222;
	--b-02: #777;
	--b-03: #ccc;
	--f-01: #fff;
    --hover:rgba(238,245,246,1);

	--bg-01: #F6F6F6;
	--bg-02: #424242;	

	--br-01: #e7e7e7;
    --br-02: #E2E2E2;
    --br-03: #eee;
    --br-04: #ddd;

    --g-01: #ccc;

    --bdr-20:max(1.0417vw, 10rem);

	/* 게시판용 root */
	--border-01: #eee;
	
	--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 0.5s ease;
	
	--lang-en:'Jost';
	--lang-ko:"Pretendard";
	
	--font-ko--72:72rem;
    --font-ko--52:52rem;
    --font-ko--32:32rem;
    --font-ko--24:24rem;
    --font-ko--18:18rem;
    --font-ko--17:17rem;
    --font-en--85:85rem;
    --font-en--63:63rem;
    --font-en--30:32rem;
    --font-en--30:30rem;
    --font-en--18:18rem;
    --font-en--17:17rem;
    --font-en--00:20rem;
}
[lang="ko-KR2"]:root,[lang="en-US2"]:root{
	--c-01: #D7DF21;
}
p, [class*="font-ko--"]{font-family: var(--lang-ko); }
 h1,.font-ko--h1{font-size: var(--font-ko--72); line-height: 1.416;  font-weight: 700; color: var(--b-01);}
 h2,.font-ko--h2{font-size: var(--font-ko--52); line-height: 1.326; font-weight: 700; color: var(--b-01); }
 h3,.font-ko--h3{font-size: var(--font-ko--32); line-height: 1.4 ; color: var(--b-01); font-weight: 700; }
 h4,.font-ko--h4{font-size: var(--font-ko--24); line-height: 1.4;  font-weight: 700; }
 p,.font-ko--p{font-size: var(--font-ko--17); line-height: 1.66; font-weight: 300;} 
 .font-ko--b{font-size: var(--font-ko--18); line-height: 1.7; font-weight: 600;}

 [class*="font-en--"]{font-family: var(--lang-en); color: var(--b-01);}
 .cmn-title span, .point-tit{font-size: var(--font-en--00);line-height: 1.6;color: var(--c-01);font-weight: 500;}
 .sub h1,.font-en--h1{font-size: var(--font-en--85); color: var(--b-01); line-height: .87; font-weight: 700;}
 .font-en--h2{font-size: var(--font-en--63); line-height: 1.174;}
 .font-en--h3{font-size: var(--font-en--30); line-height: 1.233; font-weight: 600;}
 .font-en--b{font-size: var(--font-ko--18); line-height: 1.7; font-weight: 600;}


/* 타이틀공통 */
.cmn-title h2{margin-top: 8rem;}


 /* 컬러 기본 셋 */
 [data-color="1"]{color:var(--c-01) !important;}
 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 [data-color="white"],
 [data-color="white"] *{color: var(--f-01);} /* 영역만 글자 흰색 */
 
 /* 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:1480px){
	:root {
        --font-en--85:68rem;
    }
 }

 @media all and (max-width:1200px){
	:root {
        --font-ko--52:48rem;
        --font-ko--32:28rem;
        --font-ko--18:17rem;
    }

}
@media all and (max-width:1023px){
	:root {
		--font-ko--72:56rem;
        --font-ko--52:42rem;
        --font-ko--32:26rem;
        --font-ko--24:22rem;
        --font-ko--18:16rem;
        --font-ko--17:16rem;
        --font-en--85:58rem;
        --font-en--63:48rem;
        --font-en--30:26rem;
        --font-en--18:17rem;
        --font-en--17:16rem;
        --font-en--00:18rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:'Pretendard', -apple-system, BlinkMacSystemFont, Sans-serif;
        --font-en--85:48rem;
        --font-ko--32:24rem;
        --font-en--30:22rem;
        --font-ko--24:20rem;
        --font-en--63:38rem;
        --font-en--00:16rem;
	}
}

@media (max-width: 540px){
	:root {
        --font-ko--72:40rem;
        --font-ko--52:28rem;
        --font-ko--32:20rem;
        --font-en--30:20rem;
        --font-ko--24:18rem;
        --font-ko--18:15rem;
        --font-ko--17:15rem;
        --font-en--85:36rem;
        --font-en--63:30rem;
        --font-en--17:15rem;
        --font-en--00:14rem;
	}
}

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

 .wrap{max-width: 1400rem;}
 .wrap-wide{max-width:1800rem;}
 .wrap-narrow{max-width:1280rem;}
 
 @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:1200px){
    .wrap-narrow{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: 14rem;}
 .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(90deg);}
 .swiper-controls .swiper-button-disabled{opacity: 0.2;}
 
 .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;}
[lang="en-US"] p{line-height:1.5;}
/* button common */
*.btn-basic{display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box;padding: 17rem 29rem;background:var(--c-01);border:1px solid var(--c-01);
    /* min-width:190rem; */transition: var(--trans-01);border-radius: 100rem;gap: 16rem;}
*.btn-basic span{font-weight:600;font-size:14rem; text-transform: uppercase; color:var(--f-01); transition:all .2s;} 
*.btn-basic.white{border-color: var(--f-01); background-color: transparent; }
*.btn-basic.color2{border-color: var(--c-02); background-color: var(--c-02); }
*.btn-basic.v2{background-color: var(--f-01); border-color: var(--f-01);}
*.btn-basic.v2 span{color: var(--c-02);}

.arrow-box{width: 30rem; height: 30rem; border-radius: 100%; background: var(--f-01); display: flex; align-items: center; justify-content: center; border:1px solid  var(--c-01); } 
.arrow-box i svg,.arrow-box  svg{width: 12rem;}

body.color2 .arrow-box{border-color: var(--c-02);}
body.color2 .arrow-box  path{stroke: var(--c-02);}

.btn-text{display: flex; align-items: center; gap: 12rem; transition: all .3s;}
.btn-text div{overflow: hidden; position: relative;}
.btn-text span{font-size: 16rem; font-weight: 600; color: var(--c-01); }
.btn-text i{} 


.line-wrap{width: 100%;height: 100%;/* position: absolute; *//* left: 0; *//* top: 0; */display: flex;align-items: baseline;justify-content: space-between;}
.line-wrap i{width: 1px; height: 100%; display: block; border-right: 1px solid var(--br-03);}



@media (hover: hover) and (pointer: fine){
    .btn-text:hover{gap: 24rem;}
    *.btn-basic:hover{background-color: var(--f-01); border-color: var(--c-01);}
    *.btn-basic:hover span{color: var(--c-01);}
    *.btn-basic.white:hover span{color: var(--c-01) !important;}
    *.btn-basic.color2:hover{background-color: transparent !important;}
    *.btn-basic.color2:hover span{color: var(--c-02) !important;}
    *.btn-basic.color2:hover .arrow-box{background-color: transparent !important;}
}
@media (max-width: 1200px){
    *.btn-basic{padding:13rem 14rem 13rem 20rem}
    /* .line-wrap i:nth-child(2){display: none;} */

}

@media all and (max-width:1023px){
    *.btn-basic{min-width: 170rem;}
}

@media (max-width: 540px){
    .line-wrap i:nth-child(3){display: none;}
    .btn-text span{font-size: 14rem}
	*.btn-basic{padding:10rem 15rem;font-size:14rem;min-width:auto; gap: 24rem; display: inline-flex;}
    *.btn-basic span{font-size: 13rem;}
    .arrow-box{width: 25rem; height: 25rem;}
}