@charset "UTF-8";

/**
 * @authors yuanyang (471145945@qq.com)
 * @version 1.0.1
 */

/* ================================================================================
 * 通用样式
 * ================================================================================ */
body{
    background: #f1f1f1;
    width: 100%;
    margin:0 auto;
    max-width: 640px;
    min-width: 320px;
}

/*统一顶部*/
#top{position: fixed;
    width: 100%;
    margin:0 auto;
    max-width: 640px;
    min-width: 320px;
    z-index: 99;background: #191c2d;
}
#top>.title{float: left;width: 40%;height: 90px;}
#top>.title>a{
    display: inline-block;
    width: 100%;
    height: 90px;
    padding: 5px 0 0 15px;
    overflow: hidden;
}
#top>.title>a img{display:inline-block;}
#top>.googledown{
    float:right;
    width: 25%;
    height: 80px;
    padding: 20px 0 0 0;
    margin-right: 4%;
    text-align: center;}
#top>.googledown>a{
    display: inline-block;
    width:100%;
    height: 80px;
}
#top>.googledown>a img{display:inline-block;}

/*footer(页脚)移动端*/
.footer{
    width: 640px;
    height: 90px;
    text-align: center;
    background: #b5b6bb;
    color: #f5f9fc;
    text-align: center;
    padding: 10px 0;
}
.footer p{
    line-height: 30px;
    font-size: 18px;
}
.section{
    width: 640px;
    padding: 90px 0 0 0;
}

/*分类列表*/
ul{display: inline-block;width: 100%;}
ul li{float: left;cursor: pointer;}

/*做图右文*/
ul.href_img_txt{
    padding: 10px;
    background: #fff;
}
ul.href_img_txt li{
    width: 580px;
    height: 130px;
    padding: 15px 0;
    border-bottom: 1px solid #b5b6bb;
}
ul.href_img_txt li a{
    display: inline-block;
    width: 100%;
    height: 130px;
}
ul.href_img_txt>li>a>.left{
    float: left;
    width: 200px;
    height: 120px;
}
ul.href_img_txt>li>a>.left>img{width: 200px;height: 100px;}
ul.href_img_txt>li>a>.right{
    float: left;
    width: 360px;
    margin-left: 20px;
    height: 120px;
}
ul.href_img_txt>li>a>.right>p:first-child{
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    border: 600;
    color: #22295f;
}
ul.href_img_txt>li>a>.right>p:nth-child(2){
    width: 100%;
    height: 60px;
    line-height: 30px;
    font-size: 20px;
    color: #6f7a8e;
    overflow: hidden;
}
ul.href_img_txt>li>a>.right>p:nth-child(3){ 
    margin-left: 250px;
    height: 30px;
    line-height: 10px;
    font-size: 20px;
    color: #cdced3;
}
/* ================================================================================
 * 首页
 * ================================================================================ */
.index>div>.title{
    padding: 0 10px;
    height: 60px;
    border-bottom: 1px solid #b0b2b9;
 }
.index>div>.title>img{float: left;width: 60px;height: 60px;}
.index>div>.title>p{float: left;width: 200px;height: 60px;line-height: 60px;
    font-size: 24px;
    color: #454d6f;
    font-weight: 600;
}
.index>div>.title>a{float: right;width: 50px;height: 60px;line-height: 60px;
    font-size: 20px;
    color: #454d6f;
}


/*视频区*/
.index>.video{width: 100%;height: 375px;}
.index>.video>#video{width: 100%;height: 360px;overflow: hidden;}
/*菜单栏*/
.index>.menu{width: 100%;padding: 0 0 15px 0;}
.index>.menu>ul{width: 100%;height: 200px;background: url(/rxsgz/img/index/btn_list.png) no-repeat #fff;background-size: 100%;overflow: hidden;}
.index>.menu>ul li{position: relative;float:left;width: 25%;height: 100px;text-align: center;border:1px solid #d4d9de;}
.index>.menu>ul li a{display: inline-block;width: 100%;height: 100px;line-height: 150px;font-size: 20px;color:#222;}
.index>.menu>ul li a:hover{color:#FF0000;}
/* 遊戲線索 */
.index>.clue{
    margin: 0 0 15px 0;
}
.index>.clue>ul{
    padding: 0 30px;
}
/* 遊戲攻略 */
.index>.strategy{
    height:450px;
    margin: 0 0 15px 0;
    background:#fff;
}
.index>.strategy>ul {
    padding: 0px 30px 0;
    height: 400px;
    overflow: hidden;
}
/* 武將圖鑒 */
.index>.index_hero{
    height: 360px;
    margin: 0 0 15px 0;
    background:#fff;
}
.index>.index_hero>ul{
    padding: 10px 30px 0;
}
.index>.index_hero>ul li{
    width: 50%;
    height: 150px;
    text-align: center;
}
.index>.index_hero>ul li a{display: inline-block;width: 100%;height: 150px;}
.index>.index_hero>ul li a img{width: 270px; height: 98px;}
.index>.index_hero>ul li a p{
    line-height: 40px;
    font-size: 20px;
    color: #454d6f;
} 
/* 武將覺醒 */
.index>.index_awake{
    height: 260px;
    margin: 0 0 15px 0;
    background:#fff;
}

.index>.index_awake>ul{padding: 0 30px;}
.index>.index_awake>ul li{width: 100%;height: 50px;line-height: 50px;border-bottom:1px solid #b0b2b9;}
.index>.index_awake>ul li a{display: inline-block;width: 100%;height: 50px;}
.index>.index_awake>ul li a img{float: left;width: 40px;height:36px;margin:7px 0 0 0;}
.index>.index_awake>ul li a p{float: left;width: 200px;line-height: 50px;margin-left: 20px;font-size: 20px;}

/* ================================================================================
 * 游戏探索
 * ================================================================================ */
.clue{background: #fff;}
.clue>a{display: inline-block;width: 100%;height: 270px;padding: 20px 5% 0;}
.clue>a>img{border-radius: 10px;}


/* ================================================================================
 * 武将列表通用
 * ================================================================================ */
.heroall>.menu{background: #fff;}
.heroall>.menu>ul{display: inline-block;}
.heroall>.menu>ul li{width: 25%;line-height: 60px;font-size: 24px;background: #FFFFFF;color: #000;border-bottom: 2px solid #d3d3d3;text-align: center;}
.heroall>.menu>ul li.active{background: #14B9C8;color: #FFFFFF;border-bottom: 2px solid #14B9C8;}

.heroall>.list>ul{width: 100%;height: auto;overflow: hidden;}
.heroall>.list>ul li{float:left;width: 25%;background: #fff;height: 170px;border-bottom: 1px solid #d3d3d3;}
.heroall>.list>ul li a{display: inline-block;width: 100%;height: 100px;text-align: center;padding: 10px 0 0 0;}
.heroall>.list>ul li a img{width: 120px;height: 120px;}
.heroall>.list>ul li a p{width: 100%;line-height: 30px;color: #000;font-size: 20px;}
.heroall>.list>ul li a p:hover{color: #14B9C8;}
/* 武将列表 */
.hero{text-align: center;}
/* 武将觉醒 */
.heroawake{text-align: center;}

/* ================================================================================
 * 武将详细
 * ================================================================================ */
.herodetails{background: #f1f1f1;}
.herodetails>.bg_img{width: 640px;height: 420px;background:url(/rxsgz/img/herodetails/bg.jpg) no-repeat;background-size: 100%;}
.herodetails>.bg_img>img{width: 50%;margin: 80px 0 0 160px;}
.herodetails>.content{}
.herodetails>.content>.title{height: 54px;padding: 10px;background: #f1f1f1;}
.herodetails>.content>.title img{width: 120px;height:24px;}
.herodetails>.content>.name,
.herodetails>.content>.skill,
.herodetails>.content>.equip{background: #FFFFFF;padding: 20px;}
.herodetails>.content>.name>p{width: 100%;line-height: 36px;font-size: 20px;}
.herodetails>.content>.name>p:first-child{height: 40px;}
.herodetails>.content>.name>p span{float: left;width: 120px;font-size: 30px;font-weight: 600;}
.herodetails>.content>.name>p img{float: left;height: 30px;margin-left: 15px;}
.herodetails>.content>.name>p img.img_star{width: 90px;}
.herodetails>.content>.name>p img.img_type{width: 30px;}
.herodetails>.content>.name>p img.img_class{width: 30px;}
.herodetails>.content>.name>p img.img_equip{width: 50px;}
.herodetails>.content>.skill>ul{display: inline-block;width: 100%;}
.herodetails>.content>.skill>ul li{float: left;width: 20%;height: 80px;text-align: center;cursor: pointer;padding: 0 10px;}
.herodetails>.content>.skill>ul li img{width: 70px;height: 70px;border: 2px solid #036459;}
.herodetails>.content>.skill>ul li.active>img{border: 2px solid #02ffff}
.herodetails>.content>.skill p{line-height: 36px;font-size: 20px;padding: 5px 0 15px;}
.herodetails>.content>.skill .h_red{color:#FF0000;}
.herodetails>.content>.equip>ul{width: 100%;}
.herodetails>.content>.equip>ul li{width: 16%;height: 70px;text-align: center;cursor: pointer;padding: 0 10px;}
.herodetails>.content>.equip>ul li img{width: 60px;height: 60px;border: 2px solid #036459;border-radius: 50%;}
.herodetails>.content>.equip>ul li.active>img{border: 2px solid #02ffff}
.herodetails>.content>.equip p{line-height: 36px;font-size: 20px;}

/* ================================================================================
 * 游戏攻略
 * ================================================================================ */
.strategy{background: #eff0f4;}
.strategy>ul{padding: 20px 30px 0;}

.strategy_details{
    padding: 20px;
    background: #fff;
}
.strategy_details p{
    line-height: 36px;
    font-size: 20px;
}

/* ================================================================================
 * 霸王之業
 * ================================================================================ */
.hero_sp>.bg{
    width: 640px;
    height: 660px;
    background: #f8ebc9;
}
.hero_sp>.bg>.title{
    width: 500px;
    height: 80px;
    padding: 20px 0 0 0;
    margin: 0 auto;
    border-bottom: 5px solid #e9c650;
    text-align: center;
}
.hero_sp>.bg>.title>p{
    line-height: 40px;
    font-size: 30px;
    color: #fd00fe;
}
.hero_sp>.bg>a{
    display: inline-block;
    width: 500px;
    height: 540px;
    margin-left: 70px;
    text-align: center;
}
.hero_sp>.bg>a img{width: 500px;height:500px;}
.hero_sp>.bg>a  p{
    line-height: 40px;
    font-size: 20px;
    color: #000;
}


/* ================================================================================
 *   兼容性处理
 * ================================================================================ */
.nav-tabs>li>a{border-radius: 0 0 0 0;}
.nav>li>a{padding: 0 0;}
.nav-tabs>li { margin-bottom: 0;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: 0}