.header_search {
    height: 35px;
    background-color: #f4f4f4;
    border-radius: 15px;
    float: left;
    position: relative;
}
.header_search input {
    width: 80%;
    height: 35px;
    line-height: 35px;
    padding-left: 8px;
    font-family: "Hiragino Sans GB W3";
    font-size: 14px;
    border: none;
    border-radius: 15px;
}
.header_search a {
    display: inline-block;
    height: 35px;
    width: 20px;
    margin-right: 5px;
    float: right;
}
.header_search a img {
    margin-top: 10px;
}
header {
    position: fixed;
    z-index: 917;
    top: 0;
    left: 0;
    right: 0;
}

header .header-ratio {
    position: relative;
    padding-top: 12.962%;
}

header .header-ratio-container {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

header .header-container {
    height: 100%;
    background-color: transparent;
    padding: 2.5%;
    transition: all .25s;
}

header.diff .header-container {
    background-color: #f7ab32;
}

.header-container-padding {
    height: 100%;
    position: relative;
    padding-right: 40px;
}

header .logo {
    float: left;
    width: 39%;
    height: 100%;
    padding-right: 5%;
}

header .logo-container {
    display: block;
    height: 100%;
    background: left center no-repeat;
    background-size: auto 100%;
}

header .search {
    float: left;
    width: 65%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 917px;
    overflow: hidden;
}

header .search-container {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

header .search span {
    color: #8c7550;
}

header .search a {
    color: #8c7550;
}

header .search span.fa {
    margin-right: 1%;
    font-size: 16px;
}

header .search span.text {
    font-size: 14px;
}

header .search .texts {
    display: none;
}

header .user {
    position: absolute;
    z-index: 11;
    right: 0;
    margin-right: 5px;
    font-size: 24px;
    color: #ffffff;
    top: 50%;
    transform: translateY(-50%);
}

header .user a {
    color: #ffffff;
}

@media screen and (max-width: 374px) {
    header .header-container-padding {
        padding-right: 35px;
    }

    header .user {
        font-size: 22px;
    }

    header .search span.fa {
        font-size: 14px;
    }

    header .search span.text {
        font-size: 12px;
    }
}

@media screen and (min-width: 376px) {
    header .header-container-padding {
        padding-right: 45px;
    }

    header .user {
        font-size: 26px;
    }

    header .search span.fa {
        font-size: 18px;
    }

    header .search span.text {
        font-size: 16px;
    }
}

@media screen and (min-width: 415px) {
    header .header-container-padding {
        padding-right: 50px;
    }

    header .user {
        font-size: 32px;
    }

    header .search span.fa {
        font-size: 20px;
    }

    header .search span.text {
        font-size: 18px;
    }
}

.banner {
    padding-top: 46.875%;
    position: relative;
    overflow: hidden;
}

.banner > .container {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.banner .swiper-container {
    width: 100%;
    height: 100%;
}

.banner .swiper-slide {
    background: center no-repeat;
    background-size: cover;
}

.banner .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.banner .swiper-pagination span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffe8e8;
}

.banner .swiper-pagination span.swiper-pagination-bullet {
    background-color: #000;
    opacity: .25;
    transition: all .5s;
    margin-left: 7.5px;
    margin-right: 7.5px;
    vertical-align: middle;
}

.banner .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: #007aff;
    opacity: 1;
}

nav {
    background-color: #ffffff;
    padding: 2.5% 0;
    text-align: center;
}

nav li {
    display: block;
    float: left;
    width: 25%;
    padding: 0 2.5%;
}

nav.three li{
    width: 33.333%;
}

nav a {
    display: block;
}

nav div {
    margin: auto;
    width: 80%;
}

nav.three div {
    width: 70%;
}

nav span {
    display: block;
    margin: auto;
    padding-top: 100%;
    position: relative;
    border-radius: 50%;
}

nav span.act,
nav span.gamepad {
    background-color: #f8b548;
    background: linear-gradient(to top right, #f9c961, #f69b3f);
}

nav span.iso,
nav span.jpy {
    background-color: #56abfa;
    background: linear-gradient(to top right, #7fd0fd, #6292f8);
}

nav span.server,
nav span.chrome {
    background-color: #6fc82d;
    background: linear-gradient(to top right, #a3e346, #54b620);
}

nav span.all,
nav span.list-ul {
    background-color: #eb895d;
    background: linear-gradient(to top right, #f1a97c, #e95962);
}

nav i.fa {
    display: block;
    position: absolute;
    z-index: 11;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
}

nav i.fa {
    font-size: 32px;
}

nav h1 {
    font-size: 14px;
    margin-top: 10%;
    line-height: 1.25;
}

@media screen and (max-width: 374px) {
    nav i.fa {
        font-size: 28px;
    }

    nav h1 {
        font-size: 12px;
    }
}

@media screen and (min-width: 376px) {
    nav i.fa {
        font-size: 36px;
    }

    nav h1 {
        font-size: 15px;
    }
}

@media screen and (min-width: 415px) {
    nav i.fa {
        font-size: 48px;
    }

    nav h1 {
        font-size: 16px;
    }
}

.widget {
    margin-top: 2.5%;
    background-color: #ffffff;
}

.widget-title {
    padding: 2.5%;
    font-size: 16px;
    color: #000000;
}

.widget-title h1 {
    float: left;
    border-left: 3px solid #FFB22D;
    padding-left: 2.5%;
}

.widget-title a {
    display: block;
    float: right;
    color: #000000;
}

@media screen and (max-width: 374px) {
    .widget-title {
        font-size: 14px;
    }
}

@media screen and (min-width: 376px) {
    .widget-title {
        font-size: 17px;
    }
}

@media screen and (min-width: 415px) {
    .widget-title {
        font-size: 18px;
    }
}

.tupian {
    margin-top: 2.5%;
}

.tupian img {
    display: block;
    width: 100%;
}

footer {
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
}

footer span {
    display: block;
}

footer span img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

footer div {
    padding-top: 1.5%;
    font-size: 14px;
    color: #000000;
    line-height: 1.35;
}

footer div a {
    color: #000000;
}

footer div i {
    padding-left: 2.5%;
    padding-right: 2.5%;
}

footer p {
    margin-top: 1.5%;
    font-size: 12px;
    line-height: 1.75;
    color: #999999;
}

footer p a {
    color: #999999;
}

@media screen and (max-width: 374px) {
    footer div {
        font-size: 12px;
    }

    footer p {
        font-size: 10px;
    }
}

@media screen and (min-width: 376px) {
    footer div {
        font-size: 16px;
    }

    footer p {
        font-size: 14px;
    }
}

@media screen and (min-width: 415px) {
    footer div {
        font-size: 18px;
    }

    footer p {
        font-size: 16px;
    }
}

section.alertInfo {
    position: fixed;
    z-index: 8344;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #333333;
    line-height: 1.85;
    transition: all .5s cubic-bezier(.5, 1.5, 1, 1);
    transform: scale(0, 0);
    opacity: 0;
}

section.alertInfo.show {
    transform: scale(1, 1);
    opacity: 1;
}

.alertInfo .width {
    height: 100%;
}

.alertInfo .container {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.alertInfo .close {
    display: block;
    text-align: right;
    padding: 1%;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
}

.alertInfo .content {
    background-color: #ffffff;
    padding: 10% 2.5%;
    border-radius: 15px;
}

.alertInfo h1 {
    font-size: 18px;
}

.alertInfo p {
    font-size: 16px;
    margin-top: 5%;
}

.alertInfo a {
    color: #5c8eeb;
}

@media screen and (max-width: 374px) {
    .alertInfo .close {
        font-size: 22px;
    }

    .alertInfo h1 {
        font-size: 16px;
    }

    .alertInfo p {
        font-size: 14px;
    }
}

@media screen and (min-width: 376px) {
    .alertInfo .close {
        font-size: 26px;
    }

    .alertInfo h1 {
        font-size: 19px;
    }

    .alertInfo p {
        font-size: 17px;
    }
}

@media screen and (min-width: 415px) {
    .alertInfo .close {
        font-size: 28px;
    }

    .alertInfo h1 {
        font-size: 20px;
    }

    .alertInfo p {
        font-size: 18px;
    }
}