@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(--c-title)}
body,input,textarea,button,select{font-family:'Montserrat',"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p,li{line-height: 1.58;}

@media (max-width:1023px){
	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-01: #4865AF;;
    --c-primary:#4865AF;
    --c-dark:#151618;

    --c-title:#151618;
    --c-default:#666666;

    /* title / body */
	--b-01: #151618;

	--w: #fff;

	--bg-dark: #0A1835;
	--bg-default: #F4F4F4;

	--br-01: #E1E1E1;

	/* 게시판용 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-en:'Montserrat';
    --lang-en2:'Manrope';
	--lang-ko:"Pretendard";
    --lang-title:'Wooridaum';

	--default:17rem;

	--font-75:75rem;
    --font-56:56rem;
	--font-28:28rem;
    --font-22:22rem;
	--font-20:20rem;
    --font-17:17rem;
	--font-16:16rem;
    --font-15:15rem;
	--font-14:14rem;
    
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;
    --space-mob:54rem;

    --maian-margin:clamp(120rem, 9.95vw, 191rem);
    
    --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-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-heading-ko]{ font-weight: 700;}
 [data-heading-ko="3xl"]{font-size: 53rem; line-height: 1.547; font-family: var(--lang-title);}
 [data-heading-ko="2xl"]{font-size: 36rem; font-family: var(--lang-title); line-height: 1.44;}
 [data-heading-ko="xl"]{font-size: 26rem; font-family: var(--lang-title); line-height: 1.615;}
 [data-heading-ko="lg"]{font-size: 20rem; line-height: 1.5;}
 [data-heading-ko="md"]{font-size: 18rem; line-height: 1.6111;}

 [data-body-ko="medium"]{font-weight: 500; line-height: 1.7;}
 [data-body-ko="bold"]{font-weight: 700;  line-height: 1.7}
 [data-body-ko="small"]{font-size: 15rem; line-height: 1.466; }
 [data-body-en="small"]{font-weight: 700; font-size: 13rem; font-family: var(--lang-en);}


@media (max-width:1600px){
    :root{
      --maian-margin:120rem
    }
}
@media (max-width:1480px){
    :root {
       --maian-margin:100rem
	}

    [data-heading-ko="3xl"]{font-size: 46rem;}
    [data-heading-ko="2xl"]{font-size: 34rem;}
}


@media all and (max-width:1200px){
	:root {
        --maian-margin:80rem
	}
     /* [data-heading-ko="3xl"]{font-size: 36rem;} */
}

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

    [data-heading-ko="3xl"]{font-size: 36rem;}
    [data-heading-ko="2xl"]{font-size: 28rem;}
    [data-heading-ko="xl"] {font-size: 23rem;}
    [data-heading-ko="md"]{font-size: 16rem;}
}

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

         --maian-margin:40rem;
         --space100:80rem;
	}

    [data-heading-ko="lg"]{font-size: 18rem;}
}

@media (max-width: 540px){
	:root {

        --maian-margin:20rem;
        --space120:76rem;
        --space100:54rem;
	}

    [data-heading-ko="3xl"]{font-size: 27rem;}
    [data-heading-ko="2xl"]{font-size: 20rem;}
    [data-heading-ko="xl"]{font-size: 18rem;}
    [data-heading-ko="lg"]{font-size: 17rem;}
    [data-body-ko="medium"]{line-height: 1.5;}
}

/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{position:relative;margin:0 auto;}
 .inner{margin:0 var(--maian-margin);}
 .wrap{max-width:1520rem;}
 .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-01);}


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

p{color: var(--c-default);}

/* button common */
*.btn-default{display:inline-flex;justify-content:center;  align-items:center; 
    text-transform: uppercase; position:relative;box-sizing:border-box;
    padding: 23rem 26rem; min-width: 180rem; border:1px solid var(--c-primary); 
    color: var(--c-primary); background-color:transparent;transition: var(--trans-01);
    border-radius: 5rem; font-size: 13rem; font-weight: 700;}
*.btn-default.w-border{border:1px solid var(--op-w40); color: var(--w);}
*.btn-default.ko-size{font-size: 15rem;}

*.arrow{width: 40rem; height: 40rem; border-radius: 5rem; border:1px solid var(--op-w20); transition: all .5s ease; display: flex; align-items: center; justify-content: center;}
*.arrow *{transition: all .5s ease; }
*.arrow.big{width: 50rem; height: 50rem;}

.caption{ font-weight: 500; display: inline-block;}
.caption.ver02{color: var(--c-01); font-size: 13rem; font-weight: 700; margin-bottom: 12rem;}
.caption:not(.ver02){ border-radius: 5rem; font-size: 14rem; background-color: var(--c-primary); padding: 6rem 10rem;   color: var(--w);}

@media (hover: hover) and (pointer: fine){
    *.btn-default:not(.w-border):hover{background-color: var(--c-01); color: var(--w);}
	*.btn-default.w-border:hover{border:2px solid var(--w); box-shadow: 0 0 14rem 0 #FFFAFA;}
    *.arrow:hover{border-color: var(--w);  box-shadow: 0 0 12rem 0 var(--op-w60);}
    *.arrow:hover svg path{ stroke-opacity: 1; }
}

@media all and (max-width:1023px){
	.arrow.big{width: 40rem; height: 40rem;}
    .arrow.big svg{width: 12rem;}
    
}
@media (max-width:860px){
    .caption{font-size: 13rem;}    
}
@media (max-width: 540px){
	*.btn-default{padding:16rem 20rem;font-size:14rem;min-width:160rem;}
    *.btn-default.ko-size{font-size: 14rem;}


    .arrow,.arrow.big{width: 30rem; height: 32rem;}
    .arrow svg,.arrow.big svg{width: 10rem;}
    
    .caption:not(.ver02){padding: 3rem 9rem 4rem;}
    .caption{}
    .caption:not(.ver02){font-size: 13rem;}
}