@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(#c3dbea 50%, #cc0626 );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%}
#introWrap h2{ }
/* introHeader */
#introHeader {width:100%; margin-top:50px; overflow:hidden; position:relative; z-index:999;}
#introHeader > h3 {float:left;margin-left:4%}
.intrologo{width:100%;}

#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%;font-weight:300}
#introTxt1 .it01{font-family: 'Jeju Myeongjo', serif;font-size:25px;left:3%;font-weight:300}
#introTxt1 > h3 {font-family: 'Jeju Myeongjo', serif;font-size:25px;left:3%;font-weight:300}
#introTxt1 > h4 {animation:fadeIn 2s; -moz-animation:fadeIn 2s; -webkit-animation:fadeIn 2s; -o-animation:fadeIn 2s; animation-fill-mode:backwards;left:3% }
#introTxt1 > h4: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%}

#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:540px; margin:3% auto 0 auto; position:relative; z-index:999;left:3%;color:#000;letter-spacing:-0.04em }
#introTxt2 > h3 {font-size:65px; font-weight:600; white-space:nowrap;  overflow:hidden; width:540px;  animation:type 2s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000 }
#introTxt2 > p {font-size:65px; font-weight:600; white-space:nowrap;  overflow:hidden; width:540px;  animation:type 2s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000 }

#introTxt3 {max-width:500px; margin:0 auto; position:relative; z-index:999;left:3%;color:#000;letter-spacing:-0.04em }
#introTxt3 > h3 {font-size:65px; font-weight:600; white-space:nowrap; overflow:hidden; width:500px; animation:type2 3s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000  }
#introTxt3 > p {font-size:65px; font-weight:600; white-space:nowrap; overflow:hidden; width:500px; animation:type2 3s steps(30, end);line-height:150%;letter-spacing:-0.04em;left:3%;color:#000  }


/*#introTxt4 {max-width:560px; margin:0 auto; position:relative; z-index:999;left:3%;color:#000;letter-spacing:-0.04em }
#introTxt4 > h3 {font-size:65px; font-weight:600; white-space:nowrap; overflow:hidden; width:560px; animation:type2 4s steps(30, end);line-height:140%;letter-spacing:-0.04em;left:3%;color:#000  }
#introTxt4 > p {font-size:65px; font-weight:600; white-space:nowrap; overflow:hidden; width:560px; animation:type2 4s steps(30, end);line-height:140%;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:40px; display:block; max-width:150px; box-sizing:border-box; text-align:center; margin:3% auto 0 auto; animation:fadeIn3 4s; -moz-animation:fadeIn3 4s; -webkit-animation:fadeIn3 4s; -o-animation:fadeIn3 4s; 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%}
}

@media screen and (max-width:1668px) {
}

@media screen and (max-width:1440px) {	
}

@media screen and (max-width:1280px) {

    #introTxt1{margin-top:10%;}
	#introTxt1 .it01{font-size:23px}
    #introTxt1 > h3 {font-size:23px}
	#introTxt1 > p:last-child {font-size:20px}
	.introQ {top:5%; left:0}
	.introA {top:5%; right:0}
	.intrologo{width:230px}
	#introTxt2 {max-width:457px;}
	#introTxt2 > p {text-align:center;font-size:55px; width:457px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:55px; width:457px;line-height:140%;}
	#introTxt3 {max-width:424px;}
	#introTxt3 > p {text-align:center;font-size:55px; width:424px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:55px; width:424px;line-height:140%;}
	#introTxt4 {max-width:473px;}
	#introTxt4 > p {text-align:center;font-size:55px; width:473px;line-height:130%;}
	#introTxt4 > h3 {text-align:center;font-size:55px; width:473px;line-height:130%;}
}


@media screen and (max-width:1024px) {   
    .introA {top:25%}
	.btnSkip { margin:5% auto 0 auto;top:3% }
	#introTxt2 {max-width:457px;}
	#introTxt2 > p {text-align:center;font-size:55px; width:457px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:55px; width:457px;line-height:140%;}
	#introTxt3 {max-width:425px;}
	#introTxt3 > p {text-align:center;font-size:55px; width:425px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:55px; width:425px;line-height:140%;}
	#introTxt4 {max-width:473px;}
	#introTxt4 > p {text-align:center;font-size:55px; width:473px;line-height:130%;}
	#introTxt4 > h3 {text-align:center;font-size:55px; width:473px;line-height:130%;}
}




@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:5%;}
}



@media screen and (max-width:768px) {
    #introTxt1{margin-top:20%;}
	.introQ {width:40%; top:10%; left:0}
	.introA {width:40%; top:20%; right:0}

	#introTxt1 .it01{font-size:18px}
	#introTxt1 > h4:last-child {font-size:18px}
	#introTxt1 > p:last-child {font-size:18px}
	.btnSkip{top:4%;left:3%;font-size:17px}
	.btnSkip:hover {left:3%}
	#introTxt2 {max-width:390px;}
	#introTxt2 > p {text-align:center;font-size:47px; width:390px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:47px; width:390px;line-height:140%;}
	#introTxt3 {max-width:362px;}
	#introTxt3 > p {text-align:center;font-size:47px; width:362px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:47px; width:362px;line-height:140%;}
	#introTxt4 {max-width:405px;}
	#introTxt4 > p {text-align:center;font-size:47px; width:405px;line-height:135%;}
	#introTxt4 > h3 {text-align:center;font-size:47px; width:405px;line-height:135%;}

}

@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%}
	.intrologo{width:180px}
	#introTxt1{margin-top:10%; left:0}
	#introTxt1 .it01{font-size:18px;margin-top:20%;}
	#introTxt1 > h4:last-child {font-size:18px}
	#introTxt1 > p:last-child {font-size:18px}
	.btnSkip{top:5%;left:0%;font-size:17px}
	.btnSkip:hover {left:0%}
	#introTxt2 {max-width:290px;top:3%;left:0}
	#introTxt2 > p {text-align:center;font-size:35px; width:290px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:35px; width:290px;line-height:140%;}
	#introTxt3 {max-width:269px; top:3%;left:0}
	#introTxt3 > p {text-align:center;font-size:35px; width:269px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:35px; width:269px;line-height:140%;}
	#introTxt4 {max-width:300px;top:3%;left:0}
	#introTxt4 > p {text-align:center;font-size:35px; width:300px;line-height:135%;}
	#introTxt4 > h3 {text-align:center;font-size:35px; width:300px;line-height:135%;}

}
@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%}
	.intrologo{width:180px}
	#introTxt1 .it01{font-size:18px;margin-top:20%}
	#introTxt1 > h4:last-child {font-size:18px}
	#introTxt1 > p:last-child {font-size:18px}
	.btnSkip{top:5%;left:0%;font-size:17px}
	.btnSkip:hover {left:0%}
	#introTxt2 {max-width:290px;top:3%;left:0}
	#introTxt2 > p {text-align:center;font-size:35px; width:290px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:35px; width:290px;line-height:140%;}
	#introTxt3 {max-width:269px; top:3%;left:0}
	#introTxt3 > p {text-align:center;font-size:35px; width:269px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:35px; width:269px;line-height:140%;}
	#introTxt4 {max-width:300px;top:3%;left:0}
	#introTxt4 > p {text-align:center;font-size:35px; width:300px;line-height:135%;}
	#introTxt4 > h3 {text-align:center;font-size:35px; width:300px;line-height:135%;}
}
@media screen and (max-width:420px) {
	.introQ { top:10%; left:0}
	.introA { top:40%; right:0}
	#introHeader{margin-top:30px}
	#introHeader > h1 img {width:50%}
	#introHeader > .vol {font-size:12px}
	.intrologo{width:160px}
	#introTxt1 .it01{font-size:16px;margin-top:30%}
	#introTxt1 > h4:last-child {font-size:16px}
	#introTxt1 > p:last-child {font-size:16px}
	.btnSkip{top:5%;left:0%;font-size:14px}
	.btnSkip:hover {left:0%}
	#introTxt2 {max-width:250px;top:3%;left:0}
	#introTxt2 > p {text-align:center;font-size:30px; width:250px;line-height:140%;}
	#introTxt2 > h3{text-align:center;font-size:30px; width:250px;line-height:140%;}
	#introTxt3 {max-width:232px; top:3%;left:0}
	#introTxt3 > p {text-align:center;font-size:30px; width:232px;line-height:140%;}
	#introTxt3 > h3{text-align:center;font-size:30px; width:232px;line-height:140%;}
	#introTxt4 {max-width:257px;top:3%;left:0}
	#introTxt4 > p {text-align:center;font-size:30px; width:257px;line-height:135%;}
	#introTxt4 > h3 {text-align:center;font-size:30px; width:257px;line-height:135%;}
}

@media screen and (max-width:380px) {
	.introQ { top:10%; left:0}
	.introA { top:40%; right:0}
	#introHeader{margin-top:30px}
	#introHeader > h1 img {width:50%}
	#introHeader > .vol {font-size:10px}
	.intrologo{width:160px}
	#introTxt1 .it01{font-size:15px;margin-top:35%}
	#introTxt1 > h4:last-child {font-size:15px}
	#introTxt1 > p:last-child {font-size:15px}
	.btnSkip{top:7%;font-size:13px;left:0}
	.btnSkip:hover {left:0}
	#introTxt2 {max-width:224px;top:5%;left:0}
	#introTxt2 > p {text-align:center;font-size:27px; width:224px;line-height:150%;}
	#introTxt2 > h3{text-align:center;font-size:27px; width:224px;line-height:150%;}
	#introTxt3 {max-width:208px; top:5%;left:0}
	#introTxt3 > p {text-align:center;font-size:27px; width:208px;line-height:150%;}
	#introTxt3 > h3{text-align:center;font-size:27px; width:208px;line-height:150%;}
	#introTxt4 {max-width:232px;top:5%;left:0}
	#introTxt4 > p {text-align:center;font-size:27px; width:232px;line-height:135%;}
	#introTxt4 > h3 {text-align:center;font-size:27px; width:232px;line-height:135%;}
}