*{ margin: 0; padding: 0; } .zh_content{ width: 100%; position: relative; } .swiper{ width: 100%; height: auto; max-height: 620px; overflow: hidden; position: relative; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; } .swiper-slide img{ width: 100%; height: 550px; object-fit: cover; object-position: 0 -125px; } .swiper-slide-img{ width: 100%; height: 750px; background:url('../image/bg.png') no-repeat; background-size: 100% 100%; } @media (max-width: 1800px) and (min-width: 1140px){ .swiper-slide-img{ height: 650px !important; } } .zh_top{ width: 100%; height: auto; position: fixed; top: 0; left: 0; right: 0; z-index: 200; } .zh_head{ width: 100%; height: 50px; /* border-bottom: 1px solid #ddd; */ display: flex; align-items: center; } .zh_hcon{ width: 1170px; margin: 0 auto; padding: 0px 68px; } .zh_head .zh_logo,.zh_head .zh_logo img{ height: 60px; float: left; } .zh_hr{ float: right; line-height: 40px; color: #fff; } .login_info_div { display: none; } .zh_hr a,.zh_hr span{ color: #fff; margin-left: 15px; font-size: 12px; } .zh_hr span em{ font-style: normal; font-size: 16px; } .white{ background: #fff; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1); } .white a,.white span{ color: #333 !important; } .blackbg { background-color: var(--main-color); /*background: url('../picture/heng.png');*/ } .zh_nav{ width: 100%; display: flex; align-items: center; margin-top: 0; height: 40px; } .nav_con{ width: 1170px; margin: 0 auto; height: 70px; line-height: 70px; list-style: none; padding: 0px 68px; } .nav_con a{ color: #fff; float: left; font-size: 16px; margin-right: 40px; } .nav_con a:hover{ color: #fff; float: left; font-size: 16px; margin-right: 40px; } .zh_nav_btn{ display: none; } .evus-main{ position: absolute; width: 100%; z-index: 100; top: 15%; left: 0; } .djcon{ width: 1040px; margin: 0 auto; float: none; } @media (max-width: 1200px){ .swiper-slide img { height: 450px !important; object-position: top !important; } .zh_top{ height: auto; width: 100%; background: var(--main-color); } .zh_head,.zh_hcon{ width: auto; float: left; border: none; margin-left: 10px; } .zh_hr{ display: none; } .login_info_div { display: block; } .zh_nav{ width: 100%; height: auto; margin-top: 60px; right: 0; left: 0; } .zh_nav_btn{ position: absolute; right: 20px; top: 20px; width: 30px; height: auto; display: block; } .nav_con{ width: 100%; height: auto; display: none; overflow: hidden; padding: 0 10% 10px; box-sizing: border-box; } .nav_con li{ width: 100%; height: 40px; border-radius: 5px; } .nav_con li:hover,.nav_con li.selected{ background: #f3b78d; } .nav_con a{ width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; } } @media (max-width: 1020px){ .djcon{ width: 100%; /*padding-right: 20px;*/ box-sizing: border-box; } } @media (max-width: 740px){ .swiper { height: 0 !important; } .swiper-slide img{ height: 450px !important; object-position: top !important; } .swiper-slide-img{ background:url('../image/mobile.png') no-repeat; background-size: 100% 100%; height: 350px; } .layui-form-item .layui-form-label{ word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */ word-break: break-all; /* 强制文本进行换行 */ white-space: normal; /* 允许文本在任意字符处换行 */ } .layui-form-radio div{ display: inline; } .evus-main{ top: 10px; bottom: 0; height: auto; display: flex; align-items: center; position: inherit; } .form-cell { display: block; } .dj-box .fromto-box { width: 100% !important; } .form-cell .icon { display: none !important; } .zh_content{ top: 60px; margin-bottom: 20px; } } @media (min-width: 740px) and (max-width: 1024px){ .swiper-slide-img{ background: url(../image/bg.png) no-repeat; background-size: 100% 100%; } .middle-box2{ width: 95% !important; margin-left: 0px !important; } } @media (max-width: 1020px) and (min-width: 740px){ .swiper-slide-img{ background:url('../image/bg.png') no-repeat; background-size: 100% 100%; } .evus-main { top: 25%; right: 5%; left: unset; } } .layui-layer-dialog .layui-layer-content .layui-layer-face{ /*top: 45%;*/ } .desc-box { display: flex; width: 1200px; justify-content: space-evenly; margin: 20px auto; /*border-bottom: 1px solid #e3e2e2;*/ padding-bottom: 10px; } .desc-box>p { display: flex; flex-direction: column; text-align: center; font-size: 1rem; } .desc-box strong { font-size: 1.5rem; } .middle-box2 { width: 75%; margin: 0 auto 20px auto; display: flex; justify-content: space-between; } .middle-box2 .image-box { height: 234px; padding-top: 10px; } .middle-box2 img { width: 528px; height: 100%; border-radius: 30px; } .middle-box2 svg { width: 32px; height: 32px; } .middle-box2 h2 { font-size: 30px; font-weight: 600; line-height: 56px; } .middle-box2 p { font-size: 1rem; line-height: 28px; } .middle-box2 a { background: var(--main-color); padding: 20px 40px; border-radius: 30px; color: #ffffff; transition: all 400ms; } .middle-box2 a:hover { color: #ffffff; background-color: var(--main-color); } .middle-box2 button { background: none; border: none; font-weight: 700; } .middle-box2 .wh16 { width: 16px; height: 16px; } .middle-box2 .mt30 { margin-top: 30px; } .middle-box2 .right-box { margin: 0 auto; display: grid; flex-direction: column; box-sizing: border-box; grid-template-rows: repeat(2, minmax(0,1fr)); grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 1110px; } .middle-box2 .right-box .item { display: flex; flex-direction: column; text-align: center; align-items: center; background: rgba(241, 249, 252, 1); margin: 5px; padding: 30px 20px; border-radius: 10px; transition: all 400ms; } .middle-box2 .right-box .item:hover { cursor: pointer; background-color: var(--main-color); color: #ffffff; } .middle-box2 .right-box .item h6 { font-size: 1.25rem; line-height: 34px; font-weight: 600; } .middle-box2 .right-box .item p { font-size: .875rem; } @media (max-width: 740px){ .desc-box { width: 100%; display: block; /*margin: 70px auto 20px auto;*/ } .zh_hcon { padding: 0px 0px; } .zh_head .zh_logo, .zh_head .zh_logo img{ height: 35px; } .flex-center { display: flex; justify-content: center; flex-direction: column; align-items: center; } .middle-box2 { padding: 10px; width: 100%; flex-direction: column; } .middle-box2 .right-box { margin-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dj-box .fromto-box { display: flex; flex-direction: column; width: 43%; } .dj-box .fromto-box input { padding: 10px; border-radius: 5px; width: 100%; border: 1px solid gray; } .dj-box .fromto-box.date label { color: #205493; } .mr20 { margin-right: 20px; } .mt20 { margin-top: 20px; } @media (min-width: 740px) { .zh_head{ height: 70px; } } .layui-container { padding-bottom: 30px; } body{ background: #f8f8f8 !important; }