﻿
.hudong {
    max-width: 1320px;
    margin: 10px auto; 
    padding-left: 2%;  
}

.hd_nav ul {
    max-width: 1300px;
    list-style: none;
    font-size: 22px;
    font-weight: 400;
     font-family: Microsoft YaHei;
    margin: 0;
    padding: 0;

}
.hd_nav li span {
    display: block;
}
.hd_nav li a {
    color: #c8c8c8;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.one{ background-color:red; }
.two{  background-color:rgba(236,99,7,1.00);}
.three{  background-color:rgba(220,190,3,0.8);}
/*.three{  background-color:yellow;}*/
.four {  background-color:green;}
.five {  background-color:blue;}
.six {   background-color:indigo;}
.seven{
    background-color:purple;
}

/* 最小800px*/
@media (min-width: 800px) {
    #imgdis,#m_menu{
        display: none;
    }

    /*height 动画*/
    .hd_nav li {
        float: left;
        width: 14%;
        text-align: center;
        height: 110px;
        /*transition:  height .5s;*/
    }
    #u1 li { border-bottom: 1px #fff solid;}

.hd_nav li span {/*控制文字out*/
        margin-top: 0;
        transition: margin .5s;
}
.hd_nav li:hover span { /*控制文字*/
        margin-top: 0.2em;
        transition: margin .5s;
    }

.hd_nav a{
     padding-top: 20px;
}

.hd_nav img {/*图片圆圈*/    
        width: 45px;
        height: 47px;    
        padding: 0.3em; /*图片圆圈大小*/
        border-radius: 50%;
        box-shadow: 0 0 0 30px transparent;
        background: rgba(255,255,255,0.1);
        transform: translate3d(0, 0, 0);
        transition: box-shadow .6s ease-in-out;
    }      
.hd_nav a:hover img  /*图片圆圈动画*/
{      
        box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
        transition: box-shadow .4s ease-in-out;
    }

}

@media (min-width:520px) and (max-width: 799px) {
    #imgdis,#m_menu{
        display: none;
    }
    .hd_nav li {
        float: left;
        width: 50%;
        height: 35px;
        line-height:35px;
        text-align: left;
    }
   .hd_nav li:hover{opacity: 0.6;}
    .hd_nav a {
        padding: 0.5em;
        font-size: 1.2rem;
    }
.hd_nav li span {
    display:inline;
    font-size: 1.2em;
    margin-left: 4rem;
    float: left;
    }
.hd_nav img {/*图片圆圈*/
        display: inline-block;
        padding: 0.1em; /*图片圆圈大小*/
        border-radius: 50%;
        box-shadow: 0 0 0 15px transparent;
        background: rgba(255,255,255,0.1);
        transform: translate3d(0, 0, 0);
        transition: box-shadow .6s ease-in-out;
    }  
    .hd_nav a:hover img  { /*图片圆圈动画*/   
        box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
        transition: box-shadow .4s ease-in-out;
    }
}
    

/* 最大519px*/
@media (max-width: 519px) {
    .hd_nav li span {
        display: inline-block;
        margin-left: 1.2rem;
     }
   .hd_nav a {
        padding: 0.1em;
        font-size: 1.6rem;
        color: #fff;
    } 
.hd_nav li:hover{opacity: 0.5;}

/* Adding a left border of 8 px with a different color for each menu item*/
	.one {border-left: 8px solid rgb(174, 78, 1);}
	.two {border-left: 8px solid rgb(191, 117, 20);}
	.three {border-left: 8px solid rgb(13, 111, 150);}
	.four {border-left: 8px solid rgb(10, 75, 117);}
	.five {border-left: 8px solid rgb(16, 34, 44);}
	.six {border-left: 8px solid rgb(9, 18, 25);}
          .seven {border-left: 8px solid rgb(29, 18, 25);}

}

/*@media screen and (max-width: 25em) {
    .container > header {
        font-size: 75%;
    }
}*/