@charset "utf-8";


.sectionBody {display:block; position:relative; height:100%; margin:0; padding:0;}
/* Layout */
.main_section {display:block; position:relative; width:100%; height:100%; margin:0; padding:0; background-color:#fff;}
.main_section.type_support {}
.main_section > .inner_box {width:1140px; margin:0 auto;}
.main_section > .inner_box:last-child {margin-bottom:80px;}

/* Desktop Layout Style */
/* .sectionWrap {display:block;  height:100%; position:relative; margin:0; padding:0; box-sizing:border-box;}
.wrapper {display:block; position:relative; width:100%; height:100%; margin:0 auto; box-sizing:border-box;} */


/* header layout  */
.w-header {display:block; position:fixed; top:0; left:0; right:0; margin:0; padding:0 0 0 0; z-index:100;}
.w-header .toastBanner {display:none;}
.w-header .w-header-content {display:block; position:relative; height:120px; margin:0; padding:0; /*background-color:#FFF;*/}
.w-header .w-header-content .wrapper {padding:0;}
.w-header .w-header-content .item_1 {opacity:0; display:block; position:absolute; bottom:0; left:100%; right:0; margin:0 0 0 -150px; height:22px;  background:#ff4541; background: -moz-linear-gradient(left, #ff4541 0%, #e42828 100%); background: -webkit-linear-gradient(left, #ff4541 0%,#e42828 100%); background: linear-gradient(to right, #ff4541 0%,#e42828 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4541', endColorstr='#e42828',GradientType=1 ); box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2); transition:transform 200ms ease-in-out;}
.w-header .w-header-content .item_bg {overflow:hidden; display:block; position:absolute; top:0; bottom:0; left:50%; right:0; margin:0 0 0 -150px; background:#fff;}
/*.w-header .w-header-content .item_bg.item_down {left:0;}*/
.w-header .w-header-content .item_1 > span {display:inline-block; position:absolute; top:2px; right:20px; margin:0; width:140px; height:22px; background:url("../images/index/header_1.png") no-repeat 50%; background-size:cover; text-indent:-9999px;}
.w-header .w-header-content_scoll_down .item_1 > span {display:none;}
.w-header .w-header-content .item_1.item_1_ani_down {left: 50%; opacity: 1;}


.w-header .w-header-content .logo {opacity:0; display:block; position:absolute;  bottom:-10px; left:50%; margin:0 0 0 -144px; width:287px; height:99px; background:url("../images/index/logo_1.png") no-repeat 50%; background-size:contain; text-indent:-9999px; color:transparent;
transition:transform 200ms ease-in-out;
animation: animation-header-logo 1s 2.6s ease forwards;}
.w-header .w-header-content .logo .logo_1 {opacity:0; display:block; position:absolute;  top:0; left:0; margin:0; width:287px; height:99px; background:url("../images/index/logo_2.png") no-repeat 50%; background-size:contain; animation: animation-header-logo-2 0.3s 3.6s ease forwards;}
.w-header .w-header-content .item_2 {opacity: 0; display:block; position:absolute; bottom:-70px; left:50%; margin:0 0 0 -160px; width:380px; height:70px; text-indent:-9999px;
	animation: animation-header-text 1s 3.6s ease forwards;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;}
.w-header .w-header-content .item_2_1 {display:block; position:absolute;  top:0; left:0; margin:0; width:234px; height:63px; background:url("../images/index/text_1.png") no-repeat 50%; background-size:contain;}
.w-header .w-header-content .item_2_2 {display:block; position:absolute;  top:12px; left:230px; margin:0; width:97px; height:47px; background:url("../images/index/text_2.png") no-repeat 50%; background-size:contain;}
.w-header .w-header-content.w-header-content_scoll_down .item_2 {bottom:-54px;}

.w-header .w-header-content.w-header-content_scoll_down.w-header-content_scoll_down2 .item_2 {bottom:-42px;}
.w-header .w-header-content.w-header-content_scoll_down2 .item_2_1 {top:0; left:30px; margin:0; width:174px; height:63px;}
.w-header .w-header-content.w-header-content_scoll_down2 .item_2_2 {top:12px; left:195px; margin:0; width:72px; height:47px;}

/*.w-header .w-header-content a.logo {display:inline-block; position:absolute; left:0; top:20px;}
.w-header .w-header-content a.logo img {position:relative; width:144px; vertical-align:middle;}
.w-header .w-header-content a.logo img + img {width:112px; margin-left:16px; padding-left:20px; background:url('/images/common/layout/h1_linedot.jpg') no-repeat center left; background-size:2px 34px;}*/

@keyframes animation-header-square {
	0% {
		left: 100%;
	}
	100% {
		left: 50%;
		opacity: 1;
	}
}
@keyframes animation-header-square-2 {
	0% {
		left: 50%;
		opacity: 1;
	}
	100% {
		left: 0;
		opacity: 1;
	}
}
@keyframes animation-header-square-3 {
	0% {
		left: 0;
		opacity: 1;
	}
	100% {
		left: 50%;
		opacity: 1;
	}
}


.w-header .w-header-content .item_1_ani{
	animation: animation-header-square 0.6s 2s ease forwards;
}

@keyframes animation-header-logo {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes animation-header-logo-2 {
	0% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
/* .w-header .w-header-content .logo{

}
.w-header .w-header-content .logo .logo_1{

} */

@keyframes animation-header-text {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* main_visual */
.main_visual {box-sizing: content-box; overflow:hidden; display:block; position:fixed; width:100%; height:100%; vertical-align:middle; text-align:center;}
.main_visual .item_1 {display:block; position:absolute;  top:50%; left:50%; margin:-194px 0 0 -190px; width:380px; height:387px;  background:url("../images//index/intro_1.png") no-repeat 50%; background-size:contain;}
.main_visual .item_2 {display:block; position:absolute;  top:50%; left:50%; margin:-84px 0 0 -92px; width:182px; height:168px; background:url("../images//index/intro_2.png") no-repeat 50%; background-size:contain;}
.main_visual .item_3 {display:block; position:absolute;  top:50%; left:50%; margin:-84px 0 0 -92px; width:182px; height:168px; background:url("../images//index/intro_3.png") no-repeat 50%; background-size:contain;
-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
}
.main_visual .item_4 {opacity:0; display:block; position:absolute;  top:50%; left:50%; margin:-64px 0 0 -12px; width:67px; height:80px; background:url("../images//index/intro_4.png") no-repeat 50%; background-size:contain;}
.main_visual .item_5,
.main_visual .item_6 {opacity:0; display:block; position:absolute;  top:50%; left:50%; margin:30px 0 0 -121px; width:242px; height:90px; background:url("../images//index/intro_5.png") no-repeat 50%; background-size:contain;}
.main_visual .item_drop {display:block; position:absolute;  top:-20%; left:70%; margin:0; width:76px; height:125px; background:url("../images//index/drop_1.png") no-repeat 50%; background-size:cover;}
.main_visual .item_drop_1 {display:block; position:absolute;  top:62px; left:-30px; margin:0; width:76px; height:17px; text-align:left;}
.main_visual .item_drop_1 > span {display:inline-block; width:38px; height:17px; background:url("../images//index/drop_2.png") no-repeat 50%; background-size:cover;}
.main_visual .item_drop_2 {display:block; position:absolute;  top:62px; right:-30px; margin:0; width:76px; height:17px; text-align:right;}
.main_visual .item_drop_2 > span {display:inline-block; width:38px; height:17px; background:url("../images//index/drop_3.png") no-repeat 50%; background-size:cover;}

.main_visual .item_7 {left:70%;}
.main_visual .item_8 {left:30%;transform: scale(0.4);}
.main_visual .item_9 {left:64%;transform: scale(0.2);}

@keyframes animation-block-wave {
	0% {
		left: -100%;
	}
	100% {
		left: 0;
	}
}
.main_visual .item_wave{
	animation: animation-block-wave 8s linear infinite;
}
.main_visual .item_wave {opacity:0; display:block; position:absolute;  top:80%; left:-50%; bottom:0; width:200%;height:100%; }
.main_visual .item_wave .item_wave_1 {display:block; position:absolute;  top:0; left:0; right:0; width:100%; height:37px; background:url("../images//index/wave.png") repeat-x 0 0;}
.main_visual .item_wave .item_wave_2 {display:block; position:absolute;  top:37px; left:0; right:0; width:100%; height:100%;background: #bce8fb;}


/* .parallax {

}
.parallax_layer {
  position: fixed;
} */


@keyframes animation-water {
	0% {
		transform: translate(0, 60px) scale(1.8) rotate(-120deg);
		opacity: 0;
	}
	35% {
		transform: translate(0, 60px) scale(1) rotate(-320deg);
		opacity: 0.4;
	}
	100% {
		transform: translate(0, 0) scale(1) rotate(-720deg);
		opacity: 1;
	}
}
.main_visual .item_1_ani{
	animation: animation-water 2s linear forwards;
}

@keyframes animation-dress {
	0% {
		transform: translate(0, 60px) scale(0) rotate(12deg);
		opacity: 0;
	}
	35% {
		transform: translate(0, 60px) scale(0) rotate(12deg);
		opacity: 0;
	}
	70% {
		transform: translate(0, 0) scale(1) rotate(12deg);
		opacity: 1;
	}
	100% {
		transform: translate(0, 0) scale(1) rotate(0);
		opacity: 0;
	}
}
.main_visual .item_2{
	animation: animation-dress 3s linear forwards;
}
@keyframes animation-dress-2 {
	0% {
		transform: translate(0, 0) scale(1) rotate(12deg);
		opacity: 0;
	}
	75% {
		transform: translate(0, 0) scale(1) rotate(12deg);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0) scale(1) rotate(0);
		opacity: 1;
	}
}
.main_visual .item_3_ani{
	animation: animation-dress-2 3s ease-out forwards;
}
@keyframes animation-flash {
	0% {
		opacity: 0.1;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0.1;
	}
}
.main_visual .item_4{
	animation: animation-flash 2s 3s linear infinite;
}

@keyframes animation-wave {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		/*opacity: 0; */
		opacity: 0.2;
	}
}
@keyframes animation-wave-2 {
	0% {
		opacity: 0.2;
	}
	40% {
		opacity: 0.8;
	}
	60% {
		opacity: 0.8;
	}
	100% {
		opacity: 0.2;
	}
}
.main_visual .item_5{
	animation: animation-wave 4s 3s linear forwards;
}
.main_visual .item_6_ani{
	animation: animation-wave-2 5s 7s linear infinite;
}

@keyframes animation-drop {
	0% {
		top:-20%;
		opacity: 0.2;
	}
	50% {
		top:50%;
		opacity: 1;
	}
	100% {
		top:120%;
	}
}
.main_visual .item_7{
	animation: animation-drop 10s 2s ease-out infinite;
}
@keyframes animation-drop-arm {
	0% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
	25% {
		transform: translate(0, 0) scale(1) rotate(30deg);
	}
	50% {
		transform: translate(0, 0) scale(1) rotate(0deg);
	}
	75% {
		transform: translate(0, 0) scale(1) rotate(-30deg);
	}
	100% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
}
@keyframes animation-drop-arm-2 {
	0% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
	25% {
		transform: translate(0, 0) scale(1) rotate(-30deg);
	}
	50% {
		transform: translate(0, 0) scale(1) rotate(0deg);
	}
	75% {
		transform: translate(0, 0) scale(1) rotate(30deg);
	}
	100% {
		transform: translate(0, 0) scale(1) rotate(0);
	}
}
.main_visual .item_drop .item_drop_1{
	animation: animation-drop-arm 4s 2s linear infinite;
}
.main_visual .item_drop .item_drop_2{
	animation: animation-drop-arm-2 4s 2s linear infinite;
}
/*.main_visual .item_7 .item_7_2{
	animation: animation-drop-arm 4s 2s ease infinite;
}*/


/*@keyframes animation-drop-2 {
	0% {
		transform: translate(0, 0) scale(0.4);
		top:-20%;
		opacity: 0.2;
	}
	50% {
		top:50%;
		opacity: 1;
	}
	100% {
		top:120%;
	}
}*/
.main_visual .item_8{
	animation: animation-drop 10s 4s ease-out infinite;
}
.main_visual .item_9{
	animation: animation-drop 8s 6s ease-out infinite;
}


/* -------------------------------------------------------------------
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 800px) {
.w-header .w-header-content {height:94px;}
.w-header .w-header-content .wrapper {padding:0;}

.w-header .w-header-content .logo {
	bottom: -3px;
	width: 260px;
	height: 80px;
	margin: 0 0 0 -130px;
}
.w-header .w-header-content .logo .logo_1 {
	width:260px;
	height:80px;
}

.w-header .w-header-content .item_2 {bottom: -66px;}
.w-header .w-header-content.w-header-content_scoll_down .item_2 {bottom:-50px;}
.w-header .w-header-content .item_2_1 {top:0; left:10px; margin:0; width:214px; height:63px;}
.w-header .w-header-content .item_2_2 {top:12px; left:215px; margin:0; width:84px; height:47px;}


/* main_visual */
.main_visual .item_1 {margin:-194px 0 0 -150px; width:300px; height:387px;}
.main_visual .item_2 {margin:-84px 0 0 -72px; width:142px; height:168px;}
.main_visual .item_3 {margin:-84px 0 0 -72px; width:142px; height:168px;}
.main_visual .item_4 {opacity:0; margin:-60px 0 0 -5px; width:47px; height:80px;}
.main_visual .item_5,
.main_visual .item_6 {opacity:0; margin:15px 0 0 -91px; width:182px; height:90px;}

.main_visual .item_7 {left:70%;transform: scale(0.65);}
.main_visual .item_8 {left:10%;transform: scale(0.35);}
.main_visual .item_9 {left:54%;transform: scale(0.2);}


.main_visual .item_wave{
	animation: animation-block-wave 2.8s linear infinite;
}



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

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

}






/* ** Tablet */
@media all and (min-width:768px) and (max-width:1150px){
	/* main_visual */
	/* .main_visual li span {background-position:26% 0;}
	.main_visual .bx-controls {left:13%; width:100%;} */


}


@media all and (max-width:1150px){
	/* .headerFixed .main_visual {padding-top:80px;}
	.useToast .main_visual {padding-top:217px;}
	.sectionWrap.headerFixed {padding-top:0;}
	.w-header.headerFixed .w-header-content {padding-top:0;}
	.w-header.headerFixed .quickBg {display:none;} */



}

 @media all and (max-width:768px){
	/* .headerFixed .main_visual {padding-top:65px;}
	.useToast .main_visual {padding-top:202px;}
	.w-header.headerFixed .w-header-content {padding-top:0;}
	.w-header.headerFixed .quickBg {display:none;} */


 }



 /* 본문영역 layout Tablet  */
 @media all and (min-width:768px) and (max-width:1150px) {

 	/* .innerZone {width:100%;}

 	.w-header {padding-top:0; position:fixed; width:100%;  left:0; top:0; z-index:100;}
 	.w-header .w-header-content {height:80px;}
 	.w-header .w-header-content .innerZone {padding:0;}
 	.w-header .w-header-content a.logo {left:50%; margin-left:-148px; top:20px;}
 	.w-header .w-header-content .quickArea.pc {display:none;}
 	.w-header .w-header-content .gnbArea {left:0; width:100%; padding:0;} */

 }

 /* 본문영역 layout Mobile */
 @media all and (max-width:767px) {
 	/* .sectionWrap {padding:55px 0 0 0;}
 	.innerZone {width:100%;}

 	.w-header {padding-top:0; position:fixed; width:100%;  left:0; top:0; z-index:100;}
 	.w-header .w-header-content {height:65px;}
 	.w-header .w-header-content .innerZone {padding:0;}
 	.w-header .w-header-content a.logo {left:50%; margin-left:-103px; top:18px;}
 	.w-header .w-header-content a.logo img {width:95px;}
 	.w-header .w-header-content a.logo img + img {width:90px; margin-left:6px; padding-left:10px; top:-1px; background-size:1px 25px;}
 	.w-header .w-header-content .quickArea.pc {display:none;} */

 }