.main-visual { position:relative; }
.main-visual .txt-box{ position:absolute; left:50%; top:50%; width:calc(100% - 40rem); max-width:1530rem; color:#fff; transform: translate(-50%,-50%); z-index:5; }
.main-visual .txt-box .tit p{ white-space: pre-line; opacity: 0;}
.main-visual .txt-box .tit p{ display:block; white-space: pre-line; }
.main-visual .txt-box .tit p span{ display:block; }
.main-visual .txt-box .tit p .line{ overflow:hidden; }
.main-visual .txt-box .tit p .line span{ opacity: 0; transform: translateY(100rem); transition: opacity 0.7s ease, transform 0.7s ease; word-break: break-all; }
.main-visual .txt-box .txt{ margin-top:20rem; opacity: 0; transform: translateY(100rem); transition: opacity 0.7s ease, transform 0.7s ease; white-space: pre-line; word-break: break-all; }
.main-visual .txt-box .btn{ margin-top:40rem; opacity: 0; transform: translateY(100rem); transition: opacity 0.7s ease, transform 0.7s ease; }

.main-visual .active .txt-box .tit p{ opacity: 1;}
.main-visual .active .txt-box .tit p .line span{ opacity: 1; transform: translateY(0); }
.main-visual .active .txt-box .txt{ opacity: 1; transform: translateY(0);}
.main-visual .active .txt-box .btn{ opacity: 1; transform: translateY(0);}

.main-visual .swiper .img-box{ position:relative; width:100%; height:100vh; min-height:600rem; overflow:hidden; }
.main-visual .swiper .img-box::before{ content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1;}
.main-visual .swiper .img-box img{ position:absolute;left:0; top:0; width:100%; height:100%; object-fit: cover; transform: scale(1.2); transition: transform 0.9s;}
.main-visual .swiper .img-box video{ position:absolute; left:0; top:0; width:100%; height:100%;  object-fit: cover; transform: scale(1.2); transition: transform 0.9s; }

.main-visual .active .img-box img, .main-visual .active .img-box video{ transform: scale(1); }

.main-visual .swiper-btns{ position:absolute; left:50%; bottom:60rem; display: flex; align-items: center; width:calc(100% - 40rem); max-width:1530rem; color:#fff; transform: translate(-50%,0); z-index:6; }
.main-visual .swiper-btns .swiper-arrow{ display:none; position:relative; left: 0; top:0; margin:0; width:56rem; height:56rem; border:1px solid #fff; border-radius:50%; cursor: pointer; transition: box-shadow 0.4s ease;}
.main-visual .swiper-btns .swiper-arrow::after{ display: none;}
.main-visual .swiper-btns .swiper-arrow:hover{ box-shadow: 0 0 15rem rgba(255,255,255,0.2);}
.main-visual .swiper-btns .swiper-button-prev{ background:url('../images/icon-slide-prev.svg') no-repeat center / 24rem auto; }
.main-visual .swiper-btns .swiper-button-next{ margin-left:8rem; margin-right:16rem; background:url('../images/icon-slide-next.svg') no-repeat center / 24rem auto; }
.main-visual .swiper-btns .btn-video{ display:none; }
.main-visual .swiper-btns .btn-pause{ /*margin-left:16rem;*/ width:24rem; height:24rem; background:url('../images/icon-slide-pause.svg') no-repeat center / 24rem auto;  }
.main-visual .swiper-btns .btn-play{ /*margin-left:16rem;*/ width:24rem; height:24rem; background:url('../images/icon-slide-play.svg') no-repeat center / 24rem auto;  }
 
@media screen and (max-width : 1024px) {  
  .main-visual .txt-box .txt{ margin-top:16rem; }
  .main-visual .txt-box .btn{ margin-top:32rem; }

  .main-visual .swiper .img-box{ min-height:500rem; }

  .main-visual .swiper-btns{ bottom:30rem; }
  .main-visual .swiper-btns .swiper-arrow{ width:48rem; height:48rem; } 
  .main-visual .swiper-btns .swiper-button-prev{ background-size:20rem auto; }
  .main-visual .swiper-btns .swiper-button-next{ margin-left:8rem; margin-right:22rem; background-size:20rem auto; }
  .main-visual .swiper-btns .btn-pause{ /*margin-left:22rem;*/ width:20rem; height:20rem; background-size:20rem auto;  }
  .main-visual .swiper-btns .btn-play{ /*margin-left:22rem;*/ width:20rem; height:20rem; background-size:20rem auto;  }
}


/* company */
.main-company{ position:relative; height:100vh; }
.main-company .img-box{ position:absolute; left:50%; top:50%; width:560rem; height:340rem; border-radius:24rem; overflow:hidden; transform: translate(-50%,-50%); } 
.main-company .img-box div img{ position:absolute; left:50%; top:50%; width:100vw; height:100vh; transform: translate(-50%,-50%); object-fit: cover;}
.main-company .img-box .dim{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1; opacity: 0;}

.main-company .txt-box{ position:absolute; left:0; top:0; z-index:1; display: flex; justify-content: center; flex-direction: column; width:100%; height:100%; color:#fff; text-align:center;  }
.main-company .txt-box .tit{ margin-top:40rem; }
.main-company .txt-box .txt{ display: flex; flex-direction: column; gap:40rem; margin:0 auto; max-width:1065rem; }
.main-company .txt-box .btn{ margin-top:80rem; }
.main-company .txt-box.box-2 .txt p span{ color:rgba(255,255,255,0.3); background:linear-gradient( to right,#fff,#fff) no-repeat; background-clip: text; background-size:0%; }

@media screen and (max-width : 1024px) { 
  .main-company .img-box{ width:400rem; height:214rem; border-radius:12rem; }   

  .main-company .txt-box .tit{ margin-top:24rem; }
  .main-company .txt-box .txt{ gap:24rem; padding:0 40rem; max-width:500rem; }
  .main-company .txt-box .btn{ margin-top:40rem; } 
}

@media screen and (max-width : 600px) { 
  .main-company .img-box{ width:calc(100% - 40rem); }
}


/* business */
.main-business{ padding:200rem 0 330rem; background:url('../images/img-main-business-bg.jpg') no-repeat top center / cover; overflow:hidden;}
.main-business .bg-txt{ font-size:240rem; line-height:130%; color:#fff; font-family: "HDfont"; white-space: nowrap; text-transform: uppercase;}
.main-business .bg-txt div { display:inline-flex; animation: marquee 30s linear infinite; }
.main-business .bg-txt span{ display:block; padding:0 30rem;}
.main-business .tit-box{ margin:160rem auto 0; }
.main-business .tit-box > *{ position:relative; top:250rem; opacity: 0; transition: top 0.7s ease, opacity 0.7s ease; }
.main-business .tit-box .tit{ margin-top:60rem; }
.main-business .tit-box .txt{ margin-top:40rem; }
.main-business .tit-box .btn{ margin-top:60rem; }

.main-business .tit-box > *.active{ top:0; opacity: 1;} 

.main-business .con-box{ display:flex; gap:20rem; margin-top:240rem; color:#fff; }
.main-business .con-box > div{ position:relative; flex: 1; height:620rem; border-radius:12rem; overflow:hidden; }
.main-business .con-box > div.right{ margin-top:230rem; } 
.main-business .con-box > div .bg{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; }
.main-business .con-box > div .txt-box{ position:relative; z-index:1; display:flex; flex-direction: column; justify-content: space-between; padding:48rem; height:100%; box-sizing:border-box; } 
.main-business .con-box .txt{ display:flex; flex-direction: column; gap:12rem; }

@media screen and (max-width : 1024px) {
  .main-business{ padding:200rem 0 80rem; }
  .main-business .bg-txt{ font-size:120rem; } 
  .main-business .tit-box{ margin:96rem auto 0; }
  .main-business .tit-box > *{ top:50rem; } 
  .main-business .tit-box .tit{ margin-top:40rem; }
  .main-business .tit-box .txt{ margin-top:24rem; }
  .main-business .tit-box .btn{ margin-top:40rem; }

  .main-business .con-box{ gap:19rem; margin-top:200rem; }
  .main-business .con-box > div{ height:427rem; border-radius:12rem;  }
  .main-business .con-box > div.right{ margin-top:150rem; }  
  .main-business .con-box > div .txt-box{ padding:32rem; } 
  .main-business .con-box .txt{ gap:12rem; }
}

@media screen and (max-width : 600px) {
  .main-business .con-box{ flex-wrap:wrap; flex-direction: column;}
  .main-business .con-box > div{ flex: initial;}
  .main-business .con-box > div.right{ margin-top:0;}
  .main-business .con-box .tit{ font-size:24rem; letter-spacing:-0.48rem; }
}


/* career */
.main-career{ padding:200rem 0; overflow:hidden; } 
.main-career .cont-box{ display:flex; gap:20rem; margin-top:32rem; height:620rem;  }
.main-career .cont-box > div{ flex:1; }
.main-career .cont-box .box-wrap{ position:relative; display:flex; flex-direction: column; justify-content: space-between; padding:48rem; height:100%; border-radius:24rem; color:#fff; overflow:hidden; } 
.main-career .cont-box .box-wrap .tit-box p{ margin-top:8rem; }
.main-career .cont-box .box-wrap .btn-box{ display:flex; flex-direction: column; gap:16rem; max-width:216rem; }

.main-career .cont-box .left .box-wrap{ padding:60rem; }
.main-career .cont-box .bg-green{ background:#008233; }
.main-career .cont-box .bg-blue{ background:#003087; }

.main-career .cont-box .left .bg{  position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; z-index:-1; }
.main-career .cont-box .right{ display: flex; flex-direction: column; gap:20rem; }
.main-career .cont-box .right > div{ flex:1; }

@media screen and (max-width : 1024px) {
  .main-career{ padding:94rem 0; } 
  .main-career .cont-box{ gap:20rem; margin-top:25rem; height:420rem; } 
  .main-career .cont-box .box-wrap{ padding:32rem; border-radius:12rem; } 
  .main-career .cont-box .box-wrap .tit-box p{ margin-top:8rem; }
  .main-career .cont-box .box-wrap .btn-box{ gap:8rem; max-width:200rem; }

  .main-career .cont-box .left .box-wrap{ padding:32rem; } 
 
  .main-career .cont-box .right{ gap:20rem; }
}

@media screen and (max-width : 600px) {
  .main-career .cont-box{ flex-direction: column; height:auto; }
  .main-career .cont-box > div{ flex:initial; } 
  .main-career .cont-box .box-wrap .btn-box{ max-width:182rem; }
  .main-career .cont-box .box-wrap .btn { max-width:182rem; }
  .main-career .cont-box .box-wrap .btn a{ width: 100%; }

  .main-career .cont-box .left{ height:420rem; }
  .main-career .cont-box .right > div{ flex:initial; height:420rem; }
}