

/*--------------index news-----------------------*/
.flowerLeft{
	position:absolute;
	left:0;
	z-index:9;
	top:130px;
}
.flowerRight{
	position:absolute;
	right:0;
	z-index:999;
	top:300px;
}
.newsBorder,.news2Border, .activeBorder, .onlinecourseBorder{
	/*display:block;*/
	width:29.33333%;
	margin:auto 2% 4% 2%;
	float:left;
	border:1px solid #cdcdcd;
	padding:2% 1%;
	word-wrap:break-word;
	position: relative;
}
.newsBorder{
	height:500px;
}
.news2Border{
	height:320px;
}
.onlinecourseBorder{
	height:380px;
}
.activeBorder{
	height: 350px;
}
.shareBorder{
	width:25%;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	margin: 35px 4.1666%;
	
}
.news2Border a,.shareBorder a {
	/*display:block;*/
	color:#7082f9;
}
div.display4Border:nth-child(4){
	display: none;
}
.flex_pro_list a:hover, .newsBorder a:hover,.news2Border a:hover,.shareBorder a:hover, .onlinecourseBorder a:hover{
	color:#adb3db;
}

.shareBorder > span.shareImg{
	width:180px;
	height:180px;
	border:1px solid #9c6324;
	border-radius:50%;
	overflow:hidden;
}
.shareBorder > span.shareImg img,
span.shareImg img{
	width:100%;
	height:100%;
	/*display:block;讓圖片水平置中*/
	margin:auto;/*讓圖片水平置中*/
}

.newsBorder > span.newsSub,
.news2Border > span.newsSub,
.onlinecourseBorder > span.newsSub,
.activeBorder> span.newsSub{
	font-size:1.3em;
	color:#000;
	font-weight:700;
	float:left;
	width:98%;
	height:auto;
	margin-left:1%;
	margin-right:auto;
	line-height:1.2em;
	margin-bottom:13px;
	margin-top:2px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.flex_pro_list > span.newsSub{
	font-size:1.2em;
	color:#000;
	font-weight:600;
	width:100%;
	height:48px;
	margin:3px 0;
	line-height:1.2em;
	overflow: hidden;
    text-overflow: ellipsis;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shareBorder> span.newsSub{
	font-size:1.2em;
	color:#000;
	font-weight:bold;
	height:auto;
	line-height:1.2em;
	margin-top:12px;
	width: 100%;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
}
.activeBorder > span.newsSub a{
	color:#000;
}

.aboutText > span.aboutSub{
	font-size:1.2em;
	color:#000;
	font-weight:600;
	float:left;
	/*width:98%;*/
	height:auto;
	line-height:1.2em;
	margin-bottom:10px;
	margin-top:12px;
	overflow:hidden;
}
.flex_pro_list > span.newsIcon,
.newsBorder > span.newsIcon{
	position: absolute;
	right: 15px;
	top:150px;
}
.flex_pro_list > span.newsImg,
.newsBorder > span.newsImg,
.news2Border > span.newsImg,
.onlinecourseBorder > span.newsImg,
.activeBorder > span.newsImg{
	width:100%;/*280px*/
	/*max-width: 280px;*/
	height:164px;/*164px*/
	/*max-height:230px;*/
	overflow:hidden;
	margin:auto;
	display:  flex;/*image align center*/
    align-items: center;/*image align center*/
    justify-content:  center;/*image align center*/
	background: #fff5f7;
}
.flex_pro_list > span.newsImg >img,
.newsBorder > span.newsImg >img,
.news2Border > span.newsImg >img,
.onlinecourseBorder > span.newsImg >img,
.activeBorder > span.newsImg >img{
	object-fit: contain;
    width: 100%;
    height: auto;
	

}
img.pro_none_img{
	max-width: 30%;
	height: auto;
	
}
.flex_pro_list > span.newsDate,
.newsBorder >  span.newsDate,
.news2Border >  span.newsDate,
.onlinecourseBorder > span.newsDate,
.activeBorder >  span.newsDate{
	font-size:0.9em;
	color:#7d7d7d;
	font-weight:500;
	float:left;
	width:98%;
	height:auto;
	line-height:1.2em;
	margin-bottom:3px;
	margin-left: 1%;
	margin-top: 20px;
	overflow:hidden;
}

.newsBorder > span.newsTxt,
.news2Border > span.newsTxt,
.onlinecourseBorder > span.newsTxt{
	font-size:1.1em;
	color:#7d7d7d;
	font-weight:300;
	float:left;
	width:98%;
	height:80px;
	line-height:1.4em;
	margin-top:6px;
	padding-bottom: 6px;
	margin-bottom:6px;
	margin-left:1%;
	/*border-bottom: 0.5px solid #e4e4e4;*/
	/*overflow:hidden;*/
}
.shareBorder > span.newsTxt{
	font-size:1.1em;
	color:#7d7d7d;
	font-weight:300;
	height:100px;
	line-height:1.4em;
	margin-top:6px;
	margin-bottom:6px;
}

.flex_pro_list > span.newsTxt{
	font-size:1.1em;
	color:#7d7d7d;
	font-weight:300;
	float:left;
	width:100%;
	height:80px;
	line-height:1.4em;
	margin:3px 0;
	padding-bottom: 6px;
	/*border-bottom: 0.5px solid #e4e4e4;*/
	/*overflow:hidden;*/
}

span.newsTxt a{
 color: #0498ff;
}
.aboutlogo{
	position:absolute;
	z-index:99;
	width:220px;
	height:auto;
	right:120px;
	top:120px;
}
.aboutlogo img{
	width:100%;
	height:auto;
}
.aboutText{
	position: relative;
	display: flex;
	justify-content:center;
	align-items:center;
	height: 245px;
}
.aboutText > span.aboutTxt{
	color:#98435c;
	font-weight:700;
	font-size:2em;
	line-height: 1.3em;
}
.moreBorder{
	margin:-5% 11% 4% 2%;
	padding:1%;
	width:87%;
	height:auto;
	float:right;
}
.moreBorder >span.moreNews{
	width:auto;
	height:auto;
	float:right;
	margin-top:12px;
	padding-bottom:2px;
}
.moreBorder >span.moreNews a:hover{
	color:#000;
}
.moreBorder >span.moreNews a{
	font-size:0.9em;
	font-weight:bold;
	text-decoration:none;
	display:block;
	color:#9c9999;
	width:100%;
	height:auto;
	line-height:1em;
}
.aboutText >span.aboutBtu{
	width:15%;
	height:auto;
	/*clear:left;
	float:left;*/
	height:43px;
	line-height:43px;
	/*margin:auto 15% auto 15%;*/
	padding-bottom:2px;
	margin-bottom:4%;
	background:#d3e0e2;
	border-radius:6px;
	text-align:center;
	letter-spacing:1px;
	display:inline-block;
  	vertical-align:middle;
}
.aboutText >span.aboutBtu:last-child{
	background:#6b6b6b;
	margin-left:3%;
}
.aboutText >span.aboutBtu:last-child a{
	color:#d3e0e2;
}
.aboutText >span.aboutBtu a{
	display:block;
	text-decoration:none;
	color:#6b6b6b;
	padding:1% 22px;
	font-weight:500;
	font-size:1em;
}
.aboutText >span.aboutBtu:hover{
	background:#d2d2d2;
}
.aboutText >span.aboutBtu:last-child:hover{
	background:#666;
}
.aboutIndexBorder{
	background:url(../img/index_aboutbg2.jpg) no-repeat center center;
	height:245px;
	width:100%;
	/*overflow:hidden;*/
}
.aboutIndexBorder > .aboutText{
	width:100%;
	text-align:center;
}
/*贊助廣告區塊*/
.sponsorBg{
	width: 100%;
	height: auto;
	float: left;
	position: relative;
	margin-top: 1%;
	margin-bottom: 1%;
	
}
.sponsorBorder{
	width:100%;
	max-width: 1370px;
	margin: auto;
	/*padding: 5px 0px 35px;*/
	height: 300px;
	position: relative;
	background: #ecd2c0;
	display: flex;
	vertical-align:middle;
	justify-content: center;
	align-items: center;
}
.sponsorBorder_s{
	width:100%;
	max-width: 1370px;
	margin: auto;
	position: relative;
	display: flex;
	vertical-align:middle;
	justify-content: center;
	align-items: center;
}
.sponsorImg {
	display: block;
    position:absolute;
	opacity: 0;
    filter: alpha(opacity=0);
	border: 0.6px solid #d58072;
}
.sponsorImg_S_Border{
	background: #000;
}
.sponsorTxt{
	width: 100%;
	max-width: 1370px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	font-size: 0.7em;
	text-align: right;
}
.sponsorImg img{
	display: block;
	width: 100%;
	max-width: 1370px;
	height: auto;
	background: #fff;
	
	/*border: 0.6px solid #d58072;*/
}
.sponsorImg {
    -webkit-animation: round 30s linear infinite;
            animation: round 30s linear infinite;
}

@-webkit-keyframes round {
    6.666% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    33.33% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    39.996% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    6.666% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    33.33% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    39.996% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
.sponsorImg:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.sponsorImg:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.sponsorImg:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

span.workSub{
	width:100%;
	height:auto;
	font-size:1.2em;
	line-height:1.4em;
}
span.workSub{
	width:100%;
	float:left;
	height:auto;
	font-size:1.2em;
	font-weight:600;
	text-align:center;
	line-height:1.4em;
	margin-bottom:25px;
	margin-top:12px;
}
span.workitems{
	width:70%;
	margin-left:15%;
	margin-right:15%;
	float:left;
	height:auto;
	font-size:0.8em;
	font-weight:bold;
	text-align:left;
	line-height:1.4em;
	margin-bottom:12px;
}
span.workSubIcon{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-bottom:12px;
	margin-top:25px;
	width:90px;
	height:90px;
	background:#292829;
	border-radius:45px;
	display:  flex;/*image align center*/
    align-items: center;/*image align center*/
    justify-content:  center;/*image align center*/
}
.proIndexBorder,.contactIndexBorder{
	width:50%;
	float:left;
	height:480px;
	overflow:hidden;
	padding:4% 2%;
}
.proIndexBorder{ background:#212d38;}
.contactIndexBorder{ background:#727980;}
span.proSub{
	text-align:center;
	font-size:1.3em;
	color:#fff;
	font-weight:bold;
	float:left;
	width:100%;
	height:auto;
	line-height:1.8em;
	margin-bottom:4%;
	overflow:hidden;
}
span.contactSub{
	text-align:center;
	font-size:1em;
	color:#fff;
	font-weight:500;
	float:left;
	width:100%;
	height:auto;
	line-height:1.5em;
	margin-bottom:4%;
	overflow:hidden;
}
span.proIcon{
	width:70%;
	margin-left:15%;
	margin-right:15%;
	height:auto;
	display: flex;/*image align center*/
    align-items: center;/*image align center*/
    justify-content: center;/*image align center*/
	margin-bottom:4%;
}
span.contactIcon{
	width:40%;
	margin-left:30%;
	margin-right:30%;
	height:auto;
	display:  flex;/*image align center*/
    align-items: center;/*image align center*/
    justify-content:  center;/*image align center*/
	margin-bottom:3%;
}
span.proIcon img{
	width:80%;
	height:auto;
}
span.contactIcon img{
	width:50%;
	height:auto;
}
span.contactBtu,
span.proBtu{
	width:38%;
	height:auto;
	margin-left:31%;
	margin-right:31%;
	margin-top:12px;
	background:#34495e;
	display:inline-block;
	border-radius:6px;
	text-align:center;
	letter-spacing:1px;
}
span.contactBtu a,
span.proBtu a{
	display:block;
	text-decoration:none;
	color:#fff;
	padding:2.3% 39px;
	font-weight:500;
	font-size:0.8em;
}
span.contactBtu:hover,
span.proBtu:hover{
	background:#51677d;
}

.downloadBorder{
	width:95%;
	height:auto;
	margin: 14px 0 14px 5%;
	float:left;
	border-bottom: 1px dotted #b8b8b8;
	/*display: block;*/
}

.downloadDate{
	width:11%;
	float:left;
	margin-left:1%;
	/*height:18px;*/
	font-size:1em;
	color:#7d7d7d;
}
.downloadSub{
	width:87%;
	float:left;
	height: auto;
	margin-left:1%;
	font-weight: bold;
	font-size:1.2em;
	color:#000;
}
.otherProBorder{
	width:98%;
	height:auto;
	margin: 10px 1%;
	float:left;
	border-bottom: 1px dotted #b8b8b8;
	/*display: block;*/
}
.otherProBorder_Msg{
	width:100%;
	height: auto;
	float: left;
}
.otherProBorder_feedback{
	width:96%;
	height:auto;
	margin: 10px 2%;
	padding: 10px ;
	float:left;
	background-color: #fff;
	/*display: block;*/
}
.otherProBorder span.nameBack{
	font-weight: 600;
}
.otherProBorder span.msgTime{
	font-size: 0.8em;
	color: #b06586;
}
.otherProDate{
	width:9%;
	float:left;
	margin-left:1%;
	/*height:18px;*/
	font-size:0.9em;
	color:#7d7d7d;
}
.otherProSub{
	width:89%;
	float:left;
	height: auto;
	margin-left:1%;
	font-size:1em;
	color:#000;
}
.mem_txt{
	color:#07a6ce;
}
.vip_txt{
	color:#ffb400;
}
.downloadBorder a:hover{
	color: #e56e84;
}
.downloadTxt{
	font-size:1em;
	color:#7d7d7d;
	font-weight:300;
	float:left;
	width:96%;
	height:auto;
	line-height:1.3em;
	margin-top:30px;
	margin-bottom:12px;
	min-height:200px;
	/*max-height:250px;*/
	overflow:hidden;
	margin-left:2%;
}
.moreBtu{
	position:relative;
	width:100%;
	height:auto;
	text-align: center;
	margin-top: 20px;
	border-bottom: 1px solid #e4e4e4;
	padding:50px 0;
}
.moreBtu a{
	/*text-decoration:underline;*/
	color:#64c6ff;
	border:1px solid #7c95c7;
	padding:20px 45px;
	border-radius:5px;
}
/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/
@media (max-width: 1737px) {
	.newsBorder,.news2Border, .activeBorder, .onlinecourseBorder{
		/*display:block;*/
		width:44%;
	}
}
@media (max-width: 1660px){
	.downloadDate{
        width:16%;
	}
	.downloadSub{
        width:82%;
    }
}
@media (max-width: 1540px) {
	.shareBorder > span.newsTxt{
		height: 123px;
	}
}
@media (max-width: 1450px) {
	.proIndexBorder,.contactIndexBorder{
		height:420px;
	}
	.downloadDate{
        width:99%;
	}
	.downloadSub{
        width:99%;
    }
	.aboutlogo{
        right:50px;
    }
	.flowerLeft, .flowerRight{
		display:none;
	}
	
}
@media (max-width: 1271px){
	.shareBorder > span.newsTxt{
		height: 146px;
	}
}
@media (max-width: 1204px){
	.aboutlogo{
        display: none;
    }
}
@media (max-width: 1116px){
	.shareBorder{
	width:42%;
	margin: 35px 4%;
    }
	.shareBorder > span.newsTxt{
		height: 105px;
	}
}
@media (max-width: 1055px) {
	.newsBorder >span.moreBtu,
	.onlinecourseBorder>span.moreBtu,
	.news2Border >span.moreBtu{
		width:25%;
	}
	.newsBorder >span.newsSub,
	.onlinecourseBorder >span.newsSub,
	.news2Border >span.newsSub{
		font-size:1.5em;
		line-height:1.7em;
	}
	.proIndexBorder,.contactIndexBorder{
		height:340px;
	}
	span.contactBtu,
	span.proBtu{
		width:48%;
		margin-left:26%;
		margin-right:26%;
	}
	
}
@media (max-width: 991px) {
	
	.newsBorder >span.moreBtu,
	.news2Border >span.moreBtu,
	.onlinecourseBorder >span.moreBtu,
	.ativeBorder >span.moreBtu{
		width:25%;
	}
	.workIndexBorder{
		height:360px;
	}
	span.contactBtu,
	span.proBtu{
		width:48%;
		margin-left:26%;
		margin-right:26%;
	}
	.downloadBorder{
	width:98%;
	margin: 12px 1% 12px 1%;
	}

}
@media  (max-width: 956px) {
	.newsBorder,
	.onlinecourseBorder
	{
		width: 98%;
		margin: 3% 1%;
		height: 423px;
	}
	.newsBorder{
		height: 480px;
	}
}
@media (max-width: 865px){
	.shareBorder > span.newsTxt{
		height: 130px;
	}
}
@media (max-width: 714px){
	.shareBorder{
	width:96%;
	margin: 35px 2%;
    }
	.shareBorder > span.newsTxt{
		height: auto;
	}
}
/*---------- MEDIA 480px ----------*/
@media  (max-width: 768px) {/*手機*/
	/*------
	      newsBorder
		  ---------------*/
	 .flowerLeft, .flowerRight{
		display:none;
	}
	.newsBorder >span.moreBtu,
	.news2Border >span.moreBtu,
	.onlinecourseBorder >span.moreBtu,
	.activeBorder >span.moreBtu{
		width:30%;
	}
	.moreBtu{
	bottom:5px;
}
	
	.onlinecourseBorder{
		max-height: 280px;
		min-height: 280px;
	}
	.news2Border
	{
		width: 98%;
		margin: 3% 1%;
		min-height: 250px;
		max-height: 250px;
		/*width:48%;
		margin:3% 1%;*/
	}
	.activeBorder{
	width: 98%;
	margin: 3% 1%;
	max-height: 310px;
	min-height: 310px;
	}
	div.display4Border:nth-child(4){
	display:block;
}
	/*.newsBorder:nth-child(3), .shareBorder:nth-child(3){
		display:none;
	}*/
	.newsBorder > span.newsSub,
	.news2Border > span.newsSub,
	.onlinecourseBorder >span.newsSub,
	.activeBorder > span.newsSub{
	font-size:1.2em;
	margin-bottom:5px;
	}
	.newsBorder > span.newsTxt,
	.news2Border > span.newsTxt,
	.onlinecourseBorder > span.newsTxt{
		height:105px;
		/*overflow:hidden;*/
	}
	/*-------
		aboutBorder
		-------------*/
	.aboutIndexBorder{
        background:url(../img/index_aboutbg2.jpg) no-repeat 15% center;
    }
	.aboutText > span.aboutSub{
		text-align:center;
	}
	.aboutText >span.aboutBtu{
		width:40%;
		margin:0 30% 4% 30%;
		padding:1% 2%;
		height:auto;
	}
	.newsBorder >  span.newsDate
	.onlinecourseBorder >span.newsDate
	.news2Border >  span.newsDate{
	font-size:1em;
	line-height:1em;
	margin-bottom:1px;
}
	
	
	/*-------
		workBorder
		-------------*/
		
	.workIndexBorder{
		width:50%;
		height:280px;
		overflow:hidden;
		padding:1% 3% 1% 3%;
	}
	span.workitems{
		width:60%;
		margin-left:20%;
		margin-right:20%;
	}
	
	.proIndexBorder,.contactIndexBorder{
		width:100%;
		height:auto;
		overflow:hidden;
		padding:4% 2%;
	}
	
	span.contactBtu,
	span.proBtu{
		width:40%;
		margin:4% 30% 4% 30%;
		padding:1% 2%;
		height:auto;
	}
	span.contactBtu a,
	span.proBtu a{
		font-size:1.1em;
	}
	
	/*------------
	download list
	----------*/
	.downloadBorder{
		width:100%;
		margin:0 1% 25px 1%;
	}
	
}

@media  (max-width: 480px) {
	/*-------------------
		newsBorder
		-----------------*/
		
	.flowerLeft, .flowerRight{
		display:none;
	}
	.newsBorder,
	.news2Border,
	.onlinecourseBorder,
	.activeBorder{
		width: 98%;
		margin: 3% 1%;
		/*min-height: 420px;
		max-height: 410px;*/
		/*width:48%;
		margin:3% 1%;*/
	}
	.onlinecourseBorder{
		width: 98%;
		margin: 3% 1%;
		min-height: 350px;
		max-height: 350px;
	}
	/*---------
		about border
		---------------*/
	
	.aboutlogo{
		display:none;
	}
	.aboutText >span.aboutBtu{
		width:90%;
		margin:0 5% 4% 5%;
		padding:4%;
	}
	.aboutText >span.aboutBtu a{
		font-size:1.1em;
	}
	/*---------
		work border
		---------------*/
	.workIndexBorder{
		width:50%;
		height:200px;
		overflow:hidden;
		padding:1% 3% 1% 3%;
	}
	span.workitems{
		width:80%;
		margin-left:10%;
		margin-right:10%;
		font-size:1em;
	}
	/*---------
		products/contact border
		---------------*/
	.proIndexBorder,.contactIndexBorder{
		width:100%;
		height:auto;
		overflow:hidden;
		padding:4% 2%;
	}
	
	span.contactBtu,
	span.proBtu{
		width:90%;
		margin:0 5% 4% 5%;
		padding:4%;
	}
	span.contactBtu a,
	span.proBtu a{
		font-size:1.1em;
	}
}