/*预设*/
body,html,p,h1,h2,h3,h4,h5,h6,ul,li,ol{ margin: 0; padding: 0}
a{ text-decoration: none;}
ul,li{ list-style: none;}
i{ font-style: normal;}
input,textarea{ border: none;}
.logo{cursor: pointer;}
body,html{ width: 100%; height: 100%; font-family: "微软雅黑","宋体";}
.clearfix:after{ content: '200B'; height: 0; line-height: 0; margin: auto; display: block; font-size: 0; clear: both;}

.inner{ width: 90%; margin: 0 auto;}

/*header*/
.header{ width: 100%; height: 70px; background-color: #030303; position: fixed; top: 0; z-index: 5;}

.header .logo{ float: left; padding-left: 50px; width: 11%;}
.header .logo img{ width: 100%;}

.header .nav{ float: right; padding-right: 180px;}
.header .nav ul li{ float: left; position: relative; height: 67px; line-height: 67px;}
.header .nav ul li.diff{ border-bottom: 3px solid white;}
.header .nav ul li.diff a{ color: white;}
.header .nav ul li.check{ border-bottom: 3px solid white;}
.header .nav ul li.check a{ color: white;}
.header .nav ul li>a{ display: block; color: rgba(201,201,201,1); padding: 0 30px; font-size: 14px;}
.header .nav ul li .list{ min-width: 150px; position: absolute; left: 0; top: 70px;background-color: #fcfcfc;
    display: none; border: 1px solid gainsboro; box-shadow:0 2px 5px rgba(0,0,0,0.5);}
.header .nav ul li .list>a{ display: block; font-size: 14px; color: #000; text-align: center; line-height: 5vh;
    margin: 1vh 0; color: #333;}
.header .nav ul li .list>a.diffa{ background-color:#f1f1f1;}

.header .smallnav{ width: 42px; height: 25px; float: right; margin: 20px 10% 0 0; display: none; z-index: 10;}
.header .smallnav .navlogo{ width: 42px; height: 5px; border-radius: 4px; background-color: #ababab; position: relative;
    transition: transform 0.5s ease;}
.header .smallnav .navlogo:before{ content: ''; display: block; width: 42px; height: 5px; border-radius: 4px;
    background-color: #ababab; position: absolute; top: 10px; transition: transform 0.5s ease;}
.header .smallnav .navlogo:after{content: ''; display: block; width: 42px; height: 5px; border-radius: 4px;
    background-color: #ababab;  position: absolute; top: 20px; transition: transform 0.5s ease;}

.header .smallnav .navlogo.close{ height: 0;}
.header .smallnav .navlogo.close:before{ transform: rotate(45deg) translate(7px)}
.header .smallnav .navlogo.close:after{ transform: rotate(-45deg) translate(7px)}


.header .smallnav .smallnav_list{ width: 100%; height:0; opacity: 0; background-color: rgba(0,0,0,1); position: absolute;
    left: 0; top: 70px; transition: all 0.3s ease; overflow: auto;}
.header .smallnav .smallnav_list ul{ width: 90%; margin:0 auto; padding-bottom: 100px;}
.header .smallnav .smallnav_list li{ height: 45px;line-height: 45px; border-bottom: 1px solid #ababab;}
.header .smallnav .smallnav_list li a{ font-size: 14px; color: #ababab; display: block;}
.header .smallnav .smallnav_list li a:hover{ color: white;}

.header .smallnav .smallnav_list.show{ height: 100vh;opacity: 1;}

/*main*/
.main .application_requirements{ width: 80%; height: 10%; border: 1px solid lightgray;
    box-shadow: 5px 5px 5px #ccc; margin:7% 0 5% 3%;position: relative; padding: 9% 5% 5%; display: none;}
.main .application_requirements h5{ display: block;width: 30%; height: 5vh; line-height: 5vh; background-color: #0e9ea3;
    color: white; text-align: center; border-radius: 2px 50%; position: absolute; top: -15px; left: 15px;
    box-shadow: 5px 5px 5px #ccc;}
.main .application_requirements p{ font-size: 14px; color: #333; margin: 5% 0;}
.main .application_requirements p i{ display: inline-block; width: 6px; height: 6px; border: 1px solid #000;
    border-radius: 50%; margin-right: 6px;}
@media screen and ( max-width:767px ){
    .main .lists .problem{ display: none;}
    .main .application_requirements{ display: block;}
}

/*footer*/
.footer{ width: 100%;background-color: #030303; color: rgba(201,201,201,1);
    text-align: center; position: relative;}
.footer span{ font-size: 12px; line-height: 35px;}

@media screen and ( max-width:1700px ){
    .header .logo{ width: 12%;}
}
@media screen and ( max-width:1500px ){
    .header .logo{ width: 14%;}
}
@media screen and ( max-width:1500px ){
    .header .logo{ width: 16%;}
}
@media screen and ( max-width:1100px ){
    .header .logo{ padding-left: 0; width: 20%;}
    .header .nav{ padding-right: 100px;}
}
@media screen and ( max-width:950px ){
    .header .nav{ padding-right: 0;}
}
@media screen and ( max-width:800px ){
    .header .logo{ width: 28%;}
    .header .nav{ display: none;}
    .header .smallnav{ display: block;}

}
@media screen and ( max-width:415px ){
    .header .logo{ width: 35%;}
    .header .logo img{ padding-top: 7%;}

    .footer{ width: 90%; padding: 1% 5%;}
    .footer span{ line-height: 0px;}
}
@media screen and ( max-width:375px ){
    .header{ height: 50px;}
    .header .smallnav{ margin: 15px 10% 0 0;}
    .header .smallnav .smallnav_list{ top: 50px;}
    .header .logo img{ padding-top: 3%;}
}
@media screen and ( max-width:321px ){
    .header .logo{ width: 35%;}
    .header .logo img{ padding-top: 5%;}
}