@charset "utf-8";

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;color:#333;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
img { vertical-align:top; }
html,body{height:100%;background:#fff;}
*{font-family: 'Malgun Gothic', sans-serif;}

.hide {position:absolute; left:-9999px; top:-9999px; font-size:0; line-height:0; height:0; overflow:hidden;}

#wrap {width:720px; margin:0 auto; position: relative;}
  #wrap .inner {position: relative; max-width: 720px; margin: 0 auto;}

  .section {}
  .main {background: #e8e8e8;}
  .s1 {background: linear-gradient(to bottom, #fff, #f6fafd, #f1f7fc, #f1f7fc);}
  /* .s3 {background: url('../images/s3_bg.png') center no-repeat; background-size: 100% 100%;} */
  .card1 .s3 {background: url('../images/s3_bg2.png') center no-repeat; background-size: 100% 100%;}
  .card2 .s3 {background: url('../images/s3_bg1.png') center no-repeat; background-size: 100% 100%;}
  .card3 .s3 {background: url('../images/s3_bg3.png') center no-repeat; background-size: 100% 100%;}
  .card4 .s3 {background: url('../images/s3_bg4.png') center no-repeat; background-size: 100% 100%;}
  .card5 .s3 {background: url('../images/s3_bg5.png') center no-repeat; background-size: 100% 100%;}
  .card6 .s3 {background: url('../images/s3_bg6.png') center no-repeat; background-size: 100% 100%;}
  .s4 {background: #eaf9f4;}

  .btn {display: block; position: absolute; left: 50%; text-indent: -999em; transform: translateX(-50%);}
  .s1 .btn1 {bottom: 47.65%; width: 57.5%; height: 3.9%;}
  .s1 .btn2 {bottom: 4.4%; width: 87%; height: 5.6%;}
  /* .s3 .btn {bottom: 0; width: 84%; height: 23%;}
  .s3 .slide1 .btn {width: 70%;}
  .s3 .slide2 .btn {width: 55%;}
  .s3 .slide5 .btn,
  .s3 .slide6 .btn {width: 48%;} */
  .s3 .btn {bottom: 0; width: 74%; height: 70%;}

  .swiper-button-prev {left: 9.2%;}
  .swiper-button-next {right: 9%;}

  /* .swiper-title {position: absolute; left: 50%; top: 38.3%; width: 533px; transform: translateX(-50%);} */
  .swiper-title .swiper-slide>div {text-align: center; opacity: 0; transition: all .5s;}
  .swiper-title .swiper-slide.swiper-slide-active>div {opacity: 1;}

  .swiper-card {position: absolute; left: 50%; top: 50.75%; width: 533px; /*padding-top: 3.7%;*/ transform: translateX(-50%); cursor: pointer;}
  .swiper-card .btn {bottom: 0; width: 57%; height: 23%;}
  .s3 .swiper-button-next,
  .s3 .swiper-button-prev {position: absolute; top: 66.3%; width: 30px; height: 36px; margin-top: 0; border: 0; background: transparent;}

  .swiper-benefit {position: absolute; left: 50%; top: 30%; width: 533px; transform: translateX(-50%);}
  /* .swiper-benefit .btn {bottom: 11%; width: 28.6%; height: 8.5%;} */
  .swiper-benefit .btn {top: 0; width: 100%; height: 100%;}
  .s4 .swiper-button-next,
  .s4 .swiper-button-prev {position: absolute; top: 56.8%; width: 30px; height: 36px; margin-top: 0; border: 0; background: transparent;}

  .aos-item {position: absolute; left: 50%; top: 50.75%; margin-left: -121px; text-align: center; pointer-events: none; z-index: 1;}

  footer {width: 100%; background: #f5f5f5;}

  #layer-pop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999;}
  #layer-pop .layer-container {position: absolute; left: 50%; top: 50%; margin-top: -205px; transform: translateX(-50%);}
  #layer-pop .layer-container .btn-close {display: block; position: absolute; left: 50%; bottom: 1.4%; width: 10%; height: 23%; margin-left: .1%; border-radius: 50%; transform: translateX(-50%);}

  .btn-floating {position: fixed; left: 0; bottom: 0; width: 100%; background: #063b6b; z-index: 99;}
  .btn-floating a {display: block; width: 100%; text-align: center;}
  .btn-floating a img {max-width: 100%;}