body,html {
width: 100%;
height: 100%;
}
@font-face {
font-family: 'en'; /*字体名称*/
src: url(../ziti/UL.ttf); /*字体源文件*/
}
body {
font-family: "en";
}
/*@media (max-width:992px){
body,html{
font-size:15px;
}
}
@media (max-width:767px){
body,html{
font-size:20px;
}
}
@media (max-width:414px){
body,html{
font-size:18px;
}
}
@media (max-width:360px){
body,html{
font-size:16px;
}
}
@media only screen and (min-width: 320px){
html {
font-size:10px !important;
}
}*/
@media only screen and (min-width: 320px){
html {
font-size:12px !important;
}
}
@media only screen and (min-width: 400px){
html {
font-size:12px !important;
}
}
@media only screen and (min-width: 480px){
html {
font-size:14px !important;
}
}
@media only screen and (min-width: 640px){
html {
font-size:16px !important;
}
}
/*ipad适配*/
@media all and (min-width:400px) and (max-width:960px) {
.hb1 {
padding-left: 11vw;
padding-right: 11vw;
}
}
/*手机适配*/
@media all and (min-width:0px) and (max-width:400px) {
.hb1 {
padding-left: 0vw;
padding-right: 0vw;
}
}
@media all and (min-width:1600px) and (max-width:2400px) {
/*.r_top {padding-top: 23% !important;}*/
}
.box {
position: relative;
width: 100%;
height: 100%;
}
.left {
width: 255px;
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 9;
overflow-x: hidden;
float: left;
}
.left_b {
position: fixed;
visibility: visible;
}
.left_n {
width: 100%;
height: 100%;
min-height: 320px;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
}
.left_n_top {
flex-grow: 0;
flex-shrink: 0;
height: auto;
padding-left: 57.55px;
padding-top: 62px;
}
.left_n_top img {
width: 146px;
height: 48px;
}
.left_n_center {
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
}
.left_n_center li {
margin-bottom: 40px;
margin-left: 57.55px;
}
.left_n_center li a{
/* */
letter-spacing: 2px;
color: #000;
font-size: 0.9rem;
}
/*.left_n_center span {
display: none;
}*/
.left_n_center ul {
width: 100%;
margin-top: 20px;
}
/*.left_n_center li:hover span {
display:initial;
animation:mymove 5s infinite;
}*/
.bottom {
flex-direction: column;
align-items: flex-start;
flex-grow: 0;
flex-shrink: 0;
}
.cn {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.1em;
padding-right: 4px;
padding-left: 57.55px;
}
.cn img {
width: 18px;
height: 18px;
}
.en {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.1em;
}
.en img {
width: 18px;
height: 18px;
}
.jie {
color: #161616;
font-family: futura-pt, sans-serif;
font-family: var(--font-en);
font-size: 0.5rem;
letter-spacing: 0.1em;
display: block;
opacity: 0.5;
word-wrap: break-word;
/* */
letter-spacing: 0px;
padding: 16px 5px;
text-align: center;
}
/*左侧结束*/\
.th {overflow: hidden;}
.right {
/*float: right;*/
/*width: 100%;*/
height: 100%;
position: relative;
padding-left: 255px;
}
.right_logo {
width: 385px;
height: 150px;
background: url(../image/logo.png) no-repeat center;
background-size: 100% 80%;
/*margin: 30% auto 0;*/
/*position: absolute;
top: 40%;
left: 33%;*/
/*margin: 0 auto;*/
}
/*.right_logo img{
width: 385px;
height: 150px;
}*/
.r_top {
padding-top: 200px;
}
@media all and (min-width:960px) and (max-width:1500px) {
.r_top {
padding-top: 100px;
}
}
.sp_p p {
float: right;
font-size: 1.2rem;
letter-spacing: 0.3em;
color: #161616;
/*line-height: 3.2rem;*/
transition: top ease-in-out 1s;
/**/
font-weight: 600;
}
.sp_p_1 p {
float: right;
font-size: 1.2rem;
letter-spacing: 0.3em;
color: #161616;
/*line-height: 3.2rem;*/
transition: top ease-in-out 1s;
/**/
font-weight: 600;
}
.sp_p {
width: 50px;
float: right;
position: relative;
cursor: pointer;
height: 30px;
/*opacity:1;*/
margin-top: 5%;
}
.sp_p_1 {
width: 50px;
float: right;
position: relative;
cursor: pointer;
height: 30px;
opacity:1;
display: none;
margin-top: 5%;
}
.sp_p_2 {
display: none;
/*margin-top: -33px;*/
}
.sp_p_3 {
display: block;
}
.sp_header {display: none;}
@media all and (min-width:0px) and (max-width:960px) {
.sp_header {display: block;}
.right_logo {width: 20rem;height: 8rem;background: url(../image/log1.png) no-repeat center;background-size: 100% 80%;margin: 0 auto 0;}
.left {width: 100%;display: none;}
.right {width: 100%;height: 100%;padding: 0;}
.left_n_top a img {width: 6rem;height: 2rem;}
.left_n_top {padding-left: 1rem; padding-top: 0.5rem;border-bottom: 1px solid #f7f7f7;
padding-bottom: 0.5rem;}
.left_n_center li{height: 60px;margin: 0;padding: 0;text-align: center;line-height: 50px;border-bottom: 1px solid #f7f7f7;}
.left_n_center {flex-grow: 0;}
.cn {padding-left: 0;padding-right: 5%;}
.bottom {text-align: center;}
.jie { padding: 0; position: absolute;width: 100%;bottom: 0rem;}
.cn {padding-top: 1rem;}
.left_n_center span{float: none !important;}
.r_top {padding-top: 45%;padding-bottom: 10%;}
}
.r_top p:nth-child(1){
text-align: center;
font-size: 35px;;
/**/
}
.r_top p:nth-child(2) {
border-bottom: 1px solid #000;
width: 80px;
margin: 23px auto;
line-height: 0;
}
.r_top p:nth-child(3){
text-align: center;
font-size: 20px;
padding-bottom: 50px;
}
.r_top p:nth-child(4){
text-align: center;
font-size: 1rem;;
padding-bottom: 30px;
text-align: left;
letter-spacing: 1px;
line-height: 25px;
color: #666666;
text-align: justify;
}
.r_top p:nth-child(5){
text-align: center;
font-size: 1rem;
padding-bottom: 30px;
text-align: left;
letter-spacing: 1px;
line-height: 25px;
color: #666666;
text-align: justify;
}
.r_top p:nth-child(6){
text-align: center;
font-size: 1rem;
text-align: justify;
padding-bottom: 30px;
letter-spacing: 1px;
line-height: 25px;
color: #666666;
}
/*愿景*/
.yj {
height: 260px;
border-bottom: 2px solid #F2F2F2;
}
.yj_k {
border-bottom: 2px solid #F2F2F2;
}
.yj_1 {
padding-left: 11vw;
font-size: 33px;
font-family: 'hanyi';
font-weight:500;
padding-top: 110px;
/* position: absolute;
top: 15%;*/
}
.yj_n1 {
padding-left: 11vw;
padding-right: 11vw;
}
.yj_nk {padding-left: 11vw;}
.yj_nk1 {padding-left: 5vw;padding-right: 5vw;}
.yj_2 {
/*padding-left: 175px;*/
font-size: 1rem;
font-family: 'hanyi';
/*font-weight:bold;*/
color: #666666;
padding-top: 5rem;
text-align: justify;
}
@media all and (min-width:0px) and (max-width:1450px) {
.yj_2 {
padding-top: 70px;
}
}
.yj_3 {
/*padding-left: 175px;*/
font-size: 1rem;
font-family: 'hanyi';
/*font-weight:bold;*/
padding-top: 30px;
color: #666666;
text-align: justify;
}
/*鼠标悬浮效果*/
/*鼠标悬浮效果*/
/*导航*/
.left_n_center li {
cursor: pointer;
transition:all 0.5s ease-in 0.18s;
}
.left_n_center li:hover span {
/*display: inline;*/
width: 20px;
}
.active {
display: inline;
width: 20px !important;
/* transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);*/
}
.left_n_center span {
width: 0px;
margin: 9px 3px 0px 0px;
border-bottom: 1px solid #000;
float: left;
/*background:blue;*/
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
}
/*导航结束*/
.yj_k {
display: flex;
/*flex: 1;*/
padding-left: 8vw;
}
.yj_k div {
/*padding: 10% 10%;*/
flex: 3;
text-align: left;
padding: 4.6% 0;
padding-right: 4%;
text-align: center;
}
.yj_k>div>p {
/*text-align: left;*/
padding-left: 10px;
margin-top: 23px;
font-size: 1rem;
font-family: 'hanyi';
}
.yj_k img {
width: 80px;
height: 80px;
opacity: 0.7;
}
.yj_s {
display: flex;
/*flex: 1;*/
border-bottom: 2px solid #F2F2F2;
}
.yj_s div {
/*padding: 10% 10%;*/
flex: 3;
text-align: center;
padding: 13% 0;
/*padding-right: 8%;*/
}
.yj_s>div>p {
text-align: center;
margin-top: 23px;
font-size: 1rem;
font-family: 'hanyi';
font-weight: 300;
}
.yj_s img {
width: 5rem;
height: 5rem;
}
.yj_s1 {
height: 10%;
/*border-bottom: 2px solid #F2F2F2;*/
}
@media screen and (max-width:600px) {
}
@media screen and (min-width:960px) {
/* .left {width: 22%;}
.right {width: 78%;}*/
}
}
@media screen and (min-width:1200px) {
.yj_s,.yj_s1{display: none;}
/* .left {width: 33%;}
.right {width: 77%;}*/
}
@media screen and (min-width:1400px) {
.yj_s,.yj_s1{display: none;}
/* .left {width: 18%;}
.right {width: 82%;}*/
}
@media screen and (min-width:1600px) {
.yj_s,.yj_s1{display: none;}
/* .left {width: 14%;}
.right {width: 86%;}*/
}
@media all and (min-width:960px) and (max-width:1980px) {
.yj_s,.yj_s1{display: none;}
.hb_k,.hb_wb,.hb_wb {display: none;}
}
@media all and (min-width:0px) and (max-width:960px) {
.yj_1 {padding-left: 0;text-align: center;padding: 14% 0;}
.yj_n {padding-left: 0;font-size: 1.2rem;font-weight: 100;line-height: 1.5rem;}
/*.yj_n1 {width: 86%;margin: 0 auto;padding-left: 0;}*/
.yj_2 {padding-top: 8%;}
.yj_3 {padding: 8% 0;}
.yj_y {display: none;}
.yj {height: auto;}
.yj_t {margin-top:20%;}
.r_top p:nth-child(1) {font-size: 2.6rem;}
.r_top p:nth-child(3) {font-size: 1.5rem;}
.r_top p:nth-child(4) { font-size: 1.3rem;}
.r_top p:nth-child(5) { font-size: 1.3rem;}
.r_top p:nth-child(6) { font-size: 1.3rem;}
.hbs_img {text-align: center;}
}
@media all and (min-width:960px) and (max-width:1200px) {
.hb1{
padding-left: 5vw;
padding-right: 5vw;
}
}
.ly {
padding-left: 11vw;
padding-top: 4rem;
padding-right: 11vw;
padding-bottom: 4rem;
}
.ly_b {
border-bottom: 2px solid #F2F2F2;
}
.ly_img {
width: 80px;
height: 80px;
float: left;
}
.ly_img img{
width: 80px;
height: 80px;
}
.ly_1 {
padding-left: 140px;
font-size: 1.1rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #000;
text-align:justify;
}
.ly_2 {
padding-bottom: 0;
font-size: 1rem;
font-family: 'hanyi';
padding-top: 26px;
padding-left: 140px;
color: #666;
line-height: 2rem;
text-align:justify;
}
.yj_kk {
width: 80%;
margin: 0 auto;
}
.hb1 {
display: flex;
/* padding-top: 100px;
padding-bottom: 100px;*/
border-bottom: 2px solid #F2F2F2;
padding-top: 5%;
padding-bottom: 3%;
padding-left: 11vw;
padding-right: 5vw;
}
.hb_k1 {
flex: 1;
/*height: 50px;*/
/*padding-left: 175px;*/
}
.hb_k2 {
flex: 1;
/*margin-right: 80px;*/
}
.hb_img {
width: 10rem;
height: 13rem;
float: left;
padding-right: 10%;
}
.hb_img img{
width: 10rem;
height: 10rem;
}
.hb_p1 {
/*padding-left: 280px;*/
font-size: 1.4rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #000;
margin-top: 5%;
/*font-weight: bold;*/
}
.hb_p2 {
/*padding-left: 280px;*/
font-size: 1.2rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #666666;
margin-top: 10px;
font-weight: 400;
}
.hb_p3 {
padding-bottom: 0;
font-size: 1rem;
font-family: 'hanyi';
padding-top: 26px;
/*padding-left: 280px;*/
color: #666666;
}
.hb_k {
flex: 1;
}
.hbw {
display: flex;
padding-top: 5%;
padding-bottom: 5%;
border-bottom: 2px solid #F2F2F2;
}
.hbw_k {
/*padding-right: 57px;*/
flex: 3;
}
.hbw_p1 {
/*padding-left: 185px;*/
font-size: 22px;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #000;
/*margin-top: 50px;*/
/*font-weight: bold;*/
}
.hbw_p2 {
/*padding-left: 185px;*/
font-size: 20px;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #666666;
margin-top: 10px;
/*letter-spacing: 10px;*/
font-weight: 400;
}
.hbw_p3 {
padding-bottom: 0;
font-size: 16px;
font-family: 'hanyi';
padding-top: 26px;
/*padding-left: 185px;*/
color: #666666;
}
.hbs_k1 {
/*flex: 1;*/
/*height: 50px;*/
/*padding-left: 175px;*/
/*width: 80%;
margin: 0 auto;*/
/*padding-top: 3rem;*/
/*padding-left: 6%;*/
display: flex;
}
.hbs_k2 {
flex: 50%;
}
.hbs_img {
width: 11rem;
height: 11rem;
flex: 50%;
padding-left: 0;
padding-right: 0;
/*text-align: center;*/
}
.hbs_img img{
width: 11rem;
height: 11rem;
}
.hbs_p1 {
/*padding-left: 11rem;*/
font-size: 1.7rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #000;
margin-top: 2rem;
font-weight: bold;
}
.hbs_p2 {
/*padding-left: 11rem;*/
font-size: 1.2rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #666666;
margin-top: 10px;
letter-spacing: 10px;
font-weight: 400;
}
.hbs_p3 {
padding-bottom: 0;
font-size: 1.2rem;
font-family: 'hanyi';
padding-top: 1rem;
/*padding-left: 11rem;*/
color: #666666;
}
.hb_k {
width: 100%;
border-bottom: 2px solid #F2F2F2;
padding-bottom: 4rem;
padding-top: 4rem;
}
.hb_wb {
width: 100%;
border-bottom: 2px solid #F2F2F2;
padding-bottom: 4rem;
text-align: center;
padding-top: 4rem;
padding-bottom: 4rem;
}
.hbwb_p1 {
/*padding-left: 11rem;*/
font-size: 1.7rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #000;
/*margin-top: 2rem;*/
font-weight: bold;
}
.hbwb_p2 {
/*padding-left: 11rem;*/
font-size: 1.2rem;
font-family: 'hanyi';
/*font-weight: 600;*/
color: #666666;
margin-top: 0;
letter-spacing: 0;
font-weight: 400;
}
.hbwb_p3 {
padding-bottom: 0;
font-size: 1.2rem;
font-family: 'hanyi';
padding-top: 1.3rem;
/*padding-left: 11rem;*/
color: #666666;
}
.tz {
padding-bottom: 2%;
margin-top: 1%;
}
.tz1 {
padding-top: 1%;
}
.tz_p {margin-top: 0.7rem;}
.lx {
display: flex;
}
.lx_n {
padding: 0 5.333333333333334vw;
width: 100%;
}
.lx {
border-bottom: 2px solid #F2F2F2;
}
.dt {
width: 100%;
/*height: 100%;*/
/*border-bottom: 2px solid #F2F2F2;*/
padding: 3% 0;
}
.dt img{
width: 80%;
height: 50%;
}
.dt_n {
width: 80%;
height: 40%;
margin: 5% auto;
}
.lx_k:hover .lx_wx {
display: inline;
/*animation: wx 3s ease-in-out;*/
opacity: 1;
}
.lx_wx {
position: absolute;
opacity: 0;;
transition:opacity 2s;
}
.lx_wx img {
width: 10rem;
height: 11.5rem;
}
.dt_n1 {
width: 80%;
height: 100%;
}
@media (min-width: 1025px){
.lx_p1 {
font-size: 1.4rem;
}
}
.lx_p1 {
font-size: 1.2rem;
letter-spacing: 0.06em;
line-height: 1.466666666666667;
margin-bottom: 1em;
/*letter-spacing: 0.7rem;*/
}
.lx_p11 {
font-size: 0.8rem;
letter-spacing: 1.5px;
text-decoration: underline;
color: #666666;
cursor: pointer;
}
.lx_p11 img {
width: 0.8rem;
height: 0.8rem;
padding-right: 0.7rem;
}
@media (min-width: 768px){
.lx_k {
width: calc(50% - 20px);
padding: 28px 0;
}
}
.lx_k {
padding: 2.8rem 0;
/*border-bottom: 1px solid #f4f4f4;*/
position: relative;
/*overflow: hidden;*/
}
@media (min-width: 768px){
.lx_n_k {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
}
@media (min-width: 1025px){
.lx_n {
padding: 0 11vw;
max-width: 1280px;
margin-left: 0;
margin-right: auto;
}
}
.log {position: absolute;left: 45%;top: 40%;}
.cs {padding-left: 11vw;padding-right: 11vw;}
@media all and (min-width:0px) and (max-width:960px) {
.ly {padding: 0;width: 85%;margin: 0 auto;}
.ly_img {float: none;margin: 0 auto;width: 5rem;height: 5rem;padding-top: 12%;}
.ly_1 {padding-left: 0;font-size: 1.2rem;text-align: center;padding: 4% 0;}
.ly_2 {padding-left: 0;font-size: 1.2rem;text-align: left;padding-top: 2%;line-height: 1.4rem;padding-bottom: 12%;}
.ly_img img {width: 5rem;height: 5rem;}
.hbw,.hb1 {display: none;}
.lx_n {padding: 0;}
.lx_k { border-bottom: 2px solid #F2F2F2;text-align: center;}
.lx_wx {position: initial;display: block;opacity: 1;}
.dt_n {width: 90%; margin: 8% auto;height: 23%;}
.dt_n1 {width: 100%;}
.left_n_center li a {font-size: 1.3rem;}
.log {position: initial; padding-top: 70%;}
.lx_p11 {font-size: 1.2rem;}
.dt img {width: 100%;height: 17%;}
.yj_n2 {padding-left: 4vw;padding-right: 4vw;}
.cn img { width: 2rem; height: 2rem;}
.en img { width: 2rem; height: 2rem;}
.lx_p1 {letter-spacing: 0; font-size: 1.4rem;}
.aa {float: none !important;display: initial !important;}
}
/*预加载动画*/
.yujiazai {
width: 100%;
height: 100%;
background-color: #fff;
z-index: 999;
position: fixed;
background: -webkit-radial-gradient(center center, circle cover, #d2d3d3, #eeeeee);
background: -moz-radial-gradient(center center, circle cover, #078ABE, #0D343A);
background: radial-gradient(circle cover at center center, #078abe, #0d343a);
}
.loading {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 50px;
text-transform: uppercase;
font-size: 18px;
}
.loading span {
display: inline-block;
background: #c1bebe;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
text-shadow: 1px 1px 0 #1f1f1f;
position: relative;
top: 0;
font-weight: bold;
box-shadow: inset 0 1px 1px -1px #c2bcbc, inset 0 -5px 1px -1px rgba(32, 31, 31, 0.5);
}
.char1 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.1s;
}
.char2 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.2s;
}
.char3 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.3s;
}
.char4 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.4s;
}
.char5 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.5s;
}
.char6 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.6s;
}
.char7 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.7s;
}
.char8 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.8s;
}
.char9 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 0.9s;
}
.char10 {
animation: foo 2s ease infinite, bar 3s linear infinite;
animation-delay: 1s;
}
@keyframes foo {
10% {
top: -10px;
}
50% {
top: 0;
}
100% {
top: 0;
}
}
@keyframes bar {
10% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes wx {
0% {
opacity: 0;
}
30% {
opacity: 0.2;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes donghua {
from {
/*position: absolute;*/
top: 100%;
opacity: 0;
}
to {
/*position: absolute;*/
top: 0;
opacity: 1;
}
}
.aa {display: block;float: left;height: 2rem;}