.banner { z-index: 1; position: relative; } .banner .swiper-container .swiper-wrapper .swiper-slide { position: relative; } .banner .swiper-container .swiper-wrapper .swiper-slide img { width: 100%; } .banner .swiper-container .swiper-wrapper .swiper-slide img.mobile { display: none; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text { width: 30rem; position: absolute; top: 35%; right: 20%; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text h1 { font-size: 3rem; line-height: 4rem; color: #fff; text-align: right; text-shadow: 0 0.2rem 0.1rem #000; position: relative; top: -1rem; opacity: 0; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text p { width: 92%; float: right; font-size: 1rem; color: #fff; text-align: right; line-height: 1.75rem; text-shadow: 0 0.2rem 0.1rem #000; position: relative; top: 0rem; opacity: 0; transition: all 1s ease 0.5s; -webkit-transition: all 1s ease 0.5s; -moz-transition: all 1s ease 0.5s; -ms-transition: all 1s ease 0.5s; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text.active h1 { top: 0; opacity: 1; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text.active p { top: 1rem; opacity: 1; } .banner .swiper-button-prev, .banner .swiper-container-rtl .swiper-button-next { left: 6%; color: #fff; background: none; } .banner .swiper-button-prev span, .banner .swiper-container-rtl .swiper-button-next span { font-size: 2.5rem; } .banner .swiper-button-prev:hover span, .banner .swiper-container-rtl .swiper-button-next:hover span { color: #28468e; } .banner .swiper-button-next, .banner .swiper-container-rtl .swiper-button-prev { right: 6%; color: #fff; background: none; } .banner .swiper-button-next span, .banner .swiper-container-rtl .swiper-button-prev span { font-size: 2.5rem; } .banner .swiper-button-next:hover span, .banner .swiper-container-rtl .swiper-button-prev:hover span { color: #28468e; } .banner .swiper-container-horizontal > .swiper-pagination { bottom: 18%; } .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { width: 20rem; height: 2px; border-radius: 0; background: rgba(255, 255, 255, 0.2); position: relative; opacity: 1; } .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet:before { content: ''; width: 0; height: 3px; background: #fff; position: absolute; top: 0; left: 0; } .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet-active.swiper-pagination-bullet:before { width: 100%; transition: all 3s; -webkit-transition: all 3s; -moz-transition: all 3s; -ms-transition: all 3s; } .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet:hover:before { width: 100%; transition: all 3s; -webkit-transition: all 3s; -moz-transition: all 3s; -ms-transition: all 3s; } .company { position: relative; } .company .bg_fixed img { width: 100%; height: 100%; } .company .bg_fixed img.mobile { display: none; } .company .text { padding-top: 6%; width: 100%; height: 100%; position: absolute; bottom: 0; padding-left: 4%; } .company .text h2 { font-size: 4rem; font-family: times new roman; color: #28468e; } .company .text h3 { font-size: 1.5rem; color: #585858; margin-top: -0.8rem; margin-bottom: 1.5rem; } .company .text > p { font-size: 0.9rem; color: #000; width: 25%; text-align: justify; } .company .text .more { display: block; margin-top: 3%; width: 7rem; text-align: center; position: relative; } .company .text .more span { font-size: 0.8rem; color: #28468e; } .company .text .more span:before { content: ''; width: 0; height: 1px; background: #28468e; position: absolute; bottom: -0.2rem; left: 0; } .company .text .more span:after { content: ''; width: 0; height: 1px; background: #28468e; transform-origin: bottom right; transform: rotate(45deg); position: absolute; right: 0; bottom: -0.2rem; } .company .text .more span:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .company .text .more span:hover:after { width: 0.5rem; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .company .text .box { width: 40%; height: 40%; position: absolute; bottom: 0; left: -40rem; margin-left: 4%; } .company .text .box div { float: left; width: 50%; height: 100%; margin: 0 auto; padding-top: 16%; } .company .text .box div p { color: #fff; text-align: center; font-size: 2.1rem; } .company .text .box div.left { background: #28468e; cursor: pointer; } .company .text .box div.right { background: #f4c117; cursor: pointer; } .company .text .box div.right p { font-family: times new roman; } .company .text .active { left: 0; transition: all 1.2s; -webkit-transition: all 1.2s; -moz-transition: all 1.2s; -ms-transition: all 1.2s; } .animate-con { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .animate-con.active .animate { -webkit-animation: cd-sequence2 1s steps(23); -moz-animation: cd-sequence2 1s steps(23); animation: cd-sequence2 1s steps(23); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .animate-con .animate { width: 100%; height: 2400%; display: inline-block; -webkit-transform: translatey(0%); -moz-transform: translatey(0%); -ms-transform: translatey(0%); -o-transform: translatey(0%); transform: translatey(0%); background: no-repeat center; background-size: 100% 100%; } @-webkit-keyframes cd-sequence2 { 0% { /* translatex(-2%) is used to horizontally center the first frame inside the viewport */ -webkit-transform: translatey(0%); } 100% { /* translatex(-98%) (2% 96) is used to horizontally center the last frame inside the viewport */ -webkit-transform: translatey(-95.834%); } } @-moz-keyframes cd-sequence2 { 0% { /* translatex(-2%) is used to horizontally center the first frame inside the viewport */ -moz-transform: translatey(0%); } 100% { /* translatex(-98%) (2% 96) is used to horizontally center the last frame inside the viewport */ -moz-transform: translatey(-95.834%); } } @keyframes cd-sequence2 { 0% { /* translatex(-2%) is used to horizontally center the first frame inside the viewport */ -webkit-transform: translatey(0%); -moz-transform: translatey(0%); -ms-transform: translatey(0%); -o-transform: translatey(0%); transform: translatey(0%); } 100% { /* translatex(-98%) (2% 96) is used to horizontally center the last frame inside the viewport */ -webkit-transform: translatey(-95.834%); -moz-transform: translatey(-95.834%); -ms-transform: translatey(-95.834%); -o-transform: translatey(-95.834%); transform: translatey(-95.834%); } } .business { width: 100%; background: url(/uploads/image/adimg/business_all2.jpg) no-repeat center; background-attachment: fixed; } .business .b_t > div { position: relative; width: 50%; float: left; overflow: hidden; } .business .b_t > div img { width: 100%; height: 100%; } .business .b_t > div .text { width: 12.5rem; text-align: center; position: absolute; top: 30%; right: 10%; } .business .b_t > div .text h2 { font-size: 3rem; color: #fff; } .business .b_t > div .text p { font-size: 1.2rem; color: #fff; } .business .b_t > div .text .more { width: 8rem; margin: 0 auto; margin-top: 2rem; } .business .b_t > div .text .more .view { display: block; font-size: 1rem; color: #fff; position: relative; } .business .b_t > div .text .more .view:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; top: 1.7rem; left: 0; } .business .b_t > div .text .more .view:after { content: ""; width: 0; height: 1px; background: #fff; transform-origin: bottom right; transform: rotate(45deg); position: absolute; top: 1.7rem; right: 0; } .business .b_t > div:hover { cursor: pointer; } .business .b_t > div:hover .scare_img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .business .b_t > div:hover .more .view:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .business .b_t > div:hover .more .view:after { width: 0.5rem; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .business .b_m .bm_l { width: 33.33333333%; height: 0; padding-bottom: 16.6666667%; float: left; position: relative; overflow: hidden; } .business .b_m .bm_l .scare_img { width: 100%; } .business .b_m .bm_l .text { width: 15rem; position: absolute; top: 30%; left: 20%; } .business .b_m .bm_l .text i { font-size: 4rem; color: #fff; display: block; text-align: center; float: left; margin-right: 2rem; } .business .b_m .bm_l .text .t_r { float: left; position: relative; top: 0.7rem; } .business .b_m .bm_l .text .t_r h2 { font-size: 1.9rem; color: #fff; } .business .b_m .bm_l .text .t_r p { font-size: 1rem; color: #f4c117; } .business .b_m .bm_l:hover { cursor: pointer; } .business .b_m .bm_l:hover .scare_img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .business .b_m .bm_r { width: 16.6666667%; height: 0; padding-bottom: 16.6666667%; border-right: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; float: left; position: relative; } .business .b_m .bm_r .text { width: 100%; position: absolute; top: 15%; left: 0; } .business .b_m .bm_r .text .tubiao { display: block; font-size: 3.5rem; color: #fff; z-index: 9; position: relative; text-align: center; } .business .b_m .bm_r .text span { display: block; font-size: 1.25rem; color: #fff; z-index: 1; text-align: center; position: relative; } .business .b_m .bm_r .text .symbol { display: block; margin-top: 18%; text-align: center; font-size: 0.8rem; color: #fff; z-index: 9; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .business .b_m .bm_r .text .more { z-index: 9; margin: 0 auto; width: 8rem; text-align: center; opacity: 0; position: relative; top: -2rem; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .business .b_m .bm_r .text .more .view { font-size: 0.7rem; color: #fff; } .business .b_m .bm_r .text .more .view:before { content: ''; width: 0; height: 1px; background: #fff; position: absolute; bottom: -0.3rem; left: 0; } .business .b_m .bm_r .text .more .view:after { content: ''; width: 0; height: 1px; background: #fff; position: absolute; transform-origin: bottom right; transform: rotate(45deg); bottom: -0.3rem; right: 0; } .business .b_m .bm_r:after { content: ''; width: 100%; height: 0; background: #f4c117; position: absolute; top: 0; left: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .business .b_m .bm_r:hover { cursor: pointer; } .business .b_m .bm_r:hover:after { height: 100%; } .business .b_m .bm_r:hover .symbol { opacity: 0; } .business .b_m .bm_r:hover .more { opacity: 1; } .business .b_m .bm_r:hover .more .view:before { width: 100%; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .business .b_m .bm_r:hover .more .view:after { width: 0.5rem; transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .business .b_b > div { width: 50%; height: 0; padding-bottom: 18.6%; float: left; position: relative; overflow: hidden; } .business .b_b > div .scare_img { width: 100%; } .business .b_b > div .text { width: 10rem; position: absolute; top: 20%; right: 16%; } .business .b_b > div .text i { display: block; text-align: center; font-size: 4rem; color: #fff; } .business .b_b > div .text h2 { font-size: 1.9rem; color: #fff; text-align: center; } .business .b_b > div .text p { font-size: 1rem; color: #f4c117; text-align: center; } .business .b_b > div:hover { cursor: pointer; } .business .b_b > div:hover .scare_img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } @media screen and (max-width: 1680px) { .company .text .box { width: 36%; height: 36%; } } @media screen and (min-width: 769px) { .books { width: 100%; height: 100%; position: relative; color: #fff; } .books > img { width: 100%; height: 100%; } .books .background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .books .background .img { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; } .books .background .img.active { z-index: 1; } .books .background .img.active img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .books .background .img img { width: 100%; height: 100%; transition: all 5s; -webkit-transition: all 5s; -moz-transition: all 5s; -ms-transition: all 5s; } .books .book_content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; } .books .top { height: 50%; } .books .top .d1 { width: 75%; height: 100%; float: left; border-right: 1px solid rgba(255, 255, 255, 0.7); padding-top: 5.8rem; position: relative; } .books .top .d1 ul { width: 100%; height: 100%; } .books .top .d1 ul li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .books .top .d1 ul li.active { opacity: 1; z-index: 1; } .books .top .d1 ul li .d1_text { width: 100%; padding-top: 5.8rem; position: absolute; top: 0; left: 0; } .books .top .d1 ul li .d1_text h2 { color: #f4c117; font-size: 2.4rem; margin-bottom: 1.6rem; margin-left: 6%; } .books .top .d1 ul li .d1_text p { color: #ffffff; font-size: 1.2rem; margin-left: 6%; } .books .top .d1 ul li .d1_text img { width: 40%; position: absolute; right: 1.5rem; top: 6%; } .books .top .d1 ul li .d1_text .img_bg { right: 0.6rem; top: 24%; } .books .top .d2 { width: 25%; height: 100%; float: left; border-right: 1px solid rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.7); text-align: center; position: relative; cursor: pointer; } .books .top .d2 .iconfont { font-size: 5rem; } .books .top .d2 p { margin-top: -1rem; } .books .top .d2 .symbol { font-size: 2rem; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; } .books .top .d2 .more { opacity: 0; margin-top: -1.5rem; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; } .books .top .d2 .more .view { width: 7.1rem; display: block; font-size: 0.8rem; position: relative; margin: 0 auto; } .books .top .d2 .more .view:before { content: ''; width: 0; height: 1px; background: #ffffff; position: absolute; bottom: -0.2rem; left: 0; } .books .top .d2 .more .view:after { content: ''; width: 0; height: 1px; background: #fff; transform-origin: bottom right; transform: rotate(45deg); position: absolute; bottom: -0.2rem; right: 0px; } .books .top .d2 p { font-size: 1.2rem; line-height: 2rem; } .books .top .d2 .d2_child { width: 100%; height: 100%; position: absolute; top: 20%; left: 0; z-index: 9; } .books .top .d2:hover:before, .books .top .d2.active:before { opacity: 1; z-index: 1; } .books .top .d2:hover .symbol, .books .top .d2.active .symbol { opacity: 0; } .books .top .d2:hover .more, .books .top .d2.active .more { opacity: 1; } .books .top .d2:hover .more .view:before, .books .top .d2.active .more .view:before { width: 100%; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .books .top .d2:hover .more .view:after, .books .top .d2.active .more .view:after { width: 0.5rem; transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .books .top .d2:before { content: ''; position: absolute; width: 100%; height: 100%; background: #e5ba29; top: 0; left: 0; opacity: 0; transition: all 2s; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; } .books .mobile_content { display: none; } .news { width: 100%; height: 100%; background: url(/uploads/image/adimg/bg_flower.jpg) no-repeat bottom; background-size: 100%; } .news .news_top { height: 100%; text-align: center; position: relative; } .news .news_top h2 { font-family: times new roman; font-size: 7.5rem; color: #f2f2f3; } .news .news_top p { font-size: 1.6rem; color: #28468e; position: absolute; top: 6.5rem; left: 50%; margin-left: -3.2rem; } .news .news_middle { width: 100%; } .news .news_middle .news_content { width: 80%; margin: 0 auto; } .news .news_middle .news_content div { width: 31%; float: left; text-align: center; } .news .news_middle .news_content div .scale_img { width: 100%; height: 0; padding-bottom: 57%; overflow: hidden; } .news .news_middle .news_content div .scale_img img { width: 100%; } .news .news_middle .news_content div .bottom { width: 100%; height: 15rem; padding: 0 1rem; position: relative; } .news .news_middle .news_content div .bottom .date { font-size: 0.9rem; color: #28468e; margin-top: 1.5rem; margin-bottom: 0.5rem; } .news .news_middle .news_content div .bottom h4 { font-size: 1rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; } .news .news_middle .news_content div .bottom .content { font-size: 0.8rem; color: #6e6e6e; line-height: 1.3rem; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; position: absolute; top: 50%; } .news .news_middle .news_content div .bottom .symbol { display: inline-block; color: #f4c117; position: absolute; bottom: 4%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .news .news_middle .news_content div:hover { cursor: pointer; } .news .news_middle .news_content div:hover .symbol { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); } .news .news_middle .news_content div:hover .scale_img > img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .news .news_middle .news_content div:not(:last-child) { margin-right: 3%; } .news .news_bottom { width: 14.7rem; height: 3.25rem; background: #28468e; margin: 2rem auto 3rem; text-align: center; cursor: pointer; } .news .news_bottom .more { width: 8rem; margin: 0 auto; line-height: 3.25rem; } .news .news_bottom .more a { display: block; width: 100%; font-size: 0.8rem; color: #fff; position: relative; } .news .news_bottom .more a:before { content: ''; width: 0; height: 1px; background: #fff; position: absolute; bottom: 0.8rem; left: 0; } .news .news_bottom .more a:after { content: ''; width: 0; height: 1px; background: #fff; transform-origin: bottom right; transform: rotate(45deg); position: absolute; right: 0; bottom: 0.8rem; } .news .news_bottom:hover .more a:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .news .news_bottom:hover .more a:after { width: 0.8rem; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } } @media screen and (max-width: 1024px) { .banner .swiper-container-horizontal > .swiper-pagination { bottom: 12%; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text { right: 5%; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text h1 { font-size: 2.5rem; } .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { width: 18.8rem; } .company .text { padding-top: 4%; } .company .text h2 { font-size: 3rem; } .company .text .box { width: 36%; height: 36%; } .company .text .box div { padding-top: 14%; } .company .text .box div p { font-size: 1.6rem; } .books .top .d1 ul li .d1_text { padding-top: 4.8rem; } .books .top .d1 ul li .d1_text h2 { font-size: 2rem; } .books .top .d1 ul li .d1_text p { font-size: 1rem; } .books .top .d2 .d2_child { top: 12%; } .books .top .d2 .symbol { font-size: 1.6rem; } .books .top .d2 p { font-size: 1rem; } .business .b_t > div .text { top: 27%; } .business .b_t > div .text h2 { font-size: 2.2rem; } .business .b_t > div .text p { font-size: 1rem; } .business .b_t > div .text .more .view { font-size: 0.8rem; } .business .b_m .bm_l .bm_ll .text i { font-size: 3rem; } .business .b_m .bm_l .bm_ll .text .t_r h2 { font-size: 1.2rem; } .business .b_m .bm_l .bm_ll .text .t_r p { font-size: 0.8rem; } .business .b_m .bm_l .bm_lr .text .tubiao { font-size: 3rem; } .business .b_m .bm_l .bm_lr .text { top: 8%; } .business .b_m .bm_r > div .text { top: 8%; } .business .b_m .bm_l .bm_lr .text span { font-size: 1rem; } .business .b_m .bm_l .bm_lr .text .symbol { margin-top: 14%; } .business .b_m .bm_r > div .text .tubiao { font-size: 3rem; } .business .b_m .bm_r > div .text span { font-size: 1rem; } .business .b_m .bm_r > div .text .symbol { margin-top: 14%; } .business .b_b > div .text i { font-size: 3rem; } .business .b_b > div .text h2 { font-size: 1.2rem; } .business .b_b > div .text p { font-size: 0.8rem; } .company .text > p { width: 33%; } .company .text .box { width: 32%; height: 32%; } } @media screen and (max-width: 768px) { .banner .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { width: 8.8rem; } .banner .swiper-container-horizontal > .swiper-pagination { bottom: 10%; } .banner .swiper-container .swiper-wrapper .swiper-slide img.pc { display: none; } .banner .swiper-container .swiper-wrapper .swiper-slide img.mobile { display: block; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text { top: 46%; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text h1 { font-size: 24px; } .banner .swiper-container .swiper-wrapper .swiper-slide .banner_text p { font-size: 13px; } .company .bg_fixed img.pc { display: none; } .company .bg_fixed img.mobile { display: block; } .animate-con { display: none; } .company .text { padding-top: 9%; } .company .text h2 { font-size: 30px; } .company .text h3 { font-size: 18px; margin-top: 0; } .company .text p { width: 90%; font-size: 13px; line-height: 1.5; } .company .text .more { width: 8rem; margin-top: 9%; } .company .text .more span { font-size: 13px; } .company .text .more span:before { width: 100%; } .company .text .more span:after { width: 0.5rem; } .company .text .box { width: 100%; margin-left: 0; height: 6rem; } .company .text .box div { padding-top: 0; padding-left: 12%; } .company .text .box div p { float: left; width: auto; line-height: 6rem; font-size: 18px; } .company .text .box div.left { padding-left: 14.5%; } .books { width: 100%; height: 50rem; position: relative; overflow: hidden; } .books img { height: 100%; } .books .background { position: absolute; height: 40rem; top: 0; left: 0; z-index: 3; } .books .background .img { position: absolute; top: 0; left: 0; } .books .background .img img { height: 100%; } .books .background .img.active { z-index: 4; } .books .background .img.active img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .books .book_content { display: none; } .books .mobile_content { width: 100%; display: block; position: absolute; top: 0; left: 0; height: 50rem; z-index: 10; } .books .mobile_content .gallery-top { height: 44rem; } .books .mobile_content .gallery-top .swiper-slide { text-align: center; padding-top: 5rem; } .books .mobile_content .gallery-top .swiper-slide h2 { font-size: 20px; font-weight: bold; color: #f4c117; margin-bottom: 1rem; } .books .mobile_content .gallery-top .swiper-slide p { color: #fff; font-size: 13px; } .books .mobile_content .gallery-top .swiper-slide img { display: block; position: relative; width: 74%; margin: 0 auto; height: auto; margin-top: 2rem; } .books .mobile_content .gallery-top .swiper-slide img.img_bg { position: absolute; bottom: 10%; left: 0; } .books .mobile_content .gallery-top .swiper-slide .more { opacity: 0; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; } .books .mobile_content .gallery-top .swiper-slide .more .view { width: 9rem; display: block; font-size: 13px; position: relative; margin: 0 auto; color: #fff; } .books .mobile_content .gallery-top .swiper-slide .more .view:before { content: ''; width: 0; height: 1px; background: #ffffff; position: absolute; bottom: -0.2rem; left: 0; } .books .mobile_content .gallery-top .swiper-slide .more .view:after { content: ''; width: 0; height: 1px; background: #fff; transform-origin: bottom right; transform: rotate(45deg); position: absolute; bottom: -0.2rem; right: 0px; } .books .mobile_content .gallery-top .swiper-slide .more.active { opacity: 1; } .books .mobile_content .gallery-top .swiper-slide .more.active .view:before { width: 100%; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .books .mobile_content .gallery-top .swiper-slide .more.active .view:after { width: 0.5rem; transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .books .mobile_content .gallery-thumbs { height: 6rem; border-top: 1px solid rgba(255, 255, 255, 0.3); } .books .mobile_content .gallery-thumbs .swiper-slide { text-align: center; } .books .mobile_content .gallery-thumbs .swiper-slide i { color: #fff; font-size: 44px; line-height: 6rem; } .books .mobile_content .gallery-thumbs .swiper-slide.active { background: #f4c117; } .books .mobile_content .swiper-button-next, .books .mobile_content .swiper-button-prev { top: 56%; } .news { width: 88%; margin: 0 auto; margin-top: 2rem; } .news .news_top { text-align: center; margin-bottom: 2rem; } .news .news_top h2 { font-size: 46px; color: #f2f2f3; font-family: "times new roman"; } .news .news_top p { margin-left: 0 !important; font-size: 24px; font-weight: bold; color: #28468e; margin-top: -3rem; } .news .news_middle .news_content div { text-align: center; } .news .news_middle .news_content div .scale_img { width: 100%; height: 0; padding-bottom: 57%; overflow: hidden; } .news .news_middle .news_content div .scale_img img { width: 100%; } .news .news_middle .news_content div .bottom { width: 100%; height: 19rem; padding: 0 1rem; position: relative; } .news .news_middle .news_content div .bottom .date { font-size: 12px; color: #28468e; margin-top: 1.5rem; margin-bottom: 0.5rem; } .news .news_middle .news_content div .bottom h4 { font-size: 15px; font-weight: bold; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; } .news .news_middle .news_content div .bottom .content { margin-top: 2rem; text-align: center; font-size: 13px; color: #6e6e6e; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; } .news .news_middle .news_content div .bottom .symbol { display: none; } .news .news_bottom { width: 90%; height: 3.6rem; background: #28468e; margin: 2rem auto 4rem !important; text-align: center; cursor: pointer; } .news .news_bottom .more { width: 8rem; margin: 0 auto; line-height: 3.25rem; } .news .news_bottom .more a { display: block; width: 100%; font-size: 13px; color: #fff; position: relative; } .news .news_bottom .more a:before { content: ''; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0.6rem; left: 0; } .news .news_bottom .more a:after { content: ''; width: 0.8rem; height: 1px; background: #fff; transform-origin: bottom right; transform: rotate(45deg); position: absolute; right: 0; bottom: 0.6rem; } .news .swiper-pagination-bullet { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .news .swiper-pagination-bullet-active { background: #f4c117; width: 26px; border-radius: 20px; } .business { background: #fff; } .business .b_t > div { height: 15rem; } .business .b_t > div .text { top: 50%; } .business .b_t > div .text h2 { font-size: 20px; } .business .b_t > div .text p { display: none; } .business .b_t > div .text .more { margin-top: 0.6rem; } .business .b_t > div .text .more .view { font-size: 12px; } .business .b_t > div .text .more .view:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .business .b_t > div .text .more .view:after { width: 0.5rem; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .business .b_m .bm_l { width: 100%; height: 15rem; } .business .b_m .bm_l .text { left: 26%; } .business .b_m .bm_l .text .t_r h2 { font-size: 20px; } .business .b_m .bm_l .text .t_r p { font-size: 12px; margin-top: 0.2rem; } .business .b_m .bm_r { width: 50%; height: 7.5rem; } .business .b_m .bm_r .text { padding-left: 20%; top: 19%; } .business .b_m .bm_r .text .tubiao { color: #eec233; float: left; font-size: 3rem; } .business .b_m .bm_r .text span { color: #666; float: left; font-size: 14px; position: relative; top: 1.5rem; margin-left: 1.5rem; } .business .b_m .bm_r:nth-child(2) { border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; } .business .b_m .bm_r:nth-child(3) { border-bottom: 1px solid #e7e7e7; } .business .b_m .bm_r:nth-child(4) { border-right: 1px solid #e7e7e7; } .business .b_b > div { width: 100%; height: 15rem; padding-bottom: 0; } .business .b_b > div .scare_img { height: 100%; width: auto; } .business .b_b > div .text { right: 13%; } .business .b_b > div .text h2 { font-size: 16px; } .business .b_b > div .text p { font-size: 12px; } .business .b_b > div:first-child .scare_img { margin-left: -4rem; } } /*# sourcemappingurl=index.css.map */