@charset "utf-8";



.section { padding: 120px 20px 60px; box-sizing: border-box; word-break:keep-all;  }
.section:last-of-typea{ padding: 120px 20px; }
.main-txt { font-weight:600; font-size: 36px;  word-break:keep-all; line-height: 1.4;  }
.sub-txt {font-size: 24px; color: #444; margin-top: 20px;  word-break:keep-all; line-height: 1.4  }
.contents { margin-top: 40px; }

/*-----------------------------------------------------
 main-visual
-----------------------------------------------------*/  

.main-visual{ position: relative; width: 100%; height: 700px; background-image: url(/AppData/company/images/main/banner01.png); background-repeat: no-repeat;background-size: cover; background-position: center 40%; }
.main-visual::after { content: ""; position: absolute; width: 100%; height: 100%; top:0;left: 0; background-color: rgba(100, 100, 100, 0.26) }
.main-visual .text-wrap { width: 100%; position: absolute; top: 50%;z-index: 3; transform: translateY(-50%); color: #fff; }
.main-visual .text-wrap .main-txt { font-size: 54px; font-weight: 600; line-height: 1.2; text-shadow: -2px 3px 5px rgb(0 0 0 / 20%); }
.main-visual .text-wrap .main-txt br { display: none; }
.main-visual .text-wrap .sub-txt { font-size: 28px; margin-top: 10px; margin-bottom: 40px; line-height: 1.4; color: #fff;text-shadow: -2px 3px 5px rgb(0 0 0 / 20%);  }
.main-visual .text-wrap .btn-company { border: 1px solid #fff;  color: #fff;  }
.main-visual .text-wrap .btn-company:hover { background-color: #fff; color: #6ab5d5;  }


/*-----------------------------------------------------
 service-apply
-----------------------------------------------------*/  
.service-apply{ }
.service-apply .contents {position: relative; }
.service-apply .text-wrap { position: absolute;width: calc(60% - 20px); top: 50%;  letter-spacing: -0.5px; transform: translateY(-50%) ;  }
.service-apply .sub-txt {  }
.section .btn { border: 1px solid #222; color: #222;  margin-top: 20px;}
.section .btn:hover { background-color: #6ab5d5; color: #fff; border-color: #6ab5d5; }
.service-apply .img-wrap { width: 40%; height: 0; margin-left: 20px; padding-bottom: 30%; background-image: url(/AppData/company/images/main/img01.jpg); background-repeat: no-repeat;background-size: cover; background-position: center center; border-radius: 5px; }

/*-----------------------------------------------------
 service-review
-----------------------------------------------------*/  
.review-list {  display: flex;  box-sizing: border-box;  }
.review-list .review { border: 1px solid #eee; padding:30px 20px; box-sizing: border-box; margin-right: 20px; background-color: #f7fdff; border-radius: 5px; }
.review-list .review:last-child { margin-right: 0; }

.review-list .reviewer-wrap{display:flex; align-items:center; margin-bottom:10px;}
.review-list .reviewer-img{width:65px;}
.review-list .reviewer-info{width:calc(100% - 75px); margin-left:10px; font-size:15px;}
.review-list .reviewer-location{}
.review-list .reviewer-name{}


.review-list .review .star { margin-bottom: 10px; }
.review-list .review .star img { display: block; float: left; width: 20px; margin-right: 5px; }
.review-list .review .star img:last-child { margin-right: 0; }

.review-list .review .txt { line-height: 1.4; font-size: 18px; font-weight:500; word-break:normal;}
.review-list .review.swiper-slide { height: auto; }
.review-wrap { position: relative; }
.review-wrap .swiper-arrow { position: absolute; top: 50%; width: 60px; height: 60px; background-color:#fff;z-index: 3; border-radius: 999px; font-size: 34px; color: #6ab5d5; box-shadow:-1px 2px 8px 2px rgb(139 139 139 / 25%); }
.review-wrap .swiper-arrow.swiper-button-prev { left: 0;  transform: translateX(-50%); }
.review-wrap .swiper-arrow.swiper-button-next { right: 0; transform: translateX(50%); }
.review-wrap .swiper-button-prev:after, .review-wrap .swiper-button-next:after { font-size: 28px; }
.swiper-pagination { display: none; z-index: 2; }


/*-----------------------------------------------------
 service-chain
-----------------------------------------------------*/  
.service-chain { padding: 100px 0; margin-top: 80px; background-color: #f5f6f8; }
.service-chain .text-wrap .sub-txt span {  font-weight: 600; }
.service-chain .map-wrap { display: flex;  align-items: center;  }

.service-chain .map-text {  width: calc(60% - 40px); margin-right: 40px; word-break: keep-all; }
.service-chain .map-img { width: 40%; }
.service-chain .map-img .map { position: relative; width: 100%; padding-bottom: 90%; box-sizing: border-box; background-color: #d2e5ee; border-radius: 10px; overflow: hidden; }
.service-chain .map-img .map img { position: absolute; width: 90%;left: 50%; top: -15%; transform: translateX(-50%); }

.service-chain .location { font-size: 18px; margin-bottom: 20px; }
.service-chain .location:last-child { margin-bottom: 0; }
.service-chain .location .tit { display: inline-block; font-weight: 600; background-color:#6ab5d5; height: 38px; line-height: 38px; padding:0 10px; border-radius: 5px; color: #fff; margin-bottom: 5px;  }

/*-----------------------------------------------------
 service-partner
-----------------------------------------------------*/  
.service-partner .text-wrap { text-align: center; }
.service-partner .partner-wrap img { margin: 0 auto; }


/*-----------------------------------------------------
  insta
-----------------------------------------------------*/  
.section.insta { padding-top: 60px; padding-bottom: 120px; }
.inner.insta-inner { max-width: 1500px; }
.insta .text-wrap { text-align: center; }
.insta-wrap ul li { position: relative; float: left; width: calc((100% - 60px)/4); margin-left: 20px; overflow: hidden; border-radius: 5px;  }
.insta-wrap ul li a { width: 100%; height: 0; padding-bottom: 100%; background-color: #eee; }
.insta-wrap ul li a::after { opacity: 0; position: absolute; width: 100%; height:100%; content: "";background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; border-radius: 5px; transition: .2s; background-image: url(/AppData/company/images/layout/icon_open.png); background-repeat: no-repeat; background-position: center; background-size: 35px; }
.insta-wrap ul li a:hover::after { opacity: 1; }
.insta-wrap ul li:nth-child(4n+1){ margin-left: 0; } 
.insta-wrap ul li:nth-child(n+5){ margin-top: 20px; }
.insta-wrap ul li img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/*-----------------------------------------------------
  with
-----------------------------------------------------*/ 
.service-with { padding: 60px 0px; background:#5cb0d4; text-align: center;}
.service-with .with-cont {  /* display: flex;  */align-items: center;  justify-content: space-between;}
.service-with .with-cont img { width: 30%; max-width: 350px ; }
.service-with .main-txt {  color: #fff; }
.service-with .btn-with {border: 1px solid #fff; font-size: 20px; margin-top: 30px;  color:#fff; line-height: 1.4; background-color: transparent; }
.service-with .btn-with:hover {background-color: #fff; color: #6ab5d5; }

/*-----------------------------------------------------
  popup
-----------------------------------------------------*/ 
.popup { display: none; position: fixed;  width: 100%; height: 100%; top: 0; left: 0; z-index: 100; }
.dim{ display: none; position: fixed; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10; }
.popup-wrapper {  position: fixed; top: 50%; left: 50%; width: 90%; max-width: 750px;  transform: translate(-50%, -50%); background-color: #fff; z-index: 100; border-radius: 5px; padding: 40px; box-sizing: border-box; word-break: keep-all; max-height: 90vh; }
.popup-wrapper .poopup-header { position: fixed; }
.popup-wrapper .tit { font-weight: 600; font-size: 24px; margin-top: 20px; }
.popup-wrapper .detail { margin-top: 20px; width: 100%;  max-height:calc(90vh - 150px); overflow-y: auto;  }
.popup-wrapper .detail-list { margin-top: 15px;font-size: 18px;   }
.popup-wrapper .detail-list .sub-tit { font-weight: 600; }
.popup-wrapper .detail-list:first-child { margin-top: 0; } 
.popup-wrapper .popup-close { position: absolute; text-align: right;  width: 30px; height: 30px; background-image: url(/AppData/company/images/layout/btn_close.png); top: 30px; right: 30px; background-repeat: no-repeat; background-position: center; background-size: 22px;  }

@media(max-width: 1200px){
  
}


@media(max-width: 1024px){
  .main-visual { height: 550px; }
  .main-visual .text-wrap .main-txt { font-size: 42px; }
  .main-visual .text-wrap .sub-txt { font-size: 24px; }

  .section { padding: 80px 20px 40px; }
  .section:last-of-type{ padding: 80px 20px; } 
  .main-txt { font-size: 30px; }
  .sub-txt { font-size: 22px; margin-top: 10px; }
  .service-apply .contents { margin-top: 0; }
  .service-apply .text-wrap,.service-apply .img-wrap { float: none; width: 100%;  margin-left: 0; }
  .service-apply .text-wrap { position: inherit; top: 0; transform: translateY(0); margin-bottom: 40px; }
  .service-apply .text-wrap br { display: none; }
  .service-apply .img-wrap { padding-bottom: 40%; }

  .service-chain {padding: 80px 0;  }
  .service-chain .map-wrap { flex-wrap: wrap;  }
  .service-chain .map-text { width: 100%; margin-right: 0;  }
  .service-chain .map-img { width: 100%; margin-top: 40px; }
  .service-chain .map-img .map { padding-bottom: 40%; }
  .service-chain .map-img .map img { width: 40%; }

  .service-with .with-cont { flex-direction: column-reverse; text-align: center;  }
  .service-with .with-cont img { max-width: 200px; }
  .service-with .btn-with { margin-top: 20px; }
  .section.insta { padding-top: 40px; padding-bottom: 80px; }
}

@media(max-width: 768px) { 
  .btn { padding: 10px 15px; }
  .main-visual { background-position: 60% 40%; }
  .main-visual .text-wrap .main-txt { font-size: 36px; }
  .main-visual .text-wrap .sub-txt { font-size: 22px; }
  .main-visual .text-wrap .btn-company { background-color: #fff; color:#6ab5d5;}

  .contents { margin-top: 30px; }
  .service-with .btn-with:hover { background-color: #6ab5d5; border-color: #6ab5d5; color: #fff;}
  .section .btn { background-color: #222; color: #fff; }
  .service-with .main-txt { font-size: 26px; }
  .service-with .btn-with { font-size: 18px; }

  .insta-wrap ul li { width: calc((100% - 20px)/2); }
  .insta-wrap ul li:nth-child(2n+1){ margin-left: 0; } 
  .insta-wrap ul li:nth-child(n+3){ margin-top: 20px; } 

  .popup-wrapper { padding: 40px 30px; }
  .popup-wrapper .popup-close { right:20px ; }

 }

 @media(max-width: 580px) {
  .main-visual { height: 450px; } 
  .section { padding: 60px 0 30px; }
  .service-chain { margin-top: 60px; }
  .btn { font-size: 16px; }

  .main-txt { font-size: 24px;  }
  .sub-txt { font-size: 20px; }
  .service-with { padding: 40px 0px; }
  .service-with .main-txt { font-size: 24px; }
  .service-with .btn-with { font-size: 16px; }
  .service-chain .location .tit { height: 32px; line-height: 32px; }
  .service-chain .location { font-size: 16px; }
  .service-chain .map-img { margin-top: 30px; }
  .swiper-pagination { display: block;  }
  .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -30px; }
  .swiper-pagination-bullet-active { background: #6ab5d5; bottom: -20px;}
  .review-wrap .swiper-arrow { display: none; }
  .review-list .review { padding: 20px 15px; }
  .review-list .review .reviewer { width: 50px; height: 50px; background-size: 38px; }

  .popup-wrapper  { padding: 30px 20px; }
  
  }

  @media(max-width: 425px)  { 
    .main-visual .text-wrap .main-txt { font-size: 28px; }
    .main-visual .text-wrap .main-txt br { display: block; }
    .main-visual .text-wrap .sub-txt { font-size: 20px; margin-bottom: 20px; }
    .main-visual .text-wrap .sub-txt br { display: none; }
    .service-apply .img-wrap { padding-bottom: 60%;}
    .service-chain .map-img .map { padding-bottom: 60%; }
    .service-chain .map-img .map img { width: 60%; }
   }