@charset "utf-8";
/* CSS Document */
#wrap.intro_wrap { background-image: url(../images/ks01_bg.jpg); }
/* ============================================================================ 시작하기 */
#btn_full {
	position: absolute;
	width: 100%;
	height: 100%;
}
section#intro {
	position: relative;
	float: left;
	width: 1000px;
	height: 610px;
}
.intro_img img { position: absolute; }
.ks01_img01 {
	left: 15px;
	bottom: 70px;
	margin-top: 0;
	margin-left: 0;
}
.ks01_img02 {
	left: 14px;
	top: 33px;
	margin-top: 0;
	margin-left: 0;
	opacity: 0;
	animation: updown 4s ease none infinite normal;
	-webkit-animation: updown 4s ease none infinite normal;
}
.ks01_img03 {
	left: 176px;
	top: -20px;
	margin-top: 0;
	margin-left: 0;
	opacity: 0;
}
.ks01_img04 {
	left: 0px;
	bottom: 40px;
	margin-top: 0;
	margin-left: 0;
}
/* animation: updown 5s ease none infinite normal;
	-webkit-animation: updown 5s ease none infinite normal; */

 @keyframes updown { 25%, 75% {
margin-top:0;
}
0%, 50%, 100% {
margin-top:-10px;
}
}
 @-webkit-keyframes updown { 25%, 75% {
margin-top:0;
}
0%, 50%, 100% {
margin-top:-10px;
}
}
 @keyframes view { 25%, 75% {
 opacity:0;
}
0%, 100% {
}
}
 @-webkit-keyframes view { 25%, 75% {
 opacity:0;
}
0%, 100% {
}
}
#ctn {
	position: relative;
	float: right;
	width: 540px;
	height: 380px;
	top: 70px;
	right: -30px;
	margin: 0;
	opacity: 0;
	border-radius: 250px 0 0 250px;
	background: #d3eedb;
}
.subject_tit {
	float: right;
	width: 95%;
	text-align: center;
	color: #134227;
	margin-top: 80px;
	font-family: nanum_sr;
	font-weight: bold;
	font-size: 59px;
	line-height: 100%;
	letter-spacing: -0.03em;
}
.numbring {
	position: relative;
	float: left;
	text-align: center;
	width: 60%;
	margin: 0 20%;
	margin-top: 38px;
	line-height: 38px;
	border-bottom: 1px solid #154128;
	color: #000;
	font-family: nanum_sr;
	font-weight: bold;
	font-size: 23px;
}
.explan {
	position: relative;
	float: left;
	width: 80%;
	margin: 0 10%;
	padding-top: 12px;
	height: auto;
	text-align: center;
	color: #000;
	line-height: 120%;
	font-size: 27px;
	font-weight: bold;
	font-family: nanum_sr;
}
.professor {
	position: relative;
	top: 60px;
	float: left;
	width: 100%;
	color: #1a8041;
	font-family: nanum_sr;
	font-weight: bold;
	font-size: 22px;
}
.btn_start {
	position: absolute;
	float: left;
	bottom: 65px;
	right: 185px;
	opacity:0;
}
.btn_start a {
	position: relative;
	z-index: 2;
	display: block;
	width: 160px;
	height: 40px;
	line-height: 40px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	font-family: nanum_sr;
	color: #fff;
	background: #2c5540;
	border-radius: 20px;
}
.btn_start a::after {
	content: "→";
	margin-left: 5px;
	transition: all 0.2s linear;
}
.btn_start a:hover::after {
	margin-right: -7px;
	margin-left: 12px;
}
	
/* title 모션 */


 @-webkit-keyframes fadeInUp01 { from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes fadeInUp01 { from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
 @-webkit-keyframes fadeInUp02 { from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
margin-top:0;
}
70% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 margin-top:0;
}
80% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
85% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:10px;
}
90% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
95% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
margin-top:10px;
}
100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
}
@keyframes fadeInUp02 { from {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
margin-top:0;
}
70% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 margin-top:0;
}
80% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
85% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:10px;
}
90% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
95% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
margin-top:10px;
}
100% {
 opacity: 1;
 -webkit-transform: none;
 transform: none;
 margin-top:0;
}
}
@-webkit-keyframes zoomInDown { from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
 @keyframes zoomInDown { from {
 opacity: 0;
 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@-webkit-keyframes bounce { from, 20%, 53%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 40%, 43% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -30px, 0);
 transform: translate3d(0, -30px, 0);
}
 70% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -15px, 0);
 transform: translate3d(0, -15px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -4px, 0);
 transform: translate3d(0, -4px, 0);
}
}
 @keyframes bounce { from, 20%, 53%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 40%, 43% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -30px, 0);
 transform: translate3d(0, -30px, 0);
}
 70% {
 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 -webkit-transform: translate3d(0, -15px, 0);
 transform: translate3d(0, -15px, 0);
}
 90% {
 -webkit-transform: translate3d(0, -4px, 0);
 transform: translate3d(0, -4px, 0);
}
}