@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

html { height:100%; background:#000000;}
body { height:100%; background:url(/home_kr/intro/bg.png) center no-repeat; font-family: 'Open Sans', sans-serif;}


a:link, a:visited, a:hover, a:focus, a:active {text-decoration:none}


.intro_t01 { font-size:65px; font-weight:400; color:#30d5ff; line-height:60px;}
.intro_t02 { font-size:22px; font-weight:400; color:#ffffff; letter-spacing:1px;}

.intro_bt { float:left; margin-bottom:10px;}
a .intro_bt { font-size:22px; font-weight:400; color:#fff; padding:7px 25px; margin-right:10px; border:#fff solid 1px; border-radius:50px; text-align:center;}
a:hover .intro_bt { background:rgba(255,255,255,0.1);}

.intro_bt02 { float:left; margin-bottom:10px;}
a .intro_bt02 { font-size:22px; font-weight:400; color:#666; padding:7px 25px; margin-right:10px; border:#666 solid 1px; border-radius:50px; text-align:center;}

#suldo {position:absolute; border-radius:3px; padding:1px 10px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); font-size:12px; z-index:999;}

.txthtml_right { position:absolute; top:140px;}


.conteneur
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; bottom: 0;
  left:0; right: 0;
  overflow: hidden;
}
.ani_down
{
  position: absolute;
  top: -1100px;
  width: 120px;
  margin-left: 50%;
  left:-60px;
  -webkit-animation-duration: 8s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: first;
  -moz-animation-duration: 8s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: first;
  -ms-animation-duration: 8s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: first;
  animation-duration: 8s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: first;
 }
@-webkit-keyframes first 
{
  0% {-webkit-transform: translate(000px,000px);}
  25%,50% {-webkit-transform: translate(000px,75%);}
  100% {-webkit-transform: translate(000px,000px);}
}
@-moz-keyframes first 
{
  0% {-moz-transform: translate(000px,000px);}
  25%,50% {-moz-transform: translate(000px,75%);}
  100% {-moz-transform: translate(000px,000px);}
}
@-ms-keyframes first 
{
  0% {-ms-transform: translate(000px,000px);}
  25%,50% {-ms-transform: translate(000px,75%);}
  100% {-ms-transform: translate(000px,000px);}
}
@keyframes first 
{
  0% {transform: translate(000px,000px);}
  25%,50% {transform: translate(000px,75%);}
  100% {transform: translate(000px,000px);}
}


.html5_div
{
  position: absolute;
  top: 45%;
  width: 900px;
  margin-left: 50%;
  left:-200px;
  -webkit-animation-delay: 3s;-webkit-animation-duration: 7s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: second;
  -moz-animation-delay: 3s;-moz-animation-duration: 7s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: second;
  -ms-animation-delay: 3s;-ms-animation-duration: 7s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: second;
  animation-delay: 3s;animation-duration: 7s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: second;
}

@-webkit-keyframes second 
{
  0% {-webkit-transform: translate(1200px,-200px);}
  25%,50% {-webkit-transform: translate(000px,-200px);}
  100% {-webkit-transform: translate(000px,-200px);}
}
@-moz-keyframes second 
{
  0% {-moz-transform: translate(1200px,-200px);}
  25%,50% {-moz-transform: translate(000px,-200px);}
  100% {-moz-transform: translate(000px,-200px);}
}
@-ms-keyframes second 
{
  0% {-ms-transform: translate(1200px,-200px);}
  25%,50% {-ms-transform: translate(000px,-200px);}
  100% {-ms-transform: translate(000px,-200px);}
}
@keyframes second 
{
  0% {transform: translate(1200px,-200px);}
  25%,50% {transform: translate(000px,-200px);}
  100% {transform: translate(000px,-200px);}
}


.txthtml01
{
  text-align: left;
  overflow: hidden;
  padding-bottom:50px;
  -webkit-animation-delay: 5s;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: txthtml;
  -moz-animation-delay: 4.5s;-moz-animation-duration: 2s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: txthtml;
  -ms-animation-delay: 4.5s;-ms-animation-duration: 2s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: txthtml;
  animation-delay: 4.5s;animation-duration: 2s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: txthtml;
}

.txthtml02
{
  text-align: left;
  overflow: hidden;
  padding-top:50px;
  -webkit-animation-delay: 5s;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: txthtml;
  -moz-animation-delay: 5s;-moz-animation-duration: 2s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: txthtml;
  -ms-animation-delay: 5s;-ms-animation-duration: 2s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: txthtml;
  animation-delay: 5s;animation-duration: 2s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: txthtml;
}
.txthtml_right
{
  text-align: left;
  overflow: hidden;
  -webkit-animation-delay: 5s;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: txthtml;
  -moz-animation-delay: 5s;-moz-animation-duration: 2s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: txthtml;
  -ms-animation-delay: 5s;-ms-animation-duration: 2s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: txthtml;
  animation-delay: 5s;animation-duration: 2s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: txthtml;
}
.txthtml_right02
{
  text-align: left;
  overflow: hidden;
  position:absolute;
  left:-150px;
  top:227px;
  -webkit-animation-delay: 6s;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: 1;-webkit-animation-fill-mode: both;-webkit-animation-name: txthtml;
  -moz-animation-delay: 6s;-moz-animation-duration: 2s;-moz-animation-iteration-count: 1;-moz-animation-fill-mode: both;-moz-animation-name: txthtml;
  -ms-animation-delay: 6s;-ms-animation-duration: 2s;-ms-animation-iteration-count: 1;-ms-animation-fill-mode: both;-ms-animation-name: txthtml;
  animation-delay: 6s;animation-duration: 2s;animation-iteration-count: 1;animation-fill-mode: both;animation-name: txthtml;
}



@-webkit-keyframes txthtml 
{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes txthtml 
{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-ms-keyframes txthtml 
{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes txthtml 
{
  0% {opacity:0;}
  100% {opacity:1;}
}

@media screen and (max-width:767px){
.txthtml01 { width:600px; margin-left:-350px; margin-top:-60px;}
.txthtml02 { width:260px; margin-left:-500px;}
}