@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {color: #222;}
.sec-header {position: relative; padding: 20rem 0; min-height: 80vh;}
.sec-header::after {display: block; content: ''; width: 100%; height: 6px; background: linear-gradient(to left, var(--color-sub) 0%, var(--color-sub) 46px, var(--color-main) 47px, var(--color-main) 61px, var(--color-sub) 62px, var(--color-sub) 100%) no-repeat right bottom/100% 6px; position: absolute; top: 16rem; right: calc(100% - 68px);}
.sec-tit {margin-bottom: 15px; font-weight: 800; font-size: 7.2rem; letter-spacing: -0.025em; line-height: 1.1; text-transform: uppercase;}
.sec-desc {font-size: 2.4rem;}
main {overflow: hidden;}


.section.product {background: url(../images/main/section_bg03.png) no-repeat center top / cover;}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
  .sec-desc {font-size: 2rem;}
}
@media (max-width: 1024px){
  .sec-tit {font-size: 6.5rem;}
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
  .sec-tit {font-size: 5.5rem;}
}
/* MAIN-COMMON */
/* ===================================================== */
 

/* ===================================================== */
/* MAIN-NAV */ 
.main-nav { position: fixed; right: var(--outer-padding); top: 50%; transform: translateY(-50%); z-index: 500; } 
.main-nav li + li { margin-top: 10px; } 
.main-nav a { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s; } 
.main-nav a::before { width: 12px; height: 12px; content: ''; border-radius: 50%; transition: .3s; border: 1px solid var(--color-white-a4); } 
.main-nav .active a { background-color: var(--color-white-a2); } 
.main-nav .active a::before { background-color: var(--color-main); border-color: transparent; } 
.is-open .main-nav {right: calc(var(--outer-padding) + var(--scroll-width));}

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover::before { background-color: var(--color-main); border-color: transparent; } 
}
@media (max-width: 1024px) {.main-nav { display: none; }}
/* MAIN-NAV */
/* ===================================================== */


/* ===================================================== */
/* MAIN-VISUAL */
.visual {position: relative; overflow: hidden; color: #fff; z-index: 1;}
.visual::before {display: block; content: ''; width: 490px; height: 384px; background: url(../images/main/bg-deco.png) no-repeat center / contain; position: absolute; bottom: 20px; left: -154px;}
.visual-slick {-webkit-mask-image: url(../images/main/visual-mask.svg); mask: url(../images/main/visual-mask.svg) no-repeat center bottom / cover;}
.visual-slide {height: 100vh; height: 100svh; min-height: 104rem; }
.visual-slide-img { display: block; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.1); transition: 4s linear;} 

.visual-01 {background-image: url(../images/main/main_visual01.jpg);}
.visual-02 {background-image: url(../images/main/main_visual02.jpg);}
.visual-03 {background-image: url(../images/main/main_visual03.jpg);}
.visual-on .visual-slide-img { transform: scale(1.01); } 

.visual-txt-slide {padding-top: 10rem; position: relative;}
.visual-txt-slide .tit-wave {position: absolute; top: 0; right: 0;}
.visual-txt-slide .tit-wave span {display: inline-block; width: 5px; height: 88px; background: url(../images/main/visual-txt01.png) no-repeat center / contain; margin-left: 10px; animation: tit-wave 3s linear infinite;}
.visual-txt-slide .tit-wave span.nth-2 {background-image: url(../images/main/visual-txt02.png); animation-delay: -3s; animation-duration: 7s;}
.visual-txt-slide .tit-wave span.nth-3 {background-image: url(../images/main/visual-txt03.png); animation-delay: -5s;}
.visual-txt-slide .tit-wave span.nth-4 {background-image: url(../images/main/visual-txt04.png); animation-delay: -7s; animation-duration: 10s;}
.visual-txt-slide .tit-wave span.nth-5 {background-image: url(../images/main/visual-txt05.png); animation-delay: -5s;}
.visual-txt-slide .tit-wave span.nth-6 {background-image: url(../images/main/visual-txt06.png); animation-delay: -3s; animation-duration: 5s;}
.visual-txt-slide .tit-wave span.nth-7 {background-image: url(../images/main/visual-txt07.png); animation-delay: -7s;}

@keyframes tit-wave { 
  0% { transform: translateY(-10%);} 
  50% { transform: translateY(10%);} 
  100% { transform: translateY(-10%);}
}

.visual-txt { position: absolute; inset: 50% 0 auto; z-index: 10; font-weight: 700; font-size: 10rem; transform: translateY(-50%); text-align: right; } 
.visual-tit { letter-spacing: -0.025em;}
.visual-tit span {display: inline-block; font-weight:300;}
.visual-desc {font-size: 40px; font-weight: 400;}
.visual-on .visual-tit {animation: fade-in 1.2s ease-out .6s both;}
.visual-on .visual-desc .char {
  --vdd: 1.6s; /* visual-desc 애니메이션 시간 */
  animation: fade-in .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both; } 

.visual-txt-slick {display: inline-block; margin-right: 65px;}
.visual-nav {display: flex; justify-content: center; align-items: center; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 30px; position: relative;}
.visual-dot {margin: 15px 0; padding: 15px 0;} 
.visual-dot .slick-dots { display: flex; column-gap: 20px; } 
.visual-dot button { display: flex; width: 10px; height: 10px; border-radius: 50%; background: #fff; font-size: 0; position: relative;} 
.visual-dot button::before {display: block; width: 0; height: 0; background: url(../images/common/ico_drop.svg) no-repeat; content: ''; transition: .3s; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease-in-out;} 
.visual-dot li:not(.slick-active) button:hover::before {width: 20px; height: 30px; opacity: 1;} 
.visual-dot li.slick-active button::before {width: 20px; height: 30px; opacity: 1;} 
.visual-nav .nav {width: 20px; height: 22px; background: url(../images/common/ico_arrow.png) no-repeat left center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); cursor: pointer; transition: all 0.3s ease-in-out;}
.visual-nav .next {left: auto; right: 0; transform: translateY(-50%) rotate(180deg);}
.visual-nav .nav:hover {transform: translate(-10px, -50%);}
.visual-nav .next:hover {transform: translate(10px, -50%) rotate(180deg);}

/* 스크롤 다운 */
.visual-scroll { position: absolute; left: var(--outer-padding); bottom: 125px; transition: .3s; opacity: 0; animation: scroll-line 2s linear infinite;} 
.visual-scroll-btn {font-size: 0; width: 30px; height: 42px; background: url(../images/main/ico_visual-scroll.png) no-repeat center / contain;} 
.visual-scroll-arrow {display: block; margin: 10px auto 0; width: 14px; height: 7px; background: url(../images/main/ico_scroll-arrow.png) no-repeat center / contain;}
.visual-scroll-arrow+.visual-scroll-arrow {margin-top: 0;}
@keyframes scroll-line { 
  0% { transform: translateY(-30%); opacity: 0; } 
  20% {opacity: 1; } 
  100% { transform: translateY(50%); opacity: 0; } 
}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1600px) {
  .visual-slide {min-height: 60rem;}
  .visual-txt {font-size: 7rem;}
  .visual-desc {line-height: 1.2; font-size: 30px;}  
}
@media (max-width: 1440px) {
  .visual-dot {margin: 10px 0;}
}
@media (max-width: 1280px) {
  .visual-slide {max-height: 80rem;}
  .visual-txt-slick {margin-right: 20px;}
}
@media (max-width: 1024px) {
  .visual-txt-slide {padding-top: 8rem;}
  .visual-txt-slide .tit-wave span {width: 4px; height: 70px; margin-left: 8px;}
}
@media (max-width: 768px) {
  .visual-txt {font-size: 6rem;}
  .visual-tit span::before {width: 80px; background-size: contain;}
  .visual-dot {margin: 0;}

  .visual-scroll {bottom: 0;}
  
  .visual-txt-slide {padding-top: 7rem;}
  .visual-txt-slide .tit-wave span {width: 3px; height: 60px; margin-left: 6px;}
}
@media (max-width: 640px) {
  .visual-02 {background-position-x: 35%;}
}
@media (max-width: 480px) {
  .visual-02 {background-position-x: 10%;}
  .visual-tit {font-size: 5rem;}
  .visual-desc {font-size: 20px;}  
  .visual-scroll-btn {width: 20px;}

  .visual-txt-slide .tit-wave span {width: 2px; height: 50px; margin-left: 4px;}
}
/* MAIN-VISUAL */
/* ===================================================== */


/* ===================================================== */
/* */
.section.video { position: relative;}
.section.video::before {display: block; content: ''; width: 696px; height: 546px; background: url(../images/main/bg-deco02.png) no-repeat center; position: absolute; top: -160px; right: -264px;}
.section.video .inner {display: flex;}
.section.video .sec-header {width: 50%;}
.section.video .sec-header .sec-desc {font-weight: 800; color: #0093d6; font-size: 36px; line-height: 1; margin-top: 6rem; padding: 20px 50px; border-radius: 120px; background: #ceecf9; transform: translateX(-50px); min-height: 112px;}
.section.video .sec-header .txt-desc {margin-top: 7rem; font-size: 24px; font-weight: 400; color: #222; letter-spacing: -0.025em;}
.section.video .sec-header .txt-desc+.txt-desc {margin-top: 4rem;}
.section.video .more {margin-top: 5rem; position: relative;}
.section.video .more a {display: block; width: 162px; height: 68px; background: url(../images/main/ico_arrow01.png) no-repeat center; transition: 0.3s ease-in-out;}
.section.video .more span {position: absolute; top: 25%; left: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.025em; color: #000; text-transform: uppercase;}
.section.video .more:hover a {transform: translateX(5%);}

.section.video .video-wrap {width: 50%; position: relative;}
.section.video .video-box {position: absolute; top: 90px; left: 50px; width: 175%; mask-image: url(../images/main/video-mask.svg); mask-repeat: no-repeat; mask-size: contain; cursor: pointer;}
.section.video .video-box::before {display: block; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); position: absolute; top: 0; left: 0; z-index: 1;}
.section.video .video-wrap video {width: 100%; transform: translateX(-20%);}
.section.video .video-wrap.on .video-box::before {display: none;}
.section.video .video-play-btn {display: block; content: ''; width: 120px; height: 120px; background: url(../images/main/ico_play.png) no-repeat center; position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); cursor: pointer; z-index: 1;}
.section.video .video-wrap.on .video-play-btn {display: none;}
.section.video .video-wrap.on:hover .video-play-btn {display: block; background-image: url(../images/main/ico_pause.png);}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1600px) {
  .section.video .sec-header .sec-desc {transform: translateX(0); margin-right: 30px;}
  .section.video .video-box {width: 150%; left: 0; top: 50%; transform: translateY(-50%);}
}
@media (max-width: 1440px) {
  .section.video .sec-header {padding-right: 40px;}
  .section.video .sec-header .sec-desc {margin-top: 2rem;}
  .section.video .sec-header .txt-desc {font-size: 20px; margin-top: 5rem;}
}
@media (max-width: 1280px) {
  .section.video .sec-header {padding-bottom: 5rem;}
  .section.video .sec-header .sec-desc {font-size: 30px; padding: 20px 30px; margin-top: 3rem;}
  .section.video .sec-header .txt-desc,
  .section.video .sec-header .txt-desc+.txt-desc {margin-top: 3rem;}
}
@media (max-width: 1024px) {
  .section.video .inner {flex-wrap: wrap; padding-bottom: 80px;}
  .section.video .sec-header {width: 100%; padding-right: 0; padding-bottom: 10px; min-height: 1px; order: 2; padding-top: 30px;}
  .section.video .sec-header::after {top: 0;}
  .section.video .sec-header .sec-desc {min-height: 1px;}
  .section.video .sec-header .sec-desc br {display: none;}
  .section.video .video-wrap {margin: 20rem auto 20px; width: 80%;}
  .section.video .video-box {position: static; transform: translateY(0);}
}
@media (max-width: 768px) {
  .section.video .sec-header .sec-desc {min-height: 100px;}
  .section.video .video-play-btn {background-size: 80%;}
}
@media (max-width: 640px) {
  .section.video .sec-header .sec-desc {font-size: 24px; padding: 10px 30px; min-height: 70px;}
  .section.video .sec-header .txt-desc {font-size: 18px;}
  .section.video .video-wrap {width: 100%;}
}
@media (max-width: 480px) {
  .section.video .sec-header .sec-desc {min-height: 52px; font-size: 16px;}
  .section.video .video-play-btn {background-size: 65%;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.section.product {padding-bottom: 15rem;}
.section.product .sec-header {text-align: right; min-height: 1px; padding-bottom: 10rem;}
.section.product .sec-header::after {background: linear-gradient(to right, var(--color-sub) 0%, var(--color-sub) 46px, var(--color-main) 47px, var(--color-main) 61px, var(--color-sub) 62px, var(--color-sub) 100%) no-repeat right bottom/100% 6px; right: auto; left: calc(100% - 68px);}

.section.product .slick-box {max-height: 750px;}
/* .section.product .slick-list {transform: translate(-60px, -350px); padding: 350px 0 130px 210px; width: calc(100% + 480px);} */
.section.product .slick-item {margin: 0 20px;}

.section.product .slick-inner {position: relative;}
/* .section.product .slick-inner a {display: none; width: 130%; height: 130%; min-width: 612px; min-height: 680px; padding: 60px 100px; background: url(../images/main/product_active.png) no-repeat center; position: absolute; bottom: -12rem; right: 0; z-index: 1;} */


.section.product .nth-2 .slick-inner .img {background-image: url(../images/main/product_img02.png);}
.section.product .nth-3 .slick-inner .img {background-image: url(../images/main/product_img03.png);}
.section.product .nth-4 .slick-inner .img {background-image: url(../images/main/product_img04.png);}
.section.product .nth-5 .slick-inner .img {background-image: url(../images/main/product_img05.png);}
.section.product .nth-6 .slick-inner .img {background-image: url(../images/main/product_img06.png);}
.section.product .nth-7 .slick-inner .img {background-image: url(../images/main/product_img07.png);}

.section.product .slick-current a {display: block;}

.section.product .slick-nav {position: absolute; bottom: 15rem; right: -60px; z-index: 2; display: flex;}
.section.product .slick-nav div {width: 60px; height: 60px; border-radius: 50%; margin-right: 10px;}
.section.product .slick-nav .nav {border: 1px solid #222; background: url(../images/common/ico_arrow03.png) no-repeat center; cursor: pointer; transition: all 0.3s ease-in-out;}
.section.product .slick-nav .next {transform: rotate(180deg);}
.section.product .slick-nav .nav:hover {background-color: var(--color-main); border-color: var(--color-main); background-image: url(../images/common/ico_arrow.png);}
.section.product .slick-nav .more a {display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--color-main) url(../images/common/ico_more.png) no-repeat center; transition: all 0.3s ease-in-out;}
.section.product .slick-nav .more:hover a {background-color: var(--color-sub); transform: rotate(180deg);}

.section.product .list-wrap {display: flex; transform: translateX(-60px);}
.section.product .current {width: 40%; transform: translateY(-160px); background: url(../images/main/product_active.png) no-repeat center / contain; position: relative; z-index: 1;}
.section.product .current .slick-list {padding-top: 280px; transform: translateY(-250px);}
.section.product .current a {display: block; width: 100%; padding: 60px 100px;}
.section.product .current .text {text-align: center; color: #fff; letter-spacing: -0.025em; position: relative; margin-top: 65%;}
.section.product .current .tag {display: inline-block; margin-top: 5px; font-size: 18px; font-weight: 800; background: var(--color-sub); border-radius: 40px; padding: 10px 25px;}
.section.product .current .tit {display: block; font-size: 36px; font-weight: 900; margin-top: 20px; vertical-align: baseline;}
.section.product .current .tit em {display: inline-block; font-size: 0; width: 146px; height: 34px; vertical-align: baseline;}
.section.product .current .desc {display: block; margin-top: 20px; font-size: 18px; font-weight: 400;}
.section.product .current .more {display: inline-block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--color-sub); background: url(../images/common/ico_more02.png) no-repeat center; margin-top: 30px; transition: all 0.3s ease-in-out;}
.section.product .current .img {display: block; width: 100%; height: 0; background: url(../images/main/product_img01.png) no-repeat center bottom / contain; position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 0); transition: all 0.5s ease-in-out;}
.section.product .current a:hover .more {background-color: var(--color-sub); transform: rotate(180deg);} 
.section.product .current .slick-current .img {height: 400px;}

.section.product .active {width: 150%; transform: translateX(-20%);}
.section.product .active .slick-current img {opacity: 0; transition: all 0.3s ease-in-out;}
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1600px) {
  .section.product .list-wrap {transform: translateX(0);}
  .section.product .slick-nav {right: 0;}
}
@media (max-width: 1440px) {
  .section.product .current a {padding: 60px;}
  .section.product .current .desc {margin-top: 0;}
}
@media (max-width: 1280px) {
  .section.product .current {transform: translateY(-20%);}
  .section.product .slick-box {max-height: 550px;}
  .section.product .current a {padding: 60px 30px;}
  .section.product .current .text {margin-top: 35%;}
  .section.product .current .tit {font-size: 30px;}
  .section.product .current .tit em {width: 140px; height: 30px;}
}
@media (max-width: 1024px) {
  .section.product .slick-box {max-height: 450px;}
  .section.product .current {width: 50%; transform: translateY(-30%);}
  .section.product .current a {padding: 30px;}
  .section.product .current .text {margin-top: 20%;}
  .section.product .current .slick-current .img {height: 350px;}
}
@media (max-width: 768px) {
  .section.product .sec-header {padding-bottom: 20rem;}
  .section.product .active {width: 100%; transform: translateX(-40%);}
  .section.product .current {width: 60%; transform: translateY(-20%);}
  .section.product .current .slick-current .img {height: 250px;}

}
@media (max-width: 640px) {
  .section.product .current {width: 80%; transform: translateY(0); margin: 50px auto 0;}
  .section.product .current .tag {font-size: 16px; padding: 5px 15px;}
  .section.product .current .tit {font-size: 28px; margin-top: 10px;}
  .section.product .active {display: none;}
  .section.product .slick-nav {bottom: auto; top: -18rem;}
}
@media (max-width: 480px) {
  .section.product .current {width: 100%;}
  .section.product .current a {padding: 30px 20px;}
  .section.product .current .text {margin-top: 40%;}
  .section.product .current .tag {font-size: 14px;}
  .section.product .current .tit {font-size: 24px;}
  .section.product .current .desc {font-size: 16px;}
  .section.product .current .more {width: 40px; height: 40px; margin-top: 10px;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.section.business {position: relative;}
.section.business::before {display: block; content: ''; width: 100%; height: 120%; background: url(../images/main/section_bg04.png) no-repeat center top / cover; position: absolute; top: -20%; left: 0;}
.section.business .sec-header {color: #fff; padding: 4rem 0 0; margin: 0; min-height: 1px; display: flex; flex-wrap: wrap; align-content: space-between;}
.section.business .sec-header::after {background: linear-gradient(to left, #fff 0%, #fff 46px, var(--color-main) 47px, var(--color-main) 61px, #fff 62px, #fff 100%) no-repeat right bottom/100% 6px; top: 0;}
.section.business .sec-header .sec-tit .more {display: inline-block; font-size: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--color-main) url(../images/common/ico_more.png) no-repeat center; transform: translateY(-100%); margin-left: 10px; transition: all 0.3s ease-in-out;}
.section.business .sec-header .sec-tit .more:hover {background-color: var(--color-sub); transform: translateY(-100%) rotate(180deg);} 

.section.business .txt-desc {display: flex; align-items: flex-end; padding-bottom: 10rem; transform: translateY(-60px);}
.business-tech {overflow: hidden; background: rgba(0, 0, 0, 0.25); border-radius: 20px; margin-right: 6rem; margin-top: 15rem; border: 2px solid #fff; text-align: center; transition: all 0.3s ease-in-out; position: relative;}
.business-tech::before {display: block; content: ''; width: 100%; height: 0; background: var(--color-main); position: absolute; bottom: 0; left: 0; transition: all 0.5s ease-in-out;}
.business-tech a {position: relative; padding: 5rem 5rem 2.5rem; z-index: 1;}
.business-tech .btn-tit {font-size: 4rem; font-weight: 800; color: #fff; padding-top: 80px; background: url(../images/main/ico_tech.png) no-repeat center top;}
.business-tech .btn-desc {margin-top: 20px; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.025em;}
.business-tech .more {margin-top: 10px; font-size: 0; display: block; width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; background: url(../images/main/ico_more.png) no-repeat center / 45%;}
.business-tech:hover::before {height: 100%;}

.business-list {min-height: 602px; display: flex; flex: 1;}
.business-list .item {border-radius: 20px; padding: 7rem 2.5rem 3.5rem; transition: padding .5s ease-in-out;}
.business-list .item+.item {margin-left: 20px;}
.business-list .item.nth-1 {background: url(../images/main/tech_bg01.png) no-repeat center / cover;}
.business-list .item.nth-2 {background: url(../images/main/tech_bg02.png) no-repeat center / cover;}
.business-list .item.nth-3 {background: url(../images/main/tech_bg03.png) no-repeat center / cover;}
.business-list .item.nth-4 {background: url(../images/main/tech_bg04.png) no-repeat center / cover;}

.business-list .business-inner {height: 100%; position: relative; overflow: hidden;}
.business-list .item .tit {font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.05em; line-height: 1.1; transition: 0.5s ease-in-out;}
.business-list .item .desc {display: none; min-width: 500px; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.025em; position: absolute; top: 120px; left: 0;}
.business-list .item .desc span {display: block; padding-left: 10px; position: relative;}
.business-list .item .desc span::after {display: block; content: ''; width: 5px; height: 1px; background: #fff; position: absolute; top: 12px; left: 0;}
.business-list .item .more {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.business-list .item .more a {display: block; font-size: 0; width: 28px; height: 42px; margin: 0 auto; background: url(../images/main/ico_more.png) no-repeat center; transition: transform 0.5s ease-in-out;}

.business-list .item.kwicks-expanded .tit {font-size: 48px; font-weight: 800; letter-spacing: 0;}
.business-list .item.kwicks-expanded .tit br:nth-of-type(2) {display: none;}
.business-list .item.kwicks-expanded .desc {display: block;}
.business-list .item.kwicks-expanded .more {left: 0; transform: translateX(0);}
.business-list .item.kwicks-expanded .more a {width: 162px; height: 68px; background: url(../images/main/ico_arrow02.png) no-repeat center;}
.business-list .item.kwicks-expanded .more span {position: absolute; top: 25%; left: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.025em; color: #fff; text-transform: uppercase;}
.business-list .item.kwicks-expanded .more:hover a {transform: translateX(5%);}


@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1440px) {
  .business-tech {margin-right: 3rem; padding: 5rem 2rem 2.5rem;}
  .business-tech .btn-tit {font-size: 3rem;}
  .business-list {width: 70%;}
  .business-list .item {padding: 7rem 1.5rem 3.5rem;}
  .business-list .item .tit {font-size: 24px;}
  .business-list .item.kwicks-expanded .tit {font-size: 40px;}
}
@media (max-width: 1280px) {
  .business-tech a {padding: 0;}
}
@media (max-width: 1024px) {
  .section.business .txt-desc {flex-wrap: wrap;}
  .business-tech {margin: 0 0 20px; padding: 10px 20px; display: flex; justify-content: center; align-items: center; position: absolute; top: -160px; right: 0;}
  .business-tech .btn-tit {padding-left: 50px; padding-top: 0; background-position: left center; line-height: 70px; background-size: auto 70%;}
  .business-tech .btn-desc {text-align: left; margin-left: 20px; margin-top: 0;}
  .business-tech .more {display: none;}
  .business-list {width: 100%; min-height: 450px;}
  .business-tech .btn-desc {font-size: 16px;}
}
@media (max-width: 768px) {
  .business-list .item {padding-top: 5rem;}
  .business-list .item .tit {font-size: 20px;}
  .business-list .item .desc {top: 80px; min-width: 310px;}
  .section.business .sec-header .sec-tit .more {width: 40px; height: 40px; transform: translateY(-90%);}
  .section.business .txt-desc {transform: translateY(0); padding-bottom: 15rem;}
  .business-list .item.kwicks-expanded .tit {font-size: 32px;}
}
@media (max-width: 640px) {
  .section.business::before {background-size: cover; background-position-x: 90%; top: -10%;}
  .section.business .txt-desc {min-height: 800px; display: block;}
  .business-tech {position: static; transform: translateY(0);}
  .business-tech a {width: 100%; display: flex; align-items: center;}
  .business-tech .btn-tit {padding-left: 70px;}
  .business-list {display: block; min-height: 1px;}
  .business-list .item {padding: 2.5rem; min-height: 60px; width: 100% !important;}
  .business-list .item+.item {margin: 20px 0 0;}
  .business-list .item .tit br {display: none;}
  .business-list .item .desc {position: static; min-width: 100%;}
  .business-list .item .more {width: 130px; height: 50px;}
  .business-list .item.kwicks-expanded .more {left: auto; right: 0;}
  .business-list .item.kwicks-expanded .more a {width: 100%; height: 100%; background-position: right center; background-size: auto 100%;}
  .business-list .item .desc {max-height: 0; overflow: hidden;}
  .business-list .item.kwicks-expanded .business-inner {padding-bottom: 80px;}
  .business-list .item.kwicks-expanded .desc {max-height: 100%; margin-top: 20px;}
}
@media (max-width: 480px) {
  .business-tech {width: 100%;}
  .business-tech a {flex-wrap: wrap;}
  .business-tech .btn-tit {background-size: auto 100%; line-height: 1.4; padding-bottom: 10px; padding-left: 0; width: 100%; background-position-x: 100%; text-align: left;}
  .business-tech .btn-desc {margin-left: 0; width: 100%;}
  .business-list .item .tit {font-size: 18px;}
  .business-list .item.kwicks-expanded .tit {font-size: 28px;}
  .business-list .item .desc {font-size: 16px;}
  .business-list .item .more {width: 100px; height: 30px;}
  .business-list .item.kwicks-expanded .more span {top: 0; font-size: 12px;}
}
/* */
/* ===================================================== */







/* 24.07.31 */
.section.product .current .tit {margin-top: 22px;}
.section.product .current .tit em {height: initial; width: 20rem;}
.section.product .current .desc {margin-top: 18px;}
@media (max-width: 1280px) {
  .section.product .current .tit {margin-top: 16px; font-size: 2rem;}
  .section.product .current .tit em {height: initial;width: 18rem;}
  .section.product .current .desc {margin-top: 12px;}
}