// 页面主容器
.main{
padding-top: 80px;
}
// 面包屑
.crumbsContent{
padding: 0;
background: #EFF1F3;
padding-top: 19px;
padding-bottom: 19px;
.txt{
font-size: 16px;
line-height: 22px;
color: #515356;
text-decoration: none;
}
.arrow{
width: 12px;
height: 16px;
margin-left: 12px;
margin-right: 12px;
}
}
// 导航
#menu{
position: fixed;
width: 100%;
height: 80px;
background: #FFFFFF;
top: 0;
z-index: 100;
.menuContent{
height: 100%;
padding-left: 40px;
padding-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.flexBox{
display: flex;
align-items: center;
}
.logo{
height: 52px;
}
.region{
width: 58px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: solid 2px rgba(114, 116, 118, 0.5);
border-radius: 14px;
margin-left: 20px;
box-sizing: border-box;
cursor: pointer;
.text{
font-size: 12px;
line-height: 20px;
color: #515356;
}
.arrow{
display: block;
width: 6px;
height: 6px;
margin-left: 3px;
}
}
.menuList{
position: relative;
height: 100%;
display: flex;
justify-content: space-between;
.btn{
position: relative;
display: block;
height: 100%;
font-size: 16px;
line-height: 80px;
color: #ffffff;
font-weight: 400;
padding: 0;
padding-left: 10px;
padding-right: 10px;
border: 0;
margin: 0;
margin-right: 25px;
border-radius: 0;
overflow: hidden;
word-wrap: normal;
.txt{
color: #222325;
text-decoration: none;
}
&:last-child{
margin-right: 0;
}
.navs{
position: absolute;
width: 180px;
top: 0px;
left: 50%;
margin-left: -90px;
text-align: center;
line-height: 48px;
padding-top: 20px;
font-size: 16px;
opacity: 0;
// display: none;
.nav{
color: #333436;
text-decoration: none;
display: block;
}
}
&:hover{
overflow: inherit;
background: #F6F8FA;
.navs{
top: 80px;
opacity: 1;
// display: block;
transition: all 0.3s ease-out;
}
}
}
}
.language{
font-size: 13px;
line-height: 32px;
color: rgba(114, 116, 118, 0.5);
margin-right: 6px;
cursor: pointer;
.active{
color: #727476;
}
}
.tel{
display: flex;
align-items: center;
font-size: 13px;
line-height: 32px;
color: #222325;
margin-left: 6px;
margin-right: 6px;
.icon{
width: 26px;
height: 26px;
display: block;
}
}
.search{
width: 32px;
height: 32px;
cursor: pointer;
.icon{
display: block;
width: 32px;
height: 32px;
}
}
}
}
// 导航下拉区
.menuDown{
position: fixed;
width: 100%;
height: 100%;
display: none;
z-index: 99;
.infoBox{
position: fixed;
width: 100%;
// height: 100%;
top: 80px;
z-index: 99;
.infoContent{
background: #F6F8FA;
padding-top: 40px;
padding-bottom: 40px;
&.search{
position: absolute;
top: 0;
width: 100%;
text-align: center;
opacity: 0;
.title{
font-size: 22px;
color: #333436;
margin-bottom: 20px;
}
.searchInput{
position: relative;
width: 500px;
height: 48px;
border-radius: 8px;
background: #ffffff;
margin: auto;
.input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0;
background: none;
padding-left: 15px;
font-size: 16px;
color: #707579;
font-weight: 300;
outline: none;
}
.icon{
position: absolute;
width: 32px;
height: 32px;
right: 8px;
top: 8px;
}
}
}
&.region{
position: absolute;
width: 100%;
height: 0;
display: none;
opacity: 0;
left: 0px;
top: 0;
// justify-content: space-between;
padding-left: 280px;
padding-right: 280px;
overflow: hidden;
.regionContainer{
display: flex;
justify-content: space-between;
}
.regionBox{
.regionLabel{
font-size: 13px;
line-height: 17px;
color: #727476;
margin-bottom: 21px;
}
.regionBtn{
font-size: 16px;
line-height: 38px;
color: #333436;
cursor: pointer;
text-decoration: none;
display: block;
&.active{
border-bottom: solid 2px #333436;
}
}
}
}
&.menuHover{
position: absolute;
width: 100%;
height: 0;
opacity: 0;
}
}
}
.mobileMenu{
position: fixed;
width: 100%;
height: 0;
top: 0;
padding-left: 30px;
padding-right: 30px;
padding-top: 50px;
background: #F6F8FA;
z-index: 99;
opacity: 0;
overflow: hidden;
.searchInput{
position: relative;
// width: 330px;
height: 40px;
border-radius: 6px;
background: #ffffff;
margin: auto;
margin-bottom: 30px;
margin-top: 30px;
.input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0;
background: none;
padding-left: 15px;
font-size: 14px;
color: #707579;
font-weight: 300;
outline: none;
}
.icon{
position: absolute;
width: 32px;
height: 32px;
right: 4px;
top: 4px;
}
}
.bar{
height: 1px;
background: rgba(0, 0, 0, 0.1);
opacity: 0.3;
margin-bottom: 30px;
}
.menuBtns{
.menuBtn{
display: block;
font-size: 18px;
line-height: 40px;
color: #333436;
margin-bottom: 20px;
transition: all 0.5s;
font-weight: bold;
text-decoration: none;
&:hover{
font-size: 20px;
}
}
}
.flexBox{
position: absolute;
width: 100%;
bottom: 50px;
left: 0;
display: flex;
justify-content: center;
.language{
font-size: 13px;
line-height: 32px;
color: rgba(114, 116, 118, 0.5);
margin-right: 10px;
cursor: pointer;
.active{
color: #727476;
}
}
.tel{
display: flex;
align-items: center;
font-size: 13px;
line-height: 32px;
color: #727476;
margin-left: 6px;
margin-right: 6px;
.icon{
width: 26px;
height: 26px;
display: block;
}
}
}
}
.bg{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 99;
opacity: 0;
}
}
// banner
#banner{
position: relative;
.pic{
width: 100%;
}
.titleBox{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.title{
font-size: 66px;
color: #fff;
font-weight: bold;
text-align: center;
}
.bannerSwiper{
position: relative;
height: auto;
}
.swiperBtn{
position: absolute;
bottom: 42px;
left: 153px;
z-index: 1;
}
.left, .right{
width: 40px;
height: 16px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.left{
&:hover{
transform: translateX(-10px);
}
}
.right{
margin-left: 20px;
&:hover{
transform: translateX(10px);
}
}
.pagination{
position: absolute;
right: 135px;
left: auto;
text-align: right;
z-index: 1;
}
.swiper-pagination-bullet{
background: #fff;
opacity: 1;
border-radius: 3px;
width: 10px;
height: 10px;
}
.swiper-pagination-bullet-active{
background: #E60012;
}
}
// 内容块标题
.titleContainer{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: end;
}
.titleBox{
.bar{
width: 52px;
height: 6px;
background: #E60012;
border-radius: 3px;
}
.text{
font-size: 40px;
color: #222326;
font-weight: bold;
margin-top: 14px;
line-height: 52px;
.sml{
font-size: 15px;
line-height: 24px;
}
}
}
.button_v2{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #E9463F;
height: 42px;
cursor: pointer;
text-decoration: none;
.text{
font-size: 14px;
line-height: 24px;
color: #fff;
}
.arrow{
position: absolute;
width: 20px;
height: 20px;
right: 11px;
top: 50%;
margin-top: -10px;
}
&:hover{
text-decoration: none;
}
}
// 按钮
.button{
display: block;
height: 40px;
// background: #E9463F;
display: flex;
align-items: center;
cursor: pointer;
.txt{
font-size: 18px;
color: #333436;
font-weight: bold;
line-height: 40px;
}
.arrow{
width: 24px;
height: 12px;
display: block;
margin-left: 10px;
transition: all 0.3s ease-out;
}
&:hover{
text-decoration: none;
.arrow{
transform: translateX(10px);
}
}
}
// loading
.loading{
position: relative;
.icon{
width: 30px;
display: block;
margin: auto;
}
}
// 报道
.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;
}
}
// 新闻
.newsBox{
cursor: pointer;
width: 32%;
display: block;
text-decoration: none !important;
.pic{
width: 100%;
}
.title{
font-size: 18px;
color: #333436;
line-height: 26px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 12px;
}
.desc{
font-size: 13px;
line-height: 24px;
color: #727476;
font-weight: 300;
}
}
// tabs导航
#tabs{
position: relative;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #F5F8FA;
.swiper-container{
margin: 0;
}
.tab{
position: relative;
padding: 19px 29px;
width: 122px;
width: auto;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
.txt{
font-size: 16px;
color: #222326;
line-height: 22px;
text-decoration: none;
}
.bar{
position: absolute;
width: 50%;
height: 4px;
left: 25%;
// margin-left: -31px;
bottom: 0;
background: #E60012;
display: none;
}
&.curr{
.bar{
display: block;
}
}
}
}
// 页尾
#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;
}
}
}
}
// 右侧悬浮按钮
.floatBtnBox{
position: fixed;
top: 310px;
right: 0;
border-radius: 5px 0 0 5px;
// overflow: hidden;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.05);
// background: #FAFAFA;
z-index: 1;
.floatBtn{
position: relative;
display: block;
width: 60px;
cursor: pointer;
.btnIcon{
position: relative;
width: 60px;
border-bottom: solid 1px #FAFAFA;
}
&:first-child{
.btnIcon{
border-radius: 5px 0 0 0;
}
}
&:last-child{
.btnIcon{
border-radius: 0 0 0 5px;
border-bottom: 0;
}
}
&:hover{
.infoBox{
right: 60px;
opacity: 1;
}
}
}
.infoBox{
position: absolute;
display: flex;
justify-content: right;
// right: 60px;
right: -326px;
padding-right: 2px;
opacity: 0;
top: 0;
transition: all 0.3s ease-out;
.arrow{
width: 4px;
height: 10px;
margin-top: 25px;
}
.info{
border-radius: 5px;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.05);
background: #ffffff;
}
&.dianhua{
.info{
width: 229px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
.txt{
font-size: 14px;
color: #333436;
span{
font-size: 16px;
color: #E9463F;
}
}
}
}
&.weixin{
.info{
width: 320px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
.qrcodeBox{
.qecode{
width: 120px;
height: 120px;
display: block;
}
.txt{
font-size: 14px;
color: #333436;
text-align: center;
margin-top: 8px;
}
}
.bar{
position: relative;
width: 1px;
height: 100px;
margin-left: 20px;
margin-right: 20px;
background: rgba(0, 0, 0, 0.08);
}
}
}
}
}
.inputBox{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
.text{
min-width: 100px;
margin-left: 25px;
font-size: 13px;
color: #333436;
}
.input{
width: 100%;
height: 36px;
background: #F1F3F5;
border: 0;
margin-right: 25px;
outline: none;
padding: 8px 9px;
border-radius: 3px;
}
.yzmBox{
display: flex;
justify-content: space-between;
margin-right: 25px;
.input{
margin-right: 0;
}
.yzm{
width: 90px;
height: 36px;
margin-left: 5px;
}
}
}
.err{
color: #E60012;
&::-webkit-input-placeholder {
color: #E60012;
}
&::-moz-placeholder {
color: #E60012;
}
input:-ms-input-placeholder {
color: #E60012;
}
&::-webkit-input-placeholder {
color: #E60012;
}
&::placeholder {
color: #E60012;
}
}
// 浮层弹窗
.floatPage{
display: none;
.bg{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 102;
opacity: 0;
}
.floatInfo{
position: fixed;
width: 360px;
left: 50%;
top: 70%;
margin-left: -180px;
margin-top: -237px;
z-index: 103;
opacity: 0;
.infoBox{
position: relative;
width: 100%;
background: #fff;
border-radius: 5px;
overflow: hidden;
padding-bottom: 25px;
.tab{
display: flex;
justify-content: space-between;
margin-bottom: 25px;
.tabBtn{
width: 50%;
text-align: center;
line-height: 44px;
font-size: 14px;
color: #333436;
background: #F1F3F5;
cursor: pointer;
&.curr{
background: #fff;
}
}
}
.button1{
position: relative;
background: #E9463F;
width: 200px;
height: 42px;
margin: auto;
margin-top: 15px;
cursor: pointer;
.txt{
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
}
.arrow{
position: absolute;
width: 20px;
height: 20px;
top: 11px;
right: 11px;
}
}
}
.floatClose{
position: absolute;
width: 32px;
height: 32px;
left:50%;
margin-left: -16px;
bottom: -47px;
cursor: pointer;
}
.titleBar{
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#fff, #F2F5F8);
padding: 15px 20px;
padding-right: 11px;
.title{
font-size: 15px;
line-height: 20px;
font-weight: bold;
color: #333436;
}
.close{
width: 28px;
height: 28px;
display: block;
opacity: 1;
}
}
}
}
#productNameFloat{
.floatInfo{
width: 664px;
margin-left: -332px;
overflow: hidden;
border-radius: 5px;
.infoBox{
border-radius: 0;
padding: 30px 60px;
.text{
font-size: 14px;
line-height: 26px;
color: #333436;
margin-bottom: 20px;
span{
color: #E9463F;
font-weight: bold;
}
}
.productNameList{
display: flex;
flex-wrap: wrap;
.productName{
font-size: 13px;
line-height: 20px;
color: #333436;
padding: 10px 18px;
background: #F1F3F5;
border-radius: 3;
margin-right: 10px;
margin-bottom: 10px;
}
}
.inputBox{
width: 422px;
margin-top: 10px;
.text{
min-width: 62px;
margin-left: 0;
margin: 0;
}
.input{
margin-right: 0;
}
}
}
}
}
@media (max-width: 1199px) {
#menu{
.menuContent{
.menuList{
.btn{
font-size: 14px;
margin-right: 10px;
}
}
}
}
#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) {
.main{
padding-top: 56px;
}
#menu{
height: 56px;
.menuContent{
padding-left: 20px;
padding-right: 15px;
.logo{
// width: 70px;
height: 40px;
}
.menuList{
.btn{
font-size: 15px;
padding-left: 6px;
padding-right: 6px;
}
}
.mobileIcon{
.openMenu{
width: 32px;
height: 32px;
}
.closeMenu{
width: 32px;
height: 32px;
display: none;
}
}
}
}
#banner{
.pagination{
text-align: left;
right: auto;
left: 0;
padding-left: 25px;
margin: 0;
}
.swiper-pagination-bullet{
height: 6px;
width: 6px;
border-radius: 2px;
}
.titleBox{
.title{
font-size: 32px;
}
}
}
.button{
.txt{
font-size: 16px;
}
.arrow{
width: 20px;
}
}
.titleBox{
.bar{
width: 30px;
height: 4px;
}
.text{
font-size: 25px;
line-height: 33px;
}
}
.newsCellBox{
margin-bottom: 8px;
.title{
font-size: 15px;
line-height: 22px;
}
.date{
margin-top: 5px;
font-size: 12px;
line-height: 17px;
margin-left: 0;
}
}
.newsBox{
width: 100% !important;
margin-bottom: 25px !important;
.title{
font-size: 17px;
margin-top: 15px;
line-height: 24px;
}
}
#tabs{
height: 48px;
.tab{
// width: 90px;
padding: 12px 15px;
.txt{
font-size: 15px;
line-height: 24px;
}
}
}
#footer{
padding-top: 0;
.mapInfo{
flex-wrap: wrap;
padding-top: 50px;
padding-bottom: 50px;
.logo{
position: relative;
// width: 106px;
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;
}
}
}
.floatBtnBox{
top: 290px;
.floatBtn{
width: 50px;
.btnIcon{
width: 50px;
}
.weixin{
.info{
padding-top: 10px;
width: 140px;
height: auto;
display: block;
margin-top: -60px;
padding-bottom: 10px;
.qrcodeBox{
.qecode{
margin: auto;
}
.txt{
margin-top: 0;
}
}
.bar{
width: 100px;
height: 1px;
margin-top: 9px;
margin-bottom: 10px;
}
}
}
}
}
.menuDown{
.infoBox{
top: 50px;
// height: 100%;
.infoContent{
height: 100%;
&.region{
position: relative;
overflow: scroll;
display: block;
width: 100%;
padding: 0;
.regionContainer{
display: flex;
flex-wrap: wrap;
height: max-content;
padding: 30px;
}
// overflow: auto;
.regionBox{
width: 50%;
margin-bottom: 40px;
.regionLabel{
margin-bottom: 10px;
}
}
.region1{
width: 100%;
.regionBtn{
display: inline-block;
}
}
}
}
}
}
.floatPage{
.floatInfo{
.titleBar{
padding: 11px 20px;
padding-right: 11px;
}
}
}
#productNameFloat{
.floatInfo{
width: 96%;
left: 2%;
margin-left: 0;
margin-top: -290px;
.infoBox{
padding: 20px;
.text{
font-size: 12px;
line-height: 26px;
margin-top: -5px;
margin-bottom: 19px;
}
.productNameList{
.productName{
font-size: 12px;
line-height: 20px;
padding: 8px 10px;
}
}
.inputBox{
width: 100%;
}
}
}
}
}HoME日本不卡一区 日本不卡一区二区三区 日本不卡一区二区高清更新 日本不卡一区免费更新一区 日本不卡三区