/*
id用#
class用.
直接标签不用标识
*/
header{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:"Microsoft YaHei",Verdana,sans-serif;outline:0}
header{position:relative;height:100vh;background-repeat:no-repeat;background-position:top;background-size:cover;z-index:9;}
header:after{background:#23292f;content:"";display:block;height:100%;position:absolute;top:0;width:100%;z-index:-1;opacity:.7}

@media screen and (max-width:480px){
/*   
大于=(min-width: 480px)不会显示 屏幕尺寸的意思
小于=(max-width: 480px)不会显示 屏幕尺寸的意思
*/
header button span{display:none}
}

.head_b{text-align:center;position:absolute;top:50%;left:0;right:0;padding:0 20px;margin-top:-150px;}
.head_b .page-name{font-size:60px;line-height:150%;margin-bottom:20px;font-weight: bold;color:#338ad9;}
.head_b .page-name a{color:#338ad9;text-decoration: none;}
.head_b .page-subname{font-size:32px;color:#ffffff;line-height:150%;margin:0 0 30px 0;font-weight: normal;}
.head_b p{font-size:16px;color:#ffffff;line-height:150%;margin:0 0 30px 0;}
.head_b{margin-top:-200px;}/*max-width:720px*/
.head_b .page-name{font-size:40px;margin-bottom:25px;}/*max-width:720px*/
.head_b .page-subname{font-size:20px;margin:0 0 30px 0;}/*max-width:720px*/
.head_b p{font-size:14px;margin:0 0 30px 0;}/*max-width:720px*/
@media screen and (max-width:720px){
/*   
大于=(min-width: 720px)不会显示 屏幕尺寸的意思
小于=(max-width: 720px)不会显示 屏幕尺寸的意思
*/
}
@media screen and (max-width:480px){
/*   
大于=(min-width: 480px)不会显示 屏幕尺寸的意思
小于=(max-width: 480px)不会显示 屏幕尺寸的意思
*/  
.head_b{margin-top:-250px;}
.head_b .page-name{font-size:30px;line-height: 120%;margin-bottom:30px;}
.head_b .page-subname{font-size:18px;}
}

/*  btn按钮 开始  */
.btn{padding:12px 30px;display:inline-block;margin-bottom:20px;color:rgba(255,255,255,.7);background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);border-style:solid;border-width:1px;border-radius:3px;transition:color .2s,background-color .2s,border-color .2s;box-sizing:border-box}
.btn:hover{color:rgba(255,255,255,.8);text-decoration:none;background-color:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}
.btn+.btn{margin-left:20px}
/*  btn按钮 结束  */

@media screen and (max-width:480px){
/*   
大于=(min-width: 480px)不会显示 屏幕尺寸的意思
小于=(max-width: 480px)不会显示 屏幕尺寸的意思
*/  
.btn{width:100%;padding:8px 30px;}
.btn+.btn{margin-left:0}  
}

.down_main{position:absolute;bottom:30px;right:50%;margin-right:-15px;width:30px;height:30px;line-height:30px;overflow: hidden;text-align: center;z-index: 9;animation: arrow .5s ease-out .5s infinite alternate;}
.down_main a{display: block;color: #999999;cursor:pointer;font-size: 24px; }
@keyframes arrow{
    from{bottom:30}
    to{bottom:35px;}
} 
.down_main a:hover{text-decoration: none;}
.down_main:hover{animation: initial}

a{text-decoration:none;color:#333;}

*{padding:0;margin:0;border:0}

/* dingbu 开始*/ 
.dingbu{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:"Microsoft YaHei",Verdana,sans-serif;outline:0}
.dingbu{position:relative;height:100vh;background-repeat:no-repeat;background-position:top;background-size:cover;z-index:9;}
.dingbu:after{background:#23292f;content:"";display:block;height:100%;position:absolute;top:0;width:100%;z-index:-1;opacity:.7}
/* dingbu 结束*/ 
/* 上面是主要内容 */