/*@font-face {
  font-family: '三极正极黑简体';
  src: url('../foucs/fontfamily/SJzhengjihei-Regular.ttf');
}
@font-face {
  font-family: '三极义黑简体';
  src: url('../foucs/fontfamily/SJyihei-Regular.ttf');
}
@font-face {
  font-family: '三极极黑简体';
  src: url('../foucs/fontfamily/SJjihei-Regular.ttf');
}
@font-face {
  font-family: '三极智量黑简体';
  src: url('../foucs/fontfamily/SJzhilianghei-Regular.ttf');
}
@font-face {
  font-family: '三极信黑简体';
  src: url('../foucs/fontfamily/SJxinhei-Regular.ttf');
}
@font-face {
  font-family: '三极粗极黑简体';
  src: url('../foucs/fontfamily/SJcujihei-Regular-.ttf');
}
@font-face {
  font-family: '三极纵黑简体';
  src: url('../foucs/fontfamily/SJzonghei-Regular.ttf');
}
@font-face {
  font-family: '三极柔宋简体';
  src: url('../foucs/fontfamily/SJrousong-Regular.ttf');
}
@font-face {
  font-family: '三极拙楷简体';
  src: url('../foucs/fontfamily/SJzhuokai-Regular.ttf');
}
@font-face {
  font-family: '三极古圆简体';
  src: url('../foucs/fontfamily/SJguyuan-Regular.ttf');
}
@font-face {
  font-family: '三极宜修简体';
  src: url('../foucs/fontfamily/SJyixiu-Regular.ttf');
}
@font-face {
  font-family: '三极粗圆简体';
  src: url('../foucs/fontfamily/SJcuyuan-Regular.ttf');
}
@font-face {
  font-family: '三极萌娃简体';
  src: url('../foucs/fontfamily/SJmengwa-Regular.ttf');
}
@font-face {
  font-family: '三极真喵简体';
  src: url('../foucs/fontfamily/SJzhenmiao-Regular.ttf');
}
@font-face {
  font-family: '三极花信体系列';
  src: url('../foucs/fontfamily/SJhuaxin-Regular.ttf');
}
@font-face {
  font-family: '三极柴园简体系列';
  src: url('../foucs/fontfamily/SJChaiyuan-Regular.ttf');
}
@font-face {
  font-family: '三极韵黑简体';
  src: url('../foucs/fontfamily/SJyunhei-Regular.ttf');
}
@font-face {
  font-family: '三极雅致黑简体';
  src: url('../foucs/fontfamily/SJyazhihei-Regular.ttf');
}
@font-face {
  font-family: '三极竹枝简体';
  src: url('../foucs/fontfamily/SJzhuzhi-Regular.ttf');
}
@font-face {
  font-family: '三极细柳简体';
  src: url('../foucs/fontfamily/SJxiliu-Regular.ttf');
}
@font-face {
  font-family: '三极傻黑简体';
  src: url('../foucs/fontfamily/SJshahei-Regular.ttf');
}
@font-face {
  font-family: '三极能量黑简体';
  src: url('../foucs/fontfamily/SJnenglianghei-Regular.ttf');
}
@font-face {
  font-family: '三极毛哥楷书';
  src: url('../foucs/fontfamily/SJmaogekaishu-Regular.ttf');
}
@font-face {
  font-family: '三极行书简体';
  src: url('../foucs/fontfamily/SJxingshu-Regular.ttf');
}
@font-face {
  font-family: '三极粗柔宋简体';
  src: url('../foucs/fontfamily/SJcurousong-Regular.ttf');
}
@font-face {
  font-family: '三极隶书简体';
  src: url('../foucs/fontfamily/SJLishu-Regular.ttf');
}
@font-face {
  font-family: '三极直峰无锋';
  src: url('../foucs/fontfamily/SJzhifengwufeng-Regular.ttf');
}
@font-face {
  font-family: '三极楚凡行楷';
  src: url('../foucs/fontfamily/SJchufanxingkai-Regular.ttf');
}
@font-face {
  font-family: '三极崇德行楷';
  src: url('../foucs/fontfamily/SJchongdexingkai-Regular.ttf');
}
@font-face {
  font-family: '三极执子之手';
  src: url('../foucs/fontfamily/SJzhizizhishou-Regular.ttf');
}*/
/* abc */
/*@font-face {
  font-family: 'Betonwa';
  src: url('../foucs/fontfamily/Betonwa-Regular.ttf');
}
@font-face {
  font-family: 'Elitakoo';
  src: url('../foucs/fontfamily/Elitakoo-Regular.ttf');
}
@font-face {
  font-family: 'Fabarsolia';
  src: url('../foucs/fontfamily/Fabarsolia-Regular.ttf');
}
@font-face {
  font-family: 'Karna';
  src: url('../foucs/fontfamily/Karna-Regular.ttf');
}
@font-face {
  font-family: 'Mitooh';
  src: url('../foucs/fontfamily/Mitooh-Regular.ttf');
}
@font-face {
  font-family: 'Nattif';
  src: url('../foucs/fontfamily/Nattif-Regular.ttf');
}
@font-face {
  font-family: 'Witarna';
  src: url('../foucs/fontfamily/Witarna-Regular.ttf');
}
@font-face {
  font-family: '三极黄艺明书体';
  src: url('../foucs/fontfamily/SJhym-Regular.ttf');
}
@font-face {
  font-family: '三极柳楷简体（开发中）';
  src: url('../foucs/fontfamily/SJliukai-Regular.ttf');
}
@font-face {
  font-family: '三极综艺简体100';
  src: url('../foucs/fontfamily/SJzongyi100-Regular.ttf');
}
@font-face {
  font-family: '三极综艺简体120';
  src: url('../foucs/fontfamily/SJzongyi120-Regular.ttf');
}
@font-face {
  font-family: '三极拙楷简体';
  src: url('../foucs/fontfamily/SJzhuokai-Regular.ttf');
}
@font-face {
  font-family: '三极超粗极黑简体';
  src: url('https://sanji20191107.oss-cn-shenzhen.aliyuncs.com/SJchaocujihei-Regular.ttf');
}
@font-face {
  font-family: '三极吴哥简体';
  src: url('../foucs/fontfamily/SJwuge-Regular.ttf');
}
@font-face {
  font-family: '三极丰腴简体';
  src: url('https://sanji20191107.oss-cn-shenzhen.aliyuncs.com/SJfengyu-Regular.ttf');
}*/

*{

  margin:0; padding:0;

}

i,em{

  font-style: normal;

}

li{

  list-style:none;

}

.box{
  width: 1200px;
  height: 540px;
  margin: 30px auto 0;
  background: #f5f5f5;
  padding: 20px;
}

.box_top{

  width:100%; height:76px; 

}

.box_top .box_top_left{

  width:300px; height:76px; font-size: 14px; color:#666; line-height:76px; float:left;

  

}

.box_top .box_top_left span{

  display:inline-block; font-size: 16px; color:#333;

}

.box_top .box_top_center{

  width:500px; height:76px; font-size: 14px; color:#666; line-height:76px; float:left;

}

.box_top .box_top_center span{

  display:block; width:50px; height:50px; margin:13px; float:left; font-size: 16px; color:#666; line-height:50px; text-align: center; text-transform: uppercase;

}

.box_top .box_top_center .fontSize{

  width:220px; height:10px; border-radius:5px; background:#fff; margin:33px 10px 0; float:left; position: relative;

}

.box_top .box_top_center .fontSize #speed{

  width:60px; background:#f08c26; height:10px; position: absolute; left:0; top:0; border-radius:5px 0 0 5px;

}

.box_top .box_top_center .fontSize #limit{

  width:18px; background:#f08c26; height:18px; border:1px solid #eee; position: absolute; left:55px; top:-6px; border-radius:50%;

}

/* 中间 */

.box_bottom{

  width:100%; height:400px;

}

.box_bottom_left{

  width:208px; height:398px; border:1px solid #ddd; border-radius: 15px; float:left;

}

.selectFont{

  width:100%; height:198px; border-bottom: 1px dashed #ddd;

}

.selectFont span{

  display:block; width:50%; line-height:34px;height: 34px;overflow: hidden; text-indent:20px; font-size: 16px; color:#333; float:left; cursor:pointer;

}

.typeFace{

  width:100%; height:188px; overflow-y:auto;
    
}

.typeFace li{

  width:100%; line-height:34px; text-indent:20px; font-size: 16px; color:#333; cursor:pointer;

}
/*滚动条*/
.typeFace::-webkit-scrollbar {
  width : 6px;
  height: 1px;
}
.typeFace::-webkit-scrollbar-thumb {
  border-radius: 6px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #DDDDDF;
}

.box_bottom_center{

  width:724px; height:400px; float:left; margin:0 10px;

}

#writeFoucs{

    width:760px; height:350px; margin-bottom:10px; text-align:center; color:#333; vertical-align: middle; display: table-cell;

}

.box_bottom_right{

  width:208px; height:398px; border:1px solid #ddd; border-radius: 15px; float:left;

}

.inputFont{

  width:100%; height:40px; margin-top:10px;

}

.change{

  line-height: 40px;

    display: block;

    padding: 10px;

}

.inputFont input{

  display:block; width:614px; height:36px; text-indent:10px; float:left; border-radius: 4px; outline: none; border:none;

}

.inputFont span{

  display:block; width:100px; height:36px; line-height:36px; text-align:center; font-size: 16px; color:#fff; background:#c7000a; float:left; margin-left:10px; cursor:pointer; 

  border-radius: 6px;

}

.box_top_right{

  float:right; height:76px; line-height: 76px;

}

.box_top_right i{

  width:30px; height:30px; border-radius:5px; display:inline-block; margin:0 5px; vertical-align: middle; position:relative;

}

#black{

  background: black;

}

#white{

  background: white;

}

#opacity{

  background: url(images/bg.png);

}

#backgroundColor{

  background: url(images/opacity.png) no-repeat center;

  background-size: 30px;

}

#backgroundColor input{

  display:block; background:none; border:1px solid #ddd; border-radius: 4px; width:28px; height:28px; outline: none; 

}

.specialEffects{

  padding:10px;

}

.specialEffects em{

  line-height:30px; font-size: 16px; color:#333;

}

#specialEffects_color{

  margin-top:20px;

}

#specialEffects_color::after{

  content:''; display:block; clear:both;

}

#specialEffects_color li{

  width:48%; height:30px; float:left; border-radius: 6px; border:1px solid #ddd; margin-bottom: 10px; line-height:30px; text-align:center; cursor:pointer; font-weight: bold;

    font-size: 18px;

}

#specialEffects_color li:nth-child(2n+1){

  margin-right:3.8%;

}

.specialEffects p{

  font-size: 14px; color:#333; line-height:40px; text-align:center;

}

#backgroundFontColor{

  overflow-y: auto; height: 350px;

}

/* 字体特效 */

.default{

  color: #333 !important;

}

.gradualChange{

  background-image: linear-gradient(90deg,#529dec 0,#3c57db 36%,#932188 65%,#c76aa0 100%);

  background-image: -ms-linear-gradient(90deg,#529dec 0,#3c57db 36%,#932188 65%,#c76aa0 100%);

  background-image: -moz-linear-gradient(90deg,#529dec 0,#3c57db 36%,#932188 65%,#c76aa0 100%);

  background-image: -o-linear-gradient(90deg,#529dec 0,#3c57db 36%,#932188 65%,#c76aa0 100%);

  background-image: -webkit-linear-gradient(0deg,#529dec 0,#3c57db 36%,#932188 65%,#c76aa0 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#529dec',endColorstr='#c76aa0',GradientType=1);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.defaultColor{

  background: #FFFFFF !important;

}

.jitter{

  text-shadow: rgb(63, 243, 229) 2px 1px 2px, rgb(244, 65, 121) -2px 1px 2px;

}

.projection{

  text-shadow: 2px 1px 0 #ffd200;

}

.power{

  color: #ffd200;

  -webkit-text-stroke: 1px #000;

    text-shadow: 2px 3px 7px #000;

}

.wave{

  background-image: linear-gradient(180deg,#fe235d 0,#ffc766 100%);

    background-image: -ms-linear-gradient(180deg,#fe235d 0,#ffc766 100%);

    background-image: -moz-linear-gradient(180deg,#fe235d 0,#ffc766 100%);

    background-image: -o-linear-gradient(180deg,#fe235d 0,#ffc766 100%);

    background-image: -webkit-linear-gradient(-90deg,#fe235d 0,#ffc766 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe235d',endColorstr='#ffc766',GradientType=0);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}
/* 原字体加载 */
/* @font-face {
  font-family: '三极正极黑';
  src: url('fontfamily/SJzhengjihei-Regular.ttf');
}


@font-face {
  font-family: '三极义黑';
  src: url('fontfamily/SJyihei-Regular.ttf');
}
@font-face {
  font-family: '三极极黑';
  src: url('fontfamily/SJjihei-Regular.ttf');
}
@font-face {
  font-family: '三极智量黑';
  src: url('fontfamily/SJzhilianghei-Regular.ttf');
}
@font-face {
  font-family: '三极信黑';
  src: url('fontfamily/SJxinhei-Regular.ttf');
}
@font-face {
  font-family: '三极粗极黑';
  src: url('fontfamily/SJcujihei-Regular-.ttf');
}
@font-face {
  font-family: '三极纵黑';
  src: url('fontfamily/SJzonghei-Regular.ttf');
}
@font-face {
  font-family: '三极柔宋';
  src: url('fontfamily/SJrousong-Regular.ttf');
}
@font-face {
  font-family: '三极拙楷';
  src: url('fontfamily/SJzhuokai-Regular.ttf');
}
@font-face {
  font-family: '三极古圆简体';
  src: url('fontfamily/SJguyuan-Regular.ttf');
}
@font-face {
  font-family: '三极宜修简体';
  src: url('fontfamily/SJyixiu-Regular.ttf');
}
@font-face {
  font-family: '三极粗圆简体';
  src: url('fontfamily/SJcuyuan-Regular.ttf');
}
@font-face {
  font-family: '三极萌娃简体';
  src: url('fontfamily/SJmengwa-Regular.ttf');
}
@font-face {
  font-family: '三极真喵简体';
  src: url('fontfamily/SJzhenmiao-Regular.ttf');
}
@font-face {
  font-family: '三极花信体';
  src: url('fontfamily/SJhuaxin-Regular.ttf');
}
@font-face {
  font-family: '三极柴园简体';
  src: url('fontfamily/SJChaiyuan-Regular.ttf');
}
@font-face {
  font-family: '三极韵黑简体';
  src: url('fontfamily/SJyunhei-Regular.ttf');
}
@font-face {
  font-family: '三极雅致黑简体';
  src: url('fontfamily/SJyazhihei-Regular.ttf');
}
@font-face {
  font-family: '三极竹枝简体';
  src: url('fontfamily/SJzhuzhi-Regular.ttf');
}
@font-face {
  font-family: '三极细柳简体';
  src: url('fontfamily/SJxiliu-Regular.ttf');
}
@font-face {
  font-family: '三极傻黑简体';
  src: url('fontfamily/SJshahei-Regular.ttf');
}
@font-face {
  font-family: '三极能量黑简体';
  src: url('fontfamily/SJnenglianghei-Regular.ttf');
}
@font-face {
  font-family: '三极毛哥楷书';
  src: url('fontfamily/SJmaogekaishu-Regular.ttf');
}
@font-face {
  font-family: '三极行书简体';
  src: url('fontfamily/SJxingshu-Regular.ttf');
}
@font-face {
  font-family: '三极粗柔宋简体';
  src: url('fontfamily/SJcurousong-Regular.ttf');
}
@font-face {
  font-family: '三极隶书简体';
  src: url('fontfamily/SJLishu-Regular.ttf');
}
@font-face {
  font-family: '三极直峰无锋';
  src: url('fontfamily/SJzhifengwufeng-Regular.ttf');
}
@font-face {
  font-family: '三极楚凡行楷';
  src: url('fontfamily/SJchufanxingkai-Regular.ttf');
}
@font-face {
  font-family: '三极崇德行楷';
  src: url('fontfamily/SJchongdexingkai-Regular.ttf');
}
@font-face {
  font-family: '三极执子之手';
  src: url('fontfamily/SJzhizizhishou-Regular.ttf');
} */