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 {
flex: 1;
display: flex;
    }



    .pro_list {

        width: 100%;

        overflow: hidden;

        padding-right: 20px;

        padding-left: 20px;
flex: 1;
    }



    .pro_ul {

        width: 100%;

        display: flex;

        justify-content: center;

height: 100%;
align-items: 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: rgba(245, 245, 245, 1);

        width: 100%;

        padding-top: 13px;

        padding-bottom: 13px;

        position: fixed;

        bottom: 0;

    }



    .foot_bg .foot {

        width: 1000px;

        margin-left: auto;

        margin-right: auto;

        color: rgba(51, 51, 51, 1);

        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;

    }


    .container-new {
        width: 100%;
        max-width: 1920px;
        /* 贴合设计稿宽度 */
        background-color: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }


.header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26px 60px;
        background-color: #fff;
    }

    .header-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-logo img {
        height: 38px;
        /* 具体尺寸根据实际Logo调整 */
    }