@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:16rem; color:var(--b-01);}
body,input,textarea,button,select{font-family:'Montserrat',"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

@media (max-width:860px){
	body{font-size:16rem;}
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem; font-size:15rem;}
	p {line-height: 1.6; /*word-break: keep-all;*/}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #EB550A;

	--b-01: #000;
	--b-02: #444;
	--b-03: #666;
	--b-04: #999;

	--f-01: #fff;

	--bg-01: #EB550A;
	--bg-02: #111;
	--bg-03: #FBF3EF;
	--bg-04: #F4F4F4;

	--bd-01: #ddd;
	--bd-02: #EAEAEA;
	--bd-03: #e1e1e1;
	--bd-04: #F0F0F0;

	--br-12: 12rem;
	--br-06: 6rem;

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

	--font-65:65rem;
	--font-55:55rem;
	--font-47:47rem;
	--font-42:42rem;
	--font-37:37rem;
	--font-32:32rem;
	--font-30:30rem;
	--font-27:27rem;
	--font-24:24rem;
	--font-20:20rem;
	--font-18:18rem;
	--font-16:16rem;
	--font-15:15rem;
	--font-14:14rem;
	--en-font-50:50rem;
	--en-font-15:15rem;
}

.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;}
 [data-bg="3"]{background-color: var(--bg-03) !important;}
 [data-bg="4"]{background-color: var(--bg-04) !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 {
		
	}
}

@media all and (max-width:1023px){
	:root {
		--font-65:57rem;
		--font-47:42rem;
		--font-42:37rem;
		--font-32:27rem;
	}
}

@media (max-width: 540px){
	:root {
		--font-65:35rem;
		--font-47: 30rem;
		--font-47:26rem;
		--font-42:24rem;
		--font-37:24rem;
		--font-32:20rem;
		--font-30:20rem;
		--font-27:20rem;
		--font-24:18rem;
		--font-20:18rem;
		--font-18:15rem;
		--font-15:14rem;
		--font-14:13rem;

		--br-12: 6rem;
		--br-06: 3rem;
	}
}

/* **************************************** *
 * 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;}
[class^="swiper-btn--"]{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;font-size: 0;}
[class^="swiper-btn--"]::after{position: absolute; left:50%; top: 50%; content:"";display:block;min-width: 24rem;height: 24rem; margin-left: -5rem; border: solid var(--b-01); border-width: 0 3rem 3rem 0; transform: translate(-50%, -50%) rotate(-45deg);}
.swiper-btn--prev{flex-direction: row-reverse;}
 
.swiper-btn--prev{transform: scaleX(-1);}
.swiper-button-disabled{opacity: 0.2}
 
 .swiper-pagination{display:flex; gap:12rem;}
 .swiper-pagination .swiper-pagination-bullet{opacity: 1; width:8rem; height:8rem; background:var(--bd-01); border-radius:100%;}
 .swiper-pagination .swiper-pagination-bullet-active {background: var(--c-01);}

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

/* button common */
*.btn-basic{overflow: hidden; position: relative; display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box; min-height: 52rem; padding: 12rem 22rem;background:var(--b-01);font-size:15rem;color:var(--f-01);min-width:100rem;transition: var(--trans-01);border-radius: 100rem;}
*.btn-basic span {font-weight:600;}
*.btn-basic span {position: relative;}
*.btn-basic::before {position: absolute; left:0; content:''; width: 100%; height: 100%; background: var(--bg-01); transform: translateX(-110%); transition: var(--trans-01);}
*.btn-basic::after{content:""; position: relative; display:block;height:8rem;margin-left:14rem;background-position:50% 50%;min-width:16rem;background-image:url(../img/layout/arrow-basic_w.svg);background-repeat:no-repeat;}
*.btn-basic.gray {background: #f0f0f0;}
*.btn-basic.gray span {color: rgba(0, 0, 0, .5); }
*.btn-basic.gray::after {opacity: 0.5; background-image:url(../img/layout/arrow-basic.svg);}
*.btn-basic--line {border: 2px solid var(--b-01); background:transparent;}
*.btn-basic--line span {color: var(--b-01); }
*.btn-basic--line::after {background-image: url(../img/layout/arrow-basic.svg);}
*.btn-basic--line.white {border-color: var(--f-01);}
*.btn-basic--line.white::after {background-image: url(../img/layout/arrow-basic_w.svg);}
*.btn-basic--line.white span {color: var(--f-01); }
*.btn-download::after {width: 14rem; height: 14rem; background-image: url(../img/layout/ic-download.svg);}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover::before { transform: translateX(0);}
	*.btn-basic:hover::after {opacity: 1 !important;}
	*.btn-basic:hover span {color: var(--f-01) !important;}
	*.btn-basic.gray:hover span {color: var(--f-01); }
	*.btn-basic.gray:hover::after {opacity: 1; background-image:url(../img/layout/arrow-basic_w.svg);}
	*.btn-basic--line:hover {border-color: var(--c-01);}
	*.btn-basic--line:hover::after {background-image: url(../img/layout/arrow-basic_w.svg);}
	*.btn-download:hover::after {background-image: url(../img/layout/ic-download_w.svg);}
}

@media (max-width: 540px){
	*.btn-basic{min-width: 100rem; min-height: 42rem; padding:12rem 15rem;font-size:13rem;}
	*.btn-basic::after {min-width: 14rem;}
}

/* 글로벌 팝업 */
.global-layer .popup-layer-inner {padding: 40rem; padding-right: 30rem; border-radius: var(--br-12);}
.global-layer__inr {overflow-y: auto; max-width: 720rem; max-height: 750rem; padding-right: 10rem;}
/* body:has(.global-layer.active) {position: fixed; overflow: hidden; width: 100%; height: 100%;} */
.global-map__title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rem; color: var(--b-02);}
.global-map__title h4 {margin-bottom: 15rem; font-size: var(--font-37); font-weight: 700; color: var(--b-01);}
.global-map__title figure {overflow: hidden; flex-shrink: 0; width: 180rem; margin-left: 80rem; border-radius: var(--br-06); border: 1px solid var(--bd-01);}
.global-map__title strong {display: block; margin-bottom: 5rem; font-weight: 700;}
.global-map__title p {font-size: var(--font-15);}
.global-layer ul {gap: 10rem; margin-top: 20rem;}
.global-layer ul li {overflow: hidden; border-radius: var(--br-06);}
.global-layer ul li img {width: 100%;}
.global-layer table.table {font-size: var(--font-14);}
.global-layer table.table tr {border-bottom: 1px solid var(--bd-01);}
.global-layer table.table thead th {padding: 10rem; background: var(--bg-04);}
.global-layer table.table tbody td {padding: 10rem;}
.global-layer table.table tbody td:not(:last-child) {border-right: 1px solid var(--bd-01);}

.popup-layer-close {top: 0; right: -80rem; width: 60rem; height: 60rem; border-radius: 100%; background: #111;}
.popup-layer-close::after {width: 22rem;}
.popup-layer-close::before {height: 22rem;}

@media all and (max-width:1023px){
	.popup-layer-inner {margin-left: 0 !important; margin-top: 0 !important; transform: translate(-50%, -50%);}
}

@media (max-width: 860px){
	.popup-layer-close {right: -70rem;}
}

@media (max-width: 540px){
	.popup-layer-inner {transform: none !important;}
	.popup-layer-close {top: auto; bottom: 0; left: 0; width: 100%; height: 52rem; border-radius: 0;}
	.global-layer .popup-layer-inner {padding: 20rem; padding-bottom: 75rem; border-radius: 0;}
	.global-layer__inr {max-height: 100%;}
	.global-map__title {flex-direction: column; align-items: flex-start; margin-bottom: 20rem;}
	.global-map__title p {line-height: 1.5;}
	.global-map__title h4 {margin-bottom: 10rem;}
	.global-map__title figure {width: 100%; height: 180rem; margin-left: 0; margin-top:20rem; text-align: center; background: #fafafa;}
	.global-map__title figure img {display: inline-block; width: auto; object-fit: contain;}
	.global-layer ul {margin-top: 20rem;}
	#layer03.global-layer .global-map__title figure {background: #fff;}
}