.main{background-color:#F4F4F4}.filter{width:1240px;margin:0 auto;margin-top:20px;height:33px;border-bottom:1px solid #b4b8bc;color:#63c987}.filter div{width:30px;height:100%;line-height:40px;cursor:pointer;position:relative}.filter div::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#63c987}.top{width:1240px;margin:0 auto;margin-top:20px;display:flex}.top .back{margin:15px 0 0 0px;display:inline-block;width:71px;height:27px;line-height:27px;text-align:center;color:#373737;border:1px solid #373737;border-radius:6px;letter-spacing:4px;cursor:pointer;transition:.3s all ease-in-out}.top .back:hover{background:#373737;color:#fff}.top .breadcrumbs{margin:15px 0 0 17px;height:27px;line-height:27px;color:#666;font-size:14px;font-family:simsun}.top .breadcrumbs span{margin:0 10px}.top .breadcrumbs a{color:#666;text-decoration:none}.top .breadcrumbs a:hover{color:#63c987}.courses{width:1240px;margin:60px auto;padding:20px 0;border-radius:6px;background:#fff;box-shadow:0 0 13px 0 rgba(0,0,0,0.2)}.courses .suject{position:relative;margin-bottom:20px;height:80px;text-align:center;line-height:80px;color:#373737}.courses .suject h3{display:inline-block;font-size:22px}.courses .suject span{width:70px;position:absolute;right:12px;font-size:16px;cursor:pointer}.courses .suject span:hover{color:#63c987}.courses .suject span:hover i{display:inline-block;transform:translateX(4px)}.courses .suject span i{font-size:14px;transition:transform .1s ease-out}.courses .cards{display:grid;grid-template-columns:repeat(4, 1fr);grid-gap:40px 0;justify-items:center;background-color:#fff}.courses .cards .fof{display:table-cell;vertical-align:middle}.courses .cards .fof.none{display:none}.courses .cards .fof h1{font-size:16px;display:inline-block;padding-right:12px;letter-spacing:5px;font-family:monospace;color:#b4b8bc;animation:type .5s alternate infinite}@keyframes type{from{box-shadow:inset -3px 0 0 #b4b8bc}to{box-shadow:inset -3px 0 0 transparent}}.courses .cards .card *{transition:.3s ease all}.courses .cards .card{width:260px;background-color:#fff;border-radius:6px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.12);cursor:pointer;position:relative}.courses .cards .card.multiple1{box-shadow:0 .0725em .2875em 0 rgba(0,0,0,0.1),0 .7em 0 -0.45em #f2f2f2,0 .5em .2875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #e5e5e5,0 1em .2875em -0.5em rgba(0,0,0,0.1)}.courses .cards .card.multiple2{box-shadow:0 .0625em .1875em 0 rgba(0,0,0,0.1),0 .5em 0 -0.25em #f2f2f2,0 .5em .1875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #e5e5e5,0 1em .1875em -0.5em rgba(0,0,0,0.1)}.courses .cards .card:hover .image,.courses .cards .card:focus-within .image{margin-top:-50px}.courses .cards .card .image{height:200px}.courses .cards .card .image img{display:block;width:100%;height:inherit;object-fit:cover}.courses .cards .card .content{padding:10px 19px 35px 19px}.courses .cards .card .content h4{margin:0 0 5px;line-height:18px;font-size:18px}.courses .cards .card .content .desc{line-height:1.4rem}.courses .cards .card .content .desc .text{font-size:13px;color:#999}.courses .cards .card .content .desc .tags{display:flex;flex-wrap:wrap;max-height:90px;overflow:hidden}.courses .cards .card .content .desc .tags .tag{margin:8px 3px 0 3px;padding:1px 5px;height:20px;line-height:20px;background-color:#ffffff;border-radius:10px;border:solid 1px #d29e4c;color:#d29e4c}.courses .cards .card .content .price{position:absolute;right:15px;bottom:0;margin-top:10px;text-align:right;font-size:18px;font-weight:600;line-height:36px;color:#ff5b5b}.courses .cards .card4 *{transition:.3s ease all}.courses .cards .card4{cursor:pointer;width:274px;height:345px;padding:0;box-shadow:0 2px 4px 0 rgba(0,0,0,0.1);border-radius:8px;box-sizing:border-box;overflow:hidden}.courses .cards .card4.multiple{box-shadow:0 .0625em .1875em 0 rgba(0,0,0,0.1),0 .5em 0 -0.25em #f2f2f2,0 .5em .1875em -0.25em rgba(0,0,0,0.1),0 1em 0 -0.5em #e5e5e5,0 1em .1875em -0.5em rgba(0,0,0,0.1)}.courses .cards .card4 img{margin:0;width:274px;height:200px;object-fit:cover;display:block}.courses .cards .card4 h3{position:relative;margin:0;padding:12px 12px 48px;line-height:32px;font-weight:500;font-size:20px}.courses .cards .card4 h3 .tags{display:flex;flex-wrap:wrap;overflow:hidden}.courses .cards .card4 h3 .price{position:absolute;right:15px;bottom:5px;margin-top:10px;text-align:right;font-size:18px;font-weight:600;line-height:36px;color:#ff5b5b}.courses .cards .card4 h3 .tags .tag{margin:8px 3px 0 3px;padding:1px 5px;height:20px;line-height:20px;background-color:#ffffff;border-radius:10px;border:solid 1px #d29e4c;color:#d29e4c;font-size:14px}.courses .cards .card4 .focus-content{display:block;padding:0px 12px}.courses .cards .card4 .focus-content .tags{display:flex;flex-wrap:wrap;overflow:hidden}.courses .cards .card4 .focus-content .tags .tag{margin:8px 3px 0 3px;padding:1px 5px;height:20px;line-height:20px;background-color:#ffffff;border-radius:10px;border:solid 1px #d29e4c;color:#d29e4c;font-size:14px}.courses .cards .card4 p{margin:0;line-height:1.5}.courses .cards .card4:hover img,.courses .cards .card4:focus-within img{margin-top:-80px}.courses .cards .card4:hover h3,.courses .cards .card4:focus-within h3{padding:8px 12px 0}.courses .cards .card4:hover .price,.courses .cards .card4:focus-within .price{transform:translateY(-50px)}@keyframes slideDown{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateY(0%);transform:translateY(0%)}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateY(80%);transform:translateY(80%)}}