@charset "UTF-8";
html,body { width: 100%; height: 100%; }

.headerTop { height: 497px; }

.siteSearchBar-false { height: 54px; margin: 10px auto 35px; width: 660px; }

.swiper-container { width: 100%; height: 100%; overflow: hidden; }

.home-content .skip_video_div { position: fixed; right: 100px; top: 41px; width: 108px; box-sizing: border-box; cursor: pointer; }
.home-content .skip_video_div img { width: 108px; }


.swiper-container-vertical>.swiper-wrapper { height: 100vh;  width: 100vw;}

.sec1 { z-index: 3; overflow: hidden; background-color: #fff; }
.sec2 { z-index: 3; overflow: auto; }
.sec1 .bg { position: absolute; z-index: 1; width: 100%;}


@media screen and (max-width:1401px) {
  .swiper-container { overflow: auto; height: unset; }
  .sec1 { display: none; }
}

.home-content { width: 1200px; position: relative; height: 100vh; margin: 0 auto; z-index: 5; }
.home-content .next_div { display: none; padding: 14px 17px; width: 146px; height: 88px; box-sizing: border-box; background: #015293; border-radius: 12px; position: fixed; right: 122px; top: 90px; color: #fff; opacity: 0.9; }
.home-content .next_div .sanjiao { position: absolute; top: -6px; right: 20px; z-index: 999999; transform: rotate(45deg); display: block; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid #015293; border-bottom: 10px solid transparent; }
.home-content .next_div .next_title { font-weight: 400; font-size: 16px; color: #FFFFFF; line-height: 22px; text-align: right; font-style: normal; margin-bottom: 10px; }
.home-content .next_div .next_btn_box { display: flex; justify-content: space-around; align-items: center; }
.home-content .next_div .next_btn_box .submit_bth { width: 50px; height: 26px; border-radius: 4px; border: 1px solid #5590bc; font-weight: 400; font-size: 16px; color: #FFFFFF; line-height: 24px; text-align: center; cursor: pointer; }


#videoBg { width: 100%; height: 100vh; object-fit: cover; }
 

input.search-value::-webkit-input-placeholder { color: #999; }
input.search-value:-moz-placeholder { color: #999; }
input.search-value::-moz-placeholder { color: #999; }
input.search-value:-ms-input-placeholder { color: #999; }


/* guide-content ----------------------------*/
.guide-content { display: flex; flex-wrap: wrap; height: 100vh; box-sizing: border-box; align-items: center; padding: 5% 0; }

/* guide-logo */
.guide-logo { width: 100%; text-align: center;}

/* siteSearchBar */
.siteSearchBar .s-form { position: relative; }

/* button-group */
.button-group { width: 100%; }
.button-group ul { display: flex; justify-content: space-between; width: 100%;}
.button-group li { width: 135px; text-align: center; transition: all 0.3s ease-out 0s; }
.button-group li a { color: #fff; font-size: 20px; }
.button-group li:hover { transform: translateY(-10px); }
.button-group li:hover .flipper { transform: rotateY(180deg); }

/* 翻转 */
.flip-container { perspective: 1000px; margin-bottom: 10px; }
.flipper { position: relative; width: 135px; height: 135px; transition: transform 0.6s; transform-style: preserve-3d; background: url(../../base/img/guide-btn-bg.png) no-repeat 0 0;}
.flip-container .front,
.flip-container .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.flip-container .back { transform: rotateY(180deg); }

.button-group .li2 .flipper { background-position: 0 -135px; }
.button-group .li3 .flipper { background-position: 0 -270px; }
.button-group .li4 .flipper { background-position: 0 -405px; }
.button-group .li5 .flipper { background-position: 0 -540px; }

.button-group li i::before { content: "\E769"; font-size: 70px; line-height: 130px; font-family: iconfont; }
.button-group .li1 i::before { font-size: 80px; }
.button-group .li2 i::before { content: "\E770"; }
.button-group .li3 i::before { content: "\E771"; }
.button-group .li4 i::before { content: "\E772"; }
.button-group .li5 i::before { content: "\E773"; }

/* guide-btn */
.guide-btn { text-align: center; font-size: 16px; color: #fff; animation: arrow 3s ease infinite; width: 100%; }
.guide-btn::before { content: "\E767"; font-size: 55px; font-family: "iconfont"; display: block; }


@keyframes arrow {
    50% {
        transform: translateY(-10px);
    }
}


.sideFixed { right: 22px; }