/*
修改记录：2.0.1
1，迁移背景生成功能；
2，修改Banner样式
*/
.fs-login-btn{ background: #FF4218; border-radius: 4px; color: #fff; padding: 4px 16px!important; border: 0; margin: 2px 0 0 0;}
.fs-login-btn:hover{ color: #fff; background:#ff2f2f; text-decoration: none;}
.radius8{border-radius: 8px;}
.radius16{border-radius: 16px;}
/*Login Windows*/
.fs-login-bg{ background: rgb(0, 0, 0,0.8); position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; display: none;}
.fs-login{ position: absolute; width: 500px; height: 600px; position: absolute; left: 50%; top: 50%; transform:  translate(-50%,-50%);z-index: 100;  background: #fff; border-radius: 16px; overflow: hidden;}
.fs-login iframe{ width: 100%; height: 100%; background: #fff;}
.fs-login-bt{ border: 0; background: navajowhite;}
.fs-login-close{ position: absolute; width: 100%;}
.fs-login-close button{ border: none; background: none; float: right; width:32px; height:32px; overflow: hidden; padding: 0; margin: 8px 8px 0 0; border-radius: 30px; text-align: center; background: url(../images/ic-win-close.svg) no-repeat 4px center; opacity: 0.5;}
.fs-login-close button:hover{background: #e3e3e3 url(../images/ic-win-close.svg) no-repeat 4px center; opacity: 1;}
.fs-user-list{ cursor: pointer;}
.fs-user-photo{ display: inline-block; margin:0; width:52px; padding: 4px;}
.fs-user-photo img{ width: 28px;}
.fs-user-photo:after{ content: '\e630'; font-family: fs; width: 16px; height: 16px; position: absolute; margin: 8px 0 0 4px; font-size: 0.75rem; font-weight: bold;}
.fs-user-photo:hover{ background: #ffe7e0; border-radius: 8px;}
.fs-user-photo:hover::after{ color: #FF4218;}
.fs-user-list:hover ol{ display: block;}
.fs-user-list ol{ list-style: none; background: #fff; position: absolute; border-radius: 8px; box-shadow: 0 0 4px rgb(0, 0, 0,0.2); padding:16px; width: 180px; overflow: hidden; margin: 2px 0 0 -120px; display: none;}
.fs-user-list ol li{ padding:0; margin: 0;}
.fs-user-list ol li span{ color: #666; white-space: nowrap;  text-overflow: ellipsis; display: block; overflow: hidden; padding: 6px;}
.fs-user-list ol li button{ background: none; border: none; width: 100%; text-align: left; padding: 6px; border-radius:4px;}
.fs-user-list ol li button:hover{ color: #FF4218; background: #ffe7e0;}
/**/
.zm-banner-bg{ height:auto; padding: 0;}
.zm-banner-main{background: #fff url(../images/ai-zoom-bg.webp) no-repeat; background-size: cover; height:500px;}
.zm-banner{ color: #fff; height:auto;}
.zm-banner h1{font-size: 48px!important;}
.ai-background{ background: #fff; width:800px; height:auto; position: absolute; border-radius: 16px; box-shadow: 0 0 8px rgb(0, 0, 0,0.2); left: 50%; transform: translate(-50%); margin: 10px 0 0 0; padding: 16px;}
.zm-create-bg{ display: inline-block; background:#FF4218;  border-radius: 8px; padding: 20px 30px; color: #fff;}
.zm-create-bg:hover{ background: #ff5930; color: #fff;}

.bg-page-break{ text-align: center; padding: 30px 0 0 0;}
.bg-page-break a{ display: inline-block; border-radius: 8px; border: 1px #ccc solid; margin: 0 8px; width: 32px; height: 32px; line-height: 32px; color: #333;}
.bg-page-break a:hover{cursor: pointer; background:#FF4218; color: #fff; border: 1px #FF4218 solid;}
.bg-page-break .active{ background:#FF4218; color: #fff; border: 1px #FF4218 solid;}
/*背景生成样式*/
.fs-ai-main{ width: 800px; height: 560px; border-radius: 16px; box-shadow: 0 0 8px rgb(0, 0, 0,0.2); padding: 20px; background: #fff; position: absolute; left: 50%; top: 50%; transform:  translate(-50%,-50%); }
.fs-ai-title{ padding: 8px; color: #000;}
.fs-ai-title b{ font-size: 18px; display: inline-block; width: 50%;}
.fs-ai-title span{ display: inline-block; width: 50%; text-align: right; color: #FF4218;}
.fs-ai-nav{ padding: 10px; 0}
.fs-ai-nav span{ display: inline-block; padding: 4px 8px; border-radius: 6px; border: 1px #ccc solid; margin: 8px 8px 8px 0; cursor: pointer; color: #000;}
.fs-ai-nav span:hover{ color:#FF4218; border: 1px #FF4218 solid;}
.fs-ai-nav .active{ color: #fff!important; background:#FF4218; border: 1px #FF4218 solid; }
.fs-ai-input textarea{ width: 100%; border: 1px #ccc solid;  border-radius: 6px; margin: 10px 0 0 0; padding: 10px; text-align: left; height: 200px;}
.fs-ai-submit{text-align:  center; padding: 10px 0; overflow: hidden; padding: 16px 0 0 0;}
.fs-ai-submit button{ background:#FF4218; color: #fff; border: 0; border-radius: 6px; padding: 16px 60px; font-size: 18px; font-weight: bold; float: right;}
.fs-ai-submit button:hover{background:#FF4218;}
/*背景加载模块*/
.fs-ai-loading{ display: none;}
.fs-ai-load{ text-align: center; color: #000;}
.fs-ai-gif{ width: 200px; margin: 0 auto;}

/*背景下载*/
.fs-ai-background{ display: none;}
.fs-ai-photo{text-align: center;}
.fs-ai-photo img{ background: #F2F2F2;  border-radius: 16px; width: 730px; height: 411px;}
.fs-ai-download{background:#FF4218; color: #fff; border: 0; border-radius: 6px; padding: 8px 30px; font-size: 18px; font-weight: bold; margin:20px 0 0 0;}
.fs-ai-download button:hover{background:#FF4218;}
.fs-back{ cursor: pointer; font-weight: normal; color: #FF4218;}
.fs-back:hover{ color: #FF4218;}
.fs-ai-cancel{ display: inline-block; border: 1px #ccc solid; border-radius: 8px; padding: 4px 20px; cursor: pointer; color: #666;}
.fs-ai-cancel:hover{ border: 1px #FF4218 solid; color: #FF4218;}
.fs-ai-share{ cursor: pointer; color:#FF4218; display:inline-block; float: left; margin: 20px 0 0 0;}
.fs-ai-share:hover{color:#FF4218; text-decoration: underline;}
/*背景分享*/			
.fs-ai-gift{ display: none;}
.fs-share-gift{ text-align: center; padding: 80px 0 0 0; color: #000;}
.fs-share-gift p b{ font-size: 28px;}
.fs-share-box{ background:#EAEAEA; border-radius: 8px; width: 500px; margin: 0 auto; padding: 8px; list-style: none; overflow: hidden;}
.fs-share-box-text{ width: 82%; float: left;}
.fs-share-box-btn{ width:18%; float: left; text-align: right; }
.fs-share-box-text span{ display:block; width: 100%;  white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; margin: 10px 0 0  0; color: #000;}
.fs-share-box-btn button{ background:#FF4218; color: #fff; border: 0; border-radius: 6px; padding: 8px; font-size: 18px; font-weight: bold;}
.fs-share-twitter{ border-radius: 8px; border: 1px #ccc solid; padding:8px 16px; color: #000; display:inline-flex; align-items: center;}
.fs-share-twitter:before{ content: ''; display: inline-block; width: 24px; height: 24px; background: url(../images/ic-fs-twitter.svg) no-repeat; margin: 0 8px 0 0;}
.fs-share-twitter:hover{border: 1px #FF4218 solid; color: #FF4218;}
.fs-share-facebook{ border-radius: 8px; border: 1px #ccc solid; padding:8px 16px; color: #000; display:inline-flex; align-items: center; margin: 0 0 0 16px;}
.fs-share-facebook:before{ content: ''; display: inline-block; width: 24px; height: 24px; background: url(../images/ic-fs-facebook.svg) no-repeat; margin: 0 8px 0 0;}
.fs-share-facebook:hover{border: 1px #FF4218 solid; color: #FF4218;}
.bg-bt-copied{ display: none; background: #00aa00!important;}


/*推荐背景模块*/
.bg-nav{ padding: 16px 0; text-align: center;}
.bg-nav a{ display: inline-block; background: #FFF7F6; border-radius: 30px; padding: 8px 20px; color: #000; margin: 0 8px; font-size: 15px; border: 1px #f5e1df solid;}
.bg-nav a:hover{ background:#FF4218; color: #fff;}
.bg-recommend{ text-align: center;}
.bg-recommend a{ display: inline-block; margin: 12px 0;}
.bg-recommend a img{ width: 100%; height:270px; background: #f0f0f0;border-radius: 8px;}
.block-bg{ background: #F5F5F7;}

.fs-fea-block{ width: 530px; height: 64px; margin: 0 auto; padding: 0 10px!important; position: relative; border: 1px #EDEDED solid; border-radius: 8px; }
.fs-fea-nav{list-style: none; margin: 4px 0 0 0; padding: 0; display: flex; position: absolute; z-index: 10;}
.fs-fea-nav li{ width: 49%; height: 54px;  cursor: pointer; align-items: center; display: flex; justify-content: center;}
.fs-id-nav-bg{  width: 50%; height: 54px; background:#FF4218; border-radius: 8px; position: absolute; margin: 4px 4px 0 4px; font-size: 20px; color: #6C6C6C;}
.fs-id-nav-color b{ color: #fff;}
.fea-nav-block{ background: #F5F5F7; border-radius: 30px; padding: 30px; cursor: pointer; position: relative; transition: 0.3s linear; box-shadow: 0 0 8px rgb(0,0,0,0); top: 0;}
.fea-nav-block p b{ font-size: 24px; line-height: 32px;}
.fea-nav-block p span{ display: block; color: #6C6C6C;}
.fea-nav-block:hover{box-shadow: 4px 8px 16px rgb(0,0,0,0.1); top: -5px; }
.fea-nav-block::before{ content: ''; display: block; width:40px; height: 40px; background: url(../images/ic-fea-learn.svg) no-repeat; position: absolute; right: 20px; top:20px; transform: translate3d(-40px,0,0); transition: 0.3s linear; opacity: 0;}
.fea-nav-block:hover::before{transform: translate3d(-10px,0,0); opacity: 1;}
.fea-hide{ display: none;}

.zm-tips-content{ text-align: center;}
.zm-tips-content p video{ width: 100%; border-radius: 8px;}
.zm-tips-content p b{ font-size: 24px;}

.zb-tips-sec{ background:#fff; border-radius: 8px; padding: 30px; border-radius: 8px; height: 100%;}
.zb-tips-sec b{ font-size: 24px; display: block;}
.zb-tips-sec span{ display: block; margin: 8px 0 0 0; color: #555;}

.zm-fc-nav{ list-style: none; margin: 0; padding:0;}
.zm-fc-nav li{ font-size: 22px; font-weight: bold; color: #666; cursor: pointer; padding:24px 0; border-bottom: 1px #ececec solid;}
.zm-fc-nav li:hover{ color:#FF4218; border-bottom: 1px #FF4218 solid;}
.zm-fc-nav .sel{color:#FF4218; border-bottom: 1px #FF4218 solid;}

.zm-fc-blcok{ background:#FBF7F7; border-radius: 16px; padding: 30px; text-align: center;  display: none;}
.zm-fc-blcok p b{ font-size: 24px;}
.zm-fc-blcok p span{ font-size: 18px;}
.zm-fc-blcok p a{ display: inline-block; background:#FF4218; color: #fff; border-radius: 8px; padding: 16px 40px;}
.zm-fc-blcok p a:hover{ background:#FF4218;}
.zm-fc-blcok p img{ width: 566px; height: 368px;}
.zm-fc-main .sel{ display: block!important;}

.zm-page-block{ background: #fff; border-radius: 16px; padding: 16px; display: block; color: #000;}
.zm-page-block:hover{ color:#FF4218;}
.zm-page-block p b{font-size: 20px;}
.zm-page-block p img{ border-radius: 8px;}

.fc-buy-faq{ list-style: none; padding: 40px 0;}
.fc-buy-faq li{border-bottom: 1px #EDEDED solid; padding: 30px 0;}
.fc-buy-faq li b{ display: block; padding: 8px 0; font-size:28px;}
.fc-buy-faq li b:hover{cursor: pointer; color: #FF4218;}
.fc-buy-faq li b::after{content: '\e62f';  font-family: fs; font-size: 28px; float: right;}
.fc-buy-faq li span{ font-size: 20px; padding:0; color: #333; display: block; height: 0; transition: height 0.5s; overflow: hidden;}
.buy-faq-show{ height: 100px!important; line-height: 2rem; padding: 10px 0;}
.buy-faq-sel{color: #FF4218;}
.buy-faq-sel::after{ transform:rotate(45deg); transition:transform 0.1s linear;}

.zm-tm-main{ border: 1px #dedede solid; border-radius: 16px; text-align: center; padding: 30px 0; margin: 20px 0;}
.zm-tm-main h1{ font-size: 32px;}

.zm-tm-photo img{ border-radius: 16px;}
.zm-tm-info p{ text-align: left;}
.zm-tm-info p span{ display: block; color: #666;}
.zm-tm-info p b{ display: block;}
.zm-tm-dl{ text-align: right;}
.zm-tm-dl-link{ display: inline-block; background:#FF4218; color: #fff; border-radius: 8px; padding:12px 32px; font-weight: bold; font-size: 24px;}
.zm-tm-dl-link:hover{ color: #fff;}
.zm-tm-prompt{ text-align: left; border-top: 1px #ebebeb solid;}
.zm-tm-prompt b{ display: block;}
.fs-ai-list{ display: none;}
.fs-aibg-tab{ display: inline-block;}
.fs-aibg-tab button{ border: 0; background: none;color: #555;  padding: 4px 8px;}
.fs-aibg-tab .active{ color:#FF4218; border-bottom: 2px #FF4218 solid;  font-weight: bold; }
.fs-ai-list-background{overflow-y:auto; text-align: center; height: 450px;}
.fs-ai-list-background img{ width: 230px; height: 129px; margin: 10px; border-radius: 8px; background: #ccc;}
.zm-tp-share a{ display: inline-block; background: #e7e7e7; border-radius: 8px; padding: 2px 12px; color: #000; margin: 0 6px;}
.zm-tp-share a:hover{ background:#FF4218; color: #fff;}

/**/
.bg-item-main{padding:20px 0;}
.bg-item{ margin: 20px 0;}
.bg-item-content{display: block;  border: 2px #EBEBEB solid; border-radius: 20px; color: #000; padding: 20px; min-height:328px; max-height:328px; position: relative; cursor: pointer;}
.bg-item-content:hover{border: 2px #FF4218 solid; color: #FF4218;}
.bg-item-content p{ padding: 0;}
.bg-item-content p img{ display: block; width: 100%; border-radius: 16px;}
.bg-item-content p span{ background: #ffdedb; padding: 5px 20px;border-radius: 8px; font-weight: 500; color: #FF4218;}
.bg-item-content p b{ display: block; font-weight: 400; font-size: 18px;}

.zm-list-banner{background: #FFF7F6;}
.zm-list-banner-text h1{ font-size: 48px;}
.zm-list-banner-photo img{ border-radius: 36px;}

.zb-page-tag{ color:#FF4218;}
.zb-page-tag:hover{ text-decoration: underline; color:#FF4218;}
.linkto{ color:#FF4218;}
.linkto:hover{ text-decoration: underline; color:#FF4218;}