﻿@charset "utf-8";
/** banner **/
#banner {
	position:relative;
	width:100%;
	margin:0 auto;
}
#banner .listshow, 
#banner .listvideo {
	float:left;
	width:100%;
	background:#FFF;
	margin:0 auto;
}
#banner .listshow .item,
#banner .listvideo .item {
	position:relative;
	display:block;
	width:100%;
}
#banner .listshow a {
	float:left;
	width:100%;
	position:relative;
}
#banner .listshow a:focus {
	filter:alpha(opacity=50);
	opacity:0.5;
}
#banner .listshow .img{
	width:100%;
	padding-bottom:56.25%;
	display:block;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	margin-top:-80px;
	overflow: hidden
}

#banner .listshow .img img{
  position: absolute;
   display: block;	
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 等比例填滿 */
  object-position: center; /* 居中 */
}


#banner .listshow .img::after {
    position: absolute;	
    content: "";
    top: 0;	
    left: 0;	
    width: 100%;	
    height: 100%;
    opacity: 0.2;
    background: #000000 none repeat scroll 0 0;
}
#banner .listvideo .embed-container { 
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
} 
#banner .listvideo .embed-container iframe,
#banner .listvideo .embed-container object,
#banner .listvideo .embed-container embed { 
	position: absolute;
	top: -80px;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0 none;
}
/**/
#banner .listshow .slogan{
	position:absolute;
	right:0;
	bottom:24%;
	width:auto;
	max-width:100%;
	color:#fff;
	font-weight: bold;
	font-size:2.2em;
    line-height:110%;		
	padding:15px 20px;
	box-sizing:border-box;

	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(178,136,80,1) 70%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(178,136,80,1) 70%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(178,136,80,1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b28850',GradientType=0 );
	transition: all 1s;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-name:fadeInRight;
	text-shadow: 0px 0px 8px rgba(245,190,120,0.9);
	overflow:hidden;	
	z-index:10;	
}
#banner .slogan small,
#banner .slogan strong{
	display:block;
	text-align:right;
	font-family: Arial, "微軟正黑體",Helvetica, sans-serif;
}
#banner .slogan small{
	font-weight:normal;
	font-size:0.7em;
}
#banner .slick-active .slogan .effectTx{
    transition: all 1s;
	animation-duration:3s;
	animation-iteration-count:1;
	animation-name:fadeInRight;
}
@media screen and ( max-width: 990px){
	#banner .listshow .slogan{
		font-size:2em;
		transform: translate(0, 50%);	
	}
	#banner .listshow .img{ 
		margin-top:0;
	}
	#banner .listvideo .embed-container iframe,
	#banner .listvideo .embed-container object,
	#banner .listvideo.embed-container embed { 
		top: 0;
	}	
}
@media screen and ( max-width: 768px){
	#banner .listshow .slogan{
		width:100%;
		padding:10px 15px;
		animation-name:none;
		font-size:1.8em;
	}
	#banner .slick-active .slogan .effectTx{
		width:100%;
		animation-name:fadeInTop;
	}
}
@media screen and ( max-width: 480px){
	#banner .listshow .slogan{font-size:1.6em;}
}
@media screen and ( min-width: 1200px){
	#banner .listshow .slogan{
		font-size:2.7em;
		letter-spacing:1.5px;
		padding:20px 25px;		
	}
}
@-webkit-keyframes fadeInTop{
	0%{opacity:0;-webkit-transform:translate3d(0,1000px,0);transform:translate3d(0,1000px,0)}
	80%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-webkit-keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(1000px,0,0);transform:translate3d(1000px,0,0)}
	80%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(1000px,0,0);transform:translate3d(1000px,0,0)}
	80%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-webkit-keyframes fadeInLeft{
	0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
	80%{opacity:1;-webkit-transform:none;transform:none}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft{
	0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
	80%{opacity:1;-webkit-transform:none;transform:none}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
/**/
#banner .listshow .slick-prev,
#banner .listshow .slick-next {
	position:absolute;
	display:block;
	font-size:0;
	width:40px;
	height:40px;
	background:rgba(0,0,0,.5);
	box-sizing:border-box;
	z-index:10;	
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
#banner .listshow .slick-prev {
	left:15px;
}
#banner .listshow .slick-next {
	right:15px;
}
#banner .listshow .slick-prev:focus {
	-webkit-transition:all 0s ease;
	   -moz-transition:all 0s ease;
	     -o-transition:all 0s ease;
	        transition:all 0s ease;
}
#banner .listshow .slick-next:focus {
	-webkit-transition:all 0s ease;
	   -moz-transition:all 0s ease;
	     -o-transition:all 0s ease;
	        transition:all 0s ease;
}
#banner .listshow .slick-prev span,
#banner .listshow .slick-next span {
	position:relative;
	float:left;
	width:100%;
	height:100%;
	font-size:0;
}
#banner .listshow .slick-prev span:before,
#banner .listshow .slick-next span:before {
	position:absolute;
	content: "";
    display: block;   
    width: 19px;
    height: 19px;    
    z-index: 2;
	box-sizing:border-box;
}
#banner .listshow .slick-prev span:before {
	left: 50%;
    top: 50%;
	margin: -9px 0 0 -6px;
	border-left: 3px solid #FFF;
    border-top: 3px solid #FFF;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#banner .listshow .slick-next span:before {
	right: 50%;
    top: 50%;
	margin: -9px -6px 0 0 ;
	border-right: 3px solid #FFF;
    border-top: 3px solid #FFF;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
#banner .listshow .slick-prev:hover,
#banner .listshow .slick-next:hover,
#banner .listshow .slick-prev:focus,
#banner .listshow .slick-next:focus {
	background-color:rgba(164,0,53,.8);
}
@media screen and (max-width:768px) {
	#banner .listshow .slick-prev,
	#banner .listshow .slick-next {
		width:30px;
		height:30px;
	}
	#banner .listshow .slick-prev {
		left:10px;
	}
	#banner .listshow .slick-next {
		right:10px;
	}
	#banner .listshow .slick-prev span:before,
	#banner .listshow .slick-next span:before {
		width:13px;
		height:13px;
		margin: -7px -4px 0 0 ;		
	}			
}
@media screen and (min-width:991px) {
	#banner .listshow .slick-prev,
	#banner .listshow .slick-next {
		width:60px;
		height:60px;
		border:1px solid rgba(255,255,255,1);
		background:none;
	}
	#banner .listshow .slick-prev {
		left:-65px;
	}
	#banner .listshow .slick-next {
		right:-65px;
	}
	#banner .listshow .slick-prev span:before,
	#banner .listshow .slick-next span:before {
		width:23px;
		height:23px;
		margin-top:-11px;
	}
	#banner .listshow:hover .slick-prev {
		left:15px;
	}
	#banner .listshow:hover .slick-next {
		right:15px;
	}
	#banner .listshow .slick-prev:focus {
		left:15px;
	}
	#banner .listshow .slick-next:focus {
		right:15px;
	}
	#banner .listshow .slick-prev:hover,
	#banner .listshow .slick-next:hover,
	#banner .listshow .slick-prev:focus,
	#banner .listshow .slick-next:focus {
		background-color:rgba(255,255,255,.5);
	}
}
@media screen and (min-width: 991px) {
	#banner {
		margin:0 auto;
	}
}


/** newsSection **/
#newsSection {
	position:relative;
	width: 100%;
	padding:30px 0 20px;
	margin:0 auto;
	background:#f2f2f2;
}
@media screen and (min-width: 991px) {
	#newsSection {
		padding:0 0 20px;
		/*margin:-80px auto 0;*/
		padding-top:80px;	
	}
}
/* ----- newsBox ----- */
#newsBox {		
	width: 100%;
	margin:0 auto;
}
#newsBox .row {	
  	display: flex;
    flex-wrap: wrap;
	margin: -10px;	
}
#newsBox .newsShow {
	position:relative;
	width:calc(50% - 20px);
	margin:0 10px 20px;
}
#newsBox .newsShow .newsTit {
	display:flex;
    width:100%;
	float:left;
	width: 100%;
	height:85px;
	background:#000;
	flex-direction:column;
    justify-content:center;
    align-items:center;
	overflow: hidden;
	position: relative;
	background-color: #666
}
#newsBox .newsShow .newsTit img.bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 等比例填滿容器 */
  object-position: center; /* 居中裁切 */
  display: block;
}

/*#newsBox .newsShow .newsTit.t1 { background:url(../images/newsTit-bg1.png) no-repeat 50% 50%; background-size:cover; }
#newsBox .newsShow .newsTit.t2 { background:url(../images/newsTit-bg2.png) no-repeat 50% 50%; background-size:cover; }
#newsBox .newsShow .newsTit.t3 { background:url(../images/newsTit-bg3.png) no-repeat 50% 50%; background-size:cover; }
#newsBox .newsShow .newsTit.t4 { background:url(../images/newsTit-bg4.png) no-repeat 50% 50%; background-size:cover; }*/
#newsBox .newsShow .newsTit h3 {
	color:#FFF;
	font-size:2.5em;
	font-weight:bold;
	text-align:center;
	width:95%;
	text-shadow: 0px 1px 5px rgb(0 0 0 / 70%);
	position: relative;z-index: 3
}
#newsBox .newsShow .newsTit p {
	color:#FFF;
	font-size:1.3em;
	text-align:center;
	margin-top:5px;
}
#newsBox .newsShow .newsList {
	position:relative;
	float:left;
	width: 100%;
	padding:20px;
	background:#FFF;
	box-sizing:border-box;
}
#newsBox .newsShow .newsList ul {
	float:left;
	width:100%;
	list-style:none;
	margin-top:-10px;
}
#newsBox .newsShow .newsList ul li {
	float:left;
	width: 100%;
	padding:10px 0;
	box-sizing:border-box;
	background:url(../images/newsList-div.png) no-repeat 0 10px;
	border-bottom:1px dotted #CCC;
}
#newsBox .newsShow .linkLast ul li:last-child {
	border-bottom:none;
}
#newsBox .newsShow .newsList ul li a {
    float:left;
	width:100%;
	height:100%;
}
#newsBox .newsShow .newsList ul li strong,
#newsBox .newsShow .newsList ul li em.blue {
	font-size:1.7em;
	line-height:150%;
}
#newsBox .newsShow .newsList ul li a:hover strong,
#newsBox .newsShow .newsList ul li a:focus strong {
	color:#b62824;
}
#newsBox .newsShow .newsList ul li em.blue {
	color:#005291;
	font-style:normal;
	font-weight:bold;
	display:block;
}
#newsBox .newsShow .newsList ul li a:hover em.blue,
#newsBox .newsShow .newsList ul li a:focus em.blue{
	color:#3399cc;
}
#newsBox .newsShow .newsList ul li p {
	color:#666;
	font-size:1.3em;
	font-weight:normal;
	line-height:150%;
}
#newsBox .newsShow .newsList ul li .time {
	color:#947046;
}
#newsBox .newsShow .newsList ul li .date {
	color:#528400;
	font-size:1.6em;
	font-weight:bold;	
}
#newsBox .newsShow .newsList .btn {
	float:left;
	width:100%;	
	text-align:center;
	margin-top:20px;
}
#newsBox .newsShow .newsList .btn a {
	position:relative;
	font-size:1.5em;
}
#newsBox .newsShow .newsList .btn a span {
	display:inline-block;
	width:14px;
	height:14px;
	vertical-align:top;
	margin-right:5px;
	background:url(../images/btn-more.png) no-repeat;
	-webkit-transition:all 0.4s;
	   -moz-transition:all 0.4s; 
         -o-transition:all 0.4s;
            transition:all 0.4s;
}
#newsBox .newsShow .newsList .btn a:hover span,
#newsBox .newsShow .newsList .btn a:focus span {
	background: url(../images/btn-more-hover.png) no-repeat;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}
@media screen and (max-width: 480px) {
	#newsBox .row {
		margin:0 -10px;
	}
	#newsBox .newsShow {
		width: 100%;
	}
}
@media screen and (min-width: 781px) {
	#newsBox {
		width: 760px;
	}
}
@media screen and (min-width: 991px) {
	#newsBox {
		width: 100%;
	}
	#newsBox .row {
		margin:0 -10px;
	}
	#newsBox .newsShow {
		width:calc(25% - 20px);	
	}
}


/** pubSection **/
#pubSection {
	position:relative;
	width:100%;
	padding:50px 0;	
	margin:0 auto;
	box-sizing:border-box;
	background-attachment:fixed !important;
	background:url(../images/research_bg.webp) no-repeat 50% bottom ;
    background:url(../images/research_bg.jpg) \9;
	*background: url(../images/research_bg.jpg);	
	background-size:cover;	
	z-index:0;
}
	/*#pubSection:before{
		content:"";
		position:absolute;
		display:block;
		width:100%;
		height:30%;
		bottom:0;
		left:0;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(74,92,136,1) 100%);
		z-index:-1;
	}*/	
#pubSection .boxHead {
	width:100%;
}
#pubSection .boxHead h3 {
	float:left;
	width:100%;
	color:#fff;
    font-size: 3.5em;
    font-weight: bold;
	text-align:center;
    text-shadow: 0px 1px 5px rgb(0 0 0 / 50%), 0px 1px 5px rgb(0 0 0 / 50%);	
}
#pubSection .btn {
    text-align: center;	
}
#pubSection .btn a {
	margin:20px auto 0;		
	display: inline-block;
    width: 130px;
    height: 40px;
	background:#fff;
    border-radius: 40px;
    line-height: 40px;
	font-size:1.8em;
	font-weight:bold;
	color:#000;	
	box-shadow: 0 4px 20px 0 rgb(0 0 0 / 30%);
}
#pubSection .btn a:hover,
#pubSection .btn a:focus {
	color:#b62824;
}
#pubSection .btn a span {
	display:inline-block;
	width:14px;
	height:14px;
	vertical-align:top;
	margin-right:5px;
	background:url(../images/btn-more-blue.png) no-repeat;
	-webkit-transition:all 0.4s;
	   -moz-transition:all 0.4s; 
         -o-transition:all 0.4s;
            transition:all 0.4s;
}
#pubSection .btn a:hover span,
#pubSection .btn a:focus span {
	background: url(../images/btn-more-white.png) no-repeat;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

@media screen and (max-width:991px) {
	#pubSection {
		padding:50px 0 70px 0;
	}
}
@media screen and (max-width:480px) {
	#pubSection {
		padding:30px 0 50px 0;
	}
}

.pubList {
	display:inline-block;
	width:100%;
	margin:20px auto 0 auto;
	vertical-align:top;
}
.pubList ul {
  	display: flex;
    flex-wrap: wrap;
 	padding:0;
	margin: 0 -10px;	
	list-style:none;
}
.pubList ul li {
	position:relative;
	width:calc(50% - 20px);
	margin:0 10px;	
	box-sizing:border-box;
	padding:10px 0;	
}
.pubList a {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:100%;
	align-content:center;
	background:#FFF;
}
.pubList .photo {
	position:relative;
	display:inline-block;
	width:245px;
	height:0;
	padding-bottom:162px;
	overflow:hidden;
	border:solid 1px #ddd;
	box-sizing:border-box;
	background:#f2f2f2;	
}

.pubList .photo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto !important;
  display: block;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: 1
}


.pubList .photo span {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:0;
	-webkit-transition:all 0.5s ease;
	   -moz-transition:all 0.5s ease;
	     -o-transition:all 0.5s ease;
	        transition:all 0.5s ease;
}
.pubList a:hover .photo span,
.pubList a:focus .photo span {
    -webkit-transform:scale(1.1);
        -ms-transform:scale(1.1);
            transform:scale(1.1);
}
.pubList .word {
	position:relative;
	display:inline-block;
	width:calc(100% - 245px);
	letter-spacing:0;
	padding:15px 20px 0;
	box-sizing:border-box;
	vertical-align:top;
}
.pubList .word strong{
	width:100%;
	display:block;
	color: #0080a0;
	font-size:1.7em;
    line-height: 145%;
	margin-bottom:5px;	
}
.pubList .word h4 {
	color:#000;
	font-size:1.7em;
	line-height:150%;
	font-weight:bold;
	text-align:left;
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	  -o-text-overflow:ellipsis;
		 text-overflow:ellipsis;
	-webkit-line-clamp:3;	
}
.pubList a:hover .word h4,
.pubList a:focus .word h4 {
	color:#bf2626;
}
.pubList .word p {
	width:100%;	
	position:relative;
	color:#000;
	font-size:1.5em;
	line-height:150%;
	margin-top:5px;	
}
.pubList .word p span {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:3em;
	line-height:100%;
	text-align:center;
	color:#FFF;
	padding:3px 0;
	background:#005291;
}
@media screen and (max-width:1199px) {
	.pubList ul {width:100%; margin:0 auto;}		
	.pubList ul li {width:100%; margin:0;}	
}
@media screen and (max-width:990px) {
	.pubList ul {width:95%;}	
}
@media screen and (max-width:830px) {
	.pubList ul {width:98%;}	
}
@media screen and (max-width:666px) {
	.pubList ul {width:100%;}	
	.pubList .photo {width:33%; padding-bottom:155px;}
	.pubList .word {width:calc(100% - 33%); padding:10px 15px 0;}	
}
@media screen and (max-width:480px) {
	.pubList .photo {
		width:100%;
		padding-bottom:162px;
	}	
	.pubList .word {
		width:100%;
		padding:15px;
	}
	.pubList .word p {
		font-size:1.4em;	
	}	
}


/** joinus **/
#joinus{
	float:left;
	width:100%;
	margin-top:20px;
}
#joinus .joinBox{
	display:block;	
	position:relative;
	float:left;
	width:100%;
	list-style:none;
	background:#e8ffd0;
	padding:20px;
	box-sizing:border-box;
	border-radius:4px;				
}
/* ----- externalNews ----- */
#joinus .joinBox .topHead {
	position:relative;
	width:100%;
	padding:8px 0;
	background:#177b00;
	border-radius:2px;
}
#joinus .joinBox .topHead h3 {
	color:#faff00;
	font-family:Arial;
	font-weight:bold;
    font-size: 2.4em;
	font-style:italic;
	text-align:center;
}
#joinus .joinBox ul{
	display: block;
	width: 100%;
	list-style:none;
	margin-top:3px;	
}	
#joinus .joinBox ul li{
	float:left;
	width: 50%;
	color:#000;
	padding:10px 0;
	border-bottom: 1px dotted #ccc;			
}
#joinus .joinBox ul li a{
	font-weight:bold;	
	color:#000;
	font-size:1.5em;
	line-height:145%;		
}
#joinus .joinBox ul li span {
	color:#b62824;	
}
#joinus .joinBox ul li a:hover,
#joinus .joinBox ul li a:focus{
	color:#b62824;		
}
#joinus .joinBox .btn {
	float:left;
	width:100%;	
	text-align:center;
	margin-top:20px;
}
#joinus .joinBox .btn a {
	position:relative;
	font-size:1.5em;
}
@media screen and (max-width:1200px) {
	#joinus .joinBox ul li a strong{font-size:1.4em;}
	#joinus .joinBox{padding:15px;}		
}
@media screen and (max-width:991px) {	
	#joinus .joinBox ul li a strong{font-size:1.6em;}
	#joinus .joinBox{padding:20px;}	
}
@media screen and (max-width:520px) {
	#joinus .joinBox ul li{width: 100%;}		
}


@media print {
	#banner {
		margin:10px 0 0 0!important;
	}
	#banner .listshow img {
		width:900px!important;
	}
	#adLink,
	#adBanner {
		display:none!important;
	}
}