/* BASIC css start */
#contentWrap { width:900px;}
#content { width:100%; text-align:center;  position:relative;  }
#content img { width:100%; }



.intro { position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.intro .ob01 {position:absolute;top: 45%;left: 29%;animation:floating-pc 1.8s alternate infinite .5s;} 
.intro .ob02 {position:absolute;top: 51%;right: 28%;animation:tossing 1.2s alternate infinite .5s;} 
.intro .ob03 {position:absolute;top: 63%;right: 22%;}  
.intro .ob04 {position:absolute;top: 58%;left: 27%;} 

.intro .ob01,
.intro .ob02,
.intro .ob03,
.intro .ob04 { width: auto !important }



.blue { color:#5568ff; font-weight:bold; }


.area_02 { position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.area_02_text { position:absolute; bottom:55px; left:-50%; right:-50%; }
.area_02_text .tit { font-size:24px; font-weight:bold; color:#333; line-height:35px; margin-top:20px; }
.area_02_text .info { font-size:22px; font-weight:500; color:#555; line-height:28px; }
.area_02_text .info .gray { color:#999; font-size:19px; }


.area_03 { position:relative; width:100%; height:1480px; background:#f6f6f6; text-align:left; }
.area_03_text { position:absolute; width:100%; padding:40px 80px 40px 182px; box-sizing:border-box; }
.area_03_text .tit { font-size:20px; font-weight:bold; color:#333; line-height:29px; margin-bottom:10px; }


.area_03_text dl { font-size:15px; color:#555; line-height:25px; margin-bottom:15px;  }
.area_03_text dl dt { font-weight:bold; }
.area_03_text dl dd { letter-spacing:-1px;  }
.area_03_text .bold { font-weight:500; color:#222; }

.area_03_text li { position:relative;  padding-left:7px; line-height:21px; font-size:14px; letter-spacing:-1px;  word-break:keep-all; }
.area_03_text li:before { content:"กค"; position:absolute; left:0;}


.area_04 { position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.area_04 a { position:absolute; width:426px; height:74px; bottom:57px; left:234px; }




.fixed_bt {
position:fixed; bottom:0; left:50%; transform:translateX(-50%); 
width:100%; height:104px; z-index:999; 
background:rgba(255,255,255,.7);
	-webkit-box-shadow: 0px -5px 15px -8px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px -5px 15px -8px rgba(0,0,0,0.2);
	-o-box-shadow: 0px -5px 15px -8px rgba(0,0,0,0.2);
	-ms-box-shadow: 0px -5px 15px -8px rgba(0,0,0,0.2);
	box-shadow: 0px -5px 15px -8px rgba(0,0,0,0.2);
		
	-webkit-backdrop-filter: brightness(1.2) blur(10px);
	-moz-backdrop-filter: brightness(1.2) blur(10px);
	-o-backdrop-filter: brightness(1.2) blur(10px);
	-ms-backdrop-filter: brightness(1.2) blur(10px);
	backdrop-filter: brightness(1.2) blur(10px);
	
	display:block;}

.fixed_bt p { width:600px; text-align:center; margin:0 auto; background:#ff7978; padding:6px 15px; margin-top:15px; border-radius:18px; color:#fff; font-size:30px; font-weight:bold; }





/*
==============================================
floating
==============================================
*/

@keyframes floatingt-m {
0% {transform: translateY(0);-webkit-transform: translateY(0);-ms-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);}
100% {transform: translateY(-3.7037vw);-webkit-transform: translateY(-3.7037vw);-ms-transform: translateY(-3.7037vw);-moz-transform: translateY(-3.7037vw);-o-transform: translateY(-3.7037vw);}
}
@keyframes floating-pc {
0% {
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
}
100% {
transform: translateY(-40px);
-webkit-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
}
}


/*
==============================================
tossing
==============================================
*/

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-2deg);	
	}
	50% {
		transform: rotate(2deg);
	}
	100% {
		transform: rotate(-2deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}








.link_1 { position:relative; }
.link_1 .form { position:absolute; top:1044px; right:333px; width:617px; height:116px; }


.link_2 { position:relative; }
.link_2 .apta { position:absolute; bottom:632px; right:383px; width:520px; height:110px; }
.link_2 .naver { position:absolute; bottom:228px; left:393px; width:100px; height:100px; }
.link_2 .insta_1 { position:absolute; bottom:228px; left:586px; width:100px; height:100px; }

.link_2 .share_bt { position:absolute; bottom:228px; right:401px; width:100px; height:100px; }
.link_2 .share_bt button { display:block; width:100%; height:100%; background:none; }


.link_3 { position:relative; }
.link_3 .insta { position:absolute; bottom:69px; right:460px; width:380px; height:90px; } 


/* BASIC css end */