@charset "utf-8";

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

.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: 6%;
    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;
}

.f_1 {
    position: absolute;
    top: 56%;
    left: 32%;
    width: 70%;
}

.f_1 li {
    width: 14%;
    float: left;
}

.f_2 {
    position: absolute;
    width: 70%;
    top: 70%;
    left: 24%;
}

.f_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: 40%;
        left: 50%;
        top: 30%;
    }

    .warriorRight {
        position: absolute;
        width: 40%;
        right: 58%;
        top: 28%;
    }

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

    .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%;
    }
}