body {
    background-color: #1e222c;
    background-image: url("../res/tech/tech_bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
}


/****************** 顶部标题 ********************/
.tech_title_outer {
    width: 100%;
    text-align: center;
}

.tech_title {
    width: 40%;
    margin-top: 80px;
    pointer-events: none;
}


/****************** tab ********************/
.tech_tab {
    width: 100%;
    text-align: center;
    font-size: 0;
}

.tech_tab_btn {
    width: 50%;
    max-width: 430px;
    cursor: pointer;
}



/****************** 游戏玩法 ********************/
#page1 {
    text-align: center;
}

.tech_game_img {
    max-width: 750px;
    width: 95%;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.tech_game_img1 {
    max-width:738px;height:260px;background-image:url('../res/tech/1.png');background-size:cover;margin: 0 auto;
}

.tech_game_img2 {
    max-width:738px;height:225px;background-image:url('../res/tech/2.png');background-size:cover;margin: 0 auto;
}

.tech_game_img3 {
    max-width:738px;height:235px;background-image:url('../res/tech/3.png');background-size:cover;margin: 0 auto;
}

.tech_game_img4 {
    max-width:738px;height:240px;background-image:url('../res/tech/4.png');background-size:cover;margin: 0 auto;
}

.tech_game_img5 {
    max-width:738px;height:240px;background-image:url('../res/tech/5.png');background-size:cover;margin: 0 auto;
}

.tech_game_img6 {
    max-width:738px;height:250px;background-image:url('../res/tech/6.png');background-size:cover;margin: 0 auto;
}

.tech_game_img7 {
    max-width:738px;height:192px;background-image:url('../res/tech/7.png');background-size:cover;margin: 0 auto;
}

.tech_game_img8 {
    max-width:738px;height:450px;background-image:url('../res/tech/8.png');background-size:cover;margin: 0 auto;
}

.tech_game_img9 {
    max-width:738px;height:295px;background-image:url('../res/tech/9.png');background-size:cover;margin: 0 auto;
}

/****************** 角色说明 ********************/
#page2 {
    max-width: 750px;
    width: 95%;
    margin: 0 auto;
    font-size: 0;
}

.tech_role_img {
    width: 49%;
    pointer-events: none;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
}

.clearboth{
    clear:both
}

.tech_role_img_bord{
    width: 190px; height:230px;margin-left:43%;color:white
}

.tech_role_title{
    line-height: 30px; color:#d5b98e;margin-top:0px;font-size:1.5em;font-weight: 600;padding-top:30px;font-weight: normal;line-height: 20px;
}

.tech_role_line{
    line-height: 15px; color:white;margin-top:0px;font-size:1em;font-weight: 600;padding-top:0px;font-weight: normal;
}

.tech_role_line2{
    line-height: 15px; color:white;margin-top:0px;font-size:1em;font-weight: 600;padding-top:0px;font-weight: normal;
}

.tech_placeholder {
    width: 50%;
    display: inline-block;
}

.tech_role_img_bg {
    background-image: url('../res/tech/jsbg.png'); max-width: 750px; height:230px; background-size:cover;box-shadow: 0 0 15px #5e54aa; margin:5px
}

.tech_role_img_size {
    background-image: url('../res/tech/xz3.png'); max-width: 750px; height:238px; background-size:cover;
}

.tech_role_img_size_paixi {
    background-image: url('../res/tech/qs3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_zhongchen {
    background-image: url('../res/tech/zc3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_moganna {
    background-image: url('../res/tech/mgn3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_cike {
    background-image: url('../res/tech/ck3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_mingyao {
    background-image: url('../res/tech/my3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_anyao {
    background-image: url('../res/tech/ay3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_yingwang {
    background-image: url('../res/tech/yw3.png'); max-width: 750px; height:238px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_lansiluote {
    background-image: url('../res/tech/smr3.png'); max-width: 750px; height:273px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.tech_role_img_size_xianshui {
    background-image: url('../res/tech/xs.png'); max-width: 750px; height:273px; background-size:cover;box-shadow: 0 0 20px #161344;
}

.span_bold{
    font-weight: 900;
}


/************************************* 手机适配 ***************************************/
#tab1_mobile_btn {
    display: none;
}

#tab2_mobile_btn {
    display: none;
}

.page1_mobile {
    display: none;
}

@media screen and (max-width: 700px) {
    body {
        background-image: url("../res/mobile/tech/tech_bg.jpg");
    }

    .tech_title_outer {
        height: 60vh;
    }
    .tech_title {
        display: none;
    }

    #tab1_btn {
        display: none;
    }

    #tab2_btn {
        display: none;
    }

    #tab1_mobile_btn {
        display: inline;
    }

    #tab2_mobile_btn {
        display: inline;
    }

    .tech_role_img {
        width: 100%;
    }
    .tech_placeholder {
        display: none;
    }

    .page1_mobile {
        display: block;
    }

    .page1_normal {
        display: none;
    }
}