.content{ padding-top: 80px; padding-bottom: 100px; .logo{ width: 80%; display: block; margin: auto; margin-top: 100px; } #dataBtn{ cursor: pointer; } .txt{ font-size: 15px; color: #333436; line-height: 32px; font-weight: 300; margin-top: 40px; } .tip{ font-size: 12px; line-height: 24px; color: #515356; font-weight: 300; margin-top: 40px; a{ color: #515356; } } .courseSwiper{ overflow: initial; } .courseYears{ margin-top: 40px; .courseYear{ font-size: 24px; line-height: 29px; color: #707579; width: 60px; margin-right: 70px; cursor: pointer; &.active{ color: #E60012; } .bar{ position: absolute; width: 40px; height: 1px; top: 50%; left: 75px; border-bottom: 1px dashed #CED3D8; } } } .courseLists{ display: flex; flex-wrap: nowrap; margin-top: 40px; // width: max-content; // padding-right: 300px; .courseItem{ // flex-shrink:0; padding: 30px 40px; background: #fff; width: 440px; margin-right: 20px; height: 100%; padding-bottom: 50px; margin-right: 30px; .year{ font-size: 44px; line-height: 54px; color: #E60012; } .bar{ width: 100%; height: 1px; background: #D1D3D5; margin-top: 30px; } .pic{ width: 100%; margin-bottom: -15px; margin-top: 30px; } .txt{ font-size: 14px; line-height: 28px; font-weight: 300; margin-top: 30px; } } } } .content2{ background: #F1F3F5; // padding-bottom: 0; overflow: hidden; } .content2_list{ background: #F1F3F5; padding: 0; padding-bottom: 100px; overflow-x: scroll; } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 40px; .logo{ // width: 300px; margin-top: 40px; } .txt{ margin-top: 20px; font-size: 14px; line-height: 30px; } .courseYears{ margin-top: 20px; .courseYear{ font-size: 16px; line-height: 19px; width: 40px; margin-right: 27px; &.active{ color: #E60012; } .bar{ position: absolute; width: 15px; height: 1px; top: 50%; left: 46px; border-bottom: 1px dashed #CED3D8; } } } .courseLists{ margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-top: 25px; .courseItem{ width: 300px; margin-right: 10px; padding: 20px; padding-bottom: 30px; .year{ font-size: 36px; line-height: 44px; } .bar{ margin-top: 20px; } .txt{ margin-top: 20px; } .pic{ margin-top: 20px; margin-bottom: 0; } } } .swiperControl{ display: flex !important; justify-content: space-between; align-items: center; margin-top: 20px; .swiper-scrollbar{ position: relative; bottom: auto; top: 0; width: 89%; height: 3px; background: #D1D3D5; .swiper-scrollbar-drag{ background: #E9463F; } } .arrowBox{ position: relative; display: flex; justify-content: space-between; width: 7.5%; height: 100%; img{ width: 50%; display: block; } } } } }