html,body,ul,ol,li,p{margin:0;padding:0;font-family:"微软雅黑";}
ul,ol{list-style: none}
.pre_banner_3d a{
    text-decoration: none;
    border:none;
}
body{
    overflow-x: hidden;
}
.pre_banner_3d{
    width: 100%;
    margin:auto;
    height:33.333vw;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.contrves{
    width:74.375vw;
    height:auto;
    position:absolute;
    bottom: 6.999vw;
    left: 1.875vw;
}
.nav_banners{
    width:100%;
    height:auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    padding-left: 3px;
    /*justify-content:space-between;*/
}
.nav_banners>li{
    width: 0.650vw;
    height: 0.625vw;
    border-radius: 50%;
    background: #A6A6A6;
    cursor: pointer;
    margin-left: 10.15625vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 0.104vw solid #fff;
    padding: 0.104vw;
}
.nav_banners>li>span{
    display:inline-block;
    width: 0.625vw;
    height: 0.625vw;
    border-radius: 50%;
}
.nav_banners>li>p{
    width: 7.8125vw;
    font-weight: 400;
    color: #333333;
    margin-top: 2.5625vw;
    position: absolute;
    text-align: center;
}
.nav_banners>li>.xian{
    width: 10.36vw;
    height: 1px;
    background: #A6A6a6;
    position: absolute;
    left: -10.36vw;
    top: 0.15625vw;
}
.nav_banners>li.blue_nav p.fs20{
    color:rgba(10, 69, 140, 1) !important;;
}
.nav_banners>li>.xianR{
    width: 10.26vw;
    height: 1px;
    background: #A6A6a6;
    position: absolute;
    right: -10.26vw;
    top: 0.15625vw;
}
.blue_nav{
    background:#0A458C !important;
    padding: 0.204vw;
    position: relative;
}
.blue_nav span{
    width: 2vw  !important;
    height: 2vw  !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important;
    background-color:rgba(10, 69, 140, 0.6) !important;
    position: absolute;
    top:-0.8vw !important;
    z-index: 999;
}
.blue_nav span i{
    display: inline-block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color:rgba(10, 69, 140, 1) !important;
}

.banner_tree{
    width:100%;
    height:16.667vw;
    position:absolute;
    top:0;
    overflow: hidden;
}
.show_phone_s{
    width:414px;
    height:736px;
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    margin:auto;
    z-index: 10
}

.icon_center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.color_font{
    color: #A6A6A6;
    width: 2.375vw;
    height: 2.375vw;
    font-size: 1.25vw;
    text-align: center;
    line-height: 1.875vw;
    border-radius: 50%;
    font-weight: 400;
    position: absolute;
    bottom: 6.108vw;
    margin: auto;
    z-index: 50;
    cursor: pointer;
    border: 1px solid #A6A6A6;
}
.left_btn{
    left:-0.4vw;
}
.right_btn{

    right:0;
}
.img_phone{
    width:100%;
    height:100%;
}
.show_s_ui{
    width:100%;
    height:100%;
    position:relative;
}
.show_s_ui>li{
    width:22.865vw;
    height:14.0625vw;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 30;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
}
.show_s_ui>li>p{
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    top: 5.208vw;
    left: 2.083vw;
}
.show_s_ui>li>p>span:last-child{
    display: block;
    margin-top: 0.677vw;
    line-height: 34px;
}
.show_s_ui>li>img{
    width:100%;
    height:100%;
}
#middel_shows{
    width:27.083vw;
    height:16.667vw;
    left:25.521vw;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity:1;
}
#left_shows{
    left:1.40625vw;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    opacity: 0.6;
}
#right_shows{
    left:53.854vw;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#small_left,#small_right{
    width:154px;
    height:249px;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#small_left{
    left:-15%;
}
#small_right{
    left:102.5%;
}
@media screen and (max-width:1200px){
    .pre_banner_3d {width:1024px;height:763px;}
    #middel_shows {left: 35.5%;}
    .show_s_ui>li { width: 175px;height: 282px;}
    #small_left, #small_right {width: 131px;height: 194px;}
}
@media screen and (max-width:1024px){
    .pre_banner_3d {width: 875px;height: 765px;}
    .show_phone_s {width: 375px;height: 667px;}
    #middel_shows {left: 34.8%;}
    #middel_shows {width: 267px;height: 457px;}
}
@media screen and (max-width:879px){
    .pre_banner_3d {width: 746px;height: 735px;}
    #middel_shows {left: 31.8%;}
    #middel_shows {width: 269px;height: 457px;}
    .show_s_ui>li {width: 145px;height: 232px;}
}
@media screen and (max-width:768px){
    .pre_banner_3d {width: 675px;height: 586px;}
    .show_phone_s {width: 320px;height: 568px;}
    #middel_shows {left: 33.1%;}
    #middel_shows {width: 227px;height: 389px;}
    .show_s_ui>li {width: 138px;height: 215px;}
    #right_shows {left: 72%;}
    .banner_tree {height: 539px;}
}
@media screen and (max-width:685px){
    .color_font{display:none}
    #small_left {left: -55%;}
    .pre_banner_3d {width: 520px;}
    #small_right {left: 109.5%;}
    .show_phone_s {width: 300px;height: 496px;}
    #middel_shows {left: 29.7%;}
    #middel_shows {width: 213px;height: 340px;}
    #left_shows {left: 0%;}.show_s_ui>li {width: 106px;height: 190px;}
    #right_shows {left: 79.5%;}
}
@media screen and (max-width:521px){
    .pre_banner_3d {width: 359px;}
    #left_shows {left: -41%;}
    #right_shows {left: 107.5%;}
    #middel_shows {left: 20.4%;}
    #middel_shows {width: 214px;height: 340px;}
    .show_phone_s {width: 349px;height: 568px;}
    #middel_shows {left: 15.5%;}
    #middel_shows {width: 246px;height: 390px;}
}
@media screen and (max-width:359px){
    .pre_banner_3d {width: 320px;}
    .show_phone_s {width: 320px;height: 520px;}
    #middel_shows {left: 14.5%;}
    #middel_shows {width: 228px;height: 356px;}
}