@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:#444;}
body,input,textarea,button,select{font-family:'Tektur',"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: #17A6F0;
	--c-02: #2848a6;

	--b-01: #111;
	--b-02: #eee;
	--b-03: #aaa;

	--w: #fff;

	--g-01: #bcbcbc;

	--f-01: #fff;

	--bg-01: #bcbcbc;
	--bg-02: #666;

	--br-01: #ddd;

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

	--font-85:85rem;
	--font-70:70rem;
	--font-60:60rem;
	--font-55:55rem;
	--font-54:50rem;
	--font-52:52rem;
	--font-50:50rem;
	--font-45:45rem;
	--font-40:40rem;
	--font-30:30rem;
	--font-27:27rem;
	--font-22:22rem;
	--font-21:21rem;
	--font-20:20rem;
	--font-18:18rem;
	--font-17:17rem;
	--font-16:16rem;
	--font-15:15rem;
	--font-14:14rem;
	--en-font-52:52rem;
}

.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(--f-01);} /* 영역만 글자 흰색 */

 [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-40:35rem;
	}
}


@media all and (max-width:1023px){
	:root {
		--font-85:75rem;
		--font-70:60rem;
		--font-65:55rem;
		--font-60:50rem;
		--font-55:49rem;
		--font-54:48rem;
		--font-52:45rem;
		--font-48:40rem;
		--font-45:38rem;	
		--font-43:35rem;
		--font-30:27rem;
		--font-27:25rem;
		--font-22:22rem;
		--font-20:18rem;
		--font-19:17rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
		--font-85:65rem;
		--font-70:55rem;
		--font-65:50rem;
		--font-60:48rem;
		--font-55:38rem;
		--font-54:45rem;
		--font-52:40rem;
		--font-48:35rem;
		--font-45:35rem;
		--font-43:30rem;
		--font-40:28rem;
		--font-30:24rem;
		--font-27:22rem;
		--font-22:20rem;
		--font-20:17rem;
		--font-19:16rem;
		--font-17:16rem;
		--font-18:15rem;
	}
}
@media (max-width: 540px){
	:root {
		--font-85:35rem;
		--font-70:25rem;
		--font-65:27rem;
		--font-60:25rem;
		--font-55:21rem;
		--font-54:20rem;
		--font-52:32rem;
		--font-48:30rem;
		--font-45:25rem;
		--font-43:27rem;
		--font-40:20rem;
		--font-34:25rem;
		--font-30:20rem;
		--font-27:18rem;
		--font-22:17rem;
		--font-21:14rem;
		--font-20:14rem;
		--font-19:14rem;
		--font-18:13rem;
		--font-17:12rem;
		--font-16:12rem;
		--font-15:11rem;
		--br-30: 15rem;
	}
}


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

 .wrap{max-width:1520rem;}
 .wrap-wide{max-width:1800rem;}
 .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;}

/* button common */
*.btn-basic {overflow: hidden; display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box; min-width:198rem; padding: 8rem; padding-left:22rem; background: linear-gradient(94deg, #01A2F5 -5.17%, #47C0FF 98.65%), #17A6F0; box-shadow: 0 5px 25px 0 rgba(2, 17, 25, 0.05); backdrop-filter: blur(10px); color:var(--w); transition: var(--trans-01); border-radius:8rem;}
*.btn-basic span {z-index: 1; position: relative; font-weight: 600; font-size:var(--font-15); transition: var(--trans-01);}
*.btn-basic .btn-arr{position:relative; display:flex; align-items:center; justify-content:center; width: 44rem; height:44rem; background-position:50% 50%; background-color: var(--w); border-radius:6rem; transition: .3s; overflow:hidden; }
*.btn-basic .btn-arr:before{content:""; position:absolute; top:50%; left:50%; width:5rem; height:5rem; background:var(--c-01); transform:translate(-50%, -50%); border-radius:6rem; transition: all 0.6s; opacity:0;}
*.btn-basic i{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
*.btn-basic i:before{content:""; display: inline-block; position:absolute; height: 11rem; width: 14rem; background-image:url(../img/layout/arrow-basic.svg); background-repeat:no-repeat; background-size:contain; }
*.btn-basic i:after{content:""; display: inline-block; position:absolute; height: 11rem; width: 14rem; background-image:url(../img/layout/arrow-basic_w.svg); background-repeat:no-repeat; background-size:contain; opacity:0; transform:translateX(-50rem); transition:all 0.6s ease;}
/**.btn-basic::after {z-index: 1; content:"";display:block; width: 44rem; height:44rem; background-position:50% 50%; background-color: var(--w); background-image:url(../img/layout/arrow-basic.svg); background-repeat:no-repeat; background-size:14rem; border-radius:6rem; transition: .3s;}
*.btn-basic::before {opacity: 0; visibility: hidden; position: absolute; right: 8rem; top: 8rem; content: ''; width: 44rem; height: 44rem; border-radius:6rem; background-color: var(--c-01);}
*/
*.btn-basic.white {border:1px solid rgba(255, 255, 255, 0.10); background:rgba(255, 255, 255, 0.10);}
*.btn-basic.white span {color: var(--w);}
*.btn-basic.white i:before{background-image:url(../img/layout/arrow-basic_b.svg); background-repeat:no-repeat; background-size:contain; }

*.btn-basic.gray{background:#eee; border: 1px solid #eee;}
*.btn-basic.gray span {color:#333;}
*.btn-basic.gray i:before{background-image:url(../img/layout/arrow-basic_b.svg); background-repeat:no-repeat; background-size:contain; }

/*
*.btn-basic.white::after {background-color: var(--w); background-image: url(../img/layout/arrow-basic_c.svg);}
*.btn-basic.white::before {background-color: var(--w);}
*/

*.btn-basic.black {border-color: var(--b-01);background: transparent;}
*.btn-basic.black span {color: var(--b-01);}
*.btn-basic.black::after {background-color: var(--b-01);background-image: url(../img/layout/arrow-basic_w.svg);}
*.btn-basic.black::before {background-color: var(--b-01);}

*.btn-basic.line{border: 1px solid #fff;}

*.btn-arrow {display: block; width: 60rem; height: 60rem; border-radius: 100%; background-color: #ddd; background-image: url(../img/layout/arrow-basic_w.svg); background-repeat: no-repeat; background-position: center center; background-size: 12rem; transition: var(--trans-01);}
*.btn-basic[download]::after{background-image: url(../img/layout/ic-download_w.svg); background-size: 18rem;}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover{background:#fff;}
	*.btn-basic:hover::before {opacity: 1; visibility: visible; transform: scale(10); transition: .6s ease-in-out;}
	/**.btn-basic:hover::after {transform: rotate(45deg);}*/
	*.btn-basic:hover span {color: var(--c-01);}
	*.btn-basic:hover .btn-arr:before{width:120%; height:120%; opacity:1;}
	*.btn-basic:hover i:before{opacity:0;}
	*.btn-basic:hover i:after{ height: 11rem; width: 14rem; opacity:1; transform:translateX(0rem);}

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

	*.btn-arrow:hover {background-color: var(--c-01); background-image: url(../img/layout/arrow-basic_w.svg);}
	*.btn-basic[download]:hover::after{transform: rotate(0deg);}

	*.btn-basic.line:hover,
	*.btn-basic.gray:hover{border: 1px solid var(--c-01);}
}

@media all and (max-width:1023px){
	*.btn-arrow {width: 55rem; height: 55rem;}
}

@media (max-width: 540px){
	*.btn-basic{padding:6rem 14rem; padding-right:5rem; min-width:140rem; border-radius:5rem;}
	*.btn-basic::after {width: 40rem; height: 40rem; background-size: 10rem;}
	*.btn-basic span {font-size: 13rem;}
	*.btn-basic .btn-arr{width:30rem; height:30rem; border-radius:4rem;}
	*.btn-basic i:before,
	*.btn-basic i:after,
	*.btn-basic:hover i:after{width:10rem; height:9rem;}
}