.banner img { width: 100% } .banner_inner { position: absolute; left: 10%; bottom: 10%; /* top: 50%; transform: translatey(-50%) translatex(-50%); */ text-align: center; } .banner_inner h2 { font-size: 72px; color: #0054a6; font-weight: bold; text-shadow: 2px 2px #fff; line-height: 95px; opacity: 0; transform: translatey(-150%); font-family: 'sss' } .banner_inner h3 { line-height: 46px; color: #0054a6; font-size: 30px; font-weight: bold; opacity: 0; transform: translatey(150%) } .banner .swiper-slide-active h3, .banner .swiper-slide-active h2 { opacity: 1; transform: translatey(0) } .banner .swiper-slide:nth-child(2) h2, .banner .swiper-slide:nth-child(3) h2, .banner .swiper-slide:nth-child(4) h2 { color: #fff; text-shadow: 2px 2px #0054a6; } .banner .swiper-slide:nth-child(2) h3, .banner .swiper-slide:nth-child(3) h3, .banner .swiper-slide:nth-child(4) h3 { color: #fff; } .banner .swiper-pagination { text-align: right; box-sizing: border-box; padding: 0 3.125% } .banner .swiper-pagination-bullet { border-radius: 0; width: 53px; height: 3px; background: #e0ebcd; } .banner .swiper-pagination-bullet-active { background: #0054a6 } .banner .swiper-button-prev, .banner .swiper-button-next { text-align: center; line-height: 60px; width: 60px; height: 60px; background: #0054a6; color: #fff; border-radius: 50% } .banner .swiper-button-prev { left: 5%; } .banner .swiper-button-next { right: 5%; } .banner .swiper-button-prev:hover, .banner .swiper-button-next:hover { background: #e60012 } .banner h6 { font-size: 30px; line-height: 64px } .index_tit { text-align: center } .index_tit h2 { font-size: 32px; color: #000; font-weight: bold; transform: translatey(-100%); opacity: 0; } .index_tit h3 { color: rgba(0, 0, 0, .7); font-size: 15px; text-transform: capitalize; transform: translatey(-100%); opacity: 0; } .active .index_tit h3, .active .index_tit h2 { opacity: 1; transform: translatey(0) } .index_new { padding: 65px 0 72px } .new_l_inner { font-size: 0; text-align: center } .new_left { display: inline-block; width: 50%; box-sizing: border-box; padding-right: 67px; margin-top: 55px; vertical-align: top; position: relative; opacity: 0; transform: translatex(-100%) } .new_left:after { content: ''; display: block; height: 93%; border-right: 1px dashed #c4c4c4; width: 0; position: absolute; right: 0; top: 0 } .new_left img { width: 100%; margin-bottom: 25px } .new_left h2 { color: #333333; font-size: 18px; line-height: 25px; } .time { display: inline-block; box-sizing: border-box; padding-right: 21px; width: 80px; border-right: 1px solid #e5e2e3; } .new_l_inner { margin-top: 15px } .time span, .times span { color: #333333; font-size: 24px; display: block; line-height: 25px } .time font, .times font { color: #999999; font-size: 16px; line-height: 20px; } .n_l_t { display: inline-block; width: calc(100% - 80px); text-align: left; box-sizing: border-box; padding-left: 24px } .n_l_t p { line-height: 24px; color: #999999; } .new_right { display: inline-block; width: 50%; vertical-align: top; margin-top: 55px; box-sizing: border-box; padding-left: 67px; opacity: 0; transform: translatex(100%) } .active .new_right, .active .new_left, .active .about_inner { opacity: 1; transform: translatex(0) translatey(0) } .times { display: inline-block; width: 83px; box-sizing: border-box; padding-right: 20px; text-align: center } .n_r_i { display: inline-block; width: calc(100% - 83px); vertical-align: top } .new_right a { display: block; font-size: 0; padding-bottom: 12px; } .new_right li { margin-bottom: 12px; border-bottom: 1px solid #d9d9d9 } .n_r_i h2 { color: #000000; font-size: 16px; line-height: 20px; margin-bottom: 10px } .n_r_i p { line-height: 25px; color: #999999 } .new_right li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0 } .new_right li:hover h2, .new_right li:hover span { color: #0054a6 } .new_left a { display: block } .new_left a:hover h2, .new_left a:hover span { color: #0054a6 } .index_new>a { display: block; width: 120px; height: 28px; border: 1px solid #0054a6; border-radius: 28px; text-align: center; color: #0054a6; margin: 30px auto 0 } .index_new>a:hover { color: #fff; background: #0054a6 } .about { padding: 90px 0 0; background-image: url(/uploads/image/tbimages/aboutbac_02.jpg); background-size: 100% 100%; background-repeat: no-repeat } .about .index_tit h2, .about .index_tit h3 { color: #fff } .about_inner { font-size: 0; width: 93.333333333333333%; margin: 0 auto; background: #fff; margin-top: 76px; opacity: 0; transform: translatey(100%) } .about_inner { position: relative; } .about_inner:before { content: ''; display: block; width: 37.589%; height: 251px; background: #0054a6; position: absolute; left: 0; bottom: 0; transform: translatex(-51px) translatey(39px) } .about_inner>img { width: 37.589%; vertical-align: top; position: relative; z-index: 2; } .a_i_right { display: inline-block; width: 62.411%; box-sizing: border-box; padding: 54px 57px 0 } .ab_tit { margin-bottom: 15px } .ab_tit h2 { float: left; font-size: 18px; font-weight: bold; color: #000; } .ab_tit a { float: right; padding: 0 20px; line-height: 22px; display: block; border-radius: 22px; border: 1px solid #0054a6; color: #0054a6 } .ab_tit a:hover { background: #0054a6; color: #fff } .a_i_right p { line-height: 26px; color: #000; } .ablist { font-size: 0; margin-top: 15px } .ablist li { display: inline-block; width: 20%; } .ablist li h6 { font-size: 48px; line-height: 60px; padding-left: 10px } .ablist li span { color: #343b49; font-size: 16px } .ablist li:hover h6, .ablist li:hover span { color: #0054a6 } .index_ywly { padding: 120px 0 65px } .ywlist { margin-top: 45px; position: relative; } .ywlist:before { content: ''; display: block; width: 100%; height: 90%; background: #eeeeee; position: absolute; left: 0; top: 0 } .ywlybanner { position: relative; } .index_ywly .ywlybanner:before { content: ''; display: block; width: 100%; height: 90%; background: #eeeeee; position: absolute; left: 0; top: 0 } .index_ywly .ywzhinner { padding: 60px 30px 0 30px } .index_ywly .ywzhinner h6 { font-size: 52px; margin-bottom: 20px } .ywlist li { box-sizing: border-box; width: 20%; display: inline-block; border-right: 1px solid #e8e6e6; text-align: center; opacity: 0; } .ywlist li:nth-child(1), .ywlist li:nth-child(2) { transform: translatex(-100%) } .ywlist li:nth-child(5), .ywlist li:nth-child(4) { transform: translatex(100%) } .active .ywlist li { opacity: 1; transform: translatex(0) } .ywlist li img { width: 100% } .ywlist li:hover img { transform: scale(1.125) } .ywimg { overflow: hidden; position: relative; } .ywimg h6 { position: absolute; left: 50%; top: 50%; transform: translatey(-50%) translatex(-50%) scale(0); font-size: 58px; color: #fff; } .ywlist li:hover h6 { transform: translatey(-50%) translatex(-50%) scale(1); } .ywlist li span { display: block; background: #0054a6; color: #fff; font-size: 16px; padding: 18px 0 } .float { padding: 30px 0; display: none } .float div { display: inline-block; width: 110px; height: 320px; position: fixed; bottom:0; z-index: 20; } .float div a{ width: 100%; height: 100%; display: block; padding: 26px 20px; background-image: url(/uploads/image/tbimages/float.jpg); background-repeat: no-repeat; background-size: cover; text-align: center; box-sizing: border-box; } .float div:nth-child(1) { left: 0 } .float div:nth-child(2) { right: 0 } .float div span { font-size: 18px; color: #f1d232; font-weight: bold; display: inline-block; line-height: 24px; writing-mode: vertical-lr; /*浠庡乏鍚戝彸 浠庡彸鍚戝乏鏄?writing-mode: vertical-rl;*/ writing-mode: tb-lr } .float font { position: absolute; right: 0; top: 0; transform: translatey(-100%); font-size: 18px; color: #0054a6; cursor: pointer; } .float div:nth-child(1) font { right: auto; left: 0 }