.sub_top{background-image: url("/www-img/sub/top_bg/bna_title_img-1.jpg");height: 175px;}
.sub_top_txt p{color: #2e2d2d;}
.sub_top_txt h1{color: #2e2d2d;}
.onload{opacity:0;}
.contents_on{opacity:1;}



#paging{text-align: center;margin-top: 20px;}
#paging span{cursor: pointer;border: 1px solid #ddd;padding: 0 5px;margin: 0 2px;}
#paging span:hover{opacity:0.5}
#paging .selected{font-weight: bold;border-color: #000;}

#cat_sub_list_div,
.cat_div li a:HOVER{opacity:1;}
.cat_div li:HOVER{background: #d1d2d9;}
.cat_div .on:HOVER{background: #313139;}
.cat_div{margin-bottom: 46px;}
.cat_div li{width: 25%;height: 80px;}
.cat_div li .div1{width: 45px;height: 16px;margin: 0 auto;background: #f44a3d;color: #fff;font-size: 12px;font-weight: bold;line-height: 16px;border-radius:10px;opacity:0;}
.cat_div li .new{opacity:1;}
.cat_div li .div2{font-size: 20px;font-weight: bold;margin: 3px auto;}
.cat_div li .div3{font-size: 12px;}

.cat_div2 > ul > li{width: 20%;height: 54px;background: #fff;border: 1px solid #ebebeb;border-left: none;cursor: pointer;padding: 5px;}
.cat_div2 > ul > li:HOVER{background:#f0f2f4; }
.cat_div2 > ul > .on:hover{background: #5f6772;}
.cat_div2 > ul > li p{display: table;width: 100%;height: 100%;font-size: 15px;color: #343434;line-height: normal;}
.cat_div2 > ul > .on p{color: #fff;}
.cat_div2 > ul > li p span{display: table-cell;vertical-align: middle;text-align: center;}
.cat_div2 > ul > .li0{border-left: 1px solid #ebebeb;}
.cat_div2 > ul > .on{background:#5f6772;border-color: #5f6772;color: #fff; }

.cat_div3{margin-top: 20px;}
.cat_div3 > ul{height: 82px;}
.cat_div3 > ul > li{display: none;height: 41px;margin-top: -1px;margin-left:-1px;position: relative;cursor: pointer;padding:0 27px 0 10px;
	width:12.5%;
	width: -webkit-calc(12.5% + 1px);
	width: -moz-calc(12.5%  + 1px );
	width: calc(12.5%  + 1px );
}
.cat_div3 > ul > li:HOVER{background:#f0f2f4; }
.cat_div3 > ul > .on:hover{background: #fff;}
.cat_div3 > ul > li p{display: table;width: 100%;height: 100%;font-size: 14px;color: #343434;line-height: normal;}
.cat_div3 > ul > li p span{display: table-cell;vertical-align: middle;text-align:left;}
.cat_div3 > ul > .view{background: #fff;border: 1px solid #ebebeb;display: block;
		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}
.cat_div3 > ul > .init_btn{display: block;}
.cat_div3 > ul > .init_btn span{background-position: -407px -113px;width: 16px;height: 16px;position: absolute;top: 50%;left: 10px;margin-top: -8px;}
/* .cat_div3 > ul > .li0{border-left: 1px solid #ebebeb;} */
.cat_div3 > ul > li > div{position: absolute;width: 12px;height: 12px;border: 1px solid #ebebeb;top: 50%;margin-top: -6px;right: 10px;}
.cat_div3 > ul > .on > div{background:#bec4cb; }


/******************body*********************/
#bna_ul_el{margin: 30px auto;}
#bna_ul_el img{max-width: 100%;}
#bna_ul_el > li{width: 49%;}
#bna_ul_el > li:nth-child(odd){margin-right: 2%;}
li .img_div img{cursor: pointer;}
.img_div img{display: none !important;float: left;}
.img_div > .on{display: block !important;
		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
    }
.img_div{margin: 0 auto;position: relative;}    
.img_div .img_btn_div{position: absolute;width: 100%;height: 24px;left: 0;bottom: -24px;text-align: center;}
.img_div .img_btn_div .in_div{display: inline-block;width: 44px;height: 24px;background-color: rgba(255,255,255,0.8);color: #191617;font-size: 12px;line-height: 24px;
cursor: pointer;}
.img_div .img_btn_div .on{color: #fff;background-color: rgba(95, 103, 114,0.8);cursor: text;}
.img_div .img_btn_div .after_txt{position: absolute;height: 100%;width: auto;right: 20px;top: 0;font-size: 13px;color: #555;}
.img_div .img_c1{width: 100%;}    
.img_div .img_c2{width: 50%;}
.img_div .cat3{width: 100%;}
#bna_ul_el > .cat3_li .tag_div,
#bna_ul_el > .cat3_li .img_div{max-width: 500px;}


.tag_div{height: 60px;margin: 33px auto 10px auto;overflow-y:auto;}


.tag_div p{display: inline-block;padding: 0 23px;height: 21px;line-height: 18px;font-size: 14px;color: #191617;border: 1px solid #bbbfc6;margin: 0 3px 5px 0;
border-radius:20px;}

#bna_full_view_div{display: none;z-index: 999999;position: fixed;width: 100%;top: 20%;height: auto;}
#bna_full_view_div > div{margin: 0 auto;background: #fff;padding: 20px 20px 5px 20px;position: relative;}
#bna_full_view_div > div .icon_bg{width: 26px;height: 25px;position: absolute;background-position: -6px -858px;top: -28px;right: 0;cursor: pointer;}

#bna_code_send{display: none;}

.juxtapose-cls-wrap{max-width: 500px;margin: 0 auto;position: relative;}
.jx-knightlab{display: none !important;}
/* .juxtapose-cls{display: none;} */
.overlap-btn{width: 200px;display: inline-block;height: 25px;background-color: #000;color: #fff;border-radius: 0 0 10px 10px;cursor: pointer;font-size: 14px;vertical-align: top;
	line-height: 25px;font-weight: bold;}
.split-btn{display: none;position: absolute; bottom: -25px; width: 200px; left: 50%;font-weight: bold;line-height: 25px;
    margin-left: -100px; text-align: center;height: 25px;background-color: #ff68bb;color: #fff;border-radius: 0 0 10px 10px;cursor: pointer;font-size: 14px;}
#bna_full_view_div .overlap-btn{display: none;}

.cat_div{display: none;}

@media only screen and (max-width: 1199px) {
	.center_div{padding: 20px;}
}


@media only screen and (max-width: 1023px) {
	::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: #a9a9a9; }
	.cat_div3 > ul > li p{font-size: 11px;}
	.cat_div2 > ul > li p{font-size: 14px;}
	
	.cat_div3 > ul > li{
/* 	display: none;height: 41px;margin-top: -1px;margin-left:-1px;position: relative;cursor: pointer;padding:0 27px 0 10px; */
	width:20%;
	width: -webkit-calc(20% + 1px);
	width: -moz-calc(20%  + 1px );
	width: calc(20%  + 1px );
	}
	
	#bna_full_view_div{top: 25%;}
	
}

@media only screen and (max-width: 640px) {
	
	.sub_top{background-position: 57% 0;}
	.cat_div3 > ul > li{
	width:33.333%;
	width: -webkit-calc(33.333% + 1px);
	width: -moz-calc(33.333%  + 1px );
	width: calc(33.333%  + 1px );
	}
	
	#bna_ul_el > li:nth-child(odd){margin-right: 0;}
	#bna_ul_el > li{width: 100%;}
	
	.cat_div2 > ul > li p{font-size: 13px;}
	.cat_div li .div2{font-size: 14px;}
	.cat_div li .div3{font-size: 10px;}
	.cat_div li .div1{width: 30px;height: 14px;font-size: 10px;line-height: 14px;}
	.cat_div3 > ul{height: auto;}
	
	#bna_full_view_div > div{padding: 10px 10px 2px 10px;}
}