* { margin: 0; padding: 0; } body, html { min-width: 1200px; margin: auto; font-family: "微软雅黑"; color: #333; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url(../images/i_left.png); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url(../images/i_right.png); } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 70px; height: 70px; z-index: 10; cursor: pointer; background-size: 70px 70px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev { left: 100px; } .swiper-button-next { right: 100px; } .title { box-sizing: border-box; padding-top: 50px; padding-bottom: 30px; } .titlea { text-align: center; font-size: 36px; letter-spacing: 10px; user-select: none; } .titleb { box-sizing: border-box; padding: 20px 0; text-align: center; font-size: 24px; text-transform: uppercase; user-select: none; } .titlec { width: 70px; height: 6px; background: #e60000; margin: auto; } .indexa { width: 680px; margin: auto; text-align: center; font-size: 16px; line-height: 24px; margin-bottom: 50px; } .indexb { display: block; width: 827px; margin: auto; margin-bottom: 40px; } .indexc { width: 100%; height: 490px; background: #f22c2d; display: flex; justify-content: center; } .indexci { width: 400px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .indexci:nth-child(2) { background: #1f1f1f; } .indexcia { display: block; width: 100px; height: 100px; } .indexcib { margin: 15px 0; font-size: 20px; font-weight: bold; } .indexcic { font-size: 24px; color: white; } .indexci:nth-child(2)>.indexcib { color: white; } .indexd{ width: 390px; height: 60px; border: 2px solid #e60000; border-radius: 4px; margin: 30px auto; display: flex; } .indexdi{ width: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; user-select: none; } .indexdi:nth-child(1){ background: #E60000; color: white; } .indexe{ width: 1000px; margin: auto; box-sizing: border-box; overflow: hidden; } .indexei{ width: 250px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; float: left; box-sizing: border-box; user-select: none; } .indexei>img{ display: block; width: 117px; margin-bottom: 20px; } .indexei>div{ font-size: 24px; } .indexf{ background: #1F1F1F; color: white; overflow: hidden; } .indexfi{ display: block; width: 910px; margin: 80px auto; } .indexg{ width: 1100px; height: 110px; background: #f5f5f5; border-radius: 6px; margin: auto; position: relative; } .indexg_horn_left{ width: 30px; height: 30px; border-radius: 6px 0 0 0; background: #F86C27; position: absolute; left: -2px; top: -2px; z-index: 1; } .indexg_horn_right{ width: 30px; height: 30px; border-radius: 0 0 6px 0; background: #F86C27; position: absolute; right: -2px; bottom: -2px; z-index: 1; } .indexg_inner{ width: 100%; height: 100%; display: flex; justify-content: center; position: absolute; left: 0px; top: 0px; z-index: 2; background: #f5f5f5; border-radius: 4px; box-sizing: border-box; padding: 30px; line-height: 24px; font-size: 16px; } .indexg_inner_left{ width: 70px; color: #f86c27; } .indexg_inner_right{ width: 1030px; } .F86C27{ color: #F86C27; } .indexh{ width: 1100px; margin: auto; margin-top: 50px; display: flex; justify-content: space-between; align-items: center; } .indexhi{ box-sizing: border-box; } .indexhia{ display: block; width: 300px; height: 260px; border-radius: 4px; } .indexhia:hover{ transition: all 0.3s; box-shadow: 0 0 10px 1px #E60000; } .indexhib{ width: 260px; height: 80px; border-radius: 6px; background: #E60000; color: white; font-size: 20px; text-align: center; line-height: 80px; margin: auto; position: relative; top: -20px; user-select: none; }