.sub-top1 {background:url(/images/001/sub1-bg.jpg);background-size:cover;}
.product-top {position:relative;display: flex;align-items: center;margin-bottom:100px}
.product-top .point {position:absolute;display:flex;align-items:center;justify-content: center;}
.product-top .point.point1 {left: 43%;top: 47%;}
.product-top .point.po1 {top:330px;left:590px;}
.product-top .point.po2 {top:47%;left:64%;}
.product-top .point.po3 {top:50%;left:42%;}
.product-top .point.po4 {top:55%;left:72%;}
.product-top .point .p1 {position:absolute;z-index:4;width:15px;height:15px;background:#f56a12;border-radius:100%;}
.product-top .point .p2 {position:absolute;z-index:3;width:60px;height:60px;border-radius:100%;border:3px solid #88feff;box-shadow:0 0 10px #88feff}
.product-top .point .p3 {position:absolute;z-index:2;width:120px;height:120px;border-radius:100%;background:rgba(255,255,255,.6)}
.product-top .point .p4 {position:absolute;z-index:1;width:135px;height:135px;border-radius:100%;background:rgba(255,255,255,.3)}
.product-top .rep {display:flex;flex-direction:column;gap:12px;position:absolute;left:70px}
.product-top .rep li {width:268px;height:268px;border-radius:15px;overflow:hidden;background:#242424;}
.product-top img {
    filter: grayscale(100%);
    transform: scale(0.9);
    transition: filter 1s ease;
    display: block;
    margin: 0 auto;
    max-width:100%;
}



.products-wrap {display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap}
.product-section .products {margin-bottom:60px;}
.product-section .products ul {display: flex; justify-content: space-between;}
.products ul li {
    opacity: 0;
    transform: translateY(50px);
    position: relative;
    width: 100%;
    aspect-ratio: 868 / 570; /* 영상 비율 */
    overflow: hidden;
}
.products ul li img {max-width:100%;}
.products ul li video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-section .item1 {width:calc(50% - 13px)}
.product-section .item2 {width:100%}
.product-section .item2 li {width:calc(50% - 13px);}
.products dt {
    width: 100%;
    margin-bottom: 28px;
    position: relative; /* ✨ after 위치 잡기 */
    overflow: hidden;
    --border-width: 0%; /* ✨ 여기서 변수 선언 */
}

.products dt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: var(--border-width); /* ✨ width를 변수로 제어 */
    background-color: #b0b8c1;
    transition: width 1s ease;
    transform-origin: left center;
}

.products dt .name {
    width: 280px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding-left: 30px;
    background: linear-gradient(
        90deg,
        #264a9e 0%,
        #264a9e 70%,  
        #35ae5f 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    border-radius: 0 40px 0 0;
}
.product-top .point .p3 {
    -webkit-animation: ball-scale-multiple 2s 0s linear infinite;
    animation: ball-scale-multiple 2s 0s linear infinite;
}
.product-top .point .p2 {
    -webkit-animation: ball-scale-multiple2 4s 0s linear infinite;
    animation: ball-scale-multiple2 4s 0s linear infinite;
}



@keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.3;
    }
    5% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0.3;
    }
    5% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}



@keyframes ball-scale-multiple2 {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7;
    }
    5% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes ball-scale-multiple2 {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7;
    }
    5% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@media screen and (max-width:1500px) {
  .products dt .name {height:50px;line-height:50px;font-size:18px;}
  .product-section .products {margin-bottom:30px;}
  .product-top .rep li {width:18vw;height:18vw;}
}
@media screen and (max-width:1365px) {
    
}
@media screen and (max-width:1024px) {
    .product-top .rep {left:20px;}
    .product-top .rep li {border-radius:10px;}
    .products dt .name {font-size:17px;width: 260px;height: 44px;line-height: 44px;}
    .product-section .products {margin-bottom:20px;}
    .product-top {margin-bottom:60px;}
}
@media screen and (max-width:768px) {
    .products dt .name {width:218px;height:40px;line-height:40px;font-size:16px;padding-left:20px;}
    .products dt {margin-bottom:20px;}
    .product-section .products {margin-bottom:10px;}
    .product-top .point .p4 {width:80px;height:80px}
    .product-top .point .p3 {width:70px;height:70px;}
    .product-top .point .p2 {width:50px;height:50px;}
    .product-top .point .p1 {width:12px;height:12px;}
}
@media screen and (max-width:767px) {
    .product-top img {filter: none;transform: scale(1);}
    .products ul li {opacity:1;transform: none;}
    .products dt .name {background-size:100%;font-size:14px;font-weight:500;}
    .products dt::after {width:100%;}
    .section-tit {font-size:23px;}
}
@media screen and (max-width:640px) {
    .product-top {margin-bottom:30px;}
    .product-section .products {margin-bottom:0;}
    .products dt {margin-bottom:8px;}
}
@media screen and (max-width:480px) {
    .products dt .name {
        background-size: 100%;font-size: 14px;font-weight: 500;border-radius:0 30px 0 0;
        height: 32px;line-height: 32px;width:180px;}
}
@media screen and (max-width:350px) {
    .product-section .item2 li {width: calc(50% - 4px);}
    .products dt .name {padding-left:8px;height: 26px;line-height: 26px;width: 120px;font-size: 11px;}
    .products dt {margin-bottom:5px}
    .products-wrap {gap:5px;}
    .product-section .item1 {width: calc(50% - 4px);}
    .section-tit {font-size:20px;}
}