@charset "utf-8";
#subjects{background-color:#e0e2e4;height:170px}
#subjects .g-wrap a{position:absolute;width:100%;display:block;height:100%;overflow:hidden;top:0;left:100%;opacity:1;-webkit-opacity:1;-webkit-transition:left .3s,-webkit-opacity .7s;transition:left .3s,opacity .7s}
#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:#7dcdf3}
#subjects .g-wrap a span{position:absolute;background:no-repeat 0 0}
#subjects .g-wrap .p2{display:none;opacity:0;-webkit-opacity:0;-webkit-transition:-webkit-opacity .4s;transition:opacity .4s}
#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:.3s;-ms-transition-delay:.3s;-moz-transition-delay:.3s}
#subjects .ready .item-4{transition-delay:150ms;-webkit-transition-delay:450ms;-ms-transition-delay:450ms;-moz-transition-delay:450ms}
@media (min-width:768px){
.g-wrap{position: relative;margin: 0px auto;width:710px;height: 100%; overflow: hidden;}
#subjects .g-wrap .item-1 .p1{width:500px;height:170px;top:0;left:0}
#subjects .g-wrap .item-2 .p1{top:0;left:0}
#subjects .g-wrap .item-3 .p1{width:77px;height:76px;top:0;left:0}
#subjects .g-wrap .item-4 .p1{width:182px;height:80px;top:0;left:0}
#subjects .state-0 .item-1{left:0}
#subjects .state-0 .item-2{left:180px}
#subjects .state-0 .item-3{left:360px}
#subjects .state-0 .item-4{left:540px}
#subjects .state-1 .item-1{left:0}
#subjects .state-1 .item-2{left:500px}
#subjects .state-1 .item-3{left:570px}
#subjects .state-1 .item-4{left:640px}
#subjects .state-2 .item-1{left:0}
#subjects .state-2 .item-2{left:70px}
#subjects .state-2 .item-3{left:570px}
#subjects .state-2 .item-4{left:640px}
#subjects .state-3 .item-1{left:0}
#subjects .state-3 .item-2{left:70px}
#subjects .state-3 .item-3{left:140px}
#subjects .state-3 .item-4{left:640px}
#subjects .state-4 .item-1{left:0}
#subjects .state-4 .item-2{left:70px}
#subjects .state-4 .item-3{left:140px}
#subjects .state-4 .item-4{left:210px}
}
@media (min-width:992px){
.g-wrap{position: relative;margin: 0px auto;width:940px;height: 100%; overflow: hidden;}
#subjects .g-wrap .item-1 .p1{width:500px;height:170px;top:0;left:0}
#subjects .g-wrap .item-2 .p1{top:0;left:0}
#subjects .g-wrap .item-3 .p1{width:77px;height:76px;top:0;left:0}
#subjects .g-wrap .item-4 .p1{width:182px;height:80px;top:0;left:0}
#subjects .state-0 .item-1{left:0}
#subjects .state-0 .item-2{left:235px}
#subjects .state-0 .item-3{left:470px}
#subjects .state-0 .item-4{left:705px}
#subjects .state-1 .item-1{left:0}
#subjects .state-1 .item-2{left:490px}
#subjects .state-1 .item-3{left:640px}
#subjects .state-1 .item-4{left:790px}
#subjects .state-2 .item-1{left:0}
#subjects .state-2 .item-2{left:150px}
#subjects .state-2 .item-3{left:640px}
#subjects .state-2 .item-4{left:790px}
#subjects .state-3 .item-1{left:0}
#subjects .state-3 .item-2{left:150px}
#subjects .state-3 .item-3{left:300px}
#subjects .state-3 .item-4{left:790px}
#subjects .state-4 .item-1{left:0}
#subjects .state-4 .item-2{left:150px}
#subjects .state-4 .item-3{left:300px}
#subjects .state-4 .item-4{left:450px}
}
@media (min-width:1200px){
.g-wrap{position: relative;margin: 0px auto;width:1140px;height: 100%; overflow: hidden;}
#subjects .g-wrap .item-1 .p1{width:500px;height:170px;top:0;left:0}
#subjects .g-wrap .item-2 .p1{top:0;left:0}
#subjects .g-wrap .item-3 .p1{width:77px;height:76px;top:0;left:0}
#subjects .g-wrap .item-4 .p1{width:182px;height:80px;top:0;left:0}
#subjects .state-0 .item-1{left:0}
#subjects .state-0 .item-2{left:285px}
#subjects .state-0 .item-3{left:570px}
#subjects .state-0 .item-4{left:855px}
#subjects .state-1 .item-1{left:0}
#subjects .state-1 .item-2{left:480px}
#subjects .state-1 .item-3{left:700px}
#subjects .state-1 .item-4{left:920px}
#subjects .state-2 .item-1{left:0}
#subjects .state-2 .item-2{left:220px}
#subjects .state-2 .item-3{left:700px}
#subjects .state-2 .item-4{left:920px}
#subjects .state-3 .item-1{left:0}
#subjects .state-3 .item-2{left:220px}
#subjects .state-3 .item-3{left:440px}
#subjects .state-3 .item-4{left:920px}
#subjects .state-4 .item-1{left:0}
#subjects .state-4 .item-2{left:220px}
#subjects .state-4 .item-3{left:440px}
#subjects .state-4 .item-4{left:660px}
}
@media (min-width:1400px){
.g-wrap{position: relative;margin: 0px auto;width:1340px;height: 100%; overflow: hidden;}
#subjects .g-wrap .item-1 .p1{top:0;left:0}
#subjects .g-wrap .item-2 .p1{top:0;left:0}
#subjects .g-wrap .item-3 .p1{top:0;left:0}
#subjects .g-wrap .item-4 .p1{top:0;left:0}
#subjects .state-0 .item-1{left:0}
#subjects .state-0 .item-2{left:335px}
#subjects .state-0 .item-3{left:670px}
#subjects .state-0 .item-4{left:1005px}
#subjects .state-1 .item-1{left:0}
#subjects .state-1 .item-2{left:500px}
#subjects .state-1 .item-3{left:780px}
#subjects .state-1 .item-4{left:1040px}
#subjects .state-2 .item-1{left:0}
#subjects .state-2 .item-2{left:280px}
#subjects .state-2 .item-3{left:780px}
#subjects .state-2 .item-4{left:1040px}
#subjects .state-3 .item-1{left:0}
#subjects .state-3 .item-2{left:280px}
#subjects .state-3 .item-3{left:560px}
#subjects .state-3 .item-4{left:1060px}
#subjects .state-4 .item-1{left:0}
#subjects .state-4 .item-2{left:280px}
#subjects .state-4 .item-3{left:560px}
#subjects .state-4 .item-4{left:840px}
}