@charset "UTF-8";.home-main>.tutorials{position:relative;display:flex;justify-content:center;padding:60px 0 100px}.home-main>.tutorials:before{top:0;height:100%;background:var(--home-tutorials-bg)}.home-main>.tutorials:after,.home-main>.tutorials:before{content:"";z-index:10;position:absolute;left:0;width:100%}.home-main>.tutorials:after{bottom:-1px;height:120px;background:var(--home-tutorials-svg);background-size:100%;background-position:bottom;background-repeat:no-repeat}.home-main>.tutorials>.container{z-index:100;position:relative;width:90%}.home-main>.tutorials>.container>.tutorials-header{display:grid;justify-items:center}.home-main>.tutorials>.container>.tutorials-header>h2{width:200px;height:40px;line-height:40px;text-align:center;font-size:20px;border-radius:40px;color:#fff;background:var(--home-tutorials-header-bg)}.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{margin-top:20px;line-height:22px;font-size:14px;text-align:center;color:var(--text-white-silver)}.home-main>.tutorials>.container>.tutorials-content{margin-top:50px;gap:20px}.home-main>.tutorials>.container>.tutorials-content>.column{position:relative;padding-top:50px;border:1px solid var(--home-tutorials-column-border);border-radius:16px;background-color:var(--home-tutorials-column-bg)}.home-main>.tutorials>.container>.tutorials-content>.column>.column-header{position:absolute;top:0;left:0;width:130px;height:36px;line-height:36px;text-align:center;font-size:16px;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}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-template-rows:90px;grid-auto-rows:90px;row-gap:10px;padding:12px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure{width:100%;height:100%;text-align:center;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{display:block;margin-top:3px;font-size:14px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div{position:relative;display:inline-block}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div:before{content:"精品";z-index:10;position:absolute;top:0;right:0;width:30px;height:18px;line-height:18px;text-align:center;font-family:PingFang SC,helvetica,arial,verdana,tahoma,sans-serif;transform:scale(.8);transform-origin:top right;font-size:12px;color:#4e2d03;background:linear-gradient(45deg,#ffc552,#ffdd9a);border-top-right-radius:3px;border-bottom-left-radius:8px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a.vip>figure>div>img{width:45px;border-radius:3px;opacity:var(--img-opacity)}@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{content:"";position:absolute;top:20px;left:-110px;width:100px;height:2px;background-image:var(--home-tutorials-leftline-bg)}.home-main>.tutorials>.container>.tutorials-header>h2:after{content:"";position:absolute;top:20px;right:-110px;width:100px;height:2px;background-image:var(--home-tutorials-rightline-bg)}.home-main>.tutorials>.container>.tutorials-content{margin-top:60px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));grid-template-rows:90px;grid-auto-rows:90px;row-gap:8px}.home-main>.tutorials>.container>.tutorials-content>.column>.column-content>a>figure>img{width:50px;height: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{display:flex;justify-content:center;padding:40px 0;background-color:var(--home-tools-bg)}.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{position:relative;display:inline-block;font-size:22px;font-weight:700;background-image:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.home-main>.tools>.container>.right>.tools-header>h2:after,.home-main>.tools>.container>.right>.tools-header>h2:before{content:"";position:absolute;top:12px;width:12px;height:12px;border-radius:8px}.home-main>.tools>.container>.right>.tools-header>h2:before{left:-25px;border:2px solid #1ca5ed}.home-main>.tools>.container>.right>.tools-header>h2:after{right:-25px;border:2px solid #12d2af}.home-main>.tools>.container>.right>.tools-header>p{margin-top:15px;line-height:22px;font-size:14px;color:#24cab7}.home-main>.tools>.container>.right>.tools-list{display:flex;flex-direction:column;align-items:center;row-gap:20px;margin-top:40px}.home-main>.tools>.container>.right>.tools-list>li>a{position:relative;display:flex;align-items:center;width:220px;height:55px;padding-left:20px;border:1px solid var(--home-tools-item-border);color:var(--home-tools-item-text);background-color:var(--home-tools-item-bg);box-shadow:0 1px 6px #00000026;border-radius:5px;transition:all .2s linear}.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{border:1px solid var(--home-tools-hot-border);color:var(--home-tools-hot-text);background-color:var(--home-tools-hot-bg);box-shadow:var(--home-tools-hot-boxshadow)}@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;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-template-rows:60px;grid-auto-rows:60px;gap:20px 10px}.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{width:360px;height:auto}.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{width:450px;height:318px}.home-main>.tools>.container>.right{width:calc(100% - 520px)}.home-main>.tools>.container>.right>.tools-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-template-rows:60px;grid-auto-rows:60px;gap:30px}}@media screen and (min-width:1400px){.home-main>.tools{padding:100px 0}}.home-main>.features{position:relative;display:flex;justify-content:center;padding:80px 0;background:var(--home-features-bg)}.home-main>.features:before{content:"";position:absolute;top:0;left:0;width:100%;height:120px;background-image:var(--home-features-svg);background-size:100%;background-position:top;background-repeat:no-repeat}.home-main>.features>.container{display:grid;justify-content:center;width:75%}.home-main>.features>.container>.features-header{display:inline-block;text-align:center;font-size:22px;font-weight:700;background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.home-main>.features>.container>ul{margin-top:50px}.home-main>.features>.container>ul>li{flex:1;display:flex;-moz-column-gap:15px;column-gap:15px}.home-main>.features>.container>ul>li>.feature-icon>i{font-size:50px;background:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.home-main>.features>.container>ul>li>.feature-detail>h3{font-size:20px;color:#19b694}.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-size:0 1px;background-repeat:no-repeat;background-position:100% 100%;transition:background-size .25s linear}.home-main>.features>.container>ul>li>.feature-detail>p>a:hover{background-size:100% 1px;background-position:0 100%}.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}}