/*-----------------------------------------------
    reset
-----------------------------------------------*/
/** ,*::before ,*::after ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p ,button a ,li a ,.df-form
{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat','Noto Sans JP', 'Noto Sans TC', 'PingFang TC', 'Heiti TC','Microsoft JhengHei', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    outline: none;
}

*/
/*-----------------------------------------------
    blur
-----------------------------------------------*/

@keyframes blur_ {
  0% {
    opacity: 0;
    -webkit-filter: blur(15px);
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

/*-----------------------------------------------
    overlay
-----------------------------------------------*/


.overlay {

    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;

    z-index: 999;


}




.overlay-pos {


    position: absolute;
    width: 95%;
    height: 31vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);
    max-width: 1800px;
    z-index: 10;
    opacity: 0;
    animation: overlayFadeIn 1s ease 0s forwards;


}

.logo-bwt {
    display: none;
    position: absolute;
    left: 25px;
    top: 25px;
    max-width: 120px;
    z-index: 1;
    pointer-events: none;

    width: 27%;
}

.logo-clean {
    position: absolute;
    left: 5px;
    top: -85px;
    max-width: 400px;
    z-index: 1;

    width: 44%;

}

.logo-buy {
    position: absolute;
    left: -19px;
    top: -78px;
    max-width: 400px;
    z-index: 1;
    width: 45%;
    pointer-events: none;
}

.icon-arrow {
    position: absolute;
    right: -5%;
    bottom: 15%;
    max-width: 85px;
    z-index: 1;
    width: 10%;
    pointer-events: none;
}



.df-close:hover {
    transform: rotateZ(90deg);

    top: 20px;
    right: 20px;
}

/*close*/
.df-close {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    z-index: 10;
    opacity: 1;
    width: 45px;
    height: 45px;
    cursor: pointer;
    overflow: hidden;
    transition: all .5s;
    transform-origin: 50% 50%;
    border-radius: 50px;
    border: 2px solid #fff;
}

.df-close::before,
.df-close::after {
    position: absolute;
    top: 50%;
    left: 20%;
    margin-top: -1px;
    width: 60%;
    height: 2px;
    border-radius: 7px;
    content: '';
    background: #fff;
}

.df-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.df-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*df-mask*/
.df-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    /*background: rgba(221, 120, 120, 0.8);*/
}

/*box-open & box-close*/
.box-open {
    opacity: 1;
    /*transform: scale(1);*/
    /*transform: translateY(0);*/
    visibility: visible;
    pointer-events: auto;
    transition: all .3s cubic-bezier(.39, .575, .565, 1);
}

.box-close {
    opacity: 0;
    /*transform: scale(0);*/
    /*transform: translateY(-1000px);*/
    visibility: hidden;
    pointer-events: none;
    transition: all .2s cubic-bezier(.39, .575, .565, 1);
}


@media screen and (min-width: 1921px) {
    .icon-arrow {
        right: -5%;
        top: 48%;
    }

    .overlay-pos {

        height: 25vw;
        transform: translate(-50%, -50%);
    }

}

@media screen and (max-width: 1600px) {
    .icon-arrow {
        right: -11%;
        top: 49%;
    }

}

@media screen and (max-width: 767px) {
    .logo-bwt {
        display: block;

    }

    .overlay-pos {

        width: 100%;
        height: 100vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .logo-clean {
        left: -1%;
        top: -26%;
        max-width: 400px;

        width: 70%;

    }

    .logo-buy {
        left: -3%;
        top: -24%;
        max-width: 400px;

        width: 70%;
    }

    .icon-arrow {
        right: 0%;
        top: 63%;
        max-width: 85px;
        width: 16%;
    }

    .df-close {

        transform: scale(0.65);
    }

}



/*-----------------------------------------------
     swiper
-----------------------------------------------*/


.swiper-overlay {
    max-width: 890px;
    /*max-width: 1057px;*/
    max-height: 50vh;
    /*不可刪除高度*/
}





.swiper-wrap {
    position: relative;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .7);
    border-radius: 15px;

}


.swiper-wrap>ul {
    display: flex;

    justify-content: center;
    align-items: center;




}
    /* 淡入動畫（進場） */
.swiper-wrap ul {
    opacity: 0;
animation: overlayFadeIn 0.8s ease 0.1s forwards;
}


@keyframes overlayFadeIn {
  10%,50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.swiper-wrap>ul>li,.swiper-wrap>ul>li.single {
    /*flex:1;*/
    margin: 7% 4% 0;
    width: 45%;
    max-width:890px;
    height: 100%;

    list-style: none;

    position: relative;
    transition: all .4s ease;
        /*animation: blur_ .4s ease-out 0s 1 both;*/

}

.swiper-wrap>ul>li:hover {
    width: 60%;
    transition: all .4s ease;

}
.swiper-wrap>ul>li.single:hover {
    width: 50%;
    transition: all .4s ease;

}

.overlay-swiper-slide img {
    border: 0;
    border-style: none;
    vertical-align: middle;
}


.overlay img {
    max-width: 100%;
}


@media screen and (max-width: 767px) {

    .swiper-overlay {
        max-height: 35vh;
        /*不可刪除高度*/
    }

    .swiper-wrap {

        border-radius: 0px;
    }

    .swiper-wrap>ul {
        flex-direction: column;
        height: 100%;

        padding: 15% 0 0 0;
    }

    .swiper-wrap>ul>li {
        margin: 5% 0% 5%;
        width: 90%;
        height: 32%;


        /*! height: 55%; */
    }

    .swiper-wrap>ul>li:hover {
        /*! margin: 10% 4%; */
        width: 90%;
        /*! height: 40%; */
        transition: none;

    }
        .swiper-wrap>ul>li.single {
    width: 95%;
    height: 40%;


}
.swiper-wrap>ul>li.single:hover {
    width: 95%;
    transition: none;

}

}



/*clean-pc*/
.clean-pc >.swiper-wrapper > .swiper-slide{
    background: url(https://www.bwt.com.tw/action/2025/popup_img/overlay/1-bg.png) center 0 /100% no-repeat;

}