@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:17rem; color:var(--default); word-break: keep-all; line-height: 1.5;}
body,input,textarea,button,select{font-family:'DM Sans',"Inter Tight", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

@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.5; font-weight: 300;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #2466BD;
	--c-02: #F8C50B;
	--c-03: #072761;
	--default:#3E3F3F;
	--b-01: #121212;
	--b-02: #C3C5C7;
	--g-01: #bcbcbc;
	--br-01: #EDEDED;
	--w: #fff;
	--bg-01: #F6F6F6;
	--br-01: #EDEDED;

	/* 게시판용 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 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;
	--lang-default:'DM Sans';
	--lang-point:"Inter Tight";
	--br-radius:max(2.0833vw, 20rem);
    --br-radius30: max(1.5625vw, 15rem);
    --br-radius40: max(2.0833vw, 20rem);
	--br-radius50: max(2.6042vw, 25rem);
	--br-radius80: max(4.1667vw, 40rem);
	--font-80:80rem;
	--font-60:60rem;
	--font-48:48rem;
	--font-40:40rem;
	--font-28:28rem;
	--font-23:23rem;
	--font-19:19rem;
	--font-18:18rem;
	--font-17:17rem;
	--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);
	--margin:102rem;
}

.font-h1,h1{font-size:var(--font-80); line-height: 1.2; font-weight: 700;}
.font-h2,h2,h2 *{font-size:var(--font-60); line-height: 1.3; font-weight: 700; font-style: italic; font-family: var(--lang-point);}
.font-h3,h3{font-size:var(--font-48); line-height: 1.2; font-weight: 700;}
.font-h4,h4{font-size:var(--font-40); font-weight:700; color:var(--b-01);}
.font-h5,h5{font-size:var(--font-28); font-weight:700; color:var(--b-01);}

.font-defult{font-size: var(--font-17);}
.font-small{font-size: 15rem;}


/* 캡션 */
[data-caption="small"]{font-size: 12rem; font-family: var(--lang-point); font-family: var(--lang-point);}
[data-caption="regular"]{font-size: 14rem; font-weight: 700; font-style: italic; font-family: var(--lang-point);}
[data-caption="button"]{font-size: 16rem;  font-weight: 600;}

 /* 컬러 기본 셋 */
 [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="40"]{border-radius:max(2.0833vw, 20rem);}

@media all and (max-width:1600px){
	 :root {
        --margin:60rem;

        /* font */
        --font-28:25rem;
        --font-48:44rem;
        --font-60:55rem;
	}
}

@media all and (max-width:1480px){
	:root {		
         --font-60:50rem;        
	}
}
@media all and (max-width:1200px){
	:root {		
        --font-40:32rem;
        --font-48:36rem;
        --font-60:40rem;       
	}
}

@media all and (max-width:1023px){
	:root {
         --margin:40rem;

        --font-80:60rem;
        --font-48:30rem;
        --font-40:24rem;
        --font-28:22rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;

        --font-80:50rem;
         --font-28:20rem;
	}
}

@media (max-width: 540px){
	:root {
         --margin:20rem;
        --br-radius50:max(2.0833vw, 15rem);
        --br-radius80:max(2.0833vw, 15rem);

        --font-80:36rem;
        --font-60:28rem;
        --font-48:22rem;
        --font-40:20rem;
        --font-28:18rem;
	}

    [data-caption="regular"]{font-size: 13rem;}
   
}

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

 .wrap{ margin:  0 var(--margin)}
 .wrap-wide{margin: 0 35rem;}
 .wrap-narrow{max-width:1206rem;}
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem;	 max-width: none;}
 }
 
 @media all and (max-width:1600px){
	 /* .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 */


/* button common */
.btn-wrap{display: flex;}
*.btn-default{display:inline-flex!important; gap: 30rem; align-items:center;position:relative;box-sizing:border-box;padding: 18rem 28rem; border:2rem solid var(--c-01); min-width:181rem;transition: var(--trans-01);border-radius: 100rem;}
*.btn-default span{font-size: 16rem; font-weight: 600; text-transform: uppercase;  color: var(--c-01);}
*.btn-default .icon{position: relative;display: inline-flex;height: 15rem;align-items: center;justify-content: center;}
*.btn-default .icon::before{content: ""; transition: all .4s; width: 5rem; min-width: 5rem; min-height: 5rem; height: 5rem;border-radius: 20rem;background-color: var(--w);display: block;display: block;position: absolute;right: 0;top: 50%;transform: translateY(-50%) scale(1);}
*.btn-default .icon svg{clip-path: circle(0% at 50% 50%); transition: all .4s;}
*.btn-default svg path{stroke: var(--c-01);}
*.btn-default .icon::before{background-color: var(--c-01);}
*.btn-default.white{border-color: var(--w);}
*.btn-default.white span{color: var(--w);}
*.btn-default.white .icon svg path{stroke: var(--w);}
*.btn-default.white .icon::before{background-color: var(--w);}

/* c-round-btn */
.c-round-btn{width: 54rem; height: 54rem; border-radius: 100%; border:2rem solid var(--w); display: flex; align-items: center; justify-content: center;}
.c-round-btn,.c-round-btn *{transition: var(--trans-01);}


@media (hover: hover) and (pointer: fine){
	*.btn-default:hover svg{clip-path: circle(100% at 50% 50%)}
    *.btn-default:hover .icon::before{transform: scale(0); right: 10rem;}
    *.btn-default:hover{background-color: var(--c-01);}
    *.btn-default:hover span{color: var(--w);}
      *.btn-default:hover svg path{stroke: var(--w);}
    *.btn-default:hover .icon svg path{stroke: var(--w);}
    *.btn-default.white:hover svg path{stroke: var(--c-01);}

    *.btn-default.white:hover{background-color: var(--w);}
    *.btn-default.white:hover span{color:var(--c-01)}

}

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

    *.btn-default{padding:16rem 26rem ; gap: 20rem; min-width: fit-content;}
    *.btn-default span{font-size: 15rem;}
    *.btn-default .icon svg{width: 13rem; height: 13rem;}

    .c-round-btn{width: 50rem; height: 50rem;}
}

@media (max-width: 860px){

    .c-round-btn{width: 40rem; height: 40rem;}
    .c-round-btn svg{width: 15rem; height: 13rem;}
}


@media (max-width: 540px){
	*.btn-default{padding:12rem 20rem;font-size:14rem;display: flex; gap: 12rem;}
    *.btn-default span{font-size: 13rem;}

    .c-round-btn{width: 30rem; height: 30rem;}
    .c-round-btn svg{width: 11rem; height: 10rem;}

}


.comm-introTitle{padding-left: var(--margin); border-bottom: 1px solid var(--br-01); display: inline-block; padding-bottom: 14rem;}
.comm-introTitle em{color: var(--c-01);}

@media (max-width: 540px){
	.comm-introTitle{padding-bottom: 8rem;}
    
}