/* banner_swiper */ html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } /* banner */ .swiper { width: 100%; height: 100%; } .banner { position: relative !important; width: 100%; height: 9.44rem !important; margin: 0 auto; background: #004282; } .banner .banner_img { width: 100%; height: 100%; } .banner .banner_tips { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } .banner .banner_tips .font_tip { white-space: nowrap; font-size: 0.5rem; font-family: Microsoft YaHei; font-weight: bold; color: #004282; text-shadow: 0rem 0rem 0rem rgba(255,255,255,0.78); } .banner .banner_tips .icon_tip { width: 1.6rem; height: 0.48rem; margin-top: 1.12rem; background: #004282; border-radius: 0.24rem; display: flex; align-items: center; justify-content: center; } .banner .banner_tips .sp { margin-right: 0.11rem; font-size: 0.14rem; font-family: Microsoft YaHei; color: #FFFFFF; } .banner .banner_tips .icon_arrow { width: 0.35rem; height: 0.05rem; } /* 鑷畾涔塻wiper绠ご */ .banner .swiper-button-prev::after { display: none; } .banner .swiper-button-next::after { display: none; } .banner .banner_left { position: absolute; /*left: 17.15rem;*/ left: auto; right: 1.59rem; top: 4.45rem; width: 0.47rem; height: 0.47rem; } .banner .banner_left img { width: 100%; height: 100%; } .banner .banner_right { position: absolute; right: 1.59rem; top: 5.2rem; width: 0.47rem; height: 0.47rem; } .banner .banner_right img { width: 100%; height: 100%; } /* 鍚戜笅婊戝姩锛屾煡鐪嬫洿澶 */ .banner .to_down { position: absolute; left: 50%; bottom: 0.6rem; display: flex; align-items: center; transform: translateX(-50%); z-index: 11; } .banner .to_down .down_more { font-size: 0.16rem; font-family: Microsoft YaHei; color: #FFFFFF; } .banner .to_down .down_img { width: 0.47rem; height: 0.47rem; margin: 0 0.2rem 0 0.2rem; } /* product center */ .products { position: relative; width: 100%; height: 9rem; margin: 0 auto; background-image: url("../images/index/index_bgc2.png"); background-size: cover; } .pro_center { width: 16rem; height: 100%; margin: 0 auto; padding-top: 0.9rem; } /* 涓婂崐閮ㄥ垎 */ .products .title_more { display: flex; justify-content: space-between; } .products .english { /* margin-top: 0.04rem; */ font-size: 0.52rem; font-family: Microsoft YaHei; font-weight: bold; color: #004282; } .products .chinese { /* margin-top: 0.2rem; */ font-size: 0.38rem; font-family: Microsoft YaHei; color: #222222; } .products .short_line { width: 1.17rem; height: 0.15rem; background: #004282; } /* look more */ .products .more { width: 1.6rem; height: 0.48rem; background: #004282; border-radius: 0.24rem; display: flex; align-items: center; justify-content: center; } .products .more .font_more { margin-right: 0.11rem; font-size: 0.14rem; font-family: Microsoft YaHei; color: #FFFFFF; } .products .more .more_arrow { width: 0.35rem; height: 0.05rem; } /* 涓嬪崐閮ㄥ垎 */ .products .pro_box { width: 100%; margin-top: 0.82rem; display: flex; } .products .pro_box .pro_item { width: 3.7rem; height: 5.24rem; margin-right: 0.41rem; background: #FFFFFF; border: 0px solid #004282; display: flex; flex-direction: column; align-items: center; } .products .pro_box .pro_item:last-child { margin-right: 0; } .products .pro_item:nth-child(1) .pro_img { width: 3.55rem; height: 3.07rem; margin-top: 0.28rem; margin-bottom: 0.22rem; } .products .pro_item:nth-child(2) .pro_img { width: 3.7rem; height: 2.31rem; margin-top: 0.66rem; margin-bottom: 0.6rem; } .products .pro_item:nth-child(3) .pro_img { width: 2.49rem; height: 3.03rem; margin-top: 0.32rem; margin-bottom: 0.22rem; } .products .pro_item:nth-child(4) .pro_img { width: 2.96rem; height: 2.88rem; margin-top: 0.32rem; margin-bottom: 0.37rem; } .products .pro_box .pro_img img { width: 100%; height: 100%; } .products .pro_box .pro_name { font-size: 0.28rem; font-family: Microsoft YaHei; font-weight: bold; color: #222222; } .products .pro_box .eng_name { font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; color: #888888; } .products .pro_box .to_more { width: 1.38rem; height: 0.46rem; margin-top: 0.29rem; background: #DBDBDB; border-radius: 0.23rem; display: flex; align-items: center; justify-content: center; } .products .pro_box .to_more .more_arrow { width: 0.51rem; height: 0.05rem; } /* item鐨刪over */ .products .pro_item:hover .pro_name { color: #004282; } .products .pro_item:hover .eng_name { color: #004282; } .products .pro_item:hover .to_more { background: #004282; } /* applications */ .applications { position: relative; width: 100%; /*height: 12.18rem;*/ margin: 0 auto; background-color: #fff; } .app_center { width: 16rem; height: 100%; margin: 0 auto; padding-top: 1.01rem; } /* 鏍囬 */ .applications .title_more { display: flex; align-items: center; justify-content: space-between; } .applications .english { font-size: 0.52rem; font-family: Microsoft YaHei; font-weight: bold; color: #004282; } .applications .chinese { font-size: 0.38rem; font-family: Microsoft YaHei; color: #222222; } .applications .short_line { width: 1.17rem; height: 0.15rem; background: #004282; } .applications .app_btns { display: flex; } .applications .app_btns .switch_btn { width: 1.6rem; height: 0.48rem; margin-left: 0.12rem; background: #F5F5F5; border: 0px solid #E5E5E5; border-radius: 0.24rem; font-size: 0.14rem; font-family: Microsoft YaHei; color: #222222; text-align: center; line-height: 0.48rem; } .applications .app_btns .switch_btn:hover { cursor: pointer; } .applications .app_btns .switch_active { background: #004282; color: #fff; } /* 妗堜緥 */ .applications .case_box { width: 100%; margin-top: 0.8rem; } .applications .case_box .case_up { display: flex; } .applications .case_box .case1 { position: relative; width: 10.64rem; height: 5rem; margin-right: 0.1rem; } .applications .case_box .case2 { position: relative; width: 5.26rem; height: 5rem; } .applications .case_box .case_name { position: absolute; left: 0.3rem; bottom: 0.3rem; font-size: 0.26rem; font-family: Microsoft YaHei; color: #FFFFFF; z-index: 11; } .applications .case_box .img { width: 100%; height: 100%; } .applications .case_box .case_down { width: 100%; margin-top: 0.1rem; display: flex; } .applications .case_box .case3 { position: relative; margin-right: 0.1rem; width: 33.32%; } .applications .case_box .case3:last-child { margin-right: 0; } /*钂欑増*/ .app_mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 222; display: none; } .app_mask .mask-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; object-fit: contain; } /*鎹㈡垚瑙嗛鐨勬牱寮?/ .applications .case_box .vid_box { margin-bottom: 0.1rem; font-size: 0.26rem; font-family: Microsoft YaHei; text-align: center; } .applications .case_box .tv_up { width: 49%; } .applications .case_box .tv_up:first-child { margin-right: 2%; } .applications .case_box .vid_box .vid_ii { width: 100%; height: 4.5rem; } .applications .case_box .vid_box .vid_i { width: 100%; height: 3.5rem; } /* news center */ .news { position: relative; width: 100%; height: 10.59rem; margin: 0 auto; background-image: url("../images/index/index_news_bgc.png"); background-size: cover; } .news_center { width: 16rem; height: 100%; margin: 0 auto; padding-top: 1.01rem; } /* 鏍囬 */ .news .title_more { display: flex; align-items: center; justify-content: space-between; } .news .english { font-size: 0.52rem; font-family: Microsoft YaHei; font-weight: bold; color: #004282; } .news .chinese { font-size: 0.38rem; font-family: Microsoft YaHei; color: #222222; } .news .short_line { width: 1.17rem; height: 0.15rem; background: #004282; } .news .new_btns { display: flex; } .news .new_btns .switch_btn { width: 1.6rem; height: 0.48rem; margin-left: 0.12rem; background: #F5F5F5; border: 0px solid #E5E5E5; border-radius: 0.24rem; font-size: 0.14rem; font-family: Microsoft YaHei; color: #222222; text-align: center; line-height: 0.48rem; } .news .new_btns .switch_btn:hover { cursor: pointer; background: #004282; color: #fff; } /*.news .new_btns .switch_active {*/ /* background: #004282;*/ /* color: #fff;*/ /*}*/ /* 鏂伴椈s */ .news .news_box { width: 100%; margin-top: 0.8rem; display: flex; } /* 宸︿晶鏂伴椈 */ .news .news_box .left_new { width: 8.22rem; margin-right: 0.34rem; } .news .news_box .new_pic { width: 8.22rem; height: 5.15rem; } .news .news_box .new_pic img { width: 100%; height: 100%; } .news .news_box .new_info { width: 100%; margin-top: 0.29rem; } .news .news_box .new_info .title { font-size: 0.24rem; font-family: Microsoft YaHei; color: #004282; } .news .news_box .new_info .explain { width: 7.68rem; margin-top: 0.23rem; font-size: 0.16rem; font-family: Microsoft YaHei; color: #888888; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news .news_box .new_info .look_detail { width: 100%; margin-top: 0.29rem; display: flex; align-items: center; } .news .news_box .new_info .gray_line { flex: 1; height: 0.01rem; background: #E5E5E5; } .news .news_box .new_info .gray_font { margin-left: 0.2rem; white-space: nowrap; font-size: 0.16rem; font-family: Microsoft YaHei; color: #888888; } .news .news_box .new_info .icon_arrow { width: 0.35rem; height: 0.05rem; margin-left: 0.1rem; } /* 鍙充晶鏂伴椈 */ .news .news_box .right_news { width: 7.42rem; } .news .news_box .right_news .new_item { width: 7.42rem; height: 1.63rem; margin-bottom: 0.13rem; padding: 0.35rem 0.5rem 0.3rem 0.3rem; background: #F1F1F1; display: flex; } .news .news_box .right_news .new_item:hover { background: #c4c3c3; } .news .news_box .right_news .left_date { margin-right: 0.4rem; } .news .news_box .right_news .month { padding-bottom: 0.15rem; font-size: 0.32rem; font-family: Microsoft YaHei; color: #888888; border-bottom: 0.01rem solid #BFBFBF; } .news .news_box .right_news .year { margin-top: 0.15rem; font-size: 0.16rem; font-family: Microsoft YaHei; color: #888888; } .news .news_box .right_news .item_title { width: 100%; font-size: 0.22rem; font-family: Microsoft YaHei; color: #222222; } .news .news_box .right_news .item_explain { width: 5.27rem; margin-top: 0.25rem; font-size: 0.16rem; font-family: Microsoft YaHei; color: #888888; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* about us */ .about_us { width: 100%; /*height: 7.79rem;*/ margin: 0 auto; display: flex; background-image: url("../images/index/about_us_bgc.png"); background-size: contain; } .about_us .about_center { display: flex; margin: 0 auto; align-items: center; } .about_us .left_usinfo { width: 9.6rem; /*height: 7.79rem;*/ padding: 0.8rem 0.8rem 1.14rem 1.59rem; } /* 鏍囬 */ /* .about_us .title_more { } */ .about_us .english { font-size: 0.52rem; font-family: Microsoft YaHei; font-weight: bold; color: #004282; } .about_us .chinese { font-size: 0.38rem; font-family: Microsoft YaHei; color: #222222; } .about_us .short_line { width: 1.17rem; height: 0.15rem; background: #004282; } /* company info */ .about_us .infos { width: 100%; margin-top: 0.64rem; } .about_us .infos .info_title { font-size: 0.28rem; font-family: Microsoft YaHei; color: #222222; } .about_us .infos .words { margin-top: 0.34rem; font-size: 0.16rem; font-family: Microsoft YaHei; color: #888888; } .about_us .infos .two_btn { width: 100%; margin-top: 0.7rem; display: flex; align-items: center; } .about_us .infos .btn { width: 1.5rem; height: 0.46rem; margin-right: 0.1rem; border: 0.01rem solid #004282; text-align: center; line-height: 0.46rem; font-size: 0.16rem; font-family: Microsoft YaHei; color: #2179CE; } .about_us .infos .btn:hover { cursor: pointer; background-color: #004282; color: #fff; } .about_us .infos .btn:last-child { margin-right: 0; } .about_us .more { width: 1.6rem; height: 0.48rem; margin-top: 0.6rem; background: #FFFFFF; border-radius: 0.24rem; display: flex; align-items: center; justify-content: center; } .about_us .more .font_span { margin-right: 0.11rem; font-size: 0.14rem; font-family: Microsoft YaHei; color: #888888; } .about_us .more .more_icon { width: 0.35rem; height: 0.05rem; } .about_us .about_img { width: 7.59rem; /*height: 7.79rem;*/ } .about_us .img_pic { width: 100%; /*height: 100%;*/ border-radius: 0.1rem; } @media only screen and (max-width: 1024px) { .banner { margin-top: 50px; height: auto !important; } .banner_left { display: none; } .banner_right { display: none; } .banner .banner_tips { top: 41%; } .banner .banner_tips .font_tip { font-size: 16px; } .banner .banner_tips .icon_tip { display: none; } .banner .to_down { bottom: 0.2rem; } .banner .to_down .down_img { width: 0.35rem; height: 0.35rem; margin: 0 0.1rem; } .banner .to_down .down_more { font-size: 12px; } /*products*/ .products { height: auto; } .pro_center { width: 100%; padding: 0.4rem 15px; } .products .english { font-size: 14px; } .products .chinese { font-size: 14px; } .products .short_line { width: 0.5rem; height: 0.05rem; } .products .more { display: none; } .products .pro_box { margin-top: 0.3rem; flex-wrap: wrap; justify-content: space-between; } .products .pro_box .pro_item { width: 48%; height: 4.2rem; margin-right: 0; padding-bottom: 0.3rem; margin-bottom: 10px; border: none; } .products .pro_item .pro_img { width: 100% !important; height: auto !important; } .products .pro_box .pro_img img { object-fit: contain; } .products .pro_box .pro_name { font-size: 14px; } .products .pro_box .eng_name { font-size: 12px; transform: scale(0.8); white-space: nowrap; } .products .pro_box .to_more { display: none; } /*applications*/ .applications { height: auto; } .app_center { width: 100%; padding: 0.4rem 15px; } .applications .english { font-size: 14px; } .applications .chinese { font-size: 14px; } .applications .short_line { width: 0.5rem; height: 0.05rem; } .applications .app_btns { display: none; } .applications .case_box { margin-top: 0.3rem; } .applications .case_box .case1 { flex: 2; height: 4rem; margin-right: 0; } .applications .case_box .case1 img { width: 100%; height: 100%; /*object-fit: contain;*/ } .applications .case_box .case2 { flex: 1; height: auto; display: none; } .applications .case_box .case2 img { width: 100%; height: 100%; object-fit: cover; } .applications .case_box .case_name { display: block; width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; left: 0.2rem; bottom: 0.2rem; } /*鏂伴椈涓績*/ .news { height: auto; } .news_center { width: 100%; padding: 0.4rem 15px; } .news .english { font-size: 14px; } .news .chinese { font-size: 14px; } .news .short_line { width: 0.5rem; height: 0.05rem; } .news .new_btns { display: none; } .news .news_box { display: block; margin-top: 0.3rem; } .news .news_box .left_new { width: 100%; margin-right: 0; display: flex; padding: 0.2rem 0; margin-bottom: 0.13rem; background-color: #F1F1F1; } .news .news_box .new_pic { width: 1.8rem; height: 1.3rem; } .news .news_box .new_info { flex: 1; margin-top: 0; margin-left: 0.2rem; display: flex; flex-direction: column; justify-content: space-between; } .news .news_box .new_info .title { font-size: 14px; font-weight: bold; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .news .news_box .new_info .explain { width: 100%; margin-top: 0; font-size: 12px; } .news .news_box .new_info .look_detail { display: none; } .news .news_box .right_news { width: 100%; } .news .news_box .right_news .new_item { width: 100%; height: auto; padding: 15px 0; align-items: center; justify-content: space-between; } .news .news_box .right_news .left_date { width: 1.5rem; margin-left: 0.3rem; text-align: center; } .news .news_box .right_news .right_info { width: 100%; display: flex; flex-direction: column; justify-content: space-between; } .news .news_box .right_news .item_title { font-size: 14px; font-weight: bold; } .news .news_box .right_news .item_explain { width: 100%; margin-top: 0.1rem; font-size: 12px; } /*鍏充簬鎯婂ぉ*/ .about_us { height: auto; } .about_us .about_center { display: block; width: 100%; padding: 0.4rem 15px; } .about_us .left_usinfo { width: 100%; padding: 0; } .about_us .english { font-size: 14px; } .about_us .chinese { font-size: 14px; } .about_us .short_line { width: 0.5rem; height: 0.05rem; } .about_us .infos { margin-top: 0.3rem; } .about_us .infos .info_title { font-size: 14px; } .about_us .infos .words { margin-top: 0.2rem; font-size: 12px; line-height: 1.5 !important; text-indent: 2em; } .about_us .infos .two_btn { margin-top: 0.3rem; } .about_us .more { display: none; } .about_us .about_img { width: 100%; margin-top: 0.3rem; } }