/* 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;
}
}