/* 공통 */ 

.sec{padding: 140px 0;}

.main_title{margin-bottom: 80px;}
.main_title h2{font-size: 40px; font-weight:800; display: block; font-family:'NanumSquareNeo', sans-serif;}
.main_title b{font-size: 20px; color: #FFB800; font-weight: 600;  margin-bottom: 24px; display: block;}
.main_title p{font-size:18px; color: #4D4D4D; margin-top: 24px;}


/* sec01 */
.sec01{display: flex; justify-content: space-between; height: calc(100vh - 95px); padding: 0 !important; margin-top: 95px; position: relative;}
.sec01 .left{width: calc(100% - 120px); height: 100%; border-top-right-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden;}
.sec01 .left .swiper {width: 100%; height: 100%;}
.sec01 .left .swiper-slide{background-position:center;background-repeat: no-repeat; background-size: cover;
  /* background-image: url(../img/main/sec01_bg.png);  */
  display: flex; align-items: center;
}

.sec01 .left .txt_wrap{width: 1440px; max-width: 100%;margin: 0 auto; color: #fff;}
.sec01 .left .txt_wrap b{font-size: 56px; font-weight: 800; display: block; width: 500px; max-width: 100%;  font-family:'NanumSquareNeo', sans-serif;}
.sec01 .left .txt_wrap p{font-size: 20px; margin-top: 32px;  width: 500px; max-width: 100%;}

.sec01 .left .arrow{position: absolute; display: flex; z-index: 1; gap:0 16px; align-items: center; bottom:23%; width: 1440px; max-width: 100%; margin: 0 auto; left: 50%; transform: translateX(-50%);}
.sec01 .left .arrow .left_arrow{cursor: pointer; display: flex; align-items: center; justify-content: center;}
.sec01 .left .arrow .right_arrow{cursor: pointer; display: flex; align-items: center; justify-content: center;}
.sec01 .left .swiper-pagination-fraction{font-size: 20px; display: flex; gap: 11px; width: auto; position: static; margin:0 10px; color: #fff;}
.sec01 .left .swiper-pagination-fraction span{position: relative;}
.sec01 .left .swiper-pagination-fraction span::before{content: "0"; display: inline-block;}
.sec01 .left .swiper-pagination-total{opacity: 0.4;}
.sec01 .left .swiper-scrollbar{width: 160px; position: static; margin-left: 16px; height: 2px; opacity: 1 !important; background-color: #fff !important;}
.swiper-scrollbar-drag{background: #FFB800 !important;}

.sec01 .right{position: fixed; display: flex; z-index:99; right: 0; top: 95px; transform: translateX(82%); transition-duration: 0.3s; height: calc(100vh - 100px);}
.sec01 .right .click_btn{width: 100px;cursor: pointer; height: 100%;  display: flex;  align-items: center; justify-content: center; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #FFB800; color: #fff;}
.sec01 .right .click_btn >div{transform: rotate(-90deg);  display: flex;  align-items: center; justify-content: center;}
.sec01 .right .click_btn img{width: 20px;}
.sec01 .right .click_btn >div p{white-space: nowrap; margin-right: 16px; font-size: 24px; font-weight: 800;}


.sec01 .right .btn_wrap{width: 450px; padding: 48px 32px; background-color: #fff; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px 0;}
.sec01 .right .btn_wrap button{border-radius: 5px; font-size: 23px; font-weight: 800; padding:16px 12px;text-align: center; width: 100%; display: block; border: 1px solid #ddd;}
.sec01 .right .btn_wrap button span{display: none;}
.sec01 .right .btn_wrap button span img{width: 25px;}
.sec01 .right .btn_wrap button:hover{background-color: #1D8FF9; border: 1px solid #1D8FF9; color: #fff;}
.sec01 .right .btn_wrap button:hover span{display: inline-block; vertical-align: middle; margin-left: 16px;}

.sec01 .right.click{transform: translateX(0%);}
.sec01 .right.click .click_btn img{transform: rotate(180deg);}
.sec01 .right.click .click_btn{background-color: #333;}

/* sec02 */

.sec02 .btn_wrap{animation: float_e 1.5s infinite linear; border: 1px solid #FFB800; width: 280px; max-width: 100%; color: #FFB800; background-color: rgba(255,183,67,0.1); padding: 16px; border-radius: 5px;}
.sec02 .btn_wrap a{ font-size: 22px; font-weight: 800;  display: flex; align-items: center; justify-content: center;}
.sec02 .btn_wrap a span{margin-left: 16px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #FFB800;}
.sec02 .btn_wrap a span img{width: 18px;}
.sec02 .btn_wrap a i{font-weight: 800;}

@keyframes float_e{
  0%{transform: translateY(0); box-shadow: 0 0 0 rgba(255,187,0,0.1);}
  50%{transform: translateY(-10px);  box-shadow: 0 0 30px rgba(255,187,0,0.5);}
  100%{transform: translateY(0);  box-shadow: 0 0 0 rgba(255,187,0,0.1);}
}



.sec02 .left{width:520px; padding-right: 50px;}
.sec02 .right{width: calc(100% - 520px);}
.sec02 .right .inquiry_swipe{height:328px !important; border-top: 1px solid #ddd;}
.sec02 .right .swiper-slide .con_wrap{display: flex; height: 100%; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid #ddd;}
.sec02 .right .swiper-slide .con_wrap .delivery_info b{font-weight: 800;}
.sec02 .right .swiper-slide .con_wrap .delivery_info{display: flex; align-items: center; gap: 16px;}
.sec02 .right .swiper-slide .con_wrap .cus_info{display: flex; align-items: center; gap: 32px;}

.sec02 .right .swiper-slide .con_wrap .cus_info p{color: #4d4d4d;}
.sec02 .right .swiper-slide .con_wrap .cus_info span{border-radius: 55px; padding: 7px 16px; }
.sec02 .right .swiper-slide .con_wrap .cus_info span.appli{background-color: #1D8FF9; color: #fff;}
.sec02 .right .swiper-slide .con_wrap .cus_info span.confirmed{ background-color: #FFB800; color: #fff;}
.sec02 .right .swiper-slide .con_wrap .cus_info span.comp{background-color: #bcbcbc;  color: #fff;}
.sec02 .right .swiper-slide:first-child .con_wrap{}




/* sec03 */
.sec03{position: relative; overflow: hidden;}
.sec03::after{content:""; width: 1820px; height: 100%; right: 0; top: -50px;
border-top-left-radius: 80px; border-bottom-left-radius: 80px;
  background: url(../img/main/sec03_bg.png)no-repeat right center / contain; position: absolute;
  z-index: -1;
}
.sec03::before{content:""; width: 1820px; height: 100%; right: 0; top: 50%;
  transform: translateY(-50%); border-top-left-radius: 80px; border-bottom-left-radius: 80px;
  background: #F7F8FB; position: absolute;
  z-index: -1;
}
.sec03 .list ul{display: flex; gap:24px;}
.sec03 .list ul li .con_wrap{background-color: #fff; border-radius: 10px; padding:48px 32px; transition-duration: 0.3s;}
.sec03 .list ul li{width: 20%;}
.sec03 .list ul li .btn_wrap{margin-top: 24px; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between;}
.sec03 .list ul li .btn_wrap p{font-size: 18px;}
.sec03 .list ul li .btn_wrap span{opacity: 0; transition-duration: 0.3s; width: 30px; transition-duration: 0.3s;  position: relative; height: 30px; border-radius: 50%; background-color: #FFB800; display: flex; align-items: center; justify-content: center;}
.sec03 .list ul li:hover .btn_wrap span{opacity: 1;}
.sec03 .list ul li .btn_wrap span{}
.sec03 .list ul li .btn_wrap span::after{content: ""; width: 45px; height: 45px; border-radius: 50%; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);background-color: rgba(255,255,255,0.2);
}
.sec03 .list ul li:hover .btn_wrap span{transform: translateX(8px);}

.sec03 .list ul li .top{display: flex; flex-direction: column; gap:44px 0; justify-content: center; align-items: flex-start;}
.sec03 .list ul li .top .txt_wrap b{display: block; font-size: 25px; font-weight: 800; height: 65px;}
.sec03 .list ul li .top .txt_wrap p{color: #4d4d4d; height: 72px; margin-top: 24px; transition-duration: 0.3s;}
.sec03 .list ul li .top .icon_wrap{background-position:center; min-width: 72px; background-size: contain; background-repeat: no-repeat; height: 40px; display: flex; align-items: flex-end; justify-content: flex-start;}

.sec03 .list ul li:nth-child(1) .top .icon_wrap{background-image: url(../img/main/sec03_icon02.svg);}
.sec03 .list ul li:nth-child(2) .top .icon_wrap{background-image: url(../img/main/sec03_icon03.svg);}
.sec03 .list ul li:nth-child(3) .top .icon_wrap{background-image: url(../img/main/sec03_icon01.svg);}
.sec03 .list ul li:nth-child(4) .top .icon_wrap{background-image: url(../img/main/sec03_icon04.svg);}
.sec03 .list ul li:nth-child(5) .top .icon_wrap{background-image: url(../img/main/sec03_icon06.svg);  background-size: 45px;}

.sec03 .list ul li:nth-child(1):hover .top .icon_wrap{background-image: url(../img/main/sec03_icon02_2.svg);}
.sec03 .list ul li:nth-child(2):hover .top .icon_wrap{background-image: url(../img/main/sec03_icon03_2.svg);}
.sec03 .list ul li:nth-child(3):hover .top .icon_wrap{background-image: url(../img/main/sec03_icon01_2.svg);}
.sec03 .list ul li:nth-child(4):hover .top .icon_wrap{background-image: url(../img/main/sec03_icon04_2.svg);}
.sec03 .list ul li:nth-child(5):hover .top .icon_wrap{background-image: url(../img/main/sec03_icon06_2.svg);}





.sec03 .list ul li:hover .con_wrap{background-color: #1D8FF9; box-shadow:0 0 30px rgba(51,157,255,0.8); transform: translate(-10px, -20px); color: #fff !important;}
.sec03 .list ul li:hover .con_wrap p{color: #fff;}

/* sec04 */
.sec04{padding-bottom: 0 !important;}
.sec04 .top{margin-bottom: 80px;}
.sec04 .top>div{width: 50%;}
.sec04 .top .tab{text-align: right;}
.sec04 .main_title{margin-bottom: 0;}

.sec04 .review_swipe .img_wrap{background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer;
  background-image: url(../img/sub/service02.png); padding-bottom: 50%; 
   position: relative;
}
.sec04 .review_swipe .swiper-slide:nth-child(2n) .img_wrap{background-image: url(../img/sub/service04.png);}



.sec04 .review_swipe p{position: absolute; left: 30px; bottom: 30px;  font-family:'NanumSquareNeo' !important;
  font-size: 22px; font-weight: 800; text-shadow: 0 0 10px rgba(0,0,0,0.2); color: #fff;}
.sec04 .btm{width: 1440px; max-width: 100%; margin: 0 auto; position: relative;}
.sec04 .btm::after{content: ""; width: 10000000000000000%; height: 10000000000000%; z-index: -1; background-color: #1D8FF9; position: absolute; left: 50%; top: 50%; transform: translateX(-50%);}


.sec04 .btm .review_swipe{overflow: inherit;}

.sec04 .arrow {display: flex; gap: 16px; cursor: pointer; align-items: center; justify-content: flex-end; margin-bottom: 24px;}
.sec04 .arrow div{width: 60px; height: 60px; border-radius: 50%; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;}
.sec04 .swiper-slide.swiper-slide-active{transform: translateY(-80px); box-shadow: 10px 10px 15px rgba(0,0,0,0.15);}
.sec04 .swiper-slide{border-radius: 10px; overflow: hidden;}
/* sec05 */
.sec05{background-color: #1D8FF9; overflow: hidden; position: relative;}
.sec05::after{content: ""; width: 830px; height: 570px;
  background: url(../img/main/sec05_bg.png)no-repeat center center /contain;
  position:absolute; right: 0; top: -150px;
}
.sec05::before{content: ""; width: 670px; height: 570px;
  background: url(../img/main/sec05_bg02.png)no-repeat center center /contain;
  position:absolute; left: 0; bottom: -60px;
}

.sec05 .list ul{display: flex; gap:24px;}
.sec05 .list ul li{width: 25%;}
.sec05 .list ul li .con_wrap{padding: 72px 32px; background-color: #fff;display: flex; flex-direction: column;justify-content: center; height: 100%; border-radius: 10px; position: relative; z-index: 3;}
.sec05 .list ul li .con_wrap .txt_wrap{display: flex; flex-direction:  column;gap: 16px 0; border-bottom: 1px solid #ddd; padding-bottom: 32px; margin-bottom: 32px;}
.sec05 .list ul li .con_wrap .txt_wrap b{font-size:25px; font-weight: 800; display: block;}
.sec05 .list ul li .con_wrap .txt_wrap span{font-size: 16px; font-weight: 500; font-weight:500; color: #4d4d4d;}
.sec05 .list ul li .con_wrap .btn_wrap{display: flex; cursor: pointer; align-items: center; justify-content: space-between;}
.sec05 .list ul li .con_wrap .btn_wrap p{font-weight: 600;}
.sec05 .list ul li .con_wrap .btn_wrap span{width: 30px; transition-duration: 0.3s;  position: relative; height: 30px; border-radius: 50%; background-color: #FFB800; display: flex; align-items: center; justify-content: center;}
.sec05 .list ul li .con_wrap .btn_wrap span::after{content: ""; width: 45px; height: 45px; border-radius: 50%; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);background-color: rgba(255,183,67,0.1);
}

.sec05 .list ul li .con_wrap .btn_wrap:hover span{transform: translateX(10px);}
.sec05 .list ul li.contact .con_wrap{background: #FFB800 url(../img/main/sec05_point.png)no-repeat right top / 150px; color: #fff;}
.sec05 .list ul li.contact .con_wrap .txt_wrap{border: 0; margin-bottom: 0;}
.sec05 .list ul li.contact .con_wrap .txt_wrap b{font-size: 17px;}
.sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 46px;  color: #fff; font-weight: 600;}
.sec05 .list ul li.contact .con_wrap .txt_wrap span a{font-weight: 800;}
.sec05 .list ul li.contact .con_wrap .info>div{display: flex; align-items: center; font-size: 18px;}
.sec05 .list ul li.contact .con_wrap .info>div + div{margin-top:8px;}
.sec05 .list ul li.contact .con_wrap .info>div img{margin-right: 12px; margin-bottom: -3px;}




/* ********************************************* *
 * 1660px
 * ********************************************* */
 @media screen and (max-width: 1660px){

  .sec{padding-right: 116px; padding-left: 16px;}

 }
/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1600px){
  
  .sec01 .left .txt_wrap{padding: 0 16px;}

    
 }
 
 /* ********************************************* *
 * 1440px
 * ********************************************* */
 @media screen and (max-width: 1440px){


  /* sec03 */
  .sec03 .list ul{gap: 16px;}
  .sec03 .list ul li .con_wrap{padding: 48px 24px;}
  .sec03 .list ul li .top .txt_wrap p{height: 95px;}
  .sec{padding-right: 100px; padding-left: 0;}


  /* sec04 */
  .sec04 .top{flex-direction: column; align-items: flex-start !important; justify-content: flex-start; }
  .sec04 .top .tab{justify-content: space-between; margin-top: 48px; margin-bottom: 0;}
  .sec04 .top>div{width: 100%;}
  .sec04 .review_swipe p{font-size: 18px;}
  .sec04 .review_swipe p{left: 20px; bottom: 20px;}
  .sec04{padding: 0;}
  .sec04 .btm{padding-left: 16px !important; padding-right: 116px !important;}

  /* sec05 */
  .sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 40px;}
 }
 

/* ********************************************* *
 * 1300px
 * ********************************************* */
 @media screen and (max-width: 1300px){

  .sec05 .list ul li .con_wrap{padding: 60px 24px;}
  .sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 34px;}
  .sec05 .list ul li.contact .con_wrap .info>div{font-size: 16px;}

 }
 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){

  /* sec01 */
  .sec01 .left .txt_wrap b{font-size: 47px;}
  .sec01 .left .txt_wrap p{font-size: 18px;}
  .sec01 .right .click_btn >div p{font-size: 22px;}
  .sec01 .right .btn_wrap button{font-size: 20px;}
  /* 공통 */
  .main_title h2{font-size: 35px;}
  .main_title p{font-size: 16px;}
  .main_title{margin-bottom: 60px;}
  .sec{padding: 120px 0 120px 0;}

  /* sec02 */
  .sec02 .btn_wrap a{font-size: 20px;}
  .sec02 .right .swiper-slide .con_wrap .cus_info{font-size: 15px;}
  .sec02 .left{width: 440px;}
  .sec02 .right{width: calc(100% - 440px);}
  .sec02 .right .swiper-slide .con_wrap .delivery_info{flex-direction: column; align-items: flex-start; gap: 4px;}
  .sec02 .right .swiper-slide .con_wrap .cus_info{gap: 16px;}

  /* sec03 */
  .sec03 .list ul{flex-wrap: wrap;}
  .sec03 .list ul li{width:  calc((100% - 32px) / 3);}
  .sec03 .list ul li .top .txt_wrap b{font-size: 23px; height: 40px;}
  .sec03 .list ul li .top .txt_wrap p{height: 80px;}
  .sec03 .list ul li .con_wrap{height: 100%;}
  .sec03::after{height: 50%;}

  /* sec04 */
  .sec04 .top{margin-bottom: 60px;}
  .sec04 .arrow div{width: 50px; height: 50px;}
  .sec04 .arrow{gap: 10px;}

  /* sec05 */
  .sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 31px;}
  .sec05 .list ul li .con_wrap {padding: 50px 16px;}
  .sec05 .list ul li .con_wrap .txt_wrap b{font-size: 23px;}
  .sec05 .list ul li.contact .con_wrap{background-size: 110px;}
  .sec05 .list ul li.contact .con_wrap .info>div img{margin-right: 6px;}
  .sec05 .list ul li.contact .con_wrap .info>div{font-size: 15px;}

 }
 
 /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){
 

  /* sec02 */
  .sec02 .btn_wrap{width: 250px;}
  .sec02 .btn_wrap a{font-size: 18px;}
  .sec02 .right .swiper-slide .con_wrap{flex-direction: column; align-items: flex-start; padding: 16px 70px 16px 16px;}
  .sec02 .right .swiper-slide .con_wrap .cus_info span{display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
  .sec02 .right .swiper-slide .con_wrap .cus_info{width: 100%; gap: 12px; margin-top: 12px;}
  .sec02 .right .swiper-slide .con_wrap .delivery_info{width: 100%; flex-direction: row; gap: 8px;}
  .sec02 .right .swiper-slide {height: auto !important;}
  .sec02 .right .inquiry_swipe{height: 272px !important;}


  /* sec05 */
  .sec05 .list ul{flex-wrap:wrap;}
  .sec05 .list ul li{width: calc((100% - 48px) / 3);}
  .sec05 .list ul li.contact{width: 100%;} 
  .sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 39px;}
  .sec05 .list ul li.contact .con_wrap .info>div{font-size: 18px;}

 }
 
 
 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){

  body{padding-bottom:80px;}
  /* sec01 */
  .sec01 .left .txt_wrap p{font-size: 16px;}
  .sec01 .left .txt_wrap b{font-size: 42px;}

  .sec01 .left{border-radius: 0;}
  .sec01 .left{width: 100%;}
  .sec01 .right{position: fixed; box-shadow: 0 -10px 10px rgba(0,0,0,0.1); bottom: 0; top: inherit; left: 50%; height: auto; width: 100%; align-items: flex-start; z-index: 10; transform: translate(-50%, calc(100% - 80px)); flex-direction: column; }
  .sec01 .right .click_btn{width: 100%; height: 80px; border-bottom-left-radius: 0; border-top-right-radius: 0; border-top-left-radius: 0;}
  .sec01 .right .btn_wrap{width: 100%;}
  .sec01 .right .click_btn >div{transform: rotate(0); }
  .sec01 .right.click{transform: translate(-50%, 0);}
  .sec01 .right .btn_wrap button{font-size: 18px;}
  .sec01 .right .btn_wrap{padding: 32px;}
  /* 공통 */
  .sec{padding: 100px 0;}
  .main_title h2{font-size: 30px;}
  .main_title p{font-size: 15px; margin-top: 16px;}
  .main_title b{font-size: 16px; margin-bottom: 16px;}

  /* sec03 */
  .sec03 .list ul li .top .txt_wrap b{font-size: 20px;}
  .sec03 .list ul li .con_wrap{padding: 40px 24px;}

  /* sec04 */
  .sec04 .btm{padding-left: 16px !important; padding-right: 16px !important;}
  .sec04 .swiper-slide.swiper-slide-active{transform: translateY(0);}
  .sec04 .top{margin-bottom: 24px;}
 }

 
/* ********************************************* *
 * 851px
 * ********************************************* */
 @media screen and (max-width: 851px){

  .sec04 .top .tab {flex-wrap: wrap; justify-content: space-between; gap: 0;}
  .tab.type01 p {width: calc((100% - 14px) / 3); margin-bottom: 14px;}

 }

  /* ********************************************* *
 * 850px
 * ********************************************* */
 @media screen and (max-width: 850px){

  .sec01 .right .click_btn >div p{font-size: 20px;}

  /* sec02 */
  .sec02>div{display: block;}
  .sec02 .left{width: 100%; display: flex; justify-content: space-between; align-items: center; padding-right: 0;}
  .sec02 .right{width: 100%; margin-top: 32px;}
  .sec02 .btn_wrap{width: auto;}
  .sec02 .btn_wrap a{font-size: 16px;}
  .sec02 .btn_wrap a span img{width: 13px;}
  .sec02 .btn_wrap a span{width: 27px; height: 27px;}
 
 }
 
 /* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (min-width: 769px){
  
 
  
 }
 @media screen and (max-width: 768px){

  /* 공통 */
  .main_title h2{font-size: 26px;}

  /* sec01 */
  .sec01 .left .txt_wrap b {font-size: 36px;}
  .sec01 .left .swiper-pagination-fraction{font-size: 17px;}
  .sec01 .left .txt_wrap p{margin-top: 16px;}
  .sec01 .right .click_btn >div p{font-size: 20px;}


  /* sec03 */
  .sec03 .list ul li { width: calc((100% - 16px) / 2);}
  .sec03 .list ul li .top{gap: 24px;}
  .sec03 .list ul li .top .txt_wrap b{height: auto;}
  .sec03 .list ul li .top .txt_wrap p{height: 55px;}
  .sec03 .list ul li .btn_wrap p{font-size: 16px;}
  .sec03::after{height: 35%;}


  /* sec05 */

  .sec05 .list ul li.contact .con_wrap .txt_wrap span{font-size: 35px;}
  .sec05 .list ul li .con_wrap{padding: 32px 16px;}
  .sec05 .list ul li .con_wrap .txt_wrap{margin-bottom: 24px; padding-bottom: 24px;}
  .sec05 .list ul li .con_wrap .txt_wrap span{font-size: 15px;}
  .sec05 .list ul li .con_wrap .txt_wrap b{font-size: 20px;}
  .sec05 .list ul li .con_wrap .btn_wrap p {font-size: 15px;}
 }
 
 
 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){


  /* sec01 */
  .sec01 .left .txt_wrap b{font-size: 31px;}
  .sec01 .left .txt_wrap p{font-size: 15px;}
  .sec01 .left .swiper-scrollbar{display: none;}
  .sec01 .right .click_btn >div p{font-size: 17px;}
  .sec01 .right .click_btn{height: 55px;}
  .sec01 .right{transform: translate(-50%, calc(100% - 55px));}
  .sec01 .right .click_btn img{width: 13px;}
  .sec01 .right .btn_wrap button{font-size: 16px;}
  .sec01 .right .btn_wrap{padding: 16px;}
  /* 공통 */
  .sec{padding: 80px 0;}
  .main_title h2{font-size: 24px;}
  .main_title{margin-bottom: 48px;}

  /*  sec03 */
  .sec02 .left{display: block;}
  .sec02 .right .swiper-slide .con_wrap .cus_info span{font-size: 14px;}
  .sec03 .list ul li .top .txt_wrap p{height: 80px;}


  /* sec04 */
  .sec04 .review_swipe .img_wrap{padding-bottom: 56%;}
  .sec04 .arrow div{width: 45px; height: 45px;}
  .sec04 .arrow div img{width:8px;}
  .sec04 .arrow{margin-bottom: 16px;}
  .sec04 .review_swipe p{font-size: 16px;}


  /* sec05 */
  .sec05 .list ul li{width: 100%;}
  .sec05 .list ul li .con_wrap .txt_wrap b{font-size: 18px;}
  .sec05 .list ul li .con_wrap .txt_wrap{margin-bottom: 16px; padding-bottom: 16px;}
  .sec05 .list ul li.contact .con_wrap .info>div + div{margin-top: 4px;}
 }
 
 
 
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){

  /* 공통 */
  .main_title p{margin-top: 8px;}
  /* sec01 */
  .sec01 .left .txt_wrap b{font-size: 25px;}
  .sec01{ height: calc(75vh - 95px);}
  .sec01{margin-top: 65px;}
  /* sec03 */
  .sec03 .list ul li .top .txt_wrap p{font-size:15px;}
  .sec03 .list ul li .btn_wrap span{width: 25px; height: 25px;}
  .sec03 .list ul li .btn_wrap span::after{width: 40px; height: 40px;}
  .sec03 .list ul li .btn_wrap p{font-size: 15px;}
  .sec03 .list ul li .top .icon_wrap{min-width: 60px;}
  .sec03 .list ul li .top .txt_wrap b{font-size: 16px;}
  .sec03 .list ul li .con_wrap{padding: 24px 16px;}
  .sec03 .list ul li .top .txt_wrap p{font-size: 14px;}
 }

 



 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){

  .sec04 .top .tab {flex-wrap: wrap; justify-content: space-between; margin-top: 25px;}
  

 }


  /* ********************************************* *
 * 300px
 * ********************************************* */
 @media screen and (max-width: 300px){

   
 }