﻿@charset "utf-8";

/* CSS Document */
.sortBody {
    width: 3840px;
    height: 2160px;
    background: url(../img/sortBg.jpg) no-repeat;
    background-size: 100% 100%
}

    .sortBody .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        background: rgba(0, 0, 0, .1);
        width: 100%
    }

.sortLogin {
    width: 767px;
    height: 560px;
    background: url(../img/sortLogin.png) no-repeat;
    top: 0;
    right: 110px;
    position: absolute
}

.sortLoginBg2 {
    background: url(../img/logoBox-bg.png) no-repeat;
    background-size: 100%;
}

.tx {
    position: absolute;
    width: 151px;
    height: 151px;
    border-radius: 100%;
    position: absolute;
    top: 258px;
    left: 137px
}

    .tx img {
        width: inherit;
        height: inherit;
    }

.sortBtn {
    position: absolute;
    width: 209px;
    height: 78px;
    background: url(../img/sortBtn.png) no-repeat;
    top: 320px;
    left: 314px
}

.sortBack {
    position: absolute;
    width: 392px;
    height: 246px;
    background: url(../images/back.png) no-repeat;
    bottom: 100px;
    right: 272px;
    z-index: 10
}

.sortBox {
    width: 2814px;
    height: 1918px;
    background: #faf3e7;
    margin: 100px auto 0 auto;
    border-radius: 30px
}

.sortRight {
    width: 1771px;
    height: 1842px;
    background: url(../img/righBg.jpg) no-repeat bottom
}

.sortCenter {
    background: url(../img/sortBox.jpg) repeat;
    margin: 0 70px
}

.sortLeft {
    background: #f8f4e7;
    position: relative;
}

.fixation {
    width: 900px;
    height: 1844px;
}

.sortLeft .list {
    background: #fff;
    overflow-y: auto;
}

    .sortLeft .list::-webkit-scrollbar {
        display: none;
    }

    .sortLeft .list li {
        float: left;
        width: 50%;
        height: 445px;
        background: #fff;
        box-shadow: 0 0 5px #ccc;
        font-size: 51px;
        text-align: center;
        cursor: pointer;
    }

        .sortLeft .list li:nth-child(2),
        .sortLeft .list li:nth-child(7) {
            background: #f7bf42;
            color: #fff
        }

        .sortLeft .list li:nth-child(3),
        .sortLeft .list li:nth-child(6) {
            background: #51b5f3
        }

.sortLeft .arrow {
    height: 100px;
    width: 900px;
    background-color: skyblue;
    position: absolute;
    bottom: 0;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: 50%;
    display: none;
    -webkit-animation: shows ease-in-out 2s infinite;
    animation: shows ease-in-out 2s infinite;
}

.sortLogo {
    position: relative;
    width: 1166px;
    height: 272px;
    margin-left: 140px;
    margin-top: 300px
}

    .sortLogo .boy {
        position: absolute;
        width: 237px;
        height: 338px;
        background: url(../img/sortBoy.png) no-repeat;
        background-size: 100%;
        top: -90px;
        left: 70px;
        -webkit-animation: float ease-in-out 1s infinite;
        animation: float ease-in-out 1s infinite;
    }

.ship {
    position: absolute;
    width: 603px;
    height: 495px;
    background: url(../img/pic02.png) no-repeat;
    bottom: 0px;
    left: 150px;
    -webkit-animation: float ease-in-out 2s infinite;
    animation: float ease-in-out 2s infinite;
}

.sortTip {
    position: absolute;
    width: 228px;
    height: 143px;
    background: url(../img/tip.png) no-repeat;
    top: 95px;
    left: -135px;
    -webkit-animation: shows ease-in-out 2s infinite;
    animation: shows ease-in-out 2s infinite;
}

.sortLeft li a {
    display: block;
    padding-top: 80px;
    text-align: center;
    font-size: 51px
}

    .sortLeft li a i {
        display: inline-block;
        width: 217px;
        height: 235px;
        background: url(../img/nav.png) no-repeat;
        background-size: 100%
    }

        .sortLeft li a i span {
            width: 198px;
            height: 202px;
            display: block;
            position: relative;
            margin: 0 auto;
            top: -10px;
        }

    .sortLeft li a p {
        line-height: 1.5;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .sortLeft li a i.index span {
        background: url(../img/nav_01.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.map span {
        background: url(../img/nav_03.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.catalog span {
        background: url(../img/nav_05.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.game span {
        background: url(../img/nav_07.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.sousuo span {
        background: url(../img/nav_09.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.kb span {
        background: url(../img/kb.png) no-repeat;
        background-size: 100%
    }
    .sortLeft li a i.trip span {
        background: url(../img/trip.png) no-repeat;
        background-size: 100%
    }
    .sortLeft li a i.sj span {
        background: url(../img/sj.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.hd span {
        background: url(../img/hd.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.ts span {
        background: url(../img/ts.png) no-repeat;
        background-size: 100%
    }

    .sortLeft li a i.sousuo span {
        background: url(../img/nav_09.png) no-repeat;
        background-size: 100%
    }
    .sortLeft li a i.tujie span {
        background: url(../img/tujie.png) no-repeat;
        background-size: 100%
    }
    .sortLeft li a i.video span {
        background: url(../images/menu/nav_video.png) no-repeat;
        background-size: 100%
    }
.sortLeft li.currentNav a i span {
    top: 0;
}

.sortLeft li:hover a i span {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.sortLeft li:hover a p {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

@-webkit-keyframes shows {
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: .3;
    }
}

@keyframes shows {
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: .3;
    }
}

@-moz-keyframes shows
/* Firefox */
{
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: .3;
    }
}

/* Opera */
@-o-keyframes shows {
    0% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: .65;
    }

    100% {
        opacity: .3;
    }
}

.family {
    position: absolute;
    width: 100%;
    height: 1232px;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

    .family img {
        position: relative;
        z-index: 12
    }

.family01 {
    position: absolute;
    width: 100%;
    height: 1232px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: url(../img/pic01.gif) no-repeat bottom;
    background-size: 100%
}

.yun01 {
    position: absolute;
    width: 351px;
    height: 186px;
    background: url(../img/yun.png) no-repeat;
    background-size: 100%;
    top: 0px;
    left: -351px;
    -webkit-animation: Cloudmove ease-in-out 6s infinite;
    animation: Cloudmove ease-in-out 6s infinite;
}

.yun02 {
    position: absolute;
    width: 243px;
    height: 131px;
    background: url(../img/yun.png) no-repeat;
    background-size: 100%;
    top: 100px;
    left: -351px;
    -webkit-animation: Cloudmove ease-in-out 10s infinite;
    animation: Cloudmove ease-in-out 10s infinite;
}

@-webkit-keyframes Cloudmove {
    0% {
        left: -351px;
    }

    100% {
        left: 900px;
        opacity: 0
    }
}

@keyframes Cloudmove {
    0% {
        left: -351px;
    }

    100% {
        left: 900px;
        opacity: 0
    }
}

@-moz-keyframes Cloudmove
/* Firefox */
{
    0% {
        left: -351px;
    }

    100% {
        left: 900px;
        opacity: 0
    }
}

@-o-keyframes Cloudmove
/* Opera */
{
    0% {
        left: -351px;
    }

    100% {
        left: 900px;
        opacity: 0
    }
}
