@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%; font-family: 'AvenirLTStd-Roman', sans-serif; overflow-x: hidden;
	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;}
@font-face {
	font-family: 'AvenirLTStd-Roman';
	src: url('../font/AvenirLTStd-Roman.eot');
	src: url('../font/AvenirLTStd-Roman.woff2') format('woff2'),
	url('../font/AvenirLTStd-Roman.woff') format('woff'),
	url('../font/AvenirLTStd-Roman.ttf') format('truetype'),
	url('../font/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}
.container_wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #A8E8FF; overflow: hidden; }
.bottom_content { width: 100%; }
.character_area > img { width: 100%; }
.contents { position: relative; z-index: 10; }
.contents > p { font-size: 1rem; color: #43464D; text-align: center; line-height: 1.3; }
.learn_more { display: block; width: 150px; margin: 5% auto; position: relative; z-index: 100; }
.bottom_text { width: 100%; text-align: center; font-size: 0.875rem; color: #2E2F37; position: absolute; bottom: 5px; left: 0; }
.move_up_character_wrap:before { display: inline-block; width: 0; height: 100%;position: relative; vertical-align: middle; content: ""; font-size: 0; }
.move_up_character_inner { display: inline-block; width: 90%; vertical-align: middle; }
.move_up_character_inner > img { display: block; width: 80%; margin: 0 auto; }
.move_up_character_inner > p { font-size: 1rem; line-height: 1.3; text-align: center; color: #2E2F37; }
.close_btn { width: 50px; height: 50px; padding: 15px; position: absolute; top: 0; right: 0; z-index: 100; opacity: 0; }
.container_wrap.on .close_btn { opacity: 1; -webkit-transition: all 1.5s; }
.character_area { height: 70%; position: relative;
			-webkit-transform: translateY(-100%);
			-moz-transform: translateY(-100%);
			-ms-transform: translateY(-100%);
			-o-transform: translateY(-100%);
			transform: translateY(-100%);
			-webkit-animation: introCharacter 1s 0s ease-out forwards;
			-moz-animation: introCharacter 1s 0s ease-out forwards;
			-ms-animation: introCharacter 1s 0s ease-out forwards;
			-o-animation: introCharacter 1s 0s ease-out forwards;
			animation: introCharacter 1s 0s ease-out forwards; }
.move_up_character_wrap { display: none; width: 100%; height: 100%;
			text-align: center; position: absolute; top: 0; left: 0;
			-webkit-transform: translateY(100%);
			-moz-transform: translateY(100%);
			-ms-transform: translateY(100%);
			-o-transform: translateY(100%);
			transform: translateY(100%); }
.container_wrap.on .move_up_character_wrap { display: block;
			-webkit-animation: upCharacter 1.5s 1s ease-out forwards;
			-moz-animation: upCharacter 1.5s 1s ease-out forwards;
			-ms-animation: upCharacter 1.5s 1s ease-out forwards;
			-o-animation: upCharacter 1.5s 1s ease-out forwards;
			animation: upCharacter 1.5s 1s ease-out forwards; }
.container_wrap.on .cloud_group { display: block;
			-webkit-animation: upCloud 3s 0s ease-out infinite;
			-moz-animation: upCloud 3s 0s ease-out infinite;
			-ms-animation: upCloud 3s 0s ease-out infinite;
			-o-animation: upCloud 3s 0s ease-out infinite;
			animation: upCloud 3s 0s ease-out infinite; }
.move_up_character { width: 100%; min-height: 200px;
			background-image: url(../images/motion/end_character_move_01.png);
			background-repeat: no-repeat; background-position: center center;
			background-size: 20%;
			-webkit-animation: upCharacterAction 0.5s 0s linear infinite;
			-moz-animation: upCharacterAction 0.5s 0s linear infinite;
			-ms-animation: upCharacterAction 0.5s 0s linear infinite;
			-o-animation: upCharacterAction 0.5s 0s linear infinite;
			animation: upCharacterAction 0.5s 0s linear infinite; }

.cloud_group { display: none; width: 100%; height: 100%; position: relative;
			-webkit-transform: translateY(100%);
			-moz-transform: translateY(100%);
			-ms-transform: translateY(100%);
			-o-transform: translateY(100%);
			transform: translateY(100%); }
.move_bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0;
			background-image: url(../images/motion/move_bg_01.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 70%; opacity: 0;
			-webkit-animation: moveBg 0.5s 0s linear 2;
			-moz-animation: moveBg 0.5s 0s linear 2;
			-ms-animation: moveBg 0.5s 0s linear 2;
			-o-animation: moveBg 0.5s 0s linear 2;
			animation: moveBg 0.5s 0s linear 2; }
.drop_character { width: 100%; height: 100%;
			-webkit-animation: dropCharacter 1.8s 0s linear forwards;
			-moz-animation: dropCharacter 1.8s 0s linear forwards;
			-ms-animation: dropCharacter 1.8s 0s linear forwards;
			-o-animation: dropCharacter 1.8s 0s linear forwards;
			animation: dropCharacter 1.8s 0s linear forwards;
			-webkit-transform: translateY(-150%);
			-moz-transform: translateY(-150%);
			-ms-transform: translateY(-150%);
			-o-transform: translateY(-150%);
			transform: translateY(-150%); }
.drop_character_inner { width: 100%; height: 100%;
			background-image: url(../images/motion/character_move01.png);
			background-repeat: no-repeat; background-position: center center;
			background-size: 20%;
			-webkit-animation: dropCharacterAction 0.5s 0s linear infinite;
			-moz-animation: dropCharacterAction 0.5s 0s linear infinite;
			-ms-animation: dropCharacterAction 0.5s 0s linear infinite;
			-o-animation: dropCharacterAction 0.5s 0s linear infinite;
			animation: dropCharacterAction 0.5s 0s linear infinite; }
/* 구름위치 */
.cloud_img { position: absolute; }
.cloud_01 { width: 15%; top: 40%; left: -5%;
	
			-webkit-animation: moveCloud1 10s 0s linear infinite;
			-moz-animation: moveCloud1 10s 0s linear infinite;
			-ms-animation: moveCloud1 10s 0s linear infinite;
			-o-animation: moveCloud1 10s 0s linear infinite;
			animation: moveCloud1 10s 0s linear infinite; }
.cloud_02 { width: 25%; top: 65%; 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: 35%; 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: 35%; bottom: 0; left: 50%;
			-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; }		
.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; }

/* 구름1 */
@-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%; }
}
/* 구름2 */
@-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%; }
}
/* 떨어지는효과 */
@-webkit-keyframes moveBg {
	0%   { background-image: url(../images/motion/move_bg_01.png); opacity: 0; }
	50%  { background-image: url(../images/motion/move_bg_02.png); opacity: 1;}
	100% { background-image: url(../images/motion/move_bg_03.png); opacity: 0;}
}
@-moz-keyframes moveBg {
	0%   { background-image: url(../images/motion/move_bg_01.png); opacity: 0; }
	50%  { background-image: url(../images/motion/move_bg_02.png); opacity: 1;}
	100% { background-image: url(../images/motion/move_bg_03.png); opacity: 0;}
}
@-ms-keyframes moveBg {
	0%   { background-image: url(../images/motion/move_bg_01.png); opacity: 0; }
	50%  { background-image: url(../images/motion/move_bg_02.png); opacity: 1;}
	100% { background-image: url(../images/motion/move_bg_03.png); opacity: 0;}
}
@-o-keyframes moveBg {
	0%   { background-image: url(../images/motion/move_bg_01.png); opacity: 0; }
	50%  { background-image: url(../images/motion/move_bg_02.png); opacity: 1;}
	100% { background-image: url(../images/motion/move_bg_03.png); opacity: 0;}
}
@keyframes moveBg {
	0%   { background-image: url(../images/motion/move_bg_01.png); opacity: 0; }
	50%  { background-image: url(../images/motion/move_bg_02.png); opacity: 1;}
	100% { background-image: url(../images/motion/move_bg_03.png); opacity: 0;}
}
/* 떨어지는 토끼 액션 */
@-webkit-keyframes dropCharacterAction {
	0%   { background-image: url(../images/motion/character_move01.png); }
	50%  { background-image: url(../images/motion/character_move02.png); }
	100% { background-image: url(../images/motion/character_move03.png); }
}
@-moz-keyframes dropCharacterAction {
	0%   { background-image: url(../images/motion/character_move01.png); }
	50%  { background-image: url(../images/motion/character_move02.png); }
	100% { background-image: url(../images/motion/character_move03.png); }
}
@-ms-keyframes dropCharacterAction {
	0%   { background-image: url(../images/motion/character_move01.png); }
	50%  { background-image: url(../images/motion/character_move02.png); }
	100% { background-image: url(../images/motion/character_move03.png); }
}
@-o-keyframes dropCharacterAction {
	0%   { background-image: url(../images/motion/character_move01.png); }
	50%  { background-image: url(../images/motion/character_move02.png); }
	100% { background-image: url(../images/motion/character_move03.png); }
}
@keyframes dropCharacterAction {
	0%   { background-image: url(../images/motion/character_move01.png); }
	50%  { background-image: url(../images/motion/character_move02.png); }
	100% { background-image: url(../images/motion/character_move03.png); }
}

/* 올라오는 토끼 */
@-webkit-keyframes upCharacterAction {
	0%   { background-image: url(../images/motion/end_character_move_01.png); }
	50%  { background-image: url(../images/motion/end_character_move_02.png); }
	100% { background-image: url(../images/motion/end_character_move_03.png); }
}
@-moz-keyframes upCharacterAction {
	0%   { background-image: url(../images/motion/end_character_move_01.png); }
	50%  { background-image: url(../images/motion/end_character_move_02.png); }
	100% { background-image: url(../images/motion/end_character_move_03.png); }
}
@-ms-keyframes upCharacterAction {
	0%   { background-image: url(../images/motion/end_character_move_01.png); }
	50%  { background-image: url(../images/motion/end_character_move_02.png); }
	100% { background-image: url(../images/motion/end_character_move_03.png); }
}
@-o-keyframes upCharacterAction {
	0%   { background-image: url(../images/motion/end_character_move_01.png); }
	50%  { background-image: url(../images/motion/end_character_move_02.png); }
	100% { background-image: url(../images/motion/end_character_move_03.png); }
}
@keyframes upCharacterAction {
	0%   { background-image: url(../images/motion/end_character_move_01.png); }
	50%  { background-image: url(../images/motion/end_character_move_02.png); }
	100% { background-image: url(../images/motion/end_character_move_03.png); }
}

/* 떨어지는토끼 전체 */
@-webkit-keyframes dropCharacter {
	from { transform: translateY(-150%); }
	to   { transform: translateY(150%); }
}
@-moz-keyframes dropCharacter {
	from { transform: translateY(-150%); }
	to   { transform: translateY(150%); }
}
@-ms-keyframes dropCharacter {
	from { transform: translateY(-150%); }
	to   { transform: translateY(150%); }
}
@-o-keyframes dropCharacter {
	from { transform: translateY(-150%); }
	to   { transform: translateY(150%); }
}
@keyframes dropCharacter {
	from { transform: translateY(-150%); }
	to   { transform: translateY(150%); }
}

/* 열기구 탄 토끼 */
@-webkit-keyframes introCharacter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@-moz-keyframes introCharacter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@-ms-keyframes introCharacter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@-o-keyframes introCharacter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes introCharacter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* 올라오는 구름 */
@-webkit-keyframes upCloud {
	from { transform: translateY(100%); }
	to   { transform: translateY(-100%); }
}
@-moz-keyframes upCloud {
	from { transform: translateY(100%); }
	to   { transform: translateY(-100%); }
}
@-ms-keyframes upCloud {
	from { transform: translateY(100%); }
	to   { transform: translateY(-100%); }
}
@-o-keyframes upCloud {
	from { transform: translateY(100%); }
	to   { transform: translateY(-100%); }
}
@keyframes upCloud {
	from { transform: translateY(100%); }
	to   { transform: translateY(-100%); }
}

/* 올라오는 토끼 */
@-webkit-keyframes upCharacter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@-moz-keyframes upCharacter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@-ms-keyframes upCharacter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@-o-keyframes upCharacter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
@keyframes upCharacter {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}