*{
	position: relative;
	box-sizing: border-box;
}

html,body{
	  
	color: #484848;
	background-color: #f8f8f8;
	font-family: 微軟正黑體, 'Noto Sans TC', 'Montserrat', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;  
}

html{
	touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
}

body{
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;  
}

.homePage{
	overflow-x: hidden;
}

a{
	color: #1E344B;
	text-decoration: none;
	letter-spacing: 0.8px;
}

a:hover,
a:focus,
a:active{
	color: #1E344B;
	text-decoration: none;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; 
-moz-backface-visibility:hidden; 
}

.u-clearfix:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
}

.u-text-center{
	text-align: center !important;
}

.title-1{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.title-2{
	overflow: hidden;
	text-overflow: ellipsis;
	/* autoprefixer: ignore next */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-box-pack: end;
}

.title-3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.givePadding{
	padding-top: 150px;
	padding-bottom: 80px;
}

.givePadding--sm{
	overflow-x: hidden;
	overflow-y: visible;
	padding-top: 10px;
	padding-bottom:60px;
}

.heading-box{
	position: absolute;
	top: 0;
	left: 200px;
}

.heading-box:before{
	content: "";
	width: 1px;
	height: 256px;
	background-color: #000;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: -60px;
	transform: translateY(-60%) rotate(18deg);

}

.img_seo{
	position: absolute !important;
	/*height: 1px; width: 1px;*/
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
			   
	clip: rect(1px, 1px, 1px, 1px);	
}

@media (max-width: 1025px){
	.givePadding{
		padding-top: 120px;
		padding-bottom: 80px;
	}
	.heading-box{
		left: 120px;
	}
	.heading-box:before{
		height: 200px;
		left: -32px;
	}
}

@media (max-width: 992px){
	.givePadding{
		padding-top: 100px;
	}
	.heading-box{
		left: 120px;
	}
	.heading-box:before{
		height: 140px;
		left: -32px;
	}
}

@media (max-width: 430px){
	.givePadding{
		padding-top: 80px;
		padding-bottom: 60px;
	}
	.givePadding--sm{
		overflow-x: hidden;
		padding-top: 0;
		padding-bottom: 20px;
	}
	.heading-box {
		left: 60px;
	}
	.heading-box:before {
		height: 110px;
		left: -26px;
	}
}
@media (max-width: 400px){

}

@media (max-width: 321px){
	.givePadding{
		padding-bottom: 40px;
	}
	.heading-box{
		left: 48px;
	}
	.heading-box:before{
		height: 105px;
		left: -22px;
	}
}


/* icon */

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?39422898');
  src: url('../font/fontello.eot?39422898#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?39422898') format('woff2'),
       url('../font/fontello.woff?39422898') format('woff'),
       url('../font/fontello.ttf?39422898') format('truetype'),
       url('../font/fontello.svg?39422898#fontello') format('svg');
  font-weight: normal;
  font-display:swap;
					
}


/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */


/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */


/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?39422898#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
						  
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-right-big:before { content: '\e800'; } /* '' */
				  
 


		   

::-webkit-scrollbar {
	-webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
	width: 12px;
}

::-webkit-scrollbar:horizontal {
	 height: 12px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .5);
	border-radius: 10px;
	border: 2px solid transparent;
}

::-webkit-scrollbar-track {
	background-color: transparent; 
}


/* PAGE global */

.page-title__rectangle{
	width: 320px;
	height: 160px;
	margin-left: -16px;
}

.page-title-text{
	padding-left: 40px;
	width: 90%;
}

.page-title__en{
	font-size: 48px;
	font-weight: 500;
	letter-spacing: 5px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	padding-bottom: 8px;
}

.page-title__ch{
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 3px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	padding-bottom: 32px;
	border-bottom: 2px solid #d5d5d5;
}

.page-title-bg{
	font-size: 144px;
	font-weight: 500;
	letter-spacing: 15px;
	color: #334063;
	opacity: 0.1;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	position: absolute;
	top: 60px;
	right: 0;
}

.page-title-img{
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
}

.page-title-img-right{
	width: 600px;
	height: 300px;
	background-repeat: no-repeat;
	position: absolute;
	top: 80px;
	right: 0;
	background-size: cover;
}

.page-title-img img{
	width: 100%;
}

.breadcrumb{
	background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before{
	content: "＞";
	padding-right: 1.5rem;
}

.breadcrumb-item.active{
	color: #acacac;
	text-overflow: ellipsis;overflow: hidden;white-space:nowrap;
}
.breadcrumb-item {
	font-size: 16px;
	line-height: 32px;
}

@media (max-width: 1441px){
	.page-title__rectangle{
		margin-left: -66px;
	}
	.page-title-bg{
		font-size: 130px;
		top: 72px;
	}
}

@media (max-width: 1281px){
	.page-title__rectangle{
		margin-left: -90px;
	}
	.page-title-bg{
		font-size: 108px;
		top: 78px;
	}
}

@media (max-width: 1025px){
	.page-title__rectangle{
		margin-left: -16px;
		width: 100%;
	}
	.page-title-bg{
		font-size: 120px;
		line-height: 100px;
		text-align: right;
	}
}

@media (max-width: 430px){
	.page-title__rectangle{
		width: 18%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.page-title-text{
		padding-left: 70px;
	}
	.page-title__en{
		font-size: 44px;
	}
	.page-title__ch{
		font-size: 30px;
	}
	.page-title-bg{
		font-size: 68px;
		line-height: 52px;
		letter-spacing: 13px;
	}
	.page-title--app .page-title__en{
		letter-spacing: 1px;
	}
	.breadcrumb-item{
		line-height: 24px;
	}
}

@media (max-width: 321px){
	.page-title-text{
		padding-left: 40px;
	}
	.page-title__en{
		font-size: 30px;
	}
	.page-title__ch{
		font-size: 24px;
		letter-spacing: 1px;
	}
	.page-title__rectangle{
		height: 120px;
	}
	.page-title-bg{
		font-size: 52px;
		line-height: 48px;
		letter-spacing: 5px;
	}
	.breadcrumb{
		display: none;
	}
}


/*-- typography --*/
h1,h2,h3,h4,h5,h6,p{
   
   
   
   
   
   
   
	margin: 5px 0 5px 0;
}

p{
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-size: 14px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.8px;
}
h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,h6::selection,p::selection{
			  
			  
			  
			  
			  
			  
			  
	background-color: #5F75B1;
	color: #fff;
}

.heading{
	font-size: 40px;
	font-weight: 500;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 5px;
	color: #000;
	margin-bottom: 20px;
}

.heading--ch{
	font-size: 24px;
	font-weight: 500;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1.3px;
	color: #000;
}

@media (max-width: 1025px){
	.heading{
		font-size: 36px;
		margin-bottom: 0px;
	}
	.heading--ch{
		font-size: 22px;
	}
}

@media (max-width: 430px){
	.heading{
		font-size: 28px;
	}
	.heading--ch{
		font-size: 18px;
	}
}


@media (max-width: 400px){
	.heading{
		font-size: 24px;
	}
}
@media (max-width: 321px){
	.heading{
		font-size: 22px;
	}
 
	.heading--ch{
		font-size: 16px;
	}
}

/*-- buttons --*/
.btn{
	display: inline-block;
	padding: 10px 40px;
	line-height: 24px;
	border-radius: 22px;
	background-color: #034591;
	border: 0;
	color: #fefefe;
	cursor: pointer;
	transition: all 0.3s;
}
.btn:hover{
	background-color: #E0A763;
}
.go-btn{
	margin-top: 80px;
}
.go-btn .btn{
	background-color: transparent;
	border: 1px solid #2e69c1;
	color: #2e69c1;
	padding: 10px 28px;
}
.go-btn .btn:hover{
	background-color: #2e69c1;
	color: #fefefe;
}
@media (max-width: 430px){
	.go-btn{
		margin-top: 40px;
		padding-bottom: 48px;
	}
}
@media (max-width: 321px){
	.go-btn .btn{
		padding: 6px 20px;
	    font-size: 15px;
	}
}

/*-- forms --*/
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="date"],
.form input[type="month"],
.form input[type="time"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="week"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="color"],
.form select,
.form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border:0;
    background-color: #f8f8f8;
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
    outline: 0;
    border-radius: 4px;
    vertical-align: middle;
    box-sizing: border-box;
    resize: none;
    width: 100%;
    transition: all 0.2s;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */

/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.form input[type="color"] {
    padding: 0.2em 0.5em;
}


.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="url"]:focus,
.form input[type="date"]:focus,
.form input[type="month"]:focus,
.form input[type="time"]:focus,
.form input[type="datetime"]:focus,
.form input[type="datetime-local"]:focus,
.form input[type="week"]:focus,
.form input[type="number"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="color"]:focus,
.form select:focus,
.form textarea:focus {
   border: thin solid #129FEA;
   box-shadow: inset 0 1px 3px rgba(18,159,234,0.5);
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}

.form input[type="file"]:focus,
.form input[type="radio"]:focus,
.form input[type="checkbox"]:focus {
    outline: thin solid #129FEA;
    outline: 1px auto #129FEA;
}
.form .checkbox,
.form .radio {
    margin: 0.5em 0;
    display: block;
}

.form input[type="text"][disabled],
.form input[type="password"][disabled],
.form input[type="email"][disabled],
.form input[type="url"][disabled],
.form input[type="date"][disabled],
.form input[type="month"][disabled],
.form input[type="time"][disabled],
.form input[type="datetime"][disabled],
.form input[type="datetime-local"][disabled],
.form input[type="week"][disabled],
.form input[type="number"][disabled],
.form input[type="search"][disabled],
.form input[type="tel"][disabled],
.form input[type="color"][disabled],
.form select[disabled],
.form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}


.form select[multiple] {
    height: auto;
}
.form label {
    margin: 8px 0px;
    display: inline-block;
}
.form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 24px;
    color: #484848;
    border-bottom: 0;
    font-size: 30px;
}


/*-- HEADER --*/
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #f8f8f8;
	z-index: 99;
}
.header:after{
	content: "";
	width: 95%;
	height: 1px;
	background-color: #d5d5d5;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.logo{
	width: 112px;
	height: 80px;
	vertical-align: top;
	float: left;
	line-height: 80px;
						 
					 
}
.logo img{
	display: inline-block;
	width: 90%;
	vertical-align: middle;
	max-height:100%;
}
.navbar__nav{
	float: right;
	transition: all 0.3s;
}
.nav{
	float: right;
}
.nav > li{
	float: left;
}
.nav > li > a{
	display: inline-block;
	line-height: 32px;
	padding: 24px 24px;
	transition: all 0.3s;
	position: relative;
}
.nav > li > a:hover{
	color: #7B8DC8;
}
@media (min-width: 1024px){
	.nav > li:before{
		content: "";
		width: 0%;
		height: 4px;
		background-color: #7B8DC8;
		position: absolute;
		top: 75%;
		transform: translateX(-50%);
		left: 50%;
		transition: width 0.3s;
		border-radius: 4px;
	}
	.nav > li:hover:before{
		width: 80%;
	}
}
.nav > li > a.current{
	color: #7B8DC8;
	text-shadow: 0px 0px 3px rgba(123,141,200,0.5);
}
.nav > li .drop-menu{
	position: absolute;
    background: #f8f8f8;
	border-radius: 4px;
	overflow: hidden;
    line-height: 1.2;
    top: 32px;
	left: 50%;
	transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.nav-links .showdrop-label{
  display: none;
}
.nav-links.dropdown-links {
	background-color: #0345912e;
}
.nav-links.dropdown-links::before {
	display: none;
}
@media (min-width: 990px) {
	.nav-links:hover .drop-menu{
	  transition: all 0.2s ease;
		top: 90%;
	  opacity: 1;
	  visibility: visible;
	  z-index: 1;
	}
}
.nav-links .drop-menu.show {
	transition: all 0.2s ease;
	top: 90%;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.drop-menu li a{
    width: 100%;
    display: block;
    font-weight: 500;
    border-radius: 0px;
    white-space: nowrap;
    padding: 20px 18px;
}
.drop-menu li a:hover {
	color: #7B8DC8;
	background-color: #f4f4f4;
}

/*.nav > li > a.current:before{
	content: "";
	width: 80%;
	height: 4px;
	background-color: #7B8DC8;
	position: absolute;
	top: 75%;
	transform: translateX(-50%);
	left: 50%;
	transition: width 0.3s;
	border-radius: 4px;
}*/
.arrow-down {
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='508.9px' height='266.4px' viewBox='0 0 508.9 266.4' style='overflow:auto;enable-background:new 0 0 508.9 266.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231B1B1B;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M0,9.9C2.9-0.3,13.8-3.7,23.3,5.8c75.4,75.7,151,151.3,226.6,226.8c1.4,1.4,2.6,3,4.2,4.9 c1.9-1.8,3.3-3.1,4.7-4.5C334.3,157.5,409.7,82.1,485.2,6.6c1.7-1.8,3.6-3.4,5.7-4.8c4.6-3,10.7-2.3,14.6,1.6 c3.9,3.9,4.6,9.9,1.7,14.6c-1.3,1.9-2.8,3.7-4.4,5.3c-79.1,79.1-158.2,158.2-237.3,237.2c-7.7,7.7-14.1,7.7-21.7,0.1 C164.4,181.4,85.1,102.1,5.8,22.7c-2.3-2.2-3.9-5.2-5.8-7.8V9.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat top 50% right 0.4375rem/.5625rem;
}
.nav > li > a:hover .arrow-down{
	background: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='508.9px' height='266.4px' viewBox='0 0 508.9 266.4' style='overflow:auto;enable-background:new 0 0 508.9 266.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%237B8DC8;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M0,9.9C2.9-0.3,13.8-3.7,23.3,5.8c75.4,75.7,151,151.3,226.6,226.8c1.4,1.4,2.6,3,4.2,4.9 c1.9-1.8,3.3-3.1,4.7-4.5C334.3,157.5,409.7,82.1,485.2,6.6c1.7-1.8,3.6-3.4,5.7-4.8c4.6-3,10.7-2.3,14.6,1.6 c3.9,3.9,4.6,9.9,1.7,14.6c-1.3,1.9-2.8,3.7-4.4,5.3c-79.1,79.1-158.2,158.2-237.3,237.2c-7.7,7.7-14.1,7.7-21.7,0.1 C164.4,181.4,85.1,102.1,5.8,22.7c-2.3-2.2-3.9-5.2-5.8-7.8V9.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat top 50% right 0.4375rem/.5625rem;
}
@media (max-width: 1281px) {
	.nav > li > a{
		padding: 24px 20px;
	}
}
@media (max-width: 1100px) {
	.nav > li > a{
		padding: 24px 14px;
	}
}
@media (max-width: 1025px) {
	.nav > li > a {
		padding: 24px 15px;
	}
} 
@media (max-width: 992px){
	.popup-menu{
		position: fixed;
		top: 0px;
		right: 0;
		background-color: #f8f8f8;
		width: 100%;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		z-index: 99;
		padding-top: 40px;
		transition: all 0.3s;
	}
 
	.nav{
		float: none;
		text-align: center;
	}
 
	.logo{
		float: none;
		display: flex;
		margin-right: auto;
		margin-left: auto;
	}
 
	.nav > li > a{
		font-size: 18px;
		line-height: 32px;
		padding: 16px 24px;
	}
	.nav > li .drop-menu {
		position: relative;
		box-shadow: none;
    	top: 0;
	}

}
@media (max-width: 430px){
	.logo{
		height: 60px;
	}
 
	.popup-menu{
		height: 100vh;
	}
}

/*hamburger*/
.menu-toggle{
	display: inline-block;
	width: 64px;
	height: 80px;
	padding: 16px;
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}
.menu-toggle span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 33px;
	height: 4px;
	background-color: #1E344B;
	border-radius: 4px;
	transition: all 0.3s;
}
.menu-toggle span:nth-child(1){
	transform: translateX(-50%) translateY(-250%);
}
.menu-toggle span:nth-child(2){
	transform: translateX(-50%) translateY(-50%);
}
.menu-toggle span:last-child{
	transform: translateX(-50%) translateY(150%);
}
.close-locate{
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}
.menu-toggle-close{
	display: inline-block;
	width: 64px;
	height: 80px;
	padding: 16px;
	float: right;
	transition: all 0.3s;
}
.menu-toggle-close span{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 33px;
	height: 4px;
	border-radius: 4px;
	transition: all 0.3s;
	background-color: #E0A763;
}
.menu-toggle-close span:nth-child(1){
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.menu-toggle-close span:last-child{
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
@media (max-width: 992px){
	.menu-toggle{
		display: inline-block;
	}
 
	#popup:target{
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}
 
	#popup:target .close-locate{
		display: inline-block;
	}
 
	.popup-menu li{
		float: none;
	}
}
@media (max-width: 992px){
	.menu-toggle{
		display: inline-block;
	}
 
	#popup:target{
		opacity: 1;
		visibility: visible;
		z-index: 2;
	}
 
	#popup:target .close-locate{
		display: inline-block;
		width: 100%;
	}
 
	.popup-menu li{
		float: none;
	}
}
@media (max-width: 430px){
	.menu-toggle{
		height: 60px;
	}
 
	.menu-toggle-close{
		height: 60px;
	}
}
@media (max-width: 321px){
	.menu-toggle span{
		width: 28px;
	}
 
	.menu-toggle-close span{
		width: 28px;
	}
}

/*-- REASON --*/
.reason{
	height: 100vh;
	padding-top: 80px;
	padding-bottom: 120px;
}
@media (max-width: 1536px) {
	.reason {
		height: 1000px;
	}
}
@media (max-width: 1100px) {
	.reason {
		height: 800px;
	}
}
@media (max-width: 1025px){
	.reason{
		height: 700px;
		padding-bottom: 0;
	}
	
}
@media (max-width: 992px){
	.reason{
		height: 900px;
	}	
}
@media (max-width: 430px){
	.reason{
		height: 1250px;
	}
}
@media (max-width: 321px){
	.reason{
		padding-top: 60px;
	}
}

/* background */
.bg-deco{
	width: 100%;
	height: 980px;
	position: absolute;
}
.big-text{
	font-size: 300px;
	color: #f2f2f2;
	/* font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;; */
  
	font-weight: 700;
	letter-spacing: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.big-logo{
	display: inline-block;
	background-image: url('../img/logo/hero-bg-icon.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 640px;
	height: 780px;
	top: 80px;
	margin-top: 16px;
}
.feature-bg{
	width: 800px;
	position: absolute;
	top: 50%;
	transform: translateY(-47%);
	right: 0;
}
.bg-wave{
	width: 65%;
	top: 10%;
	left: -4%;
}
.bg-wave img{
	-webkit-user-drag: none;
	display: inline-block;
	opacity: 0.4;
			 
			  
}
.bg-dot{
	position: absolute;
	bottom: -5%;
	right: 30%;
}
.left-side-deco{
	height: 90vh;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

/*@media (max-width: 1921px){
	.bg-deco{
		height: 910px;
	}
	.feature-bg{
		width: 825px;
	}
}*/
@media (max-width: 1441px){
	.feature-bg{
		width: 760px;
		transform: translateY(-55%);
	}
}
@media (max-width: 1281px){
	.bg-deco{
		height: 760px;
	}
 
	.feature-bg{
		width: 680px;
		transform: translateY(-47%);
	}
 
	.bg-dot{
		right: 35%;
	}
 
	.left-side-deco{
		height: 95vh;
	}
	

}
@media (max-width: 1025px){
	.bg-deco{
		height:780px;
	}
 
	.big-logo{
		height: 500px;
		margin-top: 0;
	}
 
	.big-text{
		font-size: 220px;
		top: 47%;
	}
 
	.feature-bg{
		width: 520px;
		transform: translateY(-60%);
	}
 
	.bg-dot{
		bottom: 8%;
		right: 23%;
	}
 
	.bg-dot img{
		width: 70%;
	}
 
	.left-side-deco{
		height: 780px;
	}
}
@media (max-width: 992px){
	.bg-deco{
		height:900px;
	}
 
	.big-logo{
		height: 420px;
	}
 
	.big-text{
		font-size: 180px;
		top: 38%;
	}
 
	.bg-wave{
		position: absolute;
		bottom: 0;
		top: auto;
		left: auto;
		right: 0;
		width:60%; 
	}
 
	.feature-bg{
		display: none;
	}
 
	.bg-dot{
		bottom: 15%;
		right: 15%;
	}
 
	.bg-dot img{
		width: 50%;
	}
 
	.left-side-deco{
		height: 720px;
	}
}
@media (max-width: 430px){
	.bg-deco{
		height: 690px;
	}
 
	.big-text{
		font-size: 160px;
		top: 60%;
	}
 
	.bg-wave{
		width: 100%;
	}
 
	.bg-dot{
		bottom: -15%;
		right: -8%;
	}
}
@media (max-width: 321px){
	.big-logo{
		height: 330px;
	}
 
	.big-text{
		display: none;
	}
 
	.left-side-deco{
		height: 660px;
	}
}

/* company name */
.company-name{
	color: #000;
	font-weight: 700;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 32px;
	display: inline-block;
	vertical-align: top;
	position: absolute;
	top: 100px;
	left: 3%;
}
.company-name--en{
	padding-bottom: 18px;
	font-size: 36px;
}
.company-name--en span{
	display: inline-block;
	padding-top: 8px;
}
.company-name--ch{
	font-size: 32px;
}
.company-name:after{
	content: "";
	width: 1px;
	height: 256px;
	background-color: #000;
	transform: rotate(18deg);
	position: absolute;
	top: -32px;
	left: 150px;
}
@media (max-width: 1441px){
	.company-name{
		top: 80px;
	}
 
	.company-name:after{
		height: 240px;
		left: 134px;
	}
}
@media (max-width: 1281px){
	.company-name{
		top: 3rem;
		line-height: 29px;
	}
 
	.company-name:after{
		left: 112px;
		height: 235px;
		top: -24px;
	}
 
	.company-name--en{
		padding-bottom: 10px;
	    font-size: 34px;
	}
 
	.company-name--ch{
		font-size: 28px;
	}
}
@media (max-width: 1025px){
	.company-name{
		line-height: 16px;
		top: 60px;
	}
 
	.company-name--en{
		padding-bottom: 10px;
		font-size: 26px;
	}
 
	.company-name--ch{
		font-size: 24px;
	}
 
	.company-name:after{
		left: 80px;
		height: 200px;
	}
}
@media (max-width: 992px){
	.company-name{
		line-height: 16px;
		top: 40px;
	}
 
	.company-name--en{
		padding-bottom: 10px;
		font-size: 22px;
	}
 
	.company-name--ch{
		font-size: 18px;
	}
 
	.company-name:after{
		left: 70px;
		height: 150px;
	}
}
@media (max-width: 430px){
	.company-name{
		top: 16px;
		padding-left: 16px;
	}
 
	.company-name:after{
		left: 90px;
		height: 100px;
		top: -20px;
	}
}
@media (max-width: 321px){
	.company-name{
		top: 20px;
		line-height: 12px;
		color: #575757;
	}
 
	.company-name--en{
		padding-bottom: 10px;
		font-size: 20px;
	}
 
	.company-name--ch{
		font-size: 16px;
	}
 
	.company-name:after{
		left: 78px;
		height: 74px;
		top: 0px;
		background-color: #575757;
	}
}

/* slogan */
.slogan-section{
	position: absolute;
	top: 48px;
	left: 16%;
}
.slogan--ch{
	font-family: 'Noto Serif SC', 微軟正黑體, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
	font-size: 48px;
	font-weight: 700;
	color: #1E344B;
	line-height: 28px;
	z-index: 1;
}
.slogan--ch span{
	padding-left: 36px;
}
.slogan--en{
	color: #DBE6F6;
	font-size: 32px;
	font-weight: 700;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	top: -24px;
}
.award-box{
	position: absolute;
	bottom: 10%;
	left: 16%;
}
.award-box:before{
	content: "";
	width: 65px;
	height: 70px;
	background-color: #E0A763;
	display: inline-block;
	vertical-align: middle;
	margin-right: 24px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.award-box .award{
	padding-left: 105px;
}
.award-box .award h2{
	font-size: 30px;
	font-weight: 500;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1.3px;
	padding: 4px 0px;
}
.award-box .award span{
	color: #E0A763;
}

/*@media (max-width: 1921px){
	.award-box{
		bottom: 23%;
	}
}*/
@media (max-width: 1441px){
	.slogan-section{
		top: 30px;
	}
 
	.award-box{
		bottom: 17%;
		left: 10%;
	}
 
	.award-box .award h2{
		font-size: 27px;
	}
}
@media (max-width: 1281px){
	.slogan-section{
		top: 28px;
	}
 
	.slogan--ch{
		font-size: 2.4rem;
		line-height: 2.5rem;
	}
 
	.slogan--en{
		font-size: 1.2rem;
	}
 
	.award-box{
		left: 8vw;
		bottom: auto;
		top: 70vh;
	}
 
	.award-box .award{
		padding-left: 98px;
	}
 
	.award-box .award h2{
		font-size: 21px;
		padding: 1px 0;
	}
}
@media (max-width: 1100px) {
	.award-box {
		top: 440px;
	}
}
@media (max-width: 1025px){
	.slogan-section{
		top: 28px;
	}
 
	.slogan--ch{
		font-size: 32px;
		line-height: 36px;
	}
 
	.slogan--ch img{
		height: 40px;
	}
 
	.slogan--en{
		font-size: 24px;
	}
 
	.award-box{
		top: auto;
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%);
	}
 
	.award-box .award h2{
		font-size: 24px;
	}
}
@media (max-width: 1100px) {
	.slogan--ch img{
		height: 38px !important;
	}
	.slogan--ch span {
		padding-left: 0;
	}
}
@media (max-width: 1025px) {
	.slogan--ch img{
		height: 46px !important;
	}
	.slogan--ch span {
		padding-left: 36px;
	}
}
@media (max-width: 992px){
	.slogan-section{
		top: 34px;
	}
 
	.slogan--ch{
		font-size: 38px;
		line-height: 36px;
	}
 
	.slogan--ch img{
		height: 36px;
	}
 
	.slogan--en{
		font-size: 24px;
	}
 
	.award-box{
		bottom: 32px;
		left: 73%;
		width: 45%;
	}
 
	.award-box:before{
		margin-right: 0;
		width: 54px;
		height: 100%;
	}
 
	.award-box .award{
		padding-left: 72px;
	}
 
	.award-box .award h2{
		font-size: 18px;
		letter-spacing: 1px;
		padding: 4px 0px;
	}
 
	.award-box .award span{
		/*display: block;*/
	}
}
@media (max-width: 430px){
	.slogan-section{
		top: 10px;
		left: 27%;
	}
 
	.slogan--ch{
		font-size: 30px;
		line-height: 32px;
	}
 
	.slogan--ch img{
		height: 34px;
	}
 
	.slogan--en{
		top: 0px;
		font-size: 24px;
		padding-left: 88px;
	}
 
	.award-box{
		bottom: 0;
		left: 50%;
		width: 80%;
	}
}
@media (max-width: 400px){
	.slogan-section{
		top: 10px;
		left: 24%;
	}
	.slogan--ch img{
		height: 32px !important;
	}
 
	.award-box {
		bottom: 40px;
		width: 86%;
	}
 
	.award-box:before{
		width: 40px;
	}
 
	.award-box .award{
		padding-left: 52px;
	}
}
@media (max-width: 321px){
	.slogan-section{
		top: 16px;
	}
 
	.slogan--ch{
		font-size: 28px;
		line-height: 28px;
	}
 
	.slogan--ch img{
		height: 30px;
	}
 
	.slogan--en{
	    font-size: 14px;
	    padding-left: 16px;
	    opacity: 0.6;
	    top: -16px;
	}
 
	.award-box{
		bottom: 120px;
		left: 52%;
	}
 
	.award-box:before{
		width: 35px;
	}
 
	.award-box .award{
		padding-left: 46px;
	}
 
	.award-box .award h2{
		font-size: 16px;
		letter-spacing: 0;
	}
}

/* swiper */
.swiper-container {
  width: 100%;
  height: 600px;
  margin-top: 40px;
  margin-left: 125px;
}

/* start swiper arrows */
.swiper-button-prev:after,
.swiper-button-next:after{
 	display: none;
 }
 .swiper-button-next,
 .swiper-button-prev{
 	top: auto;
 	bottom: 15%;
 	border: 1px solid #acacac;
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
 	transition: all 0.3s;
 }
 .swiper-button-next:hover,
 .swiper-button-prev:hover{
 	background-color: rgba(256,256,256,0.4);
 	border: 1px solid #D1D1D1;
 }
  .swiper-button-next:hover span,
 .swiper-button-prev:hover span{
 	background-color: #DEDEDE;
 }
 .swiper-button-prev{
  	left: 30%;
 }
 .swiper-button-next{
 	right: 60%;
 }
.swiper-button-prev span,
.swiper-button-next span{
	width: 10px;
	height: 1px;
	background-color: #acacac;
}
.swiper-button-prev span{
	transform: rotate(-30deg);
	transform-origin: left;
}
.swiper-button-prev span:last-child{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) rotate(30deg);
}
.swiper-button-next span{
	transform: rotate(-30deg);
	transform-origin: right;

}
.swiper-button-next span:last-child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(30deg);
}
@media (max-width: 1441px){
	.swiper-container{
		margin-top: 65px;
		margin-left: 100px;
	}
 
	.swiper-button-next, .swiper-button-prev{
					  
		bottom: 28%;
	}
 
	.swiper-button-prev{
		left: 33%;
	}
 
	.swiper-button-next{
		right: 54%;
	}
}
@media (max-width: 1281px){
	.swiper-container{
		margin-top: 5rem;
		margin-left: 58px;
	}
 
	.swiper-button-next, .swiper-button-prev{
					  
		bottom: 40%;
		width: 32px;
		height: 32px;
	}
 
	.swiper-button-prev{
		left: 32%;
	}
 
	.swiper-button-next{
		right: 53%;
	}
}
@media (max-width: 1025px){
	.swiper-container{
		margin-top: 96px;
		margin-left: 63px;
		width: 90%;
		height: 400px;
	}
 
	.swiper-button-next, .swiper-button-prev{
					  
		bottom: 16%;
	}
 
	 .swiper-button-next{
	 	right: 50%;
	 }
}
@media (max-width: 992px){
	.swiper-button-next, .swiper-button-prev{
					  
		bottom: 14%;
	}
 
	.swiper-button-prev{
		left: 31%;
	}
 
	.swiper-button-next{
		right: 52%;
	}
}
@media (max-width: 430px){
	.swiper-container{
		margin-left: 0;
		margin-top: 80px;
		width: 100%;
		height: 87%;
	}
 
	.swiper-button-prev,
	.swiper-button-next{
		top: 55%;
	}
 
	.swiper-button-prev{
		left: 0;
	}
 
	.swiper-button-next{
		right: 0;
	}
}

/* end swiper arrows */

/* start pagination */
.pagination-title{
	color: #000;
	top: 24%;
	left: 18%;
	display: inline-block;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
	top: 22%;
	left: 28%;
	bottom: auto;
	width: 20%;
	text-align: left;
}
.swiper-container-horizontal>.swiper-pagination-bullets:after{
	content: "";
	display: block;
	height: 1px;
	width: 90%;
	background-color: #b8b8b8;
	position: absolute;
	right: 0;
	top: 48px;
}
.swiper-pagination-bullet{
	font-size: 14px;
	color: #000;
	background-color: transparent;
	padding: 12px 16px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	transition: opacity 0.4s;
}

/*@media (max-width: 1921px){
	.pagination-title{
		top: 32%;
		left: 17%;
	}
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 30%;
	}
}*/
@media (max-width: 1441px){
	.pagination-title{
		top: 25%;
		left: 13%;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 23%;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets:after{
		top: 40px;
	}
}
@media (max-width: 1281px){
	.pagination-title{
		top: 22%;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 20%;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets:after{
		top: 32px;
	}
}
@media (max-width: 1025px){
	.pagination-title{
		top: 18%;
		left: 0;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 15%;
		left: 21%;
		width: 30%;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets:after{
		top: 32px;
	}
}
@media (max-width: 430px){
	.pagination-title{
		top: 43px;
		left: 0;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 32px;
		left: 25%;
		width: 35%;
		text-align: center;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets:after{
		top: 28px;
	}
}
@media (max-width: 400px){
	.swiper-container-horizontal>.swiper-pagination-bullets{
		left: 28%;
	}
 
	.swiper-pagination-bullet{
		padding: 12px;
	}
}
@media (max-width: 321px){
	.pagination-title{
		top: 25px;
		left: 0;
	}
 
	.swiper-container-horizontal>.swiper-pagination-bullets{
		top: 3%;
		left: 38%;
	}
}
/* end pagination */


.slide-left{
	width: 100%;
	top: 40%;
	position: absolute;
}
.slide-left:after{
	content: "";
	position: absolute;
	top: 0;
	right: -15%;
	height: 100%;
	width: 1px;
	background-color: #000;
}
.slider-text{
	color: #000;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: 1.3px;
	padding-bottom: 40px;
	max-width: 280px;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;

}
.slide-left .slider-number{
	font-size: 96px;
	font-weight: 500;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	color: #7FA1D4;
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
}
.slide-right{
}
			   
.slide-img-box{
	width: 100%;
	max-height: 700px;
}
.slide-image-inner{
	width: 100%;
	padding-top: calc(100% * 5 / 6);
}
.slide-image-inner .image{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
@media (max-width: 1281px){
	.slider-text{
		font-size: 1rem;
		line-height: 1.6rem;
		letter-spacing: 0.06rem;
	}
}
@media (max-width: 1025px){
	.slide-left{
		top: 36%;
	}
 
	.slide-left:after{
		height: 85%;
	}
 
	.slider-text{
		font-size: 16px;
		line-height: 26px;
		padding-bottom: 32px;
		min-height: 125px;
	}
 
	.slide-left .slider-number{
		opacity: 0.3;
	}
}
@media (max-width: 430px){
	.slide-left{
		width: 100%;
		position: relative;
		display: block;
	}
 
	.slide-left:after{
		display: none;
	}
 
	.slider-text{
		padding-bottom: 24px;
		padding-top: 16px;
	}
 
	.slide-right{
		margin-left: 0;
	}
 
	.slide-img-box{
		width: 100%;
		max-height: 700px;
	}
}
@media (max-width: 400px){
	.slider-text{
		padding-left: 8px;
	}
}
@media (max-width: 321px){
	.slide-left{
		top: 25%;
	}
 
	.slider-text{
		padding-top: 8px;
		padding-bottom: 16px;
		line-height: 20px;
		min-height: 125px;
	}
 
	.slide-left .slider-number{
		font-size: 76px;
	}
 
	.slide-image-inner .image{
		top: 44%;
		left: 45%;
	}
}

/* feature */
.feature{
	height: 840px;
}
.feature-text-box{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 100%;
	padding-left: 160px;
}

/*@media (max-width: 1921px){
	.feature{
		height: 75vh;
	}
}*/
@media (max-width: 1441px){
	.feature{
		height: 80vh;
	}
}
@media (max-width: 1380px) {
	.feature {
		height: 90vh;
	}
}
@media (max-width: 1281px){
	.feature{
		height: 83vh;
	}
}
@media (max-width: 1025px){
	.feature{
		height: 40vh;
	}
}
@media (max-width: 992px){
	.feature{
		height: 300px;	
	}
}
@media (max-width: 430px){
	.feature{
		margin-top: 102px;
	}
}
@media (max-width: 400px){
	.feature{
		margin-top: 120px;
	}
}
@media (max-width: 321px){
	.feature{
		margin-top: 130px;
	}
 
	
}
.feature-title{
	margin-right: 24px;
	padding: 52px 0;
	display: inline-block;
}
.feature-title--ch{
	color: #fff;
	font-size: 24px;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 300;
	letter-spacing: 1.2px;
	padding-bottom: 8px;
}
.feature-title--en{
	color: #fff;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 1.2px;
}
.ranking{
	display: inline-block;
	color: #E0A763;
}
.ranking span{
	font-size: 72px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 400;
}
@media (max-width: 1536px) {
	.feature-bg {
		transform: translateY(-54%);
	}
	.feature {
		height: 720px;
	}
	.feature-text-box {
		padding-left: 90px;
	}
	.feature-title {
		padding: 30px 0;
	}
}
@media (max-width: 1441px){
	.feature-title{
		padding: 28px 0;
	}
	.feature-text-box{
		padding-left: 70px;
	}
}
@media (max-width: 1281px){
	.feature {
		height: 600px;
	}
	.feature-title{
		margin-right: 16px;
		padding: 1.8rem 0;
	}
 
	.feature-title--ch{
		font-size: 1.2rem;
	}
 
	.ranking span{
		font-size: 66px;
	}
	.feature-text-box{
		padding-left: 16px;
	}
	.feature-text-box {
		padding-left: 40px;
	}
}
@media (max-width: 1025px){
	.feature-title{
		margin-right: 8px;
		padding: 16px 0;
	}
 
	.feature-title--ch{
		font-size: 21px;
	}
 
	.feature-text-box{
		padding-left: 0px;
		width: 105%;
	}

	.ranking span{
		font-size: 54px;
	}
}
@media (max-width: 992px){
	.feature-title{
		margin-right: 8px;
		padding: 8px 0;
	}
 
	.feature-title--ch{
		color: #484848;
		font-size: 20px;
	}
 
	.feature-title--en{
		color: #484848;
		font-size: 14px;
	}
	.feature-text-box{
		padding-left: 48px;
		width: 100%;
	}
 
	.ranking span{
		font-size: 48px;
	}
}
@media (max-width: 430px){
	.feature {
		height: 550px;
	}
	.feature-text-box{
		padding-left: 24px;
		top: 12%;
		transform: translateY(0);
	}
	.feature-title--ch{
		padding-bottom: 0;
		padding: 10px 0px;
	}
}
@media (max-width: 321px){
	.feature-title{
		display: block;
	}
 
	.feature-title--en{
		font-size: 12px;
		letter-spacing: 0.4px;
	}
 
	.feature-text-box{
		top: 0;
		padding-left: 16px;
	}
	
	.ranking{
		text-align: right;
		position: absolute;
		top: 0;
		right: 30px;
	}
}
/* --INTERVIEW-- */
.interview {
	padding-bottom: 24px;
}
.interview-inner {
	margin-top: 60px;
	padding-top: 80px;
	padding-left: 40px;
}
.interview-item-box {
	width: 25%;
	height: 174px;
	float: left;
}

.interview-item-box.item-tvbs {
	width: 18%;
	padding-top: 18px;
}
.interview-item-box.item-x {
	width: 28.5%;
}
.interview-item {
	padding: 16px;
}

.interview-imgbox {
	position: relative;
}
.interview-imgbox .imgbox__inner {
	width: 100%;
	padding-top: 47%;
}
.item-tvbs .interview-imgbox .imgbox__inner .image {
	background-size: 150px;
}
.interview-imgbox .imgbox__inner .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.interview-inner::-webkit-scrollbar {
	-webkit-appearance: none;
}

.interview-inner::-webkit-scrollbar:vertical {
	width: 4px;
}

.interview-inner::-webkit-scrollbar:horizontal {
	height: 4px;
}

.interview-inner::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .3);
	border: 2px solid transparent;
}

.interview-inner::-webkit-scrollbar-track {
	background-color: transparent;
}

@media (max-width: 1281px) {
	.interview {
		padding-top: 120px;
	}
}
@media (max-width: 1025px) {
	.interview-item-box.item-tvbs {
		padding-top: 14px;
	}
	.item-tvbs .interview-imgbox .imgbox__inner .image {
		background-size: 110px;
	}
}
@media (max-width: 992px) {
	.item-tvbs .interview-imgbox .imgbox__inner .image {
		background-size: contain;
	}
}
@media (max-width: 430px) {
	.interview {
		padding-top: 160px;
		padding-bottom: 40px;
	}
	.interview-inner {
		width: 100%;
		overflow-x: scroll;
		padding-top: 52px;
	}
	.interview .scroll-inner {
		width: 760px;
	}
	

	.interview-item-box {
		height: 125px;
	}
}
@media (max-width: 321px) {
	.interview {
		padding-top: 65px;
	}
}
/*-- SERVICE --*/
.service{
}
.service-wave{
	position: absolute;
	bottom: -10%;
	right: 0;
	width: 15%;
	opacity: 0.4;
	transform: rotate(90deg);
}
.service-inner{
	margin-top: 60px;
	padding-top: 80px;
}
.service-box{
	margin: 32px;
	padding: 24px;
}
.service-title-deco{
	text-align: left;
}
.service-title{
	color: #636FA4;
	padding-top: 16px;
	padding-bottom: 24px;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
}
.service-info{
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 500;
	font-size: 16px;
}
.service-bg-text{
	position: absolute;
	bottom: 0;
	right: 0;
}
.service-bg-text h5{
	font-size: 64px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 700;
	letter-spacing: 0.01em;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #ccc;
	display: inline-block;
	opacity: 0.5;
	user-select: none;
	padding-right: 24px;
}
@media (max-width: 1025px){
	.service{
		height: 850px;
	}
 
	.service-inner{
		padding-left: 32px;
	}
 
	.service-box{
		margin: 28px;
		padding: 0;
	}
 
	.service-title{
		font-size: 20px;
		padding-top: 24px;
	}
 
	.service-info{
		line-height: 28px;
	}
 
	.service-wave{
		bottom: -10%;
	}
}
@media (max-width: 992px){
	.service-inner{
		padding-left: 18px;
	}
 
	.service-bg-text h5{
		font-size: 40px;
	}
 
	.service-box{
		margin: 0px 0px 24px 0px;
		padding-bottom: 16px;
	}
 
	.service-info{
		letter-spacing: 0.3px;
	}
 
	.service-wave{
		bottom: -40%;
		right: 30%;
		width: 30%;
	}
}
@media (max-width: 430px){
	.service{
		height: 100%;
		margin-top: 40px;
	}
 
	.service-inner{
		margin-top: 40px;
	}
 
	.service-wave{
		bottom: -18%;
		right: 10%;
		width: 40%;
	}
}
@media (max-width: 321px){
	.service{
		margin-top: 0;
	}
 
	.service-inner{
		padding-left: 0;
	}
}
.service-deco{
	position: absolute;
}
.service-rectangle1{
	right: 15%;
}
.service-rectangle2{
	top: 300px;
	right: 8%;
	transform: rotate(180deg);
}
.service-rectangle3{
	top: 650px;
	left: 12%;
	transform: rotate(180deg);
}
.service-rectangle4{
	top: 800px;
	left: 6%;
}
@media (max-width: 1025px){
	.service-rectangle2,
	.service-rectangle3{
		opacity: 0.3;
	}
 
	.service-rectangle4 img{
		width: 70%;
	}
}
@media (max-width: 992px){
	.service-rectangle1{
		top: -40px;
		right: 25%;
	}
 
	.service-rectangle1 img{
		width: 60%;
	}
 
	.service-rectangle2{
		top: 130px;
		right: 8%;
		transform: rotate(180deg);
	}
 
	.service-rectangle3{
		top: 760px;
		left: 12%;
		transform: rotate(180deg);
	}
 
	.service-rectangle4{
		top: 80px;
		left: 80%;
	}
 
	.service-rectangle4 img{
		width: 50%;
	}
}
@media (max-width: 430px){
	.service-rectangle1{
		display: none;
	}
 
	.service-rectangle3{
		display: none;
	}
}

/*-- PROJECT --*/
.project{
}
.project-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.project-bg-map{
	position: absolute;
	top: 120px;
	right: 0;
	width: 35%;
	height: 70%;
}
.project-bg-map__inner{
	width: 100%;
	height: 100%;
}
.project-bg-map__inner .image{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.project-deco{
	position: absolute;
}
.project-rectangle1{
	bottom: 320px;
	left: 10%;
	transform: rotate(90deg);
}
.project-intro{
}
.project-intro-box{
					
	max-width: 530px;
	left: 45%;
	display: inline-block;
	text-align: left;
	margin-bottom: 80px;
}
.project-intro-box p{
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0.8px;
	font-weight: 400;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	display: inline-block;
}
.project-intro-box p:last-child{
	padding-top: 32px;
}
@media (max-width: 1025px){
	.project-intro-box{
		max-width: 480px;
		margin-bottom: 60px;
	}
 
	.project-intro-box p{
		font-size: 16px;
	}
 
	.project-intro-box p:last-child{
		padding-top: 16px;
	}
 
	.project-rectangle1{
		bottom: 320px;
		left: 5%;
		transform: rotate(90deg);
	}
 
	.project-rectangle1 img{
		width: 80%;
	}
}
@media (max-width: 992px){
	.project-intro{
		text-align: center;
		width: 100%;
		height: 100%;
		margin-top: 80px;
	}
 
	.project-intro-imgbox.project-intro-imgbox-B{
		max-width: 400px;
		margin-bottom: 60px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		left: auto;
		left: 3%;
	}
 
	.project-intro-box{
		left: 15%;
	}
 
	.project-intro-box p{
		font-size: 15px;
		line-height: 24px;
	}
}
@media (max-width: 430px){
	.project-intro{
		margin-top: 108px;
		padding-left: 8px;
		padding-right: 8px;
	}
 
	.project-intro-box{
		left: 0;
		text-align: center;
		max-width: 332px;
	}
 
	.project-intro-box p{
		line-height: 22px;
	}
 
	.project-intro-box p:last-child{
		padding-top: 8px;
	}
 
	.project-bg-map{
		width: 45%;
		height: 40%;
		opacity: 0.5;
	}
}
@media (max-width: 321px){
	.project-intro-box{
		text-align: left;
	}
 
	.project-intro{
		margin-top: 80px;
	}
}
.project-solid{
	display: inline-block;
	background-color: #1E344B;
	height: 600px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.project-intro-imgbox{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 16%;
	top: -210px;
}
.project-intro-imgbox.project-intro-imgbox-B{
	left: 8%;
	top: -120px;
	width: 95%;
}
.project-intro-imgbox-inner{
	width: 100%;
	padding-top: 100%;
}
.project-intro-img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.project-inner-title{
	display: inline-block;
	padding-top: 32px;
	margin-bottom: 180px;
}
.project-inner-title h6{
	font-size: 96px;
	font-weight: 700;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 117px;
	letter-spacing: 0.8px;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #94A9BF;
	text-align: right;
}
.project-check-title{
	text-align: right;
	margin-top: 110px;
}
.project-check-title h3{
	font-size: 24px;
	font-weight: 300;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	color: #fff;
	letter-spacing: 0.8px;
	display: inline-block;
	padding-right: 24px;
}
.project-links{
	margin-top: 80px;
}
.project-links li{
	float: left;
	padding: 0px 24px;
}
.project-links li:last-child{
	padding-left: 24px;
	padding-right: 0;
}
.project-links .links-btn{
	border: 2px solid #fff;
	padding: 16px 20px;
}
.project-links li a{
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 32px;
	letter-spacing: 1.3px;
	padding: 6px 24px;
	transition: all 0.1s;
}
.project-links li a:hover{
	background-color: #fff;
	color: #484848;
}
.project-links li:after{
	content: "";
	width: 1.2px;
	height: 18px;
	display: inline-block;
	vertical-align: middle;
	background-color: #fff;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(20deg);
}
.project-links li:last-child:after{
	display: none;
}
.project-deco-front{
	position: absolute;
	bottom: 48px;
	left: 12%;
}
.icon-right-big{
	padding-left: 8px;
	font-size: 15px;
	display: inline-block;
	vertical-align: top;
}
@media (max-width: 1281px){
	.project-intro-imgbox.project-intro-imgbox-B{
		top: -100px;
	}
 
	.project-links li{
		padding: 0px 13px;
	}
 
	.project-links li:last-child{
		padding-left: 13px;
	}
}
@media (max-width: 1025px){
	.project-solid{
		height: 480px;
		width: 100%;
	}
 
	.project-intro-imgbox.project-intro-imgbox-B{
		top: -65px;
		left: 5%;
	}
 
	.project-inner-title{
		padding-left: 10px;
		margin-bottom: 130px;
	}
 
	.project-inner-title h6{
		font-size: 86px;
		line-height: 86px;
	}
 
	.project-links li{
		padding: 0;
		margin-right: 12px;
	}
 
	.project-links li:last-child{
		padding-left: 0;
	}
 
	.project-links li:after{
		display: none;
	}
 
	.project-links{
		margin-top: 44px;
	}
 
	.project-links .links-btn{
		padding: 14px;
	}
 
	.project-links li a{
		font-size: 16px;
		padding: 6px 12px;
	}
 
	.project-check-title{
		margin-top: 70px;
	}
 
	.project-check-title h3{
		font-size: 22px;
	}
}
@media (max-width: 992px){
	.project-solid{
		height: 400px;
	}
 
	.project-intro-imgbox{
		top: -90px;
		width: 55%;
		z-index: 2;
	}
 
	.project-inner-title{
		padding-left: 0;
		padding-right: 6px;
		margin-bottom: 100px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
 
	.project-inner-title h1{
		font-size: 86px;
		line-height: 86px;
	}
 
	.project-check-title{
		margin-top: 68px;
	}
 
	.project-check-title h3{
		font-size: 20px;
		padding-right: 14px;
	}
 
	.project-links{
		margin-top: 36px;
	}
 
	.project-links li{
		padding: 0px;
	}
 
	.project-links li a{
		font-size: 16px;
		padding: 6px 12px;
	}
 
	.project-deco-front{
		bottom: 38px;
		left: 6%;
	}
	
}
@media (max-width: 430px){
	.project-solid{
		width: 90%;
		height: 500px;
	}
 
	.project-intro-imgbox.project-intro-imgbox-B{
		width: 100%;
		max-width: 100%;
		left: 0;
		padding-left: 40px;
		padding-right: 40px;
	}
 
	.project-intro-imgbox{
		top: -54px;
		width: 72%;
		left: 15%;
	}
 
	.project-inner-title h6{
		display: none;
	}
 
	.project-check-title{
		margin-top: 86px;
	}
 
	.project-check-title h3{
		padding-left: 24px;
		font-size: 18px;
	}
 
	.project-links{
		margin-top: 24px;
	}
 
	.project-links .links-btn{
		padding: 4px 2px;
		width: 100%;
		height: 100%;
		display: inline-block;
		border: 0;
	}
 
	.project-links li{
		float: none;
		margin-bottom: 16px;
		width: 128px;
		border: 2px solid #fff;
	}
 
	.project-links li a{
		padding: 6px 6px;
		font-size: 15px;
	}
 
	.project-links li:last-child{
		padding: 0;
	}
 
	.project-inner-title{
		padding: 0;
		margin-top: 180px;
		padding-right: 20px;
		text-align: right;
	}
 
	.project-deco-front{
		bottom: 40px;
		left: 10%;
	}
 
	.project-deco-front img{
		width: 50%;
	}

}
@media (max-width: 400px){
	.project-links li{
		width: 124px;
	}
 
	.project-check-title{
		margin-top: 48px;
	}
}
@media (max-width: 321px){
	.project-solid{
		height: 500px;
	}
 
	.project-intro-imgbox.project-intro-imgbox-B{
		left: 0;
	    top: -81px;
	    width: 100%;
	    padding: 14px;
	}
 
	.project-check-title h3{
		padding-right: 0;
		font-size: 16px;
	}
 
	.project-links{
		margin-left: 20px;
	}
 
	.project-links li{
		padding: 0;
		margin-bottom: 12px;
		margin-right: 8px;
		width: 134px;
	}
 
	.project-links li:after{
		display: none;
	}
 
	.project-links li:last-child{
		padding: 0;
	}
 
	.project-links .links-btn{
		padding: 10px 12px;
	}
 
	.project-links li a{
		font-size: 15px;
		line-height: 25px;
	}
 
	.icon-right-big{
		font-size: 14px;
		padding-left: 5px;
	}
 
	.project-deco-front{
		bottom: 20px;
	}
}

/* logo carousel */
.owl-carousel{
	padding-left: 40px;
	padding-right: 40px;
}
.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.project__icons-box{
	text-align: center;
}
.project__icons-box-inner{
	width: 100%;
	padding-top: 30%;
}
.project__icons-box-img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.owl-carousel .owl-item{
	opacity: 0.2;
	transition: all 0.3s;
}
.owl-carousel .owl-item.active.center{
	opacity: 1;
}
@media (max-width: 430px){
	.project__icons-box-inner{
		padding-top: 20%;
	}
}

/*-- REQUEST --*/
.request{
}
.request-bg{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
}
.request-bg img{
	width: 75%;
			  
	display: inline-block;
	opacity: 0.3;
}
.request-deco{
	position: absolute;
}
.request-rectangle1{
	top: 0;
	right: 5%;
	transform: rotate(90deg);
}
.request-rectangle1 img{
	width: 90%;
}
.request-rectangle2{
	top: 5%;
	right: 25%;
}
.request-rectangle3{
	bottom: 5%;
	left: 25%;
}
@media (max-width: 1025px){
	.request-rectangle1{
		top: 15%;
	}
 
	.request-rectangle1 img{
		width: 60%;
	}
 
	.request-rectangle2,
	.request-rectangle3{
		opacity: 0.2;

	}
 
	.request-rectangle2{
		right: 7%;
	}
}
@media (max-width: 992px){
	.request-rectangle1{
		top: 0;
	}
 
	.request-rectangle2{
		right: 7%;
		top: 0;
	}
 
	.request-rectangle3{
		bottom: 6%;
		left: 12%;
	}
}
@media (max-width: 430px){
	.request-rectangle1{
		top: -50px;
	}
 
	.request-rectangle1 img{
		width: 50%;
	}
 
	.request-rectangle2{
		top: -40px;
	}
}
.request-explain{
	margin-top: 130px;
	margin-bottom: 130px;
	width: 100%;
	padding-left: 180px;
	padding-right: 180px;
}
.request-box{
	float: left;
	width: 14.28571428%;
	padding: 24px;
}
.request-box:nth-child(odd){
	margin-top: 120px;
}
.request-box-img{
	padding: 28px;
}
.request-box-img .number{
	position: absolute;
	left: -5%;
	bottom: 0;
}
.request-box-img .number h6{
	font-size: 96px;
	font-weight: 700;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	color: #DBE6F6;
}
.request-box-img svg{
	width: 100%;
	height: 100%;
}
.request-item{
	text-align: center;
}
.request-item h3{
	font-size: 14px;
	font-weight: 300;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 24px;
	letter-spacing: 1.3px;
}
@media (max-width: 1441px){
	.request-box{
		padding: 16px;
	}
 
	.request-box-img{
		padding: 14px;
	}
}
@media (max-width: 1281px){
	.request-box{
		padding: 12px;
	}
 
	.request-box-img{
		padding: 7px;
	}
}
@media (max-width: 1025px){
	.request-explain{
		padding-left: 80px;
		padding-right: 60px;
		margin-top: 100px;
		margin-bottom: 0px;
	}
 
	.request-box{
		padding: 16px;
	}
 
	.request-box-img{
		padding: 0px;
	}
 
	.request-box-img .number{
		left: -24%;

	}
}
@media (max-width: 992px){
	.request-explain{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
 
	.request-box{
		width: 25%;
		padding: 28px;
	}
 
	.request-box:nth-child(odd){
		margin-top: 0px;
	}
}
@media (max-width: 430px){
	.request-explain{
		padding-right: 10px;
		padding-left: 32px;
	}
 
	.request-box{
		padding: 14px;
		padding-top: 24px;
		width: 28%;
	}
}
@media (max-width: 321px){
	.request-explain{
		padding-left: 14px;
	}
 
	.request-box{
		width: 36%;
		padding-top: 0;
		padding: 10px;
	}
 
	.request-box:nth-child(even){
		margin-top: 60px;
	}
 
	.request-box-img .number{
		bottom: 18px;
		left: 0;
	}
 
	.request-box-img .number h1{
		font-size: 80px;
	}
 
	.request-box-img svg{
		width: 65%;
	}
 
	.request-item h3{
		font-size: 16px;
		text-align: left;
		letter-spacing: 0.8px;
	}
}

/*-- CONTACT --*/
.contact{
}
.contact-deco{
	position: absolute;
}
.contact-rectangle1{
	top: -150px;
	right: 40%;
}
.contact-rectangle1 img{
	width: 80%;
}
@media (max-width: 1025px){
	.contact-rectangle1 img{
		width: 60%;
	}
}
@media (max-width: 992px){
	.contact-rectangle1{
		right: 0;
	}
 
	.contact-rectangle1 img{
		width: 50%;
	}
}
.contact-content{
	padding-top: 120px;
  
}
.map-box{
	width: 100%;
	height: 600px;
	margin-left: -16px;
	margin-top: 52px;
}
.contact__right-side{
	padding-left: 80px;
	padding-right: 120px;
}
.contact-text{
	padding-top: 32px;
	padding-bottom: 32px;
}
.contact-text p{
	font-size: 16px;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 32px;
	letter-spacing: 1.3px;
}
.contact__right-side .btn{
	display: inline-block;
	box-sizing: border-box;
	background-color: #034591; 
	color: #fefefe;
	transition: all 0.3s;
}
.contact__right-side .btn:hover{
	background-color: #E0A763;
}
.contact__right-side .btn:hover span,
.contact__right-side .btn:hover span:after{
}
.contact__right-side .btn span{
	display: inline-block;
	vertical-align: middle;
	width: 36px;
	height: 2px;
	background-color: #fefefe;
	margin-left: 8px;
	transition: all 0.3s;
}
.contact__right-side .btn span:after{
	content: "";
	width: 2px;
	height: 12px;
	background-color: #fefefe;
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-90%) rotate(-40deg); 
	transition: all 0.3s;
}
.contact-info{
	margin-top: 72px;
}
.contact-info__title{
	color: #7FA1D4;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1.8px;
	line-height: 40px;
	margin-bottom: 4px;
}
.contact-info__text{
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1.8px;
}
@media (max-width: 1281px){
	.contact__right-side{
		padding-left: 32px;
		padding-right: 85px;
	}
 
	.contact-text{
		padding-top: 48px;
	}
}
@media (max-width: 1025px){
	.map-box{
		height: 550px;
	}
 
	.contact__right-side{
		padding-left: 16px;
		padding-right: 32px;
	}
 
	.contact-info__title{
		font-size: 18px;
		line-height: 32px;
	}
 
	.contact-info__text{
		font-size: 16px;
		letter-spacing: 0.8px;
	}
}
@media (max-width: 992px){
	.map-box{
		margin-top: 70px;
	}
 
	.contact-text{
		padding-top: 48px;
		padding-bottom: 24px;
	}
 
	.contact-text p{
		line-height: 28px;
		letter-spacing: 0.8px;
	}
 
	.contact-info{
		margin-top: 16px;
	}
}
@media (max-width: 430px){
	.map-box{
		height: 300px;
		margin-left: 0;
		margin-top: 40px;
	}
 
	.contact__right-side{
		text-align: center;
	}
 
	.contact-text{
		padding-bottom: 16px;
	}
}
@media (max-width: 321px){
	.contact-text{
		padding-top: 0;
	}
 
	.contact-text p{
		line-height: 24px;
		font-size: 15px;
	}
 
	.contact__right-side{
		text-align: left;
	}
}

/*-- FOOTER --*/
.footer{
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #1E344B;
}
.footer-logo{
	text-align: center;
}
.footer-logo img{
	display: inline-block;
	width: 140px;
}
.copyright{
	color: #fefefe;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1.8px;
	padding-top: 18px;
}
.footer--page{
	padding-top: 80px;
	padding-bottom: 60px;
}
.footer--page .footer-logo img{
	width: 100px;
}
@media (max-width: 1025px){
	.footer{
		padding-top: 80px;
		padding-bottom: 60px;
	}
}
@media (max-width: 430px){
	.footer{
		padding-top: 60px;
		padding-bottom: 40px;
	}
 
	.footer-logo img{
		width: 100px;
	}
 
	.copyright{
		font-size: 14px;
		letter-spacing: 0.8px;
		padding-top: 10px;
	}
}
@media (max-width: 321px){
	.footer{
		padding-top: 32px;
		padding-bottom: 24px;
	}
 
	.footer-logo img{
		width: 60px;
	}
 
	.copyright{
		font-size: 12px;
		letter-spacing: 0.4px;
		padding-top: 0;
	}
}

/*-- BACK TO TOP --*/
.to-top-btn{
	display: inline-block;
	position: fixed;
	right: 3%;
	top: calc(100% - 220px);
	padding: 24px;
	z-index: 99;
	opacity: 1;
	visibility: visible;
}
.to-top-btn span{
	display: block;
	width: 2px;
	height: 120px;
	background-color: #1E344B;
	border-radius: 4px;

}
.to-top-btn span:before{
	content: "";
	display: inline-block;
	width: 2px;
	height: 30px;
	background-color: #1E344B;
	border-radius: 4px;
	position: absolute;
	top: -1px;
	left: 8px;
	transform: rotate(-30deg);
}
.to-top-btn .to-top-circle{
	display: block;
	padding: 24px;
	position: absolute;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}
.to-top-btn .to-top-circle:before{
	content: "";
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.to-top-circle h5{

}
					
.js-disable.to-top-btn{
	opacity: 0;
	visibility: hidden;
}
@media (max-width: 1025px){
	.to-top-btn{
		right: 1%;
	}
 
	.to-top-btn span{
		height: 85px;
	}
}

/* line@ & chat */
.chat-bubble{
	position: fixed;
	bottom: 14%;
	right: 1%;
	width: 60px;
	height: 60px;
	line-height: 60px;
    text-align: center;
	border-radius: 50%;
    background-color: #1E344B;
    z-index: 2;
}
.chat-bubble_img{
	display: inline-block;
	line-height: 60px;
    vertical-align: middle;
	width: 36px;
	height: 36px;
	top: -3px;
	background-position: center;
    background-size: contain;
					
		  
		   
								  
    animation: lineshake 2s cubic-bezier(.36,.07,.19,.97) both infinite;
}
.chat-bubble span {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 0px;
    bottom: 0px;
    background: #aec0ff;
    border-radius: 50%;
    -webkit-animation: living 3s linear infinite;
	opacity: 0.4;
    z-index: -1;
}
.chat-bubble span:nth-child(2) {
    -webkit-animation-delay: 1s;
}
.line-bubble{
	position: fixed;
	bottom: 4%;
	right: 1%;
	border: 2px solid #51D261;
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2;
}
.line-bubble_img {
    width: 55px;
    height: 55px;
    background-position: center;
    background-color: #fff;
    background-size: cover;
    border-radius: 50%;
    animation: lineshake 2s cubic-bezier(.36,.07,.19,.97) both infinite;
}
.line-bubble span {
    position: absolute;
    width: 60px;
    height: 60px;
    left: -2px;
    bottom: -3px;
    background: #8CF18F;
    border-radius: 50%;
    -webkit-animation: living 3s linear infinite;
	opacity: 0.4;
    z-index: -1;
}
.line-bubble span:nth-child(2) {
    -webkit-animation-delay: 1s;
}
@media (max-width: 1281px){
	.chat-bubble{
		bottom: 16%;
	}
}
@media (max-width: 1025px){
	.chat-bubble{
		right: 2%;
		bottom: 10%;
	}
 
	.line-bubble{
		right: 2%;
		bottom: 4%;
	}
}
@media (max-width: 992px){
	.chat-bubble{
		right: 2%;
		bottom: 10%;
	}
 
	.line-bubble{
		right: 2%;
		bottom: 2%;
	}
}
@media (max-width: 430px){
	.chat-bubble{
		bottom: 86px;
		right: 2%;
	}
 
	.line-bubble{
		right: 2%;
		bottom: 16px;
	}
}
@media (max-width: 321px){
	.chat-bubble{
		width: 52px;
		height: 52px;
		bottom: 76px;
		right: 2%;
		line-height: 52px;
	}
 
	.chat-bubble_img{
		width: 30px;
		height: 30px;
	}
 
	.chat-bubble span {
		width: 52px;
		height: 52px;
	}
 
	.line-bubble{
		width: 52px;
		height: 52px;
		right: 2%;
		bottom: 18px;
	}
 
	.line-bubble_img{
		width: 47px;
		height: 47px;
	}
 
	.line-bubble span {
		width: 52px;
		height: 52px;
	}
}
@keyframes lineshake{
	10%, 90% {
	  
    transform: translate3d(-1px, 0, 0);
	}
 
	20%, 80% {
	  
	    transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70% {
	 
	 
	  
	    transform: translate3d(-2px, 0, 0);
	}
 
	40%, 60% {
	  
	    transform: translate3d(1px, 0, 0);
	}
}
@keyframes living{
	 
	  
														   
  
 
	 
	  
														  
  
 
	 
	 
	  
														   
  
 
	 
	  
														  
  
 
				   
	0% {
	    transform: scale(1);
	    opacity: 0.5;
	}
 
	50% {
	    transform: scale(1.5);
	    opacity: 0.3;
	}
 
	100% {
	    transform: scale(1.8);
	    opacity: 0;
	}
}

/*------------------------------------------*/

/* NEWS */
.search-bar {
	float: right;
	width: 20%;
	position: relative;
	padding-right: 16px;
}
.search-submit {
	background-color: transparent;
	border: none;
	outline: none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	cursor: pointer;
	padding: 6px 16px;
}
.search-bar .form input {
	border: 1px solid #acacac;
	background-color: rgba(256,256,256,0.8);
}
.search-result-none {
	margin: 24px;
	text-align: center;
	padding-bottom: 46px;
	border-bottom: 1px solid #cad5e0;
}
.search-result-none span {
	font-weight: 400;
}

.news-article{
	margin: 12px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
}
.article-inner{
	padding: 16px;
}
.news-titlebox{
	margin: 12px 8px 12px 8px;
	min-height: 50px;
}
.news-title{
	font-size: 22px;
	font-weight: 700;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  
	letter-spacing: 0.5px;
}
.news-info{
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  
	padding: 0 12px;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: 33.3333333%;
}
.grid-item {
  height: 120px;
  float: left;
  border-radius: 5px;
}
.grid-item--width1 { width: 33.333333%; }
				   
 
.grid-item--width2 { width:  40%; }
			
 
.grid-item--width3 { width:  60%; }
			
 
.grid-item--height2 { height: 200px; }
			   
 
.grid-item--height3 { height: 260px; }
			   
 
.grid-item--height4 { height: 360px; }

 
@media (max-width: 1025px){
	.grid-sizer,
	.grid-item {
	  width: 50%;
	}
}
@media (max-width: 430px){
	.grid-sizer,
	.grid-item {
	  width: 100%;
	}
}
.news-imgbox{
	width: 100%;
	height: 100%;
}
.news-imgbox__inner{
	width: 100%;
	padding-top: calc(100% * 1 / 3);
}
.news-imgbox__inner .image{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.pagination-nav{
	width: 100%;
	margin-top: 32px;
	margin-bottom: 48px;
}
.pagination{
	justify-content: center;
}

.page-link{
	border: 0;
	background-color: transparent;
	margin-right: 8px;
	margin-left: 8px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	padding: 13px 24px;
	line-height: 22px;
	color: #484848;
}
.page-link:before{
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #e9e9e9;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
.page-item{
}
			 
.page-item.active .page-link{
	background-color: transparent;
	border: 0;
}
.page-item.active .page-link:before{
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #1E344B;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
.page-item.disabled .page-link{
	background-color: transparent;
	color: #acacac;
}
.page-item.disabled .page-link-prev,
.page-item.disabled .page-link-next{
	display: none;
}
.page-link-prev,.page-link-next{
				 
	display: inline-block;
	margin-left: 24px;
	margin-right: 24px;
}
.page-link-prev:hover span,
.page-link-prev:hover span:after,
.page-link-next:hover span,
.page-link-next:hover span:after{
	background-color: #E0A763;
}
.page-link:hover{
	background-color: transparent;
	border: 0;
	color: #E0A763;
}
.page-link-prev span,
.page-link-next span{
	top: 5px;
	display: inline-block;
	width: 32px;
	height: 2px;
	background-color: #484848;
	transition: all 0.2s;
}
.page-link-prev span:after{
	content: "";
	width: 2px;
	height: 12px;
	background-color: #484848;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-90%) rotate(40deg); 
	transition: all 0.2s;
}
.page-link-next span:after{
	content: "";
	width: 2px;
	height: 12px;
	background-color: #484848;
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-90%) rotate(-40deg); 
	transition: all 0.2s;
}

/*------------*/

/*NEWS ARTICLES*/
.article-section{
	background-color: #fff;
	padding: 48px 15px;
}
.article__img{
	margin-top: 16px;
	margin-bottom: 32px;
}
.article__imgbox{
	width: 100%;
	height: 100%;
}
.article__imgbox .image img{
	width: 100%;
}
.article__date{
	font-size: 15px;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	color: #484848;
}
.article__date__icon{
	padding-right: 8px;
}
.article__text{
	font-size: 18px;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
	/*font-weight: 600;*/
	line-height: 32px;
	letter-spacing: 1px;
}
.article__text a{
	color: #3a72ca;
	transition: all 0.2s;
}
.article__text a:hover{
	color: #F8BB5D;
}
/*.article__text  img{
	width: 100%;
}*/
.article__text h2 {
	font-size: 28px;
	color: #e0a763;
}
.article__text ol, .article__text ul {
	padding-left: 42px;
	margin-top: 16px;
	margin-bottom: 16px;
	max-width:100%;
}
.article__text ul {
	list-style: disc;
}
.article__text nav {
	margin-top: 16px;
	margin-bottom: 20px;
}
.article__text nav ul {
	display: inline-block;
	border-radius: 8px;
	background-color: #eee;
	padding-top: 24px;
	padding-bottom: 24px;
	padding-left: 48px;
	padding-right: 42px;
}
.article__text nav ul li::marker {
	color: #8daed8;
}
.article__text nav ul li:nth-child(1) {
	list-style: none;
	font-weight: 600;
}
.article__text nav ul li {
	padding: 6px 0;
}
.article__text nav ul li a {
	color: #3b3b3b;
	text-decoration: underline;
}
.article__text nav ul li a:hover {
	color: #5e5e5e;
	text-decoration: none;
}
.article__text blockquote {
	margin-left: 30px;
	padding: 24px;
	border-left: 4px solid #9abdf1;
	background-color: #f0f8ff;
}
.article__text blockquote:before {
	color: #e0edff;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.15em;
	vertical-align: -0.4em;
	font-family: 'Montserrat', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
.other-article-section{
	padding: 24px;
}
.other-articlebox{
	display: inline-block;
	padding: 24px 20px;
	margin-bottom: 32px;
	background-color: #f8f8f8;
}
.other-article-section{
	background-color: #fff;
}
.other-article-section h2{
	font-size: 16px;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 32px;
	padding: 28px 0px 24px 28px;
}
.other-article-section h2:after{
	content: "";
	width: 80%;
	height: 2px;
	background-color: #484848;
	display: block;
}
.other-article-img{
	max-width: 100%;
}
.other-article-imgbox__inner{
	width: 100%;
	padding-top: 30%;
}
.other-article-imgbox__inner .image{
	background-size: cover;
	background-position: left;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.other-article-info h3{
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-size: 18px;
	transition: all 0.2s;
}
.other-article-info:hover h3{
	color: #5C8EDC;
}
.other-article-info p{
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
}
.sign-bottom{
	display: inline-block;
    line-height: 25px;
    margin-top: 16px;
    letter-spacing: 1.2px;
    padding-bottom: 20px;
    width: 68%;
    background-image: url('https://pintech.linebot.info/assets/img/deco/page_title2.svg');
    background-position: 266px;
    background-repeat: no-repeat;
    background-size: cover;
}

.sign-bottom::after{
	content: "";
	background-image: url('https://pintech.linebot.info/assets/img/logo/logo-sign.svg');
	background-size: cover;
	width: 250px;
	height: 250px;
	position: absolute;
	top: -110px;
	left: -22px;
	opacity: 0.1;
}
.article__text .sig-wrapper {
	text-align: center;
}
.article__text a.sig-box {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	width: 500px;
}
.sig-box__inner {
	width: 100%;
	padding-top: 56%;
}
.sig-box__inner .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 1025px){
	.other-article-info h3{
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}
 
	.other-article-section{
		padding: 18px;
	}
 
	.other-articlebox{
		padding: 20px 16px;
		min-width: 100%;
	}
	.sign-bottom{
		width: 88%;
	}
	.sign-bottom::after{
		width: 240px;
		height: 240px;
		top: -140px;
		left: -32px;
	}
}
@media (max-width: 992px){
	.sign-bottom{
		width: 100%;
		background-position: 156px;
	}
	.sign-bottom::after{
		width: 180px;
		height: 180px;
		top: -70px;
	}
	.search-bar {
		width: 30%;
	}
	.article__text a.sig-box {
		width: 100%;
	}

}
@media (max-width: 430px){
	.article__text blockquote {
		margin-left: 20px;
		margin-right: 20px;
	}
	.article__text p{
		line-height: 24px;
		letter-spacing: 0.5px;
	}
	.search-bar {
		width: 60%;
	}
	.search-result-none span {
		display: block;
		line-height: 40px;
	}
	.search-result-none {
		padding-bottom: 32px;
	}
}
@media (max-width: 400px){
	.sign-bottom{
		background-position: 126px;
	}
	.search-bar {
		width: 60%;
	}
}
@media (max-width: 321px){
	.article-section{
		padding: 36px 22px;
	}
	.sign-bottom::after{
		width: 100px;
		height: 100px;
		top: 47px;
		left: -2px;
	}
	.search-bar {
		width: 100%;
	}
}

/*------------------------------------------*/

/* PAGE GLOBAL */
.cooperate-bg{
	position: -webkit-sticky;
	position: sticky;
	bottom: 0px;
	width: 100%;
	opacity: 0.2;
}
.cooperate-box{
	/*margin-top: 180px;*/
 
	padding-bottom: 700px;
	margin-bottom: 480px;
	z-index: 2;
}
.cooperate-box.cooperate-box--rwd{
	padding-bottom: 560px;
	margin-bottom: 380px;
}
.cooperate-box .indicator{
	width: 210px;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 8%;
	left: 29%;
	z-index: 3;
}
.cooperate-box .indicator:before{
	content: "";
	width: 1px;
	height: 40px;
	background-color: #000;
	display: inline-block;
}
.cooperate-imgbox{
	z-index: 2;
}
.cooperate-imgbox.imgbox-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
.cooperate-imgbox__inner{
	width: 100%;
	padding-top: 100%;
}
.cooperate-imgbox__inner .image1{
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.cooperate-imgbox__inner .image2{
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0px;
	margin-left: 8px;
	margin-top: 88px;
	z-index: 2;
}
.cooperate-imgbox__inner .image3{
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0px;
	margin-left: 0px;
	margin-top: 80px;
	z-index: 2;
}
.cooperate-infobox{
	background-color: rgba(256,256,256,1);
	padding: 78px 48px 68px 80px;
	box-shadow: 3px 12px 16px rgba(0,0,0,0.1);

}
.cooperate-title{
	font-family: 'Noto Serif TC', 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1px;
	font-size: 38px;
	padding-bottom: 32px;
}
.cooperate-title .title--sm{
	font-size: 26px;
}
.cooperate-title .title--sm:before{
	content: " | ";
	display: inline-block;
	margin-left: 16px;
	margin-right: 16px;
	background-color: transparent;
}
.cooperate-title p.cooperate-title__range{
	margin-top: 24px;
	padding: 16px 24px;
	line-height: 24px;
	display: block;
	color: #484848;
	font-size: 15px;
	border-radius: 5px;
	background-color: #eee;
	border-bottom: 4px solid #E0A763;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
}
.cooperate-title p.cooperate-title__range:before{
	content: "";
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 14px solid #eee;
	border-radius: 4px;
	position: absolute;
	top: -13px;
	left: 16px;
}
.cooperate-title p.cooperate-title__range span{
	/*display: block;
	margin-bottom: 6px;
	font-weight: bold;*/
 
	font-size: 16px;
	font-weight: bold;
}
.cooperate-text{
	font-weight: 400;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 1.2px;
	padding: 0 32px 32px 16px;
}
.cooperate-text .cooperate-text-categ,
.cooperate-color .cooperate-text-categ,
.cooperate-feature .cooperate-text-categ{
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
	width: 20%;
}
.cooperate-text p.cooperate-text__info{
	display: inline-block;
	vertical-align: top;
	width: 75%;
	margin-bottom: 10px;
	line-height: 32px;
	font-size: 16px;
}
.cooperate-color{
	padding: 0px 30px;
}
.cooperate-color .cooperate-text-categ{
	margin-bottom: 8px;
}
.color-palette{
	display: inline-block;
	margin-right: 24px;
	padding-top: 6px;
}
.color-palette img{
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	margin-right: 8px;
}
h5.color-code{
	display: inline-block;
	vertical-align: middle;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
}
.cooperate-feature{
	margin-bottom: 32px;
}
.cooperate-feature img{
	width: 60px;
	height: 60px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 16px;
}
.cooperate-feature .feature-box{
	width: 100%;
	height: 100%;
	margin-top: 8px;
}
.cooperate-feature .feature-box p{
	display: inline-block;
	padding-right:  8px;
	line-height: 24px;
}
.cooperate-pics{
	margin-top: 24px;
}
.cooperate-show-box{
	width: 100%;
	height: 1400px;
	position: absolute;
	top: -32px;
	right: -210px;
	/*z-index: 1;*/
}
.cooperate-show-box.cooperate-show-box--rwd{
	height: 1280px;
}

/*.cooperate-show-box1{
	top: 0;
}
.cooperate-show-box2{
	top: 1360px;
}
.cooperate-show-box3{
	top: 2720px;
}
.cooperate-show-box4{
	top: 4080px;
}*/

/*.cooperate-show-box--rwd.cooperate-show-box2{
	top: 1160px;
}
.cooperate-show-box--rwd.cooperate-show-box3{
	top: 2320px;
}
.cooperate-show-box--rwd.cooperate-show-box4{
	top: 3620px;
}*/
.cooperate-show{
	transform: translateZ(0) rotate(32deg) skew(-1deg);
	position: absolute;
	top: 0px;
	right: 0px;
}
.cooperate-show.show--rwd{
	transform: translateZ(0) rotate(0deg) skew(0deg);
	height: 100%;
	right: -240px;
}
.phone-group{
	width: 33.333333%;
}
.phone{
	width: 280px;
	height: 606px;
	border-radius: 30px;
	margin-bottom: 32px;
	background-color: #fff;
	box-shadow: 8px 10px 20px rgba(0,0,0,0.2);
	background-position: center;
	background-size: cover;
	margin: 24px 16px;
}
.phone1{
	margin-top: 606px;
}
.phone2{
	margin-top: 100px;
}
.screen-group{
	top: 150px;
}
.screen{
	width: 512px;
	height: 320px;
	margin: 24px 16px;
	background-position: center;
	background-size: cover;
	box-shadow: 8px 10px 20px rgba(0,0,0,0.2);
}
.screen1{
	margin-top: 300px;
}
@media (max-width: 1281px){
	.cooperate-text .cooperate-text-categ, 
	.cooperate-color .cooperate-text-categ, 
	.cooperate-feature .cooperate-text-categ{
		width:26%;
	}
	.cooperate-text p.cooperate-text__info{
		width:70%;
	}
	.cooperate-feature img{
		margin-left: 0;
	}
}
@media (max-width: 1025px){
	.cooperate-box{
		margin-bottom: 340px;
	}
 
	.cooperate-infobox{
		padding: 54px 44px 54px 50px;
	}
 
	.cooperate-title{
		font-size: 34px;
	}
 
	.cooperate-title .title--sm{
		font-size: 22px;
	}
 
	.cooperate-title .title--sm:before{
		margin-left: 10px;
		margin-right: 10px;
	}
 
	.cooperate-title p.cooperate-title__range{
		padding: 16px 18px;
	}
 
	.cooperate-text .cooperate-text-categ, 
	.cooperate-color .cooperate-text-categ, 
	.cooperate-feature .cooperate-text-categ{
		display: block;
		width: 100%;
	}
 
	.cooperate-text p.cooperate-text__info{
		display: block;
		width: 100%;
	}
 
	.cooperate-feature img{
		margin-left: 0;
	}
 
	.cooperate-feature .feature-box p{
		line-height: 22px;
	}

}
@media (max-width: 992px){
	.cooperate-box{
		margin-bottom: 180px;
		padding-bottom: 0px;
		height: 2100px;
	}
 
	.cooperate-box .indicator{
		display: none;
	}
 
	.cooperate-imgbox{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 800px;
	}
 
	.cooperate-imgbox.imgbox-overlay{
		height: 800px;
	}
 
	.cooperate-imgbox__inner{
		padding-top: 70%;
	}
 
	.cooperate-infobox{
		position: absolute;
		top: 470px;
		padding: 70px 58px;
	}
 
	.cooperate-show-box{
		top: 700px;
		right: 0;
		height: 100%;
	}
 
	.cooperate-show{
		width: 100%;
	}
 
	.phone{
		width: 180px;
		height: 390px;
	}
 
	.phone1{
		margin-top: 326px;
	}
}
@media (max-width: 430px){
	.cooperate-bg{
		bottom: 8px;
		opacity: 0.8;
	}
 
	.cooperate-box{
		height: 1820px;
		margin-bottom: 32px;
	}
 
	.cooperate-box .indicator{
		display: inline-block;
		transform: rotate(90deg);
		top: 29%;
		left: 56%;
		box-shadow: 0px 0px 3px rgba(256,256,256,0.9);
	}
 
	.cooperate-box .indicator:before{
		box-shadow: inherit;
	}
 
	.cooperate-show-box{
		top: 32px;
		opacity: 0.7;
	}
 
	.phone{
		width: 120px;
		height: 260px;
		border-radius: 15px;
	}
 
	.cooperate-imgbox.imgbox-overlay{
		height: 500px;
	}
 
	.cooperate-imgbox__inner{
		width: 100%;
		padding-top: 72%;
	}
 
	.cooperate-imgbox__inner .image{
		margin-left: 0;
		margin-top: 40px;
	}
 
	.cooperate-infobox{
		padding: 44px 24px;
		text-align: left;
		top: 600px;
		left: 0;
		margin-left: 8px;
		margin-right: 8px;
	}
 
	.cooperate-title{
		font-size: 32px;
	}
 
	.cooperate-title .title--sm:before{
		margin-left: 8px;
		margin-right: 8px;
	}
 
	.cooperate-text{
		padding: 0px 16px 24px 16px;
	}
 
	.cooperate-text p.cooperate-text__info{
		line-height: 28px;
		margin-bottom: 16px;
	}
 
	.cooperate-feature{
		padding: 0px 16px;
	}
 
	.cooperate-feature img{
		margin-bottom: 8px;
	}
 
	.cooperate-color{
		padding: 0px 16px;
	}
 
	.color-palette{
		margin-left: 0;
	}
	
}
@media (max-width: 400px){
	.phone{
		margin: 10px 18px;
	}
 
	.phone1{
		margin-top: 180px;
	}
 
	.cooperate-title .title--sm:before{
		margin-left: 5px;
		margin-right: 5px;
	}
 
	.cooperate-title .title--sm{
		font-size: 18px;
	}
}
@media (max-width: 321px){
	.cooperate-box{
		height: 1760px;
		margin-bottom: 24px;
	}
 
	.cooperate-show-box{
		top: 148px;
	}
 
	.cooperate-imgbox__inner{
		padding-top: 100%;
	}
 
	.phone{
		width: 100px;
		height: 216px;
		border-radius: 10px;
	}
 
	.cooperate-infobox{
		padding: 32px 18px;
	}
 
	.cooperate-title{
		font-size: 26px;
	}
 
	.cooperate-title .title--sm{
		font-size: 16px;
		display: block;
		text-align: right;
		padding-right: 40px;
		margin-top: 8px;
	}
 
	.cooperate-text{
		font-weight: 300;
		font-size: 15px;
		letter-spacing: 0.5px;
		line-height: 26px;
		padding: 0px 12px 0px 12px;
	}
 
	.cooperate-text p.cooperate-text__info{
		line-height: 26px;
		margin-bottom: 14px;
		font-size: 15px;
	}
 
	.cooperate-feature img{
		width: 45px;
		height: 45px;
	}
 
	.color-palette{
		padding-top: 4px;
	}
 
	.color-palette img{
		width: 15px;
	}
}

/* timeline */
.award-section{
	position: -webkit-sticky;
	position: sticky;
	top: 210px;
	text-align: right;
}
.award-item{
	padding-top: 48px;
	padding-bottom: 48px;
}
.award-item h2{
	font-size: 18px;
	padding-bottom: 16px;
}
.award-pic{
	margin-bottom: 32px;
}
.award-pic__inner{
	width: 100%;
	padding-top: calc(100% * 3 / 4);
}
.award-pic__inner .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.timeline--experience{
	position: -webkit-sticky;
	position: sticky;
	top: 210px;
	text-align: right;
}
.award-title--ch,
.experience-title--ch{
	font-size: 32px;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 500;
	letter-spacing: 0.9px;
	padding-bottom: 8px;
}
.award-title--en,
.experience-title--en{
	font-size: 24px;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 500;
	letter-spacing: 2px;
	color: #E0A763;
}
.timeline__section-items {
  margin: 0 auto;
  padding: 0 16.66% 50px;
  width: 100%;
}
.timeline__section{
}
					 
article {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}
.timeline__nav {
  position: sticky;
  position: -webkit-sticky;
  z-index: 98;
  top: 200px;
  display: inline-block;
  transition: top 0.3s ease-out;
}
.timeline__nav ul {
  list-style: none;
  list-style-position: inside;
  margin: 15px 0;
}
.timeline__nav ul li {
  margin: 15px 0;
  padding-left: 0;
  list-style-type: none;
  color: #bfc1c3;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.timeline__nav ul li.active {
  font-weight: bold;
  color: #E0A763;
  border-bottom: 1px dotted transparent;
  transform: scale(1.2);
}
.timeline__nav ul li:hover {
  color: #DBE6F6;
}
.milestone{
	margin-bottom: 24px;
}
.milestone-item{
	margin-bottom: 12px;
}
.milestone-year{
	display: inline-block;
	padding: 16px 0;
	color: #5F75B1;
	font-size: 24px;
}
.milestone-cata{
	font-size: 16px;
	color: #acacac;
}
.milestone-name{
	font-size: 18px;
	letter-spacing: 1px;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-weight: 500;
}
@media (max-width: 430px){
	.award-section{
		top: 80px;
		text-align: center;
	}
 
	.timeline--experience{
		margin-bottom: 24px;
	}
 
	.timeline--experience{
		text-align: center;
	}
 
	.timeline__nav{
		left: 24px;
	}
 
	.timeline__section{
		top: -160px;
	}
 
	.timeline__section-items{
	  padding: 0 10% 0 70px;
	}
}
@media (max-width: 321px){
	
	.timeline__section{
		top: -150px;
	}
 
	.milestone-name{
		font-size: 16px;
		line-height: 24px;
	}
}

/*------------------------------------------*/

/*CONTACT*/
.location-info{
	display: inline-block;
	vertical-align: top;
	padding: 40px 32px;
	background-color: #fff;
	width: 20%;
}
.location-info .contact-info{
	padding: 16px;
	margin: 0px;
	max-width: 320px;
}
.location-info .contact-info .contact-info__title{
	font-size: 18px;
	color: #3e3e3e;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	line-height: 24px;
}
.location-info .contact-info .contact-info__text{
	font-size: 16px;
	color: #000;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
}
.location-info-img{
	display: inline-block;
	width: 25%;
}
.location-info-imgbox__inner{
	width: 100%;
	padding-top: 50vh;
}
.location-info-imgbox__inner .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.form-card{
	background-color: #fff;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 80px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.call-to-action{
	position: absolute;
	top: 60px;
	right: 0;
	padding-left: 32px;
	padding-right: 24px;
	color: #fefefe;
}
.call-to-action h3{
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 1.3px;
	font-weight: 400;
	font-family: 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	margin-bottom: 16px;
}
.call-to-action p{
	font-size: 15px;
	line-height: 28px;
	font-weight: 400;
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	letter-spacing: 1px;
}
.other-option{
	position: absolute;
	top: 450px;
	right: 0;
	padding-left: 32px;
	padding-right: 24px;
	color: #fefefe;
	text-align: right;
}
.other-option p{
	font-family: 微軟正黑體, 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;;
  
	font-size: 15px;
}
.card-form-section{
	padding: 32px 52px;
	padding-top: 60px;
	height: 850px;
}
.form-bg{
	background-image: url(../img/contact/formbg.jpg);
	background-position: center;
	background-size: cover;
	width: 100%;
}
.form-bg:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #034591;
	opacity: 0.7;
}
.input-container{
	padding-bottom: 24px;
}
.btn-group{
	text-align: center;
	margin-top: 32px;
}

.note {
	color: #A2A2A2;
	line-height: 22px;
    letter-spacing: 1.4px;
    padding-top: 6px;
}


/*MAPS*/
.contact-page-map-box{
	width: 55%;
	display: inline-block;
	vertical-align: top;
}
@media (max-width: 1441px){
	.location-info{
		padding: 31px 28px;
	}
}
@media (max-width: 1281px){
	.location-info{
		padding: 32px 22px 25px 22px;
		width: 25%;
	}
 
	.location-info .contact-info{
		padding: 10px 10px;
	}
 
	.location-info .contact-info .contact-info__title{
		font-size: 15px;
		line-height: 16px;
		color: #a5a5a5;
	}
 
	.location-info .contact-info .contact-info__text{
		font-size: 15px;
	}
 
	.location-info-img{
		width: 20%;
	}
 
	.location-info-imgbox__inner{
		padding-top: calc(50vh + 57px);
	}
}
@media (max-width: 1025px){
	.form-card{
		margin-left: 0;
		margin-right: 0;
	}
 
	.contact-page-map-box{
		width: 45%;
		height: 32vh;
	}
 
	.location-info{
		width: 30%;
		height: 32vh;
	}
 
	.location-info-img{
		width: 25%;
	}
 
	.location-info-imgbox__inner{
		padding-top: 32vh;
	}
 
	.location-info .contact-info{
		padding: 16px 16px 16px 12px;
	}
 
	.location-info .contact-info .contact-info__title{
		font-size: 16px;
		line-height: 20px;
	}
 
	.location-info .contact-info .contact-info__text{
		font-size: 15px;
		line-height: 20px;
	}
}
@media (max-width: 992px){
	.location-info{
		padding: 22px 24px;
		width: 33%;
	}
 
	.location-info .contact-info{
		padding: 7px 0px 10px 0px;
	}
 
	.contact-info__text{
		letter-spacing: 0.4px;
	}
 
	.contact-info__text a{
		font-size: 14px;
	}
 
	.location-info-img{
		width: 22%;
	}
 
	.location-info-imgbox__inner .image{
		background-position: 252px center;
	}
 
	.call-to-action{
		padding-left: 18px;
		padding-right: 16px;
	}
 
	.other-option{
		display: none;
	}
}
@media (max-width: 430px){
	.contact-page-map-box{
		width: 100%;
	}
 
	.location-info .contact-info .contact-info__title{
		display: inline-block;
		padding-right: 8px;
		color: #B2B2B2;
	}
 
	.location-info .contact-info .contact-info__text{
		display: inline-block;
	}
 
	.location-info{
		height: 30vh;
		width: 90%;
		right: auto;
		left: 18px;
		margin-top: 16px;
		z-index: 1;
	}
 
	.location-info .contact-info{
		padding: 6px;
	}
 
	.location-info-img{
		width: 100%;
		padding: 24px;
		position: absolute;
		top: 46vh;
		left: 0;
	}
 
	.location-info-imgbox__inner .image{
		background-position: center;
	}
 
	.form-card{
		margin-top: 160px;
		margin-left: 3%;
		margin-right: 3%;
	}
 
	.card-form-left{
		width: 100%;
		height: 100%;
	}
 
	.call-to-action{
		position: relative;
		top: 32px;
		padding-bottom: 70px;
	}
 
	.other-option{
		display: none;
	}
 	.card-form-section {
 		padding: 40px 32px;
 		padding-top: 32px;
 	}

}
@media (max-width: 400px){
	.location-info{
		height: auto;
		padding: 24px;
		width: 100%;
		left: 0;
	}
 
	.location-info .contact-info .contact-info__title{
		display: block;
		padding-right: 0;
	}
 
	.location-info-img{
		position: relative;
		top: 0;
		display: none;
	}
 
	.form-card{
		margin-top: 16px;
		margin-left: 0;
		margin-right: 0;
	}
	.card-form-section {
		padding: 32px 16px;
	}
}
@media (max-width: 321px){
	.location-info{
		top: 0px;
		width: 100%;
	}
 
	.location-info .contact-info .contact-info__title{
		display: block;
		padding-right: 8px;
		color: #B2B2B2;
		font-size: 15px;
	}
 
	.location-info .contact-info .contact-info__text{
		font-size: 15px;
		display: block;
	}
 
	.location-info .contact-info{
		padding: 4px;
	}
 
	.form-card{
		margin-top: 20px;
		margin-left: 0;
		margin-right: 0;
	}

	.note {
		font-size: 13px;
		line-height: 20px;
	}

}

.change-page-btn{
	padding: 24px 0px;
	margin-bottom: 16px;
}
.prev-box, .next-box {
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.prev-box p, .next-box p{
	display: inline-block;
	vertical-align: top;
	line-height: 40px;
	margin: 0 8px;
} 
.change-page-btn .prev,
.change-page-btn .next {
	border: 1px solid #1E344B;
	background-color: #1E344B;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all 0.3s;
	display: inline-block;
	
}
.change-page-btn .prev-box {
	left: 48px;
}
.change-page-btn .next-box {
	right: 48px;
}
.change-page-btn .prev span,
.change-page-btn .next span {
	width: 10px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.change-page-btn .prev span:first-child {
	transform: rotate(-30deg);
    transform: translate(-50%,-50%) rotate(-30deg);
    transform-origin: left;
}
.change-page-btn .prev span:last-child {
    transform: translate(-50%,-50%) rotate(30deg);
    transform-origin: left;
}
.change-page-btn .next span:first-child {
	transform: translate(-50%,-50%) rotate(-30deg);
    transform-origin: right;
}
.change-page-btn .next span:last-child {
    transform-origin: right;
    transform: translate(-50%,-50%) rotate(30deg);
}
.change-page-btn .prev-box:hover .prev,
.change-page-btn .next-box:hover .next{
	background-color: transparent;
}
.change-page-btn .prev-box:hover .prev span,
.change-page-btn .next-box:hover .next span {
	background-color: #1E344B;
}
@media (max-width: 992px) {
	.change-page-btn .prev-box {
		left: 18px;
	}
	.change-page-btn .next-box {
		right: 18px;
	}
}
@media (max-width: 430px) {
	.change-page-btn .prev,
	.change-page-btn .next{
		width: 36px;
		height: 36px;
	}
	.prev-box p, .next-box p {
		line-height: 36px;
	}
}
@media (max-width: 400px) {
	.change-page-btn .prev,
	.change-page-btn .next{
		width: 32px;
		height: 32px;
	}
	.prev-box p, .next-box p {
		line-height: 32px;
	}
}
.tag-box {
	margin: 24px 0px;
}
.tag-box p {
	margin-bottom: 0;
}
.tag-label {
	display: inline-block;
	vertical-align: top;
	margin-right: 2px;
}
a.tag-item {
	display: inline-block;
	vertical-align: top;
	background-color: #93a2bf54;
	font-size: 15px;
	padding: 6px 10px;
	line-height: 16px;
	color: #484848;
	margin-left: 16px;
	margin-right: 6px;
	margin-bottom: 10px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	transition: all 0.1s;
}
div.article__text a.tag-item {
	word-wrap: normal;
	white-space: nowrap;
}
.tag-item::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 15px 14px 0;
	border-color: transparent #93a2bf54 transparent transparent;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -15px;
	transition: all 0.1s;

}
.tag-item::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: -6px;
	transform: translateY(-50%);
}
a.tag-item:hover {
	color: #fff;
	background-color: #1e344b;
}
a.tag-item:hover::before {
	border-color: transparent #1e344b transparent transparent;
}
/* 20230217 */
.article__comment {
	border-top: 1px solid #dfdfdf;
	padding-top: 24px;
	margin-top: 24px;
	padding-left: 16px;
    padding-right: 16px;
}
.article__comment .commentTitle {
	color: #1e344b;
	margin-bottom: 24px;
	font-size: 22px;
}
.article__comment .commentItem {
	display: flex;
	margin-bottom: 28px;
}
.article__comment .avatarBox {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
}
.article__comment .imgbox__inner-5-5 {
	width: 100%;
	padding-top: 100%;
	position: relative;
}
.article__comment .avatarBox .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.article__comment .textBox {
    font-size: 17px;
    padding: 16px 20px;
    background-color: #f1f1f1;
	margin-left: 10px;
	position: relative;
	border-radius: 5px;
}
.article__comment .textBox::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent #f1f1f1 transparent transparent;
	position: absolute;
	left: -8px;
	top: 18px;
}
.article__comment .textBox .topbox {
	display: flex;
	border-bottom: 1px solid #dedfe1;
	padding-bottom: 8px;
}
.article__comment .textBox .user {
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
	color: #43688f;
}
.article__comment .textBox .user::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #eee;
	margin: 0 4px;
}
.article__comment .textBox .date {
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	color: #a3a3a3;
	font-size: 15px;
}
.article__comment .commentContent {
	padding-top: 16px;
    line-height: 1.6;
}
@media (max-width: 992px) {
	.article__text a.sig-box {
		width: 100%;
	}
	.article__comment {
		padding-left: 0;
		padding-right: 0;
	}
}
@media (max-width: 450px) {
	.article__comment .commentTitle {
		font-size: 20px;
	}
	.article__comment .avatarBox {
		width: 36px;
		height: 36px;
	}
	.article__comment .textBox {
		font-size: 16px;
		padding: 14px 14px;
		background-color: #f1f1f1;
	}
	.article__comment .textBox::before {
		display: none;
	}
}
.form-control {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0.375rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	resize: none;
}
.form-control:focus {
	color: #212529;
	background-color: #fff;
	outline: 0;
	box-shadow: none;
}
.form-control::-moz-placeholder {
	color: #acacac;
	opacity: 1;
}
.form-control::placeholder {
	color: #acacac;
	opacity: 1;
}
.form-control:disabled {
	background-color: #e9ecef;
	opacity: 1;
}
.text-right {
	text-align: right;
}
.isobox {
	position: absolute;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse farthest-corner at right bottom, #dfba5d 0%, #d6ba68 8%, #be953e 30%, #ac8735 40%, transparent 80%),
	radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #886c2d 62.5%, #5d4a1f 100%);
	border-radius: 8px;
	border-top-right-radius: 40px;
}
.isobox-inner {
	display: flex;
	align-items: center;
	padding: 6px;
}
.isobox::before {
	content: "";
	position: absolute;
    left: -70px;
	top: -24px;
    width: 150px;
    height: 150px;
	background-image: url(../img/deco/golddeco.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.isobox::after {
	content: "";
	position: absolute;
    right: -70px;
	top: -24px;
    width: 150px;
    height: 150px;
	background-image: url(../img/deco/golddeco.png);
	background-size: contain;
	background-repeat: no-repeat;
	transform: scaleX(-1);
}
.isobox img {
	width: 80px;
	height: auto;
	max-width: none !important;
	display: inline-block;
	vertical-align: middle;
}
.isobox .text {
	display: inline-block;
	vertical-align: middle;
    margin: 0;
    color: #222;
	padding-left: 10px;
	padding-right: 16px;
	white-space: nowrap;
	flex: 1;
}
.isobox .text .smtext {
	font-size: 15px;
	display: block;
	font-family: 'Montserrat', 'Noto Sans TC', arial, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
	color: #222;
	margin-bottom: 4px;
	opacity: 0.8;
}
.isobox .text .lgtext {
	display: block;
	font-size: 1.8rem;
	line-height: 1.2;
	font-weight: 600;
	text-shadow: 1px 0px 3px #fefeab;
}
@media (max-width: 1536px) {
	.isobox {
		left: 52%;
	}
	.isobox img {
		width: 60px;
	}
	.isobox::before {
		left: -40px;
		width: 100px;
		height: 120px;
	}
	.isobox::after {
		right: -40px;
		width: 100px;
		height: 120px;
	}
}
@media (max-width: 1441px) {
	.isobox {
		left: 58%;
	}
}
@media (max-width: 1281px) {
	.isobox .text .lgtext {
		font-size: 1.4rem;
	}
}
@media (max-width: 1100px) {
	.isobox {
		left: 52%;
	}
	.isobox .text .lgtext {
		font-size: 1.1rem;
	}
}
@media (max-width: 1025px) {
	.isobox {
		left: 70%;
	}
	.isobox img {
		width: 60px;
	}
	.isobox::before {
		left: -60px;
		top: -24px;
		width: 100px;
		height: 130px;
	}
	.isobox::after {
		right: -60px;
		top: -24px;
		width: 100px;
		height: 130px;
	}
}
@media (max-width: 992px) {
	.isobox {
		left: auto;
		width: 320px;
		right: 0;
		transform: translateX(0);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.isobox img {
		width: 90px;
	}
	.isobox .text {
		padding-right: 0;
		white-space: normal;
	}
	.isobox::after {
		display: none;
	}
	.isobox::before {
		top: 0;
	}
}
@media (max-width: 450px) {
	.isobox {
		position: relative;
		margin-left: auto;
		top: 0;
		margin-bottom: 16px;
	}
	.isobox img {
		width: 70px;
	}
	.isobox .text .lgtext {
		font-size: 1.3rem;
	}
	.isobox::before {
		width: 80px;
	}
}
@media (max-width: 361px) {
	.isobox {
		width: 70%;
	}
	.isobox .text .lgtext {
		font-size: 1.2rem;
	}
	.isobox .text .smtext {
		font-size: 12px;
		margin-bottom: 0;
	}
	.isobox::before {
		width: 70px;
	}
}