.home-main>.tutorials{justify-content:center;padding:60px 0 100px;display:flex;position:relative}.home-main>.tutorials:before{background:var(--home-tutorials-bg);height:100%;top:0}.home-main>.tutorials:after,.home-main>.tutorials:before{content:"";z-index:10;width:100%;position:absolute;left:0}.home-main>.tutorials:after{background:var(--home-tutorials-svg);background-position:bottom;background-repeat:no-repeat;background-size:100%;height:120px;bottom:-1px}.home-main>.tutorials>.container{z-index:100;width:90%;position:relative}.home-main>.tutorials>.container>.tutorials-header{justify-items:center;display:grid}.home-main>.tutorials>.container>.tutorials-header>h2{text-align:center;color:#fff;background:var(--home-tutorials-header-bg);border-radius:40px;width:200px;height:40px;font-size:20px;line-height:40px}.home-main>.tutorials>.container>.tutorials-header>h2>i:first-of-type{margin-right:10px}.home-main>.tutorials>.container>.tutorials-header>h2>i:nth-of-type(2){margin-left:10px}.home-main>.tutorials>.container>.tutorials-header>p{text-align:center;color:var(--text-white-silver);margin-top:20px;font-size:14px;line-height:22px}.home-main>.tutorials>.container>.tutorials-content{gap:20px;margin-top:50px}.home-main>.tutorials>.container>.tutorials-content>.column{border:1px solid var(--home-tutorials-column-border);background-color:var(--home-tutorials-column-bg);border-radius:16px;padding-top:50px;position:relative}.home-main>.tutorials>.container>.tutorials-content>.column.hot-column{order:-1}.home-main>.tutorials>.container>.tutorials-content>.column>.hot-badge{z-index:10;height:28px;color:var(--home-tutorials-column-hot-text);background-color:var(--bg-white-black2);box-shadow:inset 0 0 0 1px var(--home-tutorials-column-hot-border);border-radius:32px;align-items:center;gap:2px;padding:0 8px;font-size:12px;line-height:28px;display:flex;position:absolute;top:10px;right:10px}.home-main>.tutorials>.container>.tutorials-content>.column>.hot-badge>i{font-size:16px;font-weight:400}.home-main>.tutorials>.container>.tutorials-content>.column>.column-header{text-align:center;width:130px;height:36px;color:var(--text-green-white);background-color:var(--home-tutorials-column-header-bg);border-right:1px solid var(--home-tutorials-border);border-bottom:1px solid var(--home-tutorials-border);border-top-left-radius:16px;border-bottom-right-radius:16px;font-size:16px;line-height:36px;position:absolute;top:0;left:0}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{grid-template-rows:90px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-auto-rows:90px;row-gap:10px;padding:12px;display:grid}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure{text-align:center;width:100%;height:100%;color:var(--text-green-silver);transition:all .2s linear}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure:hover{transform:scale(1.1)}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>img{width:45px;height:45px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>figcaption{margin-top:3px;font-size:14px;display:block}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div{display:inline-block;position:relative}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div:before{content:"精品";z-index:10;text-align:center;transform-origin:100% 0;color:#4e2d03;background:linear-gradient(45deg,#ffc552,#ffdd9a);border-top-right-radius:3px;border-bottom-left-radius:8px;width:30px;height:18px;font-family:PingFang SC,helvetica,arial,verdana,tahoma,sans-serif;font-size:12px;line-height:18px;position:absolute;top:0;right:0;transform:scale(.8)}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div>img{width:45px;opacity:var(--img-opacity);border-radius:3px}@media screen and (width>=576px){.home-main>.tutorials{padding:80px 0 180px}.home-main>.tutorials>.container>.tutorials-header>h2{position:relative}.home-main>.tutorials>.container>.tutorials-header>h2:before{content:"";background-image:var(--home-tutorials-leftline-bg);width:100px;height:2px;position:absolute;top:20px;left:-110px}.home-main>.tutorials>.container>.tutorials-header>h2:after{content:"";background-image:var(--home-tutorials-rightline-bg);width:100px;height:2px;position:absolute;top:20px;right:-110px}.home-main>.tutorials>.container>.tutorials-content{margin-top:60px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{grid-template-rows:90px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-auto-rows:90px;row-gap:8px;display:grid}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>img{width:50px;height:50px}}@media screen and (width>=768px){.home-main>.tutorials>.container>.tutorials-content>.column.hot-column{order:0}}@media screen and (width>=1200px){.home-main>.tutorials>.container{width:75%}}@media screen and (width>=1400px){.home-main>.tutorials{padding-bottom:200px}}.home-main>.tools{background-color:var(--home-tools-bg);justify-content:center;padding:40px 0;display:flex}.home-main>.tools>.container{width:75%}.home-main>.tools>.container>.left{display:none}.home-main>.tools>.container>.right>.tools-header{text-align:center}.home-main>.tools>.container>.right>.tools-header>h2{-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;font-size:22px;font-weight:700;display:inline-block;position:relative}.home-main>.tools>.container>.right>.tools-header>h2:after,.home-main>.tools>.container>.right>.tools-header>h2:before{content:"";border-radius:8px;width:12px;height:12px;position:absolute;top:12px}.home-main>.tools>.container>.right>.tools-header>h2:before{border:2px solid #1ca5ed;left:-25px}.home-main>.tools>.container>.right>.tools-header>h2:after{border:2px solid #12d2af;right:-25px}.home-main>.tools>.container>.right>.tools-header>p{color:#24cab7;margin-top:15px;font-size:14px;line-height:22px}.home-main>.tools>.container>.right>.tools-list{flex-direction:column;align-items:center;row-gap:20px;margin-top:40px;display:flex}.home-main>.tools>.container>.right>.tools-list.is-animating{overflow:hidden}.home-main>.tools>.container>.right>.tools-list>li>a{width:220px;height:55px;color:var(--home-tools-item-text);background-color:var(--home-tools-item-bg);border:1px solid var(--home-tools-item-border);border-radius:5px;align-items:center;padding-left:20px;transition:all .2s linear;display:flex;position:relative;box-shadow:0 1px 6px #00000026}.home-main>.tools>.container>.right>.tools-list>li>a:hover{transform:scale(1.08)}.home-main>.tools>.container>.right>.tools-list>li>a>.compiler-icon{width:36px;height:36px;opacity:var(--img-opacity);background:linear-gradient(90deg,#1ca5ed,#12d2af 50%,#12d2af);border-radius:50%;flex-shrink:0;display:inline-block}.home-main>.tools>.container>.right>.tools-list>li>a>span{margin-left:10px}.home-main>.tools>.container>.right>.tools-list>li>a>span.small{font-size:14px}.home-main>.tools>.container>.right>.tools-list>li>a.hot{color:var(--home-tools-hot-text);background-color:var(--home-tools-hot-bg);border:1px solid var(--home-tools-hot-border);box-shadow:var(--home-tools-hot-boxshadow)}.home-main>.tools>.container>.right>.tools-action{justify-content:center;margin-top:40px;display:flex}.home-main>.tools>.container>.right>.tools-action>.toggle-btn{color:#24cab7;cursor:pointer;backface-visibility:hidden;background-color:#0000;border:0;border-radius:19px;align-items:center;gap:6px;height:38px;padding:0 24px;font-size:14px;line-height:38px;transition:all .2s linear;display:flex;transform:translateZ(0);box-shadow:inset 0 0 0 1px #24cab7}.home-main>.tools>.container>.right>.tools-action>.toggle-btn:hover{color:#fff;background-color:#24cab7;box-shadow:inset 0 0 0 1px #24cab7}.home-main>.tools>.container>.right>.tools-action>.toggle-btn>.arrow-icon{flex-shrink:0;transition:transform .2s linear;position:relative;top:1px}.home-main>.tools>.container>.right>.tools-action>.toggle-btn>.arrow-icon.expanded{transform:rotate(180deg)}@media screen and (width>=576px){.home-main>.tools{padding:50px 0}.home-main>.tools>.container>.right>.tools-header>h2{font-size:24px}.home-main>.tools>.container>.right>.tools-header>p{margin-top:20px}}@media screen and (width>=768px){.home-main>.tools>.container>.right>.tools-list{grid-template-rows:60px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:60px;gap:20px 10px;display:grid}.home-main>.tools>.container>.right>.tools-list>li{justify-content:center;display:flex}}@media screen and (width>=820px){.home-main>.tools>.container{justify-content:space-between;display:flex}.home-main>.tools>.container>.left{padding-top:100px;display:block}.home-main>.tools>.container>.left>img{width:360px;height:auto}.home-main>.tools>.container>.right{width:calc(100% - 420px)}.home-main>.tools>.container>.right>.tools-list{justify-content:center;row-gap:25px;display:flex}}@media screen and (width>=1200px){.home-main>.tools>.container>.left>img{width:450px;height:318px}.home-main>.tools>.container>.right{width:calc(100% - 520px)}.home-main>.tools>.container>.right>.tools-list{grid-template-rows:60px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-auto-rows:60px;gap:30px;display:grid}}@media screen and (width>=1400px){.home-main>.tools{padding:100px 0}}.home-main>.features{background:var(--home-features-bg);justify-content:center;padding:80px 0;display:flex;position:relative}.home-main>.features:before{content:"";background-image:var(--home-features-svg);background-position:top;background-repeat:no-repeat;background-size:100%;width:100%;height:120px;position:absolute;top:0;left:0}.home-main>.features>.container{justify-content:center;width:75%;display:grid}.home-main>.features>.container>.features-header{text-align:center;background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:22px;font-weight:700;display:inline-block}.home-main>.features>.container>ul{margin-top:50px}.home-main>.features>.container>ul>li{-moz-column-gap:15px;flex:1;column-gap:15px;display:flex}.home-main>.features>.container>ul>li>.feature-icon>i{background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:50px}.home-main>.features>.container>ul>li>.feature-detail>h3{color:#19b694;font-size:20px}.home-main>.features>.container>ul>li>.feature-detail>p{margin-top:15px;line-height:30px}.home-main>.features>.container>ul>li>.feature-detail>p>a{color:var(--home-features-a-text);background-image:var(--home-features-a-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .25s linear}.home-main>.features>.container>ul>li>.feature-detail>p>a:hover{background-position:0 100%;background-size:100% 1px}.home-main>.features>.container>ul>li+li{margin-top:25px}@media screen and (width>=576px){.home-main>.features{padding:100px 0}.home-main>.features>.container>.features-header{font-size:24px}.home-main>.features>.container>ul{margin-top:40px}.home-main>.features>.container>ul>li>.feature-icon>i{font-size:50px}.home-main>.features>.container>ul>li>.feature-detail>p{margin-top:15px}}@media screen and (width>=768px){.home-main>.features{padding:200px 0}.home-main>.features>.container>ul{gap:50px;margin-top:50px;display:flex}.home-main>.features>.container>ul>li+li{margin-top:0}}