body{
    overflow-x:hidden;
}
ul{
    margin: 0;
    padding: 0;
}
#banner{
    height: 125px;
    background-image: linear-gradient(to right, rgba(185, 219, 221, 0.52), rgba(183, 216, 218, 0.23) 80%),url(../images/bannerbg.png);
    background-repeat: no-repeat,no-repeat;
    background-position-x: 0,100%;
}
#banner img{
    /*width: 62.5%;*/
    margin-top: 20px;
    margin-left: 20px;
    position: absolute;
    height: 80px;
}
#banner .rightpic{
    float: right;
    background: url(../images/bannerbg.png) no-repeat;
    width: 600px;
    height: 100%;
    opacity: 80%;
}
#banner,nav,#focus,#bottom{
    width: 1600px;
    margin:0 auto;
}

nav{
    height: 60px;
    background-color: #b7d8da;
}
nav ul li{
    display: block;
    float: left;
}
nav ul li a{
    display: inline-block;
    min-width: 100px;
    line-height: 60px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: center;
    transition: 1s;
}
nav ul li a:hover{
    background-color: cadetblue;
    transition:1s;
}
.friendlink{
    margin: 50px auto;
    /* width: 50%; */
    text-align: center;
}
.friendlink span{
    display: inline-block;
    /* float: left; */
    padding: 10px;
}
.friendlink a{
    color:#000;
    text-decoration:none;
    display:inline-block;
    width: auto;
    text-align:center;
    padding: 10px 20px;
    overflow:hidden;
    background-image:url(../images/btn_bg.png);
    background-size: 100% 100%;
    /* float: left; */
    margin: -4px;
    text-shadow: 0px 1px 2px;
    min-width: 10em;
}
.friendlink a:hover{
    color:#f00;
}
.friendlink table{
width:100%
}
#bottom{
    height: 125px;
    /* background-image: url(../images/bottom3.png); */
    background-repeat: repeat-x;
    background-size: 1152px;
    background-position: bottom;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    clear: both;
    background-color: #93afb2;
    line-height: 1.5em;
}
.bktitle span a,.bktitle span a:visited{
    color: #0f3c83;
    text-decoration:none;
}
.bktitle span a:hover{
    color: #ff0000;
}
.quicklink{
    padding: 20px;
    width: calc(50% - 60px);
    float: right;
    margin-top: 50px;
}
/*按钮*/
.btn{display:inline-block;cursor:pointer;text-align:center; font-weight:400;white-space:nowrap;vertical-align: middle;*zoom:1;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;-o-transition:background-color .1s linear;transition:background-color .1s linear}
a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}
.btn:active,.btn.active{background-color:#ccc}
.btn:first-child{*margin-left:0}
.btn.active,.btn:active{-moz-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;-webkit-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset}
 
/*默认——灰色 通常用于取消*/
.btn-default{background-color:#e6e6e6}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active{color:#333;background-color:#c7c7c7;border-color:#c7c7c7}
 
/*主要——主色 通常用于确定、提交、购买、支付等*/
.btn-primary{color:#fff;background-color:#5a98de; border-color:#5a98de}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active{color:#fff;background-color:#6aa2e0;border-color:#6aa2e0}
 
/*次要按钮*/
.btn-secondary{color:#fff;background-color:#3bb4f2; border-color:#3bb4f2}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active{color:#fff;background-color:#0f9ae0;border-color:#0f9ae0}
 
/*成功*/
.btn-success{color:#fff;background-color:#5eb95e; border-color:#5eb95e}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active{color:#fff;background-color:#429842;border-color:#429842}
 
/*警告*/
.btn-warning{color:#fff;background-color:#f37b1d; border-color:#f37b1d}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active{color:#fff;background-color:#c85e0b;border-color:#c85e0b}
 
/*危险*/
.btn-danger{color:#fff;background-color:#dd514c; border-color:#dd514c}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active{color:#fff;background-color:#c62b26;border-color:#c62b26}
 
/*链接*/
.btn-link{color:#0e90d2;cursor:pointer;border-color:transparent;background-color:transparent}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active{color:#095f8a;text-decoration:underline;background-color:transparent}
 
/*禁用状态*/
.btn.disabled{cursor:not-allowed;background-image:none;opacity:.65;filter:alpha(opacity=65);box-shadow:none; pointer-events:none}

.btn,.btn.size-M {
    padding: 4px 12px
}
a.btn.size-XL,span.btn.size-XL {
    line-height: 26px
}

.btn.size-XL {
    padding: 10px 24px;
    font-size: 1.2em;
}
.radius {
    border-radius: 4px
}

.size-MINI.radius {
    border-radius: 3px
}

.size-L.radius {
    border-radius: 5px
}

.size-XL.radius {
    border-radius: 6px
}

.round {
    border-radius: 50%;
    overflow: hidden
}
.btn-block {
    -moz-box-sizing: border-box;
    display: block;
    padding-left: 0;
    padding-right: 0;
    width: 100%
}
@media screen and (max-width: 1500px) {
    #banner, nav, #focus, #main, #bottom,.topbar{
        width: 1200px;
        margin:0 auto;
    }
    .btn.size-XL {
        font-size: 0.8em;
    }
}
@media (max-width: 768px) {
    #banner,nav,#focus,#main,#bottom,#banner img{
        width: 100%;
        margin: 0 auto;
    }

    #banner img {
      max-width:90%
    }
    .friendlink td{
        width:100%;
        float:left;
    }
    #bottom{
      height:auto;
      min-height:250px;
    }
}