html,
body {
    position: relative;
    height: 100%;
}

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}



.swiper-slide img {
    /* display: block; */
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.hdb_pic {
    width: 100%;
}

.hdb_pic img {
    width: 100%;
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
    background-image: none;
    background-size: 100%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9;
    transition: background .3s;
    outline: none; 
}

/* .swiper-container .swiper-button-prev:hover,
.swiper-container .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, .3);
} */

.swiper-container .swiper-button-prev {
    left: 1%;
}

.swiper-container .swiper-button-next {
    right: 1%;
}

.swiper-container .swiper-button-prev:after,
.swiper-container .swiper-button-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 18px;
    height: 36px;
    top: 24%;
    transform: translateX(-50%);
}

.swiper-container .swiper-button-prev:after {
    background: url(../images/prev.svg) no-repeat;
    background-size: 100%;
    left: 48%;
}

.swiper-container .swiper-button-next:after {
    background: url(../images/next.png) no-repeat;
    /* background: url(../images/next.svg) no-repeat; */
    background-size: 100%;
    left: 35%;
    /* transform: rotate(180deg); */
    background-position: center;
    width: 60px;
    height: 60px;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 45px;
    height: 4px;
    border-radius: 0;

}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 1%;
}

.swiper-pagination-bullet {
    background: rgb(255, 255, 255);
    opacity: .6;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.pictrue-ysyd {
    position: relative;
}

.ysyd1,
.ysyd2,
.ysyd3,
.ysyd4 {
    position: absolute;
    bottom: 2%;
    right: 1%;
    width: 5vw;
    cursor: pointer;
}

.ysyd1-tc,
.ysyd2-tc,
.ysyd3-tc,
.ysyd4-tc {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 60%;
    display: none;
}

.ysyd1-tc img,
.ysyd2-tc img,
.ysyd3-tc img,
.ysyd4-tc img {
    width: 100%;
    height: 100%;
}

.tc-bg {
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    opacity: .8;
    display: none;
}

.tc-close {
    background: url(../images/close.png) no-repeat;
    position: fixed;
    right: 6%;
    top: 8%;
    z-index: 99;
    width: 30px;
    height: 30px;
    display: none;
    cursor: pointer;
}

.video1,
.video2,
.video3,
.video4 {
    display: none
}

.pictrue-play {
    position: relative;
}

.pictrue-play .btn1,
.pictrue-play .btn2,
.pictrue-play .btn3,
.pictrue-play .btn4 {
    position: absolute;
    cursor: pointer;
}

.pictrue-play .btn1 {
    width: 4vw;
    right: 22%;
    top: 16%;
}
.pictrue-play .btn2 {
    width: 2vw;
    right: 15%;
    top: 53%;
}
.pictrue-play .btn3 {
    width: 2vw;
    right: 15%;
    bottom: 26%;
}
.pictrue-play .btn4 {
    width: 2vw;
    right: 15%;
    bottom: 10%;
}
.video1,.video2,.video3,.video4{
    position:fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width:35%;
    z-index:99;
}
.video1 video,.video2 video,.video3 video,.video4 video{
    width:100%;
}