:root{
	--main-color: #6eb82c;
	--area-box-width: 1515px;
	--area-width: 1300px;
	--area-padding: 30px;
	--header-height: 100px;
	--full-height: 100vh;
}
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}

/* ========================================================
 * LAYOUT
======================================================== */
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1300px; margin:0px auto;}
.area-box{ max-width:1500px; margin:0px auto; }


/* ******************  메인 비주얼 ********************** */


#mainVisual{overflow:hidden; width:100%; /* height:1000px; height:100vh;  */ position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	position: relative;
	width:100%;
	height:100%;
	margin: auto;
	overflow: hidden;
}
.main-visual-item .main-visual-pc-img span{display: block; height: 100%; /* min-height:800px; *//* -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05); -webkit-transition:transform 5000ms  ease-in-out ; transition:transform 5000ms ease-in-out ; */}
.main-visual-item .main-visual-pc-img span img{position: relative; top: 0; left: 50%; transform:translateX(-50%); margin: auto; width: 100%; height: 100%;}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:50%; transform:translateY(-50%);
	width:100%; 
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:24px; font-weight:700; letter-spacing:0; color:#292929; margin-bottom:15px; line-height:1.5}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-weight:600; font-size:34px; letter-spacing:-1.5px; color:#282828; margin-bottom:65px; line-height:1.47}
.main-visual-item .main-visual-txt-con .main-visual-btn{padding: 23px 31px 23px 41px; background-color:var(--main-color); color:#fff;}
.main-visual-item .main-visual-txt-con .main-visual-btn .arrow{margin-left: 30px; background-color:#fff; color:var(--main-color)}
.main-visual-item .main-visual-txt-con .main-visual-btn .circle{background-color:rgba(255,255,255,0.3)}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img span{
/*     -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg); */
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-btn{-webkit-animation-delay:0.8s; animation-delay:0.8s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 컨트롤러 */
.main-visual-control{position:absolute; bottom:50px; left:0; right:0; z-index:99; text-align:center}
/* 메인 비주얼 :: 컨트롤러 :: Dots */
.main-visual-control .dot{display:inline-block; vertical-align:middle; padding:0 25px}
.main-visual-control .dot .slick-dots {padding:0;}
.main-visual-control .slick-dots li{position:relative; display:inline-block; width:30px; height:30px; cursor:pointer; margin:0 15px}
.main-visual-control .slick-dots li:after{position:absolute; content:""; width:7px; height:7px; box-sizing:border-box; background-color:transparent; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid #000}
.main-visual-control .slick-dots li:nth-child(2n):after{background-color:#000}
.main-visual-control .slick-dots li:not(.slick-active) .circle-box{display:none}
.main-visual-control .slick-dots li:not(.slick-active) svg {display:none;}
.main-visual-control .slick-dots li:not(.slick-active) svg circle {display:none;}
.main-visual-control .circle-box {position:relative; margin:auto; width:30px; height:30px; text-align:center; border:2px solid rgba(0, 0, 0, 0.2); border-radius: 50%; z-index:11; box-sizing:border-box; cursor:pointer;}
.main-visual-control .circle-box svg{overflow: visible; position:absolute; top:0; left:-2px; width:27px; height:27px; fill:none; stroke:#000; transform:rotate(-90deg);}
.main-visual-control .circle-box svg circle { transform-origin: center; stroke: #000; stroke-dasharray: 360; stroke-dashoffset: 360; stroke-width: 8px; }

/* 메인 비주얼 :: 컨트롤러 :: 화살표 */
.main-visual-control .arrow{display:inline-block; vertical-align:middle; font-size:18px; color:#282828}




/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 버튼 */
.cm-style-btn{display:inline-block; font-weight:700; font-size:20px; letter-spacing:-0.25px; padding:27px 35px; border-radius:50px; box-shadow:7px 7px 22px 0 rgba(0,0,0,0.24)}
.cm-style-btn .btn-inner{display:flex; align-items:center; white-space:nowrap}
.cm-style-btn .txt{position:relative}
.cm-style-btn .arrow{width:26px; height:26px; border-radius:50%; text-align:center; margin-left:15px; position:relative}
.cm-style-btn .arrow i{width: 100%; line-height:26px; border-radius:50%; font-size:26px; position:relative; z-index:1}
.cm-style-btn .arrow .circle{position:absolute; top:0; left:0; width:25px; height:25px; border-radius:50%; z-index:0}
@media all and (min-width:801px){	
	.cm-style-btn:hover .arrow .circle{animation: nation-circle 3s cubic-bezier(1, 2, 0.66, 3) infinite; }
}
.cm-style-btn:hover .arrow .circle-02 {
	-webkit-animation-delay: 1s;
		animation-delay: 1s;
}
.cm-style-btn:hover .arrow .circle-03 {
	-webkit-animation-delay: 2s;
		animation-delay: 2s;
}
@keyframes nation-circle {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.9; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1.7);
	transform: scale(1.7);
	opacity: 0; } 
}