@charset "utf-8";

.main { contain: content; }
.main section { scroll-margin-top: var(--header-height); }
.main .common-h2 {position: relative;font-size: var(--fs40);font-family: var(--font-pre);isolation: isolate;}
.main .common-h2::before { content: ''; position: absolute; top: 0; left: 0; transform: translate(20%, -13%) rotate(45deg); z-index: -1; width: 1.6em; aspect-ratio: 1; background: rgba(var(--secondary), 0.1); }
.main .common-more { display: inline-flex; align-items: center; gap: 31rem; font-weight: 700; font-size: 18rem; font-family: var(--font-pre); color: #494949; text-transform: uppercase; }
.main .common-more-arrow { width: 42rem; height: auto; fill: currentColor; }
.main .main_title { font-size: var(--fs35); color: var(--primary); }
.main .uline::after { content: ''; position: relative; display: block; width: 90rem; height: 1px; background: #888888; margin-top: 30rem; }
.main .section_wrap { display: flex; align-items: center; height: 100svh; padding-top: var(--header-height); }

.main > section {padding-block: 100rem;}
.main .section_title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50rem;}
.main .section_title .common-lead { font-size: 18rem; color: var(--primary); font-weight: 600; }
.main .section_title .more { width: 60rem; height: 60rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #f2f2f2; }
.main .section_title .more .common-arrow { rotate: 0deg; transition: all 0.4s; }
.main .section_title .more:hover .common-arrow { rotate: -45deg; }


@media screen and (max-width: 1279px) {
    .main .section_wrap {height: auto; padding: 50rem 0;}
    .main > section {margin-bottom: 80rem;}
} 
@media screen and (max-width: 767px) { 
    .main > section {padding-block: 50rem;margin-bottom: 0;}
} 
/* Section00 */
.visual { position: relative; display: grid; align-items: center; height: auto; background: var(--black); color: #fff; isolation: isolate; height: 100svh !important; }
.visual .swiper { position: absolute; inset: 0; z-index: -1; isolation: isolate; }
.visual .swiper-wrapper, .visual .swiper-slide { display: flex; align-items: center; height: 100%; }
.visual .videof{width: 100%; height: 100%; object-fit: cover; } 
.visual .swiper-slide::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 10%) no-repeat top / cover; background-blend-mode: multiply;}
.visual .s01::before { background-image: url('/images/main/img-mainVis.jpg'); }
.visual .s02::before { background-image: url('/images/main/img-mainVis02.jpg'); }
.visual .t-group { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10rem; max-width: 1480rem; width: 100%; margin: 0 auto; padding-top: var(--header-height); }
.visual .control { display: flex; gap: 30rem; }
.visual .arrow { margin: auto; display: block; width: 26rem; fill: currentColor; }
.visual .h2 { margin-top: 32rem; font: 700 clamp(30rem, calc(90 / var(--inr) * 100vw), 60rem) / 1.33 var(--font-pre); text-align: center; }
.visual .t1, .visual .t2 { display: inline-block; font-size: var(--fs24); font-weight: 200;}
.visual .t-group .t1, .visual .t-group .tbot { font-size: var(--fs24); line-height: normal; font-weight: bold; }
.visual .t-group .tbot {font-weight: 600;font-size: var(--fs60);}
.visual .t-group .btn-comp { margin-top: 50rem;}
/* .visual .t-group .btn-comp:hover { background: #17731d; transition: all 0.3s; } */

.visual .slide_btn { position: relative; width: 100%; max-width: calc(var(--inr-wide)* 1rem); margin: 0 auto; display: flex; justify-content: space-between; }
.visual .slide_btn .swiper-button-next, .visual .slide_btn .swiper-button-prev { position: relative; display: flex; justify-content: center; align-items: center; width: 70rem; height: 70rem; background-color: rgba(217, 217, 217, 0.1); border-radius: 50%; margin-top: 0; top: 0; right: unset; left: unset; }
.visual .slide_btn .swiper-button-next::after, .visual .slide_btn .swiper-button-prev::after { content: ''; display: block; background: url(/images/common/ico-arrow-15.svg) no-repeat; background-size: contain; width: 30rem; height: 12rem; }
.visual .slide_btn .swiper-button-prev::after { transform: rotate(180deg); }

.visual .scrollDown{ position: absolute; inset: auto 0 62rem; margin: auto; display: flex; align-items: end; justify-content: space-between; pointer-events: none; flex-direction: row-reverse; }
.visual .scrollDown .wrapper{display: flex;justify-items: center;gap: 20rem; width: fit-content;}
.visual .scrollDown .txt{ translate: 1rem; margin: 6rem 0; font: 14rem var(--font-pre); font-weight: 600; letter-spacing: 0; }
.visual .scrollDown .arrow{position: relative;width: 14rem;aspect-ratio: 9/5;}
.visual .scrollDown .arrow::before{content: '';position: absolute;inset: 50%;translate: -50% -50%;width: 12rem;aspect-ratio: 1;border: solid currentColor;border-width: 0 1px 1px 0;rotate: 45deg;}
.visual .scrollDown .arrow{ animation: scrollDown-arrow 1s ease-in-out infinite; }
.visual .swiper-pagination { position: relative; top: unset; bottom: unset; width: fit-content; display: flex; gap: 20rem; font-size: 18rem; font-weight: 200; }
.visual .swiper-pagination .swiper-pagination-current { font-weight: 500; }


@media (max-width: 1279px) {
    .visual .t-group { height: 100svh; display: flex; justify-content: center; align-items: center; }
 }
@media (max-width: 767px) {
    .visual .nav-slide { align-items: flex-start; gap: 30rem; flex-direction: column; } 
    .visual .t1, .visual .t2 { font-size: 16rem; }
    .visual .slide_btn { top: 25%; right: 25%; width: 40%; }
    .visual .t-group .tbot {font-size: var(--fs60);}
}

@keyframes scrollDown-arrow {
    0%, 100%{ translate: 0; }
    50% { translate: 0 5rem; }
}
@keyframes bounce {
    0%, 15%, 38%, 60%, 75% { transform: translateY(0); }
    30% { transform: translateY(10px); }
    45% { transform: translateY(5px); }
}
@keyframes line{
    0%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;transform-origin:center top}
    49%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-moz-transform:scale3d(1, 1, 1);-ms-transform:scale3d(1, 1, 1);-o-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);-webkit-transform-origin:center top;-moz-transform-origin:center top;-ms-transform-origin:center top;-o-transform-origin:center top;transform-origin:center top}
    50%{opacity:1;-webkit-transform:scale3d(1, 1, 1);-moz-transform:scale3d(1, 1, 1);-ms-transform:scale3d(1, 1, 1);-o-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
    99%{opacity:1;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
    100%{opacity:0;-webkit-transform:scale3d(1, 0, 1);-moz-transform:scale3d(1, 0, 1);-ms-transform:scale3d(1, 0, 1);-o-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom}
}

/* Section01 */
.main .product .sec_title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50rem; }
.main .product .sec_title hgroup { display: flex; flex-direction: column; gap: 20rem; }
.main .product .sec_title hgroup h2 { font-size: var(--fs35); font-weight: 900; }
.main .product .sec_title hgroup span { font-size: 18rem; color: #656565; }
.main .product .sec_title .btn-vmore { width: 80rem; }
.main .product .prod-list ul { display: flex; gap: 20rem; }
.main .product .prod-list ul li { width: calc(100% / 3); border: 2px solid transparent; border-radius: 0; transition: all 0.4s; }
.main .product .prod-list ul li>a::before{content:'';position:absolute;inset:0;border:0 solid var(--primary);pointer-events:none;transition: .1s linear;}
.main .product .prod-list ul li a { display: flex; flex-direction: column; align-items: center; gap: 24rem; padding: 40rem 20rem; /*margin-bottom: 20rem;*/background-color: #EFEFEF; }
.main .product .prod-list ul li a figure {overflow: hidden;}
.main .product .prod-list ul li a figure img { aspect-ratio: 1/1; object-fit: cover;transition: all .8s ease-out }
.main .product .prod-list ul li a span { font-weight: 900; font-size: 22rem; text-transform: uppercase; }

@media(any-hover){
    .main .product .prod-list ul li:hover a figure img {transform: scale(105%)}
    .main .product .prod-list ul li>a:hover:before {border-width: 6rem;} 
}

@media (max-width: 767px) {
    .main .product .prod-list ul {flex-direction: column;}
    .main .product .prod-list ul li {width: auto;}
    .main .product .sec_title {flex-direction: column;gap: 20rem;} 
}


/* section02  */
.company {background-color: var(--black-surfaces);color:var(--white);padding-block: 120rem 110rem;margin-bottom: 0 !important;
   .inr {padding-bottom: 100rem;}
  .sec_title {margin-bottom: 50rem;}
  .sec_title hgroup{display:flex;flex-direction:column;align-items: center;gap:20rem;text-align: center;}
  .sec_title h2 {font-size: var(--fs35);font-weight: 900;}
  .sec_title span {font-size: 18rem; }
  .company-lists {display:flex;flex-direction:row;gap: 80rem;}
  .company-lists > li:nth-child(odd) {transform: translateY(50rem);}
  .company-lists figure {position: relative;}
  .company-lists figure figcaption{background-color:var(--white);color:#000;padding:20rem 20rem;position:absolute;bottom:30rem;left:-20rem;width:240rem;height:100rem;}
  .company-lists figure figcaption h4 {font-size: var(--fs20);font-weight: 800;color: var(--primary);text-transform: uppercase;}
  .company-lists figure figcaption p {font-size: 18rem;font-weight: 400;}

  @media (max-width: 767px) {
    .inr{padding-bottom:20rem;}
    .sec_title{margin-bottom:30rem;}
    .company-lists {flex-direction: column;gap: 40rem;}
    .company-lists>li:nth-child(odd){transform:translateY(0)}
  }
}

.contact {background-color: var(--grey-surfaces);
  .inr {display: grid;grid-template-columns: 60% auto;padding-block: 20rem 40rem;}
  .inr > div {display: flex;align-items: center;justify-content: flex-end;}
  hgroup{text-align:left}
  hgroup h4 {font-size: var(--fs25);font-weight: 600;}
  hgroup p {font-size: 18rem;margin-top: 13rem;}
  .btn-contact{height:64rem;}

  @media (max-width: 767px) {
    .inr {grid-template-columns: 1fr;justify-items: center;gap: 30rem;}
    hgroup{text-align:center}
  }

}

.area-subVisual{display:none}

.en .product .sec_title hgroup span,
.en .company .sec_title span,
.en .contact hgroup p{ font-size: var(--fs20); }