/* 공통 */

.sec{padding: 110px 0;}
.main_page{background-color: #fff;}

.main_title h2{font-size: 45px; font-weight: 600;}
.main_title h2 i{font-weight: 600;color: #104976;}
.main_title{display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #ddd; padding-bottom: 32px; margin-bottom: 32px;}
.main_title .btn_wrap{display: flex;}
.main_title .btn_wrap a{display: flex; align-items: center; justify-content: center; }
.main_title .btn_wrap a i{display: block; margin-right: 16px; font-weight: 600; font-size: 18px;}
.main_title .btn_wrap a span{transition-duration: 0.2s;  display: flex; font-size: 30px; 
   font-weight: 300; align-items: center; justify-content: center; text-align: center;
   width: 30px; height: 30px; border-radius: 50%; background-color: #104976; color: #fff;
   position: relative;
}
.main_title .btn_wrap:hover a span{font-size: 0;}
.main_title .btn_wrap:hover a span::after{content: ""; width: 23px; height: 17px; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165522316314453.png)no-repeat center center /contain;
   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}


/* sec01 */
.sec01_con{padding: 0; height: 50vh; position: relative; margin-top: 217px;}
.sec01_con .main_slide {width: 100%; height: 100%; overflow: hidden;  }
.sec01_con .main_slide .con_wrap{width: 100%;height: 100%;position: relative; overflow: hidden;}
.sec01_con .main_slide .swiper-slide01 .con_wrap{background-repeat: no-repeat; background-position: 70% 50%; background-size: cover;}
.sec01_con .main_slide .swiper-slide02 .con_wrap{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165515632789397.png)no-repeat 70% 50% /cover;}
.sec01_con .main_slide .swiper-slide03 .con_wrap{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165515632789397.png)no-repeat 70% 50% /cover;}

.sec01_con .swiper-pagination-clickable .swiper-pagination-bullet{ margin: 0 8px !important; color: #fff; background: transparent !important; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); font-size: 18px; }
.sec01_con .swiper-pagination-bullet-active{position: relative; padding-right: 70px;}
.sec01_con .swiper-pagination-bullet-active::after{content: ""; width: 50px; height: 1px ; background-color: #fff;
   position: absolute; right: 0; top: 12px
}
.sec01_con .swiper-pagination{bottom: 20px !important; z-index: 4;}
.sec01_con .main_arrow{position: absolute; z-index: 3;
   top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1500px; max-width:100%;
}
.sec01_con .main_arrow ul{display: flex; justify-content: space-between; align-items: center;}
.sec01_con .main_arrow ul li{cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; width: 50px; height: 50px; padding: 8px;}

.sec01_con .side_nav {
  position: absolute;
  left: 50%;
  transform: translateX(-375%);
  top: 0;
  z-index: 3;
  width: 160px;
  height: 100%;
  max-width: 100%;
  display: none;
}
.sec01_con .side_nav ul{padding: 24px; width: 160px; background-color: rgba(255,255,255,0.5); height: 100%; overflow-x: hidden; overflow-y: auto; }
.sec01_con .side_nav ul::-webkit-scrollbar { width: 5px; } 
.sec01_con .side_nav ul::-webkit-scrollbar-thumb{background:#555;}

.sec01_con .side_nav ul li + li{margin-top: 16px;}
.sec01_con .side_nav ul li a{font-weight: 600;}


/* sec02 */
.sec02_con ul{display: flex;}
.sec02_con ul li{height: auto;}
.sec02_con ul li .con_wrap .txt_wrap{}
.sec02_con ul li .con_wrap {position: relative; display: flex; align-items: center; justify-content: space-between;}
.sec02_con ul li .left{width: calc(100% - 200px);}
.sec02_con ul li .pd_img{position: absolute; bottom: 20px; right: 20px; width:200px;}


.sec02_con ul li.big .c-logo{width: 220px; margin-bottom: 48px;}
.sec02_con ul li.big .txt_wrap span{font-size: 20px; display: block; margin-bottom: 12px;}
.sec02_con ul li.big .txt_wrap p{font-size: 25px; font-weight: 700;}
.sec02_con ul li.big {flex: 1.5;display: flex;background-color: #edfdfe;height: auto;
   flex-direction: column;align-items: stretch;justify-content: center;
}
.sec02_con ul li.big .left{width: calc(100% - 290px);}
.sec02_con ul li.big .pd_img{width: 290px;}


.sec02_con ul li.small{flex: 1; border: 1px solid #ddd; }
.sec02_con ul li.small .con_wrap{ }
.sec02_con ul li.small .con_wrap + .con_wrap{border-top: 1px solid #ddd;}
.sec02_con ul li.small .con_wrap .c-logo{width: 165px;  margin-bottom: 18px;}
.sec02_con ul li.small .con_wrap .txt_wrap span{display: block; font-size: 16px; margin-bottom: 8px;}
.sec02_con ul li.small .con_wrap .txt_wrap p{font-size: 18px; font-weight: 700;}


/* sec03 */
.sec03_con{position: relative;}
.sec03_con .bd-md{z-index: 4;}
.sec03_con .main_arrow02{}
.sec03_con .main_arrow02 ul{display: flex; justify-content: space-between; align-items: center;}
.sec03_con .main_arrow02 ul li{cursor: pointer; display: flex; align-items: center; justify-content: center;width: 50px; height: 50px; padding: 8px;
  position: absolute; top: 41%;
}
.sec03_con .main_arrow02 ul li.arrow_left02{left: -150px;}
.sec03_con .main_arrow02 ul li.arrow_right02{right: -150px;}

.sec03_con .partner_slide .con_wrap .img_wrap{display: flex; align-items: center; justify-content: center; 
  background-color: #f5f5f5; border-radius: 50%; width:160px; height: 160px; margin: 0 auto; padding: 24px;
}
.sec03_con .partner_slide .con_wrap .txt_wrap p{text-align: center; font-weight: 600;}
.sec03_con .partner_slide .con_wrap .txt_wrap{margin-top: 24px;}


/* sec04, sec05 */


/* sec06 */
.sec06_con{}
.sec06_con .top{width: 100%; padding: 110px 0 50px 0 ; padding-bottom: 8%; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165522365467642.png)no-repeat center center;
   background-attachment: fixed; color: #fff;font-size:45px; margin-bottom: 60px;
}
.sec06_con .top p{font-weight: 600;}
.sec06_con .inner{background-color: #fff; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); margin-top: -100px; padding: 48px; display: flex;align-items: flex-start; justify-content: space-between;}
.sec06_con .inner .con{width: 48%;}
.sec06_con .main_title{margin-bottom: 16px; padding-bottom: 16px;}
.sec06_con .main_title h2{font-size: 28px;}

.sec06_con ul li .con_wrap{display: flex; align-items: center;}
.sec06_con ul li .con_wrap .img_wrap{width:130px; height: 130px; border: 1px solid #ddd; position: relative; overflow: hidden;}
.sec06_con ul li .con_wrap .img_wrap img{position: absolute; left: 50%;top: 50%; transform: translate(-50%, -50%); width: 100%;}
.sec06_con ul li .con_wrap .txt_wrap{width: calc(100% - 130px); padding-left:32px;}
.sec06_con ul li + li{margin-top: 24px;}
.sec06_con ul li .con_wrap .txt_wrap b{font-size: 18px; font-weight: 600; color: #104976; margin-bottom: 8px; display: block;}
.sec06_con ul li .con_wrap .info_wrap dl{display: flex; align-items: center;}
.sec06_con ul li .con_wrap .info_wrap dl dt{margin-right: 8px; font-weight: 600; opacity: 0.7; }
.sec06_con ul li .con_wrap .info_wrap dl dd{font-weight: 600;}
.sec06_con ul li .con_wrap .info_wrap dl dd span{font-weight: 600;}


/* .mySwiper .swiper-slide{height: 450px; border: 1px solid #ddd;} */



.sec07_con .main_title{border-bottom: 0; margin-bottom: 8px;}
.sec07_con .main_title h2{font-size: 32px;}
.sec07_con .main_title h2 i{color: #222;}
.sec07_con .tab_list .tab{display: flex; overflow-x: auto; overflow-y: hidden;}
.sec07_con .tab_list .tab p:last-child{margin-right: 0;}
.sec07_con .tab_list .tab01{padding-bottom: 8px;}
.sec07_con .tab_list .tab01 p{padding: 12px 24px; margin-right: 16px; border-radius: 55px; text-align: center; border: 1px solid #ddd; white-space: nowrap;}
.sec07_con .tab_list .tab02{margin-top: 24px; border-bottom: 1px solid #ddd;  }

.sec07_con .tab_list .tab::-webkit-scrollbar {height: 5px;} 


.sec07_con .tab_list .tab02 p{font-size: 17px; margin-right: 16px; white-space: nowrap; font-weight: 500; padding: 16px 4px; color: #aeaeae;}
.sec07_con .tab_list .tab02 p.on{position: relative; color: #104976; font-weight: 800;}
.sec07_con .tab_list .tab02 p.on::before{content: ""; width: 100%; height: 2px; 
  background-color: #222; position: absolute; bottom: 1px; left: 0;
}

.sec07_con .tab_list .tab01 p.on{background-color: #104976; color: #fff; border: 1px solid #104976;}
.sec07_con .list {margin-top: 32px;}
.sec07_con .list ul{display: flex; flex-wrap: wrap; margin-bottom: -16px;}
.sec07_con .list ul li {width: 20%; margin-bottom: 16px;}
.sec07_con .list ul li .con_wrap{border: 1px solid #ddd; padding: 24px; height: 100%;}
.sec07_con .list ul li .con_wrap .thumb_wrap{position: relative;padding-bottom: 110%; overflow: hidden;}
.sec07_con .list ul li .con_wrap .thumb_wrap img{position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%);}
.sec07_con .list ul li .con_wrap .txt_wrap{}
.sec07_con .list ul li .con_wrap .txt_wrap b{font-weight: 500;}
.sec07_con .list ul li .con_wrap .txt_wrap p{font-weight: 700; font-size: 20px; margin-top: 16px;}
/* ********************************************* *
 * 1520px
 * ********************************************* */
 @media screen and (max-width: 1520px){
   
  .sec01_con .main_arrow{padding: 0 20px;}
  .sec03_con .main_arrow02 ul li.arrow_left02{left: -50px;}
  .sec03_con .main_arrow02 ul li.arrow_right02{right: -50px;}
   
    
 }
 
 /* ********************************************* *
 * 1400px
 * ********************************************* */
 @media screen and (max-width: 1400px){
 
   .partner_slide{margin:0 50px !important; overflow: hidden;}
   .main_title h2{font-size: 40px;}
   .sec06_con .top{font-size: 40px;}
  
 }
 
 /* ********************************************* *
 * 1300px
 * ********************************************* */
 @media screen and (max-width: 1300px){
  .sec03_con .main_arrow02 ul li.arrow_left02{left: -0;}
  .sec03_con .main_arrow02 ul li.arrow_right02{right: -0;}

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

  .sec01_con .side_nav {left: 0%; transform: translateX(0);}
 
   .sec01_con .main_arrow{padding: 0 20px 0 190px;}

   .sec02_con ul li.big .txt_wrap span{font-size: 18px; margin-bottom: 8px;}
   .sec02_con ul li.big .txt_wrap p{font-size: 23px;}
   .sec02_con ul li.big .c-logo{width: 210px;}
   .sec02_con ul li.small .con_wrap .txt_wrap p{font-size: 17px;}
   .sec02_con ul li.small .con_wrap .txt_wrap span{font-size: 16px;}
   .sec02_con ul li.small .con_wrap .c-logo{width: 150px;}
   .sec02_con ul li .pd_img{width: 165px;}
   .sec02_con ul li .left{width: calc(100% - 165px);}
   .sec02_con ul li.big .pd_img{width: 230px;}
   .sec02_con ul li.big .left{width: calc(100% - 230px);}

   .main_title h2{font-size: 35px;}
   .sec06_con .top{font-size: 35px;}


   .sec06_con .main_title h2{font-size: 25px;}
   .main_title .btn_wrap a span{width: 25px; height: 25px;}
   .main_title .btn_wrap a i{font-size: 17px; margin-right: 12px;}

   .sec07_con .list ul li .con_wrap{padding: 16px;}
   .sec07_con .list ul li{width: 25%;}

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

   .sec{padding: 100px 0;}
 
 
   .sec01_con{margin-top: 234px; padding: 0 !important; height: auto;}
   .sec01_con .main_slide .swiper-slide .con_wrap{padding-bottom: 35%;}
   .main_slide .swiper-slide{min-height: auto; max-height: auto;}
   .sec02_con ul{display: block;}
   .sec02_con ul li.small{display: flex;}
   .sec02_con ul li.small .con_wrap{flex: 1;}
   .sec02_con ul li.small .con_wrap + .con_wrap{border-top: 0; border-left: 1px solid #ddd;}

   .sec02_con ul li .pd_img{width: 140px;}
   .sec02_con ul li .left{width: calc(100% - 140px);}
   .sec02_con ul li.small .con_wrap .img{width: 100%;}
   .sec02_con ul li.small .con_wrap .img img{width: 100%;}
   .sec02_con ul li .con_wrap{align-items: center;}



   .sec03_con .partner_slide .con_wrap .img_wrap{width: 130px; height: 130px; padding: 12px;}
   .sec03_con .partner_slide .con_wrap .txt_wrap{font-size: 15px;}


   .main_title h2{font-size: 30px;}
   .sec06_con .top{font-size: 30px;}
   .main_title{padding-bottom: 22px;}
   
   .main_title .btn_wrap a i{font-size: 17px;}

  
   .sec06_con .inner{display: block;}
   .sec06_con .inner .con{width: 100%;}
   .sec06_con .inner .con + .con{margin-top: 48px;}
   .sec06_con .top{padding-top: 100px;}


   .sec07_con .list ul li .con_wrap .txt_wrap p{font-size: 17px;}
   .sec07_con .list ul li .con_wrap .txt_wrap b{font-size: 15px;}
 }
 
 
 /* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (min-width: 769px){
  
 
  
 }
 @media screen and (max-width: 768px){

   .sec{padding: 80px 0;}
 
   .sec01_con .swiper-pagination-clickable .swiper-pagination-bullet{font-size: 15px;}
   .sec01_con .side_nav{display: none;}
   .sec01_con .main_arrow{padding: 0 20px;}
   .sec01_con{margin-top: 212px;}
   .sec01_con .main_arrow{display: none;}
   .sec01_con .main_slide .swiper-slide .con_wrap{padding-bottom: 70%;}
   .sec01_con .main_slide .swiper-slide01 .con_wrap{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165643598238759.png)no-repeat 50% 50% /cover;}
   .sec01_con .main_slide .swiper-slide02 .con_wrap{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165643598238759.png)no-repeat 50% 50% /cover;}
   .sec01_con .main_slide .swiper-slide03 .con_wrap{background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/SPS_SHOP/165643598238759.png)no-repeat 50% 50% /cover;}
 
 

   
   .sec02_con ul li.small{display: block;}
   .sec02_con ul li.small .con_wrap + .con_wrap{border-top: 1px solid #ddd; border-left: 0;}


   .sec06_con .top{padding-top: 80px;}


   .sec07_con .tab_list .tab{overflow-y: hidden; overflow-x: auto; padding-bottom: 8px;}
   .sec07_con .tab_list .tab02{padding-bottom: 0;}
   .sec07_con .tab_list .tab::-webkit-scrollbar{height: 4px;} 
   .sec07_con .tab_list .tab p{white-space: nowrap;}
   .sec07_con .main_title h2{font-size: 26px;}
   .sec07_con .main_title .btn_wrap a i{font-size: 16px;}
   
 
 }
 
 
 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){

   .sec{padding: 60px 0;}
 
   .sec01_con{margin-top: 190px;}
   .sec02_con ul li.big .pd_img{width: 180px;}
   .sec02_con ul li.big .left{width: calc(100% - 180px);}
   .sec02_con ul li.big .txt_wrap p{font-size: 20px;}
   .sec02_con ul li.big .c-logo{width: 180px; margin-bottom: 24px;}

   .sec02_con ul li.small .con_wrap .txt_wrap p{font-size: 16px;}
   .sec02_con ul li.small .con_wrap .txt_wrap span{font-size: 15px;}

   .sec03_con .partner_slide .con_wrap .img_wrap{width: 120px; height: 120px; padding: 12px;}

   .main_title h2{font-size: 25px;}
   .sec06_con .top{font-size: 27px;  margin-bottom: 72px;}
   .main_title .btn_wrap a span{width: 25px; height: 25px;}
   .main_title .btn_wrap a i{margin-right: 10px;}
    .sec06_con ul li .con_wrap .txt_wrap b
   
   .sec06_con ul li .con_wrap .img_wrap{width: 110px; height: 110px;}
   .sec06_con ul li .con_wrap .info_wrap dl{font-size: 15px;}
   .main_title .btn_wrap a i{font-size: 15px;}
   .sec06_con .main_title h2{font-size: 20px;}
   .sec06_con .inner{padding: 24px;}
   .sec06_con ul li .con_wrap .txt_wrap b{font-size: 17px;}
   .sec06_con ul li .con_wrap .txt_wrap{padding-left:27px;}
   .sec06_con .mid{padding: 0;}

   .sec07_con .list ul li {width: 33.333%;}
   .sec07_con .list ul li .con_wrap .txt_wrap p{font-size: 16px;}
   .sec07_con .list ul li .con_wrap .txt_wrap b{font-size: 14px;}
   .sec07_con .tab_list .tab02 p{padding: 8px 8px; font-size: 15px;}
   .sec07_con .main_title h2{font-size: 22px;}

   .sec07_con .list ul li .con_wrap{padding: 8px;}
 }
 
 
 
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){
 
   .sec02_con ul li.big .pd_img{width: 150px;}
   .sec02_con ul li.big .left{width: calc(100% - 150px);}
   .sec02_con ul li.big .txt_wrap p{font-size: 18px;}
   .sec02_con ul li.big .txt_wrap span{font-size: 15px;}
   .sec02_con ul li.big .c-logo{width: 160px; margin-bottom: 16px;}

   .sec02_con ul li .pd_img{width: 120px;}
   .sec02_con ul li .left{width: calc(100% - 120px);}

   .sec03_con .main_arrow02{display: none;}
   .partner_slide{margin: 0 !important;}

   .main_title h2{font-size: 21px;}
   .sec06_con .top{font-size: 25px;}
   .main_title .btn_wrap a i{font-size: 16px;}


   .sec06_con ul li .con_wrap .img_wrap{width: 80px; height: 80px;}
   .sec06_con ul li .con_wrap .txt_wrap{width: calc(100% - 80px);}
   .sec06_con .inner{padding: 16px;}

   .sec07_con .list ul li .con_wrap .txt_wrap b{font-size: 13px;}
   .sec06_con .main_title h2{font-size: 19px;}
   .sec07_con .main_title .btn_wrap a i{font-size: 14px;}

   .sec06_con ul li .con_wrap .txt_wrap b{font-size: 15px;}
   .sec06_con ul li .con_wrap .txt_wrap{padding-left: 16px;}
 }
 
 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){

   .sec02_con ul li .con_wrap{display: block;}
   .sec02_con ul li.big .pd_img{position: static; margin: 32px auto 0 auto; width: 160px;}
   .sec02_con ul li.big .left{width: 100%; text-align: center;}
   .sec02_con ul li.big{align-items: center;}
   
   .sec02_con ul li.big .c-logo{margin: 0 auto  16px auto;}
   .sec02_con ul li.small .con_wrap .c-logo{margin: 0 auto  16px auto;}
   .sec02_con ul li .pd_img{position: static; margin: 16px auto 0 auto; width: 110px;}
   .sec02_con ul li .left{width: 100%; text-align: center;}

   .main_title h2{font-size: 20px;}
   .sec06_con .top{font-size: 22px;}

   .sec07_con .list ul li{width: 50%;}
   .sec07_con .tab_list .tab p{font-size: 13px;}
   .sec07_con .main_title h2{font-size: 21px;}

   .sec06_con ul li .con_wrap .img_wrap{width: 60px; height: 60px;}
   .sec06_con ul li .con_wrap .txt_wrap{width: calc(100% - 60px);}
   
 }


  /* ********************************************* *
 * 300px
 * ********************************************* */
 @media screen and (max-width: 300px){
   .main_title .btn_wrap a i{font-size: 15px;}
   .main_title h2{font-size:17px;}
   .sec06_con .top{font-size: 20px;}
   .main_title{padding-bottom: 12px; margin-bottom: 22px;}
   .main_title .btn_wrap a span{width: 20px; height: 20px; font-size: 23px;}
   
   
 }