@charset "utf-8";



/* main */
.main-visual {position: relative; width: 100%; overflow: hidden;}
.main-visual__img {width: 100%; height: calc(var(--vh, 1vh) * 100); transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transform:scale(1.3);}
.main-visual__img.mv1 {background: url('../images/main/main-visual01.jpg') no-repeat center/cover;}
.main-visual__img.mv2 {background: url('../images/main/main-visual02.jpg') no-repeat center/cover;}
.main-visual__img.mv3 {background: url('../images/main/main-visual03.jpg') no-repeat center/cover;}
.main-visual__txt-wrap {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
.main-visual__txt {color: var(--color-white); max-width: 1520rem; margin: 0 auto; padding: 0 40rem; opacity: 0; transition:opacity 0.3s ease, transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); transform:translateX(70rem);}
.main-visual__txt span {font-size: 24rem;}
.main-visual__txt h1 {font-size: 67rem; font-weight: 600; padding-top: 24rem; line-height: 1.3;}
.main-visual .swiper-slide-active{animation:main_slide_motion 2s both; clip-path:inset(10%);}
.main-visual .swiper-slide-active .main-visual__img {transform:scale(1);}
.main-visual .swiper-slide-active .main-visual__txt {opacity:1; transform:translateX(0rem); transition-delay:0.4s;}

.scroll-down {position: absolute; bottom: 49rem; right: 56rem; z-index: 1;}
.scroll-down::before {content: ''; position: absolute; bottom: 0; left: 0; width: 2rem; height: 143rem; background: var(--color-white); opacity: .4;}
.scroll-down::after {content: ''; position: absolute; bottom: -3rem; left: 10rem; width: 2rem; height: 32rem; background: var(--color-white); opacity: .4; transform: rotate(45deg);}
.scroll-down span {position: absolute; bottom: 105rem; left: -11rem; display: block; color: var(--color-white); font-size: 13rem; transform: rotate(90deg); white-space : nowrap; animation: scrolldown 1.5s ease-in-out infinite;}

/* swiper control custom */
.swiper-button-next,
.swiper-button-prev {position: initial; margin-top: 0;}
.swiper-button-next:after,  
.swiper-button-prev:after {content: '';}

.area-control__wrap {position: absolute; bottom: 15%; left: 0; margin-left: 21rem; width: 100%;}
.area-control {max-width: 1520rem; z-index: 1; margin: 0 auto; padding: 0 40rem;}
.area-control .swiper-button-next,
.area-control .swiper-button-prev {background: url('../images/main/ic-arrow.svg') center no-repeat; background-size: 5rem 10rem; width: 5rem; height: 30rem;}
.area-control .swiper-button-next {transform: rotate(-180deg); margin-left: 32rem;}
.area-control {position: relative; display: flex; align-items: center;}
.area-control__arrow {display: flex; position: relative; width: max-content; z-index: 1;}
.area-control__arrow::before {content: ''; position: absolute; top: 50%; left: 50%; width: 83rem; height: 83rem; border: 1rem solid rgba(255,255,255,.35); border-radius: 100%; transform: translate(-50%, -50%);} 
.area-control__arrow::after {content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 23rem; background: rgba(255,255,255,.2); transform: translate(-50%, -50%); z-index: -1;}
.area-control__ty2 .swiper-button-next,
.area-control__ty2 .swiper-button-prev {width: 51rem; height: 51rem; background: var(--color-white); border: 1rem solid #efefef; border-radius: 100%;}
.area-control__ty2 .swiper-button-next {margin-left: 7rem;}
.area-control__ty2 .swiper-button-next:after,
.area-control__ty2 .swiper-button-prev:after {background: url('../images/main/ic-arrow02.svg') no-repeat; width: 16rem; height: 14rem;}
.area-control__ty2 .swiper-button-prev {transform: rotate(-180deg);}

.swiper-pagination {position: unset; width: auto; margin-left: 56rem; font-size: 0;}
.swiper-pagination span {font-size: 16rem; font-weight: bold; color: var(--color-white);}
.swiper-pagination-total {position: relative; padding-left: 14rem; margin-left: 14rem;}
.swiper-pagination-total::before {content: ''; position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); width: 5rem; height: 5rem; border-radius: 100%; background: rgba(255,255,255,.6);}
.swiper-container-horizontal>.swiper-pagination-progressbar {position: relative; width: 100%; height: 3rem; margin-top: 90rem; background: #e7e7e7;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #333;}


@media screen and (max-width:1580px) {
  .wrap.ty2 {padding: 0 64rem;}
}
@media screen and (max-width:768px) {
  .main-visual__txt h1 {font-size: 57rem;}
}
@media screen and (max-width:620px) {
  .main-visual__txt,
  .area-control {padding: 0 20rem;}
  .main-visual__txt h1 {font-size: 45rem;}
  .main-visual__txt span {font-size: 20rem;}
  .scroll-down::before {height: 130rem;}
  .scroll-down span {bottom: 95rem;}
}
@media screen and (max-width:540px) {
  .main-visual__txt h1 {font-size: 38rem; padding-top: 16rem;}
  .main-visual__txt span {font-size: 18rem;}
  .area-control__arrow::before {width: 65rem; height: 65rem;}
  .swiper-pagination {margin-left: 36rem;}
}


/* main-section01 */
.main-section01 {margin-top: 117rem;}
.main-section01 .wrap {display: flex; gap: 27rem;}
.main-section01 a {display: block; width: 100%; height: 100%;}
.sec01-imgGroup {display: flex; flex-direction: column; gap: 27rem; width: 52.9%;}
.sec01-imgGroup__col2 {display: flex; gap: 27rem;}
.sec01-img {position: relative; border-radius: 8rem; overflow: hidden; transition: background-size .5s ease;}
.sec01-img:hover {background-size: 110% !important; transition: background-size .5s ease;}
.sec01-img.im1 {width: 45.2%; height: 692rem; background: url('../images/main/im-sec0101.jpg') no-repeat center/100%;}
.sec01-img.im2 {width: 48%; height: 336rem; background: url('../images/main/im-sec0102.jpg') no-repeat center/105%;}
.sec01-img.im3 {width: 48%; height: 336rem; background: url('../images/main/im-sec0103.jpg') no-repeat center/105%;}
.sec01-img.im4 {width: 100%; height: 329rem; background: url('../images/main/im-sec0104.jpg') no-repeat center/100%;}
.sec01-img__txt {position: absolute; top: 26rem; left: 26rem;}
.sec01-img__txt span {display: block; font-size: 18rem; color: var(--color-white);}
.sec01-img__txt h2 {display: block; font-size: 38rem; font-weight: 600; color: var(--color-white); padding-top: 12rem;}
.sec01-img.im1 .sec01-img__txt {top: 46rem; left: 46rem;}
@media screen and (max-width:1580px) {
    .sec01-img.im1 {background: url('../images/main/im-sec0101.jpg') no-repeat center/110%;}
    .sec01-img.im2 {background: url('../images/main/im-sec0102.jpg') no-repeat center/110%;}
    .sec01-img.im3 {background: url('../images/main/im-sec0103.jpg') no-repeat center/110%;}
    .sec01-img.im4 {background: url('../images/main/im-sec0104.jpg') no-repeat center/110%;}
    .sec01-img:hover {background-size: 115% !important;}
}
@media screen and (max-width:1300px) {
  .sec01-img.im1 {height: 600rem; width: 45%;}
  .sec01-img.im2,
  .sec01-img.im3 {height: 280rem;}
  .sec01-img.im4 {height: 295rem;}
  .sec01-img__txt h2 {font-size: 30rem;}
  .sec01-img__txt span {font-size: 16rem;}
}
@media screen and (max-width:1024px) {
  .main-section01 .wrap {gap: 20rem;}
  .sec01-imgGroup__col2 {gap: 20rem;}
  .sec01-imgGroup {width: 57.8%; gap: 20rem;}
  .sec01-img.im1 {height: 500rem; width: 40%; background-position-x: -100rem;}
  .sec01-img.im2,
  .sec01-img.im3 {height: 200rem; width: 48.2%;}
  .sec01-img.im4 {height: 280rem;}
  .sec01-img.im1 .sec01-img__txt {top: 30rem; left: 30rem;}
  .sec01-img.im1 {background: url('../images/main/im-sec0101.jpg') no-repeat center/cover;}
  .sec01-img.im2 {background: url('../images/main/im-sec0102.jpg') no-repeat center/cover;}
  .sec01-img.im3 {background: url('../images/main/im-sec0103.jpg') no-repeat center/cover;}
  .sec01-img.im4 {background: url('../images/main/im-sec0104.jpg') no-repeat center/cover;}
  .sec01-img:hover {background-size: cover !important;}
}
@media screen and (max-width:768px) {
  .main-section01 .wrap {flex-direction: column;}
  .sec01-img {height: 200rem !important;}
  .sec01-img__txt {top: 26rem !important; left: 26rem !important}
  .sec01-img.im1 {width: 100%; background-position-y: -65rem; background-position-x: 0;}
  .sec01-imgGroup {width: 100%;}
  .sec01-img.im2,
  .sec01-img.im3 {width: 50%;}
}
@media screen and (max-width:620px) {
  .main-section01 {margin-top: 80rem;}
  .sec01-img__txt h2 {padding-top: 9rem; font-size: 26rem;}
}
@media screen and (max-width:540px) {
  .wrap {padding: 0 20rem;}
  .main-section01 {margin-top: 65rem;}
  .main-section01 .wrap {gap: 15rem;}
  .sec01-img {height: 140rem !important;}
  .sec01-img.im1 {background-position-y: -28rem}
  .sec01-img__txt {top: 64rem !important; left: 20rem !important}
  .sec01-imgGroup {gap: 15rem;}
  .sec01-imgGroup__col2 {flex-direction: column; gap: 15rem;}
  .sec01-img.im2,
  .sec01-img.im3 {width: 100%;}
}

/* main-section02 */
.main-section02 {margin-top: 120rem; padding: 112rem 0 140rem; background: #f9f9f9;}
.sec02-tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 44rem;}
.sec02-tit h2 {font-size: 45rem; color: #111;}
.sec02-slide {overflow: hidden;}
.sec02-cont p {margin-top: 20rem; font-size: 20rem; font-weight: 500; color: #111; text-align: center;}
.sec02-cont span {display: block; margin-top: 8rem; font-size: 15rem; font-weight: 400; color: #666; text-align: center;}
.sec02-cont__img {overflow: hidden; aspect-ratio: 4/3; border-radius: 8rem;}
.sec02-cont__img img {width: 100%; height: 100%; object-fit: cover; }

@media screen and (max-width:1024px) {
  .main-section02 {padding: 85rem 0 120rem;}
  .sec02-tit h2 {font-size: 40rem;}
  .swiper-container-horizontal>.swiper-pagination-progressbar {margin-top: 68rem;}
}
@media screen and (max-width:620px) {
  .main-visual__txt-wrap {top: 45%;}
  .main-section02 {margin-top: 95rem; padding: 70rem 0 100rem;}
  .sec02-tit {margin-bottom: 35rem;}
  .swiper-container-horizontal>.swiper-pagination-progressbar {margin-top: 30rem;}
}
@media screen and (max-width:540px) {
  .main-section02 {margin-top: 75rem; padding: 60rem 0 90rem;}
  .sec02-tit h2 {font-size: 35rem;}
}

/* main-section03 */
.main-section03 {position: relative; background: #d93023; height: 205rem; overflow: hidden;}
.main-section03::before {content: ''; position: absolute; top: 0; left: 0; background: url('../images/main/im-sec0301.jpg') center/cover no-repeat; width: 50%; height: 205rem;}
.main-section03::after {content: ''; position: absolute; top: 0; right: 0; background: url('../images/main/im-sec0302.jpg') center/cover no-repeat; width: 50%; height: 205rem;}
.main-section03 .wrap {height: 100%;}
.sec03-box {display: flex; position: relative; z-index: 1; height: 100%;}
.sec03-boxCont {display: flex; align-items: center; justify-content: space-between; width: 50%;}
.sec03-boxCont.bx1 {padding-right: 64rem;}
.sec03-boxCont.bx2 {padding-left: 64rem; border-left: 1rem solid rgba(255,255,255,.2);}
.sec03-boxCont__tit strong {font-size: 30rem; font-weight: 600; color: var(--color-white);}
.sec03-boxCont__tit p {line-height: 1.5; padding-top: 15rem; font-size: 17rem; font-weight: 300; color: var(--color-white);}

@media (max-width:1024px) {
  .wrap.ty2 {padding: 0;}
  .main-section03 {height: auto;}
  .main-section03::before,
  .main-section03::after {display: none;}
  .sec03-box {flex-direction: column;}
  .sec03-boxCont {position: relative; width: 100%; padding: 50rem 30rem !important; box-sizing: border-box;}
  .sec03-boxCont.bx1 {padding-right: 0;}
  .sec03-boxCont.bx1::before {content: ''; position: absolute; top: 0; left: 0; background: url('../images/main/im-sec0301.jpg') center/cover no-repeat; width: 100%; height: 205rem;}
  .sec03-boxCont.bx2::before {content: ''; position: absolute; top: 0; left: 0; background: url('../images/main/im-sec0302.jpg') center/cover no-repeat; width: 100%; height: 205rem;}
  .sec03-boxCont.bx2 {padding-left: 0; border-top: 1rem solid rgba(255,255,255,.2); border-left: 0;}
  .sec03-boxCont__tit {z-index: 1;}
}
@media screen and (max-width:540px) {
  .sec03-boxCont__tit strong {font-size: 28rem;}
  .sec03-boxCont.bx1::before,
  .sec03-boxCont.bx2::before {height: 232rem;}
}

@keyframes visualScale{
	0%{transform:scale(1.13)}
	100%{transform:scale(1)}
}
@keyframes main_slide_motion{
  0%{clip-path:inset(30%);}
  100%{clip-path:inset(0);}
}
@keyframes bounce {
  100% {transform:translateY(-5rem);}
}
@keyframes scrolldown {
  0% {
    transform: rotate(90deg) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(90deg) translateX(20px);
    opacity: 0;
  }
}