.navs{ width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0.6rem 0.3rem 0 0.3rem; } .headline{ text-align: center; margin-bottom: 0.5rem; } .Englname { font-size: 0.4rem; font-family: Source Han Sans CN; color: #B0B0B0; opacity: 0.17; margin: 0; line-height: 0.32rem; } .Chinname { font-size: 0.44rem; font-weight: 800; color: #003F80; margin-top: -0.1rem; line-height: 0.32rem; margin-bottom: 0; display: block; } .type-box { margin-top: 1rem; } .type-box .row { width: 100%; } .type-box .row .item { box-sizing: border-box; float: left; padding: 0.2rem; height: 2rem; position: relative; overflow: hidden; } .row-1 .item-1 { width: 66.66666666%; background: url(../img/txt1.png) no-repeat center; background-size: cover; } .row-1 .item-2 { width: 33.33333333%; background: url(../img/txt2.png) no-repeat center; background-size: cover; } .row-2 .item-3 { width: 33.33333333%; background: url(../img/txt3.png) no-repeat center; background-size: cover; } .row-2 .item-4 { width: 66.66666666%; background: url(../img/txt4.png) no-repeat center; background-size: cover; } .row-3 .item-5 { width: 66.66666666%; background: url(../img/txt5.png) no-repeat center; background-size: cover; } .row-3 .item-6 { width: 33.33333333%; background: url(../img/txt6.png) no-repeat center; background-size: cover; } .row-1 .item-1 .mask-bg { background: rgba(0,82,217,1); } .row-1 .item-2 .mask-bg { background: #9B26B6; } .row-2 .item-3 .mask-bg{ background: #00A9CE; } .row-2 .item-4 .mask-bg{ background: rgba(121,192,0,1) } .row-3 .item-5 .mask-bg{ background: rgba(150,140,131,1) } .row-3 .item-6 .mask-bg{ background: rgba(255,103,31,1) } .mask-bg { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; box-sizing: border-box; transform: translate(0, 271px); transform-origin: bottom; transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1); -webkit-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1); -moz-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1); -ms-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1); -o-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1); } .row .item .title { font-size: 0.32rem; color: #FFFFFF; margin-bottom: 0.2rem; position: relative; } .row .item .label { font-size: 0.24rem; color: #FFFFFF; letter-spacing: 0; line-height: 0.3rem; position: relative; opacity: 0; transform: translate(0, 80px); transform-origin: bottom; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1); -webkit-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1); -moz-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1); -ms-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1); -o-transition: transform .5s cubic-bezier(0.2, 0.0, 0.2, 1), opacity .3s cubic-bezier(0.2, 0.0, 0.2, 1); } .type-box .row .item:hover .mask-bg{ transform: translate(0, 0px); -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); } .type-box .row .item:hover .label{ opacity: 1; transform: translate(0, 0px); -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -ms-transform: translate(0, 0px); -o-transform: translate(0, 0px); } .artice-box { width: 100%; border-radius:0.02rem; overflow:hidden; /* position: relative; */ } .artice-box .text-box { /* position: absolute; */ padding: 0.4rem 0.24rem; width: 100%; background: #F7F7F79c; box-sizing: border-box; } .pc-bg { width: 100%; display: block; height: 3.9rem; } .artice-box .text-box h3 { font-size: 0.4rem; color: #2A2E2E; font-style: italic; } .text-box h4 { font-size: 0.32rem; color: #2A2E2E; line-height: 30px; margin-top: 0.26rem; margin-bottom: 0.2rem; } .artice-box .text-box .desc { font-size: 0.3rem; color: #5F6464; line-height: 0.48rem; } .graph-box{ width: 100%; margin-top: 0.5rem; } /* .l-graph { float: left; } .r-graph { float: right; } */ .graph-box .pic { width: 100%; height: 3.9rem; display: block; border-radius:0.02rem; } .mod-graph-box { /*margin-top: 44px;*/ } .graph-box h4 { margin-top: 0.4rem; margin-bottom: 0.2rem; font-size: 0.4rem; color: #2A2E2E; font-style: oblique; } .graph-box .desc { font-size: 0.3rem; color: #5F6464; line-height: 0.54rem; } .item_post{ width: 2.15rem; border-radius: 50%; margin: 0 auto; position: relative; } .item_img{ width: 100%; height: 100%; border-radius: 50%; border: 1px solid #f1f1f1; } .hbjimg{ position: absolute; width: 2.43rem; bottom: 0; left: 50%; transform: translateX(-50%); } .post_name{ font-size: 0.3rem; color: #333; text-align: center; } .list_item{ width: 50%; float: left; margin-bottom: 0.5rem; } .contact{ width: 100%; background-color: #F7F7F79C; box-sizing: border-box; padding: 0.35rem 0.26rem; } .name{ font-size: 0.36rem; color: #333333; box-sizing: border-box; padding-bottom: 0.3rem; border-bottom: 1px solid #ECECEC; margin-bottom: 0.4rem; } .message{ font-size: 0.3rem; color: #333333; margin-bottom: 0.25rem; } .dzdflex{ display: flex; } .width15{ width: 15%; } .address{ font-size: 0.3rem; color: #333333; line-height: 0.5rem; width: 84%; } .gzh p{ color: #323333; font-size: 0.3rem; } .gzh{ display: flex; align-items: center; justify-content: space-evenly; } .gzh img{ width: 1.74rem; /*height: 1.74rem;*/ display: block; margin: 0.5rem auto 0.3rem auto; } .prive{ position: relative; } .allmeng{ width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; /* background-color: rgba(0, 0, 0, 0.4); */ display: flex; align-items: center; justify-content: center; flex-direction: column; } .allmeng p{ text-align: center; color: #ffffff; font-size: 0.36rem; font-weight: bold; } .allmeng img{ display: block; width: 0.71rem; height: 0.39rem; margin-top: 0.2rem; } .no{ visibility: hidden; } .xian{ width: 0.73rem; height: 0.08rem; background: #003F80; margin: 0.3rem auto 0 auto; border-radius: 0.2rem; } .contact_map { width: 100%; margin-top: 0.3rem; height: 4rem; } .linkAs a{ font-size: 0.3rem; color: #fff; margin: 0.12rem 0; text-align: center; } .linkAs { width: 100%; height: 85%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }