/* 滑块 start */ #subjects {height: 145px;background-color:#e0e2e4;} #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:#c8c8c8;} #subjects .g-wrap .item-2 {z-index:2; background-color:#6fcdbd;} #subjects .g-wrap .item-3 {z-index:3; background-color:#f7f7f7;} #subjects .g-wrap .item-4 {z-index:4; background-color:#2d2d58;} #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:0;top:0;width: 750px;height:165px;} #subjects .g-wrap .item-1 .p2 {left:276px; top:68px; z-index:2; width:189px; height:29px;} #subjects .g-wrap .item-2 .p1 { width: 750px; } /*#subjects .g-wrap .item-2 .p2 {left:250px; top:26px;} #subjects .g-wrap .item-3 .p1 {height:76px;} #subjects .g-wrap .item-3 .p2 {left:150px; width:282px; height:122px;} #subjects .g-wrap .item-4 .p1 {left:23px; top:54px; width:182px; height:80px;} #subjects .g-wrap .item-4 .p2 {left:227px; top:21px; 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 .state-0 .item-1 {left:0;} #subjects .state-0 .item-2 {left: 400px;} #subjects .state-0 .item-3 {left: 800px;} #subjects .state-0 .item-4 {left:1200px;} /* 指向第一个 */ #subjects .state-1 .item-1 {left:0;} #subjects .state-1 .item-2 {left:500px;} #subjects .state-1 .item-3 {left:866px;} #subjects .state-1 .item-4 {left:1233px;} #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:350px;} #subjects .state-2 .item-3 {left:850px;} #subjects .state-2 .item-4 {left:1225px;} #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:350px;} #subjects .state-3 .item-3 {left:700px;} #subjects .state-3 .item-4 {left:1200px;} #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:366px;} #subjects .state-4 .item-3 {left:733px;} #subjects .state-4 .item-4 {left:1100px;} #subjects .state-4 .item-4 .p2 {-webkit-opacity:1; opacity:1; display:block\9;} /* 滑块 end */ /*gegede 768 */ /*gegede 768 */ @media screen and ( max-width:768px ){ #subjects {height:auto;background-color:#ffffff;padding: 0px 0px;} #subjects .g-wrap a {position:inherit; 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 a span {position:inherit; } .g-wrap{display:flex;flex-direction: column;} #subjects .g-wrap img{max-width:100%;} #subjects .g-wrap .item-1{width:100%;} #subjects .g-wrap .item-2{width:100%;margin:5px 0px;;} #subjects .g-wrap .item-3{width:100%; margin-bottom:20px} }