#indexswiper { position: relative; width: 100vw; height: 100vh; } #indexswiper #indexswiperpag { width: auto; left: auto; right: 6%; } @media (max-width: 600px) { #indexswiper #indexswiperpag { display: none; } } #indexswiper #indexswiperpag > .swiper-pagination-bullet { opacity: 1; width: 8px; height: 8px; border-radius: 4px; background: #d1d1d1; margin: 24px 0; } #indexswiper #indexswiperpag > .swiper-pagination-bullet-active { position: relative; background: #159990; } #indexswiper #indexswiperpag > .swiper-pagination-bullet-active::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid #159990; border-radius: 50%; } .banner_swiper_box { position: relative; } #indexbannerswiper { width: 100%; } #indexbannerswiper .swiper-button-prev, #indexbannerswiper .swiper-button-next { position: absolute; top: 50%; width: 52px; height: 52px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.3s; } @media (max-width: 600px) { #indexbannerswiper .swiper-button-prev, #indexbannerswiper .swiper-button-next { display: none; } } #indexbannerswiper .swiper-button-prev { background-image: url(/uploads/image/mimage/btn_prev.png); left: 10%; } #indexbannerswiper .swiper-button-prev:hover { background-image: url(/uploads/image/mimage/btn_prev_cur.png); } #indexbannerswiper .swiper-button-next { background-image: url(/uploads/image/mimage/btn_next.png); right: 10%; } #indexbannerswiper .swiper-button-next:hover { background-image: url(/uploads/image/mimage/btn_next_cur.png); } .banner_box { height: 100vh; } .banner_box .banner_img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; } .banner_box .inner { position: relative; height: 100%; } .banner_box .banner_text_box { position: absolute; top: 30%; left: 0; } .banner_box .banner_text_box img { max-width: 100%; } .mousewheel { position: absolute; left: 50%; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); -moz-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); z-index: 99; width: 22px; height: 44px; bottom: 50px; } @keyframes topbots { 0% { transform: translatey(-15px); } 50% { transform: translatey(0px); } 100% { transform: translatey(-15px); } } .topbots { animation: topbots 1.2s ease-in-out infinite both; } .index_img_text { position: relative; height: 100vh; } .index_img_text .text_box { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } .index_img_text .text_box .inner { display: flex; flex-wrap: wrap; } .index_img_text .text_box .card { width: 25%; transition: all 0.3s; background: transparent; } .index_img_text .text_box .card a { display: block; width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding: 100px 40px; } @media (max-width: 600px) { .index_img_text .text_box .card { width: 50%; } .index_img_text .text_box .card a { padding: 40px; } } .index_img_text .text_box .card h3 { font-size: 36px; font-weight: 400; color: #fff; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin-bottom: 20px; } .index_img_text .text_box .card p { font-size: 16px; font-weight: 400; color: #fff; line-height: 32px; text-align: justify; height: 140px; } @media (max-width: 600px) { .index_img_text .text_box .card p { height: 150px; margin-bottom: 20px; } } .index_img_text .text_box .card i { display: inline-block; width: 26px; height: 26px; background: url(/uploads/image/mimage/icon_arrow.png); background-size: contain; } .index_img_text .text_box .card.cur.card_green { background: rgba(31, 237, 223, 0.7); } .index_img_text .text_box .card.cur.card_blue { background: rgba(20, 130, 255, 0.6); } .index_img_text .text_box .card.cur.card_skyblue { background: rgba(0, 174, 255, 0.7); } .index_img_text .text_box .card.cur.card_orange { background: rgba(255, 135, 15, 0.7); } .index_img_text .img_box { width: 100%; height: 100%; position: relative; } .index_img_text .img_box img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; opacity: 0; } .index_img_text .img_box img.cur { opacity: 1; } .news_center { height: 100vh; background: url(/uploads/image/mimage/index_news_bg.png); background-size: 100% 100%; padding-top: 110px; padding-bottom: 100px; } @media (max-width: 600px) { .news_center { height: auto; padding-bottom: 40px; } } .news_center .back_shadow_title_more { position: relative; height: 70px; margin-bottom: 30px; } .news_center .back_shadow_title_more i { position: absolute; top: 0; left: -20px; display: inline-block; width: 60px; height: 60px; background: url(/uploads/image/mimage/index_title_bg.png) no-repeat; } @media (max-width: 600px) { .news_center .back_shadow_title_more i { left: -10px; } } .news_center .back_shadow_title_more .en_name, .news_center .back_shadow_title_more .cn_name { width: 100%; text-align: left; line-height: 1; position: absolute; } .news_center .back_shadow_title_more .en_name { z-index: 1; top: 0; font-size: 80px; color: #f7f7f7; padding-left: 50px; } .news_center .back_shadow_title_more .cn_name { z-index: 2; bottom: 0; font-size: 38px; color: #222222; } .news_center .back_shadow_title_more .more { position: absolute; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); right: 0; z-index: 3; display: inline-block; width: 26px; height: 26px; background: url(/uploads/image/mimage/icon_arrow1_b.png); background-size: contain; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } .news_center .back_shadow_title_more .more:hover { opacity: 0.7; } @media (max-width: 600px) { .news_center .back_shadow_title_more .en_name { font-size: 60px; } } .news_center .tab { display: flex; align-items: center; margin-bottom: 30px; height: 35px; } .news_center .tab li { position: relative; } .news_center .tab li a { transition: all 0.3s; font-size: 20px; font-weight: 400; color: #666666; } @media (max-width: 600px) { .news_center .tab li a { font-size: 18px; } } .news_center .tab li.cur::after, .news_center .tab li:hover::after { content: ''; position: absolute; top: 50%; transform: translatey(-50%); right: -20px; width: 10px; height: 15px; background: url(/uploads/image/mimage/icon_arrow2.png) no-repeat center; background-size: contain; } .news_center .tab li.cur a, .news_center .tab li:hover a { font-size: 24px; color: #222222; } @media (max-width: 600px) { .news_center .tab li.cur a, .news_center .tab li:hover a { font-size: 22px; } } .news_center .tab li li { margin-left: 70px; } @media (max-width: 600px) { .news_center .tab li li { margin-left: 30px; } } #swiper1 { width: 100%; } @media (max-width: 600px) { #swiper1 { height: auto; } } #swiper1 .swiper-pagination { width: auto; left: auto; right: 0; bottom: 26px; } #swiper1 .swiper-pagination-bullet { opacity: 1; width: 8px; height: 8px; border-radius: 4px; background: rgba(207, 207, 207, 0.5); } #swiper1 .swiper-pagination-bullet-active { width: 24px; height: 8px; background: #339c95; } .img_mask_box { box-sizing: border-box; position: relative; } .img_mask_box a { position: relative; display: block; } .img_mask_box .img_box { height: 374px; overflow: hidden; position: relative; } .img_mask_box .img_box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; } .img_mask_box .img_box .img_info { position: absolute; bottom: 0; left: 0; right: 0; height: 125px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); display: flex; align-items: end; padding: 25px; font-size: 16px; font-weight: 400; color: #fff; } .img_mask_box .img_box .img_info span:nth-child(2) { opacity: 0.5; margin-left: 5px; } .img_mask_box .mask_title { border-bottom: 1px solid #eaeaea; } .img_mask_box .mask_title h3 { box-sizing: border-box; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 70%; height: 70px; line-height: 70px; font-size: 18px; font-weight: normal; color: #333; transition: all 0.3s; } .img_mask_box a:hover .img_box img { transform: scale(1.05); } .img_mask_box a:hover .mask_title h3 { color: #339c95; } .list_date3 li { transition: all 0.3s; } .list_date3 li a { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 13px 0px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; } .list_date3 li .left { position: relative; width: 108px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; padding-left: 20px; } .list_date3 li .left b { font-size: 22px; font-weight: normal; color: #666666; transition: all 0.3s; } .list_date3 li .left span { font-size: 14px; font-weight: normal; color: #666666; transition: all 0.3s; } .list_date3 li .left::after { content: ''; position: absolute; top: 50%; transform: translatey(-50%); right: 0px; width: 1px; height: 43px; background: #d9d9d9; transition: all 0.3s; } .list_date3 li .right { width: calc(100% - 108px); padding: 0 25px; } .list_date3 li .right h6 { transition: all 0.3s; width: 100%; text-align: left; font-size: 16px; font-weight: normal; color: #666666; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; line-height: 50px; } .list_date3 li:hover { background: #ffffff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09); } .list_date3 li:hover .left b, .list_date3 li:hover .left span { color: #159990; } .list_date3 li:hover .left::after { background-color: #159990; } .list_date3 li:hover .right h6 { color: #333333; } .item_box_img { margin-top: 30px; box-sizing: border-box; margin-left: -17px; margin-right: -17px; } .item_box_img::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .item_box_img > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 33.333%; padding-left: 17px; padding-right: 17px; float: left; } .item_box_img > li:nth-child(n) { margin-top: 0; } .item_box_img > li:nth-child(n 3) { margin-top: 35px; } .item_box_img > li:nth-child(3) { margin-top: 0; } .item_box_img a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 600px) { .item_box_img { margin-left: -17px; margin-right: -17px; } .item_box_img::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .item_box_img > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-left: 17px; padding-right: 17px; float: left; } .item_box_img > li:nth-child(n) { margin-top: 0; } .item_box_img > li:nth-child(n 1) { margin-top: 35px; } .item_box_img > li:nth-child(1) { margin-top: 0; } .item_box_img a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } .item_box_img li a { display: block; box-sizing: border-box; } .item_box_img li a .img { box-sizing: border-box; width: 100%; height: 112px; overflow: hidden; } .item_box_img li a img { transition: all 0.3s; object-fit: cover; width: 100%; height: 100%; } .item_box_img li:hover img { transform: scale(1.05); } .sidenav { z-index: 99; position: fixed; right: 10px; bottom: 10%; width: 50px; height: 172px; border-radius: 25px; background: #ffffff; border: 1px solid #159990; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .sidenav li { transition: all 0.3s; cursor: pointer; width: 100%; height: 25%; border-radius: 50%; position: relative; } .sidenav li i { transition: all 0.3s; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-image: url(/uploads/image/mimage/sidenav_icons.png); } .sidenav li i.s1 { background-position: 7px 10px; } .sidenav li i.s2 { background-position: 7px -29px; } .sidenav li i.s3 { background-position: 7px -68px; } .sidenav li i.s4 { background-position: 7px -107px; } .sidenav li .sidenav_popup { position: absolute; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); left: -155px; width: 139px; height: 176px; background: url(/uploads/image/mimage/bg_popup.png) no-repeat center; background-size: 100% 100%; padding: 9px 18px 19px 9px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; display: none; } .sidenav li .sidenav_popup img { width: 100%; } .sidenav li .sidenav_popup p { font-size: 16px; font-weight: 400; letter-spacing: 0px; line-height: 22px; color: #666666; text-align: center; } .sidenav li:hover { background-color: #54d1c7; } .sidenav li:hover i { background-image: url(/uploads/image/mimage/sidenav_icons_cur.png); } .sidenav li:hover .sidenav_popup { display: flex; } .rmhd_gg_box { z-index: 99; position: fixed !important; left: 10px; bottom: 10%; } .rmhd_gg_box .rmhd_gg { display: flex; flex-direction: column; align-items: center; width: 130px; padding: 10px; background-color: rgba(255, 255, 255, 0.2); } .rmhd_gg_box .rmhd_gg img { width: 100%; } .rmhd_gg_box .rmhd_gg p { margin-top: 10px; font-size: 16px; font-weight: normal; color: #fff; line-height: 22px; } .rmhd_gg_box .close_btn { display: inline-block; width: 24px; height: 24px; background: url(/uploads/image/mimage/icon_close.png); background-size: contain; }