@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-07-26
******************************************************** */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Serif+KR:wght@200..900&display=swap');

@font-face {
    font-family: 'Pretendard';
    src: url(../fonts/Pretendard-Black.woff2) format('woff'));
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../fonts/Pretendard-ExtraBold.woff2) format('woff'));
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../fonts/Pretendard-Bold.ttf) format('woff'));
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../fonts/Pretendard-Medium.ttf) format('woff'));
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../fonts/Pretendard-Medium.ttf) format('woff'));
    font-weight: 400;
    font-style: normal;
}



/* ========================================================
 * SETTING
======================================================== */
:root{
	--main-color:#292c68;
	--area-wrap-width: 1720px;
	--area-box-width: 1520px;
	--area-width: 1320px;
	--area-padding: 30px;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1: 'Pretendard', 'Noto Sans KR', 'Cormorant', 'Lora', 'Noto Serif KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
}
/* html:not(.is-mobile) *::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}
html:not(.is-mobile) *::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}
html:not(.is-mobile) *::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
} */
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}
html{font-size:10px;}
body, table, th, td, button, select, input, textarea {
	font-family:var(--font-family1);
	color:#666;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	text-size-adjust:none;
	word-break:keep-all;
}
body { background-color:#fff; }
table, th, td{word-break:break-word;}
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }

/* ========================================================
 * LAYOUT
======================================================== */
/* ****************** 공통클래스 ********************** */
.area{ max-width:var(--area-width); margin:0px auto;}
.area-box{ max-width:var(--area-box-width); margin:0px auto; }
.area-wrap{ max-width:var(--area-wrap-width); margin:0px auto; }
.full-height{height:var(--full-height);}
/* Fullpage Layout */
.fullpage-html{overflow:hidden; height:100%;}
.fullpage-html #wrap{position:static;}
/* br tag */
.m-br{display:none;}
.display-m{display:none !important;}

/* ========================================================
 * 사이트맵 스타일
 * 모든페이지 공통사용
======================================================== */
.cm-sitemap-wrapper::-webkit-scrollbar{width: 5px; height:5px;}
.cm-sitemap-wrapper::-webkit-scrollbar-thumb{background-color:#333; transition:all 0.5s;}
.cm-sitemap-wrapper::-webkit-scrollbar-track{background-color:#fff; background:rgba(100,100,100,0.1); border-radius:5px;}
.cm-sitemap-wrapper{font-size:2rem; }
.cm-sitemap-wrapper{position:fixed; top:0px; left:0px; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; }
.cm-sitemap-wrapper:before{position:absolute; top:0px; left:0px; width:100%; height:0; background-color:#000; content:""; opacity:0.7; transition:all 0.6s ease 0s;}
.cm-sitemap-wrapper .cm-sitemap-bg{overflow:hidden; position:absolute; left:0; top:0px; width:100%; height:0%; backdrop-filter: blur(10px); transition:all 0.6s ease}
.cm-sitemap-container{position:absolute; display:table; width:100%; height:100%; overflow-y:auto; }
.cm-sitemap-inner-con{position: relative; display:table-cell; vertical-align:middle; padding: 5em 0; opacity:0; transition:opacity 0.5s ease 0s;}
.cm-sitemap-inner-con .splitting,
.cm-sitemap-inner-con .splitting .word{overflow:hidden;}
.cm-sitemap-inner-con .splitting .word,
.cm-sitemap-inner-con .splitting .char{display:inline-block;}
.sitemap-wrapper-style span.num{display:none;} 
.cm-sitemap-inner-con .splitting .char{transform:translateY(100%); transition:transform 0.6s ease 0.3s , color 0.3s}
/* 공통 :: open */
.cm-sitemap-wrapper.open .cm-sitemap-inner-con{opacity:1.0; transition-delay:0.4s}
.cm-sitemap-wrapper.open .splitting .char{transform:translateY(0); transition-delay:0.3s}


/* ****************** 
	* Mouse Pointer
********************** */
html:not(.is-mobile) .cm-mouse-pointer, .cm-mouse-pointer-txt {
	z-index: 9999;
	position: fixed;
	height: 4rem;
	width: 4rem;
	top: 0;
	left: 0;
	pointer-events: none;
	display:none;
}
html:not(.is-mobile) .cm-mouse-pointer .pointer-circle{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	height:100%;
	background-color: transparent; border: 1px solid #eee;
	border-radius: 50%;
	transition: width 0.3s, height 0.3s ease;
	transform-origin: center 50%;
}
html:not(.is-mobile) .cm-mouse-pointer.hover-default{
	/* mix-blend-mode: difference; */
}
html:not(.is-mobile) .cm-mouse-pointer.hover-default .pointer-circle{
	background-color: rgba(240,78,76,0.6);
	border: rgba(240,78,76,0.6);
	width: 6rem;
	height: 6rem;
}



.mb-15{margin-bottom:1.5rem;}
.mb-20{margin-bottom:2.0rem;}
.mb-25{margin-bottom:2.5rem;}
.mb-30{margin-bottom:3.0rem;}
.mb-40{margin-bottom:4.0rem;}
.mb-50{margin-bottom:5.0rem;}
.mb-55{margin-bottom:5.5rem;}
.mb-60{margin-bottom:6.0rem;}
.mb-70{margin-bottom:7.0rem;}
.mb-80{margin-bottom:8.0rem;}
.mb-85{margin-bottom:8.5rem;}
.mb-100{margin-bottom:10.0rem;}
.mb-110{margin-bottom:11.0rem;}
.mb-120{margin-bottom:12.0rem;}
.mb-130{margin-bottom:13.0rem;}
.mb-140{margin-bottom:14.0rem;}
.mb-150{margin-bottom:15.0rem;}
.mb-160{margin-bottom:16.0rem;}
.mb-170{margin-bottom:17.0rem;}
.mb-180{margin-bottom:18.0rem;}
.mb-190{margin-bottom:19.0rem;}
.mb-200{margin-bottom:20.0rem;}
.mb-210{margin-bottom:21.0rem;}
.mb-220{margin-bottom:22.0rem;}
.mb-250{margin-bottom:25.0rem;}
.mb-270{margin-bottom:27.0rem;}
.mb-280{margin-bottom:28.0rem;}
.mb-300{margin-bottom:30.0rem;}
.mb-340{margin-bottom:34.0rem;}

.pd-15{padding-bottom:1.5rem;}
.pd-20{padding-bottom:2.0rem;}
.pd-25{padding-bottom:2.5rem;}
.pd-30{padding-bottom:3.0rem;}
.pd-35{padding-bottom:3.5rem;}
.pd-40{padding-bottom:4.0rem;}
.pd-45{padding-bottom:4.5rem;}
.pd-50{padding-bottom:5.0rem;}
.pd-100{padding-bottom:10.0rem;}
.pd-120{padding-bottom:12.0rem;}
.pd-130{padding-bottom:13.0rem;}
.pd-140{padding-bottom:14.0rem;}
.pd-150{padding-bottom:15.0rem;}






@media screen and (max-width:1280px) {
}








@media screen and (max-width: 1199px) {
	
}







@media screen and (max-width: 980px) { 
	.mb-20{margin-bottom:1.8rem;}
	.mb-25{margin-bottom:2.0rem;}
	.mb-30{margin-bottom:2.5rem;}
	.mb-50{margin-bottom:3.5rem;}
	.mb-60{margin-bottom:4.0rem;}
	.mb-70{margin-bottom:5.0rem;}
	.mb-100{margin-bottom:7.0rem;}
	.mb-120{margin-bottom:10.0rem;}
	.mb-140{margin-bottom:11.0rem;}
	.mb-150{margin-bottom:12.0rem;}
	.mb-200{margin-bottom:15.0rem;}
}


@media screen and (max-width: 820px) { 
	.pd-15{padding-bottom:1.3rem;}
	.pd-20{padding-bottom:1.8rem;}
	.pd-25{padding-bottom:2.0rem;}
	.pd-30{padding-bottom:2.5rem;}
	.pd-35{padding-bottom:3.0rem;}
	.pd-40{padding-bottom:3.5rem;}
	.pd-45{padding-bottom:4.0rem;}
	.pd-50{padding-bottom:4.5rem;}
	.pd-100{padding-bottom:9.0rem;}
	.pd-120{padding-bottom:11.0rem;}
	.pd-130{padding-bottom:12.0rem;}
	.pd-140{padding-bottom:13.0rem;}
	.pd-150{padding-bottom:14.0rem;}
}




@media screen and (max-width:768px) {
	.mb-20{margin-bottom:1.2rem;}
	.mb-25{margin-bottom:1.5rem;}
	.mb-30{margin-bottom:2.0rem;}
	.mb-50{margin-bottom:3.0rem;}
	.mb-60{margin-bottom:3.5rem;}
	.mb-70{margin-bottom:4.5rem;}
	.mb-100{margin-bottom:6.0rem;}
	.mb-120{margin-bottom:9.0rem;}
	.mb-140{margin-bottom:10.0rem;}
	.mb-150{margin-bottom:10.0rem;}
	.mb-200{margin-bottom:13.0rem;}

}


@media screen and (max-width:500px){ 
	.mb-80{margin-bottom:7.0rem;}
	.mb-130{margin-bottom:10.0rem;} 

	.pd-45{padding-bottom:3.0rem;}
	.pd-35{padding-bottom:2.0rem;}
}



@media screen and (max-width:450px){ 
	.mb-180{margin-bottom:15.0rem;}
}



@media screen and (max-width:430px){
	.mb-50{margin-bottom:2.0rem;}
	.pd-140{padding-bottom:9rem;}

}





@media screen and (max-width:390px){

}