@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(--b-default); font-weight: 300; word-break: keep-all; line-height: 1.5;}
body,input,textarea,button,select{font-family:"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-primary: #21344D;
	--c-secondary: #277E3A; 	

    /* title / body */
	--b-01: #222222;
	--b-02: #666666;
	--b-03: #999999;
	--b-title:#111111;
	--b-default:#555;

	--w: #fff;

	/* background-color */
	--bg-default: #F0F0F0;
	--bg-dark: #050D17;
	--bg-light: #F8F9FB;

	 /* 폰트 사용 */
	--lang-en-heading:"Amiri";
	--lang-en-body:"Abhaya Libre";
	--lang-ko:"Pretendard";

	/* 폰트사이즈 */
	--default:17rem;

	--font-155:155rem;
	--font-54:54rem;
	--font-52:52rem;
    --font-42:42rem;
    --font-32:32rem;
    --font-27:27rem;
    --font-24:24rem;
    --font-19:19rem;
    --font-18:18rem;
	--font-17:17rem;
    --font-16:16rem;
    --font-15:15rem;
    --font-14:14rem;

	/* 간격 */    
	--space180:180rem;
	--space160:160rem;
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;
    --space50:50rem;

	/* 투명도 블랙 */
    --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);

	/* 게시판용 */
	--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;
}

[data-heading]{font-family: var(--lang-ko); color: var(--b-title);}
[data-heading="5xl"]{font-size: var(--font-52); line-height: 1.338; font-weight: 700;}
[data-heading="4xl"]{font-size: var(--font-42); line-height: 1.338; font-weight: 700;}
[data-heading="3xl"]{font-size: var(--font-32); line-height: 1.314; font-weight: 700;}
[data-heading="2xl"]{font-size: var(--font-27); line-height: 1.3; font-weight: 700;}
[data-heading="xl"]{font-size: var(--font-24); line-height: 1.333; font-weight: 700;}
[data-heading="md"]{font-size: var(--font-19); line-height: 1.44; font-weight: 600;}

/* en이 제일 먼저 붙어야함!! */
[data-heading~="en"] {font-family: var(--lang-en-heading); font-weight: 400; letter-spacing:-0.03em; line-height: 1;}
[data-heading="en xl"] {font-size: var(--font-155);}

/* 영문 heading, body 폰트 다름 */
.sm {font-size: var(--font-16); line-height: 1.4;}
.xsm {font-size: var(--font-14); line-height: 1.3;}

.en {font-family: var(--lang-en-body); font-size: var(--font-18); font-weight: 500; letter-spacing: -0.02em;}
.en.sm {font-size: var(--font-17); font-weight: 400;}
.en.xsm {font-size: var(--font-16); font-weight: 400;}

/* 폰트 굵기 */
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
 
  /* 컬러 기본 셋 */
 [data-color="primary"]{color:var(--c-primary) !important;}
 [data-color="secondary"]{color:var(--c-secondary) !important;}
 [data-color="title"]{color:var(--b-title) !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="default"]{background-color: var(--bg-default) !important;}
 [data-bg="dark"]{background-color: var(--bg-dark) !important;}
 [data-bg="light"]{background-color: var(--bg-light) !important;}
 [data-bg="primary"]{background-color: var(--c-primary) !important;}
 [data-bg="w"]{background-color: var(--w) !important;}

 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid var(--op-b10);}
 [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-155:125rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--font-155:100rem;
		--font-52:42rem;
		--font-42:32rem;
		--font-32:28rem;
		--font-27:24rem;

		--space180:150rem;
		--space160:130rem;
		--space150:120rem;
		--space140:120rem;
		--space130:100rem;
		--space120:100rem;
		--space110:80rem;
		--space100:80rem;
		--space80:60rem;
		--space50:40rem;
	}
}

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

		--font-155:85rem;
		--font-52:35rem;
		--font-27:24rem;
     
	}
}

@media (max-width: 540px){
	:root {
        --default:15rem;

		--font-155:50rem;
		--font-52:27rem;
		--font-42:24rem;
		--font-32:20rem;
		--font-27:18rem;
		--font-24:18rem;
		--font-19:16rem;
		--font-18:16rem;
		--font-16:15rem;
		--font-15:14rem;
		--font-14:13rem;

		--space180:80rem;
		--space160:80rem;
		--space150:70rem;
		--space140:70rem;
		--space130:60rem;
		--space120:60rem;
		--space110:60rem;
		--space100:50rem;
		--space80:40rem;
		--space50:30rem;
	}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1400rem;}
 .wrap-wide{margin: 0 50rem;}
 .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 50rem;max-width:none;}
 }

 @media all and (max-width:1480px){
  .wrap-wide{margin: 0 30rem;}
 }

 @media all and (max-width:1280px){
   *[class^="wrap"] {margin: 0 50rem;}
 }
 
 @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-primary);}


/* **************************************** *
 * site custom
 * **************************************** */
/* button common */
*.btn-basic {display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box;padding: 20rem 25rem;background:var(--c-primary);min-width:160rem;transition: var(--trans-01);border-radius: 5rem;}
*.btn-basic span {font-size: var(--font-16); font-weight: 500; color: var(--w);}
*.btn-basic::after{content:"";display:block;width: 16rem; height:16rem; margin-left: 12rem; background-position:50% 50%;background-image:url(../img/layout/btn-arrow_w.svg);background-repeat:no-repeat; transition: var(--trans-01);}
*.btn-basic.white {background: var(--w); border: 1px solid #ddd;}
*.btn-basic.white::after {background-image: url(../img/layout/btn-arrow.svg);}
*.btn-basic.white span {color: var(--b-default); transition: var(--trans-01);}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover{background: var(--c-secondary); border-color: transparent;}
	*.btn-basic.white:hover span {color: var(--w);}
	*.btn-basic.white:hover::after {background-image: url(../img/layout/btn-arrow_w.svg);}
}

@media (max-width: 540px){
	*.btn-basic{padding:16rem 18rem;}
	*.btn-basic span {font-size: 14rem;}
}

/* section-line */
.section-line {margin: var(--space120) 0;}
.section-line::before {content:''; display: block; width: calc(100% - 100rem); height: 1px; margin: 0 auto; background: var(--op-b10);} 

/* caption */
.caption-box {display: inline-block; padding: 5rem 10rem; font-size: var(--font-14); color: var(--c-secondary); line-height: normal; border-radius: 100rem; border: 1px solid var(--c-secondary);}
.caption-box.fill {color: var(--w); background: var(--c-secondary);}

@media all and (max-width:1023px){
	.section-line::before {width: calc(100% - 80rem);}
}

@media (max-width:860px){
	.section-line {margin: var(--space80) 0;}
}

@media (max-width: 540px){
	.section-line::before {width: calc(100% - 40rem);}
	.caption-box {padding: 2rem 7rem;}
}