@import url("font.css");



select::-ms-expand {
    display: none;
}
/*div, img {transition: all 0.5s; }*/


html, body {font-family:"NotoSansCJK", sans-serif; word-break:keep-all; width:100%; min-width:320px;  -webkit-font-smoothing: antialiased;}


#intro_img { position: relative; margin: 64px auto 60px; width: 100%; overflow: hidden;}

#intro_img .box-img img {position: relative; width: 100%; height: calc(100vw * 9/21); object-fit: cover;  }
/* #intro_img .box-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #aaa;} */
#intro_img .box-copy {  position: absolute; top: 15%; left: 50%; width: 100%; transform: translateX( -50%); text-align: center; }
#intro_img .box-copy strong {animation: add_text 1s; display: block; margin-bottom: 25px; font-weight: 500; font-size: 60px; color: #fff;line-height: 72px;}
#intro_img .box-copy p { animation: add_text 1s; font-size: 34px; font-weight: 500; color: #fff;  line-height: 130%; }
#intro_img .box-img img.mo {display:none;}
.vs-br {display: none;}

 
.intro_head{
    color:#e5e5e5;
    font-size:54px;
  }

  .intro_tag{
    color:white;
    font-size:90px;
    font-weight: 700;
  }

@media screen and (max-width: 1500px) {
	#intro_img .box-img img {height: 700px;}
	
	
	.mx400{
		max-height:400px;
	  }
	  
	  
}

@media screen and (max-width: 1000px) {
	#intro_img .box-img img {height: 600px;object-position: top;}
	#intro_img .box-copy strong {font-size: 50px;}
	#intro_img .box-copy p {font-size: 30px;}
}

@media (max-width:800px) {
	#intro_img {margin-bottom: 80px;}
	#intro_img .box-img img {height: 500px;}
	#intro_img .box-copy strong {margin-bottom: 8px;font-size: 35px;}
	#intro_img .box-copy p {font-size: 24px; }
}

@media (max-width:600px) {
	#intro_img {margin-bottom: 60px;}
	#intro_img .box-img img {height: 400px;}
	#intro_img .box-copy {top: 10%;}
	#intro_img .box-copy strong {margin-bottom: 20px;font-size: 32px;line-height: 120%;}
	#intro_img .box-copy strong br.vs-br {display: block;}
	
	
	  
	  .mx230{
		max-height:230px;
	  }
	  
	  .mx200{
		max-height:200px;
	  }
}

@media (max-width:500px) {
    #intro_img .box-img {display: flex; justify-content: center;}
    #intro_img .box-img img {width: 100%; }
}

@media (max-width:480px) {
	#intro_img {margin-top: 48px;}
}


.intro-blank { position: relative; margin: 0px auto 10px; padding: 0px 6px; width: 100%; overflow: hidden;}

.intro-blank #first{margin:64px auto 10px!important}

.intro-blank .box-img img {position: relative; width: 100%; height: calc(100vw * 9/21); object-fit: cover;  }
/* .intro-blank .box-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #aaa;} */
.intro-blank .box-copy {  position: absolute; top: 18%; left: 50%; width: 100%; transform: translateX( -50%); text-align: center; }
.intro-blank .box-copy strong {animation: add_text 1s; display: block; margin-bottom: 25px; font-weight: 500; font-size: 60px; color: #fff;line-height: 72px;}
.intro-blank .box-copy p { animation: add_text 1s; font-size: 34px; font-weight: 500; color: #fff;  line-height: 130%; }
.intro-blank .box-img img.mo {display:none;}
.vs-br {display: none;}

@media screen and (max-width: 1500px) {
	#first{margin-top:64px;}
	.intro-blank .box-img img {height: 550px;}	
	.intro-blank .box-copy{
		top:10% ;
	}

	.intro_head{
		color:#e5e5e5;
		font-size:51px;
	  }
	
	  .intro_tag{
		color:white;
		font-size:75px;
		font-weight: 700;
	  }
	
}

@media screen and (max-width: 1200px) {
	.intro-blank .box-img img {height: 540px;object-position: top;}
	.intro-blank .box-copy strong {font-size: 50px;}
	.intro-blank .box-copy p {font-size: 30px;}

	.intro_head{
		color:#e5e5e5;
		font-size:30px;
	  }
	
	  .intro_tag{
		color:white;
		font-size:55px;
		font-weight: 700;
	  }
}

@media (max-width:800px) {
	/* .intro-blank {margin-bottom: 80px;} */
	.intro-blank .box-img img {height: 500px;}
	.intro-blank .box-copy strong {margin-bottom: 8px;font-size: 35px;}
	.intro-blank .box-copy p {font-size: 24px; }
}

@media (max-width:600px) {
	/* .intro-blank {margin-bottom: 60px;} */
	.intro-blank .box-img img {height: 400px;}
	.intro-blank .box-copy {top: 10%;}
	.intro-blank .box-copy strong {margin-bottom: 20px;font-size: 32px;line-height: 120%;}
	.intro-blank .box-copy strong br.vs-br {display: block;}


	.intro_head{
		color:#e5e5e5;
		font-size:20px;
	  }
	
	  .intro_tag{
		color:white;
		font-size:34px;
		font-weight: 700;
	  }

}

@media (max-width:500px) {
    .intro-blank .box-img {display: flex; justify-content: center;}
    .intro-blank .box-img img {width: 100%; }
}

@media (max-width:480px) {
	.intro-blank {margin-top: 13px;}
}



@keyframes add_text {
	0% { opacity: 0;}
	100% { opacity: 1;}
}


.intro-link{
    border: 1px solid #fff;
    padding: 10px 50px;
    color: #fff;
    font-weight:500;
    border-radius: 8px;
}

.intro-link:hover{
  transition: 0.7s;
  background-color: rgba(0, 0, 0, 0.6);
  color:#c2c2c2;
}








.review {width:100%; padding-bottom:20px;}
.review > div:nth-child(1) {width:100%; margin-top:30px; padding-bottom:30px; }
.review > div:nth-child(1) > ul {width:300px; height:66px; display:block; margin:0 auto;}
.review > div:nth-child(1) > ul > li {float:left; width:100px;}
.review > div:nth-child(1) > ul > li > a {display:block; width:100%;; height:38px; text-align:center;}
.review > div:nth-child(1) > ul > li > a > img {width:38px;}
.review > div:nth-child(1) > ul > li > span {padding-top:10px; display:block; width:100%; height:18px; font-size:16px; transform:skew(-0.3deg); text-align:center;}
.review > div:nth-child(1) > ul > li:hover > span {color:#FF0000; font-weight:600;}

.review > div:nth-child(2) {width:100%; padding:0 20px; box-sizing:border-box; margin-top:15px;}
.review > div:nth-child(2) > div:nth-child(1) {width:100%; font-size:20px; margin-bottom:15px; text-align: left;}
.review > div:nth-child(2) > div:nth-child(1) > span {font-size:20px; font-weight:600; color:#7888c4;}
.review > div:nth-child(2) > div:nth-child(2) {width:100%; height:65px; position:relative;}
.review > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {width:100%; height:100%;}
.review > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > textarea {font-family:'Noto Sans KR';width:100%; height:100%; border:1px solid #777; padding:10px; box-sizing:border-box; transform:skew(-0.3deg);}
.review > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {position:absolute; top:10px; right:10px; width:60px; height:45px; background:#21284b; text-align:center; line-height:45px; color:#fff; font-size:14px; transform:skew(-0.3deg); border-radius:2px;}

.review > div:nth-child(3) {width:100%; margin-top:20px; padding:0 20px; box-sizing:border-box;}

.review > div:nth-child(3) > div:nth-child(1) {width:100%; text-align: left;}
.review > div:nth-child(3) > div:nth-child(1) > a {font-size:16px; color:#555; transform:skew(-0.3deg);}
.review > div:nth-child(3) > div:nth-child(1) > a:nth-child(1) {font-weight:600; color:#222; margin-right:15px; transform:skew(0);}
.review > div:nth-child(3) > div:nth-child(2) {width:100%; height:1px; background:#777; margin-top:7px;}

.re {width:100%;}
.re0 {width:100%; margin-top:10px;}
.re0 > div:nth-child(1) {width:100%; height:45px;}
.re0 > div:nth-child(1) > div {float:left; height:100%;}
.re0 > div:nth-child(1) > div:nth-child(1) {width:45px; margin-right:10px;}
.re0 > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {margin-top:3px; width:35px; height:17px; border-radius:3px; background:#c70000; text-align:center; line-height:16px;}
.re0 > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > span {font-size:13px; color:#fff;}
.re0 > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) {height:30px;}
.re0 > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > span:nth-child(1) {font-size:16px; color:#333; margin-right:8px; line-height:28px; font-weight:600;}
.re0 > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > span:nth-child(2) {font-size:14px; color:#666; line-height:30px;}
.re0 > div:nth-child(2) {width:100%; margin-top:10px; font-size:14px; line-height:24px; transform:skew(-0.3deg); letter-spacing:-1px; text-align: left;}
.re0 > div:nth-child(3) {width:100%; height:14px; margin-top:10px; padding-bottom:30px; border-bottom:1px dotted #777;}
.re0 > div:nth-child(3) > div {float:left;}
.re0 > div:nth-child(3) > div:nth-child(1) {width:30%; font-size:14px; font-weight:600; text-align: left;}
.re0 > div:nth-child(3) > div:nth-child(2) {width:70%; font-size:14px; text-align:right;}
.re0 > div:nth-child(3) > div:nth-child(2) > i {font-size:14px; margin-left:15px; margin-right:5px;}
.inputbox > .q1_2 > input { width: 49%; height: 100%; line-height: 45px; border: 2px solid #999; font-size: 18px; padding-left: 10px; box-sizing: border-box; /*margin-left: 2%;*/ border-radius: 0; background: #fff;}