@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(--b-01);}
body,input,textarea,button,select{font-family:'Manrope',  "Pretendard", '맑은 고딕', '돋움', 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.6;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #1F4C9C;

	--b-01: #0B1625;
    --b-02: #7d7d7d;
    --b-03: #666666;

	--g-01: #bcbcbc;

	--w: #fff;

	--bg-01: #1F2228;
	--bg-02: #202124;
    --bg-03: #1F2228;
    --bg-04: #F2F6FD;

	--br-01: #E1E6EF;
    --br-02: #262A3A;

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

    --font-52:52rem;
	--font-50:50rem;
	--font-30:30rem;
    --font-40:40rem;
	/* 사용중 */
	--font-28:28rem;
	/* 사용중 */
    --font-22:22rem;
    --font-20:20rem;
	--font-16:16rem;
	--font-14:14rem;
	--en-font-52:52rem;

    --gap150:150rem;
    --gap140:140rem;
    --gap120:140rem;
    --gap80:80rem
}

.font-h1{font-size:var(--font-50);}
.font-h2{font-size:var(--font-30);}
.font-h3{font-size:var(--font-20);}
.font-h4{font-size:var(--font-16);}


 /* 컬러 기본 셋 */
 [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);}

@media all and (max-width:1200px){
	:root {
		--font-52:50rem;
	}
}

@media all and (max-width:1023px){
	:root {
        --font-52:48rem;
        --font-40:30rem;
        --font-28:24rem;
        --gap80:50rem;
              --font-22:20rem;
        --gap120:90rem;
        -gap150:120rem;
	}
}

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

         --font-52:40rem;
         --font-40:20rem;
         --font-28:22rem;
       
         --gap80:30rem;
         --gap120:80rem;
         --gap150:100rem;
	}
}

@media (max-width: 540px){
	:root {
      --font-22:17rem;
        --gap150:64rem;
        --font-52:32rem;
	}
}

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

 .wrap{max-width:1410rem;}
 .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:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}


/* **************************************** *
 * site custom
 * **************************************** */
/* tag common */
p{line-height:1.6; font-weight:300; color: #666666;}

/* button common */
*.btn-basic{display: inline-flex; transition: var(--trans-01); position: relative; overflow: hidden;}
*.btn-basic::before{content: ''; width: 0; height: 100%;  background-color: var(--b-01); left: 0; position: absolute; transition: var(--trans-01); }

*.btn-basic > *{ border:1px solid var(--b-01); height: 57rem; display: flex; align-items: center; justify-content: center; transition: var(--trans-01);}
*.btn-basic .arrow-part{width: 57rem; position: relative; overflow: hidden;}
*.btn-basic .arrow-part > div{display: flex;white-space: nowrap;position: absolute;width: 200%;height: 100%;left: -100%; transition: all .4s;}
*.btn-basic .arrow-part i{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
/* *.btn-basic .arrow-part i:nth-child(1){background-color: var(--b-01);} */
*.btn-basic > *:nth-child(1):not(.arrow-part){width: 156rem; font-size: 14rem; font-family: var(--lang-en1); font-weight: 700; text-align: center; position: relative; overflow: hidden;}
*.btn-basic > *:nth-child(1):not(.arrow-part) span{color: var(--b-01); transition: all .3s;}
*.btn-basic > * + *{margin-left: -1px;}
*.btn-basic > * + .arrow-part > div{transition-delay: .1s;}
*.btn-basic.white-ver > *{border-color: var(--w);}
*.btn-basic.white-ver > *:nth-child(1):not(.arrow-part){color: var(--w);}
*.btn-basic.white-ver::before{background-color: var(--w);}
*.btn-basic.download-ver .arrow-part{transform: rotate(90deg);}


@media (hover: hover) and (pointer: fine){

	*.btn-basic:hover::before{width: 100%;}
    *.btn-basic:hover > *:nth-child(1):not(.arrow-part){color: var(--w);}
    *.btn-basic:not(.download-ver):hover > * + *{border-left-color: var(--w);}
    *.btn-basic:hover .arrow-part > div{left: 0;}
    *.btn-basic.white-ver:hover > * + *{border-left-color: var(--b-01);}
    *.btn-basic.white-ver:hover > *:nth-child(1):not(.arrow-part){color: var(--b-01);}
    *.btn-basic.download-ver:hover > * + *{border-bottom-color: var(--w);}
    *.btn-basic.download-ver.white-ver:hover  > * + *{border-bottom-color: var(--b-01); border-left-color: var(--w);}
}

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

@media (max-width: 540px){
	*.btn-basic{font-size:14rem;display: flex;}
    *.btn-basic > *{height: 52rem;}
    *.btn-basic .arrow-part{width: 52rem;}
    *.btn-basic > *:nth-child(1):not(.arrow-part){flex: 1; width: auto;}
}