body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.pc-show{
    display: block;
}
.mob-show{
    display: none;
}

.sec-photo-product{
    position: relative;
}

.sec-photo-product .sec-photo{
    margin: 60px 0;
    position: relative;
    overflow: hidden;
}
.sec-photo-product .sec-photo ul, .sec-photo-product.sec-photo ul li{
    list-style: none;
}
.sec-photo-product .sec-photo-first{
    padding: 16px 0;
}
.sec-photo-product .sec-photo-second{
    padding-bottom: 16px;
}
.sec-photo-product .sec-photo-first,.sec-photo-product .sec-photo-second {
    width: 100%;
    background-color: #000000;
    position: relative;
    overflow: hidden;
    height: 14.8932vw !important;
}

.sec-photo-product .sec-photo-first ul{
    /* position: absolute;
    top: 50%; */
    /* transform:translateY(-50%); */
    left: 0;
    display: flex;
    justify-content: flex-start;
}

.sec-photo-product .sec-photo-second ul {
    /* position: absolute;
    top: 0;
    right: 0; */
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.sec-photo-product .sec-photo-first ul li img{
    width: 26.3020833vw;
    margin: 0.8333vw 0.8333vw 0 0;
    opacity: 1;
}
.sec-photo-product .sec-photo-second ul li img{
    width: 26.3020833vw;
    margin-left: 0.8333vw;
}

.sec-photo-product.active .sec-photo-first ul li img,
.sec-photo-product.active .sec-photo-second ul li img{
    opacity: .6;
    transition: opacity .6s ease;
}
.sec-photo-product .sec-photo .sec-photo-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 72.9167vw;
    z-index: 2;
    text-align: center;
    opacity: 0;
}
.sec-photo-product .sec-photo .sec-photo-title .sec-photo-button{
    margin-top: 1.5625vw;
    font-size: 0.6770833vw;
    line-height: 1;
}

.sec-photo-product.active .sec-photo .sec-photo-title{
    opacity: 1;
    transition: opacity 1.4s ease;
    line-height: 1.3;
    font-size: 2.291667vw;
    font-weight: 700;
    color: #fff;
}

.sec-photo-product.active .sec-photo .sec-photo-title p{
    margin: 0;
    font-weight: 400;
    opacity: .9;
    font-size: 1.458333vw;
}

.sec-photo-product.active .sec-photo a{
    color: #fff;
    background-color: #ffffff57;
    border-radius: .45vw;
    color: #fff;
    padding: 0.8854vw 1.901vw;
    display: inline-block;
    font-size: 0.6770833vw;
    text-decoration: none;
    line-height: 1.3;
    font-weight: 700;
}
.sec-photo-product .ie-sec-ksp-swiper{
    display: none;
}
.sec-photo-product .ie-sec-ksp-swiper.show{
    display: block;
}
.sec-photo-product .ie-sec-ksp-swiper .swiper-wrapper{
    height: 41.6vw !important;
}

@media screen and (max-aspect-ratio: 51 / 50) {

    .pc-show{
        display: none;
    }
    .mob-show{
        display: block;
    }
    .sec-photo-product .sec-photo{
        margin: 8.8889vw 0;
    }
    .sec-photo-product .sec-photo-first, .sec-photo-product .sec-photo-second, .sec-photo-product .sec-photo-third{
        height: 36.6667vw !important;
    }
    .sec-photo-product .sec-photo-first ul li img,.sec-photo-product .sec-photo-third ul li img{
        width: 59.444444vw;
        margin: 2.7778vw 2.7778vw 0 0;
    }
    .sec-photo-product .sec-photo-second ul li img{
        width: 59.444444vw;
        margin: 2.7778vw 2.7778vw 0 0;
    }
    .sec-photo-product .sec-photo-first{
        padding: 0;
    }
    .sec-photo-product .sec-photo-second,.sec-photo-product .sec-photo-third{
        padding-bottom:2.7778vw;
    }
    .sec-photo-product .sec-photo .sec-photo-title .sec-photo-button{
        font-size: 3.6111vw;
        padding-top: 2.5vw;
        margin-top: 4.4444vw; 
    }

    .sec-photo-product.active .sec-photo .sec-photo-title{
        font-size: 4.444444vw;
    }

    .sec-photo-product.active .sec-photo .sec-photo-title p{
        font-size: 3.3333vw;
    }

    .sec-photo-product.active .sec-photo a{
        font-size: 3.3333vw;
        padding: 2.777778vw 5.555556vw;
        border-radius: 1.6667vw;
    }
    .sec-photo-product .sec-photo .sec-photo-title{
        width: 83.3333vw;
    }

    .sec-photo-product .sec-ksp .sec-ksp-swiper .swiper-wrapper{
        height: 100%;
    }
    .sec-photo-product .sec-ksp-swiper .sec-swiper-super-charge{
        width: 85vw;
        bottom: 21.111vw;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .sec-photo-product .sec-photo-pc-show{
        display: none;
    }
    .sec-photo-product .sec-photo-mob-show{
        display: block;
    }
    .sec-photo-product .sec-ksp .sec-ksp-swiper{
        border-radius: 4.2vw;
    }
}
