@import url(../../common/css/font.css);
:root{
	--area-main-width: 1400px;
	--padding1:min(max(20px, 9vw),80px);
	--main-color1: #50a11b;
	--main-color2: #2d5016;
	--main-color3: #ede9d3;
	--main-color4: #ea1c00;
	--main-color5: #f9f7eb;
	
	
	--background1:linear-gradient(to right, var(--main-color1), var(--main-color2));
	
	--rgb-color1: 80,161,27;
	--font-family: 'Pretendard';
	--font-family2: 'Cafe24Danjeonghae';
}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button{margin:0;padding:0;-webkit-text-size-adjust:none}
body,input,textarea,select,table,button{font-size:12px;line-height:1.25em;font-family:var(--font-family),Sans-serif;}
input[type=text] {line-height:22px;}
textarea,select{-webkit-border-radius:1px; border-radius:0;}
p{line-height:18px;}
input{-webkit-border-radius:1px; border-radius:0;}
input[type=text],input[type=password]{font-family:"dotum"}
input[type="checkbox"]{-webkit-appearance:block;}
input[type="image"]{-webkit-border-radius:1px; border-radius:0; -webkit-appearance:none; }
input[type=text], input[type=submit], input[type=button], button{-webkit-appearance: none;  -webkit-border-radius: 0;}
html,body{width:100%; height:100%;}
body{position:relative;background-color:#FFFFFF;color:#000;word-wrap:break-word;word-break:break-all;}
body{}
body.fixed{width:100%;overflow-y:hidden;text-overflow: ellipsis;}
legend{display:none;}
img,fieldset{border:0; margin:0;}
ul,ol{list-style:none}
a{color:#000;text-decoration:none;cursor:pointer}
caption{display:none;}
em{font-style:normal;}
.dspm{display:inline-block; vertical-align:middle;}
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../../../images/common/ico/vertex_black.png) no-repeat 95% center #fff; background-size:10px 8px;
}

body.bfixed{background-color:rgba(0,0,0,.4);}
body.bfixed #header{display:none;}
body.bfixed #wrap{display:none;}
body.bfixed #footer{display:none;}

::-webkit-input-placeholder {
   color: #666;
   font-weight:normal;
   text-indent:10px;
} 
:-moz-placeholder {
   color: #666;
   opacity: 1;
   font-weight:normal;
   text-indent:10px;
}
::-moz-placeholder {
   color: #666;
   opacity: 1; 
   font-weight:normal;
   text-indent:10px;
}
:-ms-input-placeholder {
   color: #666; 
   font-weight:normal;
   text-indent:10px;
}

/*base*/
.fl{float:left;}
.fr{float:right;}

.cboth{clear:both;}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.positionr{position:relative;}

.itc{font-style:italic;}

.mT1{margin-top:18px  !important;}
.mT2{margin-top:6px !important}
.mT3{margin-top:10px !important}
.mT4{margin-top:4px !important}
.mT5{margin-top:1px !important}

.mT10{margin-top:10px !important;}
.mT20{margin-top:20px !important;}
.mT30{margin-top:30px !important;}
.mT40{margin-top:40px !important;}
.mT50{margin-top:50px !important;}
.mT70{margin-top:70px !important;}

@media screen and (min-width: 480px){
	.mT1{margin-top:30px;}
	.mT2{margin-top:14px}
	.mT3{margin-top:20px}
}
@media screen and (max-width: 480px){
	.mT10{margin-top:5px !important;;}
	.mT20{margin-top:10px !important;;}
	.mT30{margin-top:15px !important;;}
	.mT40{margin-top:20px !important;;}
	.mT50{margin-top:25px !important;;}
	.mT70{margin-top:35px !important;;}
}

@-webkit-keyframes ratateLoop{
	  from{
		-webkit-transform:rotate(0);transform:rotate(0)
	  }
	  to{
		-webkit-transform:rotate(1turn);transform:rotate(1turn)
	  }
	}
	.introarea1{
		position:relative;
		width:100%; height:100vh; max-height:100%;
		overflow:hidden;
		
		opacity:0;
		transition:opacity ease .5s .1s;
	}	
	.introarea1 .top1{
		position:absolute; left:0; top:0;
		width:100%; height:0;
		box-sizing:border-box;
		padding:0 80px;
		display:flex; justify-content:space-between; align-items:flex-start;
		color:#fff;
		z-index:2;
	}
	.introarea1 .top1 > .txt1{
		margin-top:70px;
		font-size:20px; line-height:32px;
		pointer-events:none;
	}	
	.introarea1 .bnn1{
		margin-top:40px;
		display:flex; align-items:center; gap:20px;
	}
	.introarea1 .bnn1 .lnk1{
		color:#fff; font-size:18px; line-height:22px;
		padding:10px 20px;
		border-radius:30px;
		border:1px solid;
	}
	.introarea1 .bnn1 .btnnation1{
		position:relative;
	}
	.introarea1 .bnn1 .btnnation1 > a{
		color:#fff; font-weight:600; font-size:15px;
		display:flex; align-items:center; gap:5px;
	}
	.introarea1 .bnn1 .btnnation1 > a::before{
		width:20px; height:20px;
		background:url(../../images/mainintro/btn_country1.png) no-repeat center center; background-size:cover;
		content:"";
	}
	.introarea1 .bnn1 .btnnation1 > a::after{
		width:6px; height:6px;
		border-bottom:2px solid #fff; border-right:2px solid #fff;		
		border-radius:2px;
		transform:rotate(45deg) translateY(-3px);
		content:"";
	}
	.introarea1 .bnn1 .btnnation1:hover > a::after{
		transform:rotate(-135deg) translate(-2px, 0px);
	}
	.introarea1 .bnn1 .btnnation1 > ul{
		position:absolute; right:0; top:18px;
		text-align:center;
		padding:0px 10px;
		border-radius:10px;
		background:var(--main-color1);
		overflow:hidden; max-height:0;
		transition:all ease .4s 0s;
	}
	.introarea1 .bnn1 .btnnation1 > ul > li{
	}
	.introarea1 .bnn1 .btnnation1 > ul > li > a{
		color:rgba(255,255,255,.5); font-weight:400; font-size:14px; line-height:22px;
	}
	.introarea1 .bnn1 .btnnation1 > ul > li > a:hover, .mnbnn1 > .introarea1 .bnn1 .btnnation1 > ul > li > a:focus{
		color:rgba(255,255,255,1);
	}
	.introarea1 .bnn1 .btnnation1:hover ul{
		padding:4px 10px;
		max-height:200px;
	}
	
	.introarea1 .cont1{
		position:relative;
		display: flex; justify-content:flex-start; align-items:center;
		height:100%; max-height:100%;
		background:#333;
		overflow:hidden;	
		overflow-anchor: none;
		z-index:1;
	}
	.introarea1 .cont1 > div {
		position:relative;
		flex-grow: 1; flex-basis: 8%; 
        width: calc(100% / 3); height:100%;
		overflow:hidden;
		display:flex; justify-content:center; align-items:center;
		text-align:center;
		z-index:2;
		transition: all 0.8s;	
    }
	.introarea1 .cont1 > div .tit1{
		position:absolute; right:20px; bottom:min(max(1vw, 4vw), 90px);
		font-weight:400; font-family:var(--font-family2); color:#fff; font-size:70px; line-height:70px;
		white-space:nowrap;
		transform:rotate(90deg);
		transform-origin:right top;
		transition:transform ease .5s;		
	}
	
	.introarea1 .cont1 > div > .detail1 .txt1{
		color:#fff; 
	}
	.introarea1 .cont1 > div > .detail1 .txt1 > p{
		font-size:30px; line-height:40px;
		opacity:0;
		transform:translateY(10px);
		transition:opacity ease .2s 0s, transform ease .2s 0s;
	}
	
	.introarea1 .cont1 > div > .detail1 .txt1 > div{
		margin-top:20px;
		font-weight:700; font-size:70px; line-height:70px;
		opacity:0;
		transform:translateY(10px);
		transition:opacity ease .2s 0s, transform ease .2s 0s;
	}
	
	
	.introarea1 .cont1 > div > .detail1 > a{
		position:relative;
		margin:0 auto; margin-top:min(max(1vw, 3vw),30px);;
		width:min(max(1vw, 23vw), 195px); height:min(max(1vw, 23vw), 196px);
		display:flex; justify-content:center; align-items:center;
		text-align:center;
		color:#fff;
		z-index:4;
		pointer-events:none;
		z-index:-1;
		opacity:0;
		transform:translateY(10px);
		transition:opacity ease .2s 0s, transform ease .2s 0s;
	}
	
	
	.introarea1 .cont1 > div > .detail1 > a::before{
		position:absolute; left:0; top:0;
		width:100%; height:100%;
		background:url(../../images/mainintro/txt_cir1.png) no-repeat center center; background-size:cover;
		animation:ratateLoop infinite 15s linear; -ms-animation:ratateLoop infinite 15s linear;
		content:"";
	}

	.introarea1 .cont1 > div > .detail1 > a > span::after{
		position:absolute; left:50%; top:50%;
		transform:translate(-50%,-50%);
		transform-origin:center center;
		width:min(max(1vw, 6vw), 40px); height:min(max(1vw, 6vw), 40px);
		background:url(../../images/mainintro/ico_arr1.png) no-repeat center center; background-size:cover;
		content:"";
		opacity:1;
		transition:transform ease .4s 0s, opacity ease .4s 0s;
	}	
	.introarea1 .cont1 > div > .detail1 > a > span{
		font-size:0;
	}
	
	.introarea1 .cont1 > div > .detail1 > a:hover > span::after{
		transform:translate(-50%,-50%) rotate(45deg);
	}
	
	.introarea1 .cont1 > div .imgbox1{
		position:absolute; left:50%; top:50%;
		overflow:hidden;
		transform:translate(-50%,-50%);
		width:100%; height:100%;
		background:url(../../images/mainintro/bg_nature1.jpg) no-repeat center center; background-size:cover;
		z-index:-1;
	}
	.introarea1 .cont1 > div:nth-child(2) .imgbox1{
		background:url(../../images/mainintro/bg_spavalley1.jpg) no-repeat center center; background-size:cover;
	}
	.introarea1 .cont1 > div:nth-child(3) .imgbox1{
		background:url(../../images/mainintro/bg_hoteldforet1.jpg) no-repeat center center; background-size:cover;
	}
	
	
	
	@media screen and (min-width: 1024px){	
		.introarea1 .cont1 > div .imgbox1{
			transform:translate(-50%,-30%);
			transition:transform ease .7s .0s;
		}
		.introarea1 .cont1 > div:nth-of-type(2) .imgbox1{
			transition:transform ease .7s .1s;
		}
		.introarea1 .cont1 > div:nth-of-type(3) .imgbox1{
			transition:transform ease .7s .2s;
		}
		
		.introarea1 .cont1 > div:hover .tit1{
			transform:rotate(90deg) scale(.7);
		}
		.introarea1 .cont1 > div:hover > .detail1 .txt1 > p{
			opacity:1;
			transform:translateY(0px);
			transition:opacity ease .4s .2s, transform ease .4s .2s;
		}
		.introarea1 .cont1 > div:hover > .detail1 .txt1 > div{
			opacity:1;
			transform:translateY(0px);
			transition:opacity ease .4s .3s, transform ease .4s .3s;
		}
		.introarea1 .cont1 > div:hover > .detail1 > a{
			pointer-events:auto;
			z-index:1;
			opacity:1;
			transform:translateY(0px);
			transition:opacity ease .4s .4s, transform ease .4s .4s;		
		}
		.introarea1 .cont1 > div:hover {
			flex-basis: calc(100% / 3);
		}	
	}
	@media screen and (max-width: 1024px){	
		.introarea1{
			height:auto; max-height:none;
		}
		.introarea1 .top1{
			padding:0 min(max(1vw, 5vw),60px);
		}
		.introarea1 .top1 > .txt1{
			margin-top:min(max(10px, 4vw),40px);
			font-size:min(max(1vw, 3vw),20px); line-height:min(max(1vw, 4.6vw),30px);
		}
		.introarea1 .top1 > .txt1 > img{
			max-width:70%;
		}
		.introarea1 .bnn1{
			flex:1;
			white-space:nowrap;
			margin-top:min(max(1vw, 5vw),40px);
			gap:min(max(1vw, 3vw),20px); justify-content:flex-end;
		}
		.introarea1 .bnn1 .lnk1{
			font-size:min(max(1vw, 3vw),18px); line-height:22px;
			padding:min(max(1vw, 2vw),10px) min(max(1vw, 3vw),20px);
		}
		
		.introarea1 .cont1{
			flex-wrap:wrap;			
		}
		.introarea1 .cont1 > div.on {
			height:calc(100vh / 5 * 3)
		}
		.introarea1 .cont1 > div {
			width:100%; height:calc(100vh / 5);
		}
		.introarea1 .cont1 > div .tit1{
			right:min(max(1vw, 4vw), 20px); bottom:min(max(1vw, 4vw), 20px);
			font-size:min(max(1vw, 6.6vw), 50px); line-height:min(max(1vw, 6.6vw), 50px);
			transform:rotate(0deg) scale(.8);
			transition:transform ease .5s;		
		}		
		.introarea1 .cont1 > div.on .tit1{
			transform:scale(1);
		}
		.introarea1 .cont1 > div > .detail1 .txt1 > p{
			font-size:min(max(1vw, 3.8vw),30px); line-height:min(max(1vw, 5.4vw),40px);
		}
		.introarea1 .cont1 > div > .detail1 .txt1 > div{
			margin-top:min(max(1vw, 2vw),20px);
			font-size:min(max(1vw, 7vw),70px); line-height:min(max(1vw, 7vw),70px);
		}	
		
		.introarea1 .cont1 > div.on > .detail1 .txt1 > div{
			opacity:1;
			transform:translateY(0px);
			transition:opacity ease .4s .3s, transform ease .4s .3s;
		}
		.introarea1 .cont1 > div.on > .detail1 .txt1 > p{
			opacity:1;
			transform:translateY(0px);
			transition:opacity ease .4s .2s, transform ease .4s .2s;
		}
		.introarea1 .cont1 > div.on > .detail1 > a{
			pointer-events:auto;
			opacity:1;
			z-index:1;
			transform:translateY(0px);
			transition:opacity ease .4s .4s, transform ease .4s .4s;		
		}
			
		.introarea1 .cont1 > div:not(:hover) {
			flex-basis:auto;
		}	
		
	}
	
	body.mainon .introarea1{
		opacity:1;
	}
	body.mainon .introarea1 .cont1 > div .imgbox1{
		transform:translate(-50%,-50%);
	}


.layerpopup{
}
.layerpopup > *{
	display:flex; justify-content:center; flex-wrap:wrap;
}
.layerpopup .popup1{
}
.bgpopup1{
	position:fixed; top:0%; left:0; width:100%; height:100%; display:block;  z-index:5; background-color:rgba(0, 0, 0,.5); overflow-y:auto; opacity:0; transition:opacity ease .8s;
	pointer-events:none;
}
.bgpopup1.on{
	opacity:1;
	pointer-events:auto;
}
.bgspopup1{display:table; width:auto; height:100%; box-sizing:border-box; margin:0 auto; vertical-align:middle; overflow:auto;}
.bgspopup1 > *{
	display:table-cell !important; width:auto; vertical-align:middle;
}