@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: 100%; min-width: 720px; margin:0 auto; position: relative;}
  #wrap .inner {position: relative; max-width: 720px; margin: 0 auto;}

  #wrap.card1 {background: #f3fbfe;}
  #wrap.card2 {background: #f3fbfe;}
  #wrap.card3 {background: #f3fbfe;}

  #wrap.card1 .main {background: linear-gradient(to bottom, #f7fcfe, #eaf8fe, #c7eeff);}
  #wrap.card2 .main {background: linear-gradient(to bottom, #f9fff8, #f4feef, #e0f8c9);}
  #wrap.card3 .main {background: linear-gradient(to bottom, #f4fbfe, #f5f1fe, #fbd0fe);}
  #wrap.card1 .content {background: #f7fcfe;}
  #wrap.card2 .content {background: #fcfdfa;}
  #wrap.card3 .content {background: #fefbfc;}

  .swiper-button-next,
  .swiper-button-prev {position: absolute; width: 64px; height: 64px; margin-top: 0; border: 0;}
  #wrap.card1 .swiper-button-prev {background: url('../images/btn_prev1.png') no-repeat; background-size: 100%;}
  #wrap.card1 .swiper-button-next {background: url('../images/btn_next1.png') no-repeat; background-size: 100%;}
  #wrap.card2 .swiper-button-prev {background: url('../images/btn_prev2.png') no-repeat; background-size: 100%;}
  #wrap.card2 .swiper-button-next {background: url('../images/btn_next2.png') no-repeat; background-size: 100%;}
  #wrap.card3 .swiper-button-prev {background: url('../images/btn_prev3.png') no-repeat; background-size: 100%;}
  #wrap.card3 .swiper-button-next {background: url('../images/btn_next3.png') no-repeat; background-size: 100%;}

  .main .swiper-main {position: absolute; left: 50%; top: 32.55%; width: 90.974%; transform: translateX(-50%);}
  .main .swiper-main .swiper-button-prev {left: -7px; top: 45.5%;}
  .main .swiper-main .swiper-button-next {right: -7px; top: 45.5%;}
  #wrap.card1 .main .swiper-main .swiper-button-prev {top: 40.5%;}
  #wrap.card1 .main .swiper-main .swiper-button-next {top: 40.5%;}
  .main .aos-item {position: absolute; left: 50%; top: 32.55%; margin-left: -285px; text-align: center; pointer-events: none; z-index: 1;}
  .main .btns a {position: absolute; left: 50%; width: 83.5%; height: 6.35%; margin-left: .1%; text-indent: -999em; transform: translateX(-50%);}
  .main .btns a.btn1 {bottom: 20%;}
  .main .btns a.btn2 {bottom: 12.5%;}

  .content .swiper-content .swiper-slide {height: 0;}
  .content .swiper-content .swiper-slide.swiper-slide-active {height: auto;}
  .content .swiper-button-prev {left: 50%; top: 323px; margin-left: -307px; transform: translateX(-50%);}
  .content .swiper-button-next {left: 50%; top: 323px; margin-left: 307px; transform: translateX(-50%);}
  .content .swiper-button-next.on,
  .content .swiper-button-prev.on {position: fixed;}
  .content .btns {overflow: hidden; position: fixed; left: 0; bottom: 0; width: 100%; height: 133px; z-index: 99;}
  .content .btns a {float: left; display: block; width: 50%; height: 100%;}
  .content .btns a.btn1 {text-align: right;}
  .content .btns a.btn2 {text-align: left;}
  #wrap.card1 .content .btns a.btn1 {background: #22b5ff;}
  #wrap.card1 .content .btns a.btn2 {background: #fb684b;}
  #wrap.card2 .content .btns a.btn1 {background: #00c02d;}
  #wrap.card2 .content .btns a.btn2 {background: #ffba00;}
  #wrap.card3 .content .btns a.btn1 {background: #9f2195;}
  #wrap.card3 .content .btns a.btn2 {background: #ff32cc;}

  #wrap footer {width: 100%; padding-bottom: 133px; background: #f1f1f1;}