@charset "utf-8";
html {
/* 基础字体大小设置为62.5%，这样1rem就等于10px */
font-size: 62.5%;
/* 如果需要响应式设计，可以使用媒体查询或更简单的calc函数 */
/* 下面的例子是基于视口宽度的简单响应式设计 */
/* 注意：这里的计算是为了示例，您可能需要根据实际需求调整 */
@media (min-width: 950px) {
/* 当视口宽度大于或等于950px时，保持基础字体大小 */
font-size: 62.5%; /* 实际上，这行是多余的，因为已经设置了基础大小 */
}
@media (max-width: 949px) {
/* 当视口宽度小于950px时，调整字体大小 */
/* 这里的计算是为了让字体大小随着视口宽度变化而平滑过渡 */
font-size: calc(62.5% + (2 * (100vw - 950px)) / 3500); /* 注意：分母可能需要根据实际效果调整 */
}
/* 确保页面内容可见 */
visibility: visible; /* 实际上，这行也是多余的，因为visibility的默认值就是visible */
}
/* 其他样式可以放在这里 */
body {
/* 例如，设置body的字体大小为1.6rem，这相当于16px */
font-size: 1.6rem;
/* 其他样式... */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none;
}
html,
body{
-ms-overflow-style: none;
}
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none;
}
html.wf-active {
visibility: visible;
}
body {
width: 87.7%;
height: 100%;
font-size: 1.6rem;
font-weight: 400;
font-style: normal;
line-height: 1.75;
letter-spacing: .1rem;
word-wrap: break-word;
margin: 0 auto;
padding: 0;
}
body{
font-family: "微软雅黑",sans-serif;
}
header{
font-weight: lighter;
color: white;
width: 100%;
height: 50px;
text-align: center;
margin: 0 auto;
}
.img_div {
width: 15%;
position: relative;
float: left;
margin: 5%;
}
.who{
width: 100%;
}
.mask {
background-image: url(../images/beijing.png);
width: 209px;
height: 199px;
position: absolute;
top: -3px;
left: -19px;
color: #F00;
opacity: 0;
}
.mask h1{
font-weight: lighter;
padding-top: 10%;
}
.mask p{
/*font-weight: lighter;*/
padding-top: 5%;
color: #000;
}
.mask img{
padding-top: 20%;
}
.mask:hover{
opacity: 1;
}
h1,p,a,dl,dt,dd {
margin: 0;
padding: 0;
}
h1 {
font-size: 4rem;
font-weight: 500;
letter-spacing: 1rem;
line-height: 0.85;
margin-bottom: 1%;
}
a {
text-decoration: none;
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
}
dl {
display: flex;
margin: 0;
}
/* header */
header .header_top {
height: auto;
display: block;
width: 87.7%;
justify-content: space-between;
position: fixed;
margin: 0 0 18.9%;
padding-top: .8rem;
background-color: #fff;
z-index: 999;
transition: transform .6s cubic-bezier(0.39,0.575,0.565,1);
/* transition: transform .3s; */
}
header .header_top.hidden{
visibility: hidden;
}
/* header .header_top.scroll_down{
display: none;
transform: translateY(-100%);
} */
header .header_top.scroll_down{
transform: translateY(-100%);
}
@media all and (max-width: 950px){
header .header_top.scroll_down{
display: block;
}
header .header_top {
display: block;
width: 83.2%;
}
}
@media all and (min-width: 951px){
header .header_top.scroll_down{
display: flex;
}
}
header .header_logoBlock{
width: 100%;
position: relative;
}
/* navi js用 */
/* big */
.header_top .logo{
width: 20.1rem;
margin-top: 1.6rem;
}
@media all and (max-width: 950px){
.header_top .logo{
width: 48.1%;
margin-top: 2.2rem;
}
}
/* transiton */
.header_top .logo.pos_top{
transition: .3s width;
}
.header_top .logo.pos_bot,
.header_top.scroll_down .logo:not(.big)
{
width: 15.2rem;
margin: .4rem 0 .4rem;
}
@media all and (max-width: 950px){
.header_top .logo.pos_bot,
.header_top.scroll_down .logo:not(.big){
width: 35.3%;
margin: 3.2% 0 2.2%;
}
}
@media all and (max-width: 950px){
.header_top.scroll_down .logo.big{
width: 50.2%;
margin-top: 1.3rem;
}
}
/* /.navi js用 */
header .logo img {
width: 100%;
}
/* body */
main {
padding-top: 19.5%;
margin: 0 1px;
}
footer {
display: flex;
width: 100%;
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: .06rem;
border-top: solid 1px #000000;
margin: 0 1px 2%;
padding-top: 2%;
}
footer p {
width: 24.2%;
}
footer address,
footer div {
width: 25.8%;
}
footer dl {
display: flex;
flex-wrap: wrap;
}
footer dt {
width: 17.2%;
}
footer dd {
width: 82.8%;
}
beian {
display: flex;
width: 100%;
font-size: 1.2rem;
line-height: 1.5;
letter-spacing: .06rem;
border-top: solid 1px #000000;
margin: 0 1px 1%;
padding-top: 0;
}
beian div {
width: 100%;
text-align: center;
background-color: #CCC;
}
.beian h3{
font-weight: lighter;
padding-top: 10%;
}