#subjects {
    height: 165px;
    background-color: #e0e2e4;
    position: relative;
    overflow: hidden;
}

#subjects .g-wrap a {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
    -webkit-transition: left 300ms, -webkit-opacity 700ms;
    transition: left 300ms, opacity 700ms;
}

#subjects .g-wrap .item-1 {
    z-index: 1;
    background-color: #b85d4c;
}

#subjects .g-wrap .item-2 {
    z-index: 2;
    background-color: #73a63b;
}

#subjects .g-wrap .item-3 {
    z-index: 3;
    background-color: #0c6ba3;
}

#subjects .g-wrap .item-4 {
    z-index: 4;
    background-color: #88a6c3;
}

#subjects .g-wrap .item-5 {
    z-index: 5;
    background-color: #8ec12e;
}

#subjects .g-wrap a span {
    position: absolute;
    background: no-repeat 0 0;
}

#subjects .g-wrap .p2 {
    -webkit-opacity: 0;
    opacity: 0;
    display: none \9;
    -webkit-transition: -webkit-opacity 400ms;
    transition: opacity 400ms;
}

#subjects .g-wrap .item-1 .p1 {
    left: 20px;
    top: 30px;
    width: 493px;
    height: 165px;
}

#subjects .g-wrap .item-1 .p2 {
    left: 200px;
    top: 20px;
    z-index: 2;
    width: 493px;
    height: 225px;
}

#subjects .g-wrap .item-2 .p1 {
    left: 20px;
    top: 30px;
    width: 493px;
    height: 165px;
}

#subjects .g-wrap .item-2 .p2 {
    left: 240px;
    top: 20px;
    width: 130px;
    height: 130px;
}

#subjects .g-wrap .item-3 .p1 {
    left: 20px;
    top: 30px;
    width: 493px;
    height: 165px;
}

#subjects .g-wrap .item-3 .p2 {
    left: 240px;
    top: 18px;
    width: 130px;
    height: 130px;
}

#subjects .g-wrap .item-4 .p1 {
    left: 20px;
    top: 30px;
    width: 493px;
    height: 225px;
}

#subjects .g-wrap .item-4 .p2 {
    left: 210px;
    top: 30px;
    width: 245px;
    height: 122px;
}

#subjects .g-wrap .item-5 .p1 {
    left: 20px;
    top: 55px;
    width: 493px;
    height: 225px;
}

#subjects .g-wrap .item-5 .p2 {
    left: 205px;
    top: 22px;
    width: 245px;
    height: 122px;
}

/*#subjects*/
#subjects .trans a {
    -webkit-opacity: 0;
    opacity: 0;
    display: none \9;
}

/* 逐个出现 */
#subjects .ready .item-2 {
    transition-delay: 150ms;
    -webkit-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
}

#subjects .ready .item-3 {
    transition-delay: 150ms;
    -webkit-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
}

#subjects .ready .item-4 {
    transition-delay: 150ms;
    -webkit-transition-delay: 450ms;
    -ms-transition-delay: 450ms;
    -moz-transition-delay: 450ms;
}

#subjects .ready .item-5 {
    transition-delay: 150ms;
    -webkit-transition-delay: 450ms;
    -ms-transition-delay: 450ms;
    -moz-transition-delay: 450ms;
}

/* 没有指向 */
#subjects .state-0 .item-1 {
    left: 0;
}

#subjects .state-0 .item-2 {
    left: 300px;
}

#subjects .state-0 .item-3 {
    left: 600px;
}

#subjects .state-0 .item-4 {
    left: 900px;
}

#subjects .state-0 .item-5 {
    left: 913px;
}

/* 指向第一个 */
#subjects .state-1 .item-1 {
    left: 0;
}

#subjects .state-1 .item-2 {
    left: 402px;
}

#subjects .state-1 .item-3 {
    left: 650px;
}

#subjects .state-1 .item-4 {
    left: 817px;
}

#subjects .state-1 .item-5 {
    left: 967px;
}

#subjects .state-1 .item-1 .p2 {
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
}

/* 指向第二个 */
#subjects .state-2 .item-1 {
    left: 0;
}

#subjects .state-2 .item-2 {
    left: 185px;
}

#subjects .state-2 .item-3 {
    left: 585px;
}

#subjects .state-2 .item-4 {
    left: 797px;
}

#subjects .state-2 .item-5 {
    left: 967px;
}

#subjects .state-2 .item-2 .p2 {
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
}

/* 指向第三个 */
#subjects .state-3 .item-1 {
    left: 0;
}

#subjects .state-3 .item-2 {
    left: 180px;
}

#subjects .state-3 .item-3 {
    left: 405px;
}

#subjects .state-3 .item-4 {
    left: 810px;
}

#subjects .state-3 .item-5 {
    left: 997px;
}

#subjects .state-3 .item-3 .p2 {
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
}

/* 指向第四个 */
#subjects .state-4 .item-1 {
    left: 0;
}

#subjects .state-4 .item-2 {
    left: 175px;
}

#subjects .state-4 .item-3 {
    left: 375px;
}

#subjects .state-4 .item-4 {
    left: 560px;
}

#subjects .state-4 .item-5 {
    left: 997px;
}

#subjects .state-4 .item-4 .p2 {
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
}

/* 指向第五个 */
#subjects .state-5 .item-1 {
    left: 0;
}

#subjects .state-5 .item-2 {
    left: 185px;
}

#subjects .state-5 .item-3 {
    left: 395px;
}

#subjects .state-5 .item-4 {
    left: 587px;
}

#subjects .state-5 .item-5 {
    left: 757px;
}

#subjects .state-5 .item-5 .p2 {
    -webkit-opacity: 1;
    opacity: 1;
    display: block \9;
}