.main .visual :root {
  --vh: 100%;
}

.main section {
  overflow: hidden;
}

.main .visual {
  width: 1600px;
  margin:100px auto 0;
  height: 550px;
  position: relative;
}

@supports (-webkit-touch-callout: none) {
  .main .visual {
    height: -webkit-fill-available;
  }
}



.main .visual .swiper-wrapper {
  -webkit-transition-timing-function: cubic-bezier(0.68, 0.12, 0.28, 0.88);
          transition-timing-function: cubic-bezier(0.68, 0.12, 0.28, 0.88);
}

.main .visual .box,
.main .visual .slideBox,
.main .visual .bg {
  width: 100%;
  height: 100%;
}

.main .visual .slideBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.main .visual .bg {
/*
  -webkit-clip-path: inset(88% 34% 0% 34%);
          clip-path: inset(88% 34% 0% 34%);
		  */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.main .visual .bg.bg1 {
  background-image: url("../img/main/img1.jpg");
}

.main .visual .bg.bg2 {
  background-image: url("../img/main/img2.jpg");
}

.main .visual .bg.bg3 {
  background-image: url("../img/main/img3.jpg");
}

.main .visual .bg::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  -webkit-transition: all 0s;
  transition: all 0s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
/*
.main .visual .bg.on {
  -webkit-animation: clipOn 2.2s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards;
          animation: clipOn 2.2s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards;
}
*/
@-webkit-keyframes clipOn {
  0% {
    -webkit-clip-path: inset(88% 34% 0% 34%);
            clip-path: inset(88% 34% 0% 34%);
  }
  55% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  65% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-clip-path: inset(0% 0%);
            clip-path: inset(0% 0%);
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes clipOn {
  0% {
    -webkit-clip-path: inset(88% 34% 0% 34%);
            clip-path: inset(88% 34% 0% 34%);
  }
  55% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  65% {
    -webkit-clip-path: inset(15% 34% 15% 34%);
            clip-path: inset(15% 34% 15% 34%);
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-clip-path: inset(0% 0%);
            clip-path: inset(0% 0%);
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.main .visual .text,
.main .visual .slideButtons {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.main .visual .text {
  width: 100%;
  text-align: center;
  z-index: 1;
}

.main .visual .text * {
  color: #fff;
}

.main .visual .text p {
  margin: 0 0 20px;
}

.main .visual em { font-style:normal; }

.main .visual .text em {
  display: inline-block;
  font-size:80px;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: relative;  
}

.main .visual .text h2 {
  white-space: nowrap;
  overflow: hidden;
}

.main .visual .text h2 span {
  display: inline-block;
  font-weight: 900;
  font-size:60px;
  line-height: 1.3;
  font-family: var(--font-pretendard);
  -webkit-transition: all 0.28s;
  transition: all 0.28s;
}

.main .visual .text h2 .light {
  font-weight: 200;
}

.main .visual .text h2 .semi {
  font-weight: 600;
}

.main .visual .text.on * {
  color: var(--color-white);
}

.main .visual .text.on em {
  display: inline-block;
  color: transparent;
  opacity: 0;
  -webkit-transform: scaleY(1.12) rotateX(65deg);
          transform: scaleY(1.12) rotateX(65deg);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

@-webkit-keyframes em {
  10% {
    opacity: 0.8;
    -webkit-transform: scaleY(1.12);
            transform: scaleY(1.12);
  }
  40% {
    opacity: 0.2;
  }
  60% {
    -webkit-transform: scaleY(1.24) rotateX(65deg);
            transform: scaleY(1.24) rotateX(65deg);
  }
  100% {
    color: #fff;
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes em {
  10% {
    opacity: 0.8;
    -webkit-transform: scaleY(1.12);
            transform: scaleY(1.12);
  }
  40% {
    opacity: 0.2;
  }
  60% {
    -webkit-transform: scaleY(1.24) rotateX(65deg);
            transform: scaleY(1.24) rotateX(65deg);
  }
  100% {
    color: #fff;
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

.main .visual .text.on h2 span {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
		  color:#fff;
}

.main .visual .slideButtons {
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main .visual .slideButtons em {
  padding: 0 20px;
}

.main .visual button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 8px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  background:transparent;
  border:0;
}

.main .visual button::before, .main .visual button::after {
  content: "";
  display: block;
  height: 1px;
  background: #fff;
}

.main .visual button::before {
  width: 150px;
  opacity: 0.3;
}

.main .visual button::after {
  width: 80px;
  position: absolute;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main .visual button:hover::after {
  width: 100%;
}

.main .visual .prevButton {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.main .visual .nextButton {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.main .visual .swiper-slide-active .bg::after {
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.main .visual .swiper-slide-active .text.on em {
  -webkit-animation: em 1.0s ease-in-out forwards;
          animation: em 1.0s ease-in-out forwards;
}

.main .visual .swiper-slide-active .text.on em.delay1 {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

.main .visual .swiper-slide-active .text.on em.delay2 {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}

.main .visual .swiper-slide-active .text.on em.delay3 {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}

.main .visual .swiper-slide-active .text.on em.delay4 {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}

.main .visual .swiper-slide-active .text.on em.delay5 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.main .visual .swiper-slide-active .text.on em.delay6 {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}

.main .visual .swiper-slide-active .text.on em.delay7 {
  -webkit-animation-delay: 0.84s;
          animation-delay: 0.84s;
}

.main .visual .swiper-slide-active .text.on em.delay8 {
  -webkit-animation-delay: 0.96s;
          animation-delay: 0.96s;
}

.main .visual .swiper-slide-active .text.on h2 span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
  -webkit-filter: inherit;
          filter: inherit;
}

.main .visual .swiper-slide-active .text.on h2 span.span1 {
  -webkit-transition-delay: 0.22s;
          transition-delay: 0.22s;
}

.main .visual .swiper-slide-active .text.on h2 span.span2 {
  -webkit-transition-delay: 0.44s;
          transition-delay: 0.44s;
}

.main .visual .swiper-slide-active .text.on h2 span.span3 {
  -webkit-transition-delay: 0.66s;
          transition-delay: 0.66s;
}

.main .visual .swiper-slide-active .text.on h2 span.span4 {
  -webkit-transition-delay: 0.88s;
          transition-delay: 0.88s;
}

.main .visual .swiper-slide-active .text.on h2 span.span5 {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

.main .visual .swiper-slide-active .text.on h2 span.span6 {
  -webkit-transition-delay: 1.32s;
          transition-delay: 1.32s;
}

.main .visual .swiper-slide-active .text.on h2 span.span7 {
  -webkit-transition-delay: 1.54s;
          transition-delay: 1.54s;
}

.main .visual .swiper-slide-active .text.on h2 span.span8 {
  -webkit-transition-delay: 1.76s;
          transition-delay: 1.76s;
}

.main .visual .swiper-slide-active .text.on h2 span.span9 {
  -webkit-transition-delay: 1.98s;
          transition-delay: 1.98s;
}

.main .visual .swiper-slide-active .text.on h2 span.span10 {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}



 /*  */
.sec01 { position:relative; padding:150px 0;  }
.sec01:before { position:absolute; content:'JS LOGISTICS'; top:0px; right:-20px; font-size:250px; line-height:1; font-weight:900; color:#f5f5f5; }
.sec01 .inner{ width:1280px; display:flex; justify-content: flex-end; }

.sec01 .info { position:absolute; left:0; bottom:50px; }
.sec01 .info .stit { font-size:30px; font-weight:800; color:#333; }
.sec01 .info h2 { font-size:62px; margin-bottom:30px; font-weight:400; line-height:1.2; }
.sec01 .info h2 strong { color:#bf2839; font-weight:700; }
.sec01 .info .desc { font-size:32px; }
.sec01 .info .desc strong { font-weight:700; }
.sec01 .info .desc2 { font-size:15px; color:#757575}


 /*  */
.sec02 { position:relative;  padding:120px 0; background:url('../img/main/bg_service.jpg') top center no-repeat; background-size:cover; }
.sec02 .inner { text-align:center; }
.sec02 .title_wrap { text-align:center; color:#fff; margin-bottom:150px; }
.sec02 .title_wrap .stit { font-size:20px; margin-bottom:50px; letter-spacing: 1rem; }
.sec02 .title_wrap h2 { font-size:55px; font-weight:300; line-height:1.2; }
.sec02 .title_wrap h2 strong { font-weight:700; }


.sec02 .info_list { position:relative; display:inline-flex; gap:30px; z-index:3; }
/*
.sec02 .info_list:before { position:absolute; top:90px; left:50px; content:""; height:1px; background:rgba(255,255,255,0.5); width:700px; overflow:hidden; z-index:1; }
*/
.sec02 .info_list li { display:flex; flex-direction:column; }
.sec02 .info_list li i.icon { display:inline-block; width:60px; height:60px; background-repeat:no-repeat; margin:0 auto 20px; }
.sec02 .info_list li i.icon1 { background-image:url('../img/main/icon/icon1.png'); }
.sec02 .info_list li i.icon2 { background-image:url('../img/main/icon/icon2.png'); }
.sec02 .info_list li i.icon3 { background-image:url('../img/main/icon/icon3.png'); }
.sec02 .info_list li i.icon4 { background-image:url('../img/main/icon/icon4.png'); }
.sec02 .info_list li i.icon5 { background-image:url('../img/main/icon/icon5.png'); }
.sec02 .info_list li i.icon6 { background-image:url('../img/main/icon/icon6.png'); }

.sec02 .info_list li .num { position:relative; display:inline-block; width:60px; height:60px; line-height:60px; background-color:#c02739; border-radius:30px; text-align:center; font-size:20px; color:#fff; margin:0 auto 15px; z-index:9; }

.sec02 .info_list li a { display:inline-block; width:100%; height:500px; background:#c02739; color:#fff; }


.sec02 .info_list li .info { padding:0; color:#fff; }
.sec02 .info_list li .info h3 { font-size:22px; margin-bottom:10px; }
.sec02 .info_list li .info .desc { font-size:14px; font-weight:300; line-height:1.5; word-break:keep-all; }

.sec02 .info_list li .info_mask { position:absolute; top:0; left:0; z-index:11; opacity: 0; transition:all 0.5s; }
.sec02 .info_list li a:hover .info_mask { opacity: 1; }

 /*  */
.sec03 { position:relative; padding:120px 0; background:#f6f7f9; }
.sec03 .inner { width:1200px; text-align:center; }
.sec03 h2 { font-size:48px; line-height:55px; margin-bottom:50px; color:#000; }
.sec03 h2 span { font-weight:400; }

.sec03 .tab_mn { width:1203px; margin:0 auto 30px; background:#fff; }
.sec03 .tab_mn:after {display:block;visibility:hidden;clear:both;content:""}
.sec03 .tab_mn li { float:left; width:300px;}
.sec03 .tab_mn li a  { display:inline-block; width:100%; height:50px; background:#d1d1d1; line-height:50px; font-size:18px; letter-spacing: -0.1em; }
.sec03 .tab_mn li a.active { background:#c02739; color:#fff; }
.sec03 .tab_mn li + li { margin-left:1px; }

.sec03 .tab_content { display:none; }
.sec03 .tab_content.active { display:block; }
.sec03 .tab_content .thumb { margin-bottom:30px; }
.sec03 .tab_content .cont { text-align:left; font-size:20px; line-height:1.5; padding:0 10px; }

.sec03 .tab_content .map_inner { display:flex; gap:0; }
.sec03 .tab_content .map_inner .map_info { padding:10px 0 0 80px; text-align:left; }
.sec03 .tab_content .map_inner .map_info h3 { font-size:62px; line-height:62px; font-weight:900; font-family:arial; margin-bottom:50px; }
.sec03 .tab_content .map_inner .map_info .map_logo { width:180px; margin-bottom:10px; }
.sec03 .tab_content .map_inner .map_info .map_logo img { width:100%; height:auto; }
.sec03 .tab_content .map_inner .map_info .map_cs { display:flex; flex-direction:column; gap:5px; }
.sec03 .tab_content .map_inner .map_info .map_cs li { text-align:left; font-size:22px; }
.sec03 .tab_content .map_inner .map_info .map_cs li strong { display:inline-block; color:#c02739; margin-right:10px; }
.sec03 .tab_content .map_inner .map_info .btn_cs { margin-bottom:50px; }
.sec03 .tab_content .map_inner .map_info .btn_cs a { position:relative; display:inline-block; width:200px; height:40px; line-height:40px; background:#dcdcdc; padding:0 10px; font-size:14px; transition:all 0.3s; }
.sec03 .tab_content .map_inner .map_info .btn_cs a:hover { background:#c02739; color:#fff; }
.sec03 .tab_content .map_inner .map_info .btn_cs i { position:absolute; right:10px; top:50%; transform:translateY(-10px); font-size:20px;  }

 /*  */
.sec04 {padding:80px 0;}
.sec04 .inner{ width:1400px; display:flex; justify-content: flex-end; }

.sec04 .info { position:absolute; left:0; top:130px; }
.sec04 .info .stit { font-size:30px; font-weight:800; margin-bottom:10px; color:#333; }
.sec04 .info h2 { font-size:55px; margin-bottom:20px; color:#333; }
.sec04 .info .desc { font-size:18px; margin-bottom:100px; }
.sec04 .info .desc strong { color:#0b388b; }
.sec04 .info .card_img { position:relative; }
.sec04 .info .card_img a { position:absolute; top:270px; left:340px; display:inline-block; background:#bababa; color:#fff; font-size:14px; width:140px; height:30px; line-height:30px; transition:all 0.3s; padding:0 20px; }
.sec04 .info .card_img a i { position:absolute; top:13px; right:20px; }
.sec04 .info .card_img a:hover { background:#191919; }

.sec04 .thumb { display:table; }
.sec04 .thumb > div { display:table-cell; vertical-align:top; }
.sec04 .thumb .img1 {  }
.sec04 .thumb .img2 { padding:60px 0 0 20px; }

 /*  */
.sec05 { padding:30px 0 120px; }
.sec05 .inner { width:1400px; gap:50px; display:flex; }
.sec05 .inner .main_lt { width:675px; }
.sec05 .main_lt > h2 { font-size:35px; margin-bottom:30px; }

 /*  */
.sec06 { width:100%; height:970px; background:url('../img/main/bg_link.jpg') top center no-repeat; }
.sec06 .inner { display:table; width:1440px; height:100%;  border-left:1px solid rgba(255,255,255,0.5); border-right:1px solid rgba(255,255,255,0.5);}
.sec06 .inner a { display:table-cell; color:#fff; width:33.33333333333333333333%; height:100%; vertical-align:middle; text-align:center;  transition:all 0.3s; }
.sec06 .inner a + a { border-left:1px solid rgba(255,255,255,0.5); }
.sec06 .inner a:hover { background:rgba(192,39,57,0.5); }

.sec06 .inner a h2 { font-size:34px; margin-bottom:10px; }
.sec06 .inner a p { font-size:18px; margin-bottom:50px; }
.sec06 .inner a .btn_more { display:inline-block; border:1px solid rgba(255,255,255,0.5); width:53px; height:53px; font-size:22px; line-height:50px; }