/* 공통 */
.inner { width: 1100px; margin: 0 auto; }
h2.title { font-size: 2.375rem; letter-spacing: -.105rem; line-height: 3.437rem; }
br.mb{display: none;}


/* 비주얼 */
.visual{width: 100%; height: 100vh; padding-top: 100px; background: rgba(0, 0, 0, 0.3);}
.visual .title_wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
.visual .title_wrap h2{font-size: 3.625rem; letter-spacing: -0.145rem; line-height: 5.375rem; }
.visual .title_wrap .btnLeft{margin-top: 25px; position: relative;}
.visual .title_wrap .app_down{width: 192px; height: 65px; line-height: 65px; font-size: 1.5625rem; border-radius: 33px; color: #fff; background: #F42D1F; transition: .3s all ease-in-out;}
.visual .title_wrap .app_down:hover{box-shadow: 0 0.313rem 0.938rem rgb(0 0 0 / 30%); transform: translateY(-0.313rem);}
.visual .title_wrap .app_list{display: none; width: 290px; border-radius: 18px; background: #fff; padding: 8px; position: absolute; left: 0; bottom: -170px; z-index: 10;}
.visual .title_wrap .app_list > li{height: 58px; line-height: 58px; font-size: 1.125rem; text-align: center; border-radius: 12px; background: #fff; margin-bottom: 10px;}
.visual .title_wrap .app_list > li:last-child{margin: 0;}
.visual .title_wrap .app_list > li:hover{background: #EFEFEF;}
.visual .title_wrap .app_list > li img{vertical-align: -5px;}

/***  비주얼 Swiper ***/
.visual_sw { position: relative; width: 100%;  height: 100%; }
.visual .visual_sw{width: 100%; height: 100%; position: relative;}
.visual_sw .swiper-slide{background-size: cover !important; background-position: center center !important;}
.visual_sw .slide_01{background: url(../images/visual_bg01.png);}
.visual_sw .slide_02{background: url(../images/visual_bg02.png);}
.visual_sw .slide_03{background: url(../images/visual_bg03.png);}
.visual_sw .slide_04{background: url(../images/visual_bg04.png);}
.visual_sw .slide_btn_box{width: 234px; height: 48px; left: 10%; bottom: 50px; position: relative; left: 50%; transform: translateX(-50%); bottom: 48px; margin-left: -440px; background: rgba(0, 0, 0, 0.3); z-index: 1;}
.visual_sw  .slide_btn_box .swiper-button-prev{width: 20px; left: 20px; top: 50%; background: url(../images/icon-arrow-left.svg) center center no-repeat; background-size: 100%;}
.visual_sw  .slide_btn_box .swiper-button-next{width: 20px; left: 60px; top: 50%; background: url(../images/icon-arrow-right.svg) center center no-repeat; background-size: 100%;}
.visual_sw  .slide_btn_box .swiper-button-prev:after, .slide_btn_box .swiper-button-next:after {opacity: 0;}
.visual_sw  .progress-round{width: 48px; height: 48px; background: rgba(0, 0, 0, 0.5); margin: 0 !important; position: absolute; right: 0; top: 0;}
.visual_sw  .progress-round #svg{position: absolute; top: -30%; left: 30%;}
.sw_info{width: 234px; height: 48px; background: rgba(0, 0, 0, 0.3); position: absolute; left: 20%; bottom: 0; z-index: 1;}
.visual .swiper-container-horizontal>.swiper-pagination-bullets, 
.visual .swiper-pagination-custom, 
.visual .swiper-pagination-fraction {color: #fff; font-size: 13px; font-family: 'GmarketSansBold' !important; left: 20px; transform: translateY(-50%); z-index: 1;}
.visual .swiper-pagination span{margin: 0 7.5px;}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
  100%{
	stroke-dasharray: 100 100;
  }
}

/* 메인페이지 공통 */
.mainpage section .mokup{opacity: 0; transform: translateY(50px); transition: 1s;}
.mainpage section.on .mokup{opacity: 1; transform: translateY(0px);}
.mainpage .main3, .mainpage .main4, .mainpage .main5{height: 100vh;}
.mainpage{overflow: hidden;}
.mainpage .graybackground{background: #FAFAFA;}
.mainpage .left_wrap{float: left; width: 55%;}
.mainpage .right_wrap{float: right; width: 45%; text-align: center; padding-top: 120px;}
.mainpage .right_wrap img{max-width: 100%;;}
.mainpage .main_title{font-size: 2.5rem; letter-spacing: -.1rem; line-height: 3.75rem; color: #2C2C2C; padding-top: 35px;}
.mainpage .sub_title{font-size: 1.625rem; letter-spacing: -0.065px; line-height: 2.5rem; padding-top: 180px;}
.main3 .mokup,
.main4 .mokup,
.main5 .mokup{width: 316px; height: 632px; margin: 0 auto; position: relative; text-align: center;}
.main3 .mokup .border,
.main4 .mokup .border,
.main5 .mokup .border{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.main3 .mokup .txt,
.main4 .mokup .txt,
.main5 .mokup .txt{ width: 86%; border-radius: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: -14px 10px 30px #777;}

/* 각 섹션 별 스타일 */
.main2{padding: 154px 0; text-align: center;}
.main2 h2 {font-size: 2rem; line-height: 3.25rem; letter-spacing: -0.08rem;}
.main2 h2 .red{display: block;}
.main4 .right_wrap{position: relative;}
.main4 .right_wrap .coupon{position: relative;  bottom: 200px; right: 30%;}
.main4 .right_wrap .coupon ul{display: flex; justify-content: flex-start; align-content: flex-start;}
.main4 .right_wrap .coupon ul li{margin-left: 16px;}
.main6 .paralax-img{transform: translateX(40%);}
.main6 .top_wrap{padding-top: 124px;}
.main6 .top_wrap h2{font-size: 2.5rem; letter-spacing: -0.1rem; line-height: 3.75rem; color: #000000;}
.main6 .top_wrap h2 strong{display: block; font-size: 1.635rem; letter-spacing: -0.065rem; line-height: 2.625rem; color: #1CB748; margin-bottom: 20px;}
.main6 .green{color: #1CB748;}
.main6 .bottom_wrap{margin-top: 50px; position: relative;}
.main6 .bottom_wrap > div{position: relative;left: 50%;margin: 0 auto;width: 100%;height: 471px;margin-left: -550px;}
.main6 .bottom_wrap .swiper-container{overflow: visible;}
.main6 .swiper-slide{width: auto !important;}
.main6 .swiper-slide .name{display: block; width: 100%; text-align: center; font-size: 1.125rem; font-weight: 500; color: #000; letter-spacing: -.045rem; line-height: 2.8125rem; margin-top: 29.69px;}
.main6 .swiper-slide:nth-child(4) .name{width: 85%;}
.main6 .swiper-slide .name img{vertical-align: -5px; margin-right: 8.5px;}
.main6 .btnCenter{margin: 106px 0 267px;}
.main6 .btnCenter > a{display: inline-block; font-size: 1.5625rem; line-height: 2.3125rem; letter-spacing: -0.0625rem; border-radius: 33px; background: #1CB748; padding: 15px 27px; color: #fff; transition: .3s all ease-in-out;}
.main6 .btnCenter > a img{vertical-align: -3px;}
.main6 .btnCenter > a:hover{box-shadow: 0 0.313rem 0.938rem rgb(0 0 0 / 30%); transform: translateY(-0.313rem);}

.policy-center{
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}
/* ---------- 퀵메뉴 ---------- */
.quick{display: none; width: 124px; height: 124px; position: fixed; top: 50%; right: 10%; z-index: 100;}
.quick.active{display: block;}
.quick > a{display: block; width: 100%; height: 100%;}
.quick > a img{width: 100%; height: 100%;}
.quick .btn-sm {width: 100%; position: absolute; left: 0; bottom: -50px;}
.tmt .quick .btn-sm a {display: block; width: 100%; box-sizing: border-box; line-height: 2.625rem; border-radius: 33px; background-color: #1CB748; font-size: 0.938rem; font-weight: 500; color: #fff; text-align: center; } 
.fadeIcon {animation-iteration-count: 1; animation-duration: .5s; animation-fill-mode: both; -webkit-animation-duration: .5s; -webkit-animation-fill-mode: both; animation-name: bounceIn; -webkit-animation-name: bounceIn; opacity: 0; }


/* ---------- 반응형 ---------- */
@media screen and (max-width: 1600px) {
  .main6 .bottom_wrap{display: block;}
  .main6 .wrap{display: none;}
}

@media screen and (max-width: 1367px) {
  html{font-size: 90%;}
  .tmt .quick{right: 3%;}
  .tmt .quick .btn-sm a{font-size: 17px;}
  .visual .title_wrap .btnLeft{margin-top: 25px;}
  .visual .title_wrap .app_list{margin-top: 13px;}

  .mainpage .main3, .mainpage .main4, .mainpage .main5{height: auto; padding: 50px 0;}
  .mainpage .right_wrap{padding-top: 80px;}
  .main2{padding: 107px 0;}
  .main6 .btnCenter{margin:92px 0 176px;}
}

@media screen and (max-width: 1100px) {
  .inner{width: 100%; padding: 0 50px;}
  .visual{height: 542px; padding-top: 60px;}
  .visual .title_wrap .btnLeft{margin-top: 21px;}
  .visual .title_wrap .app_down{width: 123px; height: 41px; line-height: 41px; font-size: 17px;}
  .visual .title_wrap .app_list > li{height: 45px; line-height: 45px;}
  .slide_btn_box{display: none;}

  .main3 .mokup .border,
  .main4 .mokup .border,
  .main5 .mokup .border{width: 90%;}
  .main3 .mokup .txt,
  .main4 .mokup .txt,
  .main5 .mokup .txt{ width: 78%;}
  .main6 .bottom_wrap > div{left: 57%;}
  .main6 .btnCenter{margin:66px 0 114px;}
  .main6 .swiper-slide img.tablet_none{display: none;}
}
@media screen and (max-width: 1024px){
  .main4 .right_wrap .coupon{right: -40%; bottom: 210px;}
  .main4 .right_wrap .coupon ul li{display: none; margin: 0;}
  .main4 .right_wrap .coupon ul li:last-child{display: block;}
  .main4 .right_wrap .coupon ul li img{width: 125px;}
}

@media screen and (max-width: 768px) {
  html{font-size: 70%;}
  .visual .title_wrap h2{font-size: 41px;}
  .mainpage .main_title{padding-top: 10px;}
  .mainpage .right_wrap{ padding-top: 40px;}
  .mainpage .sub_title{font-size: 18px; letter-spacing: -.72px; line-height: 26px; padding-top: 83px;}
  .mainpage .main_title{font-size: 28px; letter-spacing: -1.12px; line-height: 40px;}

  .main2 h2{font-size: 22px; letter-spacing: -.88px; line-height: 32px;}
  .main6 .top_wrap h2{font-size: 28px; letter-spacing: -1.12px; line-height: 40px;}
  .main6 .top_wrap h2 strong{font-size: 18px; letter-spacing: -.72px; line-height: 26px;}
  .main6 .bottom_wrap > div{left: 80%; height: 320px;}
  .main6 .main6_sw .swiper-slide >img{height: 298px;}
  .main6 .btnCenter > a{font-size: 19px;}
  .main6 .btnCenter > a img{height: 18px; vertical-align: -2px;}

  .quick{top: 20%;}
}

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

   br.mb{display: block;}
   .inner{padding: 0 22px;}
   .quick .btn-sm {bottom: -35px;}
   .tmt .quick .btn-sm a{font-size: 12px;}
  .tmt .quick {width: 124px; height: 124px;}
  .visual .title_wrap{top: 15%;}
  .visual .title_wrap .app_down{display: none;}
  .visual .title_wrap h2{font-size: 30px !important; text-align: center;}
  .visual_sw .slide_01{background: url(../images/visual_bg01_mb.png);}
  .visual_sw .slide_02{background: url(../images/visual_bg02_mb.png);}
  .visual_sw .slide_03{background: url(../images/visual_bg03_mb.png);}

  .mainpage .sub_title{ padding-top: 28px;}
  .mainpage .left_wrap{float: none; width: 100%;}
  .mainpage .right_wrap{float: none; width: 100%; padding-top: 60px;}

  .main2{padding: 64px 0;}
  .main2 h2{font-size: 18px; letter-spacing: -.72px; line-height: 27px;}
  .main3{padding-bottom: 800px;}
  .main6 .top_wrap {padding-top: 0px;}
  .main6 .top_wrap h2{font-size: 24px; letter-spacing: -.96px; line-height: 34px;}
  .main6 .top_wrap h2 strong{font-size: 15px; letter-spacing: -.6px; line-height: 23px; padding-top: 78px;}
  .main6 .bottom_wrap > div{left: 5%; margin-left: 0;}
  /* .main4 .right_wrap .coupon{right: -40%; bottom: 210px;} */
  /* .main4 .right_wrap .coupon ul li{display: none; margin: 0;}
  .main4 .right_wrap .coupon ul li:last-child{display: block;}
  .main4 .right_wrap .coupon ul li img{width: 125px;} */

}

@media screen and (max-width: 374px) {
  .main6 .top_wrap h2{font-size: 22px;}
}