:root {
//--my-width: 1200px;
--my-width: 100vw;
--my-height: calc(var(--my-width) / 3);
--my-height-mini: calc(var(--my-width) / 6);
}
@vw: 19.2vw;
@vh: 10.8vh;
@color_1: #0078da;
@color_2: #043184;
@color_3: #bddffb;
@color_4: #f39808;
.pc {
display: none;
}
.mobile {
display: block;
}
body {
position: relative;
background-size: 100%;
}
.banner {
width: 100%;
height: 56% / @vw;
background: #eee url(../images/banner.png) center 30% no-repeat;
}
.navbar {
width: 100%;
min-width: 375px;
margin: 5vw auto 0;
position: relative;
.nb-title {
height: inherit;
.img-1 {
display: none;
position: absolute;
width: 580 / @vw;
top: 0;
left: 0;
}
.nb-text {
font-size: 6vw;
font-family: 'SimSong', '宋体';
letter-spacing: 1px;
font-weight: bold;
text-align: center;
color: @color_2;
}
}
.nb-nav {
margin: 5vw auto 0;
width: 700 / @vw;
min-width: 330px;
background: @color_3;
overflow: visible;
> div {
justify-content: space-between;
}
.nav-item {
width: auto !important;
position: relative;
flex: auto;
font-family: 'SimSong', '宋体';
font-size: 3.5vw;
font-weight: bold;
padding: 7 / @vw 0;
text-align: center;
color: @color_2;
background: @color_3;
transition: all 0.3s;
&::before {
content: '';
position: absolute;
left: 50%;
bottom: -10 / @vw;
border-radius: 3px;
transform: translate(-50%);
width: 30%;
height: 5 / @vw;
transition: all 0.3s;
}
}
.swiper-slide-thumb-active {
background: #fff;
color: @color_4;
position: relative;
&::before {
background: @color_4;
}
}
}
.img-2 {
display: none;
position: absolute;
width: 1240 / @vw;
min-width: 970px;
right: 0;
bottom: 0;
}
}
.navbar.loop {
.nb-title {
height: inherit;
.img-1 {
display: none;
position: absolute;
width: 430 / @vw;
top: 0;
left: 0;
}
}
.nb-nav-box {
width: 750 / @vw;
height: 5vw;
min-width: 375px;
margin: 0 auto;
}
.nb-nav {
height: inherit;
position: relative;
overflow: hidden;
background: transparent;
margin: 5vw auto;
.swiper-slide {
position: relative;
font-family: 'SimSong', '宋体';
font-size: 3.5vw;
font-weight: bold;
padding: 7 / @vw 0;
text-align: center;
color: @color_2;
background: @color_3;
transition: all 0.3s;
&::before {
content: '';
position: absolute;
left: 50%;
bottom: -7 / @vw;
border-radius: 3px;
transform: translate(-50%);
width: 30%;
height: 5 / @vw;
transition: all 0.3s;
}
}
.swiper-slide-thumb-active {
color: @color_4;
background: #eee;
}
}
.loop-next {
position: absolute;
// right: -70 / @vw;
top: 0;
// width: 38 / @vw;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.2vw;
margin-right: -1.5vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
.loop-prev {
position: absolute;
// left: -70 / @vw;
top: 0;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.2vw;
margin-left: -1vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
}
.navbar.default {
width: 100%;
min-width: 375px;
.nb-title {
width: 100%;
text-align: center;
font-size: 6vw;
font-family: 'SimSong', '宋体';
letter-spacing: 1px;
font-weight: bold;
color: @color_2;
}
.img-default {
width: 100%;
display: none;
}
}
.module_1 {
width: 100%;
height: auto;
background: #fff;
margin: 0 auto 40px;
padding: 5vw;
.m1-title {
padding: 0 0 0 3vw;
border-left: 2px solid @color_1;
div {
font-family: 'SimSong', '宋体';
font-weight: bold;
font-size: 4vw;
margin-bottom: 3vw;
text-align: justify;
}
span {
font-size: 3.5vw;
color: #666;
text-align: justify;
}
}
.m1-line {
width: 100%;
height: 1px;
background: #aeaeae;
margin: 3vw auto;
}
.m1-body {
.m1-focus {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
.swiper-slide {
position: relative;
img {
width: 100%;
height: 100%;
}
}
.m1-pagination {
position: relative;
display: flex;
justify-content: flex-end;
width: auto;
}
.swiper-pagination-bullet {
width: 25px;
height: 3px;
display: inline-block;
background: #fff;
opacity: 0.6;
border-radius: 3px;
transition: all 0.3s;
}
.swiper-pagination-bullet-active {
width: 35px;
background: @color_1;
opacity: 1;
}
.focus-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
text-indent: 1em;
line-height: 50px;
background: linear-gradient(rgba(0, 0, 0, 0), #000);
a {
color: #fff;
font-size: 3.5vw;
}
}
.focus-prev {
position: absolute;
line-height: 56px;
right: 50px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
.focus-next {
position: absolute;
line-height: 56px;
right: 20px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
}
.m1-text-box {
width: 100%;
height: auto;
padding: 5vw 0 0;
div {
font-size: 4vw;
font-weight: bold;
font-family: 'SimSong', '宋体';
}
p {
margin-top: 1em;
font-size: 3.5vw;
color: #666;
}
a {
display: block;
margin-top: 1em;
font-size: 3.5vw;
color: @color_1;
text-align: right;
&:hover {
text-decoration: underline;
}
}
}
}
}
.module_2 {
padding: 5vw 0;
background: #fff;
.nb-nav {
.swiper-wrapper {
width: 95vw;
margin-left: 0vw;
}
}
.pc {
display: none;
}
.swiper-button-next {
position: absolute;
// right: -70 / @vw;
top: 0;
// width: 38 / @vw;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.3vw;
margin-right: -1.5vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
.swiper-button-prev {
position: absolute;
// left: -70 / @vw;
top: 0;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.3vw;
margin-left: -1vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
.m2-box {
margin: 5vw auto 0;
width: 100%;
min-width: 375px;
max-height: 300px;
overflow: hidden;
//border: 1px solid #466ccf;
.navbar.loop {
position: relative;
margin: 3vw auto;
}
.m2-item {
max-height: 300px;
background: #fff;
overflow-x: scroll;
}
.m2-1-focus {
width: 100vw;
height: 100%;
position: relative;
.swiper-slide {
width: 100vw;
position: relative;
text-align: center;
img {
width: 92%;
height: 100%;
margin: 0 auto;
}
}
}
.m2-1-box {
.m2-1-focus {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.swiper-slide {
width: 100%;
height: 100%;
position: relative;
text-align: center;
img {
width: 92%;
height: 100%;
margin: 0 auto;
}
}
.swiper-pagination-bullet {
width: 25px;
height: 3px;
display: inline-block;
background: #fff;
opacity: 0.6;
border-radius: 3px;
transition: all 0.3s;
}
.swiper-pagination-bullet-active {
width: 35px;
background: @color_1;
opacity: 1;
}
.focus-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
text-indent: 1em;
line-height: 50px;
background: linear-gradient(rgba(0, 0, 0, 0), #000);
a {
color: #fff;
font-size: 18px;
}
}
.focus-prev {
position: absolute;
line-height: 56px;
right: 50px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
.focus-next {
position: absolute;
line-height: 56px;
right: 20px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
}
.m2-1-text-box {
width: 100%;
height: 100%;
padding: 5vw;
div {
font-size: 5vw;
font-weight: bold;
font-family: 'SimSong', '宋体';
}
p {
font-size: 3.5vw;
color: #666;
text-align: justify;
}
a {
display: block;
margin-top: 2em;
font-size: 3.5vw;
color: @color_1;
text-align: right;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
.module_3 {
padding: 5vw 0;
.pc {
display: none;
}
.swiper-button-next {
position: absolute;
// right: -70 / @vw;
top: 0;
// width: 38 / @vw;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.3vw;
margin-right: -1.5vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
.swiper-button-prev {
position: absolute;
// left: -70 / @vw;
top: 0;
width: 4vw;
height: 4vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 12.3vw;
margin-left: -1vw;
&::after {
color: @color_2;
font-size: 25 / @vw;
}
}
.m3-box {
margin: 5vw auto 0;
width: 100%;
min-width: 375px;
max-height: 300px;
overflow: hidden;
//border: 1px solid #466ccf;
.navbar.loop {
position: relative;
margin: 3vw auto;
}
.m3-1-box {
height: 300px;
background: #fff;
overflow-x: scroll;
img {
// display: none;
width: 92%;
margin-left: 4%;
}
.m3-1-focus {
width: 50%;
height: 100%;
position: relative;
.swiper-slide {
position: relative;
img {
display: none;
width: 100%;
height: 100%;
}
}
.m3-pagination {
position: relative;
display: flex;
justify-content: flex-end;
width: auto;
}
.swiper-pagination-bullet {
width: 25px;
height: 3px;
display: inline-block;
background: #fff;
opacity: 0.6;
border-radius: 3px;
transition: all 0.3s;
}
.swiper-pagination-bullet-active {
width: 35px;
background: @color_1;
opacity: 1;
}
.focus-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
text-indent: 1em;
line-height: 50px;
background: linear-gradient(rgba(0, 0, 0, 0), #000);
a {
color: #fff;
font-size: 18px;
}
}
.focus-prev {
position: absolute;
line-height: 56px;
right: 50px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
.focus-next {
position: absolute;
line-height: 56px;
right: 20px;
bottom: 15px;
z-index: 1;
cursor: pointer;
}
}
.m3-1-text-box {
width: 100%;
height: 100%;
padding: 5vw;
//display: flex;
div {
font-size: 5vw;
font-weight: bold;
color: #466ccf;
border-left: 3px solid #466ccf;
padding-left: 1em;
font-family: 'SimSong', '宋体';
margin-bottom: 1em;
}
p {
align-self: center;
font-size: 3.5vw;
color: #666;
text-align: justify;
}
a {
margin-top: 2em;
float: right;
font-size: 3.5vw;
color: @color_1;
text-align: right;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
.column {
flex-direction: column;
}
.module_4 {
padding: 4vw 0;
background: #b2e0fd;
.s-title {
div {
font-size: 5vw;
font-weight: bold;
font-family: 'SimSong', '宋体';
text-align: center;
}
p {
width: 50vw;
color: #fff;
padding: 3px 0;
font-size: 3vw;
text-align: center;
background: @color_1;
margin: 5vw auto;
}
}
.speech-con {
width: 100%;
min-width: 375px;
margin: 5vw auto 0;
padding: 10vw 3.5vw;
box-shadow: 0 4px 12px rgba(84, 81, 81, 0.25);
background: url(/e_html/2023/bairen/images/m4-1-bg.png) no-repeat top center;
background-size: 100% 100%;
.speech {
width: 92vw;
margin: 0 auto;
padding: 4vw;
background-color: rgba(218, 237, 253, 0.8);
text-align: justify;
display: flex;
justify-content: center;
p {
font-size: 3.5vw;
}
.speech-item {
width: 50%;
height: 240px;
position: relative;
overflow: hidden;
border: 1px solid #fff;
transition: all 0.5s;
text-align: center;
.photo {
width: 100vw;
position: absolute;
left: -90%;
transition: all 0.5s;
img {
width: 100%;
}
}
.name {
height: 60%;
position: absolute;
top: 2vw;
right: 2vw;
}
.text {
position: absolute;
width: 170px;
height: 680px;
font-size: 36px;
font-weight: bold;
writing-mode: horizontal-tb; //默认：水平方向，从上到下
writing-mode: vertical-rl; //垂直方向，从右向左
top: 55px;
left: 650px;
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
// line-height: 1.4;
}
}
.photo {
width: 100%;
height: auto;
margin: auto;
overflow: hidden;
text-align: center;
}
.active {
width: 1200px;
.photo {
left: -15%;
}
}
.active-s {
width: 130px;
.photo {
left: -15%;
}
}
//.speech-item:first-child{
// //margin-left: -45px;
// .text .child{
// width: 335px;
// background: linear-gradient(280deg, transparent 13px, rgba(0,0,0,.4) 0) top right;
// }
//}
//.speech-item:last-child{
// //margin-left: -45px;
// .text{
// width: 325px;
// }
//}
}
}
.theme_report_box {
position: relative;
overflow: hidden;
.tr-prev {
position: absolute;
left: 5vw;
top: 65%;
width: 10vw;
height: 10vw;
border: 3px solid @color_1;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
}
.tr-next {
position: absolute;
right: 5vw;
top: 65%;
width: 10vw;
height: 10vw;
border: 3px solid @color_1;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
}
.theme_report {
width: 100%;
min-width: 375px;
margin: 0 auto;
padding: 5vw;
box-shadow: 0 4px 12px rgba(84, 81, 81, 0.25);
background: url(/e_html/2023/bairen/images/m4-2-bg.png) no-repeat top center;
background-size: 100% 100%;
position: relative;
#certify {
position: relative;
// width: 180%;
// margin-left: -40%;
.swiper-container {
overflow: hidden;
}
.swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
transition-duration: 500ms;
position: relative;
overflow: hidden;
//transition: transform .5s;
/* Center slide text vertically */
img {
display: block;
width: 100%;
}
p {
width: 100%;
height: 0;
position: absolute;
left: 0;
bottom: -20px;
z-index: 10;
font-size: 20px;
text-align: center;
color: #fff;
padding: 10px 20px;
background: @color_1;
transition: height 0.5s;
}
&:hover p {
height: 95px;
}
}
}
}
}
.theme_talk-box {
width: 100%;
min-width: 375px;
margin: 10vw auto;
padding: 5vw 0;
box-shadow: 0 4px 12px rgba(84, 81, 81, 0.25);
.theme_talk {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
position: relative;
.talk_box_left {
width: 100%;
height: 100px;
background: @color_1;
//background: linear-gradient(135deg, #fc7759 0, #eb343f 100%)
.tab_menu {
width: 100%;
display: flex;
align-items: center;
li {
width: 33.33%;
height: 10vw;
cursor: pointer;
background: #f57860;
color: #fff;
line-height: 10vw;
font-size: 3.5vw;
text-align: center;
}
.selected {
background-color: #da2b25;
cursor: pointer;
}
}
}
.tab_box {
width: 100%;
height: auto;
margin-top: -50px;
background: #fff;
box-shadow: 0 4px 12px rgba(84, 81, 81, 0.25);
}
.byll_pics {
width: 100%;
margin: 0 auto;
position: relative;
.swiper-container {
width: 200%;
margin-left: -50%;
overflow: hidden;
background: #666;
.swiper-slide {
padding: 1vw;
background: #fff;
img {
width: 100%;
}
.tit {
text-align: center;
color: #fff;
font-size: 3.5vw;
padding: 10px 0;
background: @color_1;
}
.text {
margin-top: 10px;
font-size: 3.5vw;
line-height: 1.6;
text-align: justify;
}
.more {
margin-top: 10px;
color: @color_1;
font-size: 3.5vw;
text-align: right;
}
}
}
.swiper-button-next {
position: absolute;
right: 5vw;
top: 50%;
transform: translate(0, -50%);
width: 10vw;
height: 10vw;
border: 1px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 0;
&::after {
color: @color_2;
font-size: 6vw;
}
}
.swiper-button-prev {
position: absolute;
left: 5vw;
top: 50%;
transform: translate(0, -50%);
width: 10vw;
height: 10vw;
border: 3px solid @color_2;
border-radius: 50%;
z-index: 2;
margin-top: 0;
&::after {
color: @color_2;
font-size: 6vw;
}
}
}
}
}
.sshz_box {
width: var(--my-width);
height: var(--my-height);
margin: 0 auto;
.swiper-lazy-preloader {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
margin-left: 0;
margin-top: 0;
}
.swiper-lazy-preloader:after {
display: none;
}
.dh {
width: 1200px;
height: auto;
margin: 0 auto;
margin-top: 100px;
}
.djch_box {
width: 100%;
height: 100%;
margin-top: 40px;
}
.djch_nr {
width: 100%;
height: 100%;
margin: 0 auto;
}
.focusBox4 {
width: var(--my-width);
height: var(--my-height);
position: relative;
background: #fff;
.arrow-left4 {
position: absolute;
right: 55px;
top: 50%;
width: 80px;
height: 80px;
border: 3px solid #fff;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
&::after {
color: #fff;
}
}
.arrow-right4 {
position: absolute;
left: 55px;
top: 50%;
width: 80px;
height: 80px;
border: 3px solid #fff;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
&::after {
color: #fff;
}
}
.swiper-container {
width: 100%;
height: 100%;
}
}
.swiper-slide {
position: relative;
}
.slide_cont {
width: var(--my-width);
height: var(--my-height);
}
.narrow_box {
float: left;
width: 25%;
height: var(--my-height);
position: relative;
transition: all 0.5s;
cursor: pointer;
.title {
position: absolute;
left: 0;
width: 100%;
height: var(--my-height-mini);
background: #0096fb;
font-size: 18px;
color: #fff;
font-weight: 700;
line-height: 32px;
text-align: center;
//padding: 40px 35px;
z-index: 2;
a {
color: #fff;
font-size: 18px;
}
}
.img {
position: absolute;
left: 0;
width: 100%;
height: 50%;
top: 50%;
img {
width: 100%;
height: 100%;
}
}
}
.narrow_box:nth-child(odd) {
.title {
top: 0;
}
.img {
top: 50%;
}
}
.narrow_box:nth-child(even) {
.title {
top: 50%;
}
.img {
top: 0;
}
}
.narrow_box.on {
width: 50%;
.img {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
}
.title {
position: absolute;
left: 0;
bottom: 0;
top: auto;
width: 100%;
height: auto;
background: rgba(0, 150, 251, 0.8);
font-size: 18px;
color: #fff;
font-weight: 700;
line-height: 1.6;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}
}
.narrow_box.on:nth-child(odd) .img {
top: 0;
}
}
.luntan-ul{
padding: 0 20px;
}
.luntan-ul .luntan-li{
float: none;
width: 100%;
margin: 0 0 30px;
// margin: 60px auto 0;
}
.luntan-ul .luntan-li .img{
width: 100%;
// height: 360px;
}
.luntan-ul .luntan-li .img img{
width: 100%;
}
.luntan-ul .luntan-li .word{
font-size: 14px;
line-height: 22px;
text-align: center;
margin-top: 10px;
// height: 72px;
}
}
.module_5 {
padding: 5vw 0 0;
width: 100%;
min-width: 375px;
margin: 5vw auto 0;
.m5-body {
margin: 5vw auto 0;
display: flex;
justify-content: space-between;
.m5-news {
height: auto;
padding: 0 3vw;
overflow-y: scroll;
flex-grow: 1;
.news-item {
height: 12vw;
margin-bottom: 10px;
padding-right: 1em;
display: flex;
background: #fff;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 12px rgba(84, 81, 81, 0.25);
a {
flex-grow: 1;
font-size: 3.5vw;
text-indent: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: @color_2;
}
}
span {
margin-left: 0.5em;
font-size: 3vw;
}
}
.news-item:last-child {
margin-bottom: 0;
}
}
.m5-swiper {
margin-left: 3vw;
width: 590px;
height: auto;
overflow: hidden;
position: relative;
img {
width: 100%;
}
.swiper-pagination-bullet {
width: 25px;
height: 3px;
display: inline-block;
background: #fff;
opacity: 0.6;
border-radius: 3px;
transition: all 0.3s;
}
.swiper-pagination-bullet-active {
width: 35px;
background: @color_1;
opacity: 1;
}
}
}
}
.module_6 {
padding: 2vw 0;
background: #fff;
position: relative;
.swiper {
width: 100%;
min-width: 375px;
margin: 5vw auto;
position: relative;
overflow: hidden;
}
.m6-prev {
position: absolute;
left: 5vw;
top: 55%;
width: 10vw;
height: 10vw;
border: 2px solid @color_1;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
&::after {
font-size: 6vw;
}
}
.m6-next {
position: absolute;
right: 5vw;
top: 55%;
width: 10vw;
height: 10vw;
border: 2px solid @color_1;
border-radius: 50%;
opacity: 0.7;
z-index: 2;
&::after {
font-size: 6vw;
}
}
.swiper-slide {
img {
width: 100%;
}
}
.current-swiper {
width: 80%;
border-radius: 10px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 99;
overflow: hidden;
}
.left-swiper {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
}
.right-swiper {
position: absolute;
right: 0;
left: auto;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
}
.nocurrent-swiper {
width: 50%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
.nocurrent-swiper:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(237, 240, 240, 0.7);
z-index: 99;
}
}
.module_7 {
background-color: rgba(237, 240, 240, 0.7);
height: 7vh;
width: 100%;
text-align: center;
padding-top: 3.5vw;
p {
font-size: 3.5vw;
font-weight: 800;
}
}