/*===================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@900&display=swap');

.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container {
	max-width:1200px;
}


/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 100 to 900 */

.noto-sans tc-bold{
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight:700;
  font-style: normal;
}
.noto-sans tc-regular{
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
}
.noto-sans tc-demi{
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight:300;
  font-style: normal;
}
.noto-sans tc-thin{
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight:100;
  font-style: normal;
}
/*// bold:700、regular：400、demi：300、thin：100  // */

body{font-family: 'Noto Sans TC';color:#555;font-weight: 300;
	overflow: hidden;
}
a {
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans TC';font-weight: 700;
	letter-spacing: 1px;
	color:#433875;
}
img{width:100%;}
p{font-family: 'Noto Sans TC';font-weight: 300;margin-bottom: 0.3rem;letter-spacing: 1px}
b{font-family: 'Noto Sans TC';font-weight: 400;font-size: 18px;color: #433875;}
li {line-height: inherit;}

select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input {
	font-family:open_sansregular;
	font-size:12px;
}
input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"],.row-fluid input[class*="span"],.row-fluid select[class*="span"],.row-fluid textarea[class*="span"],.row-fluid .uneditable-input[class*="span"] {
	border-radius:3px;
}
h1.small {font-size:20px;}


.bgtitle {
background:#f5f5f5;
margin-top:-20px;
margin-left:-20px;
margin-right:-20px;
padding-left:20px;
margin-bottom:30px;
border-bottom:1px solid #eee;
}

ul.icons-ul {
text-indent:0em;
}
iframe {border:0px; padding-bottom:20px;}

.inlineb{display: inline-block;}

	/**************** navbar ***************/
	.navbar-brand img{height: 50px;width:auto;}
	.navbar{background: #fff;padding: 10px 60px;border-bottom:1px solid #DEDEDE;transition: all 500ms  ease-in-out;}
	.navbar a:hover,.navbar a.show,.navbar .nav-link:hover{color: #5f6bd0!important;background: unset}
	.navbar-expand-lg .navbar-nav .nav-link {font-family: 'Noto Sans TC';font-weight: 400; padding: 10px 10px; margin: 0 5px; color: #3F3F3F;font-size: 15px;}
	.navbar-toggler{border:none}
	.navbar-toggler:focus{box-shadow: none;}
	.navbar-toggler-icon{background-image: none; position: relative;}
	
	
	.navbar-toggler .navbar-toggler-icon:before,.navbar-toggler .navbar-toggler-icon:after {
		content: '';
		position: absolute;
		top: 8px;
		bottom: 8px;
		right: 5px;		
		width: 21px;
		height: 14px;
		border-top: 2px solid #6F6F6F;
		border-bottom: 2px solid #6F6F6F;		
		transition: all 200ms;
	}
	.navbar-toggler:not(.collapsed) .navbar-toggler-icon:before { 
		top: 12px;
		right: 9px;
		border-bottom: 0px;
		transform: rotate(45deg);
	}	
	.navbar-toggler:not(.collapsed) .navbar-toggler-icon:after { 
		border-top: 2px solid #6F6F6F;  
		height:0px;
		transform:rotate(-45deg);
		top: 14px;
		right: 5px;
		border-bottom: 0;
	}				
	
	.navbar-toggler.collapsed .navbar-toggler-icon:after { border-top: 0;  height: 8px;}	
	
	.nav-link.focusbtn {color: #FF6767!important;}			
	.nav-link.focusbtn:hover {color: #FFA1A1!important;}			
	.navbar-expand-lg .nav-item:last-child .nav-link{padding-right: 0;margin-right: 0;}
	.dropdown-toggle::after{display: none}
	.navbar .dropdown-menu {  min-width: auto;left:50%;transform: translate(-50%,0);text-align: center;}
	.navbar .dropdown-menu:before {
		position: absolute;
		content: '';
		top: -8px;
		left: 50%;
		background: #fefefe;
		padding: 7px;
		transform: translate(-50%, 0px) rotate(45deg);
		border-left: 1px solid #dbd5d5;
		border-top: 1px solid #dbd5d5;
	}
	
	@media (min-width: 992px){
		/*.navbar-brand img{content: url('images/logo.png');}*/
		.navbar-expand-lg .navbar-nav{    width: 100%;  justify-content: right;}	
		.dropdown:hover .dropdown-menu{display: block}
	}
				
	@media (max-width:992px){
		.navbar-brand {    
			position: fixed;
			left: 50%;
			top:0;
			transform: translate(-50%, 0px);
		}
		.navbar-brand img{height: 35px;}
		.navbar-expand-lg .nav-item .nav-link,.dropdown-menu .dropdown-item{
			color: #3F3F3F;
			background: #ffffffdb;
			text-align: center;
			padding: 12px 0;
		}
		.navbar-nav .dropdown-menu{border: 0;padding: 0;transform: translate(0)}
		.navbar .dropdown-menu:before {display: none}
		.dropdown-menu .dropdown-item{margin: 0 5px;  padding: 8px 20px; display: block; width: auto;}
		
		
		.navbar{padding: 0px;}
		.navbar-brand,.navbar-toggler{padding: 10px 20px;margin: 0;}
		.navbar .collapse:not(.show) {
			height: 0!important;
			padding: 0 30px;
			border: 0;
			display: block;
		}
		.navbar-collapse:before {
			position: absolute;
			content: '';
			left: 0;
			top: 100%;
			width: 100%;
			background: #212143b0;		
			height: 100vh;
			opacity: 0;
			pointer-events: none;
			transition: all 700ms;
		}
		.navbar-collapse{
			border-top: 1px solid rgb(222, 222, 222); 
			padding:3px 30px 20px;
			height:auto;    
			transition: all 300ms;
			overflow: auto;
		}
		.navbar-collapse.show:before {			
			
			pointer-events: all;
			opacity: 1;
		}
		
	}

.btn,.btn:hover {
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
	margin: 5px 0;
}
/* =========================================================== */
/* Accordion/* 
============================================================== */

.accordion h3,.toggle h3 {
	padding:10px 11px;
	font-size:15px;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	margin:0 ;
	line-height:18px;
	color:#4d4d4d;
	cursor:pointer;
	position:relative;
	text-transform:none;
	background:#fff;
	transition:all 300ms ease 0s;
	-webkit-transition:all 300ms ease 0s;
	    border-bottom: 1px solid #efefef;
}
.accordion h3 span,.toggle h3 span {
	line-height:18px;
	display:block;
	padding:0 0 0 17px;
	background:url(../img/acplus.png) no-repeat left top;
}
.accordion h3.active,.toggle h3.active,.accordion h3:hover,.toggle h3:hover {
	background: #5f6bd0;
    color: #fff;
}
.accordion h3.active span,.toggle h3.active span {
	background:url(../img/acplus.png) no-repeat left top;
}
.accordion h3:hover span,.toggle h3:hover span {
	background:url(../img/acminus.png) no-repeat left top !important;
}
.accordion h3.active span {
	background:url(../img/acminus.png) no-repeat left top !important;
}
.accordion .accord_cont,.toggle .toggle_cont {
	padding:5px 0 2px 0;
	display:none;
}


/*=============================================== * 
  Fade Effects
* ===============================================*/

.flexslider .slides img, .textItem, .services h2, .faqstitle, .testimonial h4, .hero-unit, .sectiontitlepost h1, #filter ul li     {    
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from { opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}​

/*=============================================== * 
  Spaces
* ===============================================*/

.top0 {margin-top:0px;}
.bottom0 {margin-bottom:0px;}
.bottom15 {margin-bottom:15px;}
.left0 {margin-left:0px !Important;}
.left5 {margin-left:5px !Important;}
.left10 {margin-left:10px !Important;}
.top10 {margin-top:10px;}
.top15 {margin-top:15px;}
.top20 {margin-top:20px;}
.top25 {margin-top:25px;}
.top30 {margin-top: 30px;}
.top35 {margin-top: 35px;}
.top40 {margin-top: 40px;}

/*=============================================== *  YOUR OWN STYLES* ===============================================*/
.hidemobile{display: block!important;}
.showmobile{display: none!important;}
.inline{display:inline-block!important;}
.showmobile.inline{display: none!important;}
.hidemobile.inline{display:inline-block!important;}
@media screen and (max-width:500px){
	.hidemobile{display: none!important;}
.showmobile{display: block!important;}
	.showmobile.inline{display:inline-block!important;}
.hidemobile.inline{display:none!important;}
}

html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}

#gotop {
    display: none;
    position: fixed;
   right: 23px;
    bottom: 40px;
    padding: 7px 11px;
    font-size: 20px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
	line-height:40px;
    background:rgb(77 77 77 / 75%);
	text-decoration:none;
    color:#FFF;
    cursor: pointer;
	z-index: 8888;
}


#gotop:hover {   
    background:rgb(81 81 81);
}



* {
  margin: 0;
  padding: 0;
  text-decoration: none
}
#headermenu {
  position: relative;
  width: 100%;
}

.contact{
	display:none;
  }

.contact a {
    color: #fff;
	font-size:15px;
	font-family:"微軟正黑體", "華康中黑體", sans-serif;
	line-height:1;
}
.contact a:hover{
	color: #fff;
	text-decoration:none;
}
.menuword{
	display:none;
}

nav {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
.nav ul{
	margin: 0;
	padding: 0;
	
}
.nav li{
	position: relative;
	float: left;
	color: #fff;
	list-style: none;
	background: #ff97a4;
}
.nav li a {
	display: block;        
	padding: 13px;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}

.nav li a:hover{color:#5f6bd0}

.nav li ul  {
	display: none;
	position: absolute;
	top: 100%;
	z-index:9997;
}

.nav ul ul li a {
	background: #ff97a4;
	width: 220px;
	padding: 5px 15px;
	margin-right: 0;
	text-decoration:none;
	border-top:1px solid #ff808f;
border-bottom:1px solid #ffb0ba;
}

.nav ul ul li a:hover {
	color:#fff;
	background: #84d8d1;
}

.toggle { 
	display: none;
}
.arrow-bottom {
	display:none;
	position: absolute;
	top: 25px;
	right: 13px;
	margin-left: 5px;
	border-top: 4px solid #FFF;
	border-right: 4px solid transparent;    
	border-left: 4px solid transparent;        
	width: 1px;
	height: 1px;
}
          
 
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.brandlogo{
	display:none;
	}
	.topinfo{
	display:none;
	}
	
	#gotop {
		right: 15px;
		bottom: 75px;    
		padding: 10px;    
		font-size: 20px;
		line-height:40px;
	}
	.divider-vertical{
	display:none;
	}
.nav {
	display: none;
	width: 100%;
}
.toggle {
	display: inline-block;
	color: #FFF;
	height:54px;
	background:#84d8d1;
	width:100%;   
}
.nav li{
	float: none;
}
.nav li:hover {
	color: #fff;

}
.nav ul ul li a {
	width:auto;
	padding: 11px 15px;
	margin: 0;
	text-decoration:none;
}
.nav li a{
	display: block;        
	padding: 17px;
	font-size: 15px;
	color: #fff;
	text-decoration: none;

}
.nav li:hover ul {
/*	position: relative;*/
	display: none;
	background: transparent;
}
.nav li:hover ul li{
	background: transparent;
}
.nav li:hover ul li a{
	padding-left: 30px;
}
.arrow-bottom {
	display:block;
	top: 20px;
}

#header #banner .logo {
	display:none;
}
.contact{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
.menuword{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
  

  
  
.toggle a.menubutton {
	display:block;
    height: 46px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 12399994;
	padding: 12px 20px 0 0;
  }
.toggle a.menubutton  {
	color:#FFF;
	font-size:15px;
	line-height:1.5;
	font-family:"微軟正黑體", Arial, sans-serif;
    padding: 12px 0 0 50px;
	height:50px;
	z-index: 123;
	text-decoration:none;
  }
.toggle a.menubutton:after {
    position: absolute;
    top: 22px;
    left: 20px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: ''
  }
.toggle a.menubutton:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    left: 20px;
    display: block;
    height: 2px;
    width: 20px;
    background: #fff;
    content: ''
  }
.toggle a.menubutton.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
  }
.toggle a.menubutton.menu-opened:before {
    top: 23px;
    background: #fff;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }
	
}

@media only screen and (max-width: 767px) {
	.brandlogo{
	display:none;
	}
	.topinfo{
	display:none;
	}
	
	
	#gotop {
		right: 15px;
		bottom: 75px;    
		padding: 10px;    
		font-size: 15px;
		line-height:30px;
	}
	.divider-vertical{
	display:none;
	}
.nav {
	display: none;
	width: 100%;
}
.toggle {
	display: inline-block;
	color: #FFF;
	height:50px;
	background:#84d8d1;
	width:100%;   
}
.nav li{
	float: none;
}
.nav li:hover {
	color: #fff;

}
	

	
.nav li:hover ul li{
	background: transparent;
}
	
.arrow-bottom {
	display:block;
	top: 20px;
}

#header #banner .logo {
	display:none;
}
.contact{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
.menuword{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
  

  
  
.toggle a.menubutton {
	display:block;
    height: 46px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 12399994;
	padding: 12px 20px 0 0;
  }
.toggle a.menubutton  {
	color:#FFF;
	font-size:15px;
	line-height:1.5;
	font-family:"微軟正黑體", Arial, sans-serif;
    padding: 12px 0 0 50px;
	height:50px;
	z-index: 123;
	text-decoration:none;
  }
.toggle a.menubutton:after {
    position: absolute;
    top: 22px;
    left: 20px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: ''
  }
.toggle a.menubutton:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    left: 20px;
    display: block;
    height: 2px;
    width: 20px;
    background: #fff;
    content: ''
  }
.toggle a.menubutton.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
  }
.toggle a.menubutton.menu-opened:before {
    top: 23px;
    background: #fff;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }
}


@media screen and (max-width:700px) {

.divider-vertical{
	display:none;
	}
.nav {
	display: none;
	width: 100%;
}
.toggle {
	display: inline-block;
	color: #FFF;
	height:50px;
	background:#84d8d1;
	width:100%;   
}
.nav li{
	float: none;
}
.nav li:hover {
	color: #fff;

}

	
.nav li:hover ul li{
	background: transparent;
}
	
.arrow-bottom {
	display:block;
	top: 20px;
}

#header #banner .logo {
	display:none;
}
.contact{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
.menuword{
	display:block;
	position: absolute;
    top: 0;
    right: 0;
    padding: 15px 15px 0 0;
	height:50px;
	z-index: 123;
  }
  

  
  
.toggle a.menubutton {
	display:block;
    height: 46px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 12399994;
	padding: 12px 20px 0 0;
  }
.toggle a.menubutton  {
	color:#FFF;
	font-size:15px;
	line-height:1.5;
	font-family:"微軟正黑體", Arial, sans-serif;
    padding: 12px 0 0 50px;
	height:50px;
	z-index: 123;
	text-decoration:none;
  }
.toggle a.menubutton:after {
    position: absolute;
    top: 22px;
    left: 20px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: ''
  }
.toggle a.menubutton:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    left: 20px;
    display: block;
    height: 2px;
    width: 20px;
    background: #fff;
    content: ''
  }
.toggle a.menubutton.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
  }
.toggle a.menubutton.menu-opened:before {
    top: 23px;
    background: #fff;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }

}


/*----海外婚纱-----*/
.text_center{
	text-align: center;
}

@media only screen and (max-width: 767px){
imghide_s{
	display: none;
}
}
/***圖片切換***/


#box {
        width: 100%;
    height: 700px;
    margin:20px auto 50px;
    overflow: hidden;
}

#imgList {
    position: relative;
}

#imgList img {
        width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    object-position: center;
    object-fit: cover;
}

#tab a {
    display: inline-block;
    width: 96px;
    text-align: center;
    line-height: 34px;
	border: 1px solid #ddd;
	    margin: 5px 0;
}

.firstImg {
    z-index: 9;
}

.blackbg {
    background: #aaa;
    color: #fff;
}

.whitebg {
    background: #fff;
    color: #000;
}
@media only screen and (max-width:1200px){
	#box {height:600px;}	
}
@media screen and (max-width:920px){
	#box {height:500px;}	
}
@media screen and (max-width:650px){
	#box {height:400px;}	
}
@media screen and (max-width:500px){
	#box {height:310px;}	
}
/**************promotion***************/

	.checkbox.inline+.checkbox.inline,.radio.inline+.radio.inline{
		margin-left: 0;
	}
	.checkbox.inline{
		padding-right: 10px;
		padding-bottom: 7px;
		word-break: break-word;
	}
input[type="radio"] {
    float: left;
	margin-left: -20px;
}

	
.mobilehide{display:block!important;}
.mobileshow{display:none!important;}
.mobileinlinehide{display:inline-block!important;}
.mobileinlineshow{display:none!important;}
@media screen and (max-width:1024px){
	.mobileinlinehide{display:none!important;}
	.mobileinlineshow{display:inline-block!important;}
	.mobilehide{display:none!important;}
	.mobileshow{display: block!important;}
}
/*********navbar*************/


@media only screen and (max-width: 1024px){

.open .arrow-bottom {
    border-bottom: 4px solid #fff!important;
    border-top: 0px solid #fff!important;
}
	
}

/*********form**********/
.checkbox.inline+.checkbox.inline,.radio.inline+.radio.inline{margin-left: 0;}
.checkbox.inline,.radio.inline{	padding-right: 10px;padding-bottom: 7px;}
.form{text-align: left;padding:  20px;}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
	margin-bottom:0;
}
.form .span6,.form .span4{margin: 10px 0;}


/*******gallery*******/
.pp_gallery ul a img {
    border: 0;
    width: 50px;
}

/****************_*********_____***\******^******/
/***************|*\***|***|*********\****|*|****/
/***************|**\**|***|-----*****\***|*|***/
/***************|***\*|***|***********\**|*|**/
/***************|****\|***L-----*******--***--*/
/**/
@media (max-width: 1023px){
body {
    padding-right: 0px!important;
    padding-left: 0px!important;
}}

p {    padding: 0 0px; }
.primarycolor {  padding: 0 10px; }
.footerdark h1 {    margin-left: 20px; }

@media screen and (max-width: 1024px){
footer li {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}}
@media screen and (max-width: 1024px){
footer {
    display: block;
    width: 100%;
    background: white;
    box-shadow: 0px -5px 10px rgba(0,0,0,0.2);
    margin-left: 0px;
}}
@media only screen and (max-width: 640px){
#lhc_status_container {
    bottom: 60px !important;
    right: 0px !important;
}}

/*********page style**********/

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    max-width: 100%;
}
.graysection {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}
.flexslider {
    overflow: hidden;
}
.page-header {
    margin-top: 30px;
}

.footer .span6 {
    text-align: left;
}
.bottom0 {
	margin: 0 30px;
}

@media (min-width: 1200px){
	.nav{    width: 1120PX; }
}



@media screen and (max-width: 1200px) and (min-width: 1025px){
.nav{width:1000px!important;}
.navbar-inner {min-height: 40px;}

.nav ul ul li a {
   padding: 5px 13px!important;
   width: 220px;
}
	nav ul ul {
    width: 246px!important;
}
}/**/
/***********nav************/

.brandlogo {
	float: left;
    font-size: 0px;
    margin: 10px auto 0;
    padding: 0;
    text-shadow: none;
    display: inline-block;
    width: 380px;
}
.nav ul ul li:first-child a {
    border-top: 0;
}
#lhc_status_container {
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius: 0px;
    padding: 0px 0px 0px 5px;
}
.topinfo {
	position: relative;
	    display: inline-block;
    vertical-align: middle;
	margin:20px  0  0 150px;
	 float: right;
  
}
@media screen and (max-width:1025px){
	
	.topinfo{display:none;}
}
.list-soc {
    overflow: hidden;
    margin-bottom: 5px;
    margin-top: 25px;
    position: fixed;
    right: 0px;
    bottom: 50%;
    z-index: 100;
}
ul.social-icons li i {
   
    font-size: 26px;
    width: 40px;
    height: 40px;
  
    line-height: 41px;
    left: 0%;
    top: 0%;
    margin-left: 0px;
    margin-top: 0px;
}
ul.social-icons li.green {
  display: block;
      margin-right: 0px;

    padding: 20px;
  
}
ul.social-icons li {
  display: block;
      margin-right: 0px;

    padding: 20px;
  
}

header {
    padding: 0;
    height: 172px;
    position: relative;
}
.nav{   text-align: left;}
.nav ul ul li a {
    border-top: 1px solid #ffb0ba;
    border-bottom: 0px solid #ffb0ba;
}
.navbar .divider-vertical {
    height: 50px;
    border-left: 0px solid #ffb0ba;
    border-right: 0px solid #ff808f;
    margin: 0;
}
.nav li:hover {
       transition: all ease-in-out 200ms;
}

.slidershadow {
    display: none;
}
.navbar .nav {
    margin: auto;
}
.row-nav {
    margin-bottom: 0px;
    margin-top: 20px;
  }
.logomb {
	display: none;
  position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
    z-index: 200;
    margin: auto;
    width: 217px;
}
.contact a {
    color: #000;
	    font-size: 16px;
}
.active .arrow-bottom,.open .arrow-bottom {
    border-top: 4px solid #fff;
}
.arrow-bottom {
    border-top: 4px solid #777;
	    transform: rotate(-90deg);

}
.emptybox{display:none;}
.form{text-align: left;padding:  20px;}
.paddingright {
    padding-right: 0px;
}/*
.span4 img{
    margin-bottom: 10px ;
}*/
/****about*****/

ul.icons-ul {
    text-align: left;
    margin: 0 25px 0 50px;
}
#skill {
    text-align: left;
    margin: 0 15px;
}
.caption ul.social-icons li {
    display: inline-block;
    margin: 10px;
}

.row-fluid>p{padding: 0 20px;}
@media (min-width: 1200px){
.nav {
    width: 1200PX;
}
	
	
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 100%!important;
}}

@media (max-width: 1199px) and (min-width: 1025px){
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 100%!important;
}
	.navbar-inner{background: #ff97a4!important;}
}
@media (min-width: 1200px){
.row-fluid [class*="span"] {
    display: inline-block;
    float: none;
vertical-align: top;
	margin: 0;
}
.row-fluid {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
	
.row-fluid .span12 {   margin: 0;	}

}

@media (max-width: 979px) and (min-width: 768px){
	.navbar-inner{background: rgba(0,0,0,0.2)!important;}
}
@media only screen and (min-width: 1025px){

nav ul ul {
    width: 250px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.3);
    display: none;
    position: absolute;
    z-index: 1000;
}
	.nav ul {
    margin: 0;
    padding: 0;
}

	.nav li a {
    display: block;
    padding: 13px 13px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}
.nav li {
    position: relative;
    float: none;
    color: #fff;
    list-style: none;
    background: #ff97a4;
    display: inline-block;
    vertical-align: top;
}
span.smallinfo {
    margin-left: -3px;
}
}
/**/

/************mobile navbar****************/

@media only screen and (max-width: 1024px){
	span.smallinfo {
    font-size: 12px;
    color: #ff576e;
    margin-left: -6px;
}


	.dropdown-backdrop {
  
    z-index: -100;
}
.toggle.active a.menubutton:after {
    border-top: 0px;
    transition: all 300ms;
    padding: 0 5px;
    transform: rotate(-45deg);
    left: 14px;
    top: 25px;
}
.toggle.active a.menubutton:before {
    border-top: 0px;
    transition: all 300ms;
    padding: 0 5px;
    transform: rotate(45deg);
    left: 16px;
    top: 28px;
}
	
	.nav>ul {
	/*	
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
	width: 140px;*/
		width: 100%;		
		height: auto;
    background: #fff;
    padding-bottom: 80px;

}
	.nav li a {
    height: 24px;
    overflow: hidden;
}


	
.nav ul ul li a {
	width:auto;
	padding: 11px 15px;
	margin: 0;
	text-decoration:none;
	    border: 0px!important;
}
	
	.nav ul ul{text-align: center;}
	.nav ul ul li {
    display: block;
    width: auto!important;
}
	
	.open .arrow-bottom {
    border-bottom: 4px solid #fff!important;
    border-top: 0px solid #fff!important;
}
	.navbar .nav li.dropdown.active>.dropdown-toggle {
    background:#ff97a4!important;
}
	.emptybox{
		display:block;
		height:70px;
	}
header {   
    height: 54px;
}
.brandlogo {
    
    display: none;
}
	
.row-nav {
    margin-bottom: 0px;
    margin-top: 0px;
    display: block;
    position: fixed;
    height: 50px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.nav{	height: calc(100vh - 110px);
    position: relative;
    overflow: scroll;
	width: calc(100% - 125px);
    float: left;
    z-index: 100;
	}
.nav li.open ul li a:before {
    position: absolute;
    content: '';
    top: 16px;
    left: 80px;
    border-top: 1px solid #777;
    width: 8px;
}
	.navbar-inner {
	background: rgba(0,0,0,0.2);
}
	.logomb {display: block}
	
	
.open .arrow-bottom {
    border-bottom: 0px solid #fff!important;
    border-top: 4px solid #fff!important;
}
	
}
@media only screen and (max-width: 1024px) and (min-width: 768px){
.contact { padding: 17px 15px 0 0;}	

.toggle a.menubutton:after {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
	    top: 26px;
	    transition: all 300ms;
}
.toggle a.menubutton:before {
    background: #fff;
	top: 20px;
	    transition: all 300ms;
}	
.nav li {
    background: white;
    color: black;
}
.nav li a {
    display: block;
        padding: 3px 5px 3px 12px;
font-size: 15px;
    color: #666;
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
	
.nav li.open ul li a {  
	padding: 4px 30px;
padding-left: 25px;}
.nav ul ul li a { padding: 4px 0px; }
}

@media screen and (max-width: 700px){
.contact { padding: 17px 15px 0 0;}	
.toggle {
    color: #000;
    height: 54px;
    background: #ff97a4;
    width: 100%;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
	    z-index: 1;
    position: relative;
	}
.toggle a.menubutton:after {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
	    top: 26px;
}
.nav {
    position: relative;
    z-index: 0;
}

.toggle a.menubutton:before {
  top: 20px;
    background: #fff;
}
.nav li {
    background: white;
    color: black;
}
	
.arrow-bottom {
top: 12px;
}
	
	
}

@media only screen and (max-width: 767px){
	#gotop {
   right: 15px;
    bottom: 85px;
    padding: 5px 9px;
    font-size: 14px;
    line-height: 27px;
}
.contact { padding: 17px 15px 0 0;}	
.toggle {
   
    color: #000;
    height: 54px;
    background:#ff97a4;
    width: 100%;
	box-shadow:0 0px 6px rgb(0 0 0 / 10%);
	z-index: 1;
    position: relative;
	}
.toggle a.menubutton:after {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
	    top: 26px;
	    transition: all 300ms;
}
.toggle a.menubutton:before {
    background:#fff;
	top: 20px;
	    transition: all 300ms;
}	
.nav li {
float: none;
    background: white;
    color: black;
}
	
.arrow-bottom {
top: 12px;
}
	
	.nav li:hover>a {
    color: #5f6bd0;
}
.nav li:hover a .arrow-bottom {
    border-top: 4px solid #5f6bd0;
    transform: rotate(90deg);
}
}
/**/



/********slider2*********/
/**/
#slide {
  position: relative;
  max-width: 100%;
}
#slide .sbox {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}
#slide .sbox:first-child {
  position: static;
}
#slide .sbox.show {
  opacity: 1;
  visibility: visible;
}
#slide .sbox img{width:100%}
#slide .prev2, #slide .next2 {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.4s;
  background-color: rgba(0, 0, 0, 0.12);
  padding: 14px 12px;
}
#slide .prev2:hover, #slide .next2:hover {
  background-color: rgba(0, 0, 0, 0.24);
}
#slide .prev2:after, #slide .next2:after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#slide .prev2 {
  left: 0;
}
#slide .prev2:after {
  transform: rotate(-135deg);
  margin-left: 4px;
}
#slide .next2 {
  right: 0;
}
#slide .next2:after {
  transform: rotate(45deg);
  margin-right: 4px;
}
img.havtitle{margin-top: 25px;}
@media screen and (max-width:1024px){
	#slide.havtitle{margin-top:-15px;}
	img.havtitle{margin-top: 10px;}
}


#line2>div{
    top: calc(50% - 250px);
    position: fixed;
    margin: auto;
    display: block;
    max-width: 500px;
    width: 100%;
    left: 0;
    right: 0;
    height: 500px;
    background: white;
}
#line2{
	width:100%!important;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:99999;
	background-color:rgba(0,0,0,0.7);
	display:none;
	    border-radius: 5px;
}
/**/
/********footer**********/

@media screen and (max-width: 1024px){
footer #facebook ul {
    height: 244px;
	}}


.tag {
    text-align: center;
}
.tag a {
    border: 1px solid;
    padding: 2px 10px 3px;
    margin: 4px 2px;
    display: inline-block;
    border-radius: 5px;
}
.tag a:hover {
    background: white;
    color: #666;
    border-color: white;
    opacity: 1;
}



#filter ul li {
    list-style: none;
    float: none;
    margin: 5px 3px;
    padding: 3px 13px;
    background: #eee;
    display: inline-block;
    box-shadow: none;
    border-radius: 15px;
}

.formborder h2{
	margin-bottom: 0;
    text-align: center;
}
.formborder{
	padding: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin:20px auto 0;
	border-radius: 0px;
	max-width:1160px;
	width: 90%
}
#form,#a,#b,#c,#d,#e,#f,#g,#h,#i,#j,#k,#l,#m,#n,#o,#p,#q{height:90px;margin-top: -90px;}
@media screen and (max-width:992px){
	#form,#a,#b,#c,#d,#e,#f,#g,#h,#i,#j,#k,#l,#m,#n,#o,#p,#q{height:65px;margin-top: -65px;}
} 
/**********Q&A**************/

.testimonial {
    width: calc(100% - 50px);
}

@media (max-width: 480px){
 .boxportfolio3 {
    width: calc(100% - 20px)!important;
}}

.boxportfolio3 {
    margin: 5px 10px;
}
.footerdark h1{
	padding-bottom: 4px;
	line-height: 20px;
}
/*********************iftek [new] ************************/

header {height: 80px;}
	
@media screen and (max-width:992px){
	header {height: 55px;}
}
 #headermenu {
    padding: 20px 10px 20px;
	width: calc(100% - 20px);
}
	.colorbox{
		background: #e0db4e; /* Old browsers */
background: -moz-linear-gradient(left, #e0db4e 1%, #70c38f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e0db4e 1%,#70c38f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e0db4e 1%,#70c38f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0db4e', endColorstr='#70c38f',GradientType=1 ); /* IE6-9 */
		height: 10px
	}
.navbar-inner {
	background: #ffffff;
	}
.row-nav {
    margin-top: 0px;
} 

.navbar .nav li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle {
    background-color: #fff;
	color: #84d089;
}

li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle {
    background-color: #e7402f;
    color: #71c48e;
}
	

.nav ul ul li a:hover {
    color: #84d089;
    background: #ffffff;
}
.nav ul ul li a {
   width: auto;
    padding: 5px 13px;
    border-top: 1px solid #cccccc;
    border-bottom: 0px solid #cecece;
    background: #ffffff;
}

.nav li ul {
    display: block;
  /*  position: absolute;*/
	 right: 0;
    left: 0;
    z-index: 9997;
    pointer-events: none;
    top: 130%;
    opacity: 0;
    transition: all 500ms;
}

.contact a,.contact {
    color: #3f6c39;
}	
.nav li ul li {
    width: 100%;
    text-align: center;
}


/************************************************************************ 1025 > **/
@media only screen and (min-width: 1025px){
	
	
.nav li:hover ul {
	display: block;
	right: 0;
	left: 0;
	top: 100%;	
    pointer-events: all;
    opacity: 1;
    transition: all 500ms;
}
	
	.socialbtn{
		display:none!important;
	}
.nav li.signup,.nav li.login{
	float:right;
	margin: 6px 15px;
    border-radius: 23px;
	background:#fff;
	box-shadow: 0 0 10px  rgb(121, 222, 93);
	transition: all 600ms;
}	
.nav li.signup a,.nav li.login a{
	padding: 9px 10px 11px;
	color:#71c48e;
	transition: all 600ms;
}
.nav li.signup:hover ,.nav li.login:hover{
	box-shadow: 0 0 3px rgba(113, 196, 142,0);
	    background: rgb(116, 196, 142);
	transition: all 600ms;
	}
	.nav li.signup:hover a,.nav li.login:hover a{
		color: #fff;
		background:none;
	}
	
	.nav li {
    float: none;
    background: #fff;
	}
	.nav li a {
    padding: 10px 15px; /* 10 25*/
    font-size: 14px;
		line-height: 20px;
		letter-spacing: 1px;
    color:#4d4d4d;
	}
	.navbar .nav {
	display: inline-block;
    max-width: 1200px;
		    width: 100%;
		text-align: right;
	}
	nav ul ul {
    width: auto;
	}

	
}
	
/************************************************************************ 1025-1200 **/
@media screen and (max-width: 1200px) and (min-width: 1025px){
	
	.nav li.signup,.nav li.login{
	margin:7px 10px;
}	
	.navbar-inner {
    background: #fff!important;
}
	nav ul ul {
    width: 100%!important;
}
.nav ul ul li a {
    padding: 5px 5px!important;
    width: auto;
}

}
/************************************************************************ < 1024 **/
@media only screen and (max-width: 1024px){	
	.nav li.signup a{
		background: #f34949;
	}.nav li.signup a:hover{
		background: #fff;
	}
	.socialbtn{
		display: block;
	}
	.nav li.socialbtn a{
		height:50px;
		padding: 0;
		border-bottom: 0px;
	}
	.nav li.socialbtn a img {
    object-fit: cover;
    object-position: center;
    width: 140px;
    height: 50px;
}
	.hidemobile2{
		display:none!important;
	}
	#headermenu {
    padding: 0;
    width: 100%;
	}
	.colorbox{
		background: #f9ef57; /* Old browsers */
background: -moz-linear-gradient(left, #f9ef57 1%, #70c38f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f9ef57 1%,#70c38f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f9ef57 1%,#70c38f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ef57', endColorstr='#70c38f',GradientType=1 ); /* IE6-9 */
		height: 60px;	
	}
	.nav { 
		z-index: 0;
		height: calc(100vh - 54px);
		background: #fff;
	}
	
	.arrow-bottom {
    border-top: 4px solid #4d4d4d;
    transform: rotate(0deg);
    transition: all 300ms;
		display: none;
}
	.open .arrow-bottom {
    border-bottom: 0px solid #fff!important;
    border-top: 4px solid #84d089!important;
    transform: rotate(180deg);
    transition: all 300ms;
}
	
		
.nav li ul {
display: block;
	    opacity: 1;
position:relative;
	
    transition: all 300ms;
	z-index: 9997;
}
	
.nav li.open ul,.nav li.open2 ul {
   display:block;
   opacity: 1;
    transition: all 300ms;
   overflow: hidden;
	  width: 100% !important;
	pointer-events:all;
}

	
.navbar-inner {
    background: rgba(0, 0, 0, 0.45)!important;
}
	
.toggle {
    background: #fff;
		border-bottom: 1px solid #f1f1f1;
	}	
	.toggle a.menubutton:before {
        background: #4ab2d1;
    top: 20px;
    transition: all 300ms;
	}
	.toggle a.menubutton:after {
        border-top: 2px solid #5768ca;
    border-bottom: 2px solid #9170d1;
    top: 26px;
    transition: all 300ms;
	}
	.nav li a {
    color:#4d4d4d;		
    border-bottom: 1px solid #fbfbfb;
	    display: block;
    padding: 12px;
    margin: 0 50px;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
}
.nav li li a {
    color: #797878;
}
}


	
/*************************************************************************/	
a,a:hover{color:#5f6bd0}

/*************footer**************/
	.footerbottom{
		background: #e0e24f; /* Old browsers */
background: -moz-linear-gradient(left, #e0e24f 0%, #397f31 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e0e24f 0%,#397f31 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e0e24f 0%,#397f31 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e24f', endColorstr='#397f31',GradientType=1 ); /* IE6-9 */
		border-top: 0px;	
	}
	.smallspacetop{
		padding: 30px 10px;
	}
	.top80{
		margin-top: 80px;
	}


@media screen and (max-width: 1024px){
	.language .icon-angle-down{display: none;}
footer li a {
    background-size: 40px 40px;
    line-height: 114px;
    font-size: 13px;
	padding: 25px 0;
}
footer {
    height:50px;
}
footer ul {
    height: 50px;
}
footer li {
	position: relative;
    width: 25%;
    height: 50px;
}
	footer li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    border-left: 1px solid #f1f1f1;
    bottom: 12px;
}
	footer li:first-child:before {
    border-left: none;
}
}

/*******animate banner********/
	.footer, .hidebanner {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-in-out;
}
.footeranimated, .showbanner {
    transform: translateY(0px);
    opacity: 1;
    transition: all 1s ease-in-out;
}
/******logobanner*******/	
	.logobanner{
		max-height: 800px;
		height:50%; 
		object-fit: cover;
		object-position: center;
	}
	@media screen and (max-width:  1260px){
		.logobanner{		max-height: 500px;}
	}
	@media screen and (max-width:  770px){
		.logobanner{		max-height: 320px;}
	}

/*/*******social bar**************/
	.sociallist a{
		position: fixed;
		display: block;
		z-index: 100;
		right: 24px;
		height: auto;
		width: auto;
		bottom:200px;
		border-radius: 40px;
		color: white;
		transition: all 400ms;
		box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px 0px;
		background:#11b71f;
}

.sociallist a img{display:inline-block;vertical-align: middle;max-width:60px; border-radius: 50%;}
.sociallist a span{display:inline-block;vertical-align: middle;font-size:22px;font-weight: bold;}


.footerbottom .smallspacetop{padding: 70px 0!important;}
@media screen and (min-width:1025px){
	.fb_dialog_content iframe{
		bottom: 280px!important;
	}
}
		@media screen and (max-width:1024px){
			.sociallist a{right: auto;  left: 8px;  bottom: 130px;}
			.smallspacetop{margin-bottom:70px!important;}
			.footerbottom .smallspacetop{padding:20px 0!important;}
		}


/**********iframe rwd**********/
.video-container {
position: relative;
padding-bottom: 56.25%; /*16:9*/
/*padding-top: 30px;*/
height: 0;
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
}
/*****animate******/
	.element_from_top {
		top: -50px;
		padding-right: 0px;
		opacity: 0;
		position: relative;
	}
	
	.element_from_bottom {
		bottom: -50px;
		padding-left: 0px;
		opacity: 0;
		position: relative;
	}
	
	.element_from_left {
		left: -80px;
		padding-right: 0px;
		opacity: 0;
		position: relative;
	}
	
	.element_from_right {
		right: -80px;
		padding-left: 0px;
		opacity: 0;
		position: relative;
	}
	
	.element_fade_in {
		opacity: 0;
		position: relative;
		padding-left: 0px;
		right: 0px;
		
	}

/* Parallax Styles */

	.parallax {
		text-align: center;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed !important;
	}
	
	.parallax-overlay {
		background-color:rgba(0,0,0,0.70);
	}
	
	.contact-details {
		color: white;
    text-align: center;
    width: 100%;
		font-size: 15px;
}

/*****very1 3.0******/
 /*p{padding: 0;}*/
hr.title{margin: 9px 0 16px;width: 54px;border-color: inherit; color:#5f6bd0;display: inline-block}
h2{font-size: 32px;letter-spacing: 1px;}
p.title{font-weight: bold;margin-bottom: 30px;line-height: 1.4!important}
 
/***service- title2 small***/
.title2 {text-align: center;}
		 .title2 p.title{color: #c0c0c0;font-size: 14px;margin-bottom: 0;}
		 .title2 hr.title{border-color: #c0c0c0;border-bottom: 0px;width: 40px;margin: 14px auto;display: block;}
		 .title2 h2{position: relative;font-size: 22px;padding: 0 20px;display: inline-block;margin: 0 0 45px;line-height: 1;z-index: 1}
		 .title2 h2:before{position: absolute;content: '';left: 0;right: 0;top:10px;bottom: -4px;background:#fff282;z-index: -1;}
		 
    /**title-infomation-services small**/
.main-header{max-width: 1160px; padding: 0 30px;left: 0!important;margin: auto}
.main-header.small {top: calc(50% - 40px);}
		 .main-header.small h1{font-size: 32px;position: relative;padding: 0 20px;z-index: 1;display: inline-block;margin: auto}
		 .main-header.small h1:before{position: absolute;content: '';background: #5f6bd0;left: 0;right: 0;top:70%;bottom:-1px;z-index: -1}
		 .main-header.small p.title{color:#fff;font-size: 14px;margin-bottom: 15px}



/***navbar***/
.navbar{
	width: 100%;
	max-width: 1400px;
	background-color: white;
	transition: all 300ms ease-in-out;
	position: fixed;top: 0;z-index: 11;
	left: 0;
    right: 0;
}
nav.navbar:after {
    position: fixed;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    height: 81px;
    background: #fff;
    z-index: -1;
    border-bottom: 1px solid #DEDEDE;
}

.contactbtn{text-align: center;}

	.contactbtn a,.focusbtn {
				background: #5f6bd0!important;
				border-radius: 50px;
				color: #fff!important;
				padding: 10px 30px!important;
				margin-left: 15px;/*55*/
				display: inline-block;	
				font-family: 'Noto Sans TC';font-weight: 400;		
			}
			.focusbtn {
				padding: 5px 22px!important;
				font-size: 15px;
				text-decoration: none;
				font-family: 'Noto Sans TC';font-weight: 400;		
			}
			.contactbtn a.nav-link:hover,.focusbtn:hover,.btn:hover{
				background: #49529d !important;
				color: #fff!important;;
			}
			
		
			li.language{margin: 0 0px 0 10px;}
			li.language .nav-link{
				margin: 0!important;
				padding:9px 15px!important; 
				border: 1px solid #4d4d4d;
				border-radius: 60px;
			}
			li.language .nav-link:hover,li.language .nav-link:active,li.language .nav-link:focus{border-color:#5f6bd0;}
			li.language .nav-link icon{display: inline-block;margin-right: 5px;font-size: 18px;}

		
		

@media screen and (max-width:993px){

	.contactbtn a{margin: 10px 0 0!important;}
	nav.navbar:after {
		display:none;
	}
	
	li.language{margin: 20px 0 0;text-align: center;}
	li.language .nav-link{display: inline-block;min-width: 168px;}

	li.language ul li, li.language li a {
		display: inline-block;
		width: auto;
		border: 0px!important;
	}
	
	li.language ul li{margin-top: 20px;}
	li.language li a{
		/* width: 120px!important; */
		background: #f5f5f5!important;
		border-radius: 20px;
	}

	.nav li.language:hover ul li a,.nav li.language.open ul li a {	
    padding-left: 13px;
    padding-right: 13px;
	}
	.nav li.language.open ul li a:before{display:none}
	.language .arrow-bottom {
		right: calc(50% - 60px);
		top: 22px;
	}
}
@media screen and (max-width:1025px) and (min-width:600px){
	nav.nav{max-width:250px}	
}

/**footer & banner**/	
	.footerbottomdark{background:#efefef;font-size: 13px;margin-top: 0px}

	.fbanner {position: relative;text-align: center;font-size: 16px;z-index: 0;}
	.fbanner img{object-fit: cover;width: 100%;}	
	.fbanner p{
		letter-spacing: 3px;
		font-size: 18px;
		margin-bottom: 20px;
		line-height: 2;
	}
	.fbanner>div{position: absolute;display: inline-block;color:white!important;left: 0;right:0;top: 50%;transform: translate(0px, -50%);z-index: 1;}
	.fbanner hr{color: #fff}
	.fbanner h3{color:white;font-size: 32px}
	.footerbar{display: flex;max-width: 1300px;padding:0 20px;margin:20px auto;justify-content: space-between;align-items: center;}
	@media (max-width:1200px){
		.fbanner img{content: url('https://www.scrm.tw/images/footer (2).jpg');}	
	}
	@media (max-width:600px){
		.fbanner img{content: url('https://www.scrm.tw/images/footer (3).jpg');}	
		.fbanner>div{margin-top: 20px;}
		.fbanner p{font-size: 15px;letter-spacing: 2px;}
	}
	@media screen and (max-width:1025px){
		.nav-bar{position: fixed;top: 0;}		
	}


/*****top*******/
.topbanner{position:relative;}
.topbanner:before{position: absolute;content: '';background: rgb(0 0 0 / 20%);left: 0;right: 0;top: 0;bottom: 0;}

.main-header{position: absolute;left:10vw;right: 0;top:calc(50% - 170px);text-align: left;color: #fff}
.main-header.right{text-align: right}
.main-header h1{color: #fff;font-size: 72px;line-height: 1.5;}
.main-header h2{color: #fff;}
.main-header h1,.main-header h2,.main-header p{padding-left: 0px;padding-right: 0px}
.main-header a.btn{display: inline-block;background: #fff;color:#4d4d4d;padding: 10px 40px;border-radius: 50px;font-size:14px;font-weight: bold;margin: 10px;border:0px}
.main-header a.btn:hover{color:#5f6bd0;box-shadow: 0 0 10px rgba(0,0,0,0.2);}

.topbanner.small{height:400px;overflow: hidden;}
.topbanner.small img{object-fit: cover;height: 100%;width: 100%;}

.page-header {
	position: absolute;
	background: #fff;
	font-size: 16px;
	max-width: 380px;
	width: calc(100% - 56px);
	padding: 50px 28px 20px;
	right: 0;
	top: calc(50% - 125px);
}


@media screen and (max-width:1025px){
	 .page-header {
		 background: none;
		 color:#fff;
		 left: 0;
		 max-width: 100%;
		 font-size: 28px;
	}
	.page-header h1{color:#FFFFFF;font-size:50px}
	.page-header hr.title{color:#FFFFFF}
}

	.toparrow{    position: absolute;
		bottom: 60px;
    left: calc(50% - 1px);
}
	.toparrow:before{
     content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(50% - 7px );
    padding: 7px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    border-radius: 2px;
    transform: rotate(45deg);
		-webkit-animation: toparrow 1s infinite;
}
		
@-webkit-keyframes toparrow{
  0%{   top:-5px; }
  50%{  top:7px;  }
  100%{  top:-7px; }
}


/**content + bottom spacing**/
		 .content{background: #EEEEF0;padding: 100px 0;z-index:1;position: relative;overflow: hidden;}
		 .content.footbn{padding-bottom:220px}
		 .content.home.footbn{padding-bottom:200px}

		 .wcontent{background: #fff;padding: 55px;    z-index: 1;position: relative;overflow: hidden;}
		 .wcontent p{line-height:1.6;}

			 .wcontent.banner{background: none;padding-top: 0;}
.row-fluid.wcontent{width: auto;}
	 
		 @media screen and (max-width:900px){
			 /*    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));*/
			 .main-header,.main-header.right{top:calc(50% - 220px);text-align: center;left: 0}
			 .main-header h1{font-size: 35px;line-height: 1.3}
			 .topbanner img{object-fit: cover; height: calc(100vh - 104px);width: 100%;object-position: 74% 50%;}	 
			 .content.footbn{padding-bottom:50px!important;}
			 .content{padding:50px 0;}
			 .wcontent{  padding: 50px 30px;}
			 .wcontent.banner{width: 100%;padding: 0 0 50px;}
			 .flex .wcontent{ width: calc(100%)}
			 
		 }

/**flex**/ 
		/*垂直置中同等高度*/
		 .flex	{display: flex;flex-direction: row ;flex-wrap:wrap;justify-content: center;align-items: stretch}	 
		 .flex img.big{object-fit: cover;width: 100%;height: 100%;}
		 
		/*底部對齊*/
		 .flex2 {align-items: flex-end;justify-content: space-between }
		
		.row-fluid.flex{width: auto;}

		/*靠右對齊*/
.flex1{justify-content: flex-end;padding-left: 60px}




/**case slide**/	/***infobox***/	 


		 /* .slick-slide {
			 margin: 15px!important;
			 box-shadow: 0 0px 8px rgb(0 0 0 / 14%);
			     background: #fff;
		 }

.slick-slide:hover{box-shadow: 0 0px 15px rgb(0 0 0 / 24%);} */
		  ul.slick-dots { display: none!important;}
		 
		 .slick-prev, .slick-next {top: calc(100% + 75px)!important;background-size:contain!important;}
		 .slick-next { right: calc(50% - 62px)!important;background-image: url('https://www.scrm.tw/images/arrow-right (1).png')!important;}
		 .slick-prev { left: calc(50% - 62px)!important;background-image: url('https://www.scrm.tw/images/arrow-left (1).png')!important;}

.slick-prev:hover {background-image: url('https://www.scrm.tw/images/arrow-left (2).png')!important;}
.slick-next:hover{background-image: url('https://www.scrm.tw/images/arrow-right (2).png')!important;}
/*
		 .slick-next:before { content: '➜'!important;top: 8px;}
		 .slick-prev:before { content: '➜'!important; transform: rotateY(180deg)!important;top: 8px;}*/
		 .slick-prev:before, .slick-next:before {position: absolute;left: 11px;color:#5f6bd0!important;transition: all 400ms;display: none;}

		 button.slick-arrow {
			 border: 2px solid #5f6bd0;
			 color: #5f6bd0;
			 border-radius: 50px;
			 padding: 20px;
			 transition: all 400ms;
		 }

		 button.slick-arrow:hover{background:#5f6bd0;}

.topbanner .slick-slide,.topbanner .slick-dotted.slick-slider {margin: 0px!important;}
/*
.topbanner button.slick-arrow {display: none!important;}
*/
.topbanner .slick-slide{position: relative;}

.topbanner .slick-prev, .topbanner .slick-next {
    top: calc(50% - 20px)!important
}
.topbanner button.slick-arrow {
    border: 2px solid #ffffff;
    color: #ffffff;
}
.topbanner .slick-next {
    right:20px!important;
    background-image: url('https://www.scrm.tw/images/arrow-right (2).png')!important;
}
.topbanner .slick-prev {
    left: 20px!important;
    background-image: url('https://www.scrm.tw/images/arrow-left (2).png')!important;
}
.topbanner button.slick-arrow:hover {
    background: #ffffff57;
}


/*
		 .slick-prev:hover:before, .slick-next:hover:before{color:#fff!important;}*/
		 
		 .slide-content,.infobox-content{padding: 30px;color: #4d4d4d;}
.infobox-content{padding: 15px 30px}

.articlebox .infobox-content btn{text-align: center;display: block}

@media screen and (min-width:1024px){
	.articlebox .infobox-content{padding-left:10px;}
	.articlebox .infobox-content btn{text-align:right;}
	
	.articleimg.span6 {height: 405px;overflow: hidden;}
	.articleimg.span6 img {height: 100%;width: 100%;object-fit: cover;}
}


		 .smallcontent{font-size: 16px;line-height: 32px;margin-bottom: 0;}

.slick-dotted.slick-slider {
    margin-bottom: 100px!important;
}
		 
.infobox{ 
	box-shadow: 0 0px 8px rgb(0 0 0 / 14%);
	margin: 0 10px 75px!important;
	max-width:calc(33% - 20px);
	transition: all 300ms ease-in-out;
	 background: #fff;
	}

.articlebox{
	width: calc(100% - 20px)!important;
	box-shadow: 0 0px 8px rgb(0 0 0 / 14%);
	margin: 0 10px 50px!important;
	transition: all 300ms ease-in-out;
	background: #fff;	
}
.infobox:hover,.articlebox:hover{ 
	box-shadow: 0 0px 15px rgb(0 0 0 / 24%);
}

.infobox .btn0{margin: 20px 0 10px;}
.infobox a, .infobox a:hover { color: inherit;}
.infobox img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

 .time{color:#c0c0c0;margin-bottom: 0;}

.slide-content img,.infobox-content img {
        height: 64px;
    width: 100%;
    margin: 0 auto 15px;
    object-fit: contain;
}

/**pages button**/
.pagesbtn{text-align: center;}
			.pagesbtn a{display: inline-block;line-height: 24px;width: 24px; padding: 6px;border-radius: 30px;margin: 5px}
			.pagesbtn a:hover{color: #c0c0c0}
			.pagesbtn .nowpage{color:#fff;background: #5f6bd0}
.pagesbtn .nowpage:hover{color:#fff;}
			/*.pagesbtn .arrowbtn:hover{color:#c0c0c0;background: none;}*/
			.nopage{color:#c0c0c0}


@media screen and (max-width:900px){
	.infobox{
		max-width:calc(50% - 22px);
	}
}
@media screen and (max-width:900px){
			 .flex3{padding: 0 10px; width: calc(100% - 20px)}
	 }
@media screen and (max-width:600px){
	.infobox,.articlebox{
		max-width:calc(100% - 20px);
		margin: 0 10px 50px!important;
	}
	/*
	.slick-next:before { top: 9px;}
	.slick-prev:before { top:9px;}
	.slick-prev:before, .slick-next:before {left: 14px;font-size: 20px}*/
}
		 /***step**/
 .step{margin-bottom:30px;}
		 .step div{text-align: center}
		 .step div,.step h2{display: inline-block;vertical-align: bottom;}
		 .step h2,.step h3{margin: 0;}
		 .step h2{margin-left: 25px;margin-bottom: 5px;font-size: 28px;width: calc(100% - 65px);}
		 .step div,.step h3{color:#ffd406;font-size: 32px;font-weight: bold!important;}		 
		 .step div span{font-size:12px;display: block}
		 .step div hr.title{border-color: #ffd406;width: 20px;border-bottom: 0px;margin: 0}

/**table***/
table {width: 100%;letter-spacing: 1.5px}
		 table p{margin: 0;line-height: 1;}
		 table td:nth-child(1){width: 70px;}
		 table td{padding:26px 0 29px;border-bottom: 1px solid #f1f1f1;}
		 table tr:first-child td {padding-top: 0;}
		 table tr:last-child td {border-bottom: none;}

/*form*/
 .row-fluid:before, .row-fluid:after {
    display: block;
    content: "";
    line-height: 0;
}
		 .form { font-size: 14px;
			 font-weight: 500;
			 letter-spacing: 1px;
			 padding: 0;
		 }
		 .form [class*="span"] {
			 margin-top: 15px;
			 margin-bottom: 15px;
		 }
		 .quest,input, select {
			 display: inline-block;
		 }
		 .formbox{border:1px solid #ececec;}
		 .formbox:hover,.formbox:focus,input:hover, select:hover,input:focus, select:focus {
			 border-color: #5f6bd0!important;
		 }
		 .quest {  width: 100px;}
		 .quest s {   color: red;}

		 input, select,.formbox {
			 width: calc(100% - 152px);
			 font-size: 14px!important;
			 border-radius: 6px;
			 padding: 11px 16px!important;
			 display: inline-block;
}
select {
	height: auto;
	border-color: #ececec;
	width: calc(100% - 117px);
	  appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(https://www.very1.com.tw/images/arrow.png) no-repeat scroll 95% center transparent;
}

		 label.checkbox{transition: all 300ms ease-in-out;}
		 label.checkbox:hover{color:#5f6bd0}


/*******mobile*******/
@media screen and (max-width:1024px){
	.nav li.contactbtn a {
    background: #5f6bd0;
    color: #fff;
    margin:10px 0;
    padding: 10px;
    text-align: center;
    font-size: 15px;
    border: 0px;
}
}

/*****article*******/
u{text-decoration: underline!important}
b{font-weight: bold!important}

.accordion a:hover{color:#5aa658}
.small-2,.big-2,.row2,.column1,.rowcolumn1,.column2,.same{
			display: inline-block!important;
		}

		.small-2,img.small-2{vertical-align: top; max-width: 30.6%;margin: 0;}
		.big-2,img.big-2{vertical-align: top;  max-width: calc(69.4% - 5px);margin: 0;}

.row2{vertical-align: top; max-width: calc(53% - 5px);}
.row2 img{margin: 0;}
		.row2 img:first-child{padding-bottom: 5px;margin: 0;}
		.column1,img.column1{vertical-align: top;max-width: 47%;margin: 0;}

		.rowcolumn1,img.rowcolumn1{vertical-align: top;max-width:calc(40.8% - 2.5px);margin: 0;}
		.rowcolumn1 img:first-child{padding-bottom: 5px;margin: 0;}
		.column2,img.column2{vertical-align: top;max-width:calc(59.2% - 2.5px);margin: 0;}

		.same,img.same{vertical-align: top; max-width: calc(50% - 2.5px);margin: 0;}


.same3{display: inline-block;
    object-position: center;
    max-width: calc(33% - 2px);
    object-fit: cover;
    min-height: 250px;}

		 .tags{margin-top:90px;font-size: 14px;margin-bottom: 45px}
		 .tags span{display: inline-block;background: #efefef;padding: 1px 15px;line-height: 28px;border-radius: 20px;margin: 10px 20px 10px 0}
.tags span:last-child {  margin-right: 0;}
	 /****screenshot*****/
		 .screenshot img,.screen img{
			 transition: all 300ms ease-in-out;
		 }
		 .screenshot .min{
			 width: 70px;
			 border: 1px solid #aaa;
			 margin: 7px 3px;
			 left: 50%;
			 top:50%;
		 }
		 .screen .min{
			 width: 100%;
			 left: 0%;
			 top:49%;
		 }


		 .min:hover{opacity: 0.7}
		 .max{
			 position: fixed;
			 top: 0;
			 left: 0;
			 right: 0;
			 bottom: 0;
			 width: 100%;
			 height: 100%;
			 z-index: 1000;
			 object-fit: contain;
			 background: rgba(0,0,0,0.6);
		 }


/********************* MC design ***************************/
.tleft{text-align: left;}
.tright{text-align: right;}
.cblue{color:#4AB2D1;}
.cpurple{color:#433875;}
.cyellow{color:#FFF59C}
#back-to-top{
	display: none;
	position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    width: 50px;
    height: 50px;
    z-index: 10;
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    cursor: pointer;
}
#back-to-top:after,#back-to-top:before{
    position: absolute;
    content: '';
    border-left: 10px solid #5f6bd0;
    border-top: 10px solid #4ab1d1;
}
#back-to-top:after {
    top: 25px;
    left: 20px;
    height: 14px;
}
#back-to-top:before {
    top: 15px;
    left: 15px;
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    transform: rotate(45deg);
}

.linearborder{
	background: linear-gradient(135deg,  #4ab2d1 0%,#5768ca 50%,#9170d1 100%); 
	border-radius: 10px;
	position: relative;
	z-index: 1;
	padding: 20px;
}
.linearborder:before{
	content: '';
	position: absolute;
	top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 8px;
	z-index: -1;
}

.btn {
	background: #5f6bd0 !important;
	border-radius: 50px;
	font-size: 22px;
	line-height: 1;
	color: #fff !important;
	padding: 11px 30px;
	display: inline-block;
	font-family: 'Noto Sans TC';font-weight: 400;		
}
.btn:hover {
	webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.multiple-1 ul.slick-dots{display: block!important;}
.multiple-1 button.slick-arrow{display: none!important;}
.multiple-1.slick-dotted.slick-slider {margin-bottom: 0px !important;}
.multiple-1 .slick-dots { bottom: 10px;}

.banner{position: relative;}
.banner .textarea{
	position: absolute;    
	top: 50%;
    right: 20px;
    width: 50%;
    text-align: center;
    transform: translate(0, -50%);
}
.banner .textarea.center{
	top: 50px;
    right: 0px;
    width: 100%;
    transform: translate(0, 0);
}
.banner .title.white h1 ,.banner .text.white p {color: #fff;}
.banner .title {
	margin: 0 auto 20px;
	max-width: 700px;
}
.banner .text {
	color: #433875;
	margin-bottom: 20px;
	font-size: 20px;
}
.banner .mobilehide{display: block!important;}
.banner .mobileshow{display: none!important;}
@media (max-width:1200px) {
	.banner .title h1 {font-size: 40px;}
}
@media (max-width:900px) {
	.banner .title h1 {font-size: 35px;}
	.banner .text {font-size: 16px;}
	.btn {font-size: 20px;padding: 10px 30px;}
}
@media (max-width:800px) {
	.banner .mobilehide{display: none!important;}
	.banner .mobileshow{display: block!important;}

	.banner .textarea {
		position: absolute;
		top: 40px;
		right: 50%;
		width: calc(100% - 60px);
		max-width: 600px;
		text-align: right;
		transform: translate(50%, 0%);
	}
	.banner .textarea.left {text-align: left;}
	.banner .title{margin: 0 auto 30px;}
	.banner .title h1 {font-size: 50px;}
	.banner .text {font-size: 20px;margin-bottom: 30px;}
	.btn {font-size: 22px;}
}
@media (max-width:600px) {
	.banner .title{margin: 0 auto 20px;}
	.banner .title h1 {font-size: 35px;}
	.banner .text {font-size: 14px;margin-bottom: 20px;}
	.btn {font-size: 18px;}
}

/******begin******/
.begin{
	position: relative;
	background-image: url('https://www.scrm.tw/images/home/begin.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}
.begin .mascot{
	position: absolute;	
	top:0;
	right: -100px;
    width: auto;
    height: 100%;
	z-index: -1;
}

.begin .brleft{   
	border-left: 2px solid #433875;
    padding: 5px 20px;
    margin: 30px 0;
}
.begin .list-icons{margin-top: 100px;}
.begin .list-icons>div{
	display: inline-block;
	margin-right: 70px;
    text-align: center;
	position: relative;
}
.begin .list-icons>div:before{
	position: absolute;
	content: '';
	border-radius: 40px;
	height: 40px;
    width: 40px;
    background-color: #f2f5fe;
    bottom: 4px;
    right: -15px;
    z-index: -1;
}
.begin .list-icons img{ width:100px}

@media (max-width:1100px){
	.begin .list-icons{margin-top: 50px;}
	.begin .list-icons>div {margin-right: 50px}
	.begin .list-icons>div:last-child {margin-right: 0px}
}
@media (max-width:992px){
	.begin .mascot{
		top: 80px;
		right: -50px;
		height: 220px;
	}
}
@media (max-width:720px){
	h2 {font-size: 25px;}
	.begin .brleft{max-width: calc(100% - 30px);margin: 20px 0 10px;}
	.begin .mascot{	height: 150px;   top: 120px;}
	.begin .list-icons>div {margin-top: 20px;margin-right: 0;width: 50%;}
	.begin .list-icons {
		margin-top: 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.begin .list-icons>div:before{right: calc(50% - 75px);}
}

/******slidecom******/
.slidecom {
	display: flex;
    align-items: center;
    justify-content:space-evenly;
    padding: 0;
}
.slidecom button.slick-arrow{display: none!important;}
.slidecom .slick-dotted.slick-slider{margin:0 auto!important;}
.slidecom .slick-slide{margin:0!important;box-shadow: none;}
.slidecom .slide{
	padding: 130px 0;
	width:1000px;
    position: relative;
    margin-left: -110px;
}
.slidecom .bgimg{   
	position: absolute;
    top: 0;
    left: 50px;
    height: 100%;
    right: 0;
    z-index: -1;
}
.slidecom .multiple-single{
border: 25px solid #000;
border-radius: 15px 15px 0 0;
width: calc(100% - 150px);
}
.slidecom .box{
    text-align: center;
}
.slidecom .linearborder{
	margin: 25px 15px;
	display: inline-block;
	text-align: left;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	padding: 30px;
}
.slidecom .linearborder h3 {
    display: inline-block;
    margin: 0 15px 0 0;
}
.slidecom .linearborder b {
    color: #555;
    font-size: 16px;
}
.slidecom .linearborder p {
    font-size: 15px;
    color: #555;
    letter-spacing: 2px;
    margin-top: 5px;
}
.slidecom .linearborder div {
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.slidecom .linearborder div:last-child {
    border-bottom:none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

@media (max-width:1300px) {
	.slidecom .slide{width:800px;}
}
@media (max-width:1024px) {
	.slidecom .multiple-single{border:15px solid #000;}
	.slidecom {flex-wrap: wrap;}
	.slidecom .slide{width: calc(100% - 20px);margin: 0 auto;padding: 100px 0 50px;}
	.slidecom .box {padding-bottom: 50px;}
}
@media (max-width:600px) {
	.slidecom .bgimg{left: 0;}
	.slidecom .multiple-single {
		border: 10px solid #000;
		border-radius: 5px 5px 0 0;
		width: calc(100% - 100px);
	}
	.slidecom .bgimg {
		height: calc(100% + 200px);
		width: calc(100% + 230px);
	}
}


/*******linephone********/
line{
	display: inline-block;
	background-color: #11b71f;
	color:#fff;
	font-family: 'Noto Sans TC';font-weight: 700;
	border-radius: 4px;
	padding: 1px 6px;
    font-size: 27px;
    margin-right: 6px;letter-spacing: 0;
}
x{
	position: relative;
	display: inline-block;
    width: 30px;
    height: 4px;
    transform: rotate(45deg);
    background-color: #433875;
    margin: 10px 11px;
}
x:before{
	position: absolute;
	content: '';
	width: 30px;
    height: 4px;
    background-color: inherit;
    transform: rotate(90deg);
	top: 0;
    left: 0;
}
.linephone{    
	position: relative;
    display: flex;
    justify-content:center;
	flex-wrap: wrap;
	overflow: visible;
}
.linephone>div{position: relative;}
.linephone .boxs{
	display: flex;
    flex-wrap: wrap;
}
.linephone .boxs .linearborder img{width: 60px;}
.linephone .boxs .linearborder {
    text-align: center;
    margin: 30px 30px 0 0;
    width: calc(50% - 15px);
	max-width: 300px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.linephone .boxs .linearborder:nth-child(2n){margin-right:0;}
.linephone .linearborder p b{color: #555;margin-top: 10px;display: block;}
.linephone .linearborder p:last-child {color: #555;font-size: 15px;line-height: 1.7; margin-top: 8px;}
.linephone .phone {width:100%;max-width: 600px;margin-top: -40px;}
.linephone .c1 {position: absolute;width: 250px;
    top: 0;
    left: 40%;
    z-index: -1;}
.linephone .c2 {position: absolute;    width: 150px;
    top: 50%;
    left: 10%;
    z-index: -1;}
.linephone .wave {position: absolute;    
	top: calc(50% - 50px);
    left: 0;
    width: 100%;}

@media (max-width:1400px){
	.linephone{ justify-content: space-between;}
	.linephone .wave{    top: 100%;transform: translate(0px, -55%);}
	.linephone .col-6{width:60%}
	.linephone .col-5{width:40%;}
	.linephone .phone{margin-top: -10px;}
	.linephone .c1 {
		width: 200px;
		left: 35%;
	}
}

@media (max-width:1100px){
	.linephone {padding-bottom: 0;}
	.linephone .col-5,.linephone .col-6{width:100%;text-align: center;}
	.linephone .boxs .linearborder{max-width: unset;}
	.linephone .phone {max-width: 450px;margin-top: 30px;}
	.linephone .c1 {left: 40%;top: 30px;}
	.linephone .c2 {top: 60%;left: 30%;}
	.linephone .wave{transform: translate(0px, -60%);}		
}
@media (max-width:660px){
	.linephone .boxs .linearborder{margin: 20px 20px 0 0;    width: calc(50% - 10px);}
	.linephone .linearborder p b{font-size: 16px;}
	.linephone .c2 {left: 10%;}
}
/*****startup******/
.startup {
	padding-top: 0;
    background: none;
    overflow-y: visible;	
}
.startup .banner{   
	display: block; 
	width: 70%;
    max-width: 1000px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.startup>div{    
	position: relative;
    background: #fff;
    display: inline-block;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 50px;
    border-radius: 25px 25px 25px 0;
    left: 100%;
    transform: translate(-130%, -100px);
}
.startup>div p{
	line-height: 2;
    color: #555;
    letter-spacing: 2px;
	margin: 0;
}
.startup .c1{
	position: absolute;
	width: 300px;
	left: -50px;
	bottom: 150px;
	z-index: -1;
}
.startup .c2{
	position: absolute;
    width: 200px;
	z-index: -1;
	right: 100px;
    bottom: 300px;
}
@media (max-width:1400px) {
	.startup>div{transform: translate(-100%, -100px);}
	.startup .c2 {right: -10px;bottom: 270px;}
}
@media (max-width:1100px) {
	.startup>div{padding: 30px;}
	.startup .c2 {width: 150px}
	.startup .c1 {width: 250px}
	.startup>div p{font-size: 15px;}
}
@media (max-width:800px) {
	.startup .banner{width:100%;}
	.startup>div{transform: translate(-105%, -50px);}
	.startup .c2 {bottom: 40px;}
}
@media (max-width:550px) {
	.startup>div {
		transform: translate(-0%, 0px);
		margin: 20px 0 70px;
		left: 0px;
		width: 100%;
		padding: 15px;
		border-radius: 20px 20px 20px 0;
	}
	.startup>div p{letter-spacing: 1px;}
}

/***slide2***/
.slide2{overflow: visible;padding-bottom: 0;}
.slide2 .mascot{position: absolute;width: 200px ;top: -130px;left: 40%;}
.slide2 .slick-slide {
     margin: 0px!important; 
     box-shadow: none; 
     background: none;
	 position: relative;
}
.slide2 .slideimg {
    position: relative;
    margin: 30px auto 150px;
}
.slide2 .slideimg img {box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.slide2 .contentarea {
    position: absolute;
    bottom: -20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 30px;
}
.slide2 .slick-slide:nth-child(2n) .contentarea {left: -20px;}
.slide2 .slick-slide:nth-child(2n-1) .contentarea {right: -20px;}
.slide2 .contentarea h3 {font-size: 25px;}
.slide2 .contentarea p {
    line-height: 2.2;
    margin: 20px 0 0;
    color: #555;
    font-size: 15px;
}
.slide2 .bottom {
    position: absolute;
    bottom:-2px;
    left: 0;
    right: 0;
}
.slide2 .slick-prev, .slide2 .slick-next {top: calc(100% - 90px)!important}
.slide2 .slick-next {right: calc(50% - 60px)!important;}
.slide2 .slick-prev {left: calc(50% - 60px)!important;}
.slide2 .slick-dotted.slick-slider{margin-bottom: 0!important;}

@media (max-width:790px){
	.slide2 .mascot{width: 130px;top: -85px;left: 80px;}
	.slide2 .slick-slide:nth-child(2n) .contentarea {left: 30px;}
	.slide2 .slick-slide:nth-child(2n-1) .contentarea {right: 30px;}
	.slide2 .slideimg {margin: 30px auto 250px;}
	.slide2 .contentarea{bottom: -100px;}
}
@media (max-width:500px){
	.slide2 .mascot{left: 50px;}
	.slide2 .slick-slide .contentarea {right: 12px!important;left: 12px!important;}
	.slide2 .slideimg {margin: 30px auto 280px;padding: 0 25px 0;}
	.slide2 .slick-prev, .slide2 .slick-next {top: calc(100% - 60px)!important;}
	.slide2 .contentarea{bottom: -170px;}	
	.slide2 .contentarea p {line-height: 2;margin: 10px 0 0;}
}

/*****sixgain******/
.sixgain {
    color: #fff;
    background: #5f6bd0;
    text-align: center;
}
.sixgain h2 {
    color: #fff;
    margin-bottom: 40px;
}
.sixgain .boxs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.sixgain .boxs div {
    width: calc(33% - 30px);
    margin: 15px;
}
.sixgain .boxs img {
    width: 100px;
    margin-bottom: 5px;
}
.sixgain .boxs p {
    line-height:1.6;
    font-size: 15px;
}
.sixgain b {
	font-family: 'Noto Sans TC';font-weight: 300;
    color: #fff59c;
	margin-bottom: 10px;
    display: block;
}
@media (max-width:1000px){
	.sixgain .boxs div {
		width: calc(33% - 20px);
		margin: 10px;
	}
	.sixgain .boxs{max-width: 100%;padding: 0;}
}
@media (max-width: 900px){
	.sixgain{padding: 50px 10px;}
	.sixgain .boxs p {font-size: 13px;}
}
@media (max-width:700px){
	.sixgain .boxs div {
		width: calc(50% - 20px);
		margin: 10px;
	}
}

/*****services****/
.function{text-align:center;padding: 70px 0px;overflow: unset;}
.function h1{margin-bottom: 60px;}
.function>div{display: flex;justify-content: space-between;}

.function .fixarea,.function .lists{position: relative;}
.function .fixarea{width:30%;} 
.function .lists{display: inline-block;}
.function .lists a{
	display: block;
	text-decoration: none;
    color: #555;
    margin-top: 7px;
    font-size: 15px;
}
.function .lists a:hover{color: #5f6bd0;}
.function .lists img{
	position: absolute;
	width: calc(100% - 40px);
    top: -55px;
    left: 20px;
}

.function .functionarea{width:70%;
    font-size: 14px;
    color: #555;}

.function .functionarea>div:nth-child(2n){
    margin-bottom: 20px;
    border-radius: 150px 0 0 150px;
    padding: 25px 0;
    display: flex;
    align-items: center;
	min-height: 150px;
    position: relative;
}
.function .functionarea>div:nth-child(2n):before{
	position: absolute;
	content: '';
	top: 20px;
	left: 200px;
	bottom: 20px;
    border-left: 1px solid #d9d9d9;
}
.function .functionarea>div:nth-child(2n):after{
	position: absolute;
	content: '';
	top: 20px;
	left:420px;
	bottom:20px;
    border-left: 1px solid #d9d9d9;
}
.function .functionarea>div:nth-child(6n-4) {background: #f2fbff;}
.function .functionarea>div:nth-child(6n-2) {background: #f6f8ff;}
.function .functionarea>div:nth-child(6n) {background: #fcf8ff;}

.functionarea h3 {
    display: block;
    font-size: 23px;
    color: #333;
    width: 200px;
    margin: 0;
}
.functionarea .point {
    width: 220px;
    padding: 0 20px;
	text-align: left;
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 90px;
	align-content: space-between;
}
.functionarea .descrip {
    text-align: left;
    width: calc(50% - 0px);
    padding: 0 20px;
}
.functionarea .descrip p {
	font-size: 16px;
    margin: 0;
    line-height: 1.6;
}
.functionarea .point li {display: inline-block;padding-right: 6px;}
.fixmove{transition: all 500ms ease 0s;}

@media (max-width:1200px){
	.function .fixarea {width: 250px;}
	.function .functionarea{width:calc(100% - 250px);}
	.functionarea .descrip p {font-size: 14px;}
	.functionarea h3{width: 180px;}
	.functionarea .point {width: 220px;}
	.function .functionarea>div:nth-child(2n):before{left: 180px;}
	.function .functionarea>div:nth-child(2n):after{left: 400px;}
	.functionarea .descrip{width: calc(100% - 400px);}
}
@media (max-width:800px){
	.function .lists a{font-size: 14px;}
	.function .lists img{top: -50px;}
	.function .fixarea {width: 140px;}
	.function .functionarea{width:calc(100% - 140px);}
	.function .functionarea>div:nth-child(2n){flex-wrap: wrap; border-radius: 50px 0 0 50px;}
	.function .functionarea>div:nth-child(2n):before,.function .functionarea>div:nth-child(2n):after{display: none;}
	.functionarea h3 {width: 100%;}
	.functionarea .point {
		width: 100%;
		max-width: 480px;
		flex-direction: row;
		justify-content: center;
		margin: 10px auto 20px;
		max-height:unset;
	}
	.functionarea .point li {padding: 10px 10px 0;}
	.functionarea .descrip {
		width: 100%;
		text-align: center;
		border-top: 1px solid #d9d9d9;
		padding: 20px 0 0;
		margin: 0 20px;
	}
}


/*****profile*****/
.banner.about .textarea {
	right: 0;
	width: 100%;
	top: calc(50% - 50px);
	text-align: center!important;
	max-width: 100%!important;
	transform: translate(0, -50%)!important;
}
.about .textarea img {width: 170px;}
.about .title {max-width: 100%;margin: 20px 0;text-shadow: 5px 5px 7px rgba(0,0,0,0.2);}

.about .title h1 {margin-bottom: 20px;}

@media (max-width:1200px){
	.about .title {margin:10px 0;}
	.about .title h1 {margin-bottom: 10px;}
	.about .textarea img {width: 140px;}
}
@media (max-width:900px){
	.about .textarea img {width: 120px;}
	.about .textarea {right: 0;width: 100%;top: calc(50% - 30px);}
	.banner .title h1 {font-size: 35px!important;}
}
@media (max-width:800px){
  .about>img:not(.blank) {min-height: 270px;}
  .about .title h1 {font-size: 30px!important;margin: 10px 20px;}
}
@media (max-width:500px){	
	.about .title h1 {font-size:25px!important;}
	.about .textarea img {width: 100px;}
	.about .textarea {top: calc(50% - 20px);}
}


.intro{text-align: center;padding-top:20px;padding-bottom:20px;font-size: 18px;background: none;}
.intro h1{margin-bottom: 30px;}
.intro p { letter-spacing: 2px;}
@media (max-width:550px){
	.intro p {letter-spacing: 1px;line-height: 1.4;}
	.intro{font-size: 15px;}
}

.aboutbg{position: relative;overflow-x: clip;}
.aboutbg .textarea{position: absolute;top: 50%;transform:translate(0,-50%);color: #fff;font-size: 18px;}
.aboutbg.tright .textarea{right: 150px;}
.aboutbg.tleft .textarea{left: 150px;}
.aboutbg .textarea h2{    
	color: #8D9EFC;
    background: #fff;
    display: inline-block;
    padding: 10px 40px;
    font-size: 30px;
    border-radius: 50px;
    margin-bottom: 25px;
}
.aboutbg .mascot{
	position: absolute;
    width: 300px;
    right: 50px;
    top:-280px;
    z-index: -1;
}

@media (max-width:1200px){
	.aboutbg.tright .textarea{right:100px;}
	.aboutbg.tleft .textarea{left:100px;}
	.aboutbg .mascot{width: 250px;right: 20px;top: -230px;}
}
@media (max-width:900px){
	.aboutbg .textarea {font-size: 16px;max-width: calc(100% - 100px);}
	.aboutbg.tright .textarea {right: 50px;}
	.aboutbg.tleft .textarea {left: 50px;}
	.aboutbg .textarea h2 {padding: 8px 30px;font-size: 26px;}
	.aboutbg .mascot{    width: 150px;right: -20px;top: -143px;}
}
@media (max-width:660px){
	.aboutbg .mascot{display: none;}
}
@media (max-width:550px){
	.aboutbg>img {height: 400px;object-fit: cover;}
	.aboutbg .textarea h2 {font-size: 25px;font-family: 'Noto Sans TC';font-weight: 400;}
	.aboutbg.tright .textarea {right: 40px;	}
	.aboutbg.tleft .textarea {left: 40px;	}
	.aboutbg .textarea {font-size: 15px;max-width: calc(100% - 80px);}
}
@media (max-width:500px){
	.hidedot{display: none;}
}

.products{text-align: center;padding-top: 20px;padding-bottom: 50px;}
.products h1{margin-bottom: 50px;}
.products .prd b{color: #555;}
.products .prd{
	position: relative;
	display: flex;   
	max-width: 1200px;
    margin: auto;
	align-items: center;
}
.products .prd.dirc{flex-direction: row-reverse;}
.products .prd img:not([class^=ball]),.products .prd>div{width: 50%;}
.products .prd img[class^=ball]{
	position: absolute;
	width: 150px;
	z-index: -1;
}
.products .prd .ball1{top: -50px;left: -50px;}
.products .prd .ball2{top: -65px;right: -60px;width: 130px !important;}
.products .prd .ball3{left: calc(50% - 60px);top: -60px;width: 100px!important;}
.products .prd .ball4{bottom: -65px;left: -60px;width: 130px !important;}
.products .prd .ball5{bottom: -50px;right: -70px;}

@media (max-width:1000px){
	.products .prd p{font-size: 14px;padding: 0 20px;margin: 0;line-height: 1.8;}
}
@media (max-width:700px){
	.products{padding-bottom: 0;}
	.products .prd{flex-wrap: wrap;}
	.products .prd img:not([class^=ball]), .products .prd>div {width: 100%;}
	.products .prd.dirc{flex-direction: row;}
	.products .prd>div {padding: 50px 20px;}
	.products .prd .ball3 {left: -40px;}
	.products .prd .ball4 {
		bottom: -40px;
		left: calc(100% - 74px);
		width: 100px !important;
	}
	.products .prd .ball5 {bottom: 130px;right: calc(100% - 50px);}
}

.aboutft{text-align: center;padding-bottom: 100px;}
.aboutft .container-md{max-width: 1000px;}
.aboutft .footbn{
	position: relative;
	margin-top: 40px;
	box-shadow: 0 0 25px rgba(0,0,0,0.15);
}
.aboutft img[class^=ball],.aboutft .mascot{
	position: absolute;
	width: 150px;
	z-index: -1;
}
.aboutft h3 {
    text-align: left;
    color: #242424;
    margin-bottom: 20px;
}
.aboutft .ball1{    
	top: -160px;
    left: -100px;
    width: 220px!important;
    opacity: 0.5;
}
.aboutft .ball2{right: -70px;bottom: -80px;}    
.aboutft .mascot{right: 20px;top: -85px;}    
.aboutft hr.linearborder:before {display: none;}
.aboutft hr.linearborder {
    opacity: 1;
    width: 2px;
    padding: 0;
    height: 50px;
    display: inline-block;
    margin: 0px;
    z-index: -1;
}
.aboutft h4{
	margin: 20px 0;
	font-family: 'Noto Sans TC';font-weight: 300;
    color: #333;
    font-size: 30px;
    letter-spacing: 3px;
}
@media (max-width:700px) {
	.aboutft h3 {font-size: 23px;}
	.aboutft h3:nth-child(2) {max-width: calc(100% - 100px);}
	.aboutft .mascot {right: 10px;top: -55px;width: 100px!important;}
	.aboutft .footbn {margin-top: 25px;}
	.aboutft h4 {font-size: 28px;}
}

/*****blog*****/
.banner  .textarea.center.left{
	left: 20px;
}

.blog{max-width: 1110px;  margin: auto;}
    .wcontent.blog p {margin-bottom: 15px;}
	.wcontent.blog h2 {margin: 50px 0 15px;letter-spacing: 0px;}   
    .wcontent.blog img {margin: 20px 0  30px;}    

@media (min-width:801px){
	.banner .textarea.center.left{
		top: 50% !important; 
	right:20px !important; 
	width: 50% !important;
	transform: translate(0,-50%) !important;
}
}

@media (max-width: 800px){
	.banner .textarea.left:not(.center) h1{
		text-align: left!important;
	}
	.banner .textarea.center{
		right: 20px;
		top: 30px;
		width: calc(100% - 40px);
		max-width: unset;
		text-align: center!important;
		transform: unset;
	}
	.textarea .bannerText{display: none;}
}
@media (max-width: 550px){
	.textarea.center  .title h1 {
		font-size: 27px!important;
	}
}
/*******plans*******/
.banner .title h1{color:#4E4D94;}
@media (max-width: 1200px){
	.banner .title h1 {font-size: 38px;}
	.banner  .text {font-size: 18px;}
}
@media (max-width: 900px){
	.banner .title h1 {font-size: 30px!important;}
	.banner  .text {font-size: 16px;}
}

.plans{max-width: 1200px;margin: auto;overflow: visible;}
.plans h1{text-align: center;margin: 40px 0 30px;}

.planstable{display: flex;align-items: flex-start;margin: 50px 0px;}
.planstable .leftside {width:200px;display: inline-block;}
.planstable .rightside {width:100%;display: block;}
.planstable table td:nth-child(1) { width: auto;}

.planstable icon.icon-info{
	font-size: 12px;
	border: 1px solid;
	border-radius: 10px;
	padding: 2px 6px;
	letter-spacing: 0;
	color: #757186;
	position: absolute;
	right: 15px;
		top: 14px;
}

.planstable .icon-info .lightbox{
	display: none;
	position: fixed;
    top: 0;
    left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 99;
}
.planstable .icon-info .lightbox ul{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px 20px 20px 34px;
	width:auto;
	font-size: 13px;
	color:#555;
	border-radius:10px;
	z-index:100;
	margin: 0;
	line-height: 1.5;
	width: max-content;
	max-width: 80%;
}
.planstable .icon-info .lightbox ul li{margin-bottom: 10px;}
.planstable .icon-info .lightbox ul li:last-child{margin-bottom: 0;}

.planstable table tr td{
	position: relative;
	border-bottom:  1px solid #e2e2e2;
	padding:10px 20px;        
}
.planstable table.leftside td{        
	border-left:  1px solid #e2e2e2; 
	width:200px;
}
.planstable table.leftside tr:first-child td{
	border-left: none;
	height: 138px;
	padding: 0;
}

.planstable .overscroll{
	overflow: auto;
overflow-y: hidden;
width: calc(100% - 200px);
border-right: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
}
.planstable .overscroll2{ width:888px;}
.planstable table.rightside td{
	width:222px;
	border-left:  1px solid #e2e2e2;}
.planstable table.rightside{text-align: center;}
.planstable table.rightside tr td:first-child{
	border-left:none; 
}
.planstable table.rightside tr:first-child td{
	padding: 20px;
	border-top:  1px solid #e2e2e2;
}


.planstable .rightside tr:first-child td:first-child{
	background: #e5f3ff;
}
.planstable .rightside tr:first-child td:nth-child(2){
	background: #bbd9f8;
}
.planstable .rightside tr:first-child td:nth-child(3){
	background: #b7c1f2;
}
.planstable .rightside tr:first-child td:nth-child(4){
	background: #c1b7fd;
}
/* .planstable .rightside tr:first-child td:nth-child(5){
	background: #5d50af;
	color: #e8ce88;
}
.planstable .rightside tr:first-child td:nth-child(5) h5{color: #ffffff;}
.planstable .rightside tr:first-child td:nth-child(5) big{color: #ffd67b;} */


.planstable .price{
	position: relative;
	letter-spacing: 0;font-size:14px;
}
.planstable .price:before{
	position: absolute;
	content: '';
	height:1px;
	width:20px;
	background: #929292;
	top: 10px;
	left: 50%;
	transform: translate(-50%,0);
}
.planstable big{
	color:#3f3f3f;font-size: 30px;
	display: inline-block;
	padding: 20px 5px 0;
	font-family: 'Noto Sans TC';font-weight: 700;
}
.csheight{height: 165px;}

@media (max-width:500px) {
	.planstable{margin: 50px -10px;}
	.planstable  table tr td{ font-size: 14px; padding: 10px;}
	.planstable .leftside {width: 140px;}
	.planstable table.leftside td { width: 140px;}
	.csheight{height: 147px;}
	.planstable .overscroll{width: calc(100% - 140px);}
	.planstable icon.icon-info{right: 10px;}
	.planstable .overscroll2{ width:800px;}
	.planstable table.rightside td{width:200px;}
}

/*******customers*******/
.max12{
	max-width: 1200px;margin: auto;
}
.max10{
	max-width: 1000px;margin: auto;
}
.customers h1{text-align: center;margin-bottom: 60px;}
.customers .wave{
	top: -300px;
	opacity: 0.5;
	transform: translate(0px, 0%);
}
.flex{display: flex;align-items: center;flex-wrap: wrap;}
.customers .flex{ max-width: 1000px;margin:100px auto;justify-content: flex-start;}
.customers .flex>div{
	display: inline-block;
	width:calc(25% - 36px);
	margin-right: 48px;
	margin-bottom: 50px;
	text-align: center;
}
.customers .flex>div:last-child{margin-right: 0;}
.customers .flex img{
	display: block;
	box-shadow: 0 0 20px rgba(0,0,0,0.1) ;
	margin-bottom:25px;
	border-radius: 10px;
}
.customers .flex p{font-family: 'Noto Sans TC';font-weight: 400;}

@media (max-width: 1400px){
	.customers .wave{top: -200px;}
}
@media (max-width: 1000px){
	.customers .wave{top: -100px;}
}

@media (min-width: 801px){
	.customers .flex>div:nth-child(4n){margin-right: 0;}
}
@media (max-width: 800px){
	.customers .flex{margin:50px auto 100px;}
	.customers .flex>div {
		width: calc(33% - 30px);
		margin-right: 45px;
	}
	.customers .flex>div:nth-child(3n){margin-right: 0;}
}
@media (max-width: 500px){
	.customers .flex{margin:0px auto 100px;}
	.customers .flex>div {
		width: calc(50% - 25px);
		margin-right: 50px;
	}
	.customers .flex>div:nth-child(3n){margin-right: auto;}
	.customers .flex>div:nth-child(2n){margin-right: 0;}
}


/*******process*******/
.process{
	max-width: 1200px;
	margin: auto;
	overflow: visible;
}
.process h1{margin-bottom: 40px;}
.process .steps{
	margin: 70px 0 100px;
	display: flex;
	justify-content: space-between;
	position: relative;
	flex-wrap: wrap;
}
.process .steps:before{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	top: 50%;
	height: 10px;
	background:linear-gradient(135deg, #4ab2d1 0%, #5768ca 50%, #9170d1 100%);
	transform: translate(0,-50%);
}
.process .steps a{text-decoration: none;color: #3F3F3F;}
.process .steps .linearborder{width: 200px;padding:40px 20px;}
.process .steps .linearborder p{font-size: 20px;font-weight: 500;}
.process .steps .linearborder b{font-size: 30px;}
.process .box {margin: 50px 0;}
.process .box img{border-radius: 10px;}

.box{position: relative;}
.ball-tl,.ball-tr,.ball-bl,.ball-br{
	position:absolute;z-index:-1 ;
}
.ball-tl{top: 0;left: 0;transform: translate(-50%,-50%);}
.ball-tr{top: 0;right: 0;transform: translate(50%,-50%);}
.ball-bl{bottom: 0;left: 0;transform: translate(-50%,50%);}
.ball-br{bottom: 0;right: 0;transform: translate(50%,50%);}
.ball-100{width: 100px;height: 100px;}
.ball-150{width: 150px;height: 150px;}
.ball-200{width: 200px;height: 200px;}

.process .line-box {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.process .line-box div{position: relative;width:calc(33% - 20px);}
.process .line-box div:before{
	position: absolute;content: '';
	right: -30px;
	top: 50%;
	height: 30px;
	width: 20px;
	transform: translate(0,-50%);
	background-image: url("https://www.scrm.tw/images/process/arrow.png");
	background-repeat: no-repeat;
	background-size: contain;
}
.process .line-box div:last-child:before{display: none;}
.process .flex{justify-content: space-between;}


.flex .col-md-6{margin-bottom: 30px;}
.flex .col-md-6:last-child{margin-bottom: 0px;}

@media (min-width: 768px) {
	.flex .col-md-6{margin-bottom: 0px;width: calc(50% - 15px);}
}
@media (max-width:991px){
	.process .steps a{width:calc(40%);}
	.process .steps .linearborder{width:100%;margin-bottom: 40px;}
	.process .steps a:nth-child(n+2) .linearborder{margin-bottom: 0px;}
	.process .steps:before{
		top: 80px;transform: none;
	}
		.process .steps:after {
			content: '';
			position: absolute;
			bottom: 80px;
			left: 0;
			width: 100%;
			height: 10px;
			background: linear-gradient(135deg, #4ab2d1 0%, #5768ca 50%, #9170d1 100%);
		}
}
@media (max-width:600px){
	.process .steps a{width:calc(50% - 15px);}
	.process .steps .linearborder p{font-size: 15px;}
	.process .steps .linearborder b{font-size: 26px;}
	.process .line-box div{width:calc(100% - 20px);max-width: 300px;margin:0 auto 40px;}
	.process .line-box div:before{
		right:50%;
		top: 100%;
		transform: translate(50%,5px)  rotate(90deg);
	}
}

/******FAQ*******/
.faqarea{
	text-align: left;
	width: calc(100% - 300px);
	margin-right: auto;
    max-width: 900px;
}
.faqarea h3{
	font-weight: 400;
    color: #fff;
    background: #AF9CFD;
    display: inline-block;
    font-size: 20px;
    padding: 10px 25px;
    margin: 0;
    border-radius: 15px 15px 0 0;
}
.faqarea .questions.linearborder{margin-bottom: 50px;}
.faqarea .questions.linearborder,.faqarea .questions.linearborder:before{
	border-radius: 0 10px 10px;
}
.faqarea .questions h5{margin-top:40px;}
.faqarea .questions h5:first-child{margin-top:10px;}
.faqarea .questions p{margin-left:25px;font-weight:400;}
.faqlist .linearborder{margin-bottom: 30px;}

@media (max-width: 800px) {
	.faqarea{width: calc(100% - 110px)}
	.faqarea .questions h5{font-size:18px;}
	.faqarea .questions p{margin-left:0px;font-size: 15px;}
	.function .fixarea.faqlist{width: 100px;}
	.faqlist .linearborder{padding: 10px;padding-bottom: 20px;}
	.function .fixarea.faqlist .lists {max-width: 80px;padding: 20px 10px;}
	.function .fixarea.faqlist .lists a {font-size: 13px;margin-top: 10px;word-wrap: break-word;}
	.function .fixarea.faqlist .lists img {top: -30px;}
}