.pre_banner_3d a { text-decoration: none; border: 0 }
body { overflow-x: hidden }
.pre_banner_3d { margin: auto; width: 100%; height: 510px; margin-bottom:50px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.nav_banners { width: 100%; height: auto; border-bottom: 1px solid #f2f2f2; 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; justify-content: space-between }
.nav_banners>li { display: inline-block; padding: 5px 16px; margin: 12px 0; border-radius: 5px; font-size: 14px; cursor: pointer }
.blue_nav { background: #63b504; color: #fff }
.banner_tree { width: 100%; height: 100%; position: absolute; bottom: 0; overflow: hidden }
.color_font { position: absolute; height: 44px; width: 20px; top: 0; bottom: 0; margin: auto; z-index: 50; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #cccccc; padding: 3px 15px; line-height: 32px; font-size: 30px; font-weight: 100; color: #cccccc; }
.left_btn { left: 0 }
.right_btn { right: 0 }
.fa { display: inline-block; width: 20px; height: 12px; }
.fa-angle-left { background: url(../img/left_array.png) no-repeat center center; }
.fa-angle-right { background: url(../img/right_array.png) no-repeat center center; }
.screensArrowsActive:hover .fa-angle-left { background: url(../img/left_array.png) no-repeat center center; }
.screensArrowsActive:hover .fa-angle-right { background: url(../img/right_array.png) no-repeat center center; }
.screensArrowsActive, .screensArrowsActive i { cursor: pointer; opacity: 1; }
.screensArrowsActive:hover { color: #fff; border-color: #999;/* background: #ff0101;*/ }
.img_phone { width: 100%; height: 100% }
.show_s_ui { width: 100%; height: 100%; position: relative }
.show_s_ui>li { width: 200px; height: 226px; position: absolute; top: 0; bottom: 0; margin: auto; z-index: 30; cursor: pointer; filter: alpha(opacity=0); opacity: 0;     font-size: 14px;
    text-align: center;}
.show_s_ui>li>div { position: absolute; top: 0; width: 100%; height: 100%; background: #fff; filter: alpha(opacity=90); opacity: .9; display: none }
.show_s_ui>li img { width: 100%; height: 100% }
#middel_shows { width: 400px; height: 452px; left: 32.7%; filter: alpha(opacity=100); opacity: 1 }
#left_shows { left: 8%; filter: alpha(opacity=60); opacity: .6 }
#right_shows { left: 73%; opacity: .6; filter: alpha(opacity=60) }
#small_left, #small_right { width: 154px; height: 249px; opacity: 0; filter: 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: 29.5% }
.show_s_ui>li { width: 175px; height: 379px }
#small_left, #small_right { width: 131px; height: 270px }
}

@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: 578px }
}

@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: 461px }
#left_shows { left: 0% }
.show_s_ui>li { width: 106px; height: 229px }
#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: 480px }
}

@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 }
}