@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);}
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:"Pretendard", -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: #004F96;
	--c-02: #00A7E3;

    /* title / body */
	--b-default:#333;
	--b-01: #111;
	--b-02: #666;
	--b-03: #888;

	--w: #fff;

	--bg-gradation:linear-gradient(105deg, #008FC8 0.59%, #003067 99.41%);
	--bg-color: #004F96;
	--bg-dark: #00050A;
	--bg-01:#EFF7FF;
	--bg-02:#f0f0f0;

	--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:'Zen Dots';
	--lang-ko:"Pretendard";
    --caption:'Odibee Sans';

	--default:17rem;
	--font-16:16rem;

	/* Heading */
	--kr-6xl:100rem;
	--kr-5xl:65rem;
	--kr-4xl:48rem;
    --kr-3xl:42rem;
    --kr-2xl:32rem;
    --kr-xl:26rem;
    --kr-lg:21rem;
    --kr-m:18rem;

	/* Body */
	--kr-sm:15rem;
	--kr-xs:14rem;

	/* Eng */
    --en-5xl:72rem;
    --en-4xl:48rem;
    --en-num:16rem;
    --en-xs:13rem;
    
	--space200:200rem;
	--space180:180rem;
    --space150:150rem;
    --space120:120rem;
    --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-w03:rgba(255,255,255,.03);
    --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);
}

/* 국문타이틀 */
h2, h3, h4, h5 {font-weight: 700; color: var(--b-01);}
[data-font-kr]:not([data-font-kr^="body"]){font-weight: 700;}
[data-font-kr]{font-family: var(--lang-ko); color:var(--b-01);}
[data-font-kr="5xl"], [data-font-kr="5xl"] *, h2{font-size: var(--kr-5xl); line-height: 1.35; } /* h2 */
[data-font-kr="4xl"], h3{font-size: var(--kr-4xl); line-height: 1.28; } /* h3 */
[data-font-kr="3xl"], h4 {font-size: var(--kr-3xl); line-height: 1.31; }
[data-font-kr="2xl"], h5 {font-size: var(--kr-2xl); line-height: 1.31; }
[data-font-kr="xl"], [data-font-kr="xl"] *, h6 {font-size: var(--kr-xl); line-height: 1.36;}
[data-font-kr="lg"] {font-size: var(--kr-lg); line-height: 1.36; } /* board-title */
[data-font-kr="m"] {font-size: var(--kr-m); line-height: 1.33;} 

/* 국문 body */
[data-font-kr="body medium"]{font-size:var(--default); font-weight: 400; line-height: 1.7;}
[data-font-kr="body semibold"]{font-size:var(--default); font-weight: 600; line-height: 1.7;}
[data-font-kr="body bold"]{font-weight: 700; line-height: 1.7;}
[data-font-kr="body small"]{font-size:var(--kr-sm); line-height: 1.46;}
[data-font-kr="body xsmall"]{font-size:var(--kr-xs); line-height: 1.46;}

/* 영문타이틀 */
[data-font-en]{font-family: var(--lang-en);}
[data-font-en="5xl"], [data-font-en="5xl"] *{ font-size: var(--en-5xl); line-height: 1.07;  } /* h3 */
[data-font-en="4xl"]{ font-size: var(--en-4xl); line-height: 1.53; } 

/* 영문Body */
[data-font-en="num"] {font-family: var(--caption); font-size: var(--en-num);}
[data-font-en="xs"] {font-family: var(--lang-en); font-size: var(--en-xs);}

 /* 컬러 기본 셋 */
 [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="dark"]{background-color: var(--bg-dark) !important;}
 [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-radius="30"]{border-radius:max(1.5625vw, 20rem);}

 @media all and (max-width:1600px){
	:root {
       /* Heading */
		--kr-5xl:55rem;
	}
}

/* 낮은 노트북 대응 */
@media all and (min-width:1440px) and (max-width:1600px) and (max-height:700px) {
    :root {
       /* Heading */
		--kr-5xl:42rem;
		--kr-4xl: 33rem;
		--kr-3xl: 24rem;
		--kr-lg: 18rem;

		--space50: 30rem;
		
	}


	#logo a {width: 157rem;}
	#site-map:has(.non-full) .site-map-inner {
		padding: 50rem 50rem 50rem;
	}
	.site-map-bottom {
		margin-top: 60rem;
	}
}

@media all and (max-width:1200px){
	:root {
       /* Heading */
		--kr-6xl:100rem;
		--kr-5xl:55rem;
		--kr-4xl:48rem;
		--kr-3xl:42rem;
		--kr-2xl:32rem;
		--kr-xl:26rem;
		--kr-lg:21rem;
		--kr-m:18rem;

		/* Body */
		--kr-sm:15rem;
		--kr-xs:14rem;

		/* Eng */
		--en-5xl:72rem;
		--en-4xl:48rem;
		--en-num:16rem;
		--en-xs:13rem;
	}
}

@media all and (max-width:1023px){
	:root {
		--default:15rem;

    	/* Heading */
		--kr-6xl:100rem;
		--kr-5xl:45rem;
		--kr-4xl:42rem;
		--kr-3xl:36rem;
		--kr-2xl:32rem;
		--kr-xl:26rem;
		--kr-lg:21rem;
		--kr-m:18rem;

		/* Body */
		--kr-sm:15rem;
		--kr-xs:14rem;

		/* Eng */
		--en-5xl:72rem;
		--en-4xl:48rem;
		--en-num:16rem;
		--en-xs:13rem;

		--space200:180rem;
		--space180:150rem;
		--space150:100rem;
		--space120:100rem;
		--space100:80rem;
		--space80:60rem;
		--space50:50rem;
	}
}

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

		/* Heading */
		--kr-6xl:100rem;
		--kr-5xl:40rem;
		--kr-4xl:36rem;
		--kr-3xl:32rem;
		--kr-2xl:28rem;
		--kr-xl:24rem;
		--kr-lg:21rem;
		--kr-m:16rem;

		/* Body */
		--kr-sm:15rem;
		--kr-xs:14rem;

		/* Eng */
		--en-5xl:72rem;
		--en-4xl:48rem;
		--en-num:16rem;
		--en-xs:12rem;

		--space200:180rem;
		--space180:150rem;
		--space150:100rem;
		--space120:100rem;
		--space100:80rem;
		--space80:60rem;
		--space50:40rem;
     
	}
}

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

        /* Heading */
		--kr-6xl:100rem;
		--kr-5xl:30rem;
		--kr-4xl:26rem;
		--kr-3xl:24rem;
		--kr-2xl:21rem;
		--kr-xl:18rem;
		--kr-lg:16rem;
		--kr-m:15rem;

		/* Body */
		--kr-sm:14rem;
		--kr-xs:13rem;

		/* Eng */
		--en-5xl:72rem;
		--en-4xl:48rem;
		--en-num:16rem;
		--en-xs:12rem;

		--space200:180rem;
		--space180:80rem;
		--space150:60rem;
		--space120:60rem;
		--space100:50rem;
		--space80:40rem;
		--space50:30rem;
	}

}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{max-width:1700rem;}
 .wrap-narrow02 {max-width:1280rem;} 
 .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;}
 }

 /* 낮은 노트북 대응 */
@media all and (min-width:1440px) and (max-width:1600px) and (max-height:700px) {
	.wrap {margin: 0 120rem;}
}

 /* **************************************** *
 * 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;margin: 0 25rem;font-size: 16rem; font-weight: 600;}
 *[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-btn--prev{flex-direction: row-reverse;}
 
 *.swiper-btn--next::after{/* transform:rotate(-90deg); */}
 *.swiper-btn--prev::after{transform: rotate(180deg);}
 *.swiper-button-disabled{opacity: 0.5;}
 
 .swiper-pagination-bullet{width:10rem;height:10rem;background: var(--op-b10);border-radius:100%;}
 .swiper-pagination{display:flex; gap:10rem; justify-content: center;}
 .swiper-pagination-bullet-active {opacity: 1;	background: var(--c-01) !important;}

[data-bg="dark"] .swiper-pagination-bullet {background: var(--op-w20);}

 .swiper-controls--fixed {z-index: 31; position: absolute; left:0; top:0; display: flex; justify-content: space-between; width: 100%; height: 100%;}
 .swiper-controls--fixed *[class^="button"] {width: 30%; height: 100%; font-size: 0;}

 @media (max-width:860px){
	.swiper-controls--fixed {display: none;}
 }


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

/* button common */
*.btn-basic{display:inline-flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box;padding: 20rem;background:var(--c-01);font-weight:700;font-size:var(--kr-sm);color: var(--w);min-width:100rem;transition: var(--trans-01);border-radius: 5rem;}
*.btn-basic:not(:has(i))::after{display: block; content:''; width: 12rem; height: 12rem; margin-left: 20rem; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../img/common/arrow-basic_w.svg);}
*.btn-basic:has(i) {padding-left: 25rem;}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover{background: var(--bg-gradation);}
}

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

@media (max-width: 540px){
	*.btn-basic{padding:15rem;font-size:14rem;min-width:120rem;}
}

/* 마우스커스텀 */    
#cursor{mix-blend-mode:normal;position:fixed; top:0; left:0; z-index:1000; pointer-events:none; will-change:transform;}
#cursor .cur_cir{opacity:0; width:32px; height:32px; margin-top:-50%; margin-left:-50%; transition:opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius:50%;}

#cursor.on .cur_cir::before{width:100%; text-align:center;display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:13px; color:#fff; letter-spacing:-0.03em; transform:translate(-50%, -50%);}
#cursor.on .cur_cir{position:relative; opacity:1; transform:rotate(0) scale(1) translate(0, 0) !important;}

#cursor[class^="swiper--"] .cur_cir {display: flex; align-items: center; justify-content: center; width: 140rem; height: 140rem; border: 1px solid var(--op-w10); background: var(--op-w10);}
#cursor[class^="swiper--"] .cur_cir span {display: inline-block; font-family: var(--lang-en); font-size: var(--en-xs); color: var(--w); line-height: 1;}
#cursor[class^="swiper--"] .cur_cir i {width: 12rem; height: 12rem; margin: 0 6rem; background: url(../img/common/arrow-basic_w.svg) no-repeat center / contain;}
#cursor.swiper--prev .cur_cir {flex-direction: row-reverse;}
#cursor.swiper--prev .cur_cir i {margin-left: -5rem; transform: scaleX(-1);}
#cursor.swiper--prev span::before {content:'PREV';}
#cursor.swiper--next span {margin-left: 15rem;}
#cursor.swiper--next span::before {content:'NEXT';}

#cursor.overlay .cur_cir{width:151rem; height:151rem; background-color:var(--c-01);}
#cursor.overlay .cur_cir::before{content:"VIEW MORE";}
#cursor.overlay.close .cur_cir{background-color:#db590f;}
#cursor.overlay.close .cur_cir::before{content:"close";} 
#cursor.overlay.close.pointer .cur_cir{opacity:1; width:150rem; height:150rem; background-color:rgba(64, 110, 182, 0.7);}
#cursor.overlay.close.pointer .cur_cir::before{content:"more";}

#cursor.test .cur_cir{position:relative; opacity:1; width:117rem; height:117rem; background-color:#cc3838; transform:rotate(0) scale(1) translate(0, 0) !important;}
#cursor.test .cur_cir::before{content:"더보기"; display:block; position:absolute; top:50%; left:50%; font-weight:700; font-size:15px; color:#fff; letter-spacing:-0.03em; transform:translate(-50%, -50%);}

[cursor-type]{cursor: pointer;}

@media (max-width: 1023px){
	#cursor{display: none !important;}
}  

/* 이미지 줌 */	
.zoom-view{position:relative;}
.zoom-view__btn{display:block; position:relative; width:100%; padding:0; background:none; border:0; cursor:pointer;}
.zoom-view__img{display:block; width:100%; height:auto;}
.zoom-view__hint{display:flex;align-items:center;position:absolute;opacity:0;top:12rem;right:12rem;line-height:1;padding:8rem 12rem;background:rgba(0, 0, 0, .55);font-size:13rem;color:#fff;transition:opacity .25s ease, transform .25s ease;transform:translateY(-4rem);border-radius:999rem;pointer-events:none;backdrop-filter:blur(10rem);-webkit-backdrop-filter:blur(10rem);/* display: none; */}
.zoom-view__hint::before{content:""; display:block; width:13rem; height:13rem; margin-right:6rem; background:#000; background:url(../img/board/ic-search_w.svg) no-repeat 50% 50%; background-size:cover;}
.zoom-modal{display:none; position:fixed; z-index:9999; inset:0;}
.zoom-modal.is-open{display:block;}
.zoom-modal__dim{position:absolute; background:rgba(0, 0, 0, .78); inset:0;}
.zoom-modal__panel{display:flex; position:absolute; inset:0; flex-direction:column;}
.zoom-modal__close{position:absolute; top:12rem; right:12rem; width:42rem; height:42rem; background:rgba(255, 255, 255, .14); border:0; border-radius:999rem; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem); cursor:pointer;}
.zoom-modal__close::before,
.zoom-modal__close::after{content:''; position:absolute; top:50%; left:50%; width:16rem; height:2rem; background:#fff;}
.zoom-modal__close::before{transform:translate(-50%, -50%) rotate(45deg);}
.zoom-modal__close::after{transform:translate(-50%, -50%) rotate(-45deg);}
.zoom-modal__stage{display:flex; justify-content:center; align-items:center; overflow:hidden; padding:65rem 16rem 16rem; flex:1; touch-action:none;}
.zoom-modal__img{transform:translate3d(0, 0, 0) scale(1); max-width:100%; max-height:100%; transform-origin:50% 50%; will-change:transform; user-select:none; -webkit-user-drag:none; pointer-events:none;}
.zoom-modal__stage{touch-action:none; overscroll-behavior:contain;}
.zoom-modal__img{pointer-events:none;}
.zoom-view__icon{display:flex; justify-content:center; align-items:center; position:absolute; opacity:1; top:12rem; right:12rem; width:36rem; height:36rem; background:rgba(0,0,0,.55); border-radius:999rem; backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem);}
.zoom-view__icon::before{content:''; display:block; position:relative; width:15rem; height:15rem; background:url(../img/board/ic-search_w.svg) no-repeat 50% 50%; background-size:cover;}
.zoom-view__icon::after{}

@media (hover: hover) and (pointer: fine){
	.zoom-view__btn:hover .zoom-view__hint{opacity:1; transform:translateY(0);}
}

@media all and (max-width:1023px){
	.zoom-modal__stage {background: var(--w);}
	.zoom-modal__close {background: var(--op-b10);}
	.zoom-modal__close::before,
	.zoom-modal__close::after {background: var(--b-01);}
}

@media (max-width: 540px){
	.zoom-modal__img{transition:none;}
	/*.zoom-modal__stage*/
}

@media (hover: hover) and (pointer: fine){
	.zoom-view__icon{display:none;}
}

@media (hover: none){
	.zoom-view__hint{display:none;}
}