@charset "utf-8";

/* 메인상단 가이드 */
.main_guide01{ width: 1560px; position:absolute; top:0; left:50%; transform: translateX(-50%); z-index: 1; display: inline-block;}

/* 메인카피 */
.main_txt{ width: 400px; word-break: keep-all; margin-top: 85px; display: inline-block; vertical-align: top;}
.main_txt span{ margin-bottom: 10px; display: block;}
.main_txt p{ font-size: 20px;font-family:"SBAggroL", sans-serif; line-height:1.2em; margin-top: 20px;}

@media all and (max-width: 1700px) {
.main_guide01{ width: 100%; padding: 0 5%;}
.main_txt{ margin-top: 60px; }
.main_txt span > img{ width:400px}
.main_txt p{ font-size: 16px;}

}
@media all and (max-width: 1580px) {
.main_txt{ margin-top: 30px;  }
.main_txt span > img{ width:380px}
}

@media all and (max-width: 1280px) {
.main_txt{ width: 280px;}
.main_txt span > img{ width:280px}
.main_txt p{ font-size: 14px;}
}
@media all and (max-width: 1024px) {
.main_txt{ width: 200px;margin-top: 10px;}
.main_txt span{ margin-bottom: 5px; }
.main_txt span > img{ width:200px}
.main_txt p{ font-size: 12px; margin-top: 10px;}
}
@media all and (max-width: 768px) {
.main_guide01{ position:relative; text-align: center;}
.main_txt{ width: 50%; text-align: left;}
.main_txt span > img{ width:180px}
}







/* main_visual */
.main_visual{ display: inline-block; margin: 30px 0 0 170px; }

@media all and (max-width: 1700px) {
.main_visual img{ width:400px;}
}
@media all and (max-width: 1580px) {
.main_visual{  margin: 20px 0 0 90px; }
.main_visual img{ width:380px;}
}
@media all and (max-width: 1400px) {
.main_visual{  margin: 20px 0 0 0; }
.main_visual img{ width:360px;}
}
@media all and (max-width: 1280px) {
.main_visual{  margin:0; }
.main_visual img{ width:280px;}
}
@media all and (max-width: 1024px) {
.main_visual img{ width:200px;}
}
@media all and (max-width: 768px) {
.main_visual{float: right; width: 50%;text-align: right;}
.main_visual img{ width:150px;}
}







/* popupzone */
.popupzone_guide{ position: absolute;top:100px; right:0; display: inline-block;}
.popupzone{position: relative; ;display: inline-block; vertical-align: top;}
.popupzone h3{ font-size: 22px; font-family:"SBAggroL", sans-serif; display: inline-block; margin-bottom: 10px;padding:5px 0 0 20px; }  
.popupzone ul{ float: right; margin-right: 20px; height: 30px;} 
.popupzone ul li{font-size:12px; background:#ccc;color: #fff; text-align: center; vertical-align:bottom; display: inline-block; height: 30px; line-height: 30px;}
.popupzone ul li > span{ padding: 0 10px; display: block;}
.popupzone ul li > span > em{ color: #00a272; display: inline-block; margin-right: 2px; font-weight: 500;}

.popupzone ul li button{ display: block;color: rgba(0,0,0,0.0); background:none;  background-repeat: no-repeat; background-position: center; width: 30px; height: 30px;text-align: center;}

.popupzone ul li .pz_prev{background-image: url("/images/point/main/popup_btn_prev.png");}
.popupzone ul li .pz_stop{background-image: url("/images/point/main/popup_btn_stop.png");}
.popupzone ul li .pz_play{background-image: url("/images/point/main/popup_btn_play.png");}
.popupzone ul li .pz_next{background-image: url("/images/point/main/popup_btn_next.png");}

.popupzone > div{ border-radius: 30px; box-shadow: -5px 5px 0 rgba(215,215,215,0.5); position: relative; overflow: hidden; height: 395px; width: 560px;}
.popupzone > div > div { position: absolute; top:0; width: 100%; display: block;}
.popupzone > div > div img{width: 100%;}

@media all and (max-width: 1700px) {
.popupzone_guide{ right:5%;top:20px;}
.popupzone h3{ font-size: 20px;}
}

@media all and (max-width: 1580px) {
.popupzone > div{ height: 350px;width: 496px;}
.popupzone > div > div img{ height: 350px;}
}
@media all and (max-width: 1280px) {
.popupzone_guide{top:0;}
.popupzone > div{ height: 260px;border-radius: 20px;width: 397px;}
.popupzone > div > div img{ height: 260px;}
}
@media all and (max-width: 1024px) {
.popupzone > div{ height: 200px;width: 284px;}
.popupzone > div > div img{ height: 200px;}

}
@media all and (max-width: 768px) {
.popupzone_guide{ position:relative; right:0; display: block; margin-top: 30px;}
.popupzone{ text-align: left;  width: 100%;}
.popupzone h3{padding:5px 0 0 10px; } 
.popupzone > div{ height: 395px; width: 100%;}
.popupzone > div > div img{ height:395px;}

}
@media all and (max-width: 480px) {
.popupzone > div{ height: 250px; }
.popupzone > div > div img{ height:250px;}
}






/* 물결웨이브 */
@keyframes wave {
0% {transform: translate3D(0, 0, 0) scaleY(1);}
/* 50% {transform: translate3D(-25%, 0, 0) scaleY(0.8);} */
100% {transform: translate3D(-50%, 0, 0) scaleY(1);}
}

.wave_guide {  position: relative; overflow: hidden; height: 40px; /* --wh:40px; min-height:var(--wh);*/ margin-top: 490px;}
.wave { animation: wave 40s linear infinite;  background: url("/images/point/main/wave.png") left top repeat-x; position: absolute; top:0; width: 200%; left:0;transform-origin: center top; /*height: var(--wh);*/height: 40px;}

@media all and (max-width: 1700px) {
.wave_guide { margin-top: 380px;}
}
@media all and (max-width: 1580px) {
.wave_guide { margin-top: 350px;}
}
@media all and (max-width: 1280px) {
.wave_guide { margin-top: 250px;}
}
@media all and (max-width: 1024px) {
.wave_guide { margin-top: 180px;}
}

@media all and (max-width: 768px) {
.wave_guide { margin-top: 40px;}
}




/* 메인중간 가이드 및 아이콘5종류 */
.main_guide02{ padding: 100px 7% 150px 7%; background: #11cf86; }
.main_guide02 ul{font-size: 0; text-align: center;}
.main_guide02 ul li{ background: url("/images/point/main/line01.png") left center no-repeat; display: inline-block; width: 20%; padding: 0 1%;}
.main_guide02 ul li:first-child{ background:none;}
.main_guide02 ul li a{width: 180px;height: 180px; color:#fff;font-family:"SBAggroL", sans-serif;  text-align: center; display:inline-block;position: relative; }

.main_guide02 ul li a > em{ border-radius: 500px; width: 180px;height: 180px; display: block; background: #fff url("/images/point/main/main_icon_bg01.png") center calc(100% + 1px) no-repeat; box-shadow: 0 5px 0 rgba(255,255,255, 0.2);}

.main_guide02 ul li a span{ background-repeat: no-repeat; background-position: center 50px; display: block; position: absolute; top:0;width: 100%; padding-top: 200px;font-size: 20px;}

.main_guide02 ul li a:hover > em,
.main_guide02 ul li a:focus > em{  background: #fff url("/images/point/main/main_icon_bg02.png") center calc(100% + 1px) no-repeat; }
.main_guide02 ul li a:hover span,
.main_guide02 ul li a:focus span{ transition:.3s ease; transform:translate(0%, -3%); font-size: 22px; color: #000;font-family:"SBAggroM", sans-serif; display: block;}
.main_guide02 ul li:nth-of-type(1) a span{ background-image:url("/images/point/main/main_icon01.png")}
.main_guide02 ul li:nth-of-type(2) a span{ background-image:url("/images/point/main/main_icon02.png")}
.main_guide02 ul li:nth-of-type(3) a span{ background-image:url("/images/point/main/main_icon03.png")}
.main_guide02 ul li:nth-of-type(4) a span{ background-image:url("/images/point/main/main_icon04.png")}
.main_guide02 ul li:nth-of-type(5) a span{ background-image:url("/images/point/main/main_icon05.png")}


@media all and (max-width: 1700px) {
.main_guide02{ padding: 100px 5% 150px 5%;}
}
@media all and (max-width: 1580px) {
.main_guide02{ padding: 80px 5% 120px 5%;}
}
@media all and (max-width: 1280px) {
.main_guide02 {padding: 70px 5% 120px 5%;}
.main_guide02 ul li a{width: 150px;height: 150px;}
.main_guide02 ul li a > em{  width: 150px;height: 150px;  }
.main_guide02 ul li a span{ background-position: center 30px;  padding-top: 165px;font-size: 16px;}
.main_guide02 ul li a:hover span,
.main_guide02 ul li a:focus span{ font-size: 18px;}
}
@media all and (max-width: 1024px) {
.main_guide02 {padding: 50px 5% 80px 5%;}
.main_guide02 ul li a{width: 120px;height: 120px;}
.main_guide02 ul li a > em{  width: 120px;height: 120px;  }
.main_guide02 ul li a span{ background-position: center 30px;  padding-top: 135px;font-size: 14px; background-size: 50px;}
.main_guide02 ul li a:hover span,
.main_guide02 ul li a:focus span{ font-size: 16px;}

.main_guide02 ul li a > em{ background-size: 80px;}
.main_guide02 ul li a:hover > em,
.main_guide02 ul li a:focus > em{  background-size: 80px;}
}
@media all and (max-width: 768px) {
.main_guide02 {padding: 0 5% 20px 5%;}
.main_guide02 ul > li{ width: 33.333%; background: none; text-align: center; margin-bottom:40px; }
.main_guide02 ul li a{width: 80px;height: 80px;}
.main_guide02 ul li a > em{  width: 80px;height: 80px;  }
.main_guide02 ul li a span{ background-position: center 20px;  padding-top: 90px;font-size: 12px; background-size: 40px;}
.main_guide02 ul li a:hover span,
.main_guide02 ul li a:focus span{ font-size: 12px;}
.main_guide02 ul li a > em{ background-size: 50px;}
.main_guide02 ul li a:hover > em,
.main_guide02 ul li a:focus > em{  background-size: 50px;}
}




/*공지사항 자주묻는질문*/
.main_guide03{  padding: 100px 10%;} 
.main_guide03 h3{ margin-bottom: 10px;}
.main_guide03 h3 a{ display: inline-block; border: 1px solid #eee; font-size: 12px; border-radius: 100px; float: right; padding: 2px 15px; margin-top: 10px;}
.main_guide03 h3 strong{font-size: 25px; font-family:"SBAggroM", sans-serif; padding-left: 50px; background-position: 10px center; background-repeat:no-repeat;display: inline-block;}

.main_guide03 .main_notice h3 strong{background-image:url("/images/point/main/notice_icon01.png"); }
.main_guide03 .main_faq h3 strong{background-image: url("/images/point/main/faq_icon01.png");}

.main_guide03 > div{  width: 45%; margin: 0 2%; display: inline-block; vertical-align: top;  } 
.main_guide03 ul{ font-family:"SBAggroL", sans-serif;  border: 1px solid #d5d5d5; border-radius: 30px; background: #fff; box-shadow: 1px 5px 0 #f6f6f6; padding: 5%;}

.main_guide03 ul li{ margin: 10px 0;}
.main_guide03 ul li a{  display: block; font-size: 0;}
.main_guide03 ul li a:hover strong,
.main_guide03 ul li a:focus strong{ text-decoration:underline;}
.main_guide03 ul li a > span{ display: inline-block; background: #b6b6b6; color: #fff;font-size: 13px; margin-right: 20px; padding: 7px 0; border-radius: 30px; width:100px; text-align: center;}
.main_guide03 ul li a > strong{ width: calc(100% - 120px); display: inline-block; vertical-align: top; font-size: 18px; height: 30px; overflow: hidden; line-height: 35px;}

@media all and (max-width: 1700px) {
.main_guide03{  padding: 80px  5%;} 
}

@media all and (max-width: 1280px) {
.main_guide03{  padding: 50px  5%;} 
.main_guide03 h3 strong{font-size: 20px; background-size: 25px;padding-left: 40px;}
.main_guide03 > div{  width: 47%; margin: 0 1%;} 
.main_guide03 ul{ border-radius: 20px;}
.main_guide03 ul li a > span{ font-size: 12px; margin-right: 10px; width:80px;}
.main_guide03 ul li a > strong{ width: calc(100% - 100px);  font-size: 15px;}

}

@media all and (max-width: 768px) {
.main_guide03 > div{  width: 100%; margin: 0 0 40px 0;} 
.main_guide03 ul{ border-radius: 20px;}
.main_guide03 ul li a > span{ font-size: 12px; margin-right: 10px; width:80px;}
.main_guide03 ul li a > strong{ width: calc(100% - 100px);  font-size: 15px;}

}