
#vimeoPlayerContainer {
    position: relative;
    padding-bottom: 56%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

#vimeoPlayerContainer iframe,
#vimeoPlayerContainer object,
#vimeoPlayerContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sub4_c1_box2{text-align: center;background-color: #fffdee}
.sub4_c1_box2>div>img{margin:0 0 30px 0 }

.sub4_c1_box2_1>div{position: relative}
.sub4_c1_box2_1>div>img{max-width:640px;width:100%;margin:0 auto}
.sub4_c1_box2_1>div>iframe{max-width:640px;width:100%;margin:0 auto}


.sub4_c1_box2_2{display: flex;flex-wrap: wrap;max-width:1300px;margin:60px auto 0;}
.sub4_c1_box2_2>div{width:calc(50% - 5px);margin:10px 10px 0 0;height:22vw;position: relative;cursor: pointer;overflow: hidden;}
.sub4_c1_box2_2>div:nth-child(2n){margin:10px 0 0}
.sub4_c1_box2_2>div>p{position: absolute;left:0;top:0;width:100%;height: 100%;opacity: 0;transition: 0.5s all}
.sub4_c1_box2_2>div>p>span{display: flex;justify-content: center;align-items: center;width;100%;height:100%;font-size:30px;}
.sub4_c1_box2_2>div>div{background-size:cover;background-repeat: no-repeat;background-position: center;width:100%;height:100%;transition: 0.5s all}

.sub4_c1_box2_2>div:hover > div{transform: scale(1.2)}
.sub4_c1_box2_2>div:hover > p{opacity: 1}



.sub4_c1_box3{text-align: center; position: relative;}
.sub4_c1_box3 h2{font-weight: 400;font-size:24px;}
.sub4_c1_box3 h2 img{width:120px;}
.sub4_c1_box3 h2>span{font-weight: 600}
.sub4_c1_box3 h2>span>span{color:#ff7701}


.sub4_c1_box3_1{margin:40px 0 100px}
.gallery-thumbs .swiper-slide{background-size:cover;background-repeat: no-repeat;background-position: center}


.gallery-thumbs{height:15vw}


.swiper-button-next, .swiper-button-prev{width:53px !important;height:53px !important;background-size:53px 53px !important;border-radius: 50%; --swiper-navigation-sides-offset: 20px;}
.swiper-button-next{background-image:url(/assets/images/right.png) !important}
.swiper-button-prev{background-image:url(/assets/images/left.png) !important}
.swiper-button-next:after, .swiper-button-prev:after{display: none !important;}
.swiper-slide-thumb-active{box-shadow: inset 0 0 0px 3px #01c6bc}
@media screen and (min-width:768px){

    #vimeoPlayerContainer {
        width: 60%;
        margin-left: -30px ;
        margin-right: -30px;
        padding-bottom: 30.25%;

    }


    .sub4_c1_box2_1>div>iframe, .sub4_c1_box2_1>div>img{position: absolute;left:50%;top:50%;transform: translate(-50%, -50%)}
    .sub4_c1_box2_1>div{display: flex;justify-content: space-between;padding:40px 0}  
    .sub4_c1_box2_1>div>div{width:250px; margin: auto 0}

    .sub4_c1_box2_2>div{width:calc(25% - 7.5px);height:13vw;}
    .sub4_c1_box2_2>div:nth-child(2n){margin:10px 10px 0 0}
    .sub4_c1_box2_2>div:nth-child(4n){margin:10px 0px 0 0}

    .sub4_c1_box3 h2{font-size:30px;}
    .sub4_c1_box3 h2 img{width:140px;}


    .sub4_c1_box3_1{margin:40px 0 150px}

    .gallery-thumbs{height:10vw}
}


@media screen and (min-width:1024px){

    .sub4_c1_box2>div>img{margin:0 0 60px}

    .sub4_c1_box2_2>div{width:calc(25% - 15px);height:13vw;margin:20px 20px 0 0;height: 167px}
    .sub4_c1_box2_2>div:nth-child(2n){margin:20px 20px 0 0}
    .sub4_c1_box2_2>div:nth-child(4n){margin:20px 0px 0 0}

    .sub4_c1_box2_2>div>p>span{;font-size:50px;}


    .sub4_c1_box3 h2{font-size:46px;}
    .sub4_c1_box3 h2 img{width:auto;}


    .gallery-thumbs{height:100px;}
}



@media screen and (min-width:1200px){


    .sub4_c1_box2>div{max-width:1500px;}
    .sub4_c1_box2_1>div>div{width:auto}
    .sub4_c1_box2_1>div>img{max-width:880px;width:100%;margin:0 auto}
    .sub4_c1_box2_1>div>iframe{max-width:880px;width:100%;margin:0 auto}
}


.review-sec {
    background-color: #fffdee;
}

.review-sec .review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-sec .review-grid .item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    position: relative;
}

/* Desktop ( 1024px ~)*/
@media all and (min-width: 1024px) {}

/* Laptop ( 1024px ~ 1440px)*/
@media all and (min-width: 1024px) and (max-width: 1440px) {}

/* Tablet ( 768px ~ 1023px)*/
@media all and (min-width: 768px) and (max-width: 1023px) {
    .review-sec .review-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile ( ~ 767px)*/
@media all and (max-width: 767px) {
    .review-sec .review-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
}