@charset "UTF-8";.home-main>.tutorials{display:flex;justify-content:center;padding:60px 0 100px;position:relative}.home-main>.tutorials:before{background:var(--home-tutorials-bg);height:100%;top:0}.home-main>.tutorials:after,.home-main>.tutorials:before{content:"";left:0;position:absolute;width:100%;z-index:10}.home-main>.tutorials:after{background:var(--home-tutorials-svg);background-position:bottom;background-repeat:no-repeat;background-size:100%;bottom:-1px;height:120px}.home-main>.tutorials>.container{position:relative;width:90%;z-index:100}.home-main>.tutorials>.container>.tutorials-header{display:grid;justify-items:center}.home-main>.tutorials>.container>.tutorials-header>h2{background:var(--home-tutorials-header-bg);border-radius:40px;color:#fff;font-size:20px;height:40px;line-height:40px;text-align:center;width:200px}.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{color:var(--text-white-silver);font-size:14px;line-height:22px;margin-top:20px;text-align:center}.home-main>.tutorials>.container>.tutorials-content{gap:20px;margin-top:50px}.home-main>.tutorials>.container>.tutorials-content>.column{background-color:var(--home-tutorials-column-bg);border:1px solid var(--home-tutorials-column-border);border-radius:16px;padding-top:50px;position:relative}.home-main>.tutorials>.container>.tutorials-content>.column>.column-header{background-color:var(--home-tutorials-column-header-bg);border-bottom:1px solid var(--home-tutorials-border);border-bottom-right-radius:16px;border-right:1px solid var(--home-tutorials-border);border-top-left-radius:16px;color:var(--text-green-white);font-size:16px;height:36px;left:0;line-height:36px;position:absolute;text-align:center;top:0;width:130px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{display:grid;grid-auto-rows:90px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-template-rows:90px;padding:10px;row-gap:10px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure{color:var(--text-green-silver);height:100%;text-align:center;transition:all .2s linear;width:100%}.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{height:45px;width:45px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>figcaption{display:block;font-size:14px;margin-top:3px}.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{background:linear-gradient(45deg,#ffc552,#ffdd9a);border-bottom-left-radius:8px;border-top-right-radius:3px;color:#4e2d03;content:"精品";font-family:PingFang SC,helvetica,arial,verdana,tahoma,sans-serif;font-size:12px;height:18px;line-height:18px;position:absolute;right:0;text-align:center;top:0;transform:scale(.8);transform-origin:top right;width:30px;z-index:10}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div>img{border-radius:3px;opacity:var(--img-opacity);width:45px}@media screen and (min-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{background-image:var(--home-tutorials-leftline-bg);content:"";height:2px;left:-110px;position:absolute;top:20px;width:100px}.home-main>.tutorials>.container>.tutorials-header>h2:after{background-image:var(--home-tutorials-rightline-bg);content:"";height:2px;position:absolute;right:-110px;top:20px;width:100px}.home-main>.tutorials>.container>.tutorials-content{margin-top:60px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{display:grid;grid-auto-rows:90px;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-template-rows:90px;padding:10px;row-gap:5px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>img{height:50px;width:50px}}@media screen and (min-width:1200px){.home-main>.tutorials>.container{width:75%}}@media screen and (min-width:1400px){.home-main>.tutorials{padding-bottom:200px}}.home-main>.tools{background-color:var(--home-tools-bg);display:flex;justify-content:center;padding:40px 0}.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-background-clip:text;background-image:linear-gradient(90deg,#1ca5ed,#12d2af);display:inline-block;font-size:22px;font-weight:700;position:relative;-webkit-text-fill-color:transparent}.home-main>.tools>.container>.right>.tools-header>h2:after,.home-main>.tools>.container>.right>.tools-header>h2:before{border-radius:8px;content:"";height:12px;position:absolute;top:12px;width: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;font-size:14px;line-height:22px;margin-top:15px}.home-main>.tools>.container>.right>.tools-list{align-items:center;display:flex;flex-direction:column;margin-top:40px;row-gap:20px}.home-main>.tools>.container>.right>.tools-list>li>a{align-items:center;background-color:var(--home-tools-item-bg);border:1px solid var(--home-tools-item-border);border-radius:5px;box-shadow:0 1px 6px #00000026;color:var(--home-tools-item-text);display:flex;height:55px;padding-left:20px;position:relative;transition:all .2s linear;width:220px}.home-main>.tools>.container>.right>.tools-list>li>a:hover{transform:scale(1.08)}.home-main>.tools>.container>.right>.tools-list>li>a>img{opacity:var(--img-opacity)}.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{background-color:var(--home-tools-hot-bg);border:1px solid var(--home-tools-hot-border);box-shadow:var(--home-tools-hot-boxshadow);color:var(--home-tools-hot-text)}@media screen and (min-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 (min-width:768px){.home-main>.tools>.container>.right>.tools-list{display:grid;gap:20px 10px;grid-auto-rows:60px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-template-rows:60px}.home-main>.tools>.container>.right>.tools-list>li{display:flex;justify-content:center}}@media screen and (min-width:820px){.home-main>.tools>.container{display:flex;justify-content:space-between}.home-main>.tools>.container>.left{display:block;padding-top:100px}.home-main>.tools>.container>.left>img{height:auto;width:360px}.home-main>.tools>.container>.right{width:calc(100% - 420px)}.home-main>.tools>.container>.right>.tools-list{display:flex;justify-content:center;row-gap:25px}}@media screen and (min-width:1200px){.home-main>.tools>.container>.left>img{height:318px;width:450px}.home-main>.tools>.container>.right{width:calc(100% - 520px)}.home-main>.tools>.container>.right>.tools-list{display:grid;gap:30px;grid-auto-rows:60px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-template-rows:60px}}@media screen and (min-width:1400px){.home-main>.tools{padding:100px 0}}.home-main>.features{background:var(--home-features-bg);display:flex;justify-content:center;padding:80px 0;position:relative}.home-main>.features:before{background-image:var(--home-features-svg);background-position:top;background-repeat:no-repeat;background-size:100%;content:"";height:120px;left:0;position:absolute;top:0;width:100%}.home-main>.features>.container{display:grid;justify-content:center;width:75%}.home-main>.features>.container>.features-header{background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;display:inline-block;font-size:22px;font-weight:700;text-align:center;-webkit-text-fill-color:transparent}.home-main>.features>.container>ul{margin-top:50px}.home-main>.features>.container>ul>li{-moz-column-gap:15px;column-gap:15px;display:flex;flex:1}.home-main>.features>.container>ul>li>.feature-icon>i{background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;font-size:50px;-webkit-text-fill-color:transparent}.home-main>.features>.container>ul>li>.feature-detail>h3{color:#19b694;font-size:20px}.home-main>.features>.container>ul>li>.feature-detail>p{line-height:30px;margin-top:15px}.home-main>.features>.container>ul>li>.feature-detail>p>a{background-image:var(--home-features-a-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:0 1px;color:var(--home-features-a-text);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 (min-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 (min-width:768px){.home-main>.features{padding:200px 0}.home-main>.features>.container>ul{display:flex;gap:50px;margin-top:50px}.home-main>.features>.container>ul>li+li{margin-top:0}}:root{--home-tutorials-bg:linear-gradient(#159f94,#cbe2e0);--home-tutorials-header-bg:linear-gradient(90deg,#48aae7,#34ce7c);--home-tutorials-leftline-bg:linear-gradient(270deg,#ddd,transparent);--home-tutorials-rightline-bg:linear-gradient(90deg,#ddd,transparent);--home-tutorials-svg:url(../imgs/sites/icons/bg-wave-light1.svg);--home-tutorials-column-bg:#fff;--home-tutorials-column-header-bg:#cef2eb;--home-tutorials-column-border:#04af2f;--home-tools-bg:#fff;--home-tools-item-bg:#fff;--home-tools-item-text:#0b876c;--home-tools-item-border:#e3eaf1;--home-tools-hot-bg:#eaf9f6;--home-tools-hot-text:#0b876c;--home-tools-hot-border:#e3eaf1;--home-tools-hot-boxshadow:0 1px 5px 0 #add5cb;--home-features-bg:linear-gradient(180deg,#e0f3f1,#fff);--home-features-svg:url(../imgs/sites/icons/bg-wave-light2.svg);--home-features-a-text:#19b694;--home-features-a-bg:linear-gradient(90deg,#19b694,#19b694)}html[data-theme=dark]{--home-tutorials-bg:linear-gradient(#181b21,#181b21);--home-tutorials-header-bg:linear-gradient(90deg,#2e93d2,#23b868);--home-tutorials-leftline-bg:linear-gradient(270deg,#adbbc7,transparent);--home-tutorials-rightline-bg:linear-gradient(90deg,#adbbc7,transparent);--home-tutorials-svg:url(../imgs/sites/icons/bg-wave-dark1.svg);--home-tutorials-column-bg:#222730;--home-tutorials-column-header-bg:#323740;--home-tutorials-column-border:#3b4048;--home-tools-bg:#222730;--home-tools-item-bg:#323740;--home-tools-item-text:#adbbc7;--home-tools-item-border:#485063;--home-tools-hot-bg:#33393f;--home-tools-hot-text:#32c8b9;--home-tools-hot-border:#3b4048;--home-tools-hot-boxshadow:none;--home-features-bg:#181b21;--home-features-svg:url(../imgs/sites/icons/bg-wave-dark2.svg);--home-features-a-text:#7fc1f0;--home-features-a-bg:linear-gradient(90deg,#7fc1f0,#7fc1f0)}