/* 初始化 */
*
{
    margin: 0;
    padding: 0;

    list-style: none;

    border: 0;
}
body
{
    font-family: 'Microsoft Yahei','黑体','Arial','Simhei';
}
a:link
{
    text-decoration: none;

    color: #fafafa;
}
a:hover
{
    text-decoration: none;

    color: #52d4d9;
}
a:visited
{
    text-decoration: none;

    color: #fafafa;
}
a:active
{
    text-decoration: none;

    color: #fafafa;
}
/* common */
.main
{
    font-size: 12px;

    overflow: hidden;

    width: 1100px;
    margin: 0 auto;
    padding-top: 10px;

    background-color: #fff;
}
/* logo nav top */
.logo
{
    font-size: 16px;
    line-height: 30px;

    width: 1100px;
    height: 30px;
    margin: 0 auto;
    padding: 5px 0;
}
.logo .left
{
    float: left;

    width: auto;
}
.logo .right
{
    float: right;

    width: auto;

    color: #085154;
}
.logo .right a
{
    color: #085154;
}
.bg
{
    width: 100%;
    height: 500px;
    margin: 41px 0 20px;

    background: url('../img/top.png') no-repeat center top;
    background-size: auto 100%;
}

.box
{
    width: 1060px;
    margin: 0 auto;
    margin-top: 40px;
    padding: 0 20px 20px;

    color: #333;
    border: 1px solid #eee;
    border-top: 20px solid #52d4d9;
    background-color: #fafafa;
    box-shadow: 1px 1px 5px #eee;
    border-radius: 0 0 10px 10px;

    letter-spacing: 3px;
}
.box dt
{
    font-size: 30px ;
    line-height: 50px;

    position: relative;

    height: 50px;

    border-bottom: 2px dotted #ccc;
}
.box dt a
{
    font-size: 20px;

    position: absolute;
    top: 0;
    right: 0;

    color: #666;
}
.box-con
{
    display: flex;

    text-align: center;

    justify-content: space-between;
    flex-wrap: wrap;
}
.box-con li
{
    width: 32% ;
    margin-top: 20px;
}
.box-con span
{
    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 440px;
}
.box-con span img
{
    width: 100%;
    height: 100%;
}
.box-con i
{
    position: absolute;
    top: -55px;
    left: -106px;

    width: 550px ;
    height: 450px;

    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
       -moz-transform: rotate(45deg); 	/* Firefox */
        -ms-transform: rotate(45deg); 	/* IE 9 */
         -o-transform: rotate(45deg); 	/* Opera */
            transform: rotate(45deg);

    border: 0 solid #222;
}
.box-con b{
	height: 50px; line-height: 50px; font-size: 24px;
}
.box-con li:hover i
{
    -webkit-animation: imgI .5s; /* Safari and Chrome */
       -moz-animation: imgI .5s; /* Firefox */
         -o-animation: imgI .5s; /* Opera */
            animation: imgI .5s;

    -webkit-animation-fill-mode: forwards; /* Safari and Chrome */
       -moz-animation-fill-mode: forwards; /* Firefox */
         -o-animation-fill-mode: forwards; /* Opera */
            animation-fill-mode: forwards;
}


@keyframes imgI
{
    0%
    {
        border-top-width: 0;
        border-bottom-width: 0;
        background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');
        background: rgba(0,0,0,0);
    }
    100%
    {
        border-top-width: 50px;
        border-bottom-width: 50px;
        background: background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#33000000', endColorstr='#33000000');
        background: rgba(0,0,0,.2);
    }
}

@-moz-keyframes imgI /* Firefox */
{
    0%
    {
        border-top-width: 0;
        border-bottom-width: 0;
        background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');
        background: rgba(0,0,0,0);
    }
    100%
    {
        border-top-width: 50px;
        border-bottom-width: 50px;
        background: background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#33000000', endColorstr='#33000000');
        background: rgba(0,0,0,.2);
    }
}

@-webkit-keyframes imgI /* Safari 和 Chrome */
{
    0%
    {
        border-top-width: 0;
        border-bottom-width: 0;
        background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');
        background: rgba(0,0,0,0);
    }
    100%
    {
        border-top-width: 50px;
        border-bottom-width: 50px;
        background: background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#33000000', endColorstr='#33000000');
        background: rgba(0,0,0,.2);
    }
}

@-o-keyframes imgI /* Opera */
{
    0%
    {
        border-top-width: 0;
        border-bottom-width: 0;
        background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');
        background: rgba(0,0,0,0);
    }
    100%
    {
        border-top-width: 50px;
        border-bottom-width: 50px;
        background: background: filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#33000000', endColorstr='#33000000');
        background: rgba(0,0,0,.2);
    }
}


/* border-top-color */
.BTC1
{
    border-top-color: #fac315;
}
.BTC1 dt a:hover
{
    color: #fac315;
}
.BTC1 dt
{
    padding-left: 100px;

    background: url('../img/titleBg/01.png') no-repeat left center;
    background-size: auto 100%;
}
.BTC1 li:hover b
{
    color: #fac315;
}


.BTC2
{
    border-top-color: #86B301;
}

.BTC2 dt a:hover
{
    color: #86B301;
}
.BTC2 dt
{
    padding-left: 60px;

    background: url('../img/titleBg/02.png') no-repeat left center;
    background-size: auto 100%;
}
.BTC2 li:hover b
{
    color: #86B301;
}

.BTC3
{
    border-top-color: #FF6766;
}

.BTC3 dt a:hover
{
    color: #FF6766;
}
.BTC3 dt
{
    padding-left: 50px;

    background: url('../img/titleBg/03.png') no-repeat left center;
    background-size: auto 100%;
}
.BTC3 li:hover b
{
    color: #FF6766;
}

.BTC4
{
    border-top-color: #9FB5DD;
}

.BTC4 dt a:hover
{
    color: #9FB5DD;
}
.BTC4 dt
{
    padding-left: 50px;

    background: url('../img/titleBg/04.png') no-repeat left center;
    background-size: auto 100%;
}
.BTC4 li:hover b
{
    color: #9FB5DD;
}

.BTC5
{
    border-top-color: #653A8C;
}

.BTC5 dt a:hover
{
    color: #653A8C;
}
.BTC5 dt
{
    padding-left: 70px;

    background: url('../img/titleBg/05.png') no-repeat left center;
    background-size: auto 100%;
}
.BTC5 li:hover b
{
    color: #653A8C;
}

/* 相关频道 联系我们 */
.con{border-top: 2px solid #ccc;text-align: center;margin-top: 60px; background-color:#1B1B1B;}
.con-main{width: 1102px; margin: 0 auto; }
.con-main img{width: 1100px; height: 180px;}
.con h2{ color: #fbfbfb; letter-spacing: 3px ; line-height: 50px; height: 50px; margin-top: 20px}
.border{ border: 1px solid #ccc; box-shadow: 1px 1px 5px #ccc; border-radius: 5px;}
.fd{ clear:both; text-align: left;}
.us{ width:1020px; height:auto; margin: 0 auto 40px; padding:15px 40px; overflow:hidden; background-color: #fbfbfb;}
.us .left{float:left; overflow:hidden; width:750px;}
.us .left li{ line-height:28px; float:left; margin-right:20px; width:350px;}
.us .left dt{ width:100px; display:inline-block; font-weight:bold}
.us .left dd{display:inline-block}
.us .right{float:right;}
.us .right i{ font-style:normal; vertical-align:middle;display:inline-block; margin-top:-70px}