.page-main{background-color: #FDFBF4; transition: ease 1.5s background-color;}
.page-main.page-black{background-color: #000;}
.page-main *{color: #000;}
.page-main.page-black *{color: #fff;}
.page-main.page-black .end_logo img{filter: invert(0);}
.page-main.page-black .main_sec_3_1 .svg{/*filter: invert(1);*/}

.page-main.page-black .main_sec_4_1 .svg{filter: invert(0);}
.main_sec_4_1 .svg{/*filter: invert(1);*/ transition: all 1s cubic-bezier(0,0,.43,1.06);}
.main_sec_4.ani.active .main_sec_4_1 .svg{transform: translateY(-50%);}
section{position: relative;}

/*@media (min-width: 1025px) and (max-width: 2799px) {*/
/*@media (min-width:1024px) {*/
  section { position: relative; }
  .main_sec_1 { display: flex; height: 800px; width: 100%; overflow: hidden;}
  .main_sec_1 img { height: 100%; object-fit: cover; }
  .main_sec_2 { padding: 8.043vw /*3.753vw*/56px 3.217vw; }
  .main_sec_2 span { font-size: 2.413vw; line-height: 1.6; font-weight: 300; }

  .main_sec_3 { display: flex; position: relative; height: 40.885vw; }
  .main_sec_3::before { content: ''; display: block; width: 0; height: 1px; background-color: #000; transition: ease 1s width, ease 1s background-color; position: absolute; z-index: 1; }
  /*.page-main.page-black .main_sec_3::before{background-color: #fff;}*/
  .main_sec_3.active::before { width: 100%; }
  .main_sec_3_1 { padding: 5.362vw 0 4.021vw /*3.753vw*/ 56px; width: calc((100% / 12) * 5); }
  .main_sec_3_1 h1 { font-weight: 500; font-size: 4.29vw; line-height: 1.05; margin-bottom: 1.609vw;}
  .main_sec_3_1 span { font-size: 1.072vw; font-weight: 400; line-height: 1.6; }
  .main_sec_3_1 .fade-slice { font-size: 1.072vw; font-weight: 400; line-height: 1.6; position: relative; }
  .main_sec_3_1 .svg { position: absolute; left: /*3.753vw*/ 56px; bottom: 4.021vw; filter: invert(0); transition: all 1s cubic-bezier(0,0,.43,1.06);}
  .main_sec_3_txt { position: relative; width: 80%; }
  .main_sec_3_txt .fade-slice{/*width: 100%;*/ display: block;}
  .main_sec_3_2 { width: calc((100% / 12) * 7); position: relative; display: flex; overflow: hidden; }
  .main_sec_3_2 > div { width: 50%; }
  .main_sec_3_2 img{width: 100%; object-fit: cover;}
  .main_sec_3_2 a.pfItem:hover > .off, .main_sec_3_2 a.pfItem > .off{opacity: 1; z-index: 1;}
  
  .m_3_2_1 .repeat_w { animation: toUp 10s cubic-bezier(0, 0, 1, 1.00) infinite; }
  .m_3_2_2 .repeat_w { animation: toDown 10s cubic-bezier(0, 0, 1, 1.00) infinite; }


  .main_sec_4 { height: 40.885vw; }
  .main_sec_4_1 { padding: 0 /*3.753vw*/56px; display: flex; justify-content: flex-start; align-items: center; position: relative; height: 15.147vw; }
  .main_sec_4_1 .fade-cw {  width: calc(100% / 6); }
  .main_sec_4_1  h1{font-size: 4.29vw; font-weight: 500; line-height: 1.05; padding-top: 0.5363vw;}
  .main_sec_4_1 > span { font-size: 1.072vw; font-weight: 400; line-height: 1.6; display: block; width: calc((100% / 12) * 5); }
  .main_sec_4_1 .fade-slice{ font-size: 1.072vw; font-weight: 400; line-height: 1.6; display: block; width: calc((100% / 12) * 5); }
  .main_sec_4_1 .svg { position: absolute; right: /*3.753vw*/56px; top: 50%; transform: translateY(-50%); }
  .main_sec_4_2 { overflow: hidden; position: relative; height: 25.737vw; }
  .main_sec_4_2 img { height: 100%; width: 100%; object-fit: cover; }
  .main_sec_4_2 .swiper-wrapper { transition-timing-function: linear; }
  .main_sec_4_2 .swiper-slide { height: 100%; }
/*}*/


@media(min-width:1920px){
  .wrap{overflow-x: hidden;}
.wrap > section{margin: auto;}

/*
.main_sec_1{display: flex; height: 800px; width: 100%;}
.main_sec_1 img{height: 100%; object-fit: cover;}
.main_sec_2{padding: 120px 56px 48px;}
.main_sec_2 span{font-size: 36px; line-height: 1.6; font-weight: 400;}

.main_sec_3{display: flex; position: relative; height: 610px;}
.main_sec_3::before{content: ''; display: block; width: 0; height: 1px; background-color: #000; transition: ease 1s width; position: absolute; z-index: 1;}
.main_sec_3.active::before{width: 100%;}
.main_sec_3_1{padding: 80px 0 60px 56px; width: calc((100% / 12) * 5);}
.main_sec_3_1 h1{font-weight: 500; font-size: 64px; line-height: 1.05; margin-bottom: 24px;}
.main_sec_3_1 span{font-size: 16px; font-weight: 400; line-height: 1.6;}
.main_sec_3_1 .fade-slice{font-size: 16px; font-weight: 400; line-height: 1.6; position: relative;}
.main_sec_3_1 .svg{position: absolute; left: 56px; bottom: 60px;}
.main_sec_3_txt{position: relative; width: 80%;}
.main_sec_3_2{width: calc((100% / 12) * 7); position: relative; display: flex; overflow: hidden;}
.main_sec_3_2 > div{width: 50%;}

.main_sec_3_2 img{width: 100%; object-fit: cover;}
.m_3_2_1 .repeat_w{animation: toUp 10s cubic-bezier(0, 0, 1, 1.00) infinite;}
.m_3_2_2 .repeat_w{animation: toDown 10s cubic-bezier(0, 0, 1, 1.00) infinite;}


.main_sec_4{color: #fff; height: 610px;}
.main_sec_4_1{padding:0 56px; display: flex; justify-content: flex-start; align-items: center; position: relative; height: 226px;}
.main_sec_4_1 h1{font-weight: 500; font-size: 64px; line-height: 1.05; padding-top: 8px;}
.main_sec_4_1 .fade-cw{font-size: 64px; font-weight: 500; line-height: 1.05; width: 240px;}
.main_sec_4_1 > span{font-size: 16px; font-weight: 400; line-height: 1.6; display: block; width: 600px;}
.main_sec_4_1 .svg{position: absolute; right: 56px; top: 50%; transform: translateY(-50%);}
.main_sec_4_2{overflow: hidden; position: relative; height: 384px;}
.main_sec_4_2 img{height: 100%; width: 100%; object-fit: cover;}
.main_sec_4_2 .swiper-wrapper{transition-timing-function: linear;}
.main_sec_4_2 .swiper-slide{height: 100%;}*/
/*.main_sec_3_2 > div:hover .repeat_w {animation-play-state: paused;}*/
/*.main_sec_4_icon{position: absolute; right: 46px; bottom: -17px; width: calc(100% / 12 ); z-index: 1;}*/

.main_sec_1{display:flex; height:1030px; width:100%;}
.main_sec_1 img{height:100%; object-fit:cover;}
.main_sec_2{padding:154px 56px 62px;}
.main_sec_2 span{font-size:46px;}

.main_sec_3{display:flex; position:relative; height:785px;}
.main_sec_3::before{content:''; display:block; width:0; height:1px; background-color:#000; transition:ease 1s width; position:absolute; z-index:1; left: 50%; transform: translateX(-50%);}
.main_sec_3.active::before{width:100vw;}
.main_sec_3_1{padding:103px 0 77px 56px; width:calc((100% / 12) * 5);}
.main_sec_3_1 h1{font-weight:500; font-size:82px; line-height:1.05; margin-bottom:31px;}
.main_sec_3_1 span{font-size:21px; font-weight:400; line-height:1.6;}
.main_sec_3_1 .fade-slice{font-size:21px; font-weight:400; line-height:1.6; position:relative;}
.main_sec_3_1 .svg{position:absolute; left:56px; bottom:77px;}
.main_sec_3_txt{position:relative; width:80%;}
.main_sec_3_2{width:calc((100% / 12) * 7); position:relative; display:flex; overflow:hidden;}
.main_sec_3_2 > div{width:50%;}
.main_sec_3_2 img{width:100%; object-fit:cover;}
.m_3_2_1 .repeat_w{animation:toUp 10s cubic-bezier(0,0,1,1.00) infinite;}
.m_3_2_2 .repeat_w{animation:toDown 10s cubic-bezier(0,0,1,1.00) infinite;}

.main_sec_4{color:#fff; height:785px;}
.main_sec_4_1{padding:0 56px; display:flex; justify-content:flex-start; align-items:center; position:relative; height:291px;}
.main_sec_4_1 h1{font-weight:500; font-size:82px; line-height:1.05; padding-top:10px;}
.main_sec_4_1 .fade-cw{font-size:82px; font-weight:500; line-height:1.05; width:309px;}
.main_sec_4_1 > span{font-size:21px; font-weight:400; line-height:1.6; display:block; width:773px;}
.main_sec_4_1 .svg{position:absolute; right:72px; top:50%; transform:translateY(-50%);}
.main_sec_4_2{overflow:hidden; position:relative; height:494px;}
.main_sec_4_2 img{height:100%; width:100%; object-fit:cover;}
.main_sec_4_2 .swiper-wrapper{transition-timing-function:linear;}
.main_sec_4_2 .swiper-slide{height:100%;}

}
@media (max-width: 1024px) {
  .main_sec_1 { flex-direction: column; height: calc(100 * var(--vh)); justify-content: center;}
  .main_sec_1 > div { height: 100%; }
  .main_sec_1 img { width: 100%; }
  .vertical-slider .slide{height: 101%;}
  .main_sec_2 { padding: 16.667vw 5.556vw 11.111vw; }
  .main_sec_2 span { font-size: 4.0vw; }

  .main_sec_3 { flex-direction: column; height: 175vw; }
  .main_sec_3_1, .main_sec_3_2 { width: 100%; }
  .main_sec_3_1 { padding: 11.111vw 5.556vw 0; position: relative; height: 75vw; }
  .main_sec_3_1 h1 { font-size: 11.111vw; margin-bottom: 4.444vw; }
  .main_sec_3_txt { width: 100%; }
  .main_sec_3_1 .fade-slice{font-size: 3.611vw;}
  .main_sec_3_1 span { font-size: 3.611vw; }
  .main_sec_3_1 .svg { /*width: 6.667vw; height: 11.667vw;*/ left: 5.556vw; bottom: 5.556vw; }
  .main_sec_3_2 { height: 100vw; }
  .main_sec_3_2 > div{width: 100%;}

  .main_sec_4 { flex-direction: column; height: 175vw; }
  .main_sec_4_1, .main_sec_4_2 { width: 100%; }
  .main_sec_4_1 { padding: 11.111vw 5.556vw 0; position: relative; height: 75vw; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .main_sec_4_1 h1 { font-size: 11.111vw; margin-bottom: 0; }
  .main_sec_4_1 .fade-cw { font-size: 11.111vw; margin-bottom: 4.444vw; width: unset; }
  .main_sec_4_txt { width: unset; }
  .main_sec_4_1 > span { font-size: 3.611vw; width: 100%; }
  .main_sec_4_1 .fade-slice{font-size: 3.611vw; width: 100%;}
  .main_sec_4_1 .svg { /*width: 6.667vw; height: 11.667vw;*/ left: 5.556vw; right: unset; bottom: 5.556vw; top: unset; }
  .main_sec_4_2 { height: 50vw; }

  .main_sec_4_3 { overflow: hidden; position: relative; height: 50vw; }
  .main_sec_4_3 img { height: 100%; width: 100%; object-fit: cover; }
  .main_sec_4_3 .swiper-wrapper { transition-timing-function: linear; }
  .main_sec_4_3 .swiper-slide { height: 100%; }
}







@keyframes toUp {
  0% {
    transform: translateY(-0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes toDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(00%);
  }
}
@keyframes toRight {
  0% {
    transform: translateX(-00%);
  }
  100% {
    transform: translateX(100%);
  }
}


.vertical-slider {
  position: relative;
  width: 100%;  /* 원하는 크기 */
  height: 100%; /* 원하는 크기 */
  overflow: hidden;
}
.vertical-slider .slide {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: 1;
}
.vertical-slider .slide.current,
.vertical-slider .slide.animate-in,
.vertical-slider .slide.animate-out {
  z-index: 2; /* 전환 중엔 둘 다 위 */
}

/* 왼쪽(up) - 아래서 올라옴 */
.vertical-slider.up .slide.incoming   { transform: translateY(100%); transition: none; }
.vertical-slider.up .slide.animate-in { transform: translateY(0%); }
.vertical-slider.up .slide.animate-out{ transform: translateY(-100%); }
/* 오른쪽(down) - 위에서 내려옴 */
.vertical-slider.down .slide.incoming   { transform: translateY(-100%); transition: none; }
.vertical-slider.down .slide.animate-in { transform: translateY(0%); }
.vertical-slider.down .slide.animate-out{ transform: translateY(100%); }


@media(min-width:1920px){
  .main_sec_1{height:50vw;}
  .main_sec_3{height:40.885vw;}
  .main_sec_4{height: unset;}
  .main_sec_4_2{height: 25.737vw;}

}
@media (min-width: 1025px) {
  .main_sec_4::before {content: ''; display: block; top: -1px; width: 0; height: 1px; background-color: #000; transition:ease 1s width, ease 1s background-color;   position: absolute;   z-index: 1;}
  .page-main.page-black .main_sec_4::before{background-color: #ffffff;}
  .main_sec_4.active::before{width: calc((100% / 12) * 5);}

}
.main_sec_3::before{z-index: 0;}
.page-main.page-black .main_sec_3::before{background-color: #fff;}

.slide.animate-out{z-index: 3!important;}
.slide.animate-in.current{z-index: 4!important;}
/*.main_sec_1 .slide:not(.animate-out), .main_sec_1 .slide:not(.animate-in){transition: unset;}*/
/*.vertical-slider .slide{transition:transform 1.0s cubic-bezier(0.7, 0, 0.3, 1); transition-delay: 0.1s;}
.main_sec_1 .animate-in{transition:transform 1s cubic-bezier(0.7, 0, 0.3, 1)!important;}*/

.marquee-slider {
  overflow: hidden;
  position: relative;
}

.marquee-slider .track {
  white-space: nowrap;
  height: 100%;
  display: inline-flex;
  will-change: transform;
}

.marquee-slider .slide {
  flex: 0 0 auto;
}