@font-face {
  font-family: nsSemiBold;
  src:url('./SourceHanSansSC-Normal-2.otf')
}
html,body {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  font-family: nsSemiBold;
  background-image: url(../aiImg/bj.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  background-position: 0 -10px;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background-color:#f29700;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(179, 141, 99, 0.95);
}
.swiper-container{
  width: 100%;
  height: 100%;
  position: relative;
    background-image: url(../aiImg/bj_.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
}
.swiper-slide{
  color: #ffffff;
  position: relative;
}
.page-left{
  background-image: url(../aiImg/rectangle.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 15.4vw;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.page-left>div{
  width: 100%;
  height: 71.4vh;
}
.ai-select{
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: POINTER;
  position: relative;
  left: 0;
  top: 0;
}
.ai-select span{
  Writing-mode: tb-rl;
  font-weight:700;
  color:#c89f63;
  font-size:2.6rem;
  letter-spacing: .5rem;
  margin-left: -10%;
}
.ai-select>img{
  position: absolute;
  left: 0;
  top: 0;
  max-height: 100%;
  opacity: 0;
  width: 100%;
  z-index: 50;
}
.active>img{
  opacity: 1;
}
.page-right{
  position: absolute;
  height: 100%;
  width: 80%;
  left: 20%;
  top: 0;
}
.ai-txt{

}
.ai-txt-area{
      width: 73.6vw;
    height: 40vh;
    position: absolute;
    left: 0;
    top: 14.3vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txt-area-left{
  height: 100%;
  width: 41vw;
  background-image: url(../aiImg/jpg/txt_area_left.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.txt-area-left>div{
  width: 88%;
  margin-left: 6%;
  height: 100%;
}
.txt-area-right{
  height: 100%;
  width: calc(100% - 41vw);
  background-image: url(../aiImg/jpg/txt_area_right.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.txt-area-right>div{
  width: 88%;
  margin-left: 6%;
  height: 100%;
}
.txt-area-right-cnt{
  width: 100%;
  margin: auto;
  height: 20%;
}
.txt-area-right-desc{
  color: #6a3906;
  height: 13%;
  display: flex;
  align-items: self-end;
  font-size: 1rem;
}
.txt-area-right-desc span{
 
}
.ts-round{

}
.area-ts{
  color: #999999;
  font-size: .8rem;
}
.txt-area-right-txt{
  height: 73%;
  position: relative;
  left: 0;
  top: 3%;
}
.txt-area-right-txt textarea{
  height: calc(100% - 2rem);
  width: calc(100% - 2rem);
  border: 1px #c89f63 solid;
  outline: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  resize: none;
  color: #333333;
  padding: 1rem;
}
.txt-area-right-btn{
  margin-top: 5.5%;
  text-align: center;
  height: 100%;
}
.txt-area-right-btn img{
  cursor: pointer;
  height: 100%;
}
.dialog-bg{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background-color: rgb(0 0 0 / 70%);
    display: none;
}
.hide{
  display: none;
}
.show-txt-img{
  position: fixed;
  z-index: 1000;
  width: 74vw;
  height: 79vh;
  left: 13vw;
  top: 10.5vh;
  display: none;
}
.close{
  width: 2vw;
  position: absolute;
  right: -1.8vw;
  top: -1.8vw;
  cursor: pointer;
}
.show-txt-img-cnt{
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-txt-img-cnt-left{
  height: 79vh;
  width: 79vh;
  background-image: url(../aiImg/jpg/dia-left.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-txt-img-cnt-right{
  height: 79vh;
  width: calc(74vw - 79vh);
  background-image: url(../aiImg/jpg/dia-right.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 0;
  top: 0;
}
.left-boder{
  border: 1rem #c89f63 solid;
  width: 85%;
  height: 85%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-boder img{
  max-width: 100%;
  max-height: 100%;
}
.loading{
  width: 50%;
  text-align: center;
  color: #c89f63;
}
.loading img{
  width: 100%;
}
.loadImgStr{
  width: 50%;
  text-align: center;
  color: #c89f63;
}
.loadImgStr img{
  width: 100%;
}
.how-txt-img-cnt-right-top{
  background: #fff;
  width: calc(100% - 2rem);
  border: 1px #c89f63 solid;
  margin-top: 2%;
  height: calc(29% - 2rem);
  font-size: 1.2rem;
  color: #666666;
  letter-spacing: .1rem;
  line-height: 1.8rem;
  overflow: auto;
  padding: 1rem;
  opacity: .9;
}
.how-txt-img-cnt-right-pc{
  background: #fff;
  width: calc(100% - 2rem);
  border: 1px #c89f63 solid;
  margin-top: 2%;
  font-size: 1.2rem;
  color: #666666;
  letter-spacing: .1rem;
  line-height: 2rem;
  padding: .5rem 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
  height: 2.2rem;
}
.how-txt-img-cnt-right>div{
  width: 80%;
  margin-left: 10%;
  height: 100%;
}
.how-txt-img-cnt-right-top-desc{
  color: #6a3906;
  height: 8%;
  display: flex;
  align-items: self-end;
  font-size: 1rem;
}
.how-txt-img-cnt-right-top-cnt{

}
.how-txt-img-cnt-style{
  overflow: hidden;
  margin-top: 2%;
}
.how-txt-img-cnt-style>div{
  font-size: 1.1rem;
  cursor: pointer;
  background-image: url(../aiImg/img_select_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #fff;
  width: 25%;
  height: calc(4.44vw - 4.74vh);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c89f63;
  float: left;
  margin-right: 5%;
  margin-bottom: 2%;
}
.down-load0-btn{
  height: 9%;
  text-align: center;
  position: absolute;
  bottom: 8%;
  width: 100%;
  left: 0;
}
.down-load{
  height: 100%;
  cursor: pointer;
}
.swiper-button-prev:after, .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  display: none;
}
.example{
  width: 73.6vw;
  left: 0;
  position: absolute;
  top: 57vh;
}
.ai-txt-area-botton{
  width: 73.6vw;
  left: 0;
  position: absolute;
  top: 63vh;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ai-txt-area-botton>img{
  cursor: pointer;
  width: 3vw;
}
.botton-cnt{
  width: 61vw;
  height: 100%;
  overflow: hidden;
}
.botton-cnt>div{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3vh;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.botton-list{
  height: 100%;
  overflow: hidden;
  width: 26vh;
  position: relative;
  left: 0;
  top: 0;
  cursor: pointer;
}
.botton-list>img{
  width: 24vh;
  height: 24vh;
  border: 0.3rem #C89F63  solid;
  position: absolute;
  left: calc(1vh - 0.3rem);
  z-index: 10;
}
.botton-desc{
  position: absolute;
  width: calc(100% - 0.2rem);
  top: 1.5vh;
  height: calc(28.5vh - 2px);
  z-index: 5;
  background: linear-gradient(180deg,#6a3906 0%,#6a3906 100%);
  border: 1px solid;
  border-color: #c89f63;
}
.botton-title{
  position: absolute;
  bottom: 0.8vh;
  width: calc(24vh + 0.6rem);
  z-index: 10;
  height: calc(4.4vh - 0.3rem);
  left: calc(1vh - 0.3rem);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.botton-title img{
  height: 1rem;
  position: relative;
  top: 0.15rem;
}
.botton-title span{
 
}
.ai-img{
  height: 80vh;
  width: 75.4vw;
  position: absolute;
  top: 13vh;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-img-left{
  height: 100%;
  width:calc(100% - 80vh);
  background-image: url(../aiImg/jpg/img_left.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 0;
  top: 0;
}
.ai-img-right{
  height: 100%;
  width:80vh;
  background-image: url(../aiImg/jpg/img_right.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
align-items: center;
justify-content: center;
}
.ai-img-left-title{
  color: #6a3906;
  height: 10%;
  display: flex;
  align-items: center;
  font-size: 1rem;
  width: 90%;
  margin-left: 5%;
}
.ai-img-left-title span{
  color: #999999;
  font-size: .8rem;
}
.ai-img-upload{
  width: 90%;
  margin-left: 5%;
  height: 32%;
  border: 0.1rem #c89f63 solid;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
}
.ai-img-to{
  width: 6%;
  cursor: pointer;
}
.agsin-upload{
  width: 12%;
  cursor: pointer;
  position: absolute;
  z-index: 50;
}
.ai-img-style{
  width: 90%;
  margin-left: 5%;
}
.ai-img-style>span{
  border: 0.1rem #9e9f9f solid;
  color: #9e9f9f;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem 1rem;
  margin-right: 0.5rem;
  display: inline-block;
  margin-bottom: 1rem;
  background-image: url(../aiImg/img_no_select.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #fff;
}
.img-active{
  background-image: url(../aiImg/img_select.png) !important;
  border: none !important; 
  padding:0.35rem 1.05rem !important;
  color: #c89f63 !important;
  /* border: 0.1rem #C89F63 solid !important; */
}
.ai-img-to-img{
  width: 60%;
  position: absolute;
  bottom: 10%;
  left: 20%;
  cursor: pointer;
}
.show-upload{
  max-width: 100%;
  max-height:100%;
}
.error {
  position: absolute;
  top: 0;
  z-index: 2000;
  text-align: center;
  width: 100%;
  top: 5vh;
}
.error span {
  background: #fef0f0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: #f56c6c;
  font-size: 1rem;
}
.txt-area-ts{
  font-size: 1.3rem;
  letter-spacing: .1rem;
  color: #999;
  position: absolute;
  left: 1rem;
  top: 1rem;
}
.txt-area-right-txt-re{
  height: 13%;
  position: relative;
  left: 0;
  top: 3%;
}
.txt-area-ts-re{
  font-size: 1.3rem;
  letter-spacing: .1rem;
  color: #999;
  position: absolute;
  left: 1rem;
  top: 50%;
  margin-top: -0.7rem;
}
.txt-area-right-txt-re textarea{
  height: calc(100% - 1.3rem);
  width: calc(100% - 2rem);
  border: 1px #c89f63 solid;
  outline: none;
  font-size: 1.3rem;
  letter-spacing: .1rem;
  resize: none;
  color: #333333;
  padding: 0.8rem 1rem 0.5rem 1rem;
  line-height: 1.5rem;
}
.txt-area-style{
  margin-top: 3%;
}
.txt-area-style-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2%;
}
.txt-area-style-list div{
  border: 0.1rem #9e9f9f solid;
    color: #9e9f9f;
    font-size: 1.1rem;
    cursor: pointer;
    background-image: url(../aiImg/img_no_select.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #fff;
    width: 20%;
    height: 1.72vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.txt-area-style-active{
  background-image: url(../aiImg/img_select_1.png) !important;
  border: none !important; 
  color: #c89f63 !important;
  padding: 0.05rem 0.05rem !important;
}