.homepage-new *{box-sizing: border-box;}

.homepage-new *{margin: 0px;}

.homepage-new a{text-decoration: none; color: inherit; transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;}
.homepage-new ul{padding-left: 0px; list-style: none;}
.homepage-new img{max-width: 100%; vertical-align: middle;}
.homepage-new .flexRow{display: flex; flex-direction: row;}

.homepage-new .flexcenter{align-items: center; justify-content: center;}
.homepage-new .overflowclass{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}

.homepage-new .container{width: 1366px; margin: 0px auto;}




























.homepage-new .hero-bg-wrap{position: relative; background: url(../image/home-20261027/hero-bg.webp) center top / 100% 100% no-repeat;}
.homepage-new .hero{position: relative; padding: 60px 0px;}
.homepage-new .curriculum{padding-top: 0px; padding-bottom: 35px; background: transparent;}
.homepage-new .hero-inner{position: relative; text-align: center; z-index: 1;}
.homepage-new .hero-title{font-size: 68px; line-height: 78px; margin-bottom: 16px; color: rgb(26, 26, 26); font-family: FZLTCHK--GBK1, FZLTCHK--GBK1; align-items: center;}
.homepage-new .hero-title .highlight{font-size: 58px; letter-spacing: 10px; width: 360px; background: linear-gradient(270deg, rgb(35, 108, 238) 0%, rgb(60, 223, 120) 100%) text; -webkit-text-fill-color: transparent; color: transparent;}
.homepage-new .hero-subtitle{font-size: 18px; color: rgb(85, 85, 85); margin-bottom: 32px; letter-spacing: 2px; font-weight: 500;}
.homepage-new .hero-btns{display: flex; justify-content: center; gap: 40px;}
.homepage-new .btn-primary{width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(270deg, rgb(57, 196, 145) 0%, rgb(40, 168, 120) 100%); color: rgb(255, 255, 255); border-radius: var(--radius-lg); font-size: 18px; font-weight: 500; transition: 0.3s;}
.homepage-new .btn-primary:hover{background: linear-gradient(270deg, rgb(25, 137, 95) 0%, rgb(0, 191, 121) 100%); transition: 0.3s;}
@keyframes btn-outline-hue { 
  100% { filter: hue-rotate(360deg); }
}
.homepage-new .btn-outline{--border-width: 2px; --border-radius: 44px; position: relative; isolation: isolate; width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); color: rgb(8, 117, 76); border-radius: var(--border-radius); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 18px; font-weight: 500; transition: color 0.3s, box-shadow 0.3s;}
.homepage-new .btn-outline::after{--m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: var(--border-width); border-radius: var(--border-radius); background-image: linear-gradient(120deg, rgb(60, 224, 121), rgb(36, 169, 121)); mask-image: var(--m-i), var(--m-i); mask-origin: var(--m-o); mask-clip: var(--m-o); mask-composite: exclude; z-index: -1; pointer-events: none; filter: hue-rotate(0deg);}
.homepage-new .btn-outline:hover{color: rgb(8, 117, 76);}
.homepage-new .btn-outline:hover::after{background-image: conic-gradient(rgb(55, 201, 143), rgb(45, 175, 170), rgb(35, 102, 245), rgb(45, 175, 170), rgb(55, 201, 143)); animation: 2s linear 0s infinite normal none running btn-outline-hue;}
.homepage-new .section-header{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; line-height: 30px;}
.homepage-new .section-title{font-size: 24px; font-weight: 500; color: rgb(34, 34, 34);}
.homepage-new .section-more{font-size: 16px; color: rgb(40, 168, 120); display: flex; align-items: center;}
.homepage-new .section-more b{background: url(../image/home-20261027/icon4.png) 0% 0% / contain no-repeat; width: 10px; height: 10px; margin: 0px 0px 0px 3px; transition: 0.5s;}
.homepage-new .section-more:hover b{transform: translate(2px, -2px);}
.homepage-new .curriculum-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.homepage-new .curriculum-card{display: flex; flex-direction: column; background: rgb(255, 255, 255); border-radius: 8px; overflow: hidden; box-shadow: rgba(203, 203, 203, 0.42) 0px 0px 4px 0px; min-width: 0px; width:auto; height:auto;}
.homepage-new .card-cover{display: block; width: 100%; line-height: 0;}
.homepage-new .card-cover img{width: 100%; height: auto; aspect-ratio: 652 / 262; object-fit: cover; display: block;}
.homepage-new .card-body{display: flex; flex-direction: column; flex: 1 1 0%; padding: 14px 20px 20px; min-width: 0px;}
.homepage-new .card-title-row{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.homepage-new .card-title-row h3{flex: 1 1 0%; min-width: 0px; margin: 0px; font-size: 18px; font-weight: 500; color: rgb(51, 51, 51); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .card-badge{flex-shrink: 0; padding: 1px 10px; font-size: 14px; color: rgb(152, 162, 176); background: rgb(243, 245, 247); border-radius: 10px; line-height: 18px;}
.homepage-new .card-desc{margin: 6px 0px 16px; font-size: 14px; color: rgb(102, 102, 102); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .card-links{display: flex; flex-direction: column; margin: 0px 0px 10px; flex: 1 1 0%; gap: 2px;}
.homepage-new .card-links li{min-width: 0px;}
.homepage-new .card-links a{line-height: 18px; display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0px; padding: 8px 0px; font-size: 14px; color: rgb(119, 119, 119); border-radius: 4px; transition: background 0.2s, color 0.2s;}
.homepage-new .card-links a span{flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .card-links a b{flex-shrink: 0; width: 10px; height: 10px; background: url(../image/home-20261027/icon100.png) center center / contain no-repeat;}
.homepage-new .card-links li:hover a{background: rgb(241, 249, 243);}
.homepage-new .card-links li:hover a b{background: url(../image/home-20261027/icon99.png) center center / contain no-repeat;}
.homepage-new .card-cta{display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; margin-top: auto; border-radius: 18px; font-size: 14px; color: rgb(40, 168, 120); background: rgb(241, 249, 243); transition: background 0.2s, color 0.2s;}
.homepage-new .card-cta b{width: 10px; height: 10px; flex-shrink: 0; background: url(../image/home-20261027/icon4.png) center center / contain no-repeat; transition: transform 0.3s;}
.homepage-new .card-cta:hover b{transform: translate(2px, -2px);}
.homepage-new .card-cta:hover{color: rgb(255, 255, 255); background: linear-gradient(270deg, rgb(57, 196, 145) 0%, rgb(40, 168, 120) 100%);}
.homepage-new .card-cta:hover b{background-image: url(../image/home-20261027/icon90.png);}
.homepage-new .products{margin: 35px 0px 0px;}








.homepage-new .hot-tags{padding-top: 0px;}
.homepage-new .hot-tags-header{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; line-height: 30px;}
.homepage-new .tags-list{display: flex; flex-wrap: wrap; gap: 10px;}
.homepage-new .tag{display: inline-block; max-width: 161px; padding: 5px 15px 6px; background: rgb(255, 255, 255); border: 1px solid rgb(231, 231, 231); border-radius: 19px; font-size: 16px; color: rgb(51, 51, 51); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .tag:hover{background: rgb(255, 255, 255); border: 1px solid rgb(40, 168, 120); border-radius: 19px; color: rgb(40, 168, 120);}


.homepage-new .products-grid{display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;}


.homepage-new .product-card{position: relative; display: block; padding: 20px 17px 17px 18px; background: rgb(255, 255, 255); border: 1px solid transparent; border-radius: 8px; transition: box-shadow 0.25s, background 0.25s; box-shadow: rgba(203, 203, 203, 0.42) 0px 0px 4px 0px; width: 211px; height: auto;}
.homepage-new .product-card:hover{background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box padding-box, linear-gradient(126deg, rgb(60, 224, 121), rgb(36, 169, 121)) border-box border-box; border: 1px solid transparent; box-shadow: rgba(203, 203, 203, 0.42) 0px 0px 4px 0px;}
.homepage-new .product-tags{gap: 7px;}
.homepage-new .tagsa{padding: 1.5px 5px; font-size: 10px; color: rgb(255, 255, 255); border-radius: 10px; transition: 0.3s;}
.homepage-new .tag-blue{background: linear-gradient(270deg, rgb(90, 114, 250) 0%, rgb(68, 136, 246) 100%);}
.homepage-new .tag-purple{background: linear-gradient(270deg, rgb(164, 131, 255) 0%, rgb(144, 118, 245) 100%);}
.homepage-new .tag-green{background: linear-gradient(270deg, rgb(62, 196, 160) 0%, rgb(64, 197, 197) 100%);}
.homepage-new .tag-origin{background: linear-gradient(270deg, rgb(248, 154, 118) 0%, rgb(246, 111, 94) 100%);}
.homepage-new .tag-blue:hover{background: linear-gradient(270deg, rgb(68, 174, 246) 0%, rgb(73, 100, 255) 100%);}
.homepage-new .tag-purple:hover{background: linear-gradient(270deg, rgb(133, 103, 247) 0%, rgb(196, 131, 255) 100%);}
.homepage-new .tag-green:hover{background: linear-gradient(270deg, rgb(40, 206, 206) 0%, rgb(66, 221, 179) 100%);}
.homepage-new .tag-origin:hover{background: linear-gradient(270deg, rgb(255, 96, 76) 0%, rgb(255, 143, 101) 100%);}
.homepage-new .product-thumb{width: 171px; height: 171px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; margin: 11px 0px 0px;}
.homepage-new .product-thumb img{width: 100%; height: 100%; object-fit: cover; background: rgb(238, 238, 238); transition: transform 0.3s;}
.homepage-new .product-thumb:hover img{transform: scale(1.1);}
.homepage-new .product-name{font-size: 16px; color: rgb(0, 0, 0); margin: 10px 0px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .product-meta{font-size: 12px; color: rgb(153, 153, 153); margin-bottom: 8px;}
.homepage-new .product-rating{width: 100%; min-width: 0px; font-size: 12px; align-items: center; color: rgb(153, 153, 153); line-height: 12px;}
.homepage-new .product-rating b{flex-shrink: 0; display: inline-block; background: url(../image/home-20261027/icon10.png) 0% 0% / contain no-repeat; width: 10px; height: 10px; margin: 0px 2px 0px 0px;}
.homepage-new .product-rating span:nth-of-type(2){flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .product-rating span:nth-of-type(1){color: rgb(250, 173, 20); margin: 0px 3px 0px 0px;}
.homepage-new .feed-layout{display: flex; gap: 32px; margin: 40px auto 60px; position: relative;}
.homepage-new .feed-main{flex: 1 1 0%; min-width: 0px;}
.homepage-new .feed-sidebar{width: 280px; flex-shrink: 0; height: auto; align-self: flex-start; position: sticky; top: 105px; z-index: 10; box-shadow: rgba(203, 203, 203, 0.42) 0px 0px 4px 0px; border-radius: 8px;}
.homepage-new .feed-tabs{position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding-right: 117px; max-height: 36px; overflow: hidden;}

.homepage-new .feed-tabs .tab{padding: 0px 22px; height: 36px; border-radius: 22px; font-size: 14px; color: rgb(28, 28, 28); border: 1px solid rgb(229, 229, 229); display: flex; align-items: center; justify-content: center;}
.homepage-new .feed-tabs .tab:hover{color: rgb(40, 168, 120); border: 1px solid rgb(255, 255, 255); background: rgb(241, 249, 243);}
.homepage-new .feed-tabs .tab.active{background: linear-gradient(270deg, rgb(57, 196, 145) 0%, rgb(40, 168, 120) 100%); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none;}
.homepage-new .feed-tabs .tab.more{position: absolute; right: 0px; top: 0px; z-index: 2;}
.homepage-new .feed-tabs .tab.more b{display: inline-block; background: url(../image/home-20261027/icon11.png) 0% 0% / contain no-repeat; width: 9px; height: 5px; margin: 0px 0px 0px 4px; flex-shrink: 0;}
.homepage-new .feed-tabs .tab.more:hover b{background: url(../image/home-20261027/icon13.png) 0% 0% / contain no-repeat; transform: rotate(180deg);}



.idx .homepage-new .feed-tabs .tab{width: 107px; white-space: nowrap;}
.homepage-new .sidiv{margin: 10px 15px 20px;}
.homepage-new .article-list{display: flex; flex-direction: column; gap: 0px; margin: 6px 0px 0px;}


.homepage-new .article-item{display: flex; gap: 20px; padding: 20px 0px; border-bottom: 1px solid rgb(229, 229, 229); transition: background 0.2s;}
.homepage-new .article-item:hover{background: rgba(0, 192, 124, 0.02);}
.homepage-new .article-body{flex: 1 1 0%; min-width: 0px;}
.homepage-new .article-title{font-size: 18px; font-weight: 500; margin-bottom: 8px; line-height: 1.4; overflow: hidden;}
.homepage-new .article-title a{display: block; color: rgb(34, 34, 34); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .article-title a:hover{color: rgb(40, 168, 120);}


.homepage-new .article-summary{font-size: 14px; color: rgb(85, 85, 85); height: 48px; line-height: 24px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;}
.homepage-new .article-tags{display: flex; flex-wrap: wrap; gap: 10px;}
.homepage-new .article-tag{padding: 1px 10px; background: rgb(255, 255, 255); border-radius: 12px; font-size: 12px; color: rgb(40, 168, 120); border: 1px solid rgb(255, 255, 255);}
.homepage-new .article-tag:hover{background: rgb(255, 255, 255); color: rgb(20, 98, 69); border: 1px solid rgb(40, 168, 120);}

.idx .homepage-new .article-tag{background: rgb(246, 251, 245); color: rgb(20, 98, 69); padding: 2px 10px;}
.idx .homepage-new .article-tag:hover{border: 1px solid rgba(40, 168, 120, 0.4); background: rgb(255, 255, 255); color: rgb(20, 98, 69);}
.homepage-new .article-info{font-size: 12px; color: rgb(153, 153, 153); gap: 20px;}
.homepage-new .article-info div{display: flex; align-items: center;}
.homepage-new .article-thumb{width: 202px; height: 114px; flex-shrink: 0; border-radius: 5px; overflow: hidden;}
.homepage-new .article-thumb img{width: 100%; height: 100%; object-fit: cover; background: rgb(238, 238, 238);}
.homepage-new .article-thumb-small{width: 114px; height: 114px;}
.homepage-new .btn-more-info{display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; width: 100%; margin-top: 20px; border-radius: 24px; font-size: 16px; color: rgb(102, 102, 102); background: rgb(243, 243, 243); transition: 0.2s;}
.homepage-new .btn-more-info:hover{color: rgb(40, 168, 120); background: rgb(241, 249, 243);}
.homepage-new .icon-more{background: url(../image/home-20261027/icon17.png) 0% 0% / contain no-repeat; width: 16px; height: 16px;}
.homepage-new .btn-more-info:hover .icon-more{background: url(../image/home-20261027/icon18.png) 0% 0% / contain no-repeat;}
.homepage-new .art-left-down{justify-content: space-between;}
.homepage-new .info-name b{background: url(../image/home-20261027/icon14.png) 0% 0% / contain no-repeat; transform: none; margin: 0px 3px 0px 0px; width: 12px; height: 12px;}
.homepage-new .info-time b{background: url(../image/home-20261027/icon15.png) 0% 0% / contain no-repeat; transform: none; margin: 0px 3px 0px 0px; width: 12px; height: 12px;}
.homepage-new .info-watch b{background: url(../image/home-20261027/icon16.png) 0% 0% / contain no-repeat; transform: none; margin: 0px 3px 0px 0px; width: 12px; height: 12px;}
.homepage-new .sidebar-title{font-size: 21px; font-weight: 500; color: rgb(51, 51, 51);}
.homepage-new .sidebar-list li{border-bottom: 1px solid rgb(246, 246, 246); padding: 10px 0px 8px;}
.homepage-new .sidebar-list a{display: block; font-size: 16px; line-height: 1.5; color: rgb(68, 68, 68); transition: color 0.2s;}
.homepage-new .sidebar-list a:hover{color: rgb(40, 168, 120);}
.homepage-new .sidebar-icon{display: inline-block; width: 18px; height: 18px; object-fit: cover; margin: 0px 4px 0px 0px; vertical-align: -2px;}
.homepage-new .sidebar-text{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word;}
.homepage-new .sidebar-text > span{display: inline;}

.homepage-new .sidebar-more{text-align: center; margin-top: 16px; padding: 7px 0px; font-size: 14px; color: rgb(102, 102, 102); border-radius: 18px; background: rgb(243, 243, 243);}
.homepage-new .sidebar-more:hover{color: rgb(40, 168, 120); background: rgb(241, 249, 243);}
.homepage-new .sidebar-more b{background: url(../image/home-20261027/icon25.png) 0% 0% / contain no-repeat; margin: 0px 0px 0px 4px; width: 10px; height: 10px; transition: 0.3s;}
.homepage-new .sidebar-more:hover b{background: url(../image/home-20261027/icon26.png) 0% 0% / contain no-repeat; margin: 0px 0px 0px 4px; width: 10px; height: 10px; transform: translate(2px, -2px);}


.homepage-new .sidebar-down{font-size: 12px; color: rgb(153, 153, 153); justify-content: space-between; margin: 4px 0px 0px;}










































































































.homepage-new .info-name,.homepage-new .info-time,.homepage-new .info-watch{align-items: center;}


























































































































































































































































































.homepage-new .curriculumcon{width: 1366px; height: auto; background: rgb(255, 255, 255); border-radius: 8px; border: 1px solid rgb(251, 251, 251);}
.homepage-new .curriculumcons{margin: 35px 0px 0px;}
.homepage-new .hero-bg-wrap{background: url(../image/home-20261027/hero-bg.webp) center top / 100% 100% no-repeat; padding: 0px 0px 60px;}
.homepage-new .hero.hero-split{padding: 60px 0px 0px;}
.homepage-new .hero-split-inner{display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; text-align: left;}
.homepage-new .hero-copy{flex: 1 1 0%; min-width: 0px; max-width: 560px;}
.homepage-new .hero-split .hero-title{font-size: 68px; line-height: 90px; font-weight: 700; color: rgb(0, 0, 0); margin: 20px 0px 30px; align-items: flex-start; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0px;}
.homepage-new .hero-split .hero-title .highlight{display: inline; width: auto; font-size: inherit; letter-spacing: 0px; font-weight: 700; background: linear-gradient(90deg, rgb(60, 223, 120) 0%, rgb(35, 108, 238) 100%) text; -webkit-text-fill-color: transparent; color: transparent;}
.homepage-new .hero-split .hero-subtitle{font-size: 24px; line-height: 1.8; color: rgb(102, 120, 142); margin: 0px 0px 46px; letter-spacing: 0px; font-weight: 400;}
.homepage-new .hero-split .hero-btns{justify-content: flex-start; gap: 20px;}
.homepage-new .hero-split .btn-primary{width: auto; min-width: 278px; height: 52px; padding: 0px 24px; gap: 6px; border-radius: 26px; background: linear-gradient(270deg, rgb(57, 196, 145) 0%, rgb(40, 168, 120) 100%); font-size: 18px; font-weight: 500;}
.homepage-new .hero-split .btn-primary:hover{background: linear-gradient(270deg, rgb(25, 137, 95) 0%, rgb(0, 191, 121) 100%);}
.homepage-new .hero-split .btn-primary:hover .icon-arrow{transform: translate(2px, -2px);}
.homepage-new .hero-split .btn-outline:hover .icon-run{transform: translate(2px, 0px);}
.homepage-new .hero-split .btn-primary .icon-arrow{width: 12px; height: 12px; background: url(../image/home-20261027/icon90.png) 0% 0% / contain no-repeat; flex-shrink: 0; transition: 0.3s;}
.homepage-new .hero-split .btn-outline{width: auto; min-width: 200px; height: 52px; padding: 0px 22px; gap: 6px; border-radius: 24px; font-size: 18px; color: rgb(8, 117, 76);}
.homepage-new .hero-split .btn-outline .icon-run{width: 7px; height: 10px; background: url(../image/home-20261027/icon91.png) 0% 0% / contain no-repeat; flex-shrink: 0; transition: 0.3s;}
.homepage-new .hero-playground{flex-shrink: 0; width: 759px;}
.homepage-new .pg-window{background: rgb(18, 29, 48); border-radius: 8px; box-shadow: rgba(27, 35, 50, 0.28) 0px 16px 48px; overflow: hidden; height: 455px; border: 1px solid rgba(255, 255, 255, 0.06);}
.homepage-new .pg-toolbar{justify-content: space-between; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0px 14px; background: rgb(34, 43, 60); border-bottom: 1px solid rgba(255, 255, 255, 0.06);}
.homepage-new .pg-dots{display: flex; align-items: center; gap: 6px; flex-shrink: 0;}
.homepage-new .pg-dots span{width: 10px; height: 10px; border-radius: 50%;}
.homepage-new .pg-dots span:nth-child(1){background: rgb(255, 95, 87);}
.homepage-new .pg-dots span:nth-child(2){background: rgb(254, 188, 46);}
.homepage-new .pg-dots span:nth-child(3){background: rgb(40, 200, 64);}
.homepage-new .pg-title{font-size: 18px; color: rgb(155, 169, 188); margin: 0px 0px 0px 30px; flex: 1 1 0%; min-width: 0px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.homepage-new .pg-run{display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 28px; padding: 0px 10px; border-radius: 4px; background: rgb(37, 53, 75); color: rgb(155, 169, 188); font-size: 12px; transition: background 0.2s, color 0.2s;}
.homepage-new .pg-run b{width: 10px; height: 12px; background: url(../image/home-20261027/icon92.png) 0% 0% / contain no-repeat; flex-shrink: 0; margin: 0px 2px 0px 0px;}
.homepage-new .pg-run:hover{background: rgba(40, 168, 120, 0.18); color: rgb(255, 255, 255);}
.homepage-new .pg-code-wrap{position: relative; height: 166px; padding: 0px 20px;}
.homepage-new .pg-code{height: 100%; padding: 18px 0px 28px; font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.7; color: rgb(230, 237, 243); overflow: auto; scrollbar-width: none;}
.homepage-new .pg-code::-webkit-scrollbar{width: 0px; height: 0px; display: none;}
.homepage-new .pg-code-wrap > .pg-scroll-mask{position: absolute; left: 20px; right: 20px; bottom: 0px; height: 22px; background: rgb(18, 29, 48); pointer-events: none; z-index: 1;}
.homepage-new .pg-scroll-x{position: absolute; left: 20px; right: 20px; bottom: 10px; height: 2px; z-index: 2;}
.homepage-new .pg-scroll-x i{position: absolute; left: 0px; top: 0px; width: 80px; height: 2px; background: rgb(34, 47, 68); border-radius: 1px; cursor: pointer;}
.homepage-new .pg-scroll-y{position: absolute; top: 18px; bottom: 28px; right: 8px; width: 2px; z-index: 2;}
.homepage-new .pg-scroll-y i{position: absolute; left: 0px; top: 0px; width: 2px; height: 60px; background: rgb(34, 47, 68); border-radius: 2px; cursor: pointer;}

.homepage-new .pg-line{display: flex; align-items: flex-start; gap: 14px; line-height: 32px; min-height: 22px; min-width: max-content;}
.homepage-new .pg-ln{flex-shrink: 0; width: 16px; text-align: right; color: rgb(83, 105, 129); user-select: none;}
.homepage-new .pg-line code{flex: 0 0 auto; font-family: inherit; font-size: inherit; white-space: pre; word-break: normal;}
.homepage-new .pg-code .kw{color: rgb(199, 146, 234);}
.homepage-new .pg-code .fn{color: rgb(130, 170, 255);}
.homepage-new .pg-code .str{color: rgb(195, 232, 141);}
.homepage-new .pg-output{display: flex; flex-direction: column; background: rgb(12, 23, 39); margin: 12px 16px 16px; height: 194px; overflow: hidden;}
.homepage-new .pg-output-bar{flex-shrink: 0; padding: 15px 20px 13px; border-bottom: 1px solid rgb(34, 47, 68); display: flex; align-items: center; gap: 8px; margin-bottom: 0px;}
.homepage-new .pg-output-label{margin-right: auto; font-size: 18px; color: rgb(155, 169, 188);}
.homepage-new .pg-ok,.homepage-new .pg-false{display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 0px; width: 81px; height: 28px; border-radius: 4px; padding: 0px 8px; font-size: 12px; box-sizing: border-box;}
.homepage-new .pg-ok{background: rgb(37, 75, 66); border: 1px solid rgb(52, 87, 64); color: rgb(40, 168, 120);}
.homepage-new .pg-ok b{width: 10px; height: 12px; background: url(../image/home-20261027/icon93.png) 0% 0% / contain no-repeat; flex-shrink: 0; margin: 0px 4px 0px 0px;}
.homepage-new .pg-false{border: 1px solid rgb(153, 0, 0); background: rgb(75, 37, 37); color: rgb(245, 34, 45);}
.homepage-new .pg-false b{width: 10px; height: 12px; background: url(../image/home-20261027/icon94.png) 0% 0% / contain no-repeat; flex-shrink: 0; margin: 0px 4px 0px 0px;}
.homepage-new .pg-result{flex: 1 1 0%; min-height: 0px; margin: 12px 16px 16px; font-size: 16px; color: rgb(159, 187, 179); line-height: 1.7; white-space: pre; overflow: auto; scrollbar-width: thin; scrollbar-color: rgb(34, 47, 68) transparent;}
.homepage-new .pg-result::-webkit-scrollbar{width: 2px; height: 2px;}
.homepage-new .pg-result::-webkit-scrollbar-track{background: transparent;}
.homepage-new .pg-result::-webkit-scrollbar-thumb{background: rgb(34, 47, 68); border-radius: 2px;}


@media (max-width: 1100px){.homepage-new .hero-split-inner{flex-direction: column; align-items: stretch;}
.homepage-new .hero-copy{max-width: none;}
.homepage-new .hero-playground{width: 100%; max-width: none;}
.homepage-new .hero-split .hero-title{font-size: 40px;}}
.homepage-new .product-card-detail-link{position:absolute;inset:0;z-index:1}.homepage-new .product-tags{position:relative;z-index:2}