@charset "utf-8";
@import url('reset.css');

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden;}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
.auto {margin:0 auto}
.img-responsive {display:block; max-width:100%; height:auto}

html, body {height:100%; }
.introBody {width:100%;/*background:url('../images/introBg.jpg') repeat-x*/background:linear-gradient(#f7b4b7, #a9d1e7);letter-spacing:-0.002em}
/*#cff9ff 35% , #4d7ad5 * ¿©¸§ ¿©¸§ÀÌ´Ù/
/*#a3e0e4, #e4b26c 45%, #e4b26c 55%, #98bcde 95%* »ç¸· °°ÀÌ ´õ¿î ³¯/
/*#ccdef4, #5e92de 45%, #5e92de 55%, #f6caaa 90%* ¸ÇÑ ´õ¿î ³¯/
/*(#cff9ff 10%, #f44b6b 50%, #f44b6b 60%, #bffbfc)* ¾óÀ½°úÀÚ°¡ ¸Ô°í ½ÍÀº ³¯/
/*#introWrap {background:url('../images/introQA.png') center bottom no-repeat; padding-bottom:50px}*/
#introWrap{overflow:hidden;height:100%}
/* introHeader */
#introHeader {width:100%; margin-top:50px; overflow:hidden; position:relative; z-index:999;}
#introHeader > h1 {float:left;margin-left:4%}
#introHeader > .vol {float:right;margin-right:4%; font-family:'Rajdhani', sans-serif; font-size:18px; font-weight:400}

/* introTxt */
#introTxt1 {text-align:center; margin-top:5%; position:relative; z-index:999;font-family: 'Jeju Myeongjo', serif; left:3%}
#introTxt1 .it01{font-family: 'Jeju Myeongjo', serif;font-size:24px;left:3%}
#introTxt1 > p {animation:fadeIn 2s; -moz-animation:fadeIn 2s; -webkit-animation:fadeIn 2s; -o-animation:fadeIn 2s; animation-fill-mode:backwards;left:3% }
#introTxt1 > p:last-child {font-size:25px; font-weight:500; margin-top:1%; animation:fadeIn2 2s; -moz-animation:fadeIn2 2s; -webkit-animation:fadeIn2 2s; -o-animation:fadeIn2 2s; animation-fill-mode:backwards;left:3%}
#introTxt2 {max-width:680px; margin:3% auto 0 auto; position:relative; z-index:999;left:3%;color:#000;letter-spacing:-0.04em }
#introTxt2 > p {font-size:80px; font-weight:600; white-space:nowrap;  overflow:hidden; width:680px;  animation:type 3s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000 }
#introTxt3 {max-width:772px; margin:0 auto; position:relative; z-index:999;left:3%;color:#000;letter-spacing:-0.04em }
#introTxt3 > p {font-size:80px; font-weight:600; white-space:nowrap; overflow:hidden; width:772px; animation:type2 4s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000  }
.btnSkip { left:3%;background:#000; color:#ababab; font-size:20px; font-weight:400; padding:8px 35px; border-radius:30px; display:block; max-width:150px; box-sizing:border-box; text-align:center; margin:3% auto 0 auto; animation:fadeIn3 6s; -moz-animation:fadeIn3 6s; -webkit-animation:fadeIn3 6s; -o-animation:fadeIn3 6s; animation-fill-mode:backwards; position:relative; z-index:999}
.btnSkip:hover {background:#363636; color:#fff; left:3%}
.introQ {position:absolute; top:0; left:0}
.introA {position:absolute; top:0; right:0}

@keyframes fadeIn {
  0% {opacity:0}
  100% {opacity:1}
}
@keyframes fadeIn2 {
  0% {opacity:0}
  50% {opacity:0}
  100% {opacity:1}
}
@keyframes fadeIn3 {
  0% {opacity:0}
  70% {opacity:0}
  100% {opacity:1}
}
@keyframes type{ 
  0%{width:0}
  80%{width:0}
  100%{width:100}  
}
@keyframes type2{
  0%{width:0}
  80%{width:0}
  100%{width:100} 
}

@media screen and (max-width:1680px) {
	.introQ {width:30%}
	.introA {width:30%}
	#introTxt2 {max-width:637px;}	
	#introTxt2 > p {text-align:center;font-size:75px; width:637px;line-height:150%;}
	#introTxt3 {max-width:724px;}
	#introTxt3 > p {text-align:center;font-size:75px; width:724px;line-height:150%;}


}

@media screen and (max-width:1668px) {
	#introTxt2 {max-width:637px;}	
	#introTxt2 > p {text-align:center;font-size:75px; width:637px;line-height:150%;}
	#introTxt3 {max-width:724px;}
	#introTxt3 > p {text-align:center;font-size:75px; width:724px;line-height:150%;}


}

@media screen and (max-width:1440px) {
	#introTxt2 {max-width:637px;}	
	#introTxt2 > p {text-align:center;font-size:75px; width:637px;line-height:150%;}
	#introTxt3 {max-width:724px;}
	#introTxt3 > p {text-align:center;font-size:75px; width:724px;line-height:150%;}
}

@media screen and (max-width:1280px) {
    #introTxt1{margin-top:10%;}
	#introTxt1 > p:last-child {font-size:23px}
	.introQ {top:5%; left:0}
	.introA {top:5%; right:0}
	#introTxt2 {max-width:637px;}
	#introTxt2 > p {text-align:center;font-size:75px; width:637px;line-height:150%;}
	#introTxt3 {max-width:724px;}
	#introTxt3 > p {text-align:center;font-size:75px; width:724px;line-height:150%;}
}


@media screen and (max-width:1024px) {
    #introTxt1{margin-top:10%;}
	#introTxt1 > p:last-child {font-size:20px}
	#introTxt2 {max-width:553px;margin-top:5%;}
	#introTxt2 > p {text-align:center;font-size:65px; width:553px;line-height:140%;}
	#introTxt3 {max-width:627px;}
	#introTxt3 > p {text-align:center;font-size:65px; width:627px;line-height:140%;}
	.introQ {top:7%}
    .introA {top:25%}
	.btnSkip { margin:3% auto 0 auto; }


}




@media screen and (max-width:968px) {
	#introHeader > h1 img {width:80%}
	#introHeader > .vol {font-size:15px;margin-right:5%}
	.introQ {width:40%; top:-5%; left:0}
	.introA {width:40%; top:10%; right:0}
	#introTxt1{margin-top:10%;}
	.btnSkip{margin-top:8%;}
	#introTxt1 > p:last-child {font-size:20px}
	#introTxt2 {max-width:553px;}
	#introTxt2 > p {font-size:65px; width:553px;line-height:180%;text-align:center}
	#introTxt3 {max-width:627px; margin-top:-30px;}
	#introTxt3 > p {font-size:65px; width:627px;line-height:180%;text-align:center}
	.btnSkip{top:-3%}

}



@media screen and (max-width:768px) {
    #introTxt1 {margin-top:18%;left:0;font-size:20px}
	#introTxt1 > p:last-child {font-size:20px}
	#introTxt2 {max-width:466px;left:0}
	#introTxt2 > p {font-size:55px; width:466px;text-align:center;line-height:210%;left:0}
	#introTxt3 {max-width:530px;left:0}
	#introTxt3 > p {font-size:55px; width:530px;text-align:center;line-height:210%;left:0}
	.introQ {width:40%; top:10%; left:0}
	.introA {width:40%; top:20%; right:0}
	.btnSkip{left:0}
	.btnSkip:hover {left:0%}

}

@media screen and (max-width:520px) {
	.introQ { top:10%; left:0}
	.introA { top:30%; right:0}
	#introHeader > h1 img {width:70%}
	#introHeader > .vol {font-size:14px;margin-right:5%}
	#introTxt1 {margin-top:35%}
	#introTxt1 .it01{font-size:18px}
	#introTxt1 > p {font-size:22px;}
	#introTxt1 > p:last-child {font-size:20px}
	#introTxt2 {max-width:382px;}
	#introTxt2 > p {font-size:45px; width:382px;text-align:center;line-height:230%;}
	#introTxt3 {max-width:435px;}
	#introTxt3 > p {font-size:45px; width:435px; text-align:center;line-height:230%;}
	.btnSkip{left:0;margin:5% auto 0 auto;}
	.btnSkip:hover {left:0%}

}
@media screen and (max-width:480px) {
	.introQ { top:10%; left:0}
	.introA { top:30%; right:0}
	#introHeader > h1 img {width:70%}
	#introHeader > .vol {font-size:14px;margin-right:5%}
	#introTxt1 {margin-top:30%}
	#introTxt1 .it01{font-size:18px}
	#introTxt1 > p {font-size:22px;}
	#introTxt1 > p:last-child {font-size:22px}
	#introTxt2 {max-width:340px;}
	#introTxt2 > p {font-size:40px; width:340px;text-align:center;line-height:230%;}
	#introTxt3 {max-width:386px;}
	#introTxt3 > p {font-size:40px; width:386px; text-align:center;line-height:230%;}
	.btnSkip{left:0}
	.btnSkip:hover {left:0%}
}
@media screen and (max-width:424px) {
	.introQ { top:10%; left:0}
	.introA { top:40%; right:0}
	#introHeader{margin-top:30px}
	#introHeader > h1 img {width:50%}
	#introHeader > .vol {font-size:11px;margin-right:5%}    
	#introTxt1 > p:last-child {font-size:20px}
	#introTxt1 {margin-top:35%}
	#introTxt2 {max-width:315px;margin-top:10%}
	#introTxt2 > p {font-size:37px; width:315px;text-align:center;line-height:250%;}
	#introTxt3 {max-width:357px;}
	#introTxt3 > p {font-size:37px; width:357px; text-align:center;line-height:250%;}
	.btnSkip{left:0}
	.btnSkip:hover {left:0%}
}

@media screen and (max-width:380px) {
	.introQ { top:10%; left:0}
	.introA { top:40%; right:0}
	#introHeader{margin-top:35px}
	#introHeader > h1 img {width:50%}
	#introHeader > .vol {position:absolute; top:5%; right:5%;font-size:9px}
	#introTxt1 .it01{font-size:15px}
	#introTxt1 > p:last-child {font-size:18px}
	#introTxt1 {margin-top:30%}
	#introTxt2 {max-width:272px;margin-top:10%;}
	#introTxt2 > p {font-size:32px; width:272px;text-align:center;line-height:250%;}
	#introTxt3 {max-width:309px;}
	#introTxt3 > p {font-size:32px; width:309px; text-align:center;line-height:250%;}
	.btnSkip{left:0}
	.btnSkip:hover {left:0%}
}