.course{padding-top:120px;} .course_info{ position: relative; margin:50px 0;} .course_line { position: relative} .course_line .back_year{ position:absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: right; line-height: 100%; z-index: 1; font-size: 400px; color: #ffffff;font-family: 'Swiss721BTBlackCondensed';} @media screen and (max-width:1400px){ .course_line .back_year{font-size:300px; text-align: right;padding-top: 6%;} } .course_line .course_txt{position: relative; z-index: 2; float: right;width:50%;} .course_line .course_txt .course_day{line-height:1; color: #006b6e; margin-bottom:40px;} .course_line .course_txt .course_day span{ font-size:70px; font-family: 'Swiss721BTBlackCondensed';} .course_line .course_txt .course_day em{font-size:22px;margin-left:5px;font-style:normal} .course_line .course_txt .course_name{width:140px;height:50px;line-height:50px;font-size:24px;margin:35px 0;font-weight:300;} .course_line .course_txt .course_p{font-size:16px;line-height:2.4; color: #4c4c51;} .course_line .course_matter{position: relative; z-index: 2; float: left; width: 40%;} .course_matter .course_img{width:100%;background-position: center center; background-repeat: no-repeat; background-size: cover; height: 420px;} @keyframes enlarge{ 0%{transform:scale(1);-webkit-transform:scale(1);} 50%{transform:scale(1.05);-webkit-transform:scale(1.05);} 100%{transform:scale(1);-webkit-transform:scale(1);} } @-webkit-keyframes enlarge{ 0%{transform:scale(1);-webkit-transform:scale(1);} 50%{transform:scale(1.05);-webkit-transform:scale(1.05);} 100%{transform:scale(1);-webkit-transform:scale(1);} } .course_matter .course_img img{margin:0 auto; height: 200px;} .course_matter .course_circular{position:absolute;bottom:-100px;left:50%;width:280px;height:280px; transform:translateX(-50%);-webkit-transform:translateX(-50%);z-index:-1;} .course_matter .course_circular span{transform-style:preserve-3d; transform: rotatex(-58deg);position:relative;display:block;width:100%;height:100%;} .course_matter .course_circular span:before,.course_matter .course_circular span:after{content:'';width:100%;height:100%; position:absolute;bottom:0;left:0;border-radius:50%;-webkit-border-radius:50%;display:block;} /*.course_matter .course_circular span:before{background-image:linear-gradient(#fff, rgba(176,41,46,.3));z-index:2;} .course_matter .course_circular span:after{background-image:linear-gradient(#fff, rgba(176,41,46,.2)); z-index:-1;animation:scaleq 3.5s ease-in-out infinite;-webkit-animation:scaleq 3.5s ease-in-out infinite;will-change:transform;}*/ @keyframes scaleq{ 0%{transform:scale(1.2);-webkit-transform:scale(1.2);} 50%{transform:scale(1.6);-webkit-transform:scale(1.6);} 100%{transform:scale(1.2);-webkit-transform:scale(1.2);} } @-webkit-keyframes scaleq{ 0%{transform:scale(1.2);-webkit-transform:scale(1.2);} 50%{transform:scale(1.6);-webkit-transform:scale(1.6);} 100%{transform:scale(1.2);-webkit-transform:scale(1.2);} } .course_switch{position:absolute;bottom:50px;right:100px; display: none} .course_switch .course_switch_btn{display:inline-block;font-size:0;position:relative;z-index:2;margin:0 5px;width:48px;height:48px;line-height:48px;font-size:0;} .course_switch .course_switch_btn:after{content:'';position:absolute;width:100%;height:100%;background-color:#ccc;top:50%;left:50%;z-index:-1; border-radius:50%;-webkit-border-radius:50%;-webkit-transition:cubic-bezier(.4,.4,0,1) 0.4s;transition:cubic-bezier(.4,.4,0,1) 0.4s; -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);} .course_switch .course_switch_btn>i{font-size:18px;} .courseTap{overflow:hidden;padding:20px 0;} .courseTap .swiper-wrapper{margin: 20px 0;} .yaowan .swiper-slide .courseTap_info{padding-bottom:30px;cursor:pointer;position:relative; -webkit-transition:color 0.2s;transition:color 0.2s; background: url(../images/ruler2.png) bottom no-repeat; } .yaowan .swiper-slide.swiper-slide-active .courseTap_info{padding-bottom:30px;cursor:pointer;position:relative; -webkit-transition:color 0.2s;transition:color 0.2s; background: url(../images/ruler.png) bottom no-repeat; } .courseTap_info:before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;-webkit-border-radius:50%;z-index:2; border:2px solid #e0e0e0;bottom:0;left:0;-webkit-transform:translateY(50%);transform:translateY(50%);background-color:#fff; -webkit-transition:border-color 0.4s,background-color 0.4s;transition:border-color 0.4s,background-color 0.4s; display: none} .courseTap_info .courseTap_time{font-size:24px;font-family: 'Swiss721BTBlackCondensed';} .courseTap_info .courseTap_name{font-family:'NotoSansSCR';font-size:14px;margin-top:15px;} .courseTap .courseTap_line{height:2px;width:100%;position:absolute;bottom:-1px;left:0;background-color:#e0e0e0;z-index:-1;} .courseTap .courseTap_line>s{display:block;width:0;height:100%;-webkit-transition:width 0.4s;transition:width 0.4s;background-color:#006b6e;} .courseTap .swiper-slide-thumb-active .courseTap_info{color:#006b6e;} .courseTap .swiper-slide-thumb-active .courseTap_info:before, .courseTap .onTap .courseTap_info:before{border-color:#006b6e;} .courseTap .swiper-slide-thumb-active .courseTap_info:before{background-color:#006b6e;} @media (max-width:768px) { .course_matter .course_img{ display: none} .course_txt { width: 100%; } .course_txt .course_day span{ font-size: 70px;} .course_info { margin: 40px 0; margin-top: 70px; } .course_line .course_txt { position: relative; z-index: 2; float: none; width: initial; } .course_line .back_year { font-size: 200px; } }