h2 { text-align: center; font-size: clamp(32px, calc( 48 / 1600 * 100vw ), 48px); font-weight: 700; line-height: 130%; margin-bottom: clamp(120px, calc( 150 / 1600 * 100vw ), 150px); } 
.inner { max-width: 1540px; margin: 0 auto; padding: 0 30px; } 
.se01 { width: 100%; aspect-ratio: 1920/1080; background: url(../img/main/main-bg.png)no-repeat center; background-size: cover; } 



.se-product { padding: clamp(80px, calc( 150 / 1600 * 100vw ), 150px) 0 clamp(100px, calc( 200 / 1600 * 100vw ), 200px); background: #F5F5F5; } 
.se-product + .se-product {margin-top: 50px;}
.se-product .img-list { position: relative; width: 70%; aspect-ratio: 1039/610; } 
.se-product .img-list li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.1s ease-in-out; } 
.se-product .img-list li.show { opacity: 1; } 
.group-se { position: relative; } 
.se-product .text-list { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; } 
.se-product .text-list button { position: relative; padding: clamp(8px, calc( 16 / 1600 * 100vw ), 16px) clamp(16px, calc( 30 / 1600 * 100vw ), 30px); background: #fff; border-radius: 15px; width: 100%; font-family: Paperlogy, sans-serif; font-size: clamp(18px, calc( 24 / 1600 * 100vw ), 24px); font-weight: 700; line-height: 150%; letter-spacing: -0.72px; text-align: left; } 
.se-car-additive .text-list li:nth-child(1) { --point-color:#e69f24 } 
.se-car-additive .text-list li:nth-child(2) { --point-color:#A33E7A } 
.se-car-additive .text-list li:nth-child(3) { --point-color:#6F3B96 } 
.se-car-additive .text-list li:nth-child(4) { --point-color:#397B3B } 
.se-car-additive .text-list li:nth-child(5) { --point-color:#DA1F26 } 
.se-car-additive .text-list li:nth-child(6) { --point-color:#DA1F26 } 
.se-car-additive .text-list li:nth-child(7) { --point-color:#2292C3 } 
.se-truck-additive .text-list li:nth-child(1) { --point-color:#E69E24 } 
.se-truck-additive .text-list li:nth-child(2) { --point-color:#A33E7A } 
.se-truck-additive .text-list li:nth-child(3) { --point-color:#6F3B96 } 
.se-truck-additive .text-list li:nth-child(4) { --point-color:#397B3B } 
.se-truck-additive .text-list li:nth-child(5) { --point-color:#2292C3 } 
.se-product .text-list button::before { content: ''; position: absolute; top: 50%; left: -20px; transform: translateY(-50%) rotate(180deg); width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 19px solid transparent; border-left: 25px solid var(--point-color); display: none; } 
.se-product .text-list .on button::before { display: block; } 
.se-product .img-box { display: flex; justify-content: center; margin-top: -12px; display: none; } 
.se-product .text-list li.on button { padding: clamp(8px, calc( 16 / 1600 * 100vw ), 16px) clamp(16px, calc( 30 / 1600 * 100vw ), 30px) 0; background: var(--point-color); color: #fff; } 
.se-product .text-list li.on .img-box { display: flex; } 
.se-product .text-list li.on .img-box .img { aspect-ratio: 1/1; height:  clamp(100px, calc( 170 / 1600 * 100vw ), 170px); } 
.se-product .text-list li.on .img-box .img img{width: 100%;height: 100%; object-fit: contain;}
.mo-img { display: none; } 

/* .se02,.se03 { display: none; } */





@media screen and (max-width:1400px){
 .se-product .text-list button::before { left: -10px; } 
 }
@media screen and (max-width:1024px){
 .se-product .img-list { width: 65%; } 
 }
@media screen and (max-width:768px){
 .se01 { margin-top: 0px; } 
 .se-product .text-list { position: relative; right: auto; transform: none; } 
 .se-product .text-list button::before,.se-product .text-list .on button::before { display: none; } 
 h2 { margin-bottom: 60px; } 
 .group-se { display: flex; flex-direction: column; gap: 40px; align-items: center; } 
 .se-product .img-list {order: 2; display: none;}
 .se-product .text-list {order: 1;}
 .se-product .text-list>li {}
 .se-product .text-list button { height: 100%; overflow: hidden; } 




 .mo-img { display: block; } 
 .se-product .text-list { width: 100%; } 
 .se-product .img-box { width: 100%; position: relative; margin-top: 20px; } 
 .se-product .text-list .mo-img { aspect-ratio: 1039/610; width: 80%; overflow: hidden; margin: 0 auto; } 
 .se-product .text-list .btn-product + .mo-img {display: none; margin-top: 40px;}
 .se-product .text-list li.on .btn-product + .mo-img {display: block;}
 .se-product .text-list .mo-img .img { width: 100% !important; height: 110%; object-fit: contain; } 
 .se-product .text-list li.on .img-box .img { height: 140px; } 
 .se-product .text-list li.on .img-box .img:not(:has(img)) { display: none; }
 .name { text-align: center; display: block; width: 100%; font-size: 24px; transform: translateY(0); } 
 li.on .name { transform: translateY(15px); } 
 }


@media screen and (max-width:600px){
    h2 {font-size: 28px;}
 .se-product .text-list li.on .img-box .img { height: 120px; } 
 .se-product .img-box > .img+.img { right: 20px; } 
 .name { font-size: 22px; } 
 li.on .name { transform: translateY(10px); } 
 }
 @media screen and (max-width:500px){
        h2 {
        margin-bottom: 40px;
    }
    .se-product .text-list li.on button{padding-top: 0;}
    .name { font-size: 20px; } 
 .se-product.se-truck-additive .text-list .mo-img { width: 90%; } 
 .se-product.se-truck-additive .text-list .mo-img .img { margin-left: -10px; } 
 .se-product .img-box > .img+.img { right: 0px; } 
 .se-product.se-truck-additive .img-box > .img+.img { right: 0px; } 
 .se-product.se-truck-additive .text-list li.on .img-box img { width: 110px; } 
     .se-product.se-truck-additive .img-box > img {bottom: 7px;}
     .se-product .text-list li.on .img-box .img{height: 100px;}
     
 }
  @media screen and (max-width:400px){
    .name { font-size: 16px; }
    .se-product.se-truck-additive .text-list li.on .img-box img,.se-product .text-list li.on .img-box .img {
        height: 90px;
    }
  }