@charset "utf-8";

#howto{margin-top:180px;}
#howto-tab{position:sticky;top:100px;left:0;z-index:990;width:100%;height:72px;background:#fff;border-bottom: 1px solid #E8E8E8;}
#howto-tab .inner,
#howto-tab ul,
#howto-tab li{position:relative;height:100%;}
#howto-tab ul{justify-content: center;}
#howto-tab li a{display:flex;height:100%;padding:0 30px;line-height:2;align-items: center;justify-content: center;font-size: 20px;font-weight: 600;color:#b5b5b5;}
#howto-tab li.tab-on a{color:var(--main-cl);}
#howto-tab li.tab-on::after{content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--main-cl);}
#howto .contents{padding:140px 0;}
#howto .contents .con-img img{width:600px;}
#howto .contents .con-txt h3{margin-bottom:40px;font-size: 56px;line-height:1.4;}
#howto .contents .con-txt p{margin-bottom:48px;font-size: 26px;}
#howto .contents .con-l{width:600px;}
#howto .contents .con-r{width:560px;padding:40px 0 0px 0px;background:url(../img/sec02_bg.png) no-repeat center center;background-size: 500px;}
#howto .contents:nth-child(2n) .con-r{background:url(../img/howto/howto_bg2.png) no-repeat center center;background-size: 500px;}
#howto .contents .con-r .swiper{width:358px;}
#howto .contents .con-r .swiper .con-img img{width:100%;}
#howto .contents .contents-swip-page .swiper-pagination-bullet{width:12px;height:12px;margin:0 6px;background:#E6E6E6;opacity:1;}
#howto .contents .contents-swip-page .swiper-pagination-bullet-active{background:var(--main-cl);}
#howto .contents:nth-child(2n+1){background:#fff;}
#howto .contents:nth-child(2n){background:#F1F7FF;}
.custom-pagination {display: flex;align-items: center;gap: 10px;font-size: 16px;color: #666;}
  
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {flex: 1;height: 1px;background: #eee;position: relative;width:133px}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{height:2px;background:#707070;}
#howto .con-bt{gap:24px;}
#howto .swip-nav{gap:32px;}
#howto .swiper-slide .con-tit{margin-bottom:40px;}
#howto .swiper-slide .con-tit p{margin-bottom:10px;font-size: 26px;font-weight: 700;color:var(--main-cl);}
#howto .swiper-slide .con-tit h3{font-size: 52px;line-height:1.4;}
#howto .swiper-slide .con-txt>p{margin-bottom:0;font-size: 26px;line-height:1.5;color:#545454;}
#howto .swiper-slide .con-lst{margin:20px 0 48px;font-size: 22px;line-height:1.4;color:#7e7e7e;}
#howto .swiper-slide .con-lst h4{font-weight: 600;margin-bottom:10px;}
#howto .swiper-slide .con-lst .dot{display:flex;width:22px;height:22px;margin-top:5px;font-size:15px;background:#aeaeae;align-items: center;justify-content: center;color:#fff;border-radius: 50%;}
#howto .swiper-slide .con-lst .dot + span{width:calc(100% - 34px);}
#howto .swiper-slide .con-lst li{line-height:1.6;gap:10px;align-items: stretch;}
#howto .swiper-slide{min-height:500px;display:flex;align-items: center;}
#howto .con-lst b{font-weight: 600;}


/*미디어쿼리*/
@media screen and (max-width:1300px){

  #howto-tab li a{font-size: 18px;padding:0 20px;}

  #howto .contents .con-txt h3{font-size:45px;}
  #howto .contents .con-txt p{font-size: 20px;}
  #howto .contents .con-r{width:50%;background-size: contain;}
  #howto .contents .con-l{width:50%;}
  #howto .swiper-slide .con-lst{font-size: 16px;}


}

@media screen and (max-width:1024px){
  
  #howto{margin-top:100px;}
  #howto .contents{padding:100px 0;}
  #howto-tab{overflow-x:auto;overflow-y:hidden;padding:0;}
  #howto-tab .inner{padding:0;}
  #howto-tab::-webkit-scrollbar{display:none;}
  #howto-tab .inner ul{width:max-content;}

  #howto .contents .inner{flex-direction: column;}
  #howto .contents .con-r,
  #howto .contents .con-l{width:100%;}
  #howto .contents .con-l p{text-align: center;}
  #howto .swiper-slide{width:100%;min-height:auto;justify-content: center;}
  #howto .contents .con-r .swiper{width:400px;}
  #howto .contents .con-r{background-size: 500px auto;}
  #howto .con-bt.pc-only{display:none;}
  #howto .con-bt.m-only{display:block;width:max-content;margin:20px auto 0;padding:4px 10px;background:#ebf4ff;border-radius:999px;}
  #howto .contents:nth-child(2n) .con-bt.m-only{background:#deedff;}
  #howto .con-bt.m-only .current{font-size: 12px;color:#7997BC;}
  #howto .con-bt.m-only .total{font-size: 12px;color:#C5D4E5;}
  #howto .con-bt.m-only .custom-pagination{gap:0;}
  #howto .con-bt.m-only .total::before{content:'/';display:inline-block;margin:0 5px;}
  #howto .con-bt.m-only img{position:relative;top:2px;width:20px;}
  #howto .swiper-slide h3{text-align: center;}
  #howto .contents .inner{flex-direction: column-reverse;}
  #howto .contents .con-r{padding-top:0;}
  #howto .con-txt{margin-top:20px;}
  #howto .contents .con-txt h3{margin-bottom:0px;}
  #howto .con-img{width:300px;}
  #howto .contents .con-r{background-size: 450px;}
  #howto .swiper-slide .con-tit{margin-bottom:20px;}
  #howto .contents .con-txt h3{font-size: 36px;}
  #howto .contents .con-txt p{margin-bottom:10px;font-size: 18px;}
  #howto .contents .con-lst{font-size: 16px;}
  #howto .con-r{position:relative;}
  #howto .con-r div[class*="swip-prv m-only"]{display:block;position:absolute;top:50%;left:50px;transform:translateY(-50%);}
  #howto .con-r div[class*="swip-nxt m-only"]{display:block;position:absolute;top:50%;right:50px;transform:translateY(-50%);}
  #howto .con-r div[class*="swip-prv m-only"] img,
  #howto .con-r div[class*="swip-nxt m-only"] img{width:70px;}
  
}



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

  #howto .contents{padding:60px 0;}

  #howto{margin-top:60px;}
  #howto-tab{top:60px;height:50px;}
  #howto-tab li a{font-size: 15px;}
  #howto .contents .con-r{background-size:230px 230px !important;}
  #howto .contents .con-txt h3{font-size: 26px;}
  #howto .contents .con-txt p{font-size: 16px;}
  #howto .contents .con-lst{font-size: 14px;}
  #howto .contents .con-r .swiper{width:193px;}
  #howto .contents .con-txt h3{font-size:26px;}
  #howto .con-img{width:150px;}
  #howto .swiper-slide .con-lst li{gap:5px;}
  #howto .swiper-slide .con-lst .dot{width:16px;height:16px;font-size: 10px;margin-top:2px;}
  #howto .swiper-slide .con-lst .dot + span{width:calc(100% - 21px);}
  #howto .con-r div[class*="swip-prv m-only"] img,
  #howto .con-r div[class*="swip-nxt m-only"] img{width:50px;}
  #howto .con-r div[class*="swip-prv m-only"]{left:0;}
  #howto .con-r div[class*="swip-nxt m-only"]{right:0;}

}