.section3{z-index:1;position:relative}.section3.dark{color:#fff;background-color:#1a192e}.section3 .container{width:1280px;margin:0 auto;padding:80px 0;position:relative}.class-content{grid-row-gap:57px;grid-column-gap:37px}.section3 .class-card{background:#fff;border-radius:22px;height:356px}.section3 .empty-result{color:#999;letter-spacing:.1em;padding:60px 0;font-size:30px}@media only screen and (min-device-width:1025px) and (max-device-width:1280px){.section3 .container{padding:30px}}@media only screen and (min-device-width:768px) and (max-device-width:1024px){.section3 .container{width:960px;margin:0 auto;padding:20px}}@media screen and (max-width:767px){.section3 .container{width:100vw;margin:0 auto;padding:60px 20px}}
.section4{z-index:2;background:#fff;width:100vw;position:relative}.section4 .container{width:1280px;max-width:100%;margin:0 auto;padding:80px 20px;position:relative}.section4 .compare-list{width:100%;margin:0 auto;padding:0 0 40px}.section4 .compare-item{cursor:pointer;background-color:#fff;border-bottom:1px solid #ccc;width:100%;padding:20px 30px;transition:background-color .3s;position:relative}.section4 .compare-item:hover{background-color:#f9f9f9}.section4 .compare-item .title,.section4 .compare-item .title.date{text-align:left;color:#999;font-size:16px;position:absolute;top:20px;right:20px}.section4 .compare-avatar{width:40px;margin:40px}.section4 .compare-imgs{width:75%}.section4 .compare-imgs>div{width:20%;margin:20px 2%;display:block}.section4 .compare-imgs img,.section4 .compare-imgs .course-img{object-fit:cover;aspect-ratio:16/9;border-radius:16px;width:100%}.section4 .compare-imgs .cover-desc{color:#444;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:10px;font-size:14px;line-height:1.4;display:-webkit-box;overflow:hidden}.section4 .compare-total{border-left:1px solid #ccc;width:30%;padding-left:5%}.section4 .compare-total .total-row{margin-bottom:8px}.section4 .compare-total .desc{text-align:right;color:red;font-size:22px}.section4 .compare-action{padding-top:30px;padding-bottom:30px;padding-left:60px}.section4 .compare-action .btn{color:#fff;cursor:pointer;background-color:#358af3;justify-content:center;align-items:center;width:150px;height:40px;margin-bottom:15px;transition:all .3s;display:flex}.section4 .compare-action .btn.yellow{color:#333;background-color:#f9d849}.section4 .compare-action .btn.yellow:hover{background-color:#f5c920}.section4 .compare-action .btn.pink{color:#fff;background-color:#fe5d81}.section4 .compare-action .btn.pink:hover{background-color:#e04a6b}.section4 .loading{text-align:center;color:#999;padding:40px;font-size:18px}.section4 .head-btn{color:#fff;cursor:pointer;font-size:16px;text-decoration:none;transition:opacity .3s}.section4 .head-btn:hover{opacity:.8}.section4 .head-chevron{width:20px;height:20px;margin-left:10px}@media screen and (max-width:767px){.section4 .container{padding:40px 10px}.section4 .compare-item{flex-direction:column;padding:15px}.section4 .compare-item .title.date{text-align:left;margin-bottom:10px;position:static}.section4 .compare-imgs{width:100%;margin-bottom:20px}.section4 .compare-imgs>div{width:48%;margin:10px 1%}.section4 .compare-total{border-top:1px solid #ccc;border-left:none;width:100%;padding-top:20px;padding-left:0}.section4 .compare-action{padding-top:20px;padding-bottom:20px;padding-left:0}.section4 .compare-action .btn{width:100%}}
.section5{z-index:1;background:#ecf0f3;position:relative}.section5 .container{width:1280px;margin:0 auto;padding:80px 0;position:relative}.section5 .neumorphism-bg{background:#ecf0f3}.section5 .neumorphism-card{background:#ecf0f3;border-radius:22px;transition:box-shadow .2s linear;box-shadow:18px 18px 30px #d1d9e6,-10px -10px 20px #fff,inset 0 0 #d1d9e6,inset 0 0 #fff}.section5 .neumorphism-card .card{background:0 0}.section5 .neumorphism-card:hover{box-shadow:0 0 #d1d9e6,0 0 #fff,inset 18px 18px 30px #d1d9e6,inset 0 0 30px #fff}.section5 .class-content{grid-row-gap:57px;grid-column-gap:37px}.section5 .empty-result{color:#999;letter-spacing:.1em;padding:60px 0;font-size:30px}.section5-chevron{filter:invert()}@media only screen and (min-device-width:1025px) and (max-device-width:1280px){.section5 .container{padding:30px}}@media only screen and (min-device-width:768px) and (max-device-width:1024px){.section5 .container{width:960px;margin:0 auto;padding:20px}}@media screen and (max-width:767px){.section5 .container{width:100vw;margin:0 auto;padding:60px 20px}}