.banner{
height: 700px;
.picBox{
position: relative;
width: 100%;
overflow: hidden;
.pic{
min-width: 1440px;
}
}
.title{
position: absolute;
width: 880px;
left: 50%;
margin-left: -440px;
top: 256px;
}
.textInfo{
position: absolute;
width: 100%;
top: 488px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.text{
font-weight: 300;
font-size: 17px;
color: #FFFFFF;
line-height: 30px;
margin-left: 50px;
margin-right: 50px;
span{
font-weight: 500;
margin-left: 10px;
}
&:first-child{
margin: 0;
}
&:last-child{
margin: 0;
}
}
}
}
@media (max-width: 991px) {
.banner{
.title{
width: 660px;
margin-left: -330px;
}
}
}
@media (max-width: 767px) {
.banner{
height: 340px;
overflow: hidden;
.picBox{
.pic{
min-width: 900px;
}
}
.title{
width: 330px;
margin-left: -165px;
top: 102px;
}
.textInfo{
top: 206px;
left: 50%;
width: 264px;
display: block;
margin: 0;
margin-left: -132px;
.text{
font-size: 14px;
line-height: 22px;
margin-bottom: 10px !important;
margin-left: 0;
margin-right: 0;
span{
font-size: 14px;
line-height: 22px;
}
}
}
}
}
.content{
padding-bottom: 120px;
&.hasColor{
background: rgba(223, 38, 22, 0.04);
}
}
@media (max-width: 767px) {
.content{
padding-bottom: 50px;
}
}
.content1{
position: relative;
.contentInfo{
background: #ffffff;
padding-top: 82px;
padding-bottom: 60px;
padding-left: 60px;
padding-right: 60px;
.textBox{
width: 100%;
max-width: 790px;
margin: auto;
margin-top: 40px;
.text{
font-weight: 300;
font-size: 15px;
color: #515356;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
}
}
}
.videoBox{
position: relative;
width: 100%;
max-width: 1200px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
.box{
position: relative;
.video{
width: 100%;
display: block;
}
.play{
position: absolute;
width: 80px;
height: 80px;
left: 50%;
margin-left: -40px;
top: 50%;
margin-top: -40px;
display: block;
cursor: pointer;
}
}
}
}
@media (max-width: 767px) {
.content1{
.contentInfo{
padding: 0;
.textBox{
margin-top: 20px;
.text{
margin-bottom: 15px;
}
}
}
.videoBox{
padding: 0;
margin-top: 30px;
.box{
.play{
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
}
}
}
}
}
.content2{
.orderBox{
display: flex;
align-items: center;
justify-content: center;
.timeBox{
padding: 30px 20px;
background: #F8EFEC;
.t1{
font-size: 14px;
color: #4D3E39;
text-align: center;
line-height: 19px;
}
.t2{
font-weight: 500;
font-size: 22px;
color: #4D3E39;
margin-top: 4px;
line-height: 31px;
}
}
.qrcodeBox{
display: flex;
align-items: center;
padding: 10px 20px;
padding-right: 18px;
background: #F8EFEC;
margin-left: 3px;
.txt{
width: 28px;
font-size: 14px;
color: #4D3E39;
line-height: 19px;
}
.qrcode{
width: 94px;
margin-left: 13px;
}
}
}
.infoBox{
max-width: 789px;
margin: auto;
margin-top: 50px;
.infoItem{
position: relative;
display: flex;
align-items: flex-start;
padding-top: 19px;
padding-bottom: 22px;
margin-bottom: 2px;
.time{
font-family: DINPro-Black;
font-size: 26px;
color: #333436;
letter-spacing: 0;
height: 100%;
line-height: 30px;
min-width: 155px;
}
.barBox{
margin: 0 50px;
.bar{
position: absolute;
height: 100%;
width: 6px;
top: 0;
background: #F10037;
&.color1{
background: #FFA401;
}
&.color2{
background: #FDD116;
}
}
.yuan{
position: absolute;
width: 16px;
height: 16px;
border: solid 3px #E60012;
border-radius: 100%;
background: #ffffff;
top: 27px;
margin-left: -5px;
}
}
.info{
.title{
font-weight: bold;
font-size: 19px;
color: #333436;
line-height: 30px;
}
.speaker{
display: flex;
align-items: center;
margin-top: 10px;
.avatar{
width: 100px;
height: 100px;
display: block;
margin-right: 20px;
}
.speakerInfo{
.name{
font-weight: 600;
font-size: 17px;
color: #333436;
line-height: 27px;
}
.desc{
font-weight: 300;
font-size: 15px;
color: #727476;
line-height: 22px;
span{
font-weight: 500;
color: #515356;
}
}
}
}
}
&:first-child{
.barBox{
.bar{
border-radius: 6px 6px 0 0;
}
}
}
&:last-child{
.barBox{
.bar{
border-radius: 0 0 6px 6px;
}
}
}
}
}
}
@media (max-width: 767px) {
.content2{
.orderBox{
margin-top: 25px;
.timeBox{
padding: 32px 18px;
.t1{
font-size: 13px;
line-height: 17px;
}
.t2{
font-size: 18px;
line-height: 25px;
margin-top: 9px;
}
}
.qrcodeBox{
padding: 12px 18px;
margin-left: 3px;
.txt{
width: 26px;
font-size: 13px;
line-height: 17px;
}
.qrcode{
width: 88px;
margin-left: 15px;
}
}
}
.infoBox{
margin-top: 20px;
.infoItem{
.time{
font-size: 14px;
min-width: 84px
}
.barBox{
margin-left: 14px;
margin-right: 14px;
.bar{
width: 4px;
}
.yuan{
width: 12px;
height: 12px;
margin-left: -4px;
}
}
.info{
.title{
font-size: 16px;
line-height: 24px;
margin-top: 2px;
}
.speaker{
margin-top: 8px;
.avatar{
width: 80px;
height: 80px;
margin-right: 12px;
}
.speakerInfo{
.name{
font-size: 15px;
line-height: 22px;
}
.desc{
font-size: 13px;
line-height: 18px;
}
}
}
}
}
}
}
}
.content3{
padding-bottom: 0;
.peopleList{
position: relative;
width: 667px;
height: 426px;
margin: auto;
margin-top: 50px;
overflow: hidden;
.swiper-slide{
position: relative;
height: auto !important;
}
.swiper-wrapper {
position: absolute;
bottom: 0;
max-height: 100%;
}
.peopleBox{
display: flex;
align-items: flex-end;
overflow: hidden;
.avatarBox{
margin-bottom: 30px;
.avatar{
width: 60px;
height: 60px;
display: block;
border-radius: 100%;
}
.name{
position: relative;
width: 58px;
height: 24px;
background: #FFFFFF;
border: 1px solid #F1F3F5;
border-radius: 12px;
font-weight: 600;
font-size: 13px;
color: #333436;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: -9px;
}
}
.descBox{
margin-bottom: 30px;
margin-left: 7px;
.sayingBox{
background-image: linear-gradient(266deg, #D80004 0%, #FF7536 95%);
border-radius: 25px 50px 50px 0;
padding: 15px 40px;
// height: 60px;
margin-left: 8px;
margin-bottom: 12px;
display: flex;
align-items: center;
.text{
font-size: 17px;
color: #FFFFFF;
line-height: 24px;
}
}
.desc{
font-weight: 300;
font-size: 13px;
color: #727476;
letter-spacing: 0;
span{
font-weight: 500;
color: #515356;
}
}
}
}
}
}
@media (max-width: 767px) {
.content3{
.peopleList{
width: 100%;
margin-top: 30px;
.peopleBox{
.descBox{
margin-left: 10px;
.sayingBox{
padding: 12px 18px;
margin-bottom: 8px;
margin-left: 0;
.text{
font-size: 14px;
line-height: 20px;
}
}
}
}
}
}
}
.content4{
.newsCellList{
margin-top: 20px;
}
.pagination{
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 0;
}
}
@media (max-width: 767px) {
.content4{
.pagination{
margin-top: 20px;
.txt{
display: none;
}
.jump-ipt{
display: none;
}
.jump-btn{
display: none;
}
}
}
}
.mediaLogoList{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
margin-left: -12px;
margin-right: -12px;
.logoBox{
width: 16.666%;
padding: 0 12px;
margin-bottom: 24px;
.logo{
width: 100%;
display: block;
}
}
}
@media (max-width: 767px) {
.mediaLogoList{
margin-left: -3.5px;
margin-right: -3.5px;
.logoBox{
padding: 0 3.5px;
width: 33.333%;
margin-bottom: 7px;
}
}
}
.logoText{
display: flex;
align-items: center;
max-width: 930px;
margin: auto;
flex-wrap: wrap;
margin-top: 40px;
.textBox{
width: 33.333%;
margin-bottom: 12px;
.text{
height: 65px;
display: flex;
align-items: center;
padding: 0 30px;
font-weight: 500;
font-size: 18px;
color: #333436;
background: #FAFBFC;
margin-left: 6px;
margin-right: 6px;
}
}
}
@media (max-width: 767px) {
.logoText{
margin-top: 20px;
.textBox{
width: 100%;
margin-bottom: 5px;
.text{
margin-left: 0;
margin-right: 0;
font-size: 15px;
justify-content: center;
}
}
}
}
.content7{
.mediaLogoList{
justify-content: center;
}
}
@media (max-width: 767px) {
.content7{
.mediaLogoList{
justify-content: flex-start;
}
}
}HoME日本不卡一区 日本不卡一区二区三区 日本不卡一区二区高清更新 日本不卡一区免费更新一区 日本不卡三区