article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    nav,
    section,
    summary {
        display: block;
    }

    audio,
    canvas,
    video {
        display: inline-block;
    }

    audio:not([controls]) {
        display: none;
        height: 0;
    }

    [hidden] {
        display: none;
    }

    html {
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        background-color: #f8f8f8;
    }

    button,
    html,
    input,
    select,
    textarea {
        font-family: sans-serif;
    }

    body {
        margin: 0;
        font-family: "Microsoft Yahei", arial, verdana;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a:active,
    a:hover {
        outline: 0;
    }

    ul li {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

    dd {
        margin: 0px;
    }

    menu,
    ol,
    ul {
        padding: 0px;
    }

    nav ol,
    nav ul {
        list-style: none;
        list-style-image: none;
    }

    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
        border: none;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    figure {
        margin: 0;
    }

    form {
        margin: 0;
    }

    fieldset {
        margin: 0 2px;
        padding: .35em .625em .75em;
        border: 1px solid silver;
    }

    legend {
        padding: 0;
        border: 0;
        white-space: normal;
    }

    button,
    input,
    select,
    textarea {
        margin: 0;
        vertical-align: baseline;
        font-size: 100%;
    }

    button,
    input {
        line-height: normal;
    }

    button,
    select {
        text-transform: none;
    }

    button,
    html input[type=button],
    input[type=reset],
    input[type=submit] {
        cursor: pointer;
        -webkit-appearance: button;
    }

    button[disabled],
    html input[disabled] {
        cursor: default;
    }

    input[type=checkbox],
    input[type=radio] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
    }

    input[type=search] {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield;
    }

    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    textarea {
        overflow: auto;
        vertical-align: top;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    body {
        min-width: 1100px;
        background-color: #fff;
        color: #333;
        font: 14px/1.5 Arial, "Microsoft Yahei", sans-serif;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    .clearfix:after,
    .clearfix:before {
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .hide {
        display: none !important;
    }

    .ir {
        display: block;
        overflow: hidden;
        text-align: left;
        text-indent: -9999em;
    }

    .ndash,
    .sep {
        margin: 0 .25em;
        font-family: sans-serif;
    }

    .container {
        margin-right: auto;
        margin-left: auto;
        width: 1100px;
    }

    .container:after,
    .container:before {
        display: table;
        content: " ";
    }

    .container:after {
        clear: both;
    }

    .post {
        height: 64px;
    }

    .footer-navbg {
        background-color: #eff0f2;
    }

    .footerbg {
        background-color: #0066b3;
    }


    /* nav */
    .site-header {
        position: relative;
        z-index: 20;
        height: 61px;
        width: 100%;
        position: fixed;
        z-index: 999;
        top: 0;
        background: url(nav_bg.png);
        background-repeat: repeat-x;
    }

    .site-header .container {
        position: relative;
    }

    .site-header .header-logo {
        float: left;
        margin-top: 2px;
        width: 350px;
    }

    .site-header .header-nav {
        float: left;
        width: 750px;
    }

    .site-header .logo {
        position: relative;
        display: block;
        overflow: hidden;
        width: 529px;
        height: 50px;
        float: left;
    }

    .site-header .logos {
        position: relative;
        width: 110px;
        display: block;
        overflow: hidden;
        height: 55px;
        padding-left: 10px;
    }

    .site-header .logo:after,
    .site-header .logo:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 600px;
        height: 55px;
        content: '';
        -webkit-transition: all .2s;
        transition: all .2s;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
    }

    .site-header .logo:before {
        background: url(logo.png) no-repeat left 50%;
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        filter: alpha(opacity=100) \9;
    }

    .site-header .logo:after {}

    .site-header .logo:focus {
        outline: 0;
    }


    /* banner & wy    start*/
    .ck-slide {
        width: 100%;
        height: 440px;
        margin: 0 auto;
        position: relative;
    }

    .ck-slide .div-slide {
        width: 100%;
        height: 440px;
        margin: 0;
        padding: 0;
        position: absolute;
        overflow: hidden;
    }

    .ck-slide ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .ck-slide ul.ck-slide-wrapper {
        height: 440px;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        margin: 0;
        padding: 0;
    }

    .ck-slide ul.ck-slide-wrapper li {
        position: absolute;
    }

    .ck-slide ul.ck-slide-wrapper li img {
        margin-left: -960px;
    }

    .slide {
        width: 1100px;
        height: 440px;
        margin: 0 auto;
        position: relative;
    }

    .slide .ck-prev,
    .slide .ck-next {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 35px;
        height: 70px;
        margin-top: -35px;
        border-radius: 3px;
        opacity: .15;
        background: red;
        text-indent: -9999px;
        background-repeat: no-repeat;
        transition: opacity .2s linear 0s;
    }

    .slide .ck-prev {
        left: 5px;
        background: url(arrow-left.png) #000 50% no-repeat;
    }

    .slide .ck-next {
        right: 5px;
        background: url(arrow-right.png) #000 50% no-repeat;
    }

    .slide .wy {
        width: 280px;
        height: 250px;
        position: absolute;
        z-index: 2;
        top: 50px;
        right: 34px;
        background-image: url(index_bg.png);
        background-repeat: repeat;
        padding: 10px;
    }

    .slide .rk {
        background-color: #FFF;
        width: 100%;
        height: 235px;
        padding: 15px 0px 0px 0px;
    }

    .ck-slidebox {
        position: absolute;
        left: 50%;
        bottom: 12px;
        z-index: 10;
    }

    .ck-slidebox ul {
        height: 20px;
        padding: 0 4px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.5);
    }

    .ck-slidebox ul li {
        float: left;
        height: 12px;
        margin: 4px 4px;
    }

    .ck-slidebox ul li em {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #fff;
        text-indent: -9999px;
        cursor: pointer;
    }

    .ck-slidebox ul li.current em {
        background-color: #09F;
    }

    .ck-slidebox ul li em:hover {
        background-color: #09F;
    }


    .slide .xqrk {
        width: 240px;
        margin: 0px auto 15px auto;
        line-height: 22px;
        font-size: 12px;
    }

    .slide .xqrk a {
        margin-right: 15px;
    }

    .slide .xqrk a:hover {
        color: #00a2ff
    }

    .button {
        display: block;
        position: relative;
        background: #00a2ff;
        color: #fff;
        width: 240px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: none;
        text-decoration: none;
        margin: 8px auto 5px auto;
        border-radius: 2px;
        overflow: hidden;
        -webkit-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
    }

    .button img {
        float: left;
        width: 22px;
        height: 20px;
        margin: 8px 5px 0px 50px;
    }

    .button:hover {
        background: #1693f1;
        color: #fff;
    }

    .button:before {
        content: ' ';
        position: absolute;
        background: #fff;
        width: 25px;
        height: 50px;
        top: 0;
        left: -45px;
        opacity: 0.3;
        -webkit-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
    }

    .button:hover:before {
        width: 45px;
        left: 255px;
    }


    stlect {
        BOX-SIZING: content-box;
        PADDING-BOTTOM: 1px;
        PADDING-LEFT: 0px;
        PADDING-RIGHT: 0px;
        PADDING-TOP: 1px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;

    }

    option {
        background-color: #FFF;
        color: #333;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }

    .geren {
        width: 90px;
        height: 34px;
        float: right;
        margin-top: 10px;
        background-repeat: no-repeat;
        background-position: center center;
        color: #FFFFFF;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        margin-right: 5px;
    }

    .geren a {
        color: #fff;
    }

    .slide .right_nr {
        float: left;
        position: absolute;
        width: 390px;
        padding: 10px;
        height: 290px;
        right: 0;
        top: 100px;
        z-index: 888;
        background-color: rgba(192, 192, 192, 0.5)
    }

    .slide .right_nr .rightnr {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        overflow-y: hidden;


    }

    .wznr {
        color: #333;
        font-size: 14px;
        width: 370px;
        height: 82%;
        margin-top: 40px;
        overflow-y: hidden;
        line-height: 24px;
        padding-left: 10px;
        padding-right: 10px;
    }


    .wznr:hover {
        overflow-y: auto;

    }

    .slide .right_nr .rightnr .gonggao {
        border-radius: 30px;
        background-color: #4891ff;
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .30);
        text-align: center;
        color: #FFFFFF;
        padding: 1px;
        width: 100px;
        font-size: 16px;
        margin-right: auto;
        margin-left: auto;

    }

    .clear_fix {
        zoom: 1;
    }

    .clear_fix:after {
        display: block;
        clear: both;
        content: ".";
        visibility: hidden;
        height: 0;
        font-size: 0;
    }

    .wrap {
        width: 960px;
        margin: 0 auto;
    }

    .clear {
        clear: both;
    }

    .clear_fix {
        zoom: 1;
    }

    .clear_fix:after {
        display: block;
        clear: both;
        content: ".";
        visibility: hidden;
        height: 0;
        font-size: 0;
    }

    .fl {
        float: left
    }

    /**/

    .fr {
        float: right;
    }

    a {
        cursor: pointer;
    }

    .mr_40 {
        margin-right: 40px;
    }

    .mr_45 {
        margin-right: 45px;
    }

    .mr_65 {
        margin-right: 68px;
    }

    .mr_20 {
        margin-right: 20px;
    }

    .w_288 {
        width: 288px;
    }


    .pro_wrap {
        background-color: #f8f8f8;
    }

    .pro_list {
        width: 100%;
        overflow: hidden;
        margin-top: -21px;
        margin-bottom: -21px;
        padding-top: 40px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 60px;
    }

    .pro_ul {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .tuijian_products_wrap {
        width: 1000px;
        margin: 30px auto 50px auto;
    }

    .tuijian_products h3 {
        color: #7c7c7c;
        font-size: 18px;
        font-weight: normal;
    }

    .tuijian_product_item {
        margin: 32px 0 45px 0;
    }

    .tuijian_product_other_item {
        position: relative;
        width: 320px;
        height: 92px;
        margin-bottom: 20px;
        padding: 16px 0px 16px 0px;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
    }

    .tuijian_product_other_item:hover {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }

    .tuijian_product_other_item:hover .tuijian_product_title {
        color: #199be5;
    }

    .tuijian_product_other_item a.icon_img {
        width: 110px;
        height: 100%;
        text-indent: -99em;
        background-position: 50% 50%;
    }

    .tuijian_products_hr {
        margin-top: 4px;
        width: 288px;
        height: 3px;
        background: url('tuijian_sprite.png?20140212') no-repeat 0 -180px;
        font-size: 0px;
    }

    .tuijian_products_other_hr {
        margin-top: 4px;
        width: 1000px;
        height: 3px;
        border-bottom: 1px solid #ddd;
        /*background:url('tuijian_sprite.png?20140212') no-repeat 0 -193px; */
        font-size: 0px;
    }

    .tuijian_products_other_hr span {
        position: relative;
        display: block;
        width: 65px;
        bottom: -3px;
        border-bottom: 2px solid #40bdef;
        border-right: 15px solid #fff;
    }

    .tuijian_product_other_description {
        width: 175px;
    }

    .tuijian_product_title {
        text-decoration: none;
        color: #333;
        font-size: 16px;
        margin-bottom: 3px;
        display: block;
    }

    .tuijian_product_title:hover {
        color: #199be5;
    }

    .tuijian_product_version {
        color: #a2a2a2;
        font-size: 14px;
    }

    .tuijian_product_other_download {
        position: absolute;
        top: 79px;
        left: 110px;
        width: 200px;
        height: 26px;
    }

    .tuijian_product_other_download .tuijian_product_download {
        float: left;
        display: block;
        width: 80px;
        height: 26px;
        line-height: 26px;
        margin-right: 10px;
        background-color: #28a9f3;
        color: #fff;
        text-align: center;
    }

    .tuijian_product_other_download .tuijian_product_download:hover {
        background-color: #0090e2;
    }

    .tuijian_product_other_download .tuijian_product_other_version {
        float: left;
        margin-top: 2px;
        font-size: 14px;
        color: #c3c3c3;
        vertical-align: middle;
    }

    .tuijian_shuoba {
        display: inline;
        margin: 6px 6px 0 6px;
        width: 50px;
        height: 50px;
        background: url('tuijian_sprite.png?20140212') no-repeat -280px -115px;
        text-indent: -9999px;
    }

    .tuijian_products_other_wrap {
        background-color: #eeeff0;
    }

    .tuijian_products_other {
        display: block;
        width: 1000px;
        margin: 0px auto;
        padding: 50px 0px 30px 0px;
    }

    .tuijian_footer_wrap {
        width: 1000px;
        margin: 40px auto 0 auto;
    }

    .tuijian_friendly_link {
        color: #7c7c7c;
        font-size: 13px;
    }

    .tuijian_links {
        margin: 0 0 20px 80px;
    }

    .tuijian_links a {
        color: #7c7c7c;
        font-size: 13px;
        text-decoration: none;
        margin-right: 15px;
        display: inline-block;
    }

    .tuijian_links a:hover {
        text-decoration: underline;
    }

    .recommend_products {
        position: relative;
        width: 240px;
        height: 240px;
        margin-right: 20px;
        margin-bottom: 4px;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
        border: 1px solid #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .recommend_products1 {
        position: relative;
        width: 280px;
        height: 200px;
        margin-right: 20px;
        margin-bottom: 4px;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
        border: 1px solid #F5F5F5;
    }

    .recommend_products:hover .product_title {
        color: #199be5;
    }

    .recommend_products .tuijian_product_version {
        position: absolute;
        top: 15px;
        right: 16px;
        color: #c3c3c3
    }

    .recommend_products .tuijian_product_version1 {
        width: 100%;
        text-align: center;
        color: #000;
        font-size: 16px;
    }

    .recommend_products:hover {
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
    }

    .recommend_products .type_Logo {
        display: block;
        margin-top: 9px;
        height: 115px;
    }

    .recommend_products .type_Logo1 {
        display: block;
        height: 150px;
    }

    .recommend_products .type_Logo1:hover .product_title {
        color: #199be5;
    }

    .recommend_products .type_Logo:hover .product_title {
        color: #199be5;
    }

    .recommend_products .typesImg {
        display: block;
        text-align: center
    }

    .recommend_products .typesImg img {
        margin: 0 auto;
    }

    .recommend_products .product_title {
        display: block;
        margin-top: 23px;
        text-align: center;
        color: #333;
        font-size: 18px;
    }

    .recommend_products .tuijian_product_description {
        margin: px 0px 0px 0px;
        text-align: center;
        color: #a2a2a2;
        font-size: 14px;
    }

    .recommend_products .tuijian_product_description1 {
        text-align: center;
        color: #a2a2a2;
        font-size: 14px;
        margin-top: 5px;
    }

    .recommend_products .tuijian_product_description1 font a {
        color: #FF0000;
    }

    .recommend_products .tuijian_product_download {
        display: block;
        width: 180px;
        height: 36px;
        line-height: 36px;
        margin: 0 auto;
        margin-top: 35px;
        background-image: none;
        background-color: #28a9f3;
        color: #fff;
        text-align: center;
    }

    .recommend_products .tuijian_product_download:hover {
        width: 180px;
        height: 36px;
        line-height: 36px;
        background-color: #0090e2;
    }

    .recommend_products .tuijian_product_download .downIcon {
        padding-left: 25px;
        background: url("downloadIcon.png") no-repeat left top;
background-size: 18%;
    }

    .end_products {
        margin-right: 0;
    }

    /* 推荐 页 结束 */


    /* banner */
    .slide-container {
        width: 600px;
        text-align: center;

    }

    .wrapper {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .wrapper:focus {
        outline: 0;
    }

    .clash-card {
        width: 400px;
        display: inline-block;
        margin: auto;
        border-radius: 19px;
        position: relative;
        text-align: center;
        z-index: 9999;
    }

    .clash-card__image {
        position: relative;
        height: 230px;
        margin-bottom: 35px;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    .clash-card__image--barbarian {}

    .clash-card__image--barbarian img {
        width: 550px;
        height: 321px;
        position: absolute;
        top: -19px;
        left: -96px;
    }

    .clash-card__image--archer {}

    .clash-card__image--archer img {
        width: 550px;
        height: 321px;
        position: absolute;
        top: -28px;
        left: -95px;
    }

    .clash-card__image--giant {}

    .clash-card__image--giant img {
        width: 400px;
        position: absolute;
        top: -100px;
        left: -25px;
    }

    .clash-card__image--goblin {}

    .clash-card__image--goblin img {
        width: 370px;
        position: absolute;
        top: -21px;
        left: -37px;
    }

    .clash-card__image--wizard {}

    .clash-card__image--wizard img {
        width: 345px;
        position: absolute;
        top: -28px;
        left: -10px;
    }

    .clash-card__level {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .clash-card__level--barbarian {
        color: #EC9B3B;
    }

    .clash-card__level--archer {
        color: #EE5487;
    }

    .clash-card__level--giant {
        color: #F6901A;
    }

    .clash-card__level--goblin {
        color: #82BB30;
    }

    .clash-card__level--wizard {
        color: #4FACFF;
    }

    .clash-card__unit-name {
        font-size: 26px;
        color: black;
        font-weight: 900;
        margin-bottom: 5px;
    }

    .clash-card__unit-description {
        padding: 20px;
        margin-bottom: 10px;
    }

    .clash-card__unit-stats--barbarian {
        background: #EC9B3B;
    }

    .clash-card__unit-stats--barbarian .one-third {
        border-right: 1px solid #BD7C2F;
    }

    .clash-card__unit-stats--archer {
        background: #EE5487;
    }

    .clash-card__unit-stats--archer .one-third {
        border-right: 1px solid #D04976;
    }

    .clash-card__unit-stats--giant {
        background: #F6901A;
    }

    .clash-card__unit-stats--giant .one-third {
        border-right: 1px solid #de7b09;
    }

    .clash-card__unit-stats--goblin {
        background: #82BB30;
    }

    .clash-card__unit-stats--goblin .one-third {
        border-right: 1px solid #71a32a;
    }

    .clash-card__unit-stats--wizard {
        background: #4FACFF;
    }

    .clash-card__unit-stats--wizard .one-third {
        border-right: 1px solid #309eff;
    }

    .clash-card__unit-stats {
        color: white;
        font-weight: 700;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    .clash-card__unit-stats .one-third {
        width: 33%;
        float: left;
        padding: 20px 15px;
    }

    .clash-card__unit-stats sup {
        position: absolute;
        bottom: 4px;
        font-size: 45%;
        margin-left: 2px;
    }

    .clash-card__unit-stats .stat {
        position: relative;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .clash-card__unit-stats .stat-value {
        text-transform: uppercase;
        font-weight: 400;
        font-size: 12px;
    }

    .clash-card__unit-stats .no-border {
        border-right: none;
    }

    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .slick-prev {
        left: 100px;
        z-index: 999;
    }

    .slick-next {
        right: 100px;
        z-index: 999;
    }


    .clear {
        clear: both;
        height: 0;
        width: 100%;
        font-size: 0;
        line-height: 0;
        overflow: hidden
    }


    .foot_bg {
        background-color: #0065b3;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        position: fixed;
        bottom: 0;
    }

    .foot_bg .foot {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        color: #FFFFFF;
        font-size: 14px;
        text-align: center;
    }


    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 6px;
        height: 0px;
        background-color: #fff;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #fff;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #09F;
    }