.Box {position: relative; width:100%; float:left;} .Box .content { width:100%; float: left; } .Box .Box_con {position: relative;} .Box .Box_con .btnl_1 {position: absolute;} .Box .Box_con .btn { display: block; width:11px; height: 20px; position: absolute; top: calc(50% - 10px); cursor: pointer; } .Box .Box_con .btnl_1 { background: url(../img/zj.png) no-repeat center; left:0px; z-index:12; } .Box .Box_con .btnr_1 { background: url(../img/yj.png) no-repeat center; right:0px; z-index:12; } .Box .Box_con .btnl_1:hover { background: url(../img/zj.png) no-repeat center; } .Box .Box_con .btnr_1:hover {background: url(../img/yj.png) no-repeat center;} .Box .Box_con .conbox { position: relative; overflow: hidden; width: calc(100% - 50px); margin-left: 25px; margin-right: 25px; height:30px } .Box .Box_con .conbox ul {position: relative;list-style: none;} .Box .Box_con .conbox ul li{ width:78px; height:30px; float:left; transition: all 0.6s; text-align: center; font-size: 16px; } .Box .Box_con .conbox ul li a{ width: 100%; height: 30px; line-height: 30px; float: left; text-align: center; } .Box .Box_con .conbox ul li a:hover{ background-color: #00516f; color: #FFFFFF; } .Box .BoxSwitch_1 { margin-top: 30px; text-align: center; height: 50px; display:none; } .Box .BoxSwitch_1 span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 133.33px; height: 50px; background: #ccc; cursor: pointer; line-height:50px; float:left; } .Box .BoxSwitch_1 span.cur {background: red;} .Box .Box_con .btnl_2 {position: absolute;} .Box .Box_con .btn { display: block; width:11px; height: 20px; position: absolute; top: calc(50% - 10px); cursor: pointer; } .Box .Box_con .btnl_2 { background: url(../img/zj.png) no-repeat center; left:0px; z-index:12; } .Box .Box_con .btnr_2 { background: url(../img/yj.png) no-repeat center; right:0px; z-index:12; } .Box .Box_con .btnl_2:hover { background: url(../img/zj.png) no-repeat center; } .Box .Box_con .btnr_2:hover {background: url(../img/yj.png) no-repeat center;} .Box .Box_con .conbox { position: relative; overflow: hidden; width: calc(100% - 50px); margin-left: 25px; margin-right: 25px; } .Box .Box_con .conbox ul {position: relative;list-style: none;} .Box .Box_con .conbox ul li{ width:88px; height:30px; float:left; transition: all 0.6s; text-align: center; font-size: 16px; } .Box .Box_con .conbox ul li a{ width: 100%; height: 30px; line-height: 30px; float: left; text-align: center; } .Box .Box_con .conbox ul li a:hover{ background-color: #00516f; color: #FFFFFF; } .Box .BoxSwitch_2 { margin-top: 30px; text-align: center; height: 50px; display:none; } .Box .BoxSwitch_2 span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 133.33px; height: 50px; background: #ccc; cursor: pointer; line-height:50px; float:left; } .Box .BoxSwitch_2 span.cur {background: red;} #BoxUl_2{ margin-top:30px;} .Box6 {position: relative;} .Box6 .content { width:100%; float: left; } .Box6 .Box6_con_6 {position: relative;} .Box6 .Box6_con_6 .btnl_6 {position: absolute;} .Box6 .Box6_con_6 .btn { display: block; width:50px; height: 50px; position: absolute; top: calc(50% - 25px); cursor: pointer; } .Box6 .Box6_con_6 .btnl_6 { background: url(../img/j03.png) no-repeat center; left:-50px; z-index:12; } .Box6 .Box6_con_6 .btnr_6 { background: url(../img/j04.png) no-repeat center; right:-50px; z-index:12; } .Box6 .Box6_con_6 .btnl_6:hover { background: url(../img/j03.png) no-repeat center; } .Box6 .Box6_con_6 .btnr_6:hover {background: url(../img/j04.png) no-repeat center;} .Box6 .Box6_con_6 .conBox6 { position: relative; overflow: hidden; width:100%; } .Box6 .Box6_con_6 .conBox6 ul {position: relative;list-style: none;} .Box6 .Box6_con_6 .conBox6 ul li{ width:290px; float:left; text-align:center; } .Box6 .Box6_con_6 .conBox6 ul li dl dt{ height: 218px; text-align: center; overflow: hidden; } .Box6 .Box6_con_6 .conBox6 ul li dl dt span{ height: 100%; display: inline-block; vertical-align: middle; } .Box6 .Box6_con_6 .conBox6 ul li dl dt img{ max-width: 100%; max-height: 100%; vertical-align: middle; } .Box6 .Box6_con_6 .conBox6 ul li dl dd{ font-size: 16px; line-height: 32px; } .Box6 .Box6Switch_6 { margin-top: 30px; text-align: center; height: 50px; display:none; } .Box6 .Box6Switch_6 span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 133.33px; height: 50px; background: #ccc; cursor: pointer; line-height:50px; float:left; } .Box6 .Box6Switch_6 span.cur {background: red;} .Box6 .Box6_con_6 .btnl_6 { left:-50px; } .Box6 .Box6_con_6 .btnr_6 { right:-50px; } @media (max-width:1500px) { .zs{ width:calc(100% - 30px); margin:0 15px; } .Box6 .Box6_con_6 .btnl_6 { left:-15px; } .Box6 .Box6_con_6 .btnr_6 { right:-15px; } } @media (max-width:1360px) { .Box6 .Box6_con_6 .btnl_6 { left:-50px; } .Box6 .Box6_con_6 .btnr_6 { right:-50px; } } @media (max-width:1200px) { .Box6 .Box6_con_6 .btnl_6 { left:-30px; } .Box6 .Box6_con_6 .btnr_6 { right:-30px; } }