@charset "utf-8";
::-webkit-scrollbar, /* width */
::-webkit-scrollbar-track {width:6px;height:6px;background:none;border-radius:2px;}/* Track */
::-webkit-scrollbar-button,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer{display: none;}
::-webkit-scrollbar-thumb {background:rgb(103,103,104);border-radius:2px;background-clip:content-box;border:1px solid transparent;}

html{}
body{color:#444;font-family:'Open Sans',Arial,Helvetica,"微軟正黑體",sans-serif;margin:0;font-size:16px;font-style:normal;overflow-x:hidden;width: 100vw;}
img{max-width:100%;}
a, a:hover, a:active{text-decoration:none;}

#header {z-index: 999;background-color: #071b5a;color: #FFF;max-width: 100vw;}
.menu{color:#FFF;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;height: 70px;}
.menu .nav-link{color:#FFF!important;}
.menu .logo{max-width:80%;width:290px;}
.menu .list{width: 100%; display: flex; font-size: 18px; color: #FFF; margin-left: 30px; justify-content: flex-end; align-items: flex-end;}
.menu .list .category{margin:0 10px;word-break: break-all;white-space: nowrap;}
.menu .list .category a{color:#FFF!important;transition:all 250ms;position:relative;}
.menu .list .category a:before{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#FFF;transition:all 250ms;}
.menu .list .category a:hover:before{width:100%;}

#mobile_menu_button{position:fixed;z-index:5;top: 10px;right:1rem;width:48px;height:48px;color:#FFF;background: #071b5a;border: 1px solid #FFF;text-align: center;font-size: 24px;line-height: 46px;box-sizing: border-box;cursor: pointer;border-radius: 4px;}
menu.dock_left{left:-400px;}
menu.dock_right{right:-400px;}
menu.dock_left.show{left:0;}
menu.dock_right.show{right:0;}
menu{position: fixed;top: 0;bottom:0;min-width:360px;max-width:50vw;background: #202458;color:#FFF;box-shadow:0 0 16px rgba(0,0,0,0.4);z-index:4;margin:0;transition:250ms;padding:0;overflow-y: auto;}
@media screen and (max-width: 360px) {
	menu {min-width:100vw;max-width:100vw;}
	menu .top .menu-brand .content{padding:8px 0;}
	menu .copyright{font-size:12px;}
}
menu *{display:block;}
menu .top .menu-brand{position:relative;display:inline-block;width:100%;}
menu .top .menu-brand:before{content: ' ';top:0;left:0;bottom:0;right:0;width: 100%;padding-top:60%;display: block;}
menu .top .menu-brand .content{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content: center;flex-wrap: wrap;padding: 1rem 1.6rem;}
menu .top .menu-brand .content img{
    margin: 0 auto;
    width: 90%;
}
menu .top .menu-brand .content span{
    display: none;
}
menu .list ul{margin:0;padding:0;margin-bottom: 22px;}
menu .list .category{padding-left: 1rem;margin-bottom: 5px;font-size: 16px;/* font-weight: 600; */color:#DDD;}
menu .list li{height: 42px;padding-left: 1rem;margin-bottom: 2px;font-size: 18px;/* font-weight: 400; */display: flex;align-items: center;cursor:pointer;}
menu .list li i{width: 18px;text-align: center;margin-right: 10px;font-size: 14px;}
menu .list li:hover{border-left: 4px solid #45b548;background:rgba(255,255,255,0.4);}
menu .list a{color:#FFF;text-decoration:none;}
menu .copyright p{color:#FFF;padding: 0 1rem;}
menu::-webkit-scrollbar, /* width */
menu::-webkit-scrollbar-track {width:6px;background:none;border-radius:2px;}/* Track */
menu::-webkit-scrollbar-button,
menu::-webkit-scrollbar-track-piece,
menu::-webkit-scrollbar-corner,
menu::-webkit-resizer{display: none;}
menu::-webkit-scrollbar-thumb {background:#FFF;border-radius:2px;background-clip:content-box;border:1px solid transparent;}

.menu .list{display:none;}

.section{padding: 36px 0;}
section .title{font-size:3rem;text-align:center;font-weight:600;line-height: 1.2;color:#044572;margin-bottom: 16px;}
.bg-features{background-image:url(../images/features_bg.png);background-color:#fff;width:100%;height:100%;display:block;background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-news{background-image:url(../images/news_bg.png);background-color:#fff;width:100%;height:100%;display:block;background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-application{background:#FFF;}
.bg-contact{background:#071b5a;}

.banner-cover{background-size:cover;background-position:center center;}
.banner_item { max-width: 1170px; display: table; width: 100%; height: calc(100vw / 16 * 6); padding: 0 15px; margin: 0 auto;position: relative;min-height:300px;}
.banner_item .textbox {position: absolute;color: #FFF;background: rgb(92 162 248 / 90%);border-top-left-radius: 2vw;border-bottom-right-radius: 2vw;bottom: 0;left: 1vw;right: 1vw;padding: 2vw;}
.banner_item .heading {margin: 0;font-size: 4.5vw;font-weight: 600;}
.banner_item .content {font-size: 3.6vw;}

.feature-item {text-align: center;margin-bottom: 48px;}
.feature-item .icon {width: 100px;height: 100px;margin: auto;display: block;transition:all 250ms;}
.feature-item .name {animation: bounceIn 3s ease-in-out 0s 99;font-size: 28px;font-weight: bold;color: #0d168f;margin-top: 6px;}
.feature-item .description {font-size: 16px;color: #262261;margin-bottom: 38px;}

.news_item {width: 100%;max-width: 340px;background: rgba(255,255,255,0.8);margin:0 auto;display:block;transition:all 250ms;}
.news_item:hover{filter: brightness(1.2);}
.news_item .cover{height: 240px;object-fit:cover;object-position:center center;}
.news_item .content{margin: auto;padding:4px 16px;text-align: left;font-size: 20px;line-height: 1.3em;margin-bottom: 3px;color:#000;}

.application_item {width: 100%;max-width: 340px;background: rgba(255,255,255,0.8);margin:0 auto;display:block;transition:all 250ms;}
.application_item:hover{filter: brightness(1.2);}
.application_item .cover{width: 100%;height: 240px;object-fit:cover;object-position:center center;}
.application_item .content{margin: auto;padding: 8px 4px;text-align: left;font-size: 20px;font-weight: 100;line-height: 1.3em;margin-bottom: 3px;color:#000;}

.btn-cta{background:#FFF;border: 3px solid #26a9df;border-radius:25px;height:50px;color:#26a9df;margin:0 auto;font-size:24px;font-weight: 600;padding:4px 42px;display:block;text-decoration:none!important;transition:all 250ms;}
.btn-cta:hover{background:#26a9df;color:#FFF;transform:scale(1.1);}
.btn-contact{color:#071b5a;padding:4px 42px;text-decoration:none!important;}

/******************************************* scroll To Top*/
.scrollToTopContainer{
	display: none;
	position: fixed;
	margin: 0;
	bottom: 15px;
	right: 0px;
	z-index: 200;
}
.scrollToTopContainer .text, .regCart .text{
	display: none;
	color: #333;
	position: absolute;
	right: 45px;
	min-width: 60px;
	font-size: 12px;
	text-align: center;
	padding: 3px 5px;
	margin-top: 10px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.scrollToTopContainer:hover .text,
.scrollToTopContainer:focus .text,
.regCart:hover .text,
.regCart:focus .text{
	display: block;
}
.scrollToTop, .regCartBtn{
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #3ec2f1;
	opacity: 0.7;
	transition: background 0.3s;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
}
.scrollToTop img, .regCartBtn img{
	width: 100%;
	height: 100%;
	display: block;
	vertical-align: top;
}
.scrollToTop:hover, .scrollToTop:focus{
	background: #009fe3;
	outline: none;
}
.inside-banner-new h1 {
    margin: 0;
    color: #00405b;
    /* padding: 15px; */
    padding: 8px 20px;
    background-color: rgba(255,255,255,0.8);
    display: inline-block;
    margin-top: 140px;
}
section.content-page{
	background:url(../images/34586575-futuristic-modern-office-building-interior-in-urban-city.jpg);
    background-size: cover;
    background-position: center center;
    height: 100%;
    position: relative;
    background-attachment: fixed;
	
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
.white_canvas {
    background-color: rgba(255,255,255,0.7);
    border-radius: 30px;
    padding-left: 5%;
    padding-right: 5%;
}
.container {
    max-width: 1200px;
    width: auto;
}
.sp30-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.inside-banner-new{height:230px!important;}
footer p{font-size:14px;}
@media screen and (min-width: 640px) {
	.section {padding: 50px 0;}
	.banner_item{min-height:480px;}
	.banner_item .textbox {position: absolute;color: #FFF;background: rgba(92,162,248,0.59);border-top-left-radius: 40px;border-bottom-right-radius: 40px;width: 430px;top: 220px;padding: 20px;bottom: unset;}
	.banner_item .heading {margin: 0;font-size: 36px;font-weight: 600;}
	.banner_item .content {font-size: 20px;}
	
	.feature-item {text-align: center;}
	.feature-item .icon {width: 100px;height: 100px;margin: auto;display: block;transition:all 250ms;}
	.feature-item .name {animation: bounceIn 3s ease-in-out 0s 99;font-size: 48px;font-weight: bold;color: #0d168f;margin-top: 38px; }
	.feature-item .description { font-size: 22px; color: #262261; margin-bottom: 38px; }

	.inside-banner-new{height:260px!important;}
	.sp30-5 {
		padding-top: 30px;
		padding-bottom: 5px;
	}
	footer p{font-size:16px;}
}
@media screen and (min-width: 1200px) {
	.section {padding: 80px 0;}
	#mobile_menu_button{display:none;}
	.menu {height:104px;}
	.menu .logo{width:370px;}
	.menu .list{display:flex;}
	.wrap{margin-left:240px;}
	.footer{padding-left:240px;}
	.navbar .navbar-items{margin-right:0;}
	.banner_item{min-height:480px;}
	.banner_item .textbox {position: absolute; color: #FFF; background: rgba(92,162,248,0.59); border-top-left-radius: 40px; border-bottom-right-radius: 40px; width: 525px; top: 140px; padding: 40px; bottom: unset;}
	.banner_item .heading { margin: 0; font-size: 44px; font-weight: 600; }
	.banner_item .content { font-size: 24px; }
	
	.inside-banner-new{height:300px!important;}
}

@media screen and (min-width:950px){
	.scrollToTop:hover img,
	.scrollToTop:focus img{	
	  animation-duration: 1s;
	  animation-fill-mode: both;
	  animation-name: bounce;
	  transform-origin: center;
	}
}
/***************************************************** coverWrapper**/
.coverWrapper {
	width: 100%;
	display: block;
	position: relative;
	overflow:hidden;
}
.coverWrapper:after {
	padding-top: 66.667%;
	display: block;
	content: '';
}
.coverWrapper.scale169:after{
	padding-top: 56.25%;
}
.coverWrapper.square:after, .coverWrapper.circle:after{
	padding-top: 100%;
}
.video .coverWrapper:after{
	padding-top: 56.2%;
}
.coverWrapper .cover {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	text-align:center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.coverWrapper:hover .cover{
}
.coverWrapper .cover img{
	position: absolute;
	width:100%;
	height: 100%;
	object-fit: cover;
	display:block;
	margin:0 auto;
	-webkit-transition: .3s ease-in-out;
	transition: .6s ease-in-out;
}
.bg-gray{
	background-color: #5d7366;
}
.bg-gray00{
	background-color: #555;
}
.bg-gray01{
	background: rgba(235,235,235,1);
}
.bg-gray02{
	background: rgba(245,245,245,1);
}
.floatIcon {
    background: #abc;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    border-radius: 25px;
    color: #fff;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    display: inline-block;
	transition:all 250ms;
}
.floatIcon i, .floatIcon:hover i, .floatIcon:active i{color:#FFF;text-decoration:none;}
.floatIcon:hover{transform:scale(1.2);}

.floatIcon[data-type='facebook']{background-color: #0084ff;}
.floatIcon[data-type='email']{background-color: #4989F4;}
.floatIcon[data-type='phone']{background-color: #888888;}
.floatIcon[data-type='whatsapp']{background-color: #11C146;}
h1, .h1 {font-size: 4rem;}

.slick-prev{left:8px;text-align:left;}
.slick-next{right:8px;text-align:right;}
	
.slick-arrow{opacity:1;z-index: 2;width: 40px;height: 40px;display: block;border-radius: 50%;transform: translateY(-50px);}
.slick-prev:before, .slick-next:before{opacity:1;font-size: 30px;width: 40px;height: 40px;overflow: hidden;line-height: 40px;text-align: center;}