@charset "UTF-8";
.topinfo{
	height:30px;
	line-height:30px;
	background:#36b1cf;
	overflow:hidden;
}
.topinfo a{color:#fff;}

.marquee {
width:100%;
    text-align:center;
    display:inline-block;
    white-space:nowrap;

    -moz-animation-duration: 20s;
    -moz-animation-name: marquee;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -webkit-animation-duration: 20s;
    -webkit-animation-name: marquee;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -ms-animation-duration: 20s;
    -ms-animation-name: marquee;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    -o-animation-duration: 20s;
    -o-animation-name: marquee;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@-webkit-keyframes marquee {
    from {margin-left: 100%; width: 100%; }
    to { margin-left: -100%; width: 100%; }
}
@-moz-keyframes marquee {
    from {margin-left: 100%; width: 100%; }
    to { margin-left: -100%; width: 100%; }
}
@-ms-keyframes marquee {
    from {margin-left: 100%; width: 100%; }
    to { margin-left: -100%; width: 100%; }
}
@-o-keyframes marquee {
    from {margin-left: 100%; width: 100%; }
    to { margin-left: -100%; width: 100%; }
}
/*------ newpro2 ---------*/
.prodacts2{
	background:#27335b url(../event/gbf/img/bg_body2.jpg) no-repeat center top;
	padding:30px 25px;
}
.prodacts2 ul{
	position:relative;
	margin-bottom:80px;
}
.prodacts2 li{
	background:#fff;
	padding-bottom:50px;
	margin:0 5px 10px;
	width:180px;
	float:left;
	position:relative;
}
.prodacts2 li .icon{
	position:absolute;
	top:-2px;
	right:-2px;
	z-index:4;
}
.prodacts2 li.non_bg{
	background:none;
	padding-bottom:0;
	text-align:center;
}
.prodacts2 li.non_bg a{
	width:80%;
}
.prodacts2 li.non_bg a img{
	width:100%;
}
.prodacts2 li:first-child{
	width:560px;
}
.prodacts2 li:nth-child(6), .prodacts2 li:nth-child(20), .prodacts2 li:nth-child(35){
	width:370px;
}
.inner_pro2{
	padding:5px 5px 0;
}
.picarea{
	margin-bottom:10px;
}
.picarea figure {
	position: relative;
	overflow: hidden;
	width:100%;
}
.picarea figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
.picarea figcaption h2{
	position: absolute;
	left: -100%;
	width: 96%;
	-webkit-transition: .3s;
	transition: .3s;
	color:#fff;
	font-weight:normal;
}
.picarea figcaption h2 {
	top: 10px;
}
.picarea figure:hover figcaption {
	opacity: 1;
}
.picarea figure:hover figcaption h2{
	left: 10px;
}
.picarea figure:hover figcaption h2 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
.picarea img{
	width:100%;
}
.prodacts2 li h2{
	font-size:14px;
	font-weight:bold;
	margin-bottom:2px;
}
.prodacts2 li .picarea figcaption h2{
	font-weight:normal;
	font-size:12px;
}
.prodacts2 li p{
	margin-bottom:10px;
}
.prodacts2 li button{
	border:none;
	background:none;
	margin:0;
	padding:0;
	cursor:pointer;
}
.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: auto;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}
.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}
.hi-icon:before {
	font-family: 'ecoicon';
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}
/* Effect 8 */
.hi-icon {
	background: rgba(255,255,255,0.1);
	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
}

.hi-icon:after {
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}

.hi-icon:hover {
	background: rgba(255,255,255,0.05);
	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);
	-ms-transform: scale(0.93);
	transform: scale(0.93);
	color: #fff;
}

.hi-icon:hover:after {
	-webkit-animation: sonarEffect 1.3s ease-out 75ms;
	-moz-animation: sonarEffect 1.3s ease-out 75ms;
	animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}

/*------ slider ---------*/
.newarrival{
	margin:0 0 40px;
	padding:10px 0 20px;
	width:100%;
	position:relative;
	background:#d6d6d6;
}
.newarrival h2{
	margin-bottom:10px;
	position:relative;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}
.newarrival h2 span{
	position:absolute;
	right:0;
}
.customNavigation{
	margin-top:-29px;
}

.customNavigation .btn.prev{float:left;position:relative;z-index:4;}
.customNavigation .btn.next{float:right;position:relative;z-index:4;}

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	margin-bottom:20px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
	float: left;
}

.owl-carousel .owl-item .newarr_inner{
	margin:0 5px;
	padding-bottom:10px;
	background:#fff;
	position:relative;
}

.owl-carousel .owl-item .newarr_inner .icon{
	position:absolute;
	top:0px;
	right:-5px;
	z-index:20;
}

.owl-carousel .owl-item .newarr_inner .newarrimgbox{
	margin:0 auto 10px;
	padding-top:2%;
	width:96%;
	height:160px;
	overflow:hidden;
}

.owl-carousel .owl-item .newarr_inner .newarrimgbox p{
	display: table-cell;
	vertical-align: middle;
	width: auto;  
	height: 160px !important;
	height: auto;
	overflow:hidden; 
}

.owl-carousel .owl-item .newarr_inner .newarrimgbox img{
	width:100%;
	height:auto;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.owl-theme .owl-controls{
	text-align: center;
}
/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 14px;
	height: 14px;
	margin: 0px 5px;
	background: #fff;
	border:3px solid #fff;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	background: #d33a72;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(../img/AjaxLoader.gif) no-repeat center center
}

/*------ event ---------*/
.event{margin-bottom:40px;}
.event_bottom{
	margin:0;
	height:60px;
	line-height:60px;
	text-align:center;
	background:url(../img/bg_eventbottom.jpg);
}

/*------ ranking ---------*/
.ranking{
	border-bottom:20px solid #28598a;
}
.ranking h2{
	margin-bottom:20px;
	background:url(../img/bg_rank_ttl.png) repeat-x 0 0;
	background-size: auto 100%;
	text-align:center;
}
.ranking h2 img{
	background:#fff;
	width:80%;
	max-width:511px;
}

.rank li{
	margin: 0 0.8% 20px;
	_margin-left:0.4%;
	width:18.4%;
	float:left;
	text-align:center;
	background:#f0f0f0;
	zoom:1;
}
.rank li h3{
	margin-bottom:5px;
}
.rank_inner{padding:5px;}
.rank_inner .rank_img{
	margin:0 auto 10px;
	width:100%;
	height:160px;
	overflow:hidden;
}

.rank_inner .rank_img p{
	display: table-cell;
	vertical-align: middle;
	width: auto;  
	height: 160px !important;
	height: auto;
	overflow:hidden;
	margin:auto;
	text-align:center;
}

.rank_inner .rank_img p img{
	width:100%;
	height:auto;
	margin:auto;
}

.rank_inner .rank_ttl{
	height:1.5em;
	overflow:hidden;
}

/*------ blog ---------*/
.blog{
	margin: 0;
	padding:40px 0;
	width:100%;
	background:#f4f4f4;
}

.blog h2{margin-bottom:20px;}

.blog h2 img{
	width:100%;
	max-width:341px;
}

.sec_blogpic{
	margin:0 20px 0 0;
	width:70%;
	float:left;
}

.article_blog{
	margin-bottom:10px;
	padding:10px;
	background:#fff;
}

.blogpic{
	margin:0 10px 0 0;
	float:left;
}
.article_blog h3{margin-bottom:10px;}
.article_blog h3 a{color:#d53974;}
.article_blog h3 span{float:right;}
	
.vote_box{float:left;}

.sec_blogroom{background:#fff; overflow:hidden;}

.sec_blogroom h3{
	padding:5px;
	margin-bottom:15px;
	color:#fff;
	background:#d53974;
	position:relative;
}
.sec_blogroom h3:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 10px;
	height: 0;
	width: 0;
	border: 8px solid transparent;
	border-top: 10px solid #d53974; 
}
.sec_blogroom h3 span{
	position:absolute;
	right:5px;
}
.sec_blogroom h3 span a{
	color:#fff;
}

.sec_blogroom ul{
	padding:5px 5px 0;
	overflow:auto;
}

.sec_blogroom ul li{
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:1px dashed #ddd;
}

.sec_blogroom ul li .blac_pic{
	margin-left:5px;
	height:50px;
	overflow:hidden;
}

.sec_blogroom ul li h4 a{
	color:#d53974;
}
.blog_bottom{position:relative;}
.blog_bottom img{width:100%;}
.blog .btn_start{margin-left:44%; width:12%}
.blog .btn_list{position:absolute; left:61%; top:0;width:9.7%}
#fuki1{position:absolute; width:7%; left:18.6%;}
#fuki2{position:absolute; top:10px; left:30%; width:5.5%;}

/*------ info ---------*/
.info{
	padding:80px 0;
}
.info h2{
	margin:0 0 60px;
	text-align:center;
	background:url(../img/bg_infottl.png) repeat-x center 0;
	background-size: auto 100%;
}
.info h2 img{background:#fff;width:80%;max-width:551px;}

.newsbox{
	margin:0 1.5% 0 0;
	padding:3px 0;
	width:49.2%;
	height:219px;
	background:#dedede;
	overflow:hidden;
	float:left;
}
.inner_newsbox{
	margin:0 3px;
	padding:1px;
	height:217px;
	overflow:hidden;
	background:#fff;
}
.inner_newsbox h3{
	padding-left:8px;
	height:34px;
	line-height:34px;
	color:#fff;
	position:relative;
	background:url(../img/bg_newsttl.jpg) repeat;
}
.inner_newsbox h3 span{
	position:absolute;
	bottom:0;
	right:7px;
}

.news_list{ padding:0 5px;}
.news_list li{
	padding:10px 0;
	border-bottom:1px solid #dedede;
}
.news_list li .date{
	margin-right:20px;
	float:left;
}

.news_list li span.new{margin-right:5px; background:#E6B017; padding:0 2px; font-size:10px; color:#fff;}

.btarea_info{
	width:49.2%;
	float:left;
}

.btarea_info img{width:100%;}
.btarea_info a{display:block; height:100%;}
.btarea_info .about{
	width:48.3%;
	height:225px;
	float:left;
	background:#48b9b5;
}
.btarea_info .member{
	width:48.3%;
	height:225px;
	float:right;
	background:#26a3ba;
}

/*------ bbs ---------*/
.bbs{
	padding:80px 0;
	/*background:url(../img/bg_bbs.jpg) repeat;*/
	background:#ddd;
}

.bbs h2 img{
	width:100%;
	max-width:360px;
}

.list_bbs li{
	margin-top:20px;
	padding:10px;
	background:#fff;
}

.list_bbs li .comment_head span{float:right;}
.list_bbs li .comment_head span.new{float:left; margin-right:5px; background:#E6B017; padding:0 2px; font-size:10px; color:#fff;}


/*------ modal ---------*/
#modalwin{
	padding:10px;
	text-align:center;	
}

.topsns{
	padding:40px 0 0;
	margin-bottom:40px;
	background:url(../img/bg_seo.jpg) repeat-x center top;
	overflow:hidden;
}

.topsns h2{
	text-align:center;
	margin-bottom:20px;
	color:#28598a;
}

.fb_box{
	float:right;
	width:38.7%
}
.fb_iframe_widget,
.fb_iframe_widget x iframe[style],
.fb_iframe_widget span{width: 100% !important;}

.topsns .text_box{
	float:left;
	width:60%;
}
img.grasspic{
	-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
.glass{
	position: absolute;
	top:0;
    width:100%;
	height:100%;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}
/********************************
screen_width_780px
********************************/
@media screen and (max-width: 780px) {
	.rank li{float:none; margin:0 0 10px; width:100%; text-align:left;}
	.rank_inner .rank_img{width:160px; margin:0 10px 0 0; float:left;}
	.rank li h3{text-align:center;}
	.sec_blogpic{margin:0 0 20px; float:none; width:100%;}
	.blogpic, .blogpic img{width:100px;}
	.vote_box{float:none;}
	.blog .btn_start{margin-left:25%; width:24%;}
	.blog .btn_list{width:20.4%;}
	#fuki1, #fuki2{display:none;}
	.newsbox, .btarea_info{width:100%; float:none; margin:0 0 20px;}
	.btarea_info .about, .btarea_info .member{height:100%;}
	.fb_box,
	.fb_iframe_widget,
	.fb_iframe_widget x iframe[style],
	.fb_iframe_widget span{width: 100% !important; float:none;margin-left:0;}
	.topsns .text_box{width:100%; float:none; margin-bottom:20px;}
}

/********************************
screen_width_610px
********************************/
@media screen and (max-width: 610px) {
	.prodacts2{padding:2% 1%;}
	.prodacts2 ul li{margin:0 1% 2%;width:47.5%;}
	.prodacts2 li:first-child, .prodacts2 li:nth-child(6), .prodacts2 li:nth-child(20), .prodacts2 li:nth-child(35){width:47.5%;}
}

/********************************
screen_width_480px
********************************/
@media screen and (max-width: 480px) {
	.blogpic, .blogpic{margin-bottom:10px;}
	.vote_box{clear:both;}
}