.diy_button0{padding:.7rem 2rem;background:#367ed4;color:#fff;border-radius:7px;display:inline-flex}.diy_button0:hover{background:#222;color:#fff}.diy_button1{padding:.7rem calc(1rem + 1vw);background:#367ed4;color:#fff;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;z-index:1;box-sizing:border-box}.diy_button1 i{display:inline-flex;width:1rem;height:1rem;margin:0 0 0 1rem;background:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3Cpath d='M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z' fill='%23ffffff'/%3E%3C/svg%3E%0A") no-repeat center;background-size:contain}.diy_button1::after{position:absolute;content:"";top:0;left:0;width:0%;height:100%;z-index:-1;background:#222;transition-property:all;transition-duration:0.4s;transition-timing-function:"ease";transition-delay:"0s"}.diy_button1:hover::after{width:100%}main,footer{background:#fff}.D0{padding:calc(5rem + 5vw) 0 calc(3rem + 3vw) 0;background-color:#fff;margin:0 auto}.D0 .header{text-align:center;margin-bottom:60px}.D0 .header .title{font-size:40px;font-weight:800;color:#000;text-transform:uppercase;margin:0 0 24px 0}.D0 .header .desc{font-size:16px;line-height:1.8;color:#333;margin:0;max-width:1200px;margin-left:auto;margin-right:auto}.D0 .classlist{list-style-type:none;display:flex;justify-content:center;gap:1.2rem}.D0 .classlist li a{display:inline-flex;padding:.8rem 2rem;border:1px solid #ddd;border-radius:5rem;background:#eee;color:#333}.D0 .classlist li a:hover{background:#367ed4;border-color:#367ed4;color:#fff}.D0 .classlist li.active a{background:#367ed4;border-color:#367ed4;color:#fff}.D0 .video-grid{margin:calc(2rem + 2vw) 0 0 0;display:grid;gap:2rem;grid-template-columns:1fr 1fr 1fr 1fr}.D0 .video-grid .item{display:flex;flex-direction:column;gap:1rem}.D0 .video-grid .item:hover .pic::before{opacity:1;transform:scale(1)}.D0 .video-grid .item:hover .pic::after{opacity:1}.D0 .video-grid .item .pic{border-radius:6px;overflow:hidden;position:relative}.D0 .video-grid .item .pic img{width:100%;height:calc(6vw + 6rem);-o-object-fit:cover;object-fit:cover}.D0 .video-grid .item .pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1;opacity:0;transition-property:all;transition-duration:0.6s;transition-timing-function:"ease";transition-delay:"0s"}.D0 .video-grid .item .pic::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23000000'%3E%3Cpath d='M25,2C12.317,2,2,12.317,2,25s10.317,23,23,23s23-10.317,23-23S37.683,2,25,2z M35.555,25.832l-15,10 C20.388,35.943,20.194,36,20,36c-0.162,0-0.324-0.039-0.472-0.118C19.203,35.708,19,35.369,19,35V15 c0-0.369,0.203-0.708,0.528-0.882c0.324-0.175,0.72-0.154,1.026,0.05l15,10C35.833,24.354,36,24.666,36,25 S35.833,25.646,35.555,25.832z' fill='%23ffffff'/%3E%3C/svg%3E%0A") no-repeat center;background-size:calc(2rem + 2vw) auto;opacity:.3;transform:scale(0);transition-property:all;transition-duration:0.6s;transition-timing-function:"ease";transition-delay:"0s"}.D0 .video-grid .item .title{font-size:1rem;line-height:1.4;font-weight:bold;color:#333}.D0 .no-video{text-align:center;font-size:1.1rem;color:#999;margin:calc(2rem + 2vw) 0 0 0}.D0 .pagination .page-numbers{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:1rem 0 0 0;padding:0;list-style:none}.D0 .pagination .page-numbers li{margin:0;padding:0}.D0 .pagination .page-numbers a.page-numbers,.D0 .pagination .page-numbers span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:40px;padding:0 20px;font-size:14px;font-weight:500;color:#333;background-color:#fff;border:1px solid #e0e0e0;border-radius:12rem;text-decoration:none;transition:all .2s ease}.D0 .pagination .page-numbers a.page-numbers:hover{color:#fff;background-color:#367ed4;border-color:#367ed4;transform:translateY(-1px)}.D0 .pagination .page-numbers span.page-numbers.current{color:#fff;background-color:#367ed4;border-color:#367ed4;font-weight:600;cursor:default}.D0 .pagination .page-numbers .prev,.D0 .pagination .page-numbers .next{padding:0 16px;font-weight:600}.D0 .pagination-info{font-size:13px;line-height:1.5;color:#999;margin:2rem 0 0 0;text-align:center}@media screen and (max-width: 1200px){.D0{padding:calc(3rem + 3vw) 24px calc(2.5rem + 2.5vw) 24px}.D0 .header{margin-bottom:40px}.D0 .header .title{font-size:34px;margin-bottom:20px}.D0 .header .desc{font-size:15px}.D0 .classlist{gap:1rem}.D0 .classlist li a{padding:.7rem 1.6rem;font-size:.95rem}.D0 .video-grid{gap:1.5rem;grid-template-columns:repeat(3, 1fr)}.D0 .video-grid .item{gap:.8rem}.D0 .video-grid .item .pic img{height:calc(5vw + 5rem)}.D0 .video-grid .item .title{font-size:.95rem}.D0 .pagination .page-numbers{gap:6px}.D0 .pagination .page-numbers a.page-numbers,.D0 .pagination .page-numbers span.page-numbers{height:36px;padding:0 16px;font-size:13px}.D0 .pagination .page-numbers .prev,.D0 .pagination .page-numbers .next{padding:0 14px}.D0 .pagination-info{font-size:12px;margin-top:1.5rem}}@media screen and (max-width: 992px){.D0{padding:calc(2.5rem + 2.5vw) 20px calc(2rem + 2vw) 20px}.D0 .header{margin-bottom:32px}.D0 .header .title{font-size:28px;margin-bottom:16px}.D0 .header .desc{font-size:14px;line-height:1.7}.D0 .classlist{flex-wrap:wrap;gap:.8rem}.D0 .classlist li a{padding:.6rem 1.4rem;font-size:.9rem}.D0 .video-grid{gap:1.2rem;grid-template-columns:repeat(3, 1fr)}.D0 .video-grid .item{gap:.7rem}.D0 .video-grid .item .pic img{height:calc(6vw + 4rem)}.D0 .video-grid .item .title{font-size:.9rem}.D0 .no-video{font-size:1rem}.D0 .pagination .page-numbers{gap:5px}.D0 .pagination .page-numbers a.page-numbers,.D0 .pagination .page-numbers span.page-numbers{height:34px;padding:0 14px;font-size:12px}.D0 .pagination .page-numbers .prev,.D0 .pagination .page-numbers .next{padding:0 12px}.D0 .pagination-info{font-size:12px;margin-top:1.2rem}}@media screen and (max-width: 768px){.D0{padding:calc(2rem + 2vw) 16px calc(1.5rem + 1.5vw) 16px}.D0 .header{margin-bottom:24px}.D0 .header .title{font-size:22px;margin-bottom:12px}.D0 .header .desc{font-size:13px;line-height:1.6}.D0 .classlist{gap:.6rem}.D0 .classlist li a{padding:.5rem 1.2rem;font-size:.85rem}.D0 .video-grid{gap:1rem;grid-template-columns:repeat(2, 1fr);margin-top:calc(1.5rem + 1.5vw)}.D0 .video-grid .item{gap:.6rem}.D0 .video-grid .item .pic img{height:calc(7vw + 5rem)}.D0 .video-grid .item .pic::before{background-size:calc(1.5rem + 1.5vw) auto}.D0 .video-grid .item .title{font-size:.85rem}.D0 .no-video{font-size:.95rem}.D0 .pagination .page-numbers{gap:4px;margin-top:1.5rem}.D0 .pagination .page-numbers a.page-numbers,.D0 .pagination .page-numbers span.page-numbers{height:32px;padding:0 12px;font-size:11px}.D0 .pagination .page-numbers .prev,.D0 .pagination .page-numbers .next{padding:0 10px}.D0 .pagination-info{font-size:11px;margin-top:1rem}}@media screen and (max-width: 576px){.D0{padding:calc(1.5rem + 1.5vw) 12px calc(1rem + 1vw) 12px}.D0 .header{margin-bottom:20px}.D0 .header .title{font-size:18px;margin-bottom:10px}.D0 .header .desc{font-size:12px;line-height:1.6}.D0 .classlist{gap:.5rem}.D0 .classlist li a{padding:.4rem 1rem;font-size:.8rem}.D0 .video-grid{gap:.8rem;grid-template-columns:1fr;margin-top:calc(1rem + 1vw)}.D0 .video-grid .item{gap:.5rem}.D0 .video-grid .item .pic img{height:calc(8vw + 8rem)}.D0 .video-grid .item .pic::before{background-size:calc(1.2rem + 1vw) auto}.D0 .video-grid .item .title{font-size:.8rem}.D0 .no-video{font-size:.9rem}.D0 .pagination .page-numbers{gap:4px;margin-top:1.2rem}.D0 .pagination .page-numbers a.page-numbers,.D0 .pagination .page-numbers span.page-numbers{height:28px;padding:0 10px;font-size:10px;min-width:12px}.D0 .pagination .page-numbers .prev,.D0 .pagination .page-numbers .next{padding:0 8px}.D0 .pagination-info{font-size:10px;margin-top:.8rem}}