@charset "utf-8";
.g-wrap{
   position: relative;
    margin: 0px auto;
    width: 1200px;
    height: 100%;
    overflow: hidden;
}
#subjects{
    height: 170px;
}
#subjects .g-wrap A{
   position: absolute;
    width: 100%;
    display: block;
    height: 100%;
    overflow: hidden;
    top: 0px;
    left: 100%;
    opacity: 1;
    -webkit-opacity: 1;
    -webkit-transition: left 300ms, -webkit-opacity 700ms;
    transition: left 300ms, opacity 700ms;
}
#subjects .g-wrap .item-1{
   z-index: 1;
    background-color: #123184;
}
#subjects .g-wrap .item-2{
   z-index: 2;
    background-color: #93a2c8;
}
#subjects .g-wrap .item-3{
   z-index: 3;
    background-color: #cfeaef;
}
#subjects .g-wrap .item-4{
   z-index: 4;
    background-color: #BDE4E3;
}

#subjects .g-wrap A SPAN{
   position: absolute;
    background: no-repeat 0px 0px;
}
#subjects .g-wrap .p2{
   display: none;
    opacity: 0;
    -webkit-opacity: 0;
    -webkit-transition: -webkit-opacity 400ms;
    transition: opacity 400ms;
}
#subjects .g-wrap .item-1 .p1{
   width: 500px;
    height: 170px;
    top: 0px;
    left: 0px;
}
#subjects .g-wrap .item-1 .p2{
   z-index: 2;
    width: 189px;
    height: 29px;
    top: 68px;
    left: 276px;
}
#subjects .g-wrap .item-2 .p1{
   top: 0px;
    left: 0px;
}
#subjects .g-wrap .item-2 .p2{
   top: 26px;
    left: 270px;
}
#subjects .g-wrap .item-3 .p1{
   width: 77px;
    height: 76px;
    top: 0px;
    left: 0px;
}
#subjects .g-wrap .item-3 .p2{
   width: 282px;
    height: 122px;
    top: 21px;
    left: 190px;
}
#subjects .g-wrap .item-4 .p1{
   width: 182px;
    height: 80px;
    top: 0px;
    left: 0px;
}
#subjects .g-wrap .item-4 .p2{
   width: 245px;
    height: 122px;
    top: 21px;
    left: 227px;
}

#subjects .trans A{
   display: none;
    opacity: 0;
    -webkit-opacity: 0;
}
#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 .state-0 .item-1{
   left: 0px;
}
#subjects .state-0 .item-2{
   left: 340px;
}
#subjects .state-0 .item-3{
   left: 604px;
}
#subjects .state-0 .item-4{
   left: 874px;
}



#subjects .state-1 .item-1{
   left: 0px;
}
#subjects .state-1 .item-2{
   left: 500px;
}
#subjects .state-1 .item-3{
   left: 710px;
}
#subjects .state-1 .item-4{
   left: 920px;
}





#subjects .state-2 .item-1{
   left: 0px;
}
#subjects .state-2 .item-2{
   left: 216px;
}
#subjects .state-2 .item-3{
   left: 716px;
}
#subjects .state-2 .item-4{
   left: 932px;
}





#subjects .state-3 .item-1{
   left: 0px;
}
#subjects .state-3 .item-2{
   left: 216px;
}
#subjects .state-3 .item-3{
   left: 432px;
}
#subjects .state-3 .item-4{
   left: 932px;
}





#subjects .state-4 .item-1{
   left: 0px;
}
#subjects .state-4 .item-2{
   left: 216px;
}
#subjects .state-4 .item-3{
   left: 432px;
}
#subjects .state-4 .item-4{
   left: 650px;
}