@charset "utf-8";
/* CSS Document */

#hr{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#hr .container{margin: 0 auto; padding-bottom: 80px;}
#hr .container>.describe{font-size: 1.6rem;color: #666; line-height: 2.8rem;}
#hr .container>.describe>p{display: block;padding-bottom: 20px;}

#hr .nav{margin: 0 auto;}
#hr .nav>ul>li{ position: relative; display: block; float: left;width: 50%;}
#hr .nav>ul>li:after{position: absolute;z-index: 1;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: ''; transition: all .35s; }
#hr .nav>ul>li>.box{position: absolute;z-index: 3; left: 50%; margin-left: -30%; width: 60%; top: 24%; text-align: center;}
#hr .nav>ul>li>.box>.ico{text-align: center;}
#hr .nav>ul>li>.box>.ico>i{font-size: 6rem;color: rgba(100,100,100,1);}
#hr .nav>ul>li>.box>.tit{ padding: 10px 0; font-size: 3rem;color: #fff;}
#hr .nav>ul>li>.box>.txt{font-size: 1.4rem;color: rgba(255,255,255,.9); line-height: 2rem;padding: 20px}
#hr .nav>ul>li>.box>.more{text-align: center; padding-top: 30px;}
#hr .nav>ul>li>.box>.more>a{ position: relative; display: inline-block;overflow: hidden; border: 1px solid rgba(240,130,0,1); border-radius: 50px;padding: 12px 50px;transition: all .35s;}
#hr .nav>ul>li>.box>.more>a:after{position: absolute;z-index: 3;right: 0; top: 0; width: 0;height: 100%; background: rgba(240,130,0,1);content: ''; transition: all .35s;}
#hr .nav>ul>li>.box>.more>a>span{position: relative;z-index: 8;font-size: 1.4rem;color: rgba(240,130,0,1); transition: all .35s;}
#hr .nav>ul>li>.box>.more>a:hover span{color: rgba(255,255,255,1);}
#hr .nav>ul>li>.box>.more>a:hover:after{width: 100%;}
#hr .nav>ul>li>.img{text-align: center;overflow: hidden;}
#hr .nav>ul>li>.img>img{width: 100%;height: auto; transition: all 1s;}
#hr .nav>ul>li:hover .img>img{transform: scale(1.1);}
#hr .nav>ul>li:hover:after{background: rgba(0,0,0,.8);}

@media only screen and (max-width: 1380px){

    #hr .nav>ul>li>.box{  top: 18%;}

}

@media only screen and (max-width: 1280px){

    #hr .nav>ul>li>.box{  top: 16%; width: 90%;margin-left: -45%;}
    #hr .nav>ul>li>.box>.ico>i{font-size: 4rem;}
    #hr .nav>ul>li>.box>.tit{font-size: 2.4rem;}
    #hr .nav>ul>li>.box>.more>a>span{font-size: 1.2rem;}

}

@media only screen and (max-width: 1080px){

    #hr .nav>ul>li>.box{  top: 12%;}
    #hr .nav>ul>li>.box>.more{ padding-top: 10px;}
    #hr .nav>ul>li>.box>.more>a{ padding: 6px 20px}

}

@media only screen and (max-width: 860px){

    #hr .nav>ul>li{float: none;width: 100%;}
    #hr .nav>ul>li>.box{  top: 30%;}
}

@media only screen and (max-width: 640px){

    #hr .container>.describe{font-size: 1.4rem;line-height: 2.4rem;}

}

@media only screen and (max-width:580px){

    #hr .nav>ul>li>.box{  top: 20%;}

}

@media only screen and (max-width:420px){

    #hr .nav>ul>li>.box{  top: 14%;}
    #hr .nav>ul>li>.box>.txt{display: none;}
    #hr .nav>ul>li>.box>.more>a{ background: rgba(240,130,0,1);}
    #hr .nav>ul>li>.box>.more>a>span{ color: rgba(255,255,255,1); font-size: 1.2rem;}
}