@charset "utf-8";
/* common */
.mp-label {font-size: 25px; font-weight: 600; color:var(--primary); display: block; padding-bottom: 25px;}
.mp-title {}
.mp-desc {font-size: 20px; line-height: 1.6; margin-top: 40px;}
.more-icon {width: 34px; height: 34px; border-radius: 50%; border:1px solid #707070; display: flex; align-items: center; justify-content: center;}
.w-full{width: 100%;}
.logo-icon{width: 20px; height: 15px; transform: rotate(180deg);}

  .slide-controls .wrapper {display: flex; align-items: center; gap: 32px;}
  .slide-controls .slide-button {position: relative; display: flex; align-items: center; padding: 10px;}
  .slide-controls .slide-button::before,
  .slide-controls .slide-button::after {display: block; content: '';}
  .slide-controls .slide-button::before {width: 14px; height: 14px; border-top: 2px solid white; border-right: 2px solid white;}
  .slide-controls .slide-button::after {width: 80px; height: 2px; background: white;}

  .slide-controls .slide-button-prev::before {transform: rotate(-135deg); margin-right: -14px;}
  .slide-controls .slide-button-prev::after {}
  .slide-controls .slide-button-next::before {transform: rotate(45deg); margin-left: -14px; order: 1;}
  .slide-controls .slide-button-next::after {order: 0;}

  .slide-controls .slide-paging {display: flex; position: static; width: auto; display: flex; gap: 12px; align-items: flex-end;}
  .slide-controls .slide-paging .swiper-pagination-bullet {width: 112px; height: 1px; border-radius: 0px; background: white; opacity: 0.3; margin: 0;}
  .slide-controls .slide-paging .swiper-pagination-bullet-active {opacity: 1; height: 5px;}

  .main-visual {height: 100vh;}
  .main-visual-slide {display: flex; flex-direction: column; justify-content: center;}
  .main-visual-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.1); transition: transform 10s;}
  .main-visual-slide .content {color: #fff; padding-block: 0 160px; height: 329px; position: relative; z-index: 1; align-items: flex-start;}
  .main-visual-slide .content span{font-family: var(--ff-third); font-size: 20px; margin: 0 0 18px; display: block; line-height: 1; text-transform: uppercase;}
  .main-visual-slide .content .title {font-size: 68px; line-height: 1.1; opacity: 0; transform: translateX(100px); transition: opacity 0.5s, transform 0.5s; font-weight: 800; font-family: var(--ff-primary); text-transform: uppercase;}
  .main-visual-slide .content .desc {margin-top: 39px; font-size: 22px; color:rgba(255, 255, 255, 1); line-height: 1.54; opacity: 0; transform: translateX(100px); transition: opacity 0.5s, transform 0.5s; letter-spacing: -0.05em; font-family: var(--ff-third);}
  .main-visual-slide.swiper-slide-active .content .title {opacity: 1; transform: translate(0);}
  .main-visual-slide.swiper-slide-active .content .desc {opacity: 1; transform: translate(0); transition-delay: 0.2s;}
  .main-visual-slide.swiper-slide-active .main-visual-bg {transform: scale(1);}

  .main-visual .slide-controls {position: absolute; bottom: 80px; left: 0; z-index: 50; width: 100%;}
  .main-visual .content {transition: color 0.4s ease;}
  .main-visual .content.is-highlight {color: black}
  .main-visual .content.is-highlight .title, .main-visual .content.is-highlight .desc {color: black}
  
  /* .main-visual .slide-2 .content{color: #000;} */
  @media screen and (max-width: 1399px) {
    .main-visual-slide .content {text-align: center;}
    .main-visual-slide .content .title {font-size: 38px; transform: translate(0, 50px);}
    .main-visual-slide .content .desc {font-size: 18px; transform: translate(0, 50px);}
  }
  @media screen and (max-width: 767px) {
    .main-visual .slide-controls {bottom: 50px;}
    .main-visual-slide .content .title {font-size: 32px;}
    .main-visual-slide .content .desc {font-size: 16px; margin-top: 1.5em;}
  }

/* what */
.what{padding: 135px 0 102px;}
.what .logo-icon{transform: initial;}
.mr30{margin: 0 30px 0 0;}
.what .container--wide>.flex{justify-content: space-between;}
.what span{display: block;}
.pl50{padding: 0 0 0 50px;}
.what .left .flex{align-items: center; font-size: 18px; font-weight: 700; color: #E60012;}
.what .left b{font-size: 40px; font-weight: 700; line-height: 1.35; text-transform: uppercase; margin: 16px 0 24px; display: block; font-family: var(--ff-primary);}
.what .left span{font-size: 18px; letter-spacing: -0.03em; color: #737373;}
.link-btn{padding: 0 0 11px; display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 500; letter-spacing: -0.04em; color: #737373; border-bottom: 2px solid #D2D2D2; width: 288px; margin: 91px 0 0;}
.what .right{flex: 1; padding: 43px 0 0; max-width: 924px;}
.what ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.what .right b{font-size: 24px; line-height: 1.25; margin: 27px 0 16px; display: block;}
.what .right span{font-size: 15px; letter-spacing: -0.03em; color: #737373;}

@media screen and (hover: hover) {
  .what .left button:hover{opacity: .8;}
}

/* business */
.business{padding: 80px 0 53px;}
.business .swiper{max-width: 874px; margin: 0 auto 0 0;}
.business .right{padding: 0 55px 0 30px;}
.business .right .flex{align-items: center;}
.business .right .flex img{margin: 0 30px 0 -44px; width: 16px; height: 15px;}
.business .right .flex p{color: #E60012; font-size: 18px; font-weight: 700;}
.business .right b{font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.35; margin: 16px 0 26px; display: block; text-transform: uppercase;}
.business .right span{display: block; font-size: 18px; letter-spacing: -0.07em; line-height: 1.66; color: #737373;}
.business .right ul{margin: 54px 0 0; display: flex; flex-direction: column; gap: 32px;}
.business .right ul li{font-size: 17px; color: #CBCBCD; cursor: pointer; font-weight: 400; position: relative; font-family: var(--ff-third); text-transform: uppercase;}
.business .right ul li.active{font-size: 24px; color: #E60012; font-weight: 700;}
.business .right ul li.active::before{content: ''; position: absolute; left: -300px; top: 50%; transform: translateY(-50%); width: 220px; height: 1px; background: #E60012; z-index: 1;}

/* product */
.product{padding: 107px 0 161px;}
.product .title{display: flex; flex-direction: column; padding: 10px 0 0;}
.product .title:first-child{margin: 0 42px 0 0;}
.product .title p{writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; margin: 19px 0 0; font-size: 20px; font-weight: 700; color: #E60012;}
.product .big.title{padding: 0;}
.product .big.title p{font-size: 152px; line-height: 1; margin: 0; color: #CBCBCD;}

.product .swiper{width: 100%;}
.product .swiper-wrapper{background: #F6F7F9;}
.product .swiper-slide{padding: 0 0 0 329px;}
.product .swiper-slide .box{background: #F6F7F9; height: 100%; display: flex;}
.product .swiper-slide .box .product-img{margin-left: -283px; height: fit-content; width: 770px; height: 689;}
.product .swiper-slide .box .product-img.pl105{padding-left: 105px;}
.product .swiper-slide .info{padding: 100px 0 0 0;}
.product .swiper-slide .info ul{display: flex; gap: 12px;}
.product .swiper-slide .info ul li{font-size: 14px; font-weight: 600; background: #CCC; border-radius: 50px; mix-blend-mode: multiply; width: 124px; height: 36px; align-items: center; justify-content: center; display: flex; color: #fff; font-family: var(--ff-third);}
.product .swiper-slide .info ul li.active{background: #E60012;}
.product .swiper-slide .info h1{font-size: 55px; font-weight: 800; line-height: 1; margin: 61px 0 0;}
.product .swiper-slide .info h1 span{font-size: 34px; display: block;}
.product .swiper-slide .info h3{font-size: 26px; font-weight: 700; color: #E60012; margin: 31px 0 20px;}
.product .swiper-slide .info p{letter-spacing: -0.05px; line-height: 1.75; color: #737373;}

.product .controller{display: flex; gap: 20px; position: absolute; right: 342px; bottom: 179px;}
.product .swiper-button-next:after, .product .swiper-button-prev:after{display: none;}
.product .controller div{width: 84px; height: 84px; top: 0; opacity: 0.4;}
.product .controller div:hover{opacity: 1;}
.product .controller .swiper-button-next{transform: rotate(180deg); position: initial;}
.product .controller .swiper-button-prev{position: initial;}

.product .list{position: absolute; bottom: 0; left: 329px; background: #fff; z-index: 1; padding: 14px 21px 0 0;}
.product .list ul{display: flex; align-items: center; gap: 21px;}
.product .list li{background-color: #F6F7F9; width: 111px; height: 111px; cursor: pointer; position: relative;}
.product .list li img{z-index: 2; position: relative;}
.product .list li.active{background-color: #E60012;}
/* .product .list li:last-child{pointer-events: none; cursor: initial;} */
.product .box img{mix-blend-mode: multiply;}

.product .list li .p6-shadow{position: absolute; right: 4px; top: 0; mix-blend-mode: multiply; z-index: 1; height: calc(100% - 8px);}


/* why */
.why{position: relative; padding: 125px 0 130px;}
.bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.why .container--wide>div>div.flex{font-size: 20px; font-weight: 700; align-items: center; color: var(--primary);}
.why b{font-size: 40px; letter-spacing: -0.02em; line-height: 1.35; color: #fff; text-transform: uppercase; margin: 28px 0 0; display: block;}
.red-btn{color: #fff; letter-spacing: 0.04em; background: var(--primary); width: 172px; height: 47px; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-weight: 700; margin: 42px 0 20px;}
.why .grid{display: grid; grid-template-columns: repeat(4, 1fr); width: fit-content; margin: 0 0 0 auto; gap: 20px;}
.why .grid li{background: #fff; width: 296px; padding: 36px 17px 25px 36px; display: flex; flex-direction: column;}
.why .number{font-size: 64px; font-weight: 700; letter-spacing: -.04em; color: var(--primary); line-height: 1;}
.why .name{font-size: 26px; font-weight: 700; line-height: 1.15; margin: 26px 0 16px;}
.why span{font-size: 15px; line-height: 1.73; letter-spacing: -0.03em; color: #737373;}
.why .grid li img{width: fit-content; margin: auto 0 0 auto;}
@media screen and (hover: hover) {
  .red-btn:hover{opacity: 0.9;}
}

/* who */
.who{padding: 121px 0 90px; background: #F6F7F9; position: relative; height: 1080px;}
.who>div{height: 100%;}
.who>div>div{height: 100%; display: flex; flex-direction: column; align-items: center;}
.who .container--wide>div>div.flex{font-size: 20px; font-weight: 700; align-items: center; color: var(--primary); justify-content: center; line-height: 1;}
.who b{font-size: 42px; font-weight: 700; letter-spacing: -0.02em; display: block; text-align: center; line-height: 1; margin: 20px 0 auto; text-transform: uppercase;}
.who p{font-size: 62px; font-weight: 800; text-align: center; line-height: 1.12; text-transform: uppercase; font-family: var(--ff-primary);}
.who p span{font-size: 24px; display: block; font-weight: 400; line-height: 1.8;}
.who div>span{font-size: 18px; letter-spacing: -0.05em; line-height: 1.66; text-align: center; color: #737373; margin: 26px 0 45px;}
.who .red-btn{margin: 0;}

.who .card.mo{display: none;}
.who .card img{position: absolute;}
.who .card img:nth-child(1){left: calc(50% - 623px); transform: translateX(-50%); bottom: 0px;}
.who .card img:nth-child(2){left: calc(50% - 540px); transform: translateX(-50%); bottom: 186px;}
.who .card img:nth-child(3){left: calc(50% - 367px); transform: translateX(-50%); bottom: 339px;}
.who .card img:nth-child(4){left: calc(50% - 124px); transform: translateX(-50%); bottom: 438px;}
.who .card img:nth-child(5){right: calc(50% - 124px); transform: translateX(+50%); bottom: 438px;}
.who .card img:nth-child(6){right: calc(50% - 367px); transform: translateX(+50%); bottom: 339px;}
.who .card img:nth-child(7){right: calc(50% - 540px); transform: translateX(+50%); bottom: 186px;}
.who .card img:nth-child(8){right: calc(50% - 623px); transform: translateX(+50%); bottom: 0px;}

/* pr */
.pr{padding: 129px 0 127px;}
.pr .container--wide>div>div.flex{font-size: 20px; font-weight: 700; align-items: center; color: var(--primary); line-height: 1;}
.pr b{font-size: 42px; font-weight: 700; letter-spacing: -0.02em; display: block; line-height: 1.375; margin: 26px 0 0; padding: 0 0 0 50px; text-transform: uppercase;}
.pr .link-btn{margin: -18px 0 52px auto;}
.pr ul{display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0 0 0 50px;}
.pr ul li{padding: 46px 46px 36px; border: 1px solid #D2D2D2; height: 457px;}
.pr ul li a{display: flex; flex-direction: column; height: 100%;}
.pr .category{font-size: 18px; font-weight: 700; color: var(--primary); display: block;}
.pr ul li strong{font-size: 22px; font-weight: 700; color: #1B1B1B; line-height: 1.36; margin: 26px 0 28px; display: block;}
.pr ul li p{letter-spacing: -.03em; color: #737373;}
.pr ul li div{display: flex; align-items: center; gap: 6px; font-size: 15px; color: #737373; letter-spacing: -0.03em; margin: auto 0 0;}
.pr .bottom{padding-left: 50px; width: 100%; gap: 35px; margin: 56px 0 0;}
.pr .bottom a{color: #fff; flex: 1; align-items: center; justify-content: space-between; padding: 44px 50px;}
.pr .bottom a:first-child{background: var(--primary);}
.pr .bottom a:last-child{background: #2E3091;}
.pr .bottom a strong{display: block; font-size: 22px;}
.pr .bottom a span{display: block; font-size: 16px; letter-spacing: -0.03em; margin: 16px 0 0; font-weight: 300;}

@media screen and (hover: hover) {
  .pr .bottom a:hover{opacity: 0.9;}
}

@media screen and (max-width: 1550px) {
  .pl50{padding: 0;}

  /* main */
  .slide-controls .slide-paging{margin: auto;}

  /* what */
  .what .container--wide>.flex{flex-direction: column;}
  .what .left .flex{justify-content: center;}
  .what .left b{text-align: center; }
  .what .left span{text-align: center;}
  .link-btn{margin: 91px auto 0;}
  .what .right{margin: auto;}
  .what .right span br{display: none;}

  /* business */
  .business .swiper{position: absolute; max-width: 380px; top: 320px; left: calc(50% - 160px); transform: translateX(-50%);}
  .business .right{width: 100%; padding: 0;}
  .business .right ul li{text-align: right;}
  .business .right .flex{justify-content: center;}
  .business .right b{text-align: center;}
  .business .right span{text-align: center;}
  .business .right ul{width: 298px; margin: 66px auto 0; position: relative; right: -200px;}
  .business .right ul li.active::before{left: -100px; width: 150px;}
  
  /* product */
  .product .flex{flex-direction: column;}
  .product .title{flex-direction: initial; align-items: center; justify-content: center; gap: 19px;}
  .product .title img{width: fit-content; transform: rotate(90deg);}
  .product .title p{writing-mode: initial; transform: initial; margin: 0;}
  .product .big.title p{font-size: 40px; margin: 16px 0 26px;}
  .product .swiper-slide{padding: 0;}
  .product .swiper-slide .box{justify-content: center; flex-direction: column; padding-block: 20px 125px;}
  .product .swiper-slide .box .product-img{margin: 0 auto; width: 380px;}
  /* .product .swiper-slide .box .product-img.pl105{padding-left: 0;} */
  .product .swiper-slide .info{width: fit-content; margin: auto; padding: 60px 0; text-align: center;}
  .product .swiper-slide .info h1{margin: 20px 0 0;}
  .product .list{padding: 14px 15px 0; left: 50%; transform: translateX(-50%); width: 100%;}
  .product .list ul{gap: 6px; justify-content: center;}
  .product .list li{display: flex; align-items: center; justify-content: center;}
  .product .controller{width: 708px; justify-content: space-between; right: 50%; transform: translate(50%, -50%); bottom: 50%; z-index: 1;}
  .product .container--wide{width: 100%;}
  .product .controller div{width: 52px; height: 52px;}
  /* why */
  .why .pl50{padding: 0;}
  .why .grid li{width: initial;}
  .why .container--wide>div>div.flex{justify-content: center;}
  .why b{text-align: center;}
  .red-btn{margin: 42px auto 20px;}
  .why .grid{grid-template-columns: repeat(2, 1fr); margin: auto;}

  /* who */
  .who{height: initial;}
  .who b{max-width: 550px; line-height: 1.35;}
  .who .card.pc{display: none;}
  .who .card.mo{display: block; margin-block: 30px;}
  .who .card img:nth-child(1){position: initial; transform: initial;}

  /* pr */
  .pr .container--wide>div>div.flex{justify-content: center;}
  .pr b{align-items: center; padding: 0; text-align: center; max-width: 600px; margin: 26px auto 0;}
  .pr b br{display: none;}
  .pr .link-btn{margin: 42px auto 20px;}
  .pr ul{grid-template-columns: repeat(2, 1fr); margin: 0; gap: 20px;}
  .pr ul li strong br{display: none;}
  .pr ul li p br{display: none;}
  .pr .container--wide>div>div.flex{padding: 0;}
  .pr .bottom{margin: 20px 0 0; gap: 20px;}
  .pr .bottom a{padding: 25px;}
  .pr .bottom a span{line-height: 1.3; max-width: 230px;}
}

@media screen and (max-width: 767px) {
  .main-visual-slide .content{padding-block: 0; height: 280px;}
  .mr30{margin: 0 15px 0 0;}

  /* what */
  .what{padding: 100px 0 0;}
  .what ul{grid-template-columns: 1fr;}
  .what ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 288px;}
  .what .left .flex{font-size: 16px;}
  .what .left b{font-size: 26px;}
  .what .left b br{display: none;}
  .what .left span br{display: none;}
  .what .left span{font-size: 16px;}
  .what .right span{font-size: 14px;}
  .link-btn{margin: 40px auto 0;}

  /* business */
  .business{padding: 100px 0 0;}
  .business .container--wide>.flex{flex-direction: column-reverse;}
  .business .right .flex img{margin: 0 15px 0 0;}
  .business .right .flex p{font-size: 16px;}
  .business .right b{font-size: 26px;}
  .business .right b br{display: none;}
  .business .right span{font-size: 16px;}
  .business .right span br{display: none;}
  .business .swiper{position: initial; transform: initial; max-width: 100%;}
  .business .right ul{margin: 20px 0; width: 100%; gap: 16px; right: 0; display: grid; grid-template-columns: repeat(1, 1fr);}
  .business .right ul li{font-size: 14px; text-align: center;}
  .business .right ul li::before{display: none;}
  .business .right ul li.active{font-size: 14px;}
  .product .swiper-slide .info ul{justify-content: center;}
  /* product */
  .product{padding: 100px 0 100px;}
  .product .title p{font-size: 16px;}
  .product .title:first-child{margin: 0 15px 0 0;}
  .product .big.title p{font-size: 26px;}
  .product .swiper-slide .info h1{margin: 30px 0 0;}
  .product .swiper-slide .info ul li{font-size: 12px; width: 100px;}
  .product .swiper-slide .box{padding-block: 20px 100px; min-height: 934px;}
  .product .list{position: initial; transform: initial;}
  .product .list ul{display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; gap: 10px;}
  .product .list li{width: initial; height: 162px;}
  .product .list li img{max-width: 160px;}
  .product .controller{width: initial; bottom: calc(50% - 150px);}
  .product .swiper-slide .info h1{font-size: 42px;}
  .product .swiper-slide .info h3{font-size: 24px;}
  .product .swiper-slide .info p{width: 90%; margin:  0 auto;}
  .product .swiper-slide .box .product-img.pl105{padding-left: 0;}
  .product .swiper-slide .box .product-img{width: 320px;}
  .product .list li .p6-shadow{right: calc(50% - 55px); top: 19px; height: 110px;}

  /* why */
  .why{padding: 100px 0;}
  .why .container--wide>div>div.flex{font-size: 16px;}
  .why .grid{grid-template-columns: 1fr; width: 100%; margin: 0;}
  .why b{font-size: 26px;}
  .why b br{display: none;}
  .why .number{font-size: 54px;}
  .why .name{font-size: 22px;}
  .why span{font-size: 14px;}
  
  /* who */
  .who{padding: 100px 0;}
  .who .container--wide>div>div.flex{font-size: 16px;}
  .who b{font-size: 26px;}
  .who b br{display: none;}
  .who p{font-size: 40px;}
  .who p span{font-size: 18px;}
  .who div>span{font-size: 14px;}
  .who div>span br{display: none;}

  /* pr */
  .pr{padding: 100px 0;}
  .pr .container--wide>div>div.flex{font-size: 16px;}
  .pr b{font-size: 26px;}
  .pr b br{display: none;}
  .pr ul{grid-template-columns: 1fr;}
  .pr ul li{padding: 32px 22px; height: 360px;}
  .pr .container--wide>div>div.bottom{flex-direction: column;}

  .pr .category{font-size: 16px;}
  .pr ul li strong{font-size: 20px;}
  .pr ul li p{font-size: 14px;}
  .pr .bottom a{padding: 20px; width: 100%;}
  .pr .bottom a strong{font-size: 20px;}
  .pr .bottom a span{font-size: 14px;}
}










/* Base */
@media (hover: hover) {}
@media screen and (max-width:1399px) {}
@media screen and (max-width: 767px) {}