@charset "utf-8";
/* CSS Document */

/* category */
.category {
	position: relative;
}
.cat_head {
    font-size: 13px;
	margin-top: 20px !important;
    margin-bottom: 10px !important;
    display: block;
	font-weight: bold;
	color: #9197A3;
}
.category {
	overflow: hidden;
}
.category li {
    vertical-align: top;
    /* margin-top: -1px; */
    width: 33.33%;
    float: left;
}
.category li:first-child {
	margin-top: 0;
}
.category > li >  a {
    display: block;
    padding: 10px;
    padding-bottom: 6px;
    position: relative;
    overflow: hidden;
    font-weight: normal;
    color: #555;
    /* border: solid 1px #EBEBEB; */
    font-size: 13px;
    line-height: 1.4;
    margin-top: 5;
    overflow: hidden;
}
.category > li >  a.btn_post {
	color: #ff8900;
}



.category span.icon_cat {
	font-size: 24px;
	margin-right: 8px;
	color: #0093DE;
	display: inline-block;
	float: left;
}

.open-closed-icons {
position: absolute;
top: 8px;
right: 10px;

}
.open-closed-icons span {
	font-size: 10px;
	color: #D5D5D5;
	vertical-align: top;
	line-height: 4;
}
.category > li >  a:hover .open-closed-icons span ,
.category > li >  a:active .open-closed-icons span ,
.category > li >  a:focus .open-closed-icons span{
	color: #c0ced5;
}


.sub-cate {
	background-color: #eff9fe;
	padding: 0px;
	border-left: 1px solid #EBEBEB;
	border-right: 1px solid #EBEBEB;
	text-align: left;
}
.category li a {
	text-align: center;
}
.category li a .detail {
    margin-top: 5px;
	display: flex;
	align-items: center;
	height: 36px;
}
.category li a .title {
	font-weight: bold;
    overflow: hidden;
    color: #555;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	display: block;
	width: 100%;
	max-height: 36px;
}

.sub-cate li a,
.sub-cate > a  {
	font-size: 16px;
	color: #424242;
	padding: 12px 20px;
	border-bottom:  1px solid #dfeaf0;
	padding-left: 64px;
}

.sub-cate > a {
	color: #0093DE;
	font-weight: bold;
}
.all_in_cat { color: #FF8900 !important; }
.open-closed-icons .icon-up, .active .icon-down { display: none; }
.active .icon-up { display: block !important; }
.category li > a img.icon_cat {
	width: 48px;
	height: 48px;
	display: inline-block;
}
.category li > a span.icon_cat {
	background-color:  #EB6767;
	color: #fff;
	padding: 8px;
	border-radius: 50%;
}
.category li+li > a span.icon_cat {
	background-color:  #EB9C67;
}
.category li+li+li > a span.icon_cat {
	background-color:  #C58FDB;
}
.category li+li+li+li > a span.icon_cat {
	background-color:  #6AA1A8;
}
.category li+li+li+li+li > a span.icon_cat {
	background-color:  #578CBE;
}
.category li+li+li+li+li+li > a span.icon_cat {
	background-color:  #D57B7B;
}
.category li+li+li+li+li+li+li > a span.icon_cat {
	background-color:  #7EA86A;
}
.category li+li+li+li+li+li+li+li > a span.icon_cat {
	background-color:  #C594C1;
}
.category li+li+li+li+li+li+li+li+li > a span.icon_cat {
	background-color:  #67CAEB;
}
.category li+li+li+li+li+li+li+li+li+li > a span.icon_cat {
	background-color:  #BCAC8D;
}
	
.category > li >  a:active ,
.category > li >  a:hover,
.category .active {
	border-color:rgb(217, 237, 248) !important;
	z-index: 9;
	background-color: rgb(217, 237, 248);
}
.sub-cate li a:hover {
	background-color: #e2f4fd;
	color: #000;
}

/* popuar category */
#icon_cat { text-align: center; padding-bottom: 5px; }
#icon_cat li a { border: none !important; padding-left: 5px !important; padding-right: 5px !important;  }
#icon_cat li .title { margin-top: 5px; line-height: 150%;  }
#icon_cat li a:hover, #icon_cat li a:active { background-color: #fff;     color: #006190; }
#icon_cat li {
	background-color: #fff;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	border-width: 1px; 
	border: solid 1px #EEEEEE;
	margin-top: 5px;
	overflow: hidden;
}
#icon_cat li .icon span {
	color: #FFF;
	background-image: url("../../img/category.png");
	width: 48px;
	height: 48px;
	display: inline-block;
}
#icon_cat li:nth-child(2) .icon span {
	background-position: -48px 0px;
}
#icon_cat li:nth-child(3) .icon span {
	background-position: -96px 0px;
}
#icon_cat li:nth-child(4) .icon span {
	background-position: -144px 0px;
}
#icon_cat li:nth-child(5) .icon span {
	background-position: -192px 0px;
}
#icon_cat li:nth-child(6) .icon span {
	background-position: -240px 0px;
}
#icon_cat li:nth-child(7) .icon span {
		background-position: -0px -48px;
}
#icon_cat li:nth-child(8) .icon span {
	background-position: -48px -48px;
}
#icon_cat li:nth-child(9) .icon span {
	background-position: -96px -48px;
}
#icon_cat li:nth-child(10) .icon span {
	background-position: -144px -48px;
}
#icon_cat li:nth-child(11) .icon span{
	background-position: -192px -48px;
}
#icon_cat li:nth-child(12) .icon span {
	background-position: -240px -48px;
}
#icon_cat li:nth-child(13) .icon span {
	background-position: 0px -96px;
}
#icon_cat li:nth-child(14) .icon span {
	background-position: -48px -96px;
}
#icon_cat li:nth-child(15) .icon span {
	background-position: -96px -96px;
}
#icon_cat li:nth-child(16) .icon span {
	background-position: -144px -96px;
}
#icon_cat li:nth-child(17) .icon span {
	background-position: -192px -96px;
}
#icon_cat li:nth-child(18) .icon span {
	background-position: -240px -96px;
}
#icon_cat li:hover .icon span ,#icon_cat li:active .icon span, #icon_cat li:focus .icon span   {
    -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
    animation: myfirst 1s;
	}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   { margin-left: 0px; }
    50% { margin-left: 15px; }
	100%   { margin-left: 0px; }
}

/* Standard syntax */
@keyframes myfirst {
    0%   { margin-left: 0px; }
    50% { margin-left: 15px; }
	100%   { margin-left: 0px; }
} 

@media screen and  (min-width: 769px) {
	#icon_cat li {width: 16.1%; height: 116px;  }
		#icon_cat li a { font-size: 13px; }
}
@media screen and (max-width: 768px) {
	#icon_cat li {width: 15.9%; min-height: 115px; }
	#icon_cat li a { font-size: 12px; }

/*		
#icon_cat li .icon span {
	width: 32px;
	height: 32px;
}
#icon_cat li:nth-child(1) .icon span {
	background-position: 0px -144px;
}
#icon_cat li:nth-child(2) .icon span {
	background-position: -32px -144px;
}
#icon_cat li:nth-child(3) .icon span {
	background-position: -64px -144px;
}
#icon_cat li:nth-child(4) .icon span {
	background-position: -96px  -144px;
}
#icon_cat li:nth-child(5) .icon span {
	background-position: -128px  -144px;
}
#icon_cat li:nth-child(6) .icon span {
	background-position: -160px  -144px;
}

#icon_cat li:nth-child(7) .icon span {
		background-position: -0px -176px;
}
#icon_cat li:nth-child(8) .icon span {
	background-position: -32px -176px;
}
#icon_cat li:nth-child(9) .icon span {
	background-position: -64px -176px;
}
#icon_cat li:nth-child(10) .icon span {
	background-position: -96px -176px;
}
#icon_cat li:nth-child(11) .icon span{
	background-position: -128px -176px;
}
#icon_cat li:nth-child(12) .icon span {
	background-position: -160px -176px;
}

#icon_cat li:nth-child(13) .icon span {
	background-position: 0px -209px;
}
#icon_cat li:nth-child(14) .icon span {
	background-position: -32px -209px;
}
#icon_cat li:nth-child(15) .icon span {
	background-position: -64px -209px;
}
#icon_cat li:nth-child(16) .icon span {
	background-position: -96px -209px;
}
#icon_cat li:nth-child(17) .icon span {
	background-position: -128px -209px;
}
#icon_cat li:nth-child(18) .icon span {
	background-position: -160px -209px;
}
*/

}
@media screen and (max-width: 640px) {

	#icon_cat li a { font-size: 11px; }
}
@media screen and (max-width: 480px) {
	#icon_cat li { width: 32.5%;   }
	#icon_cat li a { font-size: 12px; }
}
@media screen and (max-width: 360px) {
	#icon_cat li { width: 32%;   }
		#icon_cat li a { font-size: 11px; }
}
@media screen and (max-width: 230px) {
	#icon_cat li { width: 48%;  }
	#icon_cat li a { font-size: 11px; }
}
@media screen and (min-width: 375px) {
.category > li >  a {
	font-size: 14px;
}
.category li > a img.icon_cat {
	width: 64px;
	height: 64px;
}
.category li a .detail {
	height: 36px;
	margin-top: 8px;
}
.category li a .title {
	max-height: 38px;
}
}
@media screen and (min-width: 480px) {
.category > li {
	width: 25%;
}
}
@media screen and (min-width: 720px) {
.category > li {
	width: 20%;
}
}