@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body, nav, input, button, select, textarea, h1, h2, h3, h4, h5, h6, p, a.btn {
	font-family: 'Noto Sans TC',"microsoft jhenghei", "PingFangSC-Regular", sans-serif;
}
ul.langul {
	margin: 0;
}
a {
	color: #00a488;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
a:focus, a:hover {
	color: #00a488;
}
p {
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 10px;
}
nav .fa {
	display: block;
	text-align: center;
	margin: 4px 0;
	font-size: 120%;
}
nav .langul li a {
	background: none;
	font-size: 13px!important;
	padding: 10px 0px!important;
	display: inline-block;
	border-radius: 50%;
	border: 1px solid #fff;
	width: 42px;
}
nav .langul li a:hover {
	font-size: 13px!important;
	background: rgba(255,255,255,0.5);
	color: #fff!important;
}
nav.navbar-shrink {
	background: #000!important;
}
nav.navbar-shrink li a {
	color: #fff!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
}
nav.navbar-shrink li:hover a {
	color: #00a488!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
}
nav.navbar-shrink .langul li a:hover {
	color: #fff!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
}
nav.navbar-shrink .nav-item .fa {
	display: none;
}
nav .lang {
	color: #fff;/* border: 1px solid #fff; */
	border-radius: 50%;/* width: 45px; */
	float: left;
	margin: 0 6px;
	overflow: hidden;
}
.nav-item:last-child {
	border: 0;
}
.img-thumbnail {
	border: 0px solid #ddd;
	max-width: 70%;
	background: none;
}
hr {
	border-color: #00a488;
	max-width: 160px;
}
header.masthead {
	position: relative;
}
/*change color*/
mark {
	background: none;
	color: #00a488;
	padding: 0;
}
.greens {
	color: #00a488!important;
	cursor: pointer;
}
mark.tag {
	background: #e0e0e0;
	margin: 6px 5px;
	padding: 2px 10px;
	border-radius: 10px;
	display: inline-block;
}
/*parallax background*/
.myParallax {
	background-size: cover;
}
.parallax-window {
	min-height: 400px;
	background: transparent;
}
.card-body {
	position: relative;
}
/*google map css*/
#map,#map_mo {
	width: 100%;
	height: 200px;
}
p.card-text {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	min-height: 75px;
	margin: 30px 0;
}
.close {
	background: #00a488;
	padding: 6px 4px;
	text-align: center;
	cursor: pointer;
}
.close img {
	width: 80%;
}
.row {
	margin: 0;
}
.grey {
	background: #d8d7d8 url(http://www.surpasssolution.com/dev/ss/assets/img/brilliant.png);
}
a.white {
	color: #fff;
}
.cross {
	max-width: 20px;
}
.contenthide {
	display: none;
}
div#form-result {
	background: rgba(101, 101, 101, 0.2);
	color: #fff;
	padding: 50px 10px;
	text-align: center;/* min-height: 200px; */
}
.error {
	font-size: 25px;
	margin: 2px 0;
	color: #ff6363;
	position: absolute;
	right: 10px;
	top: 44%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
}
.test_content {
	min-height: 110px;
}
.form-control {
	background: #0B0F0C;
	border: 0px;
	color: #fff;/* border: 1px solid #fff; */
}
 [formstyle="0"] {
 border: 1px solid #fff;
 padding: 2px;
 position:relative;
}
 [formstyle="2"] {
 padding: 2px;
 border: 1px solid #00a488;
 position:relative;
}
input.form-control:focus, textarea.form-control:focus {
	background: #0B0F0C;
	border: 0px;
	color: #fff;
}
 [formstyle="3"] {
 padding: 2px;
 border: 1px solid #ff6363;
 position:relative;
}
 [formstyle="4"] {
 padding: 2px;
 border: 1px solid #FC0;
 position:relative;
}
#waring {
	color: #FC0;
}
.close_position {
	position: absolute;
	z-index: 9;
	top: 14px;
	right: 31px;
}
.position_relative {
	position: relative;
}
.btn_align a {
	text-align: center;
	margin: 7px 5px;
}
.bktotop {
	background: #00a488;
	width: 50px;
	text-align: center;
	padding: 9px 0;
	border-radius: 50%;
	height: 47px;
	position: fixed;
	bottom: 5%;
	right: 20px;
	font-size:20px;
	display:none;
	cursor:pointer;
	opacity:0.8;
}


.py-5 {
    padding-top: 5rem!important;
    padding-bottom: 5rem!important;
}

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

.logo_change {
  cursor:pointer; 
    
}

.clients{
	
display:none;	
}

.black{
	
	color:#000;
	
	}
	
	
.black:hover{
	
	color:#00a488;
	
	}
	
	.card:hover img{
		
		transform:scale(1.1,1.1);
		transition:all 1s;
	}
	
	
	.card{
		transform:scale(1,1);
		overflow:hidden;
	}
	
	.cardimg {
    overflow: hidden;
}

#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
    color: #222;
}


.order1 {
    order: 1;
}

.order2 {
    order: 0;
}

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}