/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
 body {
     line-height: 1;
 }
 ol, ul {
     list-style: none;
 }
 blockquote, q {
     quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
     content: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }

.home{
    width: 100%;
    /* background-image: url("../images/home_banner.jpg"); */
}
 .home .nav{
     width: 500px;
     margin: 0 auto;
     position: fixed;
     left:32%;
     top:30px;
 }
 .home .nav ul li{
    float: left;
    color: #fff;
    padding: 10px 15px;
 }
.home .nav ul li{
    cursor: pointer;
}
.home .nav ul li a{
    text-decoration: none;
    color: #fff;
}
.home .nav ul li:hover{
    background: rgba(255,0 , 0, 0.2);
   
    color: #fff;
}
.home .nav ul li a div{
    line-height: 20px;
}
.home .nav ul li :nth-child(2){
    font-size: 10px;
}


.about .nav{
     width: 500px;
     margin: 0 auto;
     padding-top: 30px;
 }
 .about .nav ul li{
    float: left;
    color: #333;
    padding: 10px 15px;
 }
.about .nav ul li{
    cursor: pointer;
}
.about .nav ul li a{
    text-decoration: none;
    color: #333;
}
.about .nav ul li:hover{
    background: rgba(255,0 , 0, 0.2);
   
    color: #333;
}
.about .nav ul li a div{
    line-height: 20px;
}
.about .nav ul li :nth-child(2){
    font-size: 10px;
}
.about .content{
    margin: 0 auto;
    width: 1000px;
    /*background: #333;*/
    display: flex;
    padding-top: 35px;
}
.about .content .left{
    flex: 1;
}
.about .content .right{
  padding-left: 22px;
  width: 600px;
}
.about .content .right h4{
    font-size: 22px;
    margin-bottom: 15px;
}
.about .content .right ul{
    margin-bottom: 15px;
}
.about .content .right ul li{
    font-size: 14px;
    color: #666;
    line-height: 25px;
}
.about .content .right p{
    text-indent: 2rem;
    font-size: 14px;
    line-height: 25px;
}

.work .nav{
    width: 500px;
    margin: 0 auto;
    padding-top: 30px;
}
.work .nav ul li{
   float: left;
   color: #333;
   padding: 10px 15px;
}
.work .nav ul li{
   cursor: pointer;
}
.work .nav ul li a{
   text-decoration: none;
   color: #333;
}
.work .nav ul li:hover{
   background: rgba(255,0 , 0, 0.2);
  
   color: #333;
}
.work .nav ul li a div{
   line-height: 20px;
}
.work .nav ul li :nth-child(2){
   font-size: 10px;
}

.work .content{
    margin: 0 auto;
    width: 1000px;
    padding-top: 35px;
}
.work .content .work_content{
    /* display: flex; */
    /* float: left; */
}
.work .content .work_content div{
    /* padding-right: 10px; */
}
.work .content .work_content img{
    /* padding-top:10px; */
    /* margin:10px; */
}
.work .content .title{
    clear:left;
    line-height: 35px;
    margin: 20px 0;
}
.work .content .title h4{
    width: 70px;
    border-bottom: 2px solid #333;
}

.contact .nav{
    width: 500px;
    margin: 0 auto;
    padding-top: 30px;
}
.contact .nav ul li{
   float: left;
   color: #333;
   padding: 10px 15px;
}
.contact .nav ul li{
   cursor: pointer;
}
.contact .nav ul li a{
   text-decoration: none;
   color: #333;
}
.contact .nav ul li:hover{
   background: rgba(255,0 , 0, 0.2);
  
   color: #333;
}
.contact .nav ul li a div{
   line-height: 20px;
}
.contact .nav ul li :nth-child(2){
   font-size: 10px;
}

.contact .content{
    margin: 0 auto;
    width: 100%;
    margin-top: 35px;
}
.contact .footer, .home .footer, .about .footer, .work .footer, .honor .footer,
.portrait .footer,
.spotRecord .footer,
.comparison .footer,
.scenery .footer,
.animal .footer{
    width: 100%;
    line-height:45px; 
    background: #e5e5e5;
    /* text-align: center; */
}
.contact .footer ul, .home .footer ul, .about .footer ul,.work .footer ul, .honor .footer ul,
.portrait .footer ul,
.spotRecord .footer ul,
.comparison .footer ul,
.scenery .footer ul,
.animal .footer ul{
    margin: 0 auto;
    width: 1000px;
}
.contact .footer ul li,.home .footer ul li, .about .footer ul li, .work .footer ul li, .honor .footer ul li,
.portrait .footer ul li,
.spotRecord .footer ul li,
.comparison .footer ul li,
.scenery .footer ul li,
.animal .footer ul li{
    float: left;
    padding: 0 20px;
    font-size: 14px;
}
.contact .footer ul li a,.home .footer ul li a, .about .footer ul li a, .work .footer ul li a, .honor .footer ul li a,
.portrait .footer ul li a,
.spotRecord .footer ul li a,
.comparison .footer ul li a,
.scenery .footer ul li a,
.animal .footer ul li a{
    color: #333;
    text-decoration: none;
}
.contact .footer ul li:nth-child(1),.honor .footer ul li:nth-child(1), .home .footer ul li:nth-child(1), .about .footer ul li:nth-child(1), .work .footer ul li:nth-child(1),
.portrait .footer ul li:nth-child(1),
.spotRecord .footer ul li:nth-child(1)
.comparison .footer ul li:nth-child(1)
.animal .footer ul li:nth-child(1)
.scenery .footer ul li:nth-child(1){
    padding: 0 140px 0 0;
    color: #666;
}



.honor .nav, .portrait .nav, .spotRecord .nav,
.comparison .nav,
.scenery .nav,
.animal .nav{ 
    width: 500px;
    margin: 0 auto;
    padding-top: 30px;
}
.honor .nav ul li, .portrait .nav ul li, .spotRecord .nav ul li,
.comparison .nav ul li,
.scenery .nav ul li,
.animal .nav ul li{
   float: left;
   color: #333;
   padding: 10px 15px;
}
.honor .nav ul li, .portrait .nav ul li,.spotRecord .nav ul li,
.comparison .nav ul li,
.scenery .nav ul li,
.animal .nav ul li{
   cursor: pointer;
}
.honor .nav ul li a, .portrait .nav ul li a, .spotRecord .nav ul li a,
.comparison .nav ul li a,
.scenery .nav ul li a,
.animal .nav ul li a{
   text-decoration: none;
   color: #333;
}
.honor .nav ul li:hover, .portrait .nav ul li:hover, .spotRecord .nav ul li:hover,
.comparison .nav ul li:hover,
.scenery .nav ul li:hover,
.animal .nav ul li:hover{
   background: rgba(255,0 , 0, 0.2);
  
   color: #333;
}
.honor .nav ul li a div, .portrait .nav ul li a div, .spotRecord .nav ul li a div,
.comparison .nav ul li a div,
.scenery .nav ul li a div,
.animal .nav ul li a div{
   line-height: 20px;
}
.honor .nav ul li :nth-child(2), .portrait .nav ul li :nth-child(2), .spotRecord .nav ul li :nth-child(2),
.comparison .nav ul li :nth-child(2),
.scenery .nav ul li :nth-child(2),
.animal .nav ul li :nth-child(2){
   font-size: 10px;
}

.honor{
    width: 100%;
    height:900px;
    background: url("../images/bg_01.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}

.honor .content, .portrait .content,.spotRecord .content,
.comparison .content,
.scenery .content,
.animal .content{
    width: 1000px;
    height:520px;
    margin:232px auto 0 auto;
    /* border:2px solid red; */
    display: flex;
    line-height: 515px;
}
.honor .content div:nth-child(2), .portrait .content div:nth-child(2), .spotRecord .content div:nth-child(2),
.comparison .content div:nth-child(2),
.scenery .content div:nth-child(2),
.animal .content div:nth-child(2){
    text-align: center;
    /* padding: 30px 0; */
    flex: 1;
}
.honor .content div:nth-child(1), .honor .content div:nth-child(3),
.portrait .content div:nth-child(1), .portrait .content div:nth-child(3),
.spotRecord .content div:nth-child(1), .spotRecord .content div:nth-child(3),
.comparison .content div:nth-child(1), .comparison .content div:nth-child(3),
.scenery .content div:nth-child(1), .scenery .content div:nth-child(3),
.animal .content div:nth-child(1), .animal .content div:nth-child(3){
    width: 78px;
    line-height: 515px;
 
}
.honor .content div:nth-child(1):hover, .honor .content div:nth-child(3):hover,
.portrait .content div:nth-child(1):hover, .portrait .content div:nth-child(3):hover,
.spotRecord .content div:nth-child(1):hover, .spotRecord .content div:nth-child(3):hover,
.comparison .content div:nth-child(1):hover, .comparison .content div:nth-child(3):hover,
.scenery .content div:nth-child(1):hover, .scenery .content div:nth-child(3):hover,
.animal .content div:nth-child(1):hover, .animal .content div:nth-child(3):hover{
    background-color: #ccc;
    background-image: linear-gradient(to right, #ccc , #ccc);
    cursor: pointer;
    transition:2s;
}

.portrait{
    width: 100%;
    height:900px;
    background: url("../images/bg_02.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}
.spotRecord{
    width: 100%;
    height:900px;
    background: url("../images/bg_03.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}
.comparison{
    width: 100%;
    height:900px;
    background: url("../images/bg_04.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}
.scenery{
    width: 100%;
    height:900px;
    background: url("../images/bg_05.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}
.animal{
    width: 100%;
    height:900px;
    background: url("../images/bg_06.jpg") no-repeat;
    background-size: contain;
    /* margin-top: 35px; */
}
.portrait .nav ul li{
    float: left;
    color: #fff;
    padding: 10px 15px;
 }
 .portrait .nav ul li a{
    text-decoration: none;
    color: #fff;
 }
 .portrait .footer ul li:nth-child(1){
    padding: 0 140px 0 0;
    color: #fff;
}
.portrait .footer ul li:nth-child(2),.portrait .footer ul li:nth-child(3),.portrait .footer ul li:nth-child(4),.portrait .footer ul li:nth-child(5){
    color:#fff;
}

.honor .img_content img,
.comparison .img_content img,
.portrait .img_content img,
.spotRecord .img_content img,
.animal .img_content img,
.scenery .img_content img{
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}

@media screen and (max-width: 1366px) {
    .honor .content div:nth-child(1), .honor .content div:nth-child(3),
    .portrait .content div:nth-child(1), .portrait .content div:nth-child(3),
    .spotRecord .content div:nth-child(1), .spotRecord .content div:nth-child(3),
    .comparison .content div:nth-child(1), .comparison .content div:nth-child(3),
    .scenery .content div:nth-child(1), .scenery .content div:nth-child(3),
    .animal .content div:nth-child(1), .animal .content div:nth-child(3){
        width: 78px;
        line-height: 515px;
     
    }

    .honor .content, .portrait .content,.spotRecord .content,
    .comparison .content,
    .scenery .content,
    .animal .content{
        width: 1000px;
        height:520px;
        margin:232px auto 0 auto;
        /* border:2px solid red; */
        display: flex;
        line-height: 515px;
    }
}

@media screen and (max-width: 1280px) {
    .honor .content div:nth-child(1), .honor .content div:nth-child(3),
    .portrait .content div:nth-child(1), .portrait .content div:nth-child(3),
    .spotRecord .content div:nth-child(1), .spotRecord .content div:nth-child(3),
    .comparison .content div:nth-child(1), .comparison .content div:nth-child(3),
    .scenery .content div:nth-child(1), .scenery .content div:nth-child(3),
    .animal .content div:nth-child(1), .animal .content div:nth-child(3){
        width: 78px;
        line-height: 485px;
     
    }

    .honor .content, .portrait .content,.spotRecord .content,
    .comparison .content,
    .scenery .content,
    .animal .content{
        width: 1000px;
        height:485px;
        margin:214px auto 0 auto;
        /* border:2px solid red; */
        display: flex;
        line-height: 485px;
    }
}

@media screen and (max-width: 1024px) {
    .honor .content div:nth-child(1), .honor .content div:nth-child(3),
    .portrait .content div:nth-child(1), .portrait .content div:nth-child(3),
    .spotRecord .content div:nth-child(1), .spotRecord .content div:nth-child(3),
    .comparison .content div:nth-child(1), .comparison .content div:nth-child(3),
    .scenery .content div:nth-child(1), .scenery .content div:nth-child(3),
    .animal .content div:nth-child(1), .animal .content div:nth-child(3){
        width: 78px;
        line-height: 385px;
     
    }

    .honor .content, .portrait .content,.spotRecord .content,
    .comparison .content,
    .scenery .content,
    .animal .content{
        width: 1000px;
        height:385px;
        margin:165px auto 0 auto;
        /* border:2px solid red; */
        display: flex;
        line-height: 390px;
    }
}