// ---------------------------------------------
// 导航组件
#menu{
position: fixed;
width: 100%;
height: 88px;
background: rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-out;
z-index: 100;
.container{
position: relative;
height: 100%;
}
.menuContent{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
.logoBox{
display: flex;
align-items: center;
.logo{
height: 50px;
}
.bar{
width: 1px;
height: 24px;
opacity: 0.2;
background: #FFFFFF;
margin: 0px 20px;
}
.xfqy{
height: 28px;
}
}
.menuList{
display: flex;
align-items: center;
margin-left: 25px;
height: 100%;
.menuBtn{
position: relative;
padding: 0 20px;
height: 100%;
display: flex;
align-items: center;
.txt{
position: relative;
font-size: 15px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
z-index: 1;
}
.navs{
position: absolute;
top: 0;
opacity: 0;
height: 0;
padding-top: 108px;
overflow: hidden;
transition: all 0.3s ease-out;
.nav{
display: flex;
align-items: center;
justify-content: center;
line-height: 48px;
font-size: 16px;
padding: 0 20px;
color: #333436;
cursor: pointer;
text-decoration: none;
}
}
&:hover{
background: rgba(0, 0, 0, 0.2);
.navs{
display: block;
height: 380px;
opacity: 1;
}
}
}
}
.rightFlexBox{
position: absolute;
right: 0;
display: flex;
align-items: center;
.openMenu{
width: 32px;
.icon{
width: 100%;
}
}
.closeMenu{
width: 32px;
display: none;
}
}
}
}
@media (max-width: 767px) {
#menu{
height: 56px;
.menuContent{
.logoBox{
.logo{
height: 32px;
}
.bar{
height: 18px;
margin: 0 12px;
}
.xfqy{
height: 18px;
}
}
}
}
}
// ---------------------------------------------
// ---------------------------------------------
// 手机端导航
.mobildMenu{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 101;
display: none;
.black{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000000;
}
.info{
position: absolute;
width: 300px;
height: 100%;
right: 0;
top: 0;
background: #FFFFFF;
padding: 80px 30px;
.close{
position: absolute;
left: 12px;
top: 12px;
width: 32px;
display: block;
opacity: 1;
}
.menuList{
.nav{
display: block;
font-weight: bold;
font-size: 17px;
color: #333436;
line-height: 40px;
margin-bottom: 20px;
}
}
}
}
// ---------------------------------------------
// 头图
.banner{
position: relative;
.pic{
position: relative;
width: 100%;
display: block;
}
.infoBox{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
.text{
position: relative;
font-weight: bold;
font-size: 66px;
color: #FFFFFF;
letter-spacing: 20px;
text-align: center;
display: inline-block;
}
.icon{
position: absolute;
width: 16px;
height: 16px;
left: -16px;
top: -16px;
}
}
}
@media (max-width: 767px) {
.banner{
.paginations{
.container{
.swiper-pagination{
text-align: center;
}
}
}
.infoBox{
.text{
font-weight: bold;
font-size: 32px;
color: #FFFFFF;
letter-spacing: 3px;
text-align: center;
}
.icon{
width: 8px;
height: 8px;
left: -8px;
top: -8px;
}
}
&.alone{
height: 260px;
.picBox{
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.pic{
width: auto;
height: 100%;
}
.infoBox{
.container{
width: 100%;
}
.text{
font-size: 34px;
margin-left: 35px;
}
}
}
}
}
// ---------------------------------------------
// ---------------------------------------------
// 业内块容器
.content{
position: relative;
padding-top: 80px;
padding-bottom: 80px;
}
@media (max-width: 767px) {
.content{
padding-top: 30px;
padding-bottom: 50px;
}
}
// ---------------------------------------------
// ---------------------------------------------
// 内容块标题
.titleBox{
position: relative;
.en{
opacity: 0.1;
font-family: Poppins-Bold;
font-size: 100px;
color: #BC9C95;
text-align: center;
line-height: 140px;
}
.bar{
position: absolute;
width: 30px;
height: 4px;
background: #E60012;
left: 50%;
margin-left: -15px;
bottom: 85px;
}
.cn{
position: absolute;
width: 100%;
font-weight: bold;
font-size: 44px;
color: #222325;
text-align: center;
bottom: 19px;
}
}
@media (max-width: 991px) {
.titleBox{
.en{
font-size: 80px;
}
}
}
@media (max-width: 767px) {
.titleBox{
height: 68px;
.en{
font-size: 44px;
line-height: 44px;
}
.bar{
width: 20px;
height: 3px;
bottom: 39px;
}
.cn{
font-size: 28px;
line-height: 37px;
bottom: 0;
}
}
}
// ---------------------------------------------
// 按钮
.button{
position: relative;
width: 100%;
height: 50px;
background: #E60012;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
.txt{
font-weight: bold;
font-size: 15px;
color: #FFFFFF;
text-align: center;
}
.arrow{
position: absolute;
width: 22px;
height: 22px;
top: 50%;
margin-top: -11px;
right: 15px;
display: block;
transition: all 0.3s ease-out;
}
&:hover{
text-decoration: none;
.arrow{
transform: translateX(10px);
}
}
}
// 页尾
#footer{
background: #505558;
.mapInfo{
display: flex;
justify-content: space-between;
padding-top: 60px;
padding-bottom: 51px;
overflow: initial;
.logo{
height: 79px;
display: block;
}
.maps{
display: flex;
justify-content: space-between;
.navBox{
width: 80px;
margin-right: 20px;
&:last-child{
margin-right: 0;
}
.nav{
font-size: 14px;
color: #ffffff;
font-weight: 400;
margin-bottom: 10px;
display: block;
}
.navBtn{
font-size: 13px;
color: #ffffff;
opacity: 0.6;
font-weight: 300;
line-height: 23px;
display: block;
}
}
}
.qrcodeInfo{
.title{
font-size: 14px;
color: #ffffff;
opacity: 0.6;
margin-bottom: 15px;
text-align: center;
}
.qrcodes{
position: relative;
display: flex;
.qrcodeBox{
position: relative;
margin-right: 15px;
cursor: pointer;
&:last-child{
margin-right: 0;
}
.weixin{
width: 60px;
}
.qrcode{
width: 100px;
}
.name{
font-size: 11px;
color: #ffffff;
opacity: 0.6;
line-height: 23px;
margin-top: 2px;
}
.hoverBox{
position: absolute;
left: -50px;
bottom: 120px;
opacity: 0;
transition: all 0.3s ease-out;
.hoverCode{
width: 160px;
padding: 20px;
padding-bottom: 12px;
background: #fff;
border-radius: 5px;
.img{
display: block;
width: 120px;
}
.txt{
font-size: 14px;
color: #333436;
margin-top: 5px;
text-align: center;
}
}
.arrow{
width: 10px;
height: 4px;
display: block;
margin: auto;
}
}
&:hover{
.hoverBox{
opacity: 1;
bottom: 90px;
}
}
}
}
}
}
.copyright{
background: #484E52;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
.txt{
font-size: 12px;
color: #868C92;
line-height: 20px;
}
.linkBtn{
font-size: 12px;
color: #AEB3B8;
line-height: 20px;
a{
color: #AEB3B8;
}
}
}
}
@media (max-width: 1199px) {
#footer{
position: relative;
padding-top: 20px;
.mapInfo{
padding-top: 120px;
.logo{
position: absolute;
top: 30px;
left: 50%;
margin-left: -53px;
}
.maps{
.navBox{
margin-right: 20px;
}
}
}
}
}
@media (max-width: 991px) {
#footer{
padding-top: 20px;
position: relative;
.mapInfo{
.logo{
position: absolute;
top: 30px;
left: 50%;
margin-left: -53px;
}
.maps{
.navBox{
margin-right: 10px;
}
}
}
}
}
@media (max-width: 767px) {
#footer{
padding-top: 0;
.mapInfo{
flex-wrap: wrap;
padding-top: 50px;
padding-bottom: 50px;
.logo{
position: relative;
height: 70px;
left: auto;
top: auto;
margin: auto;
}
.qrcodeInfo{
width: 100%;
margin-top: 20px;
.title{
text-align: center;
}
.qrcodes{
justify-content: center;
margin-top: 10px;
.qrcodeBox{
.qrcode{
width: 100px;
height: 100px;
}
.name{
text-align: center;
font-size: 13px;
line-height: 23px;
margin-top: 5px;
}
&:hover{
.hoverBox{
display: none;
}
}
}
}
}
}
.copyright{
.txt{
font-size: 12px;
line-height: 20px;
font-weight: 300;
}
}
}
}
// 报道
.newsCellBox{
position: relative;
width: 100%;
padding: 18px 20px;
padding-bottom: 16px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
margin-bottom: 12px;
text-decoration: none;
display: block;
background: #fff;
.title{
font-size: 19px;
line-height: 28px;
color: #333436;
font-weight: 500;
&.ml10{
margin-left: 10px;
}
}
.date{
font-size: 13px;
line-height: 18px;
color: #727476;
margin-top: 6px;
font-weight: 300;
margin-left: 10px;
}
.arrow{
position: absolute;
right: 20px;
top: 50%;
width: 20px;
margin-top: -10px;
}
&:hover{
text-decoration: none;
}
}
@media (max-width: 767px) {
.newsCellBox{
margin-bottom: 8px;
.title{
font-size: 15px;
line-height: 22px;
}
.date{
margin-top: 5px;
font-size: 12px;
line-height: 17px;
margin-left: 0;
}
}
}
// loading
.loading{
position: relative;
.icon{
width: 30px;
display: block;
margin: auto;
}
}HoME日本不卡一区 日本不卡一区二区三区 日本不卡一区二区高清更新 日本不卡一区免费更新一区 日本不卡三区