* {
  padding: 0;
  margin: 0;
}

:root {
  --main_color: #ff99cc;
}

body {
  display: none;
  font-size: 11pt;
  background: #f2f2f2;
  color: #666;
}

.skineditor{
	font-weight:bold
}

.main {
  padding: 10pt;
  padding-top: 0;
   
}

#searchwd{
	border: #f2f2f2 1px solid;
    border-radius: 13pt;
	height:26pt;
	line-height:26pt;
	width:100%;
	padding-left:10pt;
	
}

#searchbutton{
	position:absolute;
	right:10pt;
	border: #f2f2f2 1px solid;
	height:26pt;
	line-height:26pt;
	background-color: var(--main_color);
	width:50pt;
	color:#fff;
	border-radius: 13pt;
}

.searchbox{
	margin-top:10pt
}


.hotsearch{
  margin-top: 10pt;
}

.hotsearch a{
  margin-right: 5pt;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #ff99cc;
}

.title {
  font-size: 10pt;
  height:min-content;
}

.title .index {
  font-size: 13pt;
  color: #fff;
  background: #ff99cc;
}

.title ul {
  height: 30pt;
}

.title li {
  float: left;
  background: #fff;
  padding: 5pt;
  border-radius: 10pt;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


#list {
  margin-top: 10pt;
}

.list {
  /* list-style: decimal inside; */
  width: 100%;
}

.listtitle {
  line-height: 25pt;
  margin-left: -10pt;
  margin-right: -10pt;
  border-radius: 10pt;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 10pt;
  font-size: 11pt;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 20%, #f2f2f2 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffffff 20%, #f2f2f2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffffff 20%, #f2f2f2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
  /* IE6-9 */


}

.list li {
  font-size: 12pt;
  padding: 10pt 10pt 10pt 10pt;
  background: #fff;
  margin-bottom: 10pt;
  border-radius: 10pt;
  line-height: 20pt;
}

.list li .btn {
  font-size: 11pt;
  line-height: 20pt;
  color: #fff;
  text-decoration: none;
  background: #ff99cc;
  border-radius: 10pt;
  padding-left: 10pt;
  padding-right: 10pt;
  float: right;
  margin-left: 5pt;

}

.list li .try {
  background:  #66CC99;
}

.sound:hover {
  animation: scalesound 0.3s linear;
}

.sound:visited {
  transform: scale(1)
}

@-webkit-keyframes scalesound {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-o-keyframes scalesound {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-moz-keyframes scalesound {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scalesound {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.predownloaded {
  background-color: #FFCCCC !important;
  font-size: 9pt !important;
}


.downloaded {
  background-color: #FFCCCC !important;
  animation: loading 0.5s linear;
  font-size: 9pt !important;
}



@keyframes loading {
  from {
    background-color: #ff99cc;

  }

  to {
    background-color: #FFCCCC;
  }
}

.list .name {
  display: inline-flex;
  width: 49%;
  overflow: auto;
  max-height: 20pt;
}

audio {
  display: block;
  margin-top: 15pt;
}

audio:focus {
  outline: none;
}

.fengexian {
  width: 100%;
  height: 10pt;
}

.footer {
  text-align: center;
  font-size: 10pt;
}

.version {
  font-size: 9pt;
  color: #ccc;
}

.footer a {
  font-size: 12pt;
}

.downloadIME {
  color: #fff;
  text-decoration: none;
  background: #ff99cc;
  border-radius: 20pt;
  padding-left: 15pt;
  padding-right: 15pt;
  padding-top: 5pt;
  padding-bottom: 5pt;
}



.tgBtn {
  height: 12px;
  border: 1px solid #dcdfe6;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  line-height: 12px;
}

.tgAlertDiv {
  z-index: 9999999;
  left: 50%;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  padding: 12px 20px;
}

.tgtool {
  -webkit-touch-callout: none;
  /* iOS Safari 
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -300px, 0);
  }

  50% {
    transform: translate3d(0, -300px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes remove {
  from {
    top: 0px;
  }

  to {
    top: -2000px;
  }
}

.remove {
  animation: remove 4s;
  animation-fill-mode: forwards;
}

@keyframes removeTop {
  from {
    top: 0px;
  }

  to {
    top: -50px;
  }
}

.removeTop {
  animation: removeTop 1s;
  animation-fill-mode: forwards;
}


.tanchuang {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  overflow: scroll;
  padding:50% 20pt;
  box-sizing: border-box;
  font-size: 15pt;
  color: #fff;
  
}

.tanchuang img {
  width: 90%;
  margin-top: 1pt;
  border-radius: 10pt;
}

.tanchuang .close {
  font-size: 12pt;
  width: 50pt;
  height: 50pt;
  line-height: 50pt;
  border-radius: 50pt;
  background: #ff99cc;
  color: #fff;
  position: fixed;
  right: 10pt;
  bottom: 10%;
  z-index: 9999;
}

#ds p {
  font-size: 9pt;
  color: #ccc;
}

#ds  .gengduo {
  display: none;
}

.wxdashang {
  width: 120px;
  border-radius: 50%;
  opacity: 0.8;
  animation: wxdaani .5s ease-in-out 2s 2;
  /* Firefox: */
  -moz-animation: wxdaani .5s ease-in-out 2s 2;
  /* Safari and Chrome: */
  -webkit-animation: wxdaani .5s ease-in-out 2s 2;
  /* Opera: */
  -o-animation: wxdaani .5s ease-in-out 2s 2;
}

@keyframes wxdaani {
  0% {}

  25% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -moz-transform: rotate(10deg);
    /* Firefox */
    -webkit-transform: rotate(10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(10deg);
    /* Opera */
  }

  75% {
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
  }

  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -webkit-transform: rotate(0deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(0deg);
    /* Opera */
  }
}

@-moz-keyframes wxdaani {
  0% {}

  25% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -moz-transform: rotate(10deg);
    /* Firefox */
    -webkit-transform: rotate(10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(10deg);
    /* Opera */
  }

  75% {
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
  }

  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -webkit-transform: rotate(0deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(0deg);
    /* Opera */
  }
}

@-webkit-keyframes wxdaani {
  0% {}

  25% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -moz-transform: rotate(10deg);
    /* Firefox */
    -webkit-transform: rotate(10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(10deg);
    /* Opera */
  }

  75% {
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
  }

  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -webkit-transform: rotate(0deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(0deg);
    /* Opera */
  }
}

@-o-keyframes wxdaani {
  0% {}

  25% {
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    /* IE 9 */
    -moz-transform: rotate(10deg);
    /* Firefox */
    -webkit-transform: rotate(10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(10deg);
    /* Opera */
  }

  75% {
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
  }

  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -moz-transform: rotate(0deg);
    /* Firefox */
    -webkit-transform: rotate(0deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(0deg);
    /* Opera */
  }
}





#index .title {
  font-size: 12pt;
  
   
}

#index .title .index {
  font-size: 13pt;
  color: #fff;
  background: #ff99cc;
}

#index .title ul {
 
  width:100%;
  display:flex;
  flex-wrap:wrap;
 height:25%;
 align-items:center
    
}

#index .title li {
	flex:  1 1 auto;
 flex-basis: 1;	
text-align:center;	
  width:40%; 
  float:left;
  background: #fff;
  padding: 10pt;
  border-radius: 10pt; 
  margin:2pt;
  box-sizing: border-box;
   
  
}