*{
    margin:0px;
    padding:0px;
    /* li标签的默认样式 */
    list-style:none;
    /* a链接的默认样式 */
    text-decoration: none;
    /* 触摸元素出现背景问题 */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
  }
  html,body{
    /* 保证所有浏览器的默认字体统一 */
    font-family: sans-serif;
    /* 禁止ios在wx端打开字体放大缩小 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust:100%          !important;
    -moz-text-size-adjust:100%     !important;
  }
@font-face {
    font-family: "MyFont";
    src: url('../assets/Font/font.TTF');
}
/* 滚动条 */
::-webkit-scrollbar {
    width:8px;
    height:0px;
    background: #a21f25;
}
::-webkit-scrollbar-thumb {
    width:8px;
    border-radius:20px;
    background: rgb(220, 220, 220);
    transition: all .4s;
}
::-webkit-scrollbar-thumb:hover{
    width:8px;
    background: rgb(255, 255, 255);
}
img,video{
  border:0;
  vertical-align: middle;
}

.box{
    width:100%;
    background: url('../assets/Img/2-bg.jpg');
    padding-bottom:100px;
}

@media screen and (orientation: landscape) {
    .top{
        width:80%;
        margin: 0 auto;
        margin-top:-15px;
        height:60px;
        border-bottom-left-radius:45px;
        border-bottom-right-radius:45px;
        border:3px solid #d7a06c;
        background: #9f292d;
    }
    .animal > .title{
        padding-top:70px;
        padding-bottom:60px;
        font-family:MyFont;
        color: #fff;
        font-size:50px;
        text-align: center;
    }
    .animal > .title > span{
        position: relative;
    }
    .animal > .title > span > li{
        position: absolute;
        border:2.5px solid #fff;
        bottom:15px;
        width:17px;
        height:17px;
        border-radius: 50%;
        background: #304746;
    }
    .animal > .title > span > .left{
        left:-30%;
    }
    .animal > .title > span > .right{
        right:-30%;
    }
    .pageBox{    
        width:80%;
        margin: 0 auto;
        padding-bottom:50px;
        padding-top:70px;
        border-radius:45px;
        border:3px solid #d7a06c;
        background: #9f292d;
    }
    .imgBox{
        width:60%;
        margin: 0 auto;
    }
    .imgBox img{
        width:100%;
        border-radius:2px;
        margin-top:40px;
    }
    .imgBox div{
        text-align: center;
        color: #fff;
        font-size:20px;
        line-height:2;
        margin-top:20px;
    }
    .pageBox > li{
        width: 90%;
        margin: 0 auto;
        margin-top:30px;
        margin-bottom:30px;
        color: #fff;
        font-size:20px;
        font-weight:300;
        line-height: 2;
        text-align: justify;
    }
    .pageBox > div{
        text-align: center;
        margin-top:60px;
    }
    .pageBox > div > a{
        font-size:24px;
        font-weight:300;
        color: #d7a06c;
        transition: all .4s;
        position: relative;
        padding-right:20px;
        font-family: MyFont;
    }
    .pageBox > div > a > p{
        position: absolute;
        background: #d7a06c;
        width:40px;
        height:2px;
        right:-30px;
        top:45%;
    }
    .pageBox > div > a > li{
        position: absolute;
        width:6px;
        height:6px;
        border-radius:50%;
        border:2px solid #d7a06c;
        right:-40px;
        top:30.2%;
    }
    .pageBox > div > a > img{
        width:400px;
        border-radius: 3px;
    }
    a:hover{
        margin-left:40px;
    }
}

@media screen and (orientation: portrait) {
    .top{
        width:90%;
        margin: 0 auto;
        margin-top:-15px;
        height:35px;
        border-bottom-left-radius:25px;
        border-bottom-right-radius:25px;
        border:2px solid #d7a06c;
        background: #9f292d;
    }
    .animal > .title{
        padding-top:30px;
        font-family:MyFont;
        color: #fff;
        font-size:26px;
        text-align: center;
    }
    .animal > .title > span{
        position: relative;
    }
    .animal > .title > span > li{
        position: absolute;
        border:2.5px solid #fff;
        bottom:8px;
        width:10px;
        height:10px;
        border-radius: 50%;
        background: #304746;
    }
    .animal > .title > span > .left{
        left:-40px;
    }
    .animal > .title > span > .right{
        right:-40px;
    }

    .pageBox{    
        width:90%;
        margin: 0 auto;
        margin-top: 30px;
        border-radius:20px;
        border:2px solid #d7a06c;
        background: #9f292d;
        padding-top:20px;
    }
    .imgBox{
        width:80%;
        margin: 0 auto;
    }
    .imgBox img{
        width:100%;
        margin-top:10px;
        margin-bottom:10px;
        border-radius:2px;
    }
    .imgBox div{
        text-align: center;
        color: #fff;
        font-size:14px;
        line-height:1.75;
        margin-bottom:30px;
    }
    .pageBox > li{
        width: 90%;
        margin: 0 auto;
        margin-bottom:20px;
        color: #fff;
        font-size:14px;
        font-weight:300;
        line-height: 1.75;
        text-align: justify;
    }
    .pageBox > div{
        text-align: center;
        margin-bottom:20px;
    }
    .pageBox > div > a{
        font-size:14px;
        font-weight:300;
        color: #d7a06c;
        position: relative;
        font-family: MyFont;
    }
    .pageBox > div > a > p{
        position: absolute;
        background: #d7a06c;
        width:30px;
        height:1px;
        right:-37px;
        top:45%;
    }
    .pageBox > div > a > li{
        position: absolute;
        width:6px;
        height:6px;
        border-radius:50%;
        border:1px solid #d7a06c;
        right:-44px;
        top:30.2%;
    }
    .pageBox > div > a > img{
        width:60%;
        border-radius: 3px;
    }
}