/*
=======================================
    news CSS
=======================================
------------------*/
#character {
    width: 100%;
    /*background: url(../img/pointbg.jpg) top center no-repeat;*/
    background-size: cover;
    text-align: center;
}

.characterTitle {
    position: absolute;
    width: 60%;
    top: 30px;
    left: 19%;
}

.characterText {
    font-size: 1em;
    color: #000;
    padding-left: 35%;
    padding-right: 20px;
    margin-top: -46%;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white
}

.characterContent {
    position: absolute;
    width: 100%;
    height: 75%;
    top: 9%;
    left: 0%;
}

.people {
    display: none;
}

.people_m {
    position: relative;
    display: block;
}

.a_1{position: absolute;
    top: 56.5%;
    left: 35%;
    width: 70%;}
.a_1 li{width: 14%;float: left;}
.a_2{position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;}
.a_2 li{width: 14%;float: left;}
.b_1{position: absolute;
    top: 56.5%;
    left: 35%;
    width: 70%;}
.b_1 li{width: 14%;float: left;}
.b_2{position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;}
.b_2 li{width: 14%;float: left;}

.c_1{position: absolute;
    top: 56.5%;
    left: 35%;
    width: 70%;}
.c_1 li{width: 14%;float: left;}
.c_2{position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;}
.c_2 li{width: 14%;float: left;}

.d_1{position: absolute;
    top: 56.5%;
    left: 35%;
    width: 70%;}
.d_1 li{width: 14%;float: left;}
.d_2{position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;}
.d_2 li{width: 14%;float: left;}

.e_1{    position: absolute;
    top: 56%;
    left: 32%;
    width: 70%;}
.e_1 li{width: 14%;float: left;}
.e_2{position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;}
.e_2 li{width: 14%;float: left;}

.warriorLeft{
    position: absolute;
    width: 100%;
    left: 0;
    top:45%;
}
.warriorRight{
    position: absolute;
    width: 100%;
    right: 25%;
    top: 45%;
}

@media screen and (min-width: 640px) {
    .people {
        display: block;
    }

    .people_m {
        display: block;
    }

    .warriorLeft{
        position: absolute;
        width: 36%;
        left: 35%;
        top: 50%;
    }
    .warriorRight{
        position: absolute;
        width: 36%;
        right: 45%;
        top: 48%;
    }

    #character {
        width: 100%;
        /*background: url(../img/pointbg.jpg) top center no-repeat;*/
        background-size: cover;
        text-align: center;
    }

    .characterText {
        font-size: 1em;
        color: #fff;
        padding-left: 20px;
        margin-top: 10px;
        padding-right: ;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
    }

    .characterTitle {
        position: absolute;
        width: 28%;
        top: 70px;
        left: 36%;
    }

    .characterContent {
position: absolute;
    width: 39%;
    height: 85%;
    bottom: 0px;
    left: 31%;
    }
}