.head-search{
  margin: 40px auto;
}

.main-box {
  position: relative;
  background: #FCFCFC;
  min-height: 600px;
  padding-left: 400px;
  border-top: 1px solid #EAEAEA;
}
.main-box>.left {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 400px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow:2px 0px 4px -2px rgba(0,0,0,0.1);
  z-index: 100;
  overflow: auto;
  padding: 0 20px;
}
.main-box>.fixed.left{
  position: fixed;
  left: 0 ;
  top: 0;
}
.list-right {
  width: 1260px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 30px;
}

.group .content {
  display: none;
}

.group .item .head {
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #9B9B9B;
	cursor: pointer;
	position: relative;
}

.main-box>.left .btn-top {
  text-align: center;
  margin: 32px 0 16px;
}
.main-box>.left .btn{
  width: 96px;
  height: 32px;
  margin: 0 16px;
  border: 1px solid #D6D6D6;
  border-radius: 16px;
  line-height: 32px;
  padding: 0;
}
.main-box .btn-fold{
  width: 40px;
  height: 132px;
  border: 1px solid #D6D6D6;
  border-radius: 20px;
  position: absolute;
  left: 20px;
  top: 30px;
  padding: 20px 12px;
  line-height: 18px;
  white-space: normal;
  display: none;
}
.main-box .btn-fold.fixed{
  position: fixed;
}

.main-box>.left .btn-top a:hover{
  border: 1px solid #F13A39;
  color: #F13A39;
}
.main-box>.left .btn-top a:active{
  border: 1px solid #F13A39;
  background: #F13A39;
  color: #fff;
}
.main-box>.left .btn-top .empty{
  color: #D6D6D6 !important;
  cursor: not-allowed;
}

.left>.info {
  font-weight: 600;
  font-size: 12px;
  line-height: 40px;
  border-bottom: 1px solid #EAEAEA;
}

.group .item {
  border-bottom: 1px solid #EAEAEA;
}
.group .item input {
  display: none;
}
.group .item label img {
  height: 26px;
}
.group .item label span {
  cursor: pointer;
  color: #9B9B9B;
	font-weight: normal;
}
.group .item label span:hover {
  color: #333;
}
.group .item label input:checked~span {
  background: #F13A39;
  color: #fff;
}
.group input[type=checkbox]~span:before{
  display: none;
}

.group .type{
	padding: 0 0 24px;
}
.group .type label {
  font-size: 14px;
  width: calc(100% / 3);
  margin: 0 auto;
}
.group .type label span{
  border-bottom: 1px solid #D6D6D6;
  border-right: 1px solid #D6D6D6;
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  position: relative;
  display: inline-block;
}
.group .type label:nth-child(8) span,
.group .type label:nth-child(9) span,
.group .type label:nth-child(7) span {
  border-bottom: none;
}
.group .type label:nth-child(3) span,
.group .type label:nth-child(6) span,
.group .type label:nth-child(9) span {
  border-right: none;
}

.group label .-active,
.group label .-checked,
.group label .-hover{
  display: none;
}

.group label:hover img,
.group input:checked~span img,
.group .otherchar-box.active label img,
.group label:hover input:checked~span .-hover,
.group label:hover input:checked~span .-active,
.group .otherchar-box.active label input:checked~span .-active,
.group .otherchar-box.active label:hover input:checked~span .-hover,
.group .otherchar-box.active label:hover .-active,
.group .otherchar-box.active label:hover .-checked{
  display: none;
}
.group label:hover .-hover,
.group input:checked~span .-checked,
.group .otherchar-box.active label .-active,
.group .otherchar-box.active label:hover input:checked~span .-checked,
.group .otherchar-box.active label:hover .-hover{
  display: inline-block;
}

.special-type label {
  font-size: 14px;
  color: #9B9B9B;
  width: calc(100% / 3);
  border: 1px solid #ccc;
  margin: 0 auto;
}
.special-type label span {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  position: relative;
  display: inline-block;
}

.group .normal label {
  color: #9B9B9B;
  width: 108px;
  margin: 0 auto;
  margin-right: 10px;
	margin-bottom: 15px;
}
.group .normal label span:hover {
  border-color: #333;
}
.group .normal label span {
  width: 100%;
  text-align: center;
  line-height: 22px;
  position: relative;
  display: inline-block;
  border-radius: 12px;
  border: 1px solid #9B9B9B;
}
.group .normal label input:checked~span {
  border-color: #F13A39;
}

.group label#tag-173 {
  display: none;
}


.otherchar {
	padding: 0 0 24px;
  font-size: 0;
  overflow: hidden;
}
.otherchar-l {
  float: left;
}
.otherchar-r {
  float: right;
}
.otherchar-all label{
	position: relative;
}
.otherchar-all label:after{	
	content: ' ';
	display: block;
}
.otherchar-box{	
	border-radius: 4px;
  border: 1px solid #9B9B9B;
}
.otherchar-box.active{	
  border-color: #F13A39;
}
.otherchar-box.active label span,
.otherchar-box.active~.notice{	
  color: #F13A39;
}
.otherchar-box label {
  width: calc((100%) / 2);
  height: 50px;
  font-size: 16px;
  color: #9B9B9B;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.otherchar-box label i {
  position: absolute;
  right: -1px;
  top: 0px;
}
.otherchar label span {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 48px;
  position: relative;
  display: inline-block;
}
.group .item .otherchar-box label img {
  height: 20px;
}

.otherchar-box label span:after{
	content: ' ';
	position: absolute;
	right: -1px;
	z-index: 1;
	top: 17px;
	display: block;
	height: 16px;
	width: 1px;
	background: #EAEAEA;
}
.otherchar-box label:last-child span:after{
	display: none;
}
.otherchar-box.active label span:after{
	background: #F13A39;
}
.otherchar-box.active label input:checked~span:after{
	background: #fff;
}

.otherchar-row-1 {
  overflow: hidden;
}
.otherchar-l {
  float: left;
  width: 45%;
}
.otherchar-r {
  float: right;
  width: 45%;
}
.otherchar .notice {
  font-size: 12px;
  text-align: center;
	margin-top: 8px;
	color: #9B9B9B;
}
.otherchar .notice img{
  width: 14px;
  margin-left: 6px;
  position: relative;
  top: -1px;
}
.otherchar .notice .active,
.otherchar .active~.notice img{
  display: none;
}
.otherchar .active~.notice .active{
  display: inline-block;
}


.font-toolbar {
  height: 24px;
  margin: 5px 0 25px;
}

.preview-box {
  float: left;
}

.font-order-select {
	float: right;
	width: 112px;
	margin-right: -15px;
}
.font-order-select>a{
	font-weight: 600;
	padding: 0 15px;
}
.font-order-select>a i{
	margin-left: 10px;
}

.letters-input {
  border: none;
  border-bottom: 1px solid #ccc;
  float: left;
  width: 200px;
}

.letters-input input {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
	font-size: 12px;
	padding: 0 15px 5px 5px;
	line-height: 24px;
  color: #333;
  outline: none;
}
.letters-input input::placeholder {
  color: #3F3F3F;
}
.letters-input .caret {
	position: absolute;
	right: 5px;
	top: 8px;
}

.font-toolbar .dropdown li {
  line-height: 40px;
  padding-left: 10px;
  font-size: 12px;
  cursor: pointer;
}
.font-toolbar .open>.dropdown-menu {
  display: block;
}
.font-toolbar .dropdown-menu {
  border: none;
  padding: 4px 0;
  top: 22px;
  left: 0px;
  width: 100%;
  border-radius: 0;
	border: 1px solid #D6D6D6;
	box-shadow: none;
	min-width: 80px;
  z-index: 1000;
}
.font-toolbar .dropdown-menu li:hover {
  background: #F3F3F3;
}

.fontSize {
  float: left;
}
.size-adjust {
  width: 120px;
  height: 2px;
  position: relative;
  float: left;
  margin: 9px 0 0 20px;
  background:#E8E8E8;
}
.size-adjust i{
  background: #434343;
}
.size-adjust b {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid #333;
  background: #fff;
}
.fontSize {
  position: relative;
  margin-left: 50px;
  padding-right: 30px;
}
.smallSize {
  position: absolute;
  left: 0px;
  top: 0px;
}
.bigSize {
  position: absolute;
  right: 0px;
  top: 0px;
}


.panel-font-rows {
  width: 100%;
}
.font-item .children{
  display: none;
  border-bottom: 1px solid #D6D6D6;
}
.with-children.active .font-family{
  border-bottom: 1px solid #D6D6D6;
}
.children .with-children:last-child .font-family,
.children>.font-inner:last-child .font-item .text{
  border: none;
}

.font-inner .font-head {
  color: #666666;
  font-size: 14px;
  margin-bottom: 24px;
  margin-top: 24px;
}

.with-children>.font-inner .font-head{
  display: none;
}
.with-children>.children>.font-inner .font-head{
  display: block;
}
.panel-font-rows>.with-children>.children>*{
  margin-left: 60px;
}
.with-children.active>.font-inner,
.children .with-children>.font-inner{
  display: none;
}


.font-item .font-op {
  float: right;
  cursor: pointer;
  position: relative;
}
.font-item .font-op a{
  margin-left: 25px;
}
.font-item .font-op a:hover {
  opacity: .7;
}
.font-item .font-op:hover .info{
	display: block;
}
.font-item .font-op img {
	height: 14px;
	position: relative;
	right: 5px;
	top: -1px;
}
.font-item .font-op .info {
	display: none;
  position: absolute;
  width: 258px;
  left: -195px;
  top: 25px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  padding: 14px 20px;
  color: #333;
  font-size: 14px;
  white-space: normal;
  text-align: left;
  line-height: 22px;
  background: #fff;
}
.font-item .urw{
  margin-left: 15px;
}
.font-item .story{
  margin-left: 15px;
  position: relative;
  top: -1px;
}
.font-item .text {
  color: #3F3F3F;
  font-size: 52px;
  padding-bottom: 24px;
  border-bottom: 1px solid #D6D6D6;
  position: relative;
  cursor: pointer;
}
.font-item .hover{
  display: none;
  margin-left: 15px;
  color: #D6D6D6;
  font-size: 14px;
}
.font-item .hover i{
  margin-left: 8px;
  font-style: normal;
}
.font-item .popover{
  max-width: 250px;
}

.font-hover .text{
  color: #F13A39;
}
.font-hover .hover{
  display: inline-block;
}
.font-hover .hover span{
  animation: font-hover .5s ease 1;
}
@keyframes font-hover{
  0% { margin-left: 8px;}
  50% { margin-left: 12px;}
  100% { margin-left: 8px;}
}

.font-family {
  color: #666666;
  overflow: hidden;
  margin: 24px 0 0;
  padding-bottom: 24px;
  cursor: pointer;
}

.otherchar-row-2 .otherchar-box label {
  width: calc((100%) / 5);
  height: 50px;
  font-size: 14px;
  color: #9B9B9B;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.otherchar-row-1,
.otherchar-row-2,
.otherchar-row-3 {
  margin-bottom: 16px;
}

.otherchar {
  display: none;
}


.empty-result{
  font-weight: 300;
  display: none;
}
.empty-result h5{
  font-size: 40px;
  font-weight: 300;
  margin: 80px 0 32px;
}
.empty-result p{
  font-size: 24px;
  margin: 0 0 24px;
  padding: 0 0 64px;
  border-bottom: 1px solid #D6D6D6;
}
.empty-result .btn{
  border-radius: 16px;
  margin: 0 16px;
  position: relative;
  top: -3px;
}
.empty-result small{
  color: #666666;
  font-size: 14px;
  margin: 0 0 10px;
}
.empty-result small b{
  color: #F13A39;
}
.empty-result small a{
  display: block;
  padding: 6px 0;
}


.box-album{
  background: #333;
  padding: 48px 0 0;
}
.box-album h4{
  font-size: 20px;
  color: #D6D6D6;
  margin: 0 0 24px;
}
.box-album .list{
  margin: 0 -22px;
}
.box-album .item-container{
  float: left;
  width: 33.33%;
  padding: 0 22px;
}
.box-album .item{
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.box-album .item:hover p{
  bottom: 0;
}
.box-album .item p{
  position: absolute;
  left: 0;
  bottom: -32px;
  width: 100%;
  transition: all ease .3s;
  line-height: 32px;
  background: rgba(0,0,0,.5);
  margin: 0;
  color: #fff;
  padding: 0 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.box-album .item img{
  width: 100%;
}
.box-album .more{
  text-align: right;
}
.box-album a{
  margin-top: 10px;
  color: #D6D6D6;
  font-size: 16px;
  border-bottom: 1px solid #D6D6D6;
}



#modal-article .modal-dialog{
  margin-top: -2px !important;
  width: 666px;
}
#modal-article .modal-content {
  padding: 40px 44px;
  border-radius: 0;
}
#modal-article img {
  min-width: 100%;
}
#modal-article h4 {
  color: #353535;
  font-size: 32px;
  text-align: center;
  padding: 0 0 40px;
  border-bottom: 1px solid #D6D6D6;
  margin: 0 0 48px;
}


.footer{
  background: #333;
  padding: 1px 0 0;
  color: #9B9B9B;
}
.footer_links_group_title{
  color: #D6D6D6;
}
.foonter_bottom_container a,
.footer_links_items>ul li a{
  color: #9B9B9B;
}
.footer-icon,
.footer-icon:hover,
.foot_btn{
  color: #D6D6D6;
  border-color: #D6D6D6;
}

@media(max-width: 1368px) {
  .left.fold~.list-right{
    padding-left: 80px;
  }
}

@media(max-width: 768px) {
  .head-search{
    font-size: 20px;
    margin: 32px auto;
  }

  .main-box{
    padding: 0;
    border-top: none;
    background: #fff;
  }
  .main-box>.left{
    position: static;
    width: 100%;
    padding: 0;
    height: auto;
    box-shadow: none;
  }
  .main-box .group{
    display: none;
    padding: 0;
  }
  .main-box .btn-fold{
    position: static;
    display: inline-block;
  }
  .main-box .btn-hide{
    display: none;
  }

  .main-box>.left .btn-top {
    text-align: center;
    margin: 0 0 16px;
  }
  .group .item{
    padding: 0 15px;
    border-top: 1px solid #EAEAEA;
    border-bottom: none;
  }
  .group .type{
    border-top: 1px solid #EAEAEA;
    padding: 0;
  }
  .group .normal{
    margin-right: -15px;
  }
  .group .normal label {
    width: calc(33% - 10px);
  }
  .group .type label span{
    border-color: rgba(214, 214, 214, .4);
  }


  .list-right{
    padding: 20px 15px 0;
    border-top: 1px solid #d6d6d6;
  }
  .font-inner .font-head{
    margin: 16px 0 8px;
    font-size: 12px;
  }
  .font-item .font-op{
    font-size: 12px;
  }
  .font-item .text{
    font-size: 36px;
    padding-bottom: 12px;
  }
  .panel-font-rows>.with-children>.children>*{
    margin-left: 0;
  }

  .footer,
  .foonter_bottom_container a{
    background: #fff;
    color: #333;
  }
  
  .box-album,
  .left>.info,
  .font-toolbar .fontSize{
    display: none;
  }
}