@charset "utf-8";
/* CSS Document */
.pageHeader{ width:100%; margin:0 0 0px 0px auto; padding:30px 0 0px 0px; }
.pageHeader h1{ float:left; margin:0px 0 20px 0px; position: relative; }
.pageHeader h1 img{ height: 70px; }
.pageHeader h1:after {
  width:1px; position:absolute;
  height: 45px; display:inline-block; 
  content: '';
  background:#7f7f7e; margin: 20px 0 0 30px;
}
.pageHeader h2{ float:left; margin:0px 0 0px 65px; }
.pageHeader h2 img{ height: 70px; }
.pageHeader .link{ float:right; }
.pageHeader .link ul{ margin:0 0 0 0px; padding: 0; list-style:none; width: 100%;}
.pageHeader .link ul li{ margin:0 0 0 8px; padding: 0; list-style:none; font-size: 15px; line-height: 25px; color:#929292; font-family: 'Open Sans';
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: end; -ms-flex-pack: end; 
align-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.pageHeader .link ul li a{ line-height: 25px; color:#929292; 
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: end; -ms-flex-pack: end; 
align-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.pageHeader .link ul li img{ margin:0 6px 0 0; height: 21px;}
.pageHeader .link .user{ width:100%; float:right; margin:20px 0 0px 0;}
.pageHeader .link .user .login{ float:right; background:#86979f; font-size:14px; line-height: 24px; height: 24px; color:#FFF; padding: 0 15px; }
.pageHeader .link .user .login a{ color:#FFF; }
.pageHeader .link .user .icon {
	float:right; margin:0 0 0px 20px;
	display: block;
	width: 17px;
	height: 23px;
	background:url(../images/user_icon.svg) no-repeat; 
}
.pageHeader .menubox{ width:100%; height:auto; margin:0px 0 0px 0; padding: 0 0 0 88px; }
.pageHeader .menubox .language{ width: auto; float:right; margin:10px 0 0px 0;
display: flex;
  justify-content: flex-end;
}
.pageHeader .menubox .language li{ margin:0 0 0 20px; padding: 0; list-style:none; font-size:18px; }
.pageHeader .menubox .language li a{ color:#808080; }
.pageHeader .menubox .language li:hover:after {
  width:110%;
  height: 2px; display:block;
  content: '';
  background:#808080; margin: 8px 0 0 0;
}
.pageHeader .menubox .language li.current:after  {
  width:110%;
  height: 2px; display:block;
  content: '';
  background:#808080; margin: 8px 0 0 0;
}
.pageHeader .menubox .mobile_menu{ display:none;;}
@media only screen and (min-width: 0px) and (max-width: 1100px){
.pageHeader .menubox{ display: flex;
  flex-direction: row; justify-content: space-between;}
.pageHeader .menubox .mobile_menu{ width:auto; font-size: 18px; color:#333; font-family: 'Open Sans';
display: flex; position: absolute; right: 5%; top: 20px;
justify-content: flex-start;
align-items: center;
}
.pageHeader .menubox .mobile_menu img{ padding: 0 10px 0 0px;}
.pageHeader .menubox .mobile_menu a{ color:#333;
display: flex;
justify-content: flex-start;
align-items: center;
}
.pageHeader .menubox .mobile_menu a:hover{ color:#008dd1;}
}
@media only screen and (min-width: 0px) and (max-width: 360px){
.pageHeader .menubox .mobile_menu{ font-size: 0px; }
}
@media only screen and (min-width: 0px) and (max-width: 1400px){
.pageHeader .menubox{ padding: 0 0 0 0px;}
}
@media only screen and (min-width: 0px) and (max-width: 1110px){
.pageHeader .link ul li { font-size: 0px; }
.pageHeader .link ul li:last-of-type img{ margin:0 0px 0 0px; }
}
@media only screen and (min-width: 0px) and (max-width: 1100px){
.pageHeader{ padding:20px 0 0px 0px; }
.pageHeader h1{ margin:0px 0 10px 0px;}
.pageHeader h1 img{ height: 50px; }
.pageHeader h1:after {
  height: 40px; 
  background:#7f7f7e; margin: 11px 0 0 15px;}
.pageHeader h2{ margin:0px 0 0px 35px; }
.pageHeader h2 img{ height: 50px; }
.pageHeader .link, .pageHeader .menubox .language{ display: none;}
}
@media only screen and (min-width: 0px) and (max-width: 610px){
.pageHeader h2{ display: none;}
.pageHeader h1:after { display: none;}
}

.m_language {
	width: 100%; margin-top:20px; text-align:center; display: block;
}
.m_language span a{
padding: 5px 10px ; text-decoration:none; display:inline-block; font-size:13px;color: #fff; background: #157ebb; border-radius: 100%;
}
.m_language span a:hover{ background: #7db343; color: #fff; }
.m_language .current a{ background: #7db343; color: #fff; }

/* page-banner */
.page-banner {
	position: relative;	
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2) inset;
}
.page-banner .for_PC {
  width: 100%;
  height: calc(100vh - 180px);
  margin-top: 0;
  background-size: cover;
  background-position: center;
}

.page-banner .for_mobile {
  display: none;
}
.page-banner .page-title-inner {
	position: absolute;
	top:30%;
	width: 100%; display: block;
display: flex;
flex-wrap: wrap;
justify-content: center;

}
.page-banner .page-title-inner h1 {
    color: #fff;
    text-align: center;
    font-size: 58px;
    font-weight: bold;
	letter-spacing:2px;
	text-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	display: block; width: 100%;
	font-family: 'Open Sans';
	margin: 0px 0 20px 0; 
}
.page-banner .page-title-inner h2 {
    color: #fff;
    text-align: center;
    font-size: 30px;
	letter-spacing:1px;
	text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 5px;
	display: block; width: 100%;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	margin: 0px 0 80px 0;
}
.page-banner .page-title-inner h3 {
    color: #4a4b4b; 
    text-align: center;
    font-size: 24px;
	letter-spacing:1px;
	display: block;
	background: rgba(255, 255, 255, 0.6);
	padding: 15px 35px;
	box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px;
}
@media only screen and (min-width: 770px) and (max-width: 1100px){
.page-banner .for_PC {
	height: calc(100vh - 130px);
}
}
@media only screen and (min-width: 481px) and (max-width: 800px){
.page-banner .page-title-inner h1 {
    font-size: 40px; white-space:nowrap;
}
.page-banner .page-title-inner h2 {
    font-size: 26px; white-space:nowrap;
    margin: 0px 0 40px 0;
}
.page-banner .page-title-inner h3 {
    font-size: 16px;
    padding: 15px 35px;
}
}
@media only screen and (min-width: 0px) and (max-width: 480px){
.page-banner .page-title-inner h1 {
    font-size: 24px; white-space:nowrap; letter-spacing:1px;
}
.page-banner .page-title-inner h2 {
    font-size: 18px; white-space:nowrap; 
    margin: 0px 0 40px 0;
}
.page-banner .page-title-inner h3 {
    font-size: 16px;
    padding: 15px 35px;
}
}
@media only screen and (min-width: 0px) and (max-width: 769px){
.page-banner .for_PC {
  display: none;
}
.page-banner .for_mobile {
  display:block;
  width: 100%;
}
.page-banner .for_mobile img {
  width: 100%;
}
}

/* 麵包屑 */
.breadbox { 
	width:100%; 
	margin:0px 0px 0px 0px; 
	padding:20px 0px 0px 0px;
	position: absolute;
	bottom:0;
	background: rgba(0, 189, 255, 0.7);
}
.breadbox02 { 
	width:100%; 
	margin:0px 0px 0px 0px; 
	padding:20px 0px 0px 0px;
	position: absolute;
	bottom:0;
	background: rgba(0, 189, 255, 0.7); min-height: 66px;
}
.breadbox .bread { 
	width: 1340px; margin: 0px auto; 
}
.breadbox .bread ul {	
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 88px;
	list-style: none; 
}
.breadbox .bread li {
	color: #FFF; 
	text-decoration:none;
	width:calc(100% / 5); float: left;
	list-style: none;
	padding:0px 0px 20px 0px;	
	margin: 0px 0px 0px 0px;
	font-size: 20px; 

	display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
	justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.breadbox .bread li:last-of-type {
	margin: 0px 0px 0px 0px;
	width: 24%;
}
.breadbox .bread li:before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 27px;
	margin:0px 20px 0px 0px;
	background:url(../images/bread_icon_white.svg) no-repeat; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.breadbox .bread li.current:before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 27px;
	margin:0px 20px 0px 0px;
	background:url(../images/bread_icon_green.svg) no-repeat; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.breadbox .bread li:hover:before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 27px;
	margin:0px 20px 0px 0px;
	background:url(../images/bread_icon_green.svg) no-repeat; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.breadbox .bread li:hover a{
	color: #C6FF00; 
}
.breadbox .bread li a{
	color: #FFF;
}
.breadbox .bread li.current a{
	color: #C6FF00; 
}
.breadbox .bread li a:hover{	
	color: #C6FF00; 
}

.bread02 { 
	width: 100%; margin: 0px auto;  text-align: center; line-height: 1.6;
}
.bread02 ul {	
	margin: 0px 0px 0px 0px;
	padding:6px 0px 7px 0px;
	list-style: none;
}
.bread02 li {
	color: #1B3059; 
	text-decoration:none;
	display: inline-block; 
	list-style: none;
	padding:0px 0px 0px 0px;	
	margin: 0px 0px 0px 0px;
	font-size: 17px; 
}
.bread02 li:after {
	content: '〉';
	display: inline-block;
	margin:0px 0px 0px 10px;
	font-size: 18px; 
	color: #1B3059;
}
.bread02 li:last-child:after {
	display: none;
}
.bread02 li a{
	color: #1B3059;
}
.bread02 li a:hover{	
	color: #008ACE; 
}
@media only screen and (min-width: 0px) and (max-width: 1100px){
.bread02 { 
	margin: 20px auto 0px auto;
}	
}

@media only screen and (min-width: 0px) and (max-width: 1400px){
.breadbox { 
	padding:15px 0px 0px 0px;
}
.breadbox .bread{ width:90%; }
.breadbox .bread ul {	
	padding:0px 0px 0px 0px;
}
.breadbox .bread li {
	font-size: 16px; padding:0px 0px 15px 0px;	
}
.breadbox .bread li:before {
	width: 7px;
	height: 9px;
	margin:0px 2px 0px 0px;
}
.breadbox .bread li.current:before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 9px;
	margin:0px 2px 0px 0px;
}
.breadbox .bread li:hover:before {
	width: 7px;
	height: 9px;
	margin:0px 2px 0px 0px;
}
.breadbox .bread li:hover a{
	color: #C6FF00; 
}
}
@media only screen and (min-width: 0px) and (max-width: 768px){
.breadbox .bread{ width:87%; }
.breadbox .bread li {
	width:calc(100% / 2); float: left;
	font-size: 14px; padding:0px 0px 15px 0px;	
}
.breadbox .bread li:last-of-type {
	width:calc(100% / 2);
}
}

/* 定義區塊 */
.box-1{ width:1340px; margin:0px auto; padding:0px 0; height:auto; }
.box-2{ width:1220px; margin:0px auto; padding:0px 0 0px 0; height:auto; overflow: hidden; }
.box-3{ width:1200px; margin:0px auto; padding:0px 0; height:auto; overflow: hidden; }
.box-4{ width:920px; margin:0px auto; padding:0px 0; height:auto; overflow: hidden; }
.box-5{ width:calc(1220px + 100px); margin:0px auto; padding:0px 0 0px 0; height:auto; overflow: hidden; }
.box-6{ width:920px; margin:0px auto; padding:0px 0 0px 0; height:auto; overflow: hidden; }
.box-7{ width:760px; margin:0px auto; padding:0px 0 0px 0; height:auto; overflow: hidden; }
.content{ width:100%; margin:60px auto; height:auto; overflow: hidden; }
@media only screen and (min-width: 0px) and (max-width: 1400px){
.box-1, .box-2, .box-5{ width:90%; }
} 
@media only screen and (min-width: 0px) and (max-width: 1400px){
.box-3{ width:85%; }
} 
@media only screen and (min-width: 0px) and (max-width: 1260px){
.box-4, .box-6{ width:90%; }
} 
@media only screen and (min-width: 0px) and (max-width: 1000px){
.box-7{ width:90%; }
}
.left { margin:60px auto; width:26%; height:auto; overflow: hidden;  padding:0px 0px 0px 88px; float: left;}
.right { margin:60px 0 0px 60px; width:calc(74% - 60px); height:auto; overflow: hidden;  padding:0px 35px 0px 30px; float: left; }
@media only screen and (min-width: 0px) and (max-width: 1100px){
.left { display: none;}	
.right { margin:60px 0 0px 0px; width:100%; padding:0px 0px 0px 0px;}
}	
@media only screen and (min-width: 1101px) and (max-width: 1400px){
.left { width:22%; padding:0px 0px 0px 0px; }
.right { width:calc(78% - 60px); }
}	
.title01{
	width:100%;
	padding:0px 0px; margin:0px 0px 10px 0px;
	font-size: 27px; color: #dad9da; letter-spacing: 1px; 
	font-family: Raleway;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.title01:after{
	content: '';
	display: inline-block;
	width: 85px;
	height: 2px;
	background:#dad9da;
	margin:14px 0px 0px 25px;
} 
@media only screen and (min-width: 0px) and (max-width: 600px){
.title01:after{
	display:none;
}
}	
.title02{
	width:100%;
	padding:0px 0px 10px 0px; margin:0px 0px 0px 0px;
	font-size: 17px; color: #1B3059; 
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #1b3059;
}
.title02 h1{ padding:0px 0px 0px 0px; margin:0px 0px 0px 20px;}
.title02:before {
	content: ''; 
	display: block;
	width: 36px; 
	height: 36px;
	background-image: url(../images/icon_load.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.title03{
	width:100%; text-align: center;
	padding:0px 0px; margin:10px 0px 30px 0px;
	font-size: 17px; color: #1B3059; 
}
.title04{
	width:100%;
	padding:0px 0px 10px 0px; margin:0px 0px 0px 0px; position: relative;
}
.title04:before{
	width:100%; content: '';
	padding:0; margin:0px 0px 0px 0px; height: 1px; background: #989898; position: absolute; bottom: 0;
}
.title04 h1{
	width:100%; 
	padding:0px 0px; margin:0px 0px 5px 0px;
	font-size: 22px; color: #1B3059; letter-spacing: 1px;
}

.title05{
	width:100%; text-align: right; 
	padding:0px 60px 0px 0px; margin:30px 0px 20px 0px;
	font-size: 17px; color: #1B3059; 
}
@media only screen and (min-width: 0px) and (max-width: 770px){
.title05{
	padding:0px 20px 0px 0px; 
}
}	
.user_editor{ width:100%; height:auto; overflow: hidden; position: static !important; font-size: 16px !important; overflow: auto;}
.user_editor img{ max-width:100% !important; height:auto !important;  }
/* .user_editor table{ width:100% !important;  } */

.text_center{text-align:center;}
.text_right{text-align:right;}
.line-height{ line-height:1.6;}
.line-height02{ line-height:1;}

.drop-shadow {
    -webkit-filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.4));
}
.box-shadow {
	display: block;
	width: 100%;
	height: 30px;
	margin:0px 0px 0px 0px;
	background:url(../images/box_shadow.svg) no-repeat center top; 
	background-size: 100% auto;
}
.box-shadow02 {
	display: block;
	width: 100%;
	height: 40px;
	margin:0px 0px 0px 0px;
	background:url(../images/box_shadow02.svg) no-repeat; 
	background-size: 100% auto;
}

.cool-link::after {
    content: '';
    display: block; margin: -5px 0 0 0;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width .5s;
}

.cer_item_line {
	display: block; 
	width:calc(100% - 50px); background: #B2B2B2;
	height: 1px;
	margin:40px auto 0px auto; padding:0;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

/* -首頁------------------------------------------------------------------------------------------------------*/
.index_itembox{ margin:60px 0 0px 0px; padding:0px; width:100%; }
.index_itembox li{ margin:0px 0 0px 0px; padding:0px; width:calc(100% / 3); list-style: none; float: left; }
.index_itembox li .pic{ margin:0px 0 0px 0px; padding:0px; width:100%; position: relative; }
.index_itembox li .pic:before{ content: ''; width:50px; height: 50px; display: block; position:absolute; background: #00acea; bottom: 0; left: 0; 
clip-path: polygon(0 0, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.index_itembox li:nth-child(2) .pic:before{ background: #008cd1; }
.index_itembox li:nth-child(3) .pic:before{ background: #0170b5;}
.index_itembox li .pic img{ width:100%; }
.index_itembox li .titlebox{ margin:-2px 0 0px 0px; padding:30px 30px 20px 30px; width:100%; text-align: center; background: #00acea; position: relative;
display: flex;
flex-direction: column;
  justify-content: center;
  align-items: center;
}
.index_itembox li:nth-child(2) .titlebox{ background: #008cd1; }
.index_itembox li:nth-child(3) .titlebox{ background: #0170b5;}
.index_itembox li .titlebox:before{ content: ''; width:50px; height: 50px; display: block; position:absolute; background: #fff; bottom: 0; left: 0; 
clip-path: polygon(0 0, 0% 100%, 100% 100%); -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); margin: 0 0 -1px -1px;
}
.index_itembox li:hover .titlebox{ background: #b8ec03; }
.index_itembox li:hover .pic:before{ background: #b8ec03; }
.index_itembox li .titlebox h1{
	font-size: 28px;
	color:#fff;
	font-family: 'Open Sans'; font-weight: normal;
	width:100%; line-height:1; margin:0px 0 10px 0px;
}
.index_itembox li .titlebox h2{
	font-size: 23px;
	color:#fff;
	width:100%; line-height:1; margin:0px 0 15px 0px;
}
.index_itembox li .titlebox h3 img{ width: 50px; 
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6))
}
.index_itembox .slick-prev:before, .index_itembox .slick-next:before { font-size: 0; }
.index_itembox .slick-prev, .index_itembox .slick-next {  width: 22px; height: 36px; background-image: url("../images/arrow.png"); background-repeat: no-repeat; background-size: auto 100%; top: 47.5%; }
.index_itembox .slick-prev { background-position: 0px top; left: -40px; transition: all 0.6s;}
.index_itembox .slick-next { background-position: -22px top; right: -40px; transition: all 0.6s;}
.index_itembox .slick-prev:hover,
.index_itembox .slick-prev:focus,
.index_itembox .slick-next:hover,
.index_itembox .slick-next:focus
{
    transform: translate(0px, -10px);
}
@media only screen and (min-width: 0px) and (max-width: 770px){
.index_itembox{ margin:60px 0 0px 0px; padding:0px 40px; width:100%; }	
}
@media only screen and (min-width: 0px) and (max-width: 599px){
.index_itembox li:nth-child(1), .index_itembox li:nth-child(2){ margin:0px 1px 0px 0px; width:calc(100% / 3 - 1px); }
}

.index_videobox{ margin:0px 0 0px 0px; padding:30px 0px 60px 0px; width:100%;  }
.ind_video{ margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; width:100%; list-style:none; display: block; float:left; outline:none; }
.ind_video .pic { width:100%; position: relative;}
.ind_video .pic img{ width:100%;}
.ind_video .pic .zoom{ display: none; }
.ind_video:hover .pic .zoom { position: absolute; 
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../images/icon_paly.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left:calc(50% - 25px);
	top:calc(50% - 25px);
}
.ind_video:hover .pic:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}
.ind_video h1{ margin:0px 0px 15px 0px; width:100%; font-size: 22px; color:#1B3059; text-align: center; letter-spacing: 1px;}
.shortcut{  width:100%; margin: 0px auto 0 auto; padding:0px 50px; }
.shortcut .slick-prev:before, .shortcut .slick-next:before { font-size: 0; }
.shortcut .slick-prev, .shortcut .slick-next {  top: 50%; -webkit-appearance: none;}
.shortcut .slick-prev { left: -35px; transition: all 0.6s;}
.shortcut .slick-prev:before { 
  content: "\f053";
  display: inline-block;
  margin:0px 0px 0px 10px;
  font-size: 30px; color:#1B3059;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -webkit-appearance: none;
}
.shortcut .slick-next { right:-5px; transition: all 0.6s;}
.shortcut .slick-next:before { 
  content: "\f054";
  display: inline-block;
  margin:0px 0px 0px 20px;
  font-size: 30px; color:#1B3059;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -webkit-appearance: none;
}
.shortcut .slick-prev:hover,
.shortcut .slick-prev:focus,
.shortcut .slick-next:hover,
.shortcut .slick-next:focus
{
    transform: translate(0px, -10px); -webkit-appearance: none;
}
@media only screen and (min-width: 0px) and (max-width: 1280px){
.shortcut{  padding:0px 20px; }
}
@media only screen and (min-width: 0px) and (max-width: 400px){
.shortcut .slick-prev,.shortcut .slick-next
{    width: 35px;
    height: 30px;
}
.shortcut .slick-next{
	right: -17px;
}
.shortcut .slick-prev{
	left: -42px;
}
.shortcut .slick-prev:before { 
  margin:0px 0px 0px 20px;
}
.shortcut .slick-prev:before { 
  font-size: 28px;
}
.shortcut .slick-next:before { 
  font-size: 28px;
}
}

/* news */
.index_newsbox{ margin:60px 0 40px 0px; padding:0px 0px 0px 0px; width:100%; height:auto; overflow: hidden;}
.index_newsbox ul{ margin:0px 60px 0px 0px; padding:0px 0px 0px 0px; width:calc(50% - 60px); float: left;}
.index_newsbox ul:nth-child(2){ margin:0px 0px 0px 60px; padding:0px 0px 0px 0px; width:calc(50% - 60px); float: left;}
.index_newsbox h3{ margin:30px 0 0px 0px; padding:0px 0px 0px 0px; text-align: center;}
.index_newsbox h3 img{ width: 320px; }
@media only screen and (min-width: 1024px) and (max-width: 1280px){
.index_newsbox ul{ margin:0px 30px 0px 0px; width:calc(50% - 30px); }
.index_newsbox ul:nth-child(2){ margin:0px 0px 0px 30px; width:calc(50% - 30px); }
}
@media only screen and (min-width: 0px) and (max-width: 1023px){
.index_newsbox ul{ margin:0px 0px 0px 0px; width:100%; }
.index_newsbox ul:nth-child(2){ margin:50px 0px 0px 0px; width:100%;}
}
@media only screen and (min-width: 0px) and (max-width: 400px){
.index_newsbox h3 img{ width: 280px; }
}

.index_news{ width:100%; height:auto; overflow: hidden; margin:10px 0px 0px 0px;}
.index_news li{
	border-bottom: 1px dotted #cfcfcf; height:auto; overflow: hidden; 
	width:100%; padding:10px 0px 10px 0px;
	list-style:none; line-height:1.5; 
}
.index_news li b{
	width:105px; margin:-1px 10px 0 0; float:left; line-height:25px; padding:0 0px; background:#00acea; color: #fff; font-size:13px; text-align:center; 
	clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 0 51%, 0% 0%); font-family: Arial; font-weight:normal;
}
.index_news li p{
	width:calc(100% - 115px); float:left;
	color:#000;
	font-size:16px; 
}
.index_news li:hover b{
	background:#b8ec03;
}
@media only screen and (min-width: 0px) and (max-width: 420px){
.index_news li p{
	width:100%; display:block; margin:10px 0 0 0;
}
}
.nmore {
    padding: 6px 15px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #454644;
    border: 1px solid #a2a2a1;
    text-align: center; position: absolute; right:0; bottom: 10px;
}
.nmore:hover {
    background: #a2a2a1;color: #fff;
}
.nmore a{
    color: #454644;
}


/* 認證 */
.cerbox{ position: absolute; width:1150px; left:calc(50% - 575px); bottom:-50px;}
@media only screen and (min-width: 0px) and (max-width: 1023px){
.cerbox{ position: relative; left:0; bottom:0; margin:0px auto; height:auto; overflow: hidden; width:100%;}
}
.shortcut02 { width:80%; margin:30px auto 50px auto; position: relative; padding: 0 50px;}
.shortcut02 .owl-nav {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}
.shortcut02 .owl-prev {
    position: absolute;
    left: -60px;
    display: block !important;
    border:0px solid black; font-size: 0;
}

.shortcut02 .owl-next {
    position: absolute;
    right: -40px;
    display: block !important;
    border:0px solid black; font-size: 0;
}
.shortcut02 .owl-prev i {
width: 30px; height: 50px; display: block; background-image: url("../images/ind_arrow01.svg"); background-repeat: no-repeat; background-size: auto 100%; 
}
.shortcut02 .owl-next i {
width: 30px; height: 50px; display: block; background-image: url("../images/ind_arrow02.svg"); background-repeat: no-repeat; background-size: auto 100%; 
}
.ind_cer{ margin:0px 14px 0px 14px; padding:0px 0px; display:inline-block; text-align:center; }
.ind_cer .pic{ width:100%;  }


/* -choose--------------------------------------------------------------------------------------------------*/
.choose_box{ margin:140px 0 0px 0px; padding:0px; width:100%; height:auto; overflow: hidden; position: relative;}
.choose_box ul{ margin:0px 0 0px 0px; padding:0px; list-style: none;}
.choose_box ul li{ margin:0px 0 0px 0px; padding:0px; list-style: none; width:100%; }
.choose_box .c01{ margin:0px 0 0px 0px; padding:300px 10% 400px 0px; width:50%; float: left;
background: #2287aa; /* Old browsers */
background: -moz-linear-gradient(left, #2287aa 0%, #3aa894 50%, #99c76f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2287aa 0%,#3aa894 50%,#99c76f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2287aa 0%,#3aa894 50%,#99c76f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2287aa', endColorstr='#99c76f',GradientType=1 ); /* IE6-9 */
clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.choose_box .c02{ margin:0px 0 0px 0px; padding:300px 0px 400px 10%; width:50%; float: left;
background: #2287aa; /* Old browsers */
background: #99c76f; /* Old browsers */
background: -moz-linear-gradient(left, #99c76f 0%, #3aa894 49%, #2287aa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #99c76f 0%,#3aa894 49%,#2287aa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #99c76f 0%,#3aa894 49%,#2287aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c76f', endColorstr='#2287aa',GradientType=1 ); /* IE6-9 */
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.choose_box .c03{ margin:0px 0 0px 0px; padding:90px 0 80px 0px; width:36%; position: absolute; left: calc(50% - 18%); top:167px; z-index: -1;
background: #004054; 
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.choose_box .c04{ margin:0px 0 0px 0px; padding:90px 0 80px 0px; width:78%; position: absolute; left: calc(50% - 39%); top:488px; z-index: 1;
background:#FFF; 
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ctitbox{ margin:0px auto; padding:0px; width:auto; text-align: center; position: absolute; left:calc(50% - 180px) }
.ctitbox h1{ font-size: 50px; color:#1B3059; font-weight: 400; font-family: 'Open Sans';}
.ctitbox h1:after{ content: '？';
	display: inline-block;
	font-size: 50px; color:#1B3059; font-weight: 400; font-family:微軟正黑體;}
.ctitbox h2{ font-size: 50px; color:#1B3059; font-weight: 400; margin:20px 0px 0px 250px;}
.ctext{ margin:0px 0 0px 0px; padding:0px; width:auto; text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.ctext .icon{ margin:0px 0px 15px 0px; padding:0px; }
.ctext .icon img{ width: 60px}
.ctext h1{ margin:0px 0px 15px 0px; padding:0px; font-size: 22px; color:#fff; text-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px;}
.ctext p{ margin:0px 0px 15px 0px; padding:0px; font-size: 20px; color:#fff; }
.ctext h2{ margin:0px 0px 15px 0px; padding:0px; font-size: 23px; color:#1B3059; }
.ctext h3{ margin:0px 0px 15px 0px; padding:0px; font-size: 28px; color:#1B3059; font-family: 'Estrangelo Edessa';}
.ctext h4{ margin:0px 0px 15px 0px; padding:0px; font-size: 22px; color:#1B3059; }
.ctext .cmore a:hover {
    background: #a2a2a1;color: #fff;
}
.ctext .cmore a{
    padding: 18px 25px;
    margin: 0px 0px 30px 0px;
    text-decoration: none;
    display:inline-block;
    font-size: 18px;
    font-family: Arial;
    color: #454644;
    border: 1px solid #a2a2a1;
}
.ctext02{ margin:0px 0 0px 0px; padding:0px; width:auto; text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.ctext02 p{ margin:0px 0px 15px 0px; padding:0px; font-size: 18px; color:#fff; }
@media only screen and (min-width: 0px) and (max-width: 1023px){
.ctitbox{ position: relative; margin:60px 0px 30px 0px; left:0; 
display: flex;
flex-direction: column;
  justify-content: center;
  align-items: center;
 }
.ctitbox h2{ margin:20px 0px 0px 0px;}
.choose_box{ margin:0px 0 0px 0px; padding:0px; }
.choose_box ul{ margin:0px 0 50px 0px; }
.choose_box ul li{ width:100%; margin:0px 0 0px 0px; 
}
@media only screen and (min-width: 0px) and (max-width: 768px){
.ctitbox h1{ font-size: 30px;}
.ctitbox h1:after{ font-size: 30px;}
.ctitbox h2{ font-size: 30px;}
}	
.choose_box .c01{ margin:0px 0 0px 0px; padding:5%; width:50%; float: left;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.choose_box .c02{ margin:0px 0 0px 0px; padding:5%; width:50%; float: left;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);

background: #2287aa; /* Old browsers */
background: -moz-linear-gradient(left, #2287aa 0%, #3aa894 50%, #99c76f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2287aa 0%,#3aa894 50%,#99c76f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2287aa 0%,#3aa894 50%,#99c76f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2287aa', endColorstr='#99c76f',GradientType=1 ); /* IE6-9 */
}
.choose_box .c03{ padding:5%; width:50%; position: relative; left: 0px; top:0px; float: left; z-index: 1;  
background: #004054; 
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.choose_box .c04{ margin:0px 0 0px 0px; padding:5%; width:50%; position: relative; left: 0px; top:0px; float: left; z-index: 1;
background:#fff; 
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
}
@media only screen and (min-width: 0px) and (max-width: 1000px){
.choose_box .c01{ width:100%;}
.choose_box .c02{ width:100%; 
background: #2287aa; /* Old browsers */
background: #99c76f; /* Old browsers */
background: -moz-linear-gradient(left, #99c76f 0%, #3aa894 49%, #2287aa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #99c76f 0%,#3aa894 49%,#2287aa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #99c76f 0%,#3aa894 49%,#2287aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c76f', endColorstr='#2287aa',GradientType=1 ); /* IE6-9 */
}
.choose_box .c03{ width:100%; }
.choose_box .c04{ width:100%; }
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.ctext p, .ctext02 p{ font-size: 18px; }
}

/* -關於我們--------------------------------------------------------------------------------------------------*/
.a_box{ margin:0px 0 0px 0px; padding:0px; width:100%; height:auto; overflow: hidden; position: relative;}
.a_box .a_left{ margin:0px; padding:0; float:left; width:625px; }
.a_box .a_right{ margin:60px 0px 0px 0px; padding:0; float:right; width:calc(100% - 625px); }
.a_box .a_right img{ width:100%;}
.a_box .btn_box{ margin:0px 0 80px 0px; width:100%; height:auto; overflow: hidden; position: absolute; bottom: 0;}

@media only screen and (min-width: 0px) and (max-width: 1200px){
.a_box .a_left{ width:100%; }
.a_box .a_right{ margin:0px 0px 0px 0px; width:60%; }
}

.a_box02{ margin:-20px 0 0px 0px; padding:0px; width:100%; height:auto; overflow: hidden;}
.a_box02 .rd_box{ margin:0px 0 0px 0px; padding:0px 0 0px 0px; width:100%; height:auto; overflow: hidden; display: inline-flex; justify-content: flex-start;  }
.a_box02 .text_box{ margin:0px 0 0px 0px; padding:0px 70px 30px 80px; width:100%; height:auto; overflow: hidden; }

.a_box03{ margin:0px 0 0px 0px; padding:0px; width:100%; height:auto; overflow: hidden;}
.a_box03 .a_left{ margin:0px; padding:0; float:left; width: auto; }
.a_box03 .a_right{ margin:0px 0px 0px 100px; padding:45px 0px 0px 0px; float:left; width: auto;}

.a_title{ margin:0px 0 0px 0px; width:100%; }
.a_title h1{
	font-size: 60px;
	color:#2180EC;
	font-style: normal;
	font-weight: 700;
	font-family: 'Open Sans';
	width:100%; line-height:1;
}
.a_title h2{
	font-size: 46px;
	color:#9CC925;
	font-style: normal;
	font-weight: 700;
	font-family: 'Open Sans';
	width:100%;
	padding:0px 0px 0px 150px;
	margin:10px 0px 30px 0px; line-height:1;
}

.a_btn {
    padding: 10px 30px 12px 30px;
    margin: 0px 0px 0px 0px; width: auto; text-align:center;
    text-decoration: none;
    float:left;
    font-size: 20px; 
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border:3px solid #37aced;
	
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;

background: #2a9bef; /* Old browsers */
background: -moz-linear-gradient(top, #2a9bef 0%, #42a3eb 27%, #207cca 49%, #1d93bd 75%, #165783 99%, #165783 99%, #4ba3c7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2a9bef 0%,#42a3eb 27%,#207cca 49%,#1d93bd 75%,#165783 99%,#165783 99%,#4ba3c7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2a9bef 0%,#42a3eb 27%,#207cca 49%,#1d93bd 75%,#165783 99%,#165783 99%,#4ba3c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a9bef', endColorstr='#4ba3c7',GradientType=0 ); /* IE6-9 */
}
.a_btn:nth-child(2) {
    padding: 10px 30px 12px 30px;
    margin: 0px 0px 0px 0px; width: auto; text-align:center;
    text-decoration: none;
    float:left;
    font-size: 20px; 
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border:3px solid #4f4f4f;

border-radius: 0px;	
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;

background: #424243; /* Old browsers */
background: -moz-linear-gradient(top, #424243 0%, #687184 28%, #2b2d31 49%, #181818 75%, #030303 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #424243 0%,#687184 28%,#2b2d31 49%,#181818 75%,#030303 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #424243 0%,#687184 28%,#2b2d31 49%,#181818 75%,#030303 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424243', endColorstr='#030303',GradientType=0 ); /* IE6-9 */
}

.a_customer{ margin:0px 0 50px 0px; padding:40px 50px 30px 50px; width:calc(100% / 3); border-radius: 20px; position: relative;
background: red; /* Old browsers */
background: -moz-linear-gradient(top, #86c8f7 0%, #3d98ca 28%, #3d98ca 46%, #3386b1 50%, #1b71a4 75%, #1aa5d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #86c8f7 0%,#3d98ca 28%,#3d98ca 46%,#3386b1 50%,#1b71a4 75%,#1aa5d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #86c8f7 0%,#3d98ca 28%,#3d98ca 46%,#3386b1 50%,#1b71a4 75%,#1aa5d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1',GradientType=0 ); /* IE6-9 */
box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
}
.a_customer:nth-child(2){ margin:0px 0 50px 0px; padding:40px 55px 30px 55px; width:calc(100% / 3); border-radius: 22px; position: relative;
background: #aad674; /* Old browsers */
background: -moz-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1',GradientType=0 ); /* IE6-9 */
box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
}
.a_customer h1{ font-size: 20px; color:#020202; line-height:1.6; }
.a_customer p{ font-size: 16px; color:#fff; line-height:1.6; text-align:left;}
.a_customer:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-left: 8px solid rgba(0,0,0,0.2); border-radius: 20px;
}
.a_customer02{ margin:0px 0 0px 0px; padding:30px 70px 30px 70px; width:100%; border-radius: 20px; font-size:16px; color:#000; position: relative; height:auto; overflow: hidden;
background: #aad674; /* Old browsers */
background: -moz-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1',GradientType=0 ); /* IE6-9 */
}
.a_customer02:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-left: 8px solid rgba(0,0,0,0.2); border-radius: 20px;
	border-right: 8px solid rgba(0,0,0,0.2); border-radius: 20px;
}
.a_customer02 a{ color:#000; }
.a_customer02 .textbox{ margin:0px 40px 0px 0px; padding: 0px; width:calc(50% - 40px); float: left; position: relative; }
.a_customer02 .textbox:nth-child(2){ margin:0px 0 0px 40px; padding: 0px; width:calc(50% - 40px); float: left; position: relative;}
.a_customer02 .textbox .tt{ margin:0px 0 0px 0px; padding: 0px; width:100%; 
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.a_customer02 .textbox .tt img{ margin:0px 18px 0px 0px; width: 33px; }
@media only screen and (min-width: 0px) and (max-width: 350px){
.a_customer02 .textbox .tt img{ margin:5px 5px 0px 0px; width: 20px; }
}
@media only screen and (min-width: 0px) and (max-width: 980px){
.a_box02 .rd_box{ display: flex;
  flex-direction: column; }
.a_customer{ margin:0px 0 10px 0px; padding:30px; width:100%; }
.a_customer:nth-child(2){ margin:0px 0 10px 0px; padding:30px; width:100%; }
.a_box02 .text_box{ padding:30px 30px 30px 30px; width:100%; }

.a_title h1{
	font-size: 40px;	
}
.a_title h2{
	font-size: 30px;
	padding:0px 0px 0px 90px;
	margin:10px 0px 30px 0px; 
}

.a_btn {
    padding: 6px 20px 10px 20px; font-size: 20px; 

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.a_btn:nth-child(2) {
    padding: 6px 20px 10px 20px; font-size: 20px; 

border-radius: 0px;	
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

.a_box03 .a_right{ margin:0px 0px 0px 0px; padding:0px 0px 30px 0px; width:100%;}

.a_customer02{ padding:30px 30px 30px 30px; }
.a_customer02 .textbox{ margin:0px 0px 0px 0px; width:100%; }
.a_customer02 .textbox:nth-child(2){ margin:30px 0 0px 0px; width:100%;}
}
@media only screen and (min-width: 0px) and (max-width: 450px){
.a_title h1{
	font-size: 40px; text-align:left;	
}
.a_title h2{
	font-size: 30px;
	padding:0px 0px 0px 0px; text-align:left;
}
}

.about02 {
	position: relative;	
	width: 100%;
	height: auto;
}
.about_bg {
	width: 100%; position: absolute; z-index: -2;
	height: 100%;
	margin-top: 0;
    background-size: cover;
    background-position: center;
    background: url(../images/about_bg.gif) no-repeat;
}
.a_title02{ margin:0px 0 0px 0px; width:100%; text-align: center;}
.a_title02 h1{
	padding:3px 50px 6px 50px; 
    margin: 0px 0px 0px 0px;text-align:center;
    display: inline-block;
    font-size: 20px; 
    color: #fff; border-radius: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

background: #2d9ff1; /* Old browsers */
background: -moz-linear-gradient(top, #2d9ff1 0%, #44a7ed 32%, #1894ba 66%, #165d88 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2d9ff1 0%,#44a7ed 32%,#1894ba 66%,#165d88 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2d9ff1 0%,#44a7ed 32%,#1894ba 66%,#165d88 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d9ff1', endColorstr='#165d88',GradientType=0 ); /* IE6-9 */
}
.a_title02 h2{
	font-size: 26px;
	color:#1B3059; font-family: 'Estrangelo Edessa';
	font-style: normal;
	width:100%;
	padding:0px 0px 0px 0px;
	margin:30px 0px 0px 0px; 
}
.a_title_box{ margin:0px 0 0px 0px; width:100%; text-align: center; background: #fff; padding:40px 20px; height:auto; overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.a_title_box li{ font-size:21px; color:#1B3059; padding: 0; margin: 0 8% 0 8%; list-style: none; 
display: flex;
justify-content: center;
align-items: center;
}
.a_title_box li img{ margin: 0 10px 0 0; width: 70px; }
.a_box04{ margin:0px auto 60px auto; padding:0px; width:95%; height:auto; overflow: hidden;
display: flex;
  align-items: stretch;
}
.a_box04 ul{ margin:0px -70px 0px 0px; padding:35px 130px 35px 180px; width:calc(50% + 50px); height:auto; overflow: hidden; display: inline-block;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

background: #0fc458;
}
.a_box04 ul:nth-child(2){ margin:0px 0 0px -70px; padding:35px 130px 35px 180px; width:calc(50% + 50px); height:auto; overflow: hidden; display: inline-block;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

background: #0fb5da;
}
.a_box04 ul h1{ margin:0px 0 10px 0px; padding:0px; width:100%; color:#1B3059; font-family: 'Estrangelo Edessa'; font-size: 24px; line-height: 1.3;}
.a_box04 ul p{ margin:0px 0 0px 0px; padding:0px; width:100%; font-size: 16px; color:#fff; line-height: 1.6;}

.a_box05{ margin:30px auto 0px auto; padding:0px; width:100%; border: 3px solid #cbcbcb; border-radius: 10px; background: #fff;}
.cus {
	width: 100%;
}
.cus ul {
	width: 100%;
	text-align: center
}
.cus ul li {
	display: inline-block;
	width: calc(100% / 6 - 4px);
	position: relative;
	margin: 30px 0;
	padding: 0;
	vertical-align: text-top
}
.cus ul li img {
	width: 87px;
	padding: 0 0 0 15px
}
.cus ul li p {
	display: inline-block;
	width: 100%;
	padding: 0 0 0 0px;
	font-size: 16px
}
.cus ul li:before {
	content: '';
	display: block;
	width: 12px;
	height: 16px;
	background-image: url(../images/play-button.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left:0px;
	top: 30px;

}
.cus ul li:first-of-type:before {
	content: '';
	background: none
}
@media only screen and (min-width: 0px) and (max-width: 1200px){
.a_box04{ width:100%;}
.a_box04 ul{ margin:0px 0px 0px 0px; padding:40px; width:50%; 
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.a_box04 ul:nth-child(2){ margin:0px 0 0px 0px; padding:40px; width:50%; 
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.a_box05{ padding:0px 30px 0px 0px; }
}
@media only screen and (min-width: 0px) and (max-width: 767px){
.a_title_box li{ 
display: flex;
  flex-direction: column;
}
.a_box04{ display: flex;
  flex-direction: column; }
.a_box04 ul{ width:100%; }
.a_box04 ul:nth-child(2){ width:100%; }
}
@media only screen and (min-width: 771px) and (max-width: 980px){
.cus ul li {
	width: calc(100% / 4 - 4px);
}
}
@media only screen and (min-width: 480px) and (max-width: 770px){
.cus ul li {
	width: calc(100% / 3 - 4px);
}
}
@media only screen and (min-width: 0px) and (max-width: 479px){
.cus ul li {
	width: calc(100% / 2 - 4px);
}
}

/* -得獎認證--------------------------------------------------------------------------------------------------*/
.cer_bg{ margin:0px 0 0px 0px; padding:30px 0px; width:100%; background-image: url(../images/certification_bg.gif); position: relative;
background-size: cover;
background-position: center;
}
.cer_bg .ttbox{ margin:0px 0 0px 0px; padding:0px 0px; width:100%;  }
.cer_bg:before{ content: ''; top:207px; padding:0px 0px 0px 0px; width:calc(50% - 380px - 30px); height: 13px; background: #007ad0; display: block;
clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%); position: absolute;
}
.cer_bg:after{ content: 'PRODUDLY PRESENTED TO'; top:40px; right: 0; padding:0px 0px 0px 0px; width:55%; height: 130px; display: block; position: absolute;
clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%); font-family: 'Arial Rounded MT Bold';  font-style: bold; font-size: 18px; color: #fff;
letter-spacing: 5px;
display: flex;
justify-content: center;
align-items: center;

background: #009add; /* Old browsers */
background: -moz-linear-gradient(left, #009add 0%, #0077ce 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #009add 0%,#0077ce 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #009add 0%,#0077ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009add', endColorstr='#0077ce',GradientType=1 ); /* IE6-9 */
}
.cer_bg .ttbox .stt{ margin:0px 0 0px 0px; padding:0px 0px; width:auto; }
.cer_bg .ttbox .stt .icon { margin:0px 0 0px 100px;}
.cer_bg .ttbox .stt .icon img{ width: 165px; height: 155px;}
.cer_bg .ttbox .stt h1{ margin:0px 0 0px 0px; padding:0px 0px; font-family: 'Chairdrobe'; font-size: 66px; color: #0083fa;
letter-spacing: 15px;}
.cer_bg .ttbox .stt02{ margin:10px 0 0px 0px; padding:0px 0px; width:100%; 
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.cer_bg .ttbox .stt02 h2{ display: inline-block; font-family: 'Champagne & Limousines Thick'; font-size: 22px; 
color: #0083fa; letter-spacing: 5px; font-weight: 800;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.cer_bg .ttbox .stt02 h2:after{
	content: '';
	display: inline-block;
	width: 215px;
	height: 2px;
	background:#0083fa;
	margin:12px 20px 0px 20px;
} 
.cer_bg .ttbox .stt02 h3{ display: inline-block; font-size: 20px; color: #0083fa; }
.cer_bg .ttbox .stt02 h4{ display: inline-block; margin: -36px 0 0 25px;}
.cer_bg .ttbox .stt02 h4 img{ display:block; width: 25px; height: 72px; }
@media only screen and (min-width: 0px) and (max-width: 910px){
.cer_bg .ttbox .stt .icon { margin:0px 0 0px calc(50% - 320px);}
.cer_bg:before, .cer_bg:after{ display: none;}
.cer_bg .ttbox .stt{  text-align: center;}
.cer_bg .ttbox .stt02{ display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media only screen and (min-width: 0px) and (max-width: 800px){
.cer_bg .ttbox .stt h1{ font-size: 40px;}
.cer_bg .ttbox .stt .icon { text-align: center; margin:0px 0 0px 0px;}
.cer_bg .ttbox .stt .icon img{ width: 120px; height: 113px;}
}
@media only screen and (min-width: 0px) and (max-width: 760px){
.cer_bg .ttbox .stt02 h2{ display: none;}	
.cer_bg .ttbox .stt02 h4 { display: none;}
}



/* cer_item */
.cer_item{  width:100%; margin: 0px auto 0 auto; padding:0px 30px 0px 30px; }
.cer_item .slick-prev:before, .cer_item .slick-next:before { font-size: 0; }
.cer_item .slick-prev, .cer_item .slick-next {  width: 22px; height: 36px; background-image: url("../images/arrow.png"); background-repeat: no-repeat; background-size: auto 100%; top: 47.2%; }
.cer_item .slick-prev { background-position: 0px top; left: -25px; transition: all 0.6s;}
.cer_item .slick-next { background-position: -22px top; right: -25px; transition: all 0.6s;}
.cer_item .slick-prev:hover,
.cer_item .slick-prev:focus,
.cer_item .slick-next:hover,
.cer_item .slick-next:focus
{
    transform: translate(0px, -10px);
}
.cer_pd{ margin:0px 0 50px 0px; width:100%; }
.cer_pd li{ margin:40px 10px 40px 10px; padding:20px; width:calc(100% / 3 - 20px); text-align: center; list-style:none; display: block; float:left; transition: all 0.6s;}
.cer_pd li:hover {transform: translate(0px, -10px); box-shadow: 2px 2px 10px rgba(0,0,0,0.3); border-radius: 10px; }
.cer_pd li .date{ margin:0px 0px 15px 0px; width:100%; color: #0083fa; font-size: 15px; font-family: 'Open Sans';}
.cer_pd li .date:before{
	display: inline-block;
	content     : '✓';
	width       : 20px;
	color       : #0083fa;
	font-size   : 15px;
	line-height : 18px;
	text-align  : center;
} 
.cer_pd li .no{ margin:0px 0px 12px 0px; width:100%; color: #0083fa; font-size: 15px;}
.cer_pd li .txt{ margin:0px 0px 12px 0px; width:100%; color: #231815; font-size: 16px; line-height: 1.5;}
.cer_pd li .pic{ margin:0px 0px 0px 0px; width:100%; }
.cer_pd li .pic img{ width:100%; border: 2px solid #0083fa; border-radius: 10px;}
@media only screen and (min-width: 481px) and (max-width: 768px){
.cer_pd li{ margin:20px 10px 30px 10px; padding:0px 0px 20px 0px; width:calc(100% / 2 - 20px); }
}
@media only screen and (min-width: 0px) and (max-width: 480px){
.cer_pd li{ width:100%; margin:20px 0 30px 0;}
}

.cer_pd02{ margin:0px 0 50px 0px; width:100%; }
.cer_pd02 li{ margin:40px 10px 45px 10px; padding:20px; width:calc(100% / 2 - 20px); text-align: center; list-style:none; display: block; float:left; transition: all 0.6s;}
.cer_pd02 li:hover {transform: translate(0px, -10px); box-shadow: 2px 2px 10px rgba(0,0,0,0.3); border-radius: 10px; }
.cer_pd02 li .date{ margin:0px 0px 15px 0px; width:100%; color: #0083fa; font-size: 15px; font-family: 'Open Sans';}
.cer_pd02 li .date:before{
	display: inline-block;
	content     : '✓';
	width       : 20px;
	color       : #0083fa;
	font-size   : 15px;
	line-height : 18px;
	text-align  : center;
} 
.cer_pd02 li .no{ margin:0px 0px 12px 0px; width:100%; color: #0083fa; font-size: 15px;}
.cer_pd02 li .txt{ margin:0px 0px 12px 0px; width:100%; color: #231815; font-size: 16px; line-height: 1.5;}
.cer_pd02 li .pic{ margin:0px 0px 0px 0px; width:100%; }
.cer_pd02 li .pic img{ width:100%; border: 2px solid #0083fa; border-radius: 10px;}
@media only screen and (min-width: 481px) and (max-width: 768px){
.cer_pd02 li{ margin:20px 10px 30px 10px; padding:0px 0px 20px 0px; width:calc(100% / 2 - 20px); }
}
@media only screen and (min-width: 0px) and (max-width: 480px){
.cer_pd02 li{ width:100%; margin:20px 0 30px 0;}
}

.cer_view{ margin:30px 0 60px 0; width:100%; height:auto; overflow: hidden;}
.cer_view .date{ margin:0px 0 8px 0px; width:100%; font-size: 17px; color: #1B3059; font-family:Arial;}
.cer_view .ctt{ margin:0px 0 12px 0px; width:100%; font-size: 17px; color: #1B3059; line-height: 1.5;}
.cer_view .cbox{ margin:0px 6px 6px 6px; width:calc(100% - 12px); border: 2px solid #c8e9f2; padding: 80px; position: relative;}
.cer_view .t01{ top:-6px; left: 0; width:198px; height: 12px; background: #c8e9f2; display: block; position: absolute;}
.cer_view .t02{ top:-6px; left: -6px; width:12px; height: 62px; background: #c8e9f2; display: block; position: absolute;}
.cer_view .t03{ bottom:0; right: -6px; width: 12px; height: 60px; background: #c8e9f2; display: block; position: absolute;}
.cer_view .t04{ bottom:-6px; right: -6px; width:204px; height: 12px; background: #c8e9f2; display: block; position: absolute;}
.cer_view .cbox .pic{ margin:0px 0 20px 0px; width:100%; border: 1px solid #c8e9f2; border-radius: 5px;}
.cer_view .cbox .pic img{ width:100%; border-radius: 5px;}
.cer_view .cbox02{ margin:6px 6px 6px 6px; width:calc(100% - 12px); border: 2px solid #c8e9f2; padding: 44px; position: relative;}
.cer_view .cbox02 .cer_list{ margin:0px 0px 20px 0px; width:100%; border-bottom: 1px dashed #c8e9f2; padding: 0px 0px 10px 0px; }
.cer_view .cbox02 .cer_list:last-of-type{ margin:0px 0px 0px 0px; width:100%; border-bottom: none; padding: 0px 0px 0px 0px; }
.cer_view .cbox02 .txt{ width:100%; padding: 10px; }
.cer_view .cbox02 .pic{ margin:0px 0 0px 0px; width:100%; padding: 10px;}
.cer_view .cbox02 .pic img{ width:100%; }
.cer_view .cbox02 .name{ width:100%; padding:0px 10px 10px 10px; font-size: 16px; color: #1B3059; text-align: right;}
.cer_view .cbox02 .icon{ width:100%; padding:0px 10px 0px 10px; 
display: inline-flex; justify-content: flex-end; align-content: center; align-items: center; 
}
.cer_view .cbox02 .icon .download {
	font-size: 15px; color: #fff; border-radius: 25px; padding: 5px 15px;
	display: inline-flex; justify-content: flex-start; align-content: center; align-items: center; background: #33cdff; position: relative;
}
.cer_view .cbox02 .icon .download:after{
	content: ''; position: absolute; margin: 0 0 0 23px;
	width: 1px;
	height: 18px; 
	background:#fff;
}
.cer_view .cbox02 .icon .download:before{
	content: ''; 
	width: 18px; 
	height: 18px; 
	background-image: url(../images/icon_download.svg);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.cer_view .cbox02 .icon .download:hover {
	background:#b8ec03; 
}
.cer_view .cbox02 .icon .download span {
	padding:0px 0 0px 15px;
}
.cer_view .cbox02 .icon .download:hover span{
	color: #fff;
}
.cer_view .cbox02 .icon .view {
	font-size: 15px; color: #fff; border-radius: 25px; padding: 5px 15px; margin: 0 5px 0 0px;
	display: inline-flex; justify-content: flex-start; align-content: center; align-items: center; background: #33cdff; position: relative;
}
.cer_view .cbox02 .icon .view:after{
	content: ''; position: absolute; margin: 0 0 0 23px;
	width: 1px;
	height: 18px; 
	background:#fff;
}
.cer_view .cbox02 .icon .view:before{
	content: ''; 
	width: 18px; 
	height: 18px; 
	background-image: url(../images/icon_view.svg);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.cer_view .cbox02 .icon .view:hover {
	background:#b8ec03; 
}
.cer_view .cbox02 .icon .view span {
	padding:0px 0 0px 15px;
}
.cer_view .cbox02 .icon .view:hover span{
	color: #fff;
}
@media only screen and (min-width: 0px) and (max-width: 800px){
.cer_view .cbox{ padding: 20px; }
.cer_view .cbox02{ padding: 20px; }
}
@media only screen and (min-width: 0px) and (max-width: 350px){
.cer_view .cbox02 .icon .download, .cer_view .cbox02 .icon .view {padding: 5px 10px;}
}

.cer_box{ margin:0px 0 0px 0; width:100%; height:auto; overflow: hidden; }
.cer_ttbox{ margin:0px 0 0px 0; width:100%; text-align: center; }

.cer_ttbox h1{ margin:0px 0 0px 0; padding:0; text-align: center; width:100%; font-size: 30px; color: #3E3A39; font-weight: bold; letter-spacing: 5px;}
.cer_ttbox h2{ margin:0px 0 20px 0; padding:0; text-align: center; width:100%; font-size: 30px; color: #3E3A39; font-family: 'Jott44WideNormal';}
.cer_ttbox h3{ margin:0px 0 0px 0; padding:0; width:100%; position: relative;}
.cer_ttbox h3:before{ 
    content: ''; position: absolute; z-index: -1;
    display: block; top: 6px; left: 0;
    width: 40%;
    height: 3px;
    background: #03acc2;
}
.cer_ttbox h3:after{ 
    content: ''; position: absolute; z-index: -1;
    display: block; top: 6px; right: 0;
    width: 40%;
    height: 3px;
    background: #03acc2;
}
.cer_ttbox h3 .spanbox{ margin:0px 0 0px 0; padding:0px 10px; width:auto; background: #fff; display: inline-block;}
.cer_ttbox h3 span{ margin:0px 8px 0px 8px; padding:0; width:10px; height: 10px; background: #A5B8C6; border-radius: 50%; display: inline-block;}

.cer_list{ margin:60px 0 60px 0; width:100%; height:auto; overflow: hidden; }
.cer_list ul{ margin:0px 0 0px 0; padding: 0; list-style: none; width:100%; }
.cer_list ul li{ margin:0px 0 40px 0; padding: 0; list-style: none; width:calc(100% / 2); text-align: center; float: left;}
.cer_list ul li .pic{ margin:0px auto 20px auto; padding: 0; width:160px; height: 220px;
background-image: url(../images/cer_pic_bg.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.cer_list ul li .pic img{ width: 90px; margin: 30px 0 0 0;}
.cer_list ul li h1{ font-size: 15px; color: #231815; margin:5px 0 0px 0; width:100%; line-height: 1.5;}
.cer_list ul li h2{ color: #231815; font-size: 15px; line-height: 1.5; margin:5px 0 0px 0; width:100%; }
.cer_list ul li .more{ 
    padding: 8px 15px;
    margin: 10px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #0088CC;
    border: 1px solid #0088CC;
    text-align: center;
}
.cer_list ul li .more:hover{ 
    background: #0088CC; color: #fff;
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.cer_list ul li{ width:100%; }
}

.cer_list02{ margin:60px auto 0px auto; width:90%; height:auto; overflow: hidden; }
.cer_list02 ul{ margin:0px 0 60px 0; padding: 0; list-style: none; width:100%; height:auto; overflow: hidden;
}
.cer_list02 ul .picbox{ margin:0px 0 0px 0; padding: 0; list-style: none; text-align: center; float: left; width:420px; position: relative;}
.cer_list02 ul .picbox .pic{ margin:0px 0px 20px 100px; padding: 0; width:220px; height: 160px;
background-image: url(../images/cer_pic_bg02.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.cer_list02 ul .picbox .pic img{ width: 90px; margin: 30px 0 0 -60px;}
.cer_list02 ul .picbox h1{ font-size: 16px; color: #231815; margin:10px 0 0px 0px; width:100%; font-family: Arial;}
.cer_list02 ul .picbox h2{ font-size: 16px; color: #231815; margin:10px 0 0px 0px; width:100%; }
.cer_list02 ul .spanbox{ margin:72px 0px 0px 325px;  float: left; position:absolute;}
.cer_list02 ul span{ margin:0px 8px 0px 8px; padding:0; width:10px; height: 10px; background: #A5B8C6; border-radius: 50%; display: inline-block;}
.cer_list02 ul .textbox {
  width: calc(100% - 420px); float: left; margin:0px 0 0px 0px; 
  border: 1px solid #27a9e0; border-radius: 5px;
  background-color: #f4f4f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 25px 25px; position: relative;
  font-size: 16px; color: #231815; line-height: 1.4; min-height: 160px;
  display: flex;
  align-items: center;
}
.cer_list02 ul .textbox:before{
  position: absolute;
  top: 65px;
  font-size: 23px;
  font-family: 'Font Awesome 5 Free';
  color: #f4f4f4;
  filter: drop-shadow(-1px 0px 0px rgba(39, 169, 224, 1));
  content: "\f0d9";
  left: -8px;
  font-weight: 900;
}
@media only screen and (min-width: 0px) and (max-width: 900px){
.cer_list02 ul .picbox{ width: 100%;}
.cer_list02 ul .picbox .pic{ margin:0px auto 20px auto; padding: 0; width:160px; height: 220px;
background-image: url(../images/cer_pic_bg.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.cer_list02 ul .picbox .pic img{ margin: 30px 0 0 0;}
.cer_list02 ul .picbox h1{ margin:10px 0 0px 0px;}
.cer_list02 ul .picbox h2{ margin:10px 0 0px 0px; }
.cer_list02 ul .spanbox{ display: none;}
.cer_list02 ul .textbox {
  width: 100%; margin:20px 0 0px 0px; 
  min-height:auto;
}
.cer_list02 ul .textbox:before{
  top: -20px;
  content: "\f0d8";
  left:calc(50% - 8px );
  filter: drop-shadow(0px -1px 0px rgba(39, 169, 224, 1));
}
}


.patent_box{ margin:30px 0 0px 0; width:100%; height:auto; overflow: hidden; }

.cer_view02{ margin:0px 0 0px 0; width:100%; height:auto; overflow: hidden; border-top: 15px solid #13536c;}
.triangle_box{ margin:0px 0 0px 0; width:100%; height:auto; overflow: hidden; position: relative;
display: flex;
  justify-content: center;
}
.triangle_box .tri_main{ margin:0px 0 0px 0; width:110px; height:50px; background: #3faedc; display: block;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.triangle_box:before{ content: ''; top:0; left: 0; padding:0px 0px 0px 0px; width:calc(50% - 60px - 20px); height: 15px; background: #3faedc; display: block;
clip-path: polygon(0 0, 98% 0, 100% 100%, 0 100%); position: absolute;
}
.triangle_box:after{ content: ''; top:0; right: 0; padding:0px 0px 0px 0px; width:calc(50% - 60px - 20px); height: 15px; background: #3faedc; display: block;
clip-path: polygon(2% 0, 100% 0%, 100% 100%, 0 100%); position: absolute;
}

.history_box{ margin:0px 0 0px 0; width:100%; text-align: center; }
.history_box h1{ margin:0px 0 20px 0; font-size: 30px; color: #073a79; font-weight: bold; letter-spacing: 5px;}
.history_box .icon_box{ display: flex;
  justify-content: center;	 align-items: flex-end; position: relative;}
.history_box .icon_box:before{ 
	content: ''; position:absolute;
	display: block;
	width: 460px;
	height: 3px;
	background:#0ebecd; top:80px; z-index: -1;
}
.history_box .icon_box h2{ color: #4e81b0; font-family: 'Open Sans'; font-size: 20px; margin:0px 0 20px 0; }
.history_box .icon_box h2:after{ 
	content: '';
	display: block;
	width: 220px;
	height: 1px;
	background:#6b6b6b;
	margin:10px 0px 10px 0px; padding:0px 0px 0px 0px; 
}
.history_box .icon_box h3{ color: #4e81b0; font-family: 'Open Sans'; font-size: 20px; margin:0px 0 20px 0;}
.history_box .icon_box h3:after{ 
	content: '';
	display: block;
	width: 220px;
	height: 1px;
	background:#6b6b6b;
	margin:10px 0px 10px 0px; padding:0px 0px 0px 0px; 
}
.history_box .icon_box .icon{ 
	display: inline-block;
	width: 160px;
	height: 160px;
	background-image: url(../images/icon_history.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media only screen and (min-width: 0px) and (max-width: 640px){
.history_box .icon_box h2{  display: none; }
.history_box .icon_box h3{  display: none; }
.history_box .icon_box:before{ display: none; }
}

#conference-timeline {
  position: relative;
  max-width: 1220px;
  width: 90%;
  margin: 0 auto;
}
#conference-timeline .conference-center-line {
  position: absolute;
  width: 3px;
  height: 90%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: #00b0bd;
  z-index: -1;
}
#conference-timeline .conference-timeline-content {
  padding-top: 67px;
  padding-bottom: 67px;
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 0px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid #ddd; border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 25px;
}
.timeline-article h2 {
  margin: 0 0 5px 0px;
  padding: 0;
  color: #202757;
  font-size: 16px;
}
.timeline-article h3 {
  margin: 0 0 5px 0px;
  padding: 0;
  color: #202757;
  font-size: 18px; font-weight: bold;
}
.timeline-article h4 {
  margin: 0 0 15px 0px;
  padding: 0;
  color: #202757;
  font-size: 14px; 
}
.timeline-article p {
  margin: 0 0 0px 0px;line-height: 1.2;
  padding: 0;
  color: #666;
  font-size: 16px; 
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
  float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
  position: absolute;
  top: 20px;
  font-size: 23px;
  font-family: 'Font Awesome 5 Free';
  color: #fff;
  filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
}
.timeline-article .content-left:before {
  content: "\f0da";
  right: -8px;
  filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.2));
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.timeline-article .content-right:before {
  content: "\f0d9";
  left: -8px;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 102px;
  height: 102px;
  margin-left: -51px;
  color: #fff;
  border-radius: 100%;
  background: #FFF;
  border: 3px solid #00b0bd;
}
.timeline-article .meta-date .pic{
  display: block;
  text-align: center; padding:   10px;  
}
.timeline-article .meta-date .pic img{
  border-radius: 100%; width: 100%
}

/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    margin: 0;
  }
  #conference-timeline .conference-center-line {
    margin-left: 0;
    left: 50px;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
  }
  .timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
  }
  .timeline-article .content-right:before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .timeline-article p {
    margin: 0;
  }
}
/*===== // Resonsive Vertical Timeline =====*/

/* -最新消息--------------------------------------------------------------------------------------------------*/
.news_bg{ margin:50px 0 80px 0px; padding:60px 0px 0px 80px; width:100%; background-image: url(../images/news_bg.svg); position: relative;
background-size: cover;
background-position: center;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.news_bg .n_icon{ position: absolute; top: 0; right: 0; background-image: url(../images/icon_news02.svg); width: 220px; height: 250px;
background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.news_bg .n_icon02{ position: absolute; top:-35px; right: 0; background-image: url(../images/icon_news04.png); width: 320px; height: 240px;
background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.news_bg .ttbox{ margin:0px 0 0px 0px; padding:0px 0px; width:auto;  
display: flex;
align-items: flex-start;
}

.news_bg .ttbox .icon { margin:0px 30px 0px 0px; display: inline-block;}
.news_bg .ttbox .icon img{ width: 80px;}
.news_bg .ttbox .sttbox{ margin:0px 0 0px 0px; padding:0px 0px; width:auto; display: inline-block;}
.news_bg .ttbox .stt{ margin:0px 0 0px 0px; padding:0px 0px; width:auto; display: block;}
.news_bg .ttbox h1{ margin:0px 0 0px 0px; padding:0px 0px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 42px; color: #fff;
letter-spacing: 2px; font-weight: 800; white-space:nowrap;}
.news_bg .ttbox .stt{ margin:10px 0 0px 0px; padding:0px 0px; display: block; 
display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.news_bg .ttbox .stt h2{  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 22px; color: #fff;
display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
} 
.news_bg .ttbox .stt h3{  font-size: 20px; color: #fff; margin:0px 0 0px 5px;}
@media only screen and (min-width: 0px) and (max-width: 1050px){
.news_bg{ padding:40px 0px 0px 40px; }
.news_bg .n_icon{ width: 150px; height: 170px;}
.news_bg .n_icon02{ top:0px; width: 200px; height: 150px;}

.news_bg .ttbox h1{ font-size: 30px; letter-spacing: 1px;}
.news_bg .ttbox .stt h2{ font-size: 18px; }
.news_bg .ttbox .stt h3{ font-size: 18px; }
}	
@media only screen and (min-width: 0px) and (max-width: 760px){
.news_bg{ margin:50px 0 50px 0px; }
.news_bg .n_icon{ display: none;}
.news_bg .n_icon02{ display: none;}
}	
@media only screen and (min-width: 0px) and (max-width: 630px){
.news_bg .ttbox h1{ font-size: 26px; }
.news_bg .ttbox .stt h2{ display: none; }
}	
@media only screen and (min-width: 0px) and (max-width: 450px){
.news_bg{ padding:30px 0px 30px 0px; }
.news_bg .ttbox .sttbox{ margin:0px auto; }
.news_bg .ttbox h1{ text-align: center;}
.news_bg .ttbox .icon { display: none; margin:0px; }
.news_bg .ttbox .stt{  display:block; text-align: center;}
.news_bg .ttbox .stt h3{ text-align: center;} 
}
.news_content {
	position: relative;	
	width: 100%;
	height: auto; margin:0px 0 60px 0px; 
}
.news_bgbox{ margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; height: 100%; background:#efefef; position:  absolute; top: 0; z-index: -2}
.news_content:before{ content: '';  margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; height: 157px; 
background:#333; display: block; position:  absolute; top: 0; z-index: -1}
.news_content:after{ content: '';  margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; height: 160px; 
background:#333; display: block; position:  absolute; bottom: 0; z-index: -1}
.news_line{ width:100%; height:5px; display: block; background: #fff; position:absolute; bottom:60px; }

.news{ margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; }
.news ul{ width:100%; margin:0px auto 0px auto; padding:0px 0; list-style: none; height:auto; overflow: hidden; 
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
}
.news ul li{ width:calc(100%/3 - 120px/2 ); margin:0px auto; padding:60px 0 0px 0; list-style: none; position: relative; }
.news ul li.green{ width:calc(40% - 120px/2 ); margin:0px auto; padding:60px 0 0px 0; list-style: none; position: relative; }
.news ul li.green .icon{ width:80px; height: 60px; display: block; position: absolute; right: 0; top: 30px;
background-image: url(../images/icon_news03.svg); 
background-size: cover;
background-position: center;
}
.news ul li .date{ width:100%; margin:0px 0px 10px 0px; padding:10px 0; text-align: center; color: #333; font-family:Arial;
background-image: url(../images/news_bg.svg); 
background-size: cover;
background-position: center;
}
.news ul li.green .date{ width:75%; margin:0px 0px 10px 0px; padding:10px 0; text-align: center; background:#c6ff00; color: #333;}
.news ul li .pic{ width:100%; margin:0px 0px; padding:0; background: #fff; position: relative;}
.news ul li .pic img{ width:100% ; padding:5px;}
.news ul li:hover .pic{box-shadow: 2px 2px 10px rgba(0,0,0,0.3);}
.news ul li .title{ width:85%; margin:60px auto 20px auto; padding:0 0 0 0; font-size: 16px; color: #fff; text-align: center; line-height: 1.5;
		height: 50px;
		display: -webkit-box;
		display: -moz-box;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
}
.news ul li .title p{ width:100%; font-family:Arial;}
.news ul li:hover .title{ color: #44d2f8;}
.news ul li.green:hover .title{ color: #c3fe02;}
.news ul li .line{ width:100%; height:5px; display: block; margin:0px 0px 60px 0px; }
.news ul li .line:after { 
    content: '';
    display: block; margin: 0px 0 0 0;
    width: 0;
    height: 5px;
    background: #44d2f8;
    transition: width .5s;
}
.news ul li:hover .line:after { width:100%; transition: width .5s;}
.news ul li.green .line:after { 
    content: '';
    display: block; margin: 0px 0 0 0; position: absolute; z-index: 2;
    width: 0;
    height: 5px;
    background: #c3fe02;
    transition: width .5s;
}
.news ul li.green .line:before, .news ul li:first-child .line:before { 
    content: '';
    display: block; margin: 0px 0 0 0; position: absolute; z-index: 1;
    width: 100%;
    height: 5px;
    background: #fff;
}
.news ul li.green:hover .line:after { width:100%; transition: width .5s;}
.news ul li.green .line .news_ball{ width:28px; height:28px; display: block; background: #c6ff02; border: 8px solid #fff; position:absolute; z-index: 3; bottom:50px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;}
.news ul li .line .news_ball{z-index: 3; width:28px; height:28px; display: block; background: #41cbef; border: 8px solid #fff; position:absolute; bottom:50px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;}
@media only screen and (min-width: 0px) and (max-width: 1023px){
.news ul li{ width:calc(100%/3 - 60px/2 ); }
}
@media only screen and (min-width: 0px) and (max-width: 768px){
.news ul li.green, .news ul li:first-child { width:100%; }
.news ul li.green:after, .news ul li:first-child:after{ content: '';  margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; height: 160px; 
background:#333; display: block; position:  absolute; bottom: 0; z-index: -1}
.news ul li.green .line .news_ball, .news ul li:first-child .line .news_ball{ left:calc(50% - 14px); }
.news ul li{ width:calc(100%/2 - 60px/2 ); }
}	
@media only screen and (min-width: 0px) and (max-width: 500px){
.news ul li .date{ padding:7px 0; 
font-size:14px;
}
.news ul li.green .date{ padding:7px 0; width:70%;
font-size:14px;}
}

/* -產品介紹--------------------------------------------------------------------------------------------------*/
.pd{ margin:0px 0 30px 0px; width:100%; height:auto; overflow: hidden;
display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.pd li{ margin:20px 15px 20px 15px; padding:0px 0px 0px 0px; width:calc(100% / 3 - 30px); list-style:none; transition: all 0.6s;}
.pd li .pic{line-height: 0; margin:0px 0px 10px 0px; width:100%; position: relative; border: 2px solid #85d0e4; border-radius: 5px;}
.pd li:hover .pic{box-shadow: 2px 2px 10px rgba(0,0,0,0.3);  }
.pd li:hover {transform: translate(0px, -10px); }
.pd li .pic img{ width:100%;}
.pd li .title{ margin:0px 0px 0px 0px; width:100%; font-size:16px; color: #1B3059; text-align: center;}
@media only screen and (min-width: 481px) and (max-width: 800px){
.pd li{ width:calc(100% / 2 - 30px); }
}

@media only screen and (min-width: 0px) and (max-width: 480px){
.pd li{ width:100%; margin:20px 0px 30px 0px;}
}


.prev[data-v-43e93932] {
    width: 42px !important; 
    height: 42px !important;
    line-height: 42px !important;
    font-size: 0px !important;
    background:url(../images/pd_arrow01.png) no-repeat; background-size: cover; display: block; 

    position: absolute;
    z-index: 1010;  
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    top: 0; 
}
.next[data-v-43e93932] {
    width: 42px !important; 
    height: 42px !important;
    line-height: 42px !important;
    font-size: 0px !important;
    background:url(../images/pd_arrow02.png) no-repeat; background-size: cover; display: block; 

    position: absolute;
    z-index: 1010;  
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    top: 0;
}
@media only screen and (min-width: 0px) and (max-width: 480px){
.prev[data-v-43e93932], .next[data-v-43e93932] {margin-top: 70px;}
}

.pd_view{ margin:0px 0 0px 0px; width:99%; }
@media only screen and (min-width: 412px) and (max-width: 450px){
.pd_view{ width:calc(99% - 8px); }
}
@media only screen and (min-width: 380px) and (max-width: 411px){
.pd_view{ width:calc(99% - 5px); }
}

/* -應用影片--------------------------------------------------------------------------------------------------*/
.video_title{ margin:0px 0px 0px 0px; padding:0px 43px 0px 43px; width:100%;}
.video{ margin:30px auto 20px auto; width:90%; height:auto; overflow: hidden;
display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.video li{ margin:0px 0px 30px 0px; padding:0px 0px 0px 0px; width:calc(100%/2 - 15px); list-style:none; transition: all 0.6s; }
.video li .pic{ margin:0px 0px 0px 0px; width:100%; position: relative;}
.video li .pic .zoom{ display: none; }
.video li .pic:hover .zoom { position: absolute; 
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../images/icon_zoom.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left:calc(50% - 25px);
	top:calc(50% - 25px);
}
.video li .pic img{ width:100%;}
.video li:hover .pic:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}
@media only screen and (min-width: 0px) and (max-width: 1100px){
.video_title{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width:100%;}
}	
@media only screen and (min-width: 0px) and (max-width: 480px){
.video li{ width:100%; margin:20px 0px 30px 0px;}
}
.left_catalog{ margin:0px auto 0px auto; width:100%; display: none;}
@media only screen and (min-width: 0px) and (max-width: 1100px){
.left_catalog{ display: block;}
.left_catalog .tt{  background: #2b7fa1; color: #FFF;}
.left_catalog a{ color:#1B3059; }
}


/* -產品應用--------------------------------------------------------------------------------------------------*/
.application{ margin:0px 0 30px 0px; width:100%; height:auto; overflow: hidden;}
.app_tt{ margin:0px 0 0px 0px; width:100%; color: #006481; font-size:30px;
display: flex;
  flex-direction: column;
  justify-content: center;
}
.app_tt { width:100%; margin:50px 0 0px 0; padding:0px 0 5px 0; color: #006481; font-size:30px; text-align:center;}
.app_tt:after {
	content: '';
	margin: 20px 0px 10px 50%; padding:0; width:2px; height:50px; display: block; background:#4ecbe7; 
}
.app_ttbox{ margin:0px auto; width:600px; height:auto; overflow: hidden; text-align: center; font-size:16px; color: #1B3059; line-height: 1.5;}

.app_icon {
	width: 80%; margin: 30px auto 0 auto; 
}
.app_icon ul {
	width: 100%; padding: 0; list-style: none; margin: 0;
	text-align: center
}
.app_icon ul li {
	display: inline-block;
	width: calc(100% / 4 - 4px);
	position: relative;
	margin: 30px 0;
	padding: 0; list-style: none;
	vertical-align: text-top
}
.app_icon ul li img {
	width: 70px;
	padding: 0 0 0 0px
}
.app_icon ul li p {
	display: inline-block;
	width: 100%; margin: 20px 0 0 0px;
	padding: 0 0 0 0px;
	font-size: 16px color:#1B3059;
}
.app_icon ul li a p {
	color:#1B3059;
}
.app_icon ul li a:hover p {
	color:#0088CC;
}
@media only screen and (min-width: 0px) and (max-width: 950px){
.app_icon, .app_ttbox {	width: 100%; }
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.app_icon ul li {width: calc(100% / 2 - 4px);}
}
.application02{ margin:0px 0 0px 0px; width:100%; }
.application02 .alist{ margin:0px 0 0px 0px; width:100%; position: relative; display: flex; 
align-items: stretch;}
.application02 .alist .pic{ margin:0px 0 0px 0px; padding: 0; width:50%; 
margin-left: auto;
order: 2;

background-size: cover;
background-position: center; height: 100vw;
max-height: 430px;
}
.application02:nth-child(2n+0) .alist .pic{ margin:0px 0 0px 0px; padding: 0; width:50%; 

background-size: cover;
background-position: center; height: 100vw;
max-height: 430px; 
}
@media only screen and (min-width: 1680px) and (max-width: 2000px){
.application02 .alist .pic img{ height: 50%; background-size: cover;
    background-position: center;}
}
.application02 .alist .txtbox{ margin:0px 0 0px 0px; padding:30px 30px; width:50%; position: relative; 
}
.application02:nth-child(2n+0) .alist .txtbox{ margin:0px 0 0px 0px; padding:30px 30px; width:50%; position: relative; 
margin-left: auto;
order: 2;
}
.application02 .alist .atxtbox{ width:calc(1100px / 2); float: right;}
.application02:nth-child(2n+0) .alist .atxtbox{ width:calc(1100px / 2); float: left;}
.application02 .alist .atxtbox h1{ margin:0px 0 0px 0px; width:100%; color: #1B3059; font-size:20px; }
.application02 .alist .atxtbox h1:after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background:#52cae9;
	margin:10px 0px 0px 0px;
} 
.application02 .alist .atxtbox p{ margin:20px 0 0px 0px; width:100%; color: #231815; font-size:16px; line-height: 1.6; }
.application02 .alist .morebox{ width:auto; color: #231815; font-size:24px; font-weight: bold;  position: absolute; bottom: 25px; right:30px; }
.application02:nth-child(2n+0) .alist .morebox{ width:auto; color: #231815; font-size:24px; font-weight: bold;  position: absolute; bottom: 25px; left:30px;  
margin-left: auto;
order: 2;
}
.application02 .alist .morebox i{ display:inline-block;  }
.application02 .alist .morebox i:before{ content: "\f101"; margin:0px 0px 0px 5px; font-family: 'Font Awesome 5 Free'; color: #0088CC; font-size:18px; font-style:normal;}
.application02:nth-child(2n+0) .alist .morebox i:before{ content: "\f100"; margin:0px 5px 0px 0px; font-family: 'Font Awesome 5 Free'; color: #0088CC; font-size:18px; font-style:normal; }
.application02 .alist .more{
	padding: 8px 15px ; 
	margin: 0px 0px 0px 0px; 
	text-decoration:none; 
	display:inline-block; 
	font-size:12px; font-family:Arial;
	color: #0088CC; border:1px solid #0088CC; text-align:center; 
}

.application02 .alist .morebox a.active i:before{
    content: "\f103"; 
}
@media only screen and (min-width: 0px) and (max-width: 1500px){
.application02 .alist .pic, .application02:nth-child(2n+0) .alist .pic{ height: 60vw;}
}
@media only screen and (min-width: 0px) and (max-width: 1400px){
.application02 .alist .atxtbox{ width:100%; }
.application02:nth-child(2n+0) .alist .atxtbox{ width:100%;}
} 
@media only screen and (min-width: 0px) and (max-width: 899px){
.application02 .alist{ margin:0px 0 0px 0px; width:100%; position: relative; display: flex;
  flex-direction: column;}
.application02 .alist .pic{ width:100%; display: block;  
margin-left:auto;
order: 0;
}
.application02:nth-child(2n+0) .alist .pic{ width:100%; display: block;  
}
.application02 .alist .txtbox{ width:100%; }
.application02:nth-child(2n+0) .alist .txtbox{ width:100%;
margin-left: 0;
order: 0;
}
.application02 .alist .morebox{ position: relative; bottom: 0px; left:0px; top:10px;}
.application02:nth-child(2n+0) .alist .morebox{ position: relative; bottom: 0px; left:0px; top:10px;}
} 

.app_expand{ margin:0px 0 0px 0px; width:100%; border-left:2px solid #52cae9; border-right:2px solid #52cae9; padding: 10px 20px; }
@media only screen and (min-width: 0px) and (max-width: 600px){
.app_expand{ text-align: left !important; }
} 
/* -技術下載--------------------------------------------------------------------------------------------------*/
.left_bookbox{ margin:50px auto 0px auto; padding:0px 0px; width:90%; text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
 }
.left_bookbox h1{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; color: #57a2d3; font-size:26px; font-family: 'Open Sans'; font-weight: bold;}
.left_bookbox h2{ margin:10px 0 0px 0px; padding:0px 0px; width:100%; color: #57a2d3; font-size:24px; font-family: 'Open Sans'; }
.left_bookbox h2:after {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background:#0080b7;
	margin:10px 0px 0px 0px;
}
.left_bookbox h3 {
	display: block;
	width: 110px;
	height: 60px;
	background-image: url(../images/icon_book.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin:20px 0px 0px 0px;
}
.download_box{ margin:-15px auto 20px auto; padding:0px 0px; width:90%; }
.download_box .linebox{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; border-top: 10px solid #02637f;
display: flex;
justify-content: space-between;
}
.download_box .linebox02{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; border-bottom: 10px solid #02637f;
display: flex;
justify-content: space-between;
}
.download_box .linebox:before, .download_box .linebox02:before{ content: ''; margin:0px 0 0px 0px; padding:0px 0px; width:10px; height: 25px; background: #02637f; }
.download_box .linebox:after, .download_box .linebox02:after{ content: ''; margin:0px 0 0px 0px; padding:0px 0px; width:10px; height: 25px; background: #02637f; }
.download_box .linebox03{ margin:0px 0 0px 11px; padding:0px 0px; width:15px; height: 20px; display: inline-block; background: #02637f; 
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 70%, 0 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.down_list{ width:calc(100% - 50px); margin:20px auto 20px auto; padding:0px 0; list-style: none; }
.down_list .slick-prev:before, .down_list .slick-next:before { font-size: 0; }
.down_list .slick-prev, .down_list .slick-next {  width: 22px; height: 36px; background: url("../images/arrow.png"); background-repeat: no-repeat; background-size: auto 100%; top: 35%; }
.down_list .slick-prev { background-position: 0px top; left: -30px; transition: all 0.6s;}
.down_list .slick-next { background-position: -22px top; right: -30px; transition: all 0.6s;}
.down_list .slick-prev:hover,
.down_list .slick-prev:focus,
.down_list .slick-next:hover,
.down_list .slick-next:focus
{
    transform: translate(0px, -10px);
}
.down_item{ width:100%; }
.down_item li{ width:calc(100% / 3 - 20px); margin:0px 10px; padding:0px 0 0px 0; list-style: none; position: relative; display: block; float:left;}

.down_item li .pic{ width:100%; margin:0px 0px; padding:0; background: #4ecfe2; position: relative;}
.down_item li .pic img{ width:100% ; padding:5px;}
.down_item li .title{ width:100%; margin:15px auto 0px auto; padding:0; font-size: 16px; color: #231815; text-align: center; line-height: 1.2;
		height: 50px;
		display: -webkit-box;
		display: -moz-box;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
}
.down_item:hover li .title{ color:#008dd1;}
.down_item li .iconbox{ width:100%; margin:0px 0px; padding:0; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.down_item li .iconbox .more {width:auto; }
.down_item li .iconbox .more span{ float:left; color:#fff; padding:0px 10px; background: #e6e3e2; height: 36px; font-family: 'Open Sans'; font-size: 14px; 
background: #02adc2; /* Old browsers */
background: -moz-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #02adc2 0%,#4cd0e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #02adc2 0%,#4cd0e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02adc2', endColorstr='#4cd0e1',GradientType=0 ); /* IE6-9 */

-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

display: flex;
justify-content: center;
align-items: center;

border: 1px solid #03adc2;
}
.down_item li .iconbox .more i{ float:left; color:#fff; padding:0px 10px; height: 36px; font-size: 15px; 

background: #4cd0e1; /* Old browsers */
background: -moz-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4cd0e1 0%,#02adc2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4cd0e1 0%,#02adc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd0e1', endColorstr='#02adc2',GradientType=0 ); /* IE6-9 */

-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
border: 1px solid #03adc2;
border: 1px solid #03adc2;
}
.down_item li .iconbox h2{ 
	content: ''; margin: 0 0 0 20px;
	display: inline-block;
	width: 42px;
	height: 42px;
	background-image: url(../images/icon_download03.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media only screen and (min-width: 501px) and (max-width: 720px){
.down_item li{ width:calc(100% / 2 - 20px);}
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.down_item li{ width:100%; margin:0px 0px 20px 0px;}
}

.download_box02{ margin:0px auto 40px auto; padding:0px 0px; width:90%; position: relative;}
.download_box02:before{
	content: ''; display:block; position: absolute; z-index: -1;
	background:#4ecfe2;
    width: 100%;
	height: 80%;
clip-path: polygon(0 0, 20% 0, 100% 80%, 100% 100%, 70% 100%, 0 30%);
-webkit-clip-path: polygon(0 0, 20% 0, 100% 80%, 100% 100%, 70% 100%, 0 30%);
}
.down_list02{ width:100%; margin:0px auto 0px auto; padding:0px 60px 0px 60px; list-style: none; }
.down_list02 .slick-prev:before, .down_list02 .slick-next:before { font-size: 0; }
.down_list02 .slick-prev, .down_list02 .slick-next {  width: 22px; height: 36px; background: url("../images/arrow.png"); background-repeat: no-repeat; background-size: auto 100%; top: 48%; }
.down_list02 .slick-prev { background-position: 0px top; left: -60px; transition: all 0.6s;}
.down_list02 .slick-next { background-position: -22px top; right: -60px; transition: all 0.6s;}
.down_list02 .slick-prev:hover,
.down_list02 .slick-prev:focus,
.down_list02 .slick-next:hover,
.down_list02 .slick-next:focus
{
    transform: translate(0px, -10px);
}
.down_item02{ width:calc(100%/2 ); margin:0px 0px; padding:0px 0 0px 0; list-style: none; position: relative;  }
.down_item02 .pic{ width:100%; margin:0px 0px; padding:20px 20px 50px 20px; position: relative; 

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #f0f0f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=1 ); /* IE6-9 */
}
.down_item02 .pic img{ width:100% ; padding:0px; border: 5px solid #057dba;}
.down_item02:hover .pic img{ width:100% ; padding:0px; border: 5px solid #4ecfe2;}
.down_item02 .sahdow{ width:100%; height: 14px; display: block;
background-image: url(../images/book_shadow.svg); 
background-position:top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.down_list02{ padding:0px 20px 0px 20px;}
.down_list02 .slick-prev, .down_list02 .slick-next {  width: 16px; height: 26px;}
.down_list02 .slick-prev { background-position: 0px top; left: -30px; }
.down_list02 .slick-next { background-position: -16px top; right: -30px; }
.down_item02 .pic{ width:100%; margin:0px 0px; padding:5px; }
.down_item02 .pic img{ border: 1px solid #057dba;}
.down_item02:hover .pic img{ border: 1px solid #4ecfe2;}
}	
.download_box02 .iconbox{ width:100%; margin:20px 0px 0px 0px; padding:0 80px 0 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
.download_box02 .iconbox .more {width:auto; }
.download_box02 .iconbox .more span{ float:left; color:#fff; padding:0px 10px; background: #e6e3e2; height: 36px; font-family: 'Open Sans'; font-size: 14px; 
background: #02adc2; /* Old browsers */
background: -moz-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #02adc2 0%,#4cd0e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #02adc2 0%,#4cd0e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02adc2', endColorstr='#4cd0e1',GradientType=0 ); /* IE6-9 */

-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

display: flex;
justify-content: center;
align-items: center;

border: 1px solid #03adc2;
}
.download_box02 .iconbox .more i{ float:left; color:#fff; padding:0px 10px; height: 36px; font-size: 15px; 

background: #4cd0e1; /* Old browsers */
background: -moz-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4cd0e1 0%,#02adc2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4cd0e1 0%,#02adc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd0e1', endColorstr='#02adc2',GradientType=0 ); /* IE6-9 */

-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
border: 1px solid #03adc2;
border: 1px solid #03adc2;
}
.download_box02 .iconbox h2{ 
	content: ''; margin: 0 0 0 20px;
	display: inline-block;
	width: 42px;
	height: 42px;
	background-image: url(../images/icon_download03.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/* -聯絡我們--------------------------------------------------------------------------------------------------*/
.contact{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; }
.contact .tt_tabbox{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; height:auto; overflow: hidden; text-align: center;}
.contact_box{ margin:0px 0 0px 0px; padding:60px 40px 40px 40px; width:100%; border-radius: 20px;  height:auto; overflow: hidden; background: #dfe3e6;}
.contact_box .c_left{ margin:0px 0px 0px 0px; padding:0px 30px 40px 30px; float:left; width:calc(50% - 15px); background: #fff; }
.contact_box .c_right{ margin:0px 0px 0px 0px; padding:0; float:right; width:calc(50% - 15px); }

.contact_box02{ margin:0px 0 0px 0px; padding:30px 50px 50px 50px; border-radius: 20px;  height:auto; overflow: hidden; border: 2px solid #0089cd;
    width: 80%;
    margin:0px auto;

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 80%, #eeeeee 91%, #d4d4d4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 80%,#eeeeee 91%,#d4d4d4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 80%,#eeeeee 91%,#d4d4d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */
}
.contact_box02 .map{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width:100%; border: 1px solid #b1b1b1; }
.contact_box02 .add_box{ margin:20px auto; padding:0px 0px 0px 0px; width:100%; }
.contact_box02 ul{ margin:0px 0px 0px 0px; padding:0px 40px 0px 0px; float:left; width:63%; list-style: none; }
.contact_box02 ul:nth-child(2){ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; float:left; width:37%; list-style: none; }
.contact_box02 ul h1{ margin:5px 0px 20px 0px; padding:0px 0px 0px 0px; width:100%; font-size:17px; color: #000;}
.contact_box02 ul li{ margin:0px 0px 10px 0px; padding:0px 0px 0px 0px; width:100%; list-style: none;  font-size:15px; color: #000; line-height: 1.5;}
.contact_box02 ul h2{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width:80px; float:left;}
.contact_box02 ul h3{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; width:calc( 100% - 80px); float:left;}
@media only screen and (min-width: 0px) and (max-width: 1350px){
.contact_box02{  width: 100%;}
}
@media only screen and (min-width: 0px) and (max-width: 930px){
.contact_box02 ul{ padding:0px 0px 0px 0px; width:100%;}
.contact_box02 ul:nth-child(2){ width:100%; }
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.contact_box{ padding:60px 20px 40px 20px; }
.contact_box02{ margin:0px 0 0px 0px; padding:20px 20px 20px 20px;}
}
@media only screen and (min-width: 0px) and (max-width: 1023px){
.contact_box .c_left{ margin:0px 0px 30px 0px; width:100%;}
.contact_box .c_right{ width:100%; }
}

.c_tab{ margin:0px 0 0px 0px; padding:20px 80px; font-size:20px; color:#fff; background: #7db343; display: inline-block;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.c_tab02{ margin:0px 0 0px 0px; padding:20px 80px; font-size:20px; color:#fff; background: #0089cd; display: inline-block;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.ctab_text li {
	display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
	justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.ctab_text li:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 30px;
	background:#FFF;
	margin:0px 42px 0px 42px;
}
.ctab_text li:last-of-type:after {
	content: '';
	display: none;
}
@media only screen and (min-width: 0px) and (max-width: 630px){
.c_tab{ padding:20px 20px; font-size:18px; }
.c_tab02{ padding:20px 20px; font-size:18px; }
.ctab_text li:after {
	height: 20px;
	margin:0px 20px 0px 20px;
}
}

/* -會員專區--------------------------------------------------------------------------------------------------*/
.member{ margin:0px 0 0px 0px; padding:0px 0px; width:100%; }
.member .m_left{ margin:0px 30px 0px 0px; padding:0; float:left; width:calc(50% - 30px); }
.member .m_right{ margin:0px 0px 0px 30px; padding:0; float:right; width:calc(50% - 30px); }
.login_box{ margin:0px 0 0px 0px; padding:120px 0px 60px 0px; width:100%; background:url(../images/login_bg.jpg) no-repeat center center; background-size: cover;}
.login_box .all_box{ margin:0px auto 0px auto; width:80%; }
.login_box .all_box .user_box{ padding:6%; width:100%; background:rgba(255, 255, 255, 0.4); position: relative; border-radius: 20px;}
.login_box .all_box .user_box h1{ margin:40px 0px 30px 0px; padding:0px 0px; width:100%; font-size: 20px; text-align: center; color: #808080; }
.login_box .all_box .user_box h2{ position: absolute; top:-40px; left:calc(50% - 40px); }
.login_box .all_box .user_box h2 img{ width:80px; }
.account{ margin:50px auto 0px auto; width:100%; padding:20px 0px 0px 0px; width:100%; border-top: 2px solid #fff; text-align: center; 
font-size: 0.875rem; color: #fff; font-family: 'Open Sans';}
.account a{ color: #fff;}


.member-login {
	padding: 0px; margin:-40px 0 -40px 0; overflow:hidden;
}
.member-password {
	padding: 0px; margin:40px; overflow:hidden;
}

.password{ margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%;}
.password .ttbox{ margin:0px 0 0px 0px; padding:0px 0px 0px 0px; width:100%;
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.password .ttbox .ptxt{ margin:0px 0 0px 0px; padding:0px 0px 0px 0px; display: inline-block; font-size:0.9375rem; color: #131313; line-height:1.5;}
.password .mailbox{ margin:13px 0 0px 0px; padding:0px 0px 0px 0px; width:100%; background: #cfd8dd; padding: 20px; border-radius: 10px; height:auto; overflow: hidden; 
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.password .mailbox .p_left{ margin:0px 15px 0px 0px; padding:0; float:left; width:calc(100% - 75px);  }
.password .mailbox .p_right{ margin:0px 0px 0px 0px; padding:0; float:right; width:60px; }

.member02{ margin:0px auto; padding:0px 0px; width:75%; }

@media only screen and (min-width: 0px) and (max-width: 1100px){
.member .m_left{ margin:0px 0px 30px 0px; width:100%; }
.member .m_right{ margin:0px 0px 0px 0px; width:100%; }
.member02{ width:100%; }
}

/* -button---------------------------------------------------------------------------------------------------*/
.btn-style01{
	padding: 0px 0px ; 
	margin: 0px 0px 0px 0px; 
	text-decoration:none; 
	display:block; 
	font-size:20px;
	color: #fff; line-height:53px; width:100%; border:none; background:#7BB241; text-align:center; border-radius: 8px;
	-webkit-appearance: none;
}
.btn-style01.hvr-fade:hover, .btn-style01.hvr-fade:focus, .btn-style01.hvr-fade:active {
  background: #0089cd;
}
.btn-style02 {
    padding: 0px 0px; 
    margin: 0px 8px 0px 0px; width:calc(50% - 10px); text-align:center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px; 
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border-radius: 10px;
	border: none;
	-webkit-appearance: none;
}
.btn-style02:nth-child(2) {
    padding: 0px 0px; 
    margin: 0px 0px 0px 8px; width:calc(50% - 10px); text-align:center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px; 
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border-radius: 10px;
	border: none;
	-webkit-appearance: none;
}
.btn-style02:hover, .btn-style02:nth-child(2):hover{
    background: #7db343; 
}
.btn-style03 {
    padding: 0px 40px; 
    margin: 0px 8px 0px 0px; width:auto; text-align:center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px; 
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border-radius: 8px;
	border: none;
	-webkit-appearance: none;
}
@media only screen and (min-width: 0px) and (max-width: 600px){
.btn-style03 { padding: 0px 20px; margin: 0px 8px 10px 0px;}
}

.btn-style04 {
    padding: 0px 40px; 
    margin: 0px 8px 0px 0px; width:auto; text-align:center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px; 
    color: #fff;
    line-height: 50px;
    background: #7db343;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border-radius: 10px;
	border: none;
	-webkit-appearance: none;
}
.btn-style05 {
    padding: 0px 0px; 
    margin: 0px 0px 0px 0px; width:60px; text-align:center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; 
    color: #fff;
    line-height: 50px;
    background: #7db343;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	border-radius: 8px;
	border: none;
	-webkit-appearance: none;
}

/*page*/
.page {
	font-size: 13px; font-family:Arial;
	padding: 0px;
	margin:0px 0px 60px 0px; 
	width:100%; height:auto; 
	display: flex;
    flex-direction: row;
    justify-content: center;	  
}
.page .box{
	width:auto; margin:0px 0px 0px 0px; 
	display: flex;
	justify-content: center;
  align-items: center;
}
.page .number{
	width:auto; display: inline-block; border-left: 1px solid #48bbd8; background: #efefee; margin:0px 30px 0px 20px; 
  display: flex;
  align-items: center;
}
.page .number a {
	color: #242632; display:inline-block; padding:0px 10px; height: 40px;
  display: flex;
  align-items: center;
}
.page .number .current {
	background: #48bbd8; color: #FFF;
}
.page .number a:hover {
	background: #48bbd8; color: #FFF;
}
.page .pre, .page .next {
	width:auto; display: inline-block; margin:0px 10px 0px 0px; 
}
.page .pre i{ float:left; color:#dbdadb; padding:0px 10px; background: #48bbd8; height: 40px; font-size: 15px; 
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
}
.page .pre span{ float:left; color:#242632; padding:0px 10px; background: #e6e5e5; height: 40px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
}
.page .pre:hover span, .page .next:hover span{ color:#fff; background: #48bbd8;}
.page .next i{ float:left; color:#dbdadb; padding:0px 10px; background: #48bbd8; height: 40px; font-size: 15px; 
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
}
.page .next span{ float:left; color:#242632; padding:0px 10px; background: #e6e5e5; height: 40px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;

display: flex;
justify-content: center;
align-items: center;
}
.page .of {
	width:auto; font-size: 15px; font-family:Arial; 
display: flex; justify-content: center;
  align-items: center;
}
.page .of input[type="text"]{
	border-radius: 5px; line-height: 40px; border: 1px solid #43C6E6; text-align: center; margin: 0 8px;
display: flex;
  justify-content: center; align-items: center;
  width: 50px !important;
}
@media only screen and (min-width: 0px) and (max-width: 600px){
.page {
	flex-direction: column;
}
.page .box{
	width:100%; margin: 0 0 20px 0;
}
.page .of {
	width:100%;
}
.page .number{
	margin:0px 5px 0px -5px; 
}
.page .pre span, .page .next span{ display: none; }
}

/*404*/
.e404box {
	width: 90%;
    max-width: 700px;
	background: #FFF;
	padding: 50px 30px;
	margin: 10% auto 10% auto;
	display: block;
	border-radius: 5px;
	-moz-box-shadow: 3px 3px 2px rgba(0%,0%,0%,0.1);
	-webkit-box-shadow: 3px 3px 2px rgba(0%,0%,0%,0.1);
	box-shadow: 0 0 40px rgba(0%,0%,0%,0.1)
}
.e404 {
	width: 100%;
	display: block;
	padding: 0
	height:auto; overflow: hidden; text-align: center;
}
.e404 .pic{
	width: 100%; 
}
.e404 .pic img {
	width:180px;
}
.e404 .textbox{
	width: 100%; margin: 10px 0px 0px 0px; height:auto; overflow: hidden;
}	
.e404 .textbox dd {
	width: 100%; 
	display: block;
	margin: 5px 0px;
	padding: 0;
	list-style: none
}
.e404 .textbox dd.error {
	font-family: 'Open Sans';
	font-size: 50px;
	font-weight: 700;
	color: #333;
	margin: 25px 0 0;
	vertical-align: top
}
.e404 .textbox dd.text {
	font-size: 15px;
	color: #333;
	line-height:2
}
.e404 .textbox dd.text a {
	color:#43CDED;
}
.e404 .textbox dd.topbtn {
	vertical-align: top;
	margin: 18px 0;
}
.e404 .textbox dd a.btn {
	outline: none;
	border-radius: 3px;
	font-size: 14px;
	text-align: center;
	color: #ffF;
	padding: 5px 10px;
	border: 1px solid #86979f;
	text-decoration: none;
	vertical-align: top;
	background: #86979f
}
.e404 .textbox dd .btn:hover {
	background: #43CDED;
	border: 1px solid #43CDED;
	color: #fff;
}

/*user_editor  table*/
.user_editor table{
	font-family:Microsoft JhengHei;
	table-layout: fixed;
	color: #1B3059;
	width: 682px;
	text-align: center;
}
.user_editor table th{
	background:  rgb(0, 80, 151);
	color: #fff;
	text-align: center;
}
.user_editor tr:nth-child(odd){
	background: #fff;
}
.user_editor tr:nth-child(even){
	background: #e6efed;
	background: #e7f4f7;
}
.table_w tr:nth-child(odd), .table_w tr:nth-child(even){
	background: #fff;
}
.user_editor th, .user_editor td{
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid rgb(79, 110, 146);
	border-right: 1px solid rgb(79, 110, 146);

}
.user_editor tr>td:first-child{
	border-left: 1px solid rgb(79, 110, 146);
}