@charset "UTF-8";

* { -webkit-tap-highlight-color: transparent;-webkit-text-size-adjust:none;box-sizing: border-box;letter-spacing: -0.5px;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, em, img, strong, dl, dt, dd, ol, ul, li,
label, table, tbody, thead, tr, th, td,
canvas,  footer, header, nav, section, audio, video {
margin:0;padding:0;border:0;font-size:100%;font:inherit;
vertical-align: baseline;word-wrap:break-word;}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; line-height: 1; font-family: sans-serif;
	box-sizing:border-box; background-color:#fff; letter-spacing: -0.5px;}
ol, ul {list-style: none;}
a{text-decoration: none;}
input,textarea{-webkit-appearance:none;-webkit-border-radius:0;
				border:0;outline:none;background: transparent;}
img {border:0;outline: 0;vertical-align:top;}
div { 
	-ms-user-select: none; 
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
.input_area > input::-webkit-input-placeholder {
	color: #CFD0D8;
}
.input_area > input:-ms-input-placeholder {
	color: #CFD0D8;
}
.input_area > input::-moz-placeholder {
	color: #CFD0D8;
}
.input_area > input:-moz-placeholder {
	color: #CFD0D8;
}
.container_wrap { width: 100%; height: 100%; position: fixed; background-color: #A8E8FF; overflow: hidden; }
.container_upper { width: 100%; height: 100%; text-align: center; overflow: hidden; position: relative; }
.container_upper:before { display: inline-block; width: 0; height: 100%; position: relative; vertical-align: middle; overflow-y: hidden; content: ""; font-size: 0; }
.intro_btn { width: 100%; height: 140px; background-color: #2E2F37; font-size: 0;
			position: fixed; bottom: 0; left: 0; z-index: 100; }
.btn_email, .btn_sns { display: inline-block; width: 50%; height: 100%; background-repeat: no-repeat; background-position: center center; }
.btn_email { background-image: url(../images/img_01.png); background-size: 30%; position: relative; }
.btn_email:after { content: ""; width: 1px; height: 50px; background-color: #FFF; position: absolute; top: 50%; right: 0; margin-top: -25px; }
.btn_sns { background-image: url(../images/img_02.png); background-size: 20%; }
.back_btn { width: 120px; padding: 15px; position: absolute; top: 0; left: 0; z-index: 200; }
.contents { display: inline-block; width: 75%; margin: 0 auto; position: relative; vertical-align: middle; font-size: 0; }
.contents.on { margin-top: -25%; }
.content_l, .content_r { display: inline-block; vertical-align: middle; }
.content_l { width: 40%; margin-right: 5%; }
.content_r { width: 55%; }
.content_l > img { width: 100%; }
.input_area { width: 100%; font-size: 0; padding-bottom: 30px; }
.input_area > input { display: inline-block; height: 80px; border-radius: 10px; background-color: #FFF; font-size: 1.5rem; font-weight: bold; }
.input_area > .email { width: 100%; padding: 0 15px; }
.input_area > .name { width: 100%; padding: 0 15px; }
.phone_number_01 { width: 25%; margin-right: 5%; padding-left: 45px; padding-right: 15px; /* padding: 30px 15px 30px 45px;*/
			background-image: url(../images/icon_plus.png); background-repeat: no-repeat; background-position: 15px center; background-size: 20%; }
.phone_number_02 { width: 100%; padding: 0 15px; }
.send_btn { width: 100%; }
.message_img { width: 40%; }
.home_btn { width: 10%; padding: 20px; position: relative; z-index: 100; }
.contents_wrap > img { display: block; margin: 0 auto; }
.contents_wrap { width: 100%; position: absolute; top: 50%; left: 0;
			-webkit-transform: translate(0,-50%);
			-moz-transform: translate(0,-50%);
			-ms-transform: translate(0,-50%);
			-o-transform: translate(0,-50%);
			transform: translate(0,-50%) }
.intro_title_img_01 { width: 50%; position: absolute; top: 50%; left: 50%; margin-top: -70px;
			-webkit-transform: translate(-50%,-50%);
			-moz-transform: translate(-50%,-50%);
			-ms-transform: translate(-50%,-50%);
			-o-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%); }
.intro_title_img_02, .intro_title_img_03 { position: absolute; }
.intro_title_img_02 { width: 19%; top: 30%; left: 30%; }
.intro_title_img_03 { width: 15%; top: 40%; right: 28%; }
.intro_character { width: 22%; position: absolute; bottom: 0; left: 37%;
			-webkit-animation: moveCharacter1 10s 0s linear infinite;
			-moz-animation: moveCharacter1 10s 0s linear infinite;
			-ms-animation: moveCharacter1 10s 0s linear infinite;
			-o-animation: moveCharacter1 10s 0s linear infinite;
			animation: moveCharacter1 10s 0s linear infinite; }
/* 구름위치 */
.cloud_img { position: absolute; }
.cloud_01 { width: 15%; top: 5%; left: -5%;
			-webkit-animation: moveCloud1 20s 0s linear infinite;
			-moz-animation: moveCloud1 20s 0s linear infinite;
			-ms-animation: moveCloud1 20s 0s linear infinite;
			-o-animation: moveCloud1 20s 0s linear infinite;
			animation: moveCloud1 20s 0s linear infinite; }
.cloud_02 { width: 15%; top: 25%; left: 90%;
			-webkit-animation: moveCloud2 55s 0s linear infinite;
			-moz-animation: moveCloud2 55s 0s linear infinite;
			-ms-animation: moveCloud2 55s 0s linear infinite;
			-o-animation: moveCloud2 55s 0s linear infinite;
			animation: moveCloud2 55s 0s linear infinite; }
.cloud_03 { width: 10%; top: 50%; left: -20%;
			-webkit-animation: moveCloud1 45s 0s linear infinite;
			-moz-animation: moveCloud1 45s 0s linear infinite;
			-ms-animation: moveCloud1 45s 0s linear infinite;
			-o-animation: moveCloud1 45s 0s linear infinite;
			animation: moveCloud1 45s 0s linear infinite; }
.cloud_04 { width: 25%; bottom: 10%; left: 50%;
			-webkit-animation: moveCloud2 50s 0s linear infinite;
			-moz-animation: moveCloud2 50s 0s linear infinite;
			-ms-animation: moveCloud2 50s 0s linear infinite;
			-o-animation: moveCloud2 50s 0s linear infinite;
			animation: moveCloud2 50s 0s linear infinite; }		
.cloud_05 { width: 30%; bottom: 10%; left: 0%;
			-webkit-animation: moveCloud2 25s 0s linear infinite;
			-moz-animation: moveCloud2 25s 0s linear infinite;
			-ms-animation: moveCloud2 25s 0s linear infinite;
			-o-animation: moveCloud2 25s 0s linear infinite;
			animation: moveCloud2 25s 0s linear infinite; }			

@-webkit-keyframes moveCharacter1 {
	0% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
	15% { -webkit-transform: translate(10px, -7px);
			-moz-transform: translate(10px, -7px);
			-ms-transform: translate(10px, -7px);
			-o-transform: translate(10px, -7px);
			transform: translate(10px, -7px); }
	30% { -webkit-transform: translate(10px, -28px);
			-moz-transform: translate(10px, -28px);
			-ms-transform: translate(10px, -28px);
			-o-transform: translate(10px, -28px);
			transform: translate(10px, -28px); }
	45% { -webkit-transform: translate(-5px, -32px);
			-moz-transform: translate(-5px, -32px);
			-ms-transform: translate(-5px, -32px);
			-o-transform: translate(-5px, -32px);
			transform: translate(-5px, -32px); }
	60% { -webkit-transform: translate(-20px, -28px);
			-moz-transform: translate(-20px, -28px);
			-ms-transform: translate(-20px, -28px);
			-o-transform: translate(-20px, -28px);
			transform: translate(-20px, -28px); }
	75% { -webkit-transform: translate(-30px, -14px);
			-moz-transform: translate(-30px, -14px);
			-ms-transform: translate(-30px, -14px);
			-o-transform: translate(-30px, -14px);
			transform: translate(-30px, -14px); }
	90% { -webkit-transform: translate(-10px, -7px);
			-moz-transform: translate(-10px, -7px);
			-ms-transform: translate(-10px, -7px);
			-o-transform: translate(-10px, -7px);
			transform: translate(-10px, -7px); }
	100% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
}
@-moz-keyframes moveCharacter1 {
	0% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
	15% { -webkit-transform: translate(10px, -7px);
			-moz-transform: translate(10px, -7px);
			-ms-transform: translate(10px, -7px);
			-o-transform: translate(10px, -7px);
			transform: translate(10px, -7px); }
	30% { -webkit-transform: translate(10px, -28px);
			-moz-transform: translate(10px, -28px);
			-ms-transform: translate(10px, -28px);
			-o-transform: translate(10px, -28px);
			transform: translate(10px, -28px); }
	45% { -webkit-transform: translate(-5px, -32px);
			-moz-transform: translate(-5px, -32px);
			-ms-transform: translate(-5px, -32px);
			-o-transform: translate(-5px, -32px);
			transform: translate(-5px, -32px); }
	60% { -webkit-transform: translate(-20px, -28px);
			-moz-transform: translate(-20px, -28px);
			-ms-transform: translate(-20px, -28px);
			-o-transform: translate(-20px, -28px);
			transform: translate(-20px, -28px); }
	75% { -webkit-transform: translate(-30px, -14px);
			-moz-transform: translate(-30px, -14px);
			-ms-transform: translate(-30px, -14px);
			-o-transform: translate(-30px, -14px);
			transform: translate(-30px, -14px); }
	90% { -webkit-transform: translate(-10px, -7px);
			-moz-transform: translate(-10px, -7px);
			-ms-transform: translate(-10px, -7px);
			-o-transform: translate(-10px, -7px);
			transform: translate(-10px, -7px); }
	100% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
}
@-ms-keyframes moveCharacter1 {
	0% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
	15% { -webkit-transform: translate(10px, -7px);
			-moz-transform: translate(10px, -7px);
			-ms-transform: translate(10px, -7px);
			-o-transform: translate(10px, -7px);
			transform: translate(10px, -7px); }
	30% { -webkit-transform: translate(10px, -28px);
			-moz-transform: translate(10px, -28px);
			-ms-transform: translate(10px, -28px);
			-o-transform: translate(10px, -28px);
			transform: translate(10px, -28px); }
	45% { -webkit-transform: translate(-5px, -32px);
			-moz-transform: translate(-5px, -32px);
			-ms-transform: translate(-5px, -32px);
			-o-transform: translate(-5px, -32px);
			transform: translate(-5px, -32px); }
	60% { -webkit-transform: translate(-20px, -28px);
			-moz-transform: translate(-20px, -28px);
			-ms-transform: translate(-20px, -28px);
			-o-transform: translate(-20px, -28px);
			transform: translate(-20px, -28px); }
	75% { -webkit-transform: translate(-30px, -14px);
			-moz-transform: translate(-30px, -14px);
			-ms-transform: translate(-30px, -14px);
			-o-transform: translate(-30px, -14px);
			transform: translate(-30px, -14px); }
	90% { -webkit-transform: translate(-10px, -7px);
			-moz-transform: translate(-10px, -7px);
			-ms-transform: translate(-10px, -7px);
			-o-transform: translate(-10px, -7px);
			transform: translate(-10px, -7px); }
	100% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
}
@-o-keyframes moveCharacter1 {
	0% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
	15% { -webkit-transform: translate(10px, -7px);
			-moz-transform: translate(10px, -7px);
			-ms-transform: translate(10px, -7px);
			-o-transform: translate(10px, -7px);
			transform: translate(10px, -7px); }
	30% { -webkit-transform: translate(10px, -28px);
			-moz-transform: translate(10px, -28px);
			-ms-transform: translate(10px, -28px);
			-o-transform: translate(10px, -28px);
			transform: translate(10px, -28px); }
	45% { -webkit-transform: translate(-5px, -32px);
			-moz-transform: translate(-5px, -32px);
			-ms-transform: translate(-5px, -32px);
			-o-transform: translate(-5px, -32px);
			transform: translate(-5px, -32px); }
	60% { -webkit-transform: translate(-20px, -28px);
			-moz-transform: translate(-20px, -28px);
			-ms-transform: translate(-20px, -28px);
			-o-transform: translate(-20px, -28px);
			transform: translate(-20px, -28px); }
	75% { -webkit-transform: translate(-30px, -14px);
			-moz-transform: translate(-30px, -14px);
			-ms-transform: translate(-30px, -14px);
			-o-transform: translate(-30px, -14px);
			transform: translate(-30px, -14px); }
	90% { -webkit-transform: translate(-10px, -7px);
			-moz-transform: translate(-10px, -7px);
			-ms-transform: translate(-10px, -7px);
			-o-transform: translate(-10px, -7px);
			transform: translate(-10px, -7px); }
	100% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
}
@-webkit-keyframes moveCharacter1 {
	0% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
	15% { -webkit-transform: translate(10px, -7px);
			-moz-transform: translate(10px, -7px);
			-ms-transform: translate(10px, -7px);
			-o-transform: translate(10px, -7px);
			transform: translate(10px, -7px); }
	30% { -webkit-transform: translate(10px, -28px);
			-moz-transform: translate(10px, -28px);
			-ms-transform: translate(10px, -28px);
			-o-transform: translate(10px, -28px);
			transform: translate(10px, -28px); }
	45% { -webkit-transform: translate(-5px, -32px);
			-moz-transform: translate(-5px, -32px);
			-ms-transform: translate(-5px, -32px);
			-o-transform: translate(-5px, -32px);
			transform: translate(-5px, -32px); }
	60% { -webkit-transform: translate(-20px, -28px);
			-moz-transform: translate(-20px, -28px);
			-ms-transform: translate(-20px, -28px);
			-o-transform: translate(-20px, -28px);
			transform: translate(-20px, -28px); }
	75% { -webkit-transform: translate(-30px, -14px);
			-moz-transform: translate(-30px, -14px);
			-ms-transform: translate(-30px, -14px);
			-o-transform: translate(-30px, -14px);
			transform: translate(-30px, -14px); }
	90% { -webkit-transform: translate(-10px, -7px);
			-moz-transform: translate(-10px, -7px);
			-ms-transform: translate(-10px, -7px);
			-o-transform: translate(-10px, -7px);
			transform: translate(-10px, -7px); }
	100% { -webkit-transform: translate(0, 0);
			-moz-transform: translate(0, 0);
			-ms-transform: translate(0, 0);
			-o-transform: translate(0, 0);
			transform: translate(0, 0); }
}

@-webkit-keyframes moveCloud1 {
	form { left: 0; }
	to   { left: 100%; }
}
@-moz-keyframes moveCloud1 {
	form { left: 0; }
	to   { left: 100%; }
}
@-ms-keyframes moveCloud1 {
	form { left: 0; }
	to   { left: 100%; }
}
@-o-keyframes moveCloud1 {
	form { left: 0; }
	to   { left: 100%; }
}
@keyframes moveCloud1 {
	form { left: 0; }
	to   { left: 100%; }
}
@-webkit-keyframes moveCloud2 {
	form { left: 0; }
	to   { left: -100%; }
}
@-moz-keyframes moveCloud2 {
	form { left: 0; }
	to   { left: -100%; }
}
@-ms-keyframes moveCloud2 {
	form { left: 0; }
	to   { left: -100%; }
}
@-o-keyframes moveCloud2 {
	form { left: 0; }
	to   { left: -100%; }
}
@keyframes moveCloud2 {
	form { left: 0; }
	to   { left: -100%; }
}

/* character */
.move_character { width: 20%; position: absolute; transform: translate(0, 210%);
			-webkit-animation: moveCharacter3 8s 0s linear forwards;
			-moz-animation: moveCharacter3 8s 0s linear forwards;
			-ms-animation: moveCharacter3 8s 0s linear forwards;
			-o-animation: moveCharacter3 8s 0s linear forwards;
			animation: moveCharacter3 8s 0s linear forwards; }
@-webkit-keyframes moveCharacter3 {
	from { -webkit-transform: translate(0, 210%);
			-moz-transform: translate(0, 210%);
			-ms-transform: translate(0, 210%);
			-o-transform: translate(0, 210%);
				transform: translate(0, 210%); }
	to   { -webkit-transform: translate(500%, -100%);
			-moz-transform: translate(500%, -100%);
			-ms-transform: translate(500%, -100%);
			-o-transform: translate(500%, -100%);
			transform: translate(500%, -100%); }
}
@-moz-keyframes moveCharacter3 {
	from { -webkit-transform: translate(0, 210%);
			-moz-transform: translate(0, 210%);
			-ms-transform: translate(0, 210%);
			-o-transform: translate(0, 210%);
				transform: translate(0, 210%); }
	to   { -webkit-transform: translate(500%, -100%);
			-moz-transform: translate(500%, -100%);
			-ms-transform: translate(500%, -100%);
			-o-transform: translate(500%, -100%);
			transform: translate(500%, -100%); }
}
@-ms-keyframes moveCharacter3 {
	from { -webkit-transform: translate(0, 210%);
			-moz-transform: translate(0, 210%);
			-ms-transform: translate(0, 210%);
			-o-transform: translate(0, 210%);
				transform: translate(0, 210%); }
	to   { -webkit-transform: translate(500%, -100%);
			-moz-transform: translate(500%, -100%);
			-ms-transform: translate(500%, -100%);
			-o-transform: translate(500%, -100%);
			transform: translate(500%, -100%); }
}
@-o-keyframes moveCharacter3 {
	from { -webkit-transform: translate(0, 210%);
			-moz-transform: translate(0, 210%);
			-ms-transform: translate(0, 210%);
			-o-transform: translate(0, 210%);
				transform: translate(0, 210%); }
	to   { -webkit-transform: translate(500%, -100%);
			-moz-transform: translate(500%, -100%);
			-ms-transform: translate(500%, -100%);
			-o-transform: translate(500%, -100%);
			transform: translate(500%, -100%); }
}
@keyframes moveCharacter3 {
	from { -webkit-transform: translate(0, 210%);
			-moz-transform: translate(0, 210%);
			-ms-transform: translate(0, 210%);
			-o-transform: translate(0, 210%);
				transform: translate(0, 210%); }
	to   { -webkit-transform: translate(500%, -100%);
			-moz-transform: translate(500%, -100%);
			-ms-transform: translate(500%, -100%);
			-o-transform: translate(500%, -100%);
			transform: translate(500%, -100%); }
}