@charset "utf-8";
/* CSS Document */


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: none;
}
::-webkit-scrollbar-thumb {
    background: #989794;
    border-radius: 5px;
}
			
img{
	width:100%;
		border-radius:10px;
}

a,a:hover,a:focus {text-decoration: none}
.row-fluid{margin: auto;max-width: 1200px}

.left0{margin-left: 0!important;}

/****bootstrap edit***/

 @media (min-width: 1200px) {
 .row {
margin-left: 0;
}
}
@media (max-width: 1199px) and (min-width: 1024px){
.row {
    margin-left: 0;
}}

/* Toggle Styles */

#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	width: 100%;
}

@media (max-width: 1023px) {
body {
	padding: 0px;
}
}
#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	left: 300px;
	width: 0;
	height: 100%;
	margin-left: -300px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: #f9f9f9;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	
}
#wrapper.toggled #sidebar-wrapper {
	width: 300px;
}
#page-content-wrapper {
	width: calc(100% - 30px);
	position: absolute;
	padding: 15px;
}
#page-content-wrapper h1.title {
	text-align: right;
	margin: 0 0 20px;
	font-size: 23px;
}
#wrapper.toggled #page-content-wrapper {
	position: absolute;
	margin-right: -300px;
}
.btn.btn-menu {
	position: absolute;
	top: 0;
	left: 0;
	background: #f5f5f5;
	color: #6e6e6e;
	border: 0;
	transition: all ease 0.5s;
	padding: 20px 25px;
	font-size: 25px;
	z-index: 90;
    margin: 0;
}
.btn.btn-menu:hover {
	background: #ffffff;
	color: #5f5f5f;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}

@media screen and (max-width:767px) {
.btn.btn-menu {
	position: fixed;
}
#wrapper.toggled .btn.btn-menu {
	padding-left: 325px;
	right: 0;
    text-align: right;
}
	#wrapper.toggled #sidebar-wrapper {
    width: calc(100% - 70px);
    left: 0;
    margin-left: 0;
}
}

/* Sidebar Styles */
			
.sidebar-nav {
	position: absolute;
	top: 0;
	width: 300px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
	    list-style: none;
}
.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #5f5f5f;
	transition: all ease 0.5s;
}
.sidebar-nav li a:hover {
	text-decoration: none;
	color: #bbb;
	
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
	text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
	font-size: 15px;
	line-height: 60px;
	margin: 0 50px;
}
.sidebar-nav > .sidebar-brand a {
	color: #484848;
}
.sidebar-nav > .sidebar-brand a:hover {
	color: #bbb;
	background: none;
}
.sidebar-nav>li {
    margin: 0 50px;
    border-bottom: 1px solid #ddd;
    text-indent: 10px;
}

.sidebar-nav li li:before {
    position: absolute;
    content: '';
    left: -10px;
    top: 50%;
    border-bottom: 1px solid #888;
    width: 7px;
}
.sidebar-nav li li {
    position: relative;
    line-height: 2.3;
}
.sidebar-nav li ul {
    margin-bottom: 5px;
}

.sidebar-nav .accordion{margin: 0}

.accordion>a:before {
    position: absolute;
    content: '';
    top: 12px;
    right: 10px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    padding: 4px;
    transform: rotate(45deg);
	transition: all 300ms ease;
}
.accordion>a.active:before {
    transform: rotate(-135deg);
    top: 18px;
}

.accordion>a {
    position: relative;
}
li.socialicon {
    margin: 20px 50px;
    border: none;
    text-align: center;
    text-indent: 0;
}

li.socialicon a {
    display: inline-block;
    max-width: 45px;
}

li.formbtn{border: 1px solid #ccc;
    text-align: center;
    margin: 20px 50px;
    font-weight: bold;
    padding: 10px;
    font-size: 18px;
	transition: all 500ms ease;
}

li.formbtn:hover{background: #888;}
li.formbtn:hover a{color:#fff}

@media(min-width:768px) {
#page-content-wrapper h1.title {
	text-align: center;
	margin: 0 0 20px;
	font-size: 28px;
}
#wrapper {
	padding-left: 300px;
	width: calc(100% - 300px)
}
#wrapper.toggled {
	padding-left: 0;
	width: 100%;
}
#sidebar-wrapper {
	width: 300px;
}
#wrapper.toggled #sidebar-wrapper {
	width: 0;
}
#page-content-wrapper {
	padding: 20px;
	position: relative;
	width: calc(100% - 40px)
}
#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
}
}

/********form*******/
.checkbox.inline+.checkbox.inline, .radio.inline+.radio.inline {
	margin-left: 0;
}
.checkbox.inline {
	padding-right: 10px;
	padding-bottom: 7px;
}
.checkbox.inline+.checkbox.inline, .radio.inline+.radio.inline {
	margin-left: 0;
}
.checkbox.inline, .radio.inline {
	padding-right: 10px;
	padding-bottom: 7px;
}
.formborder{margin:50px auto;
    padding: 20px;
    border-radius: 10px;
    background: #fdfbfa;
}
input#btnSubmit {
    border: none;
    background: #e6e2df;
    padding: 10px 40px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
}

r{color: red}
	input,select{ border-radius: 5px;border: 1px solid #eee}
	.form div1{width:40px;display: inline-block}
	.form div2{width:65px;display: inline-block}
	.pinfo{margin-top: 10px!important}
	.pinfo input{width:calc(100% - 70px);margin-left: 10px!important;}
	.pinfo.w4 input{width: calc(100% - 95px);margin-left: 10px!important;}
	.pinfo.w4 select{width: calc(100% - 80px);margin-left: 10px!important;}
	.optionbor {   
		border: 1px solid #eee;
		padding: 10px 15px;
		border-radius: 5px;
		margin-top: 5px;
	}
	.optionbor .smlt{background: #c6b9af;
    color: #FFFFFF;
    width: 52px;
    padding: 0 8px;
    border-radius: 5px;
    margin-top: 10px;
}

	.checkbox {  min-width: calc(25% - 39px);}
	@media screen and (max-width:500px){
		.checkbox {  min-width: calc(50% - 33px);}		
	}

.formborder h2{
	margin-bottom: 0;
    text-align: center;
	font-weight: bold!important;
    font-size: 25px;
}
.formborder{
	padding: 20px;
	box-shadow:0 0 2px rgb(0 0 0 / 30%);
	margin:20px auto 0;
	border-radius:5px;
	max-width:1160px;
	width: 90%;
	font-size: 13px;
}



/****** rwd change*******/
.mobilehide {display: block!important;}
.mobileshow {display: none!important;}
.mobileinlinehide {display: inline-block!important;}
.mobileinlineshow {	display: none!important;}

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



/*****slider******/
/********slider2*********/
/**/
#slide,#slide2 {
  position: relative;
  max-width: 100%;
}
#slide .sbox,#slide2 .sbox {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
}
#slide .sbox:first-child,#slide2 .sbox:first-child {
  position: static;
}
#slide .sbox.show,#slide2 .sbox.show  {
  opacity: 1;
  visibility: visible;
}
#slide .sbox img,#slide2 .sbox img{width:100%}
#slide .prev2, #slide .next2 ,#slide2 .prev2, #slide2 .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,#slide2 .prev2:hover, #slide2 .next2:hover {
  background-color: rgba(0, 0, 0, 0.24);
}
#slide .prev2:after, #slide .next2:after ,#slide2 .prev2:after, #slide2 .next2:after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#slide .prev2 ,#slide2 .prev2 {
  left: 0;
}
#slide .prev2:after ,#slide2 .prev2:after {
  transform: rotate(-135deg);
  margin-left: 4px;
}
#slide .next2 ,#slide2 .next2 {
  right: 0;
}
#slide .next2:after,#slide2 .next2:after {
  transform: rotate(45deg);
  margin-right: 4px;
}

/******footer*****/
.footer a,#footer-bottom a{color: unset;}
.footer branch{font-size:18px;margin-top:15px;display: block}
.footer .location{color: #7C6745;padding-left: 7px;display: inline-block}
.footer .flogo{text-align: center;margin-bottom: 20px; vertical-align: middle;display: inline-block;float: none}
.footer .fbranch{border-left: 1px solid;padding-left: 30px;vertical-align: middle;display: inline-block;float: none}
.footer .infobtn{background:#e6e2df;padding: 50px 20px;margin: 30px -20px;text-align: center}
.footer .infobtn a{display: block;font-size: 20px;padding:40px 0 20px;line-height: 3;color: #93857a;background: #fdfbfa;border-radius: 10px;transition: all ease 400ms;text-decoration:none}
.footer .infobtn i{font-size:40px}
.footer .infobtn a:hover{box-shadow:0 0 10px rgba(136,123,107,0.30);text-decoration:none}
.footer .infobtn .span4{ margin-bottom: 10px;}

/*****service*****/
.service .span3,.service2 .span4{margin-bottom: 20px;border-radius: 10px;}
.service .span3 img,.service2 .span4 img{border-radius:10px 10px  0 0px }
.service .span3>div,.service2 .span4>div{padding:10px 20px}
.service icon img{
	display: inline-block;
	max-width: calc(50% - 16px);
	border: 1px solid #aaa;
    border-radius: 0px!important;
    margin: 5px;
}
.service a:hover {
    text-decoration: none;
    cursor: pointer;
}

.service .accordion{
    margin-bottom: 10px;
}
.service .accordion>a {
    color: unset;
	display: block
}
.service .accordion>a:before {
    top: 50px;
	right: 10px;
}
.service .accordion>a.active:before {
    top: 50px;
}

@media (max-width:1024px){
.service icon img{max-width: calc(33% - 16px)}
}

.service2 {text-align: center}
.service2 .span4 {border: 1px solid#ddd;display: inline-block;float:none;vertical-align: top}
@media (min-width:1024px){
	.service2 .span4 {width:30%;}
}

/****topbanner***/
.banner{position: relative;}
.banner img{
	width: 100%;
	height: 350px;
	object-fit: cover;
	object-position: center;
}	
.banner div{
	position: absolute;
	color: #fff;
	top: 0;
	left: 0;    
	bottom: 0;
	right: 0;
    padding: 125px 10px;
    background: #7a63484f;
    text-align: center;border-radius:10px;
}


/*================================================== * 
Isotope & Masonry
* ===============================================*/
.isotope-item {
z-index:2
}
.isotope-hidden.isotope-item {
pointer-events:none;
z-index:1;
}
.isotope,.isotope .isotope-item {
/* change duration value to whatever you like */ -webkit-transition-duration:0.8s;
-moz-transition-duration:0.8s;
transition-duration:0.8s;
}
.isotope {
-webkit-transition-property:height,width;
-moz-transition-property:height,width;
transition-property:height,width;
}
.isotope .isotope-item {
-webkit-transition-property:-webkit-transform,opacity;
-moz-transition-property:-moz-transform,opacity;
transition-property:transform,opacity;
}
#content,#content2 ,#content3 ,#content4 ,#content5 ,#content6 ,#content7  ,#content8 ,#content9 {
max-width:1260px;
z-index:0;
	
overflow:hidden;
}
#filter ul {
margin-left:0px;
font-size:104%;
}
#filter {
margin-top:5px;
}
#filter ul li {
    list-style: none;
    margin-right: 10px;
    padding: 10px;
    margin-bottom: 10px;
    display: inline-block;
    border: 1px solid #ddd;
}
#filter ul li a {
color:#333;
margin-bottom:20px;
    transition: all 300ms;
}
#filter ul li a:hover,#filter ul li a:focus {
	color: #b59e7d ;
	text-decoration: none;
}
#filter ul li .selected {
color: #b59e7d !Important;
}
/* MASONRY */
.boxportfolio4 {
	float:left;
	display:inline-block;
	position:relative;
	z-index:0;
	width: calc(25% - 10px);
    margin-bottom: 10px;
    margin-left: 7px;
}

.boxportfolio3 {
float:left;
	display:inline-block;
	margin-bottom:20px;
position:relative;
z-index:0;
width:31.23%;
	margin: 5px 0px;
}

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

.boxportfolio2 {
float:left;
margin-left:20px;
width:47.90%;
display:inline-block;
margin-bottom:20px;
position:relative;
z-index:0;
}
.roll {
position:absolute;
font-size:30px;
width:100%;
margin:0px auto;
height:100%;
top:0px;
display:table-cell;
vertical-align:middle;

    background: #0707076b;
	
z-index:10;
opacity:0;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter:alpha(opacity=0);
zoom:1;
}
.boxcontainer {
	
    border-radius: 10px;
background:#fff;
font-size:13px;
text-align:center;
transition:border 500ms ease-out;
-webkit-transition:border 500ms ease-out;
-moz-transition:border 500ms ease-out;
-o-transition:border 500ms ease-out;
/*border-bottom:medium double #ddd;*/
position:relative;
overflow:hidden;
}
.boxcontainer:hover {
/*border-bottom:medium double #ccc;*/
}
.boxcontainer p {
margin-bottom:10px;
color:#666;
}
.boxcontainer h1 {
font-size:13px;
line-height:1;
font-weight:bold;
padding-left:10px;
padding-right:10px;
}
.boxcontainer h1 a {
padding-bottom:10px;
border-bottom:1px solid #eee;
display:block;
color:#666;
line-height:20px;
}
.boxcontainer img {
position:relative;
}
.wrapcaption {
position:absolute;
font-size:30px;
background:transparent;
width:100%;
margin:0px auto;
display:table-cell;
vertical-align:middle;
top:49%;
}
.wrapcaption a:hover,.wrapcaption a:focus {
    text-decoration: none;
}
.captionicons {
font-size:20px;
padding:13px;
background:#bca98d;
border-radius:50%;
color:#fff;
position:relative;
top:55%;
vertical-align:middle;
margin:0 auto;

}
.captionicons:hover {
opacity:0.9;
}
.boxportfolio2 .captionicons {
top:57%;
}

@media (max-width: 1060px) {
.boxportfolio2, .boxportfolio3, .boxportfolio4 {
       width: calc(50% - 10px);
	}
}

/*================================================== * 
Pricing Tables
* ===============================================*/
.vuzz-pricing-table {
list-style:none;
margin:0;
padding:0 0 30px 0;
font-size:16px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
transition:0.3s;
}
.vuzz-pricing-table div {
list-style:none
}
.vuzz-pricing-table>div {
border-top:#666;
list-style:none;
text-shadow:none;
margin-bottom:0;
box-shadow:0 0 10px rgba(0,0,0,0.05);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.05);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.05);
border:1px solid #e6e6e6;
	
border-top:#666 3px solid;
	 margin: 0 10px;
}
.vuzz-pricing.popular:hover {
    webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    z-index: 1;
}
.vuzz-pricing.popular {
	z-index:1;	
    webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    transition: all 300ms;
}
.vuzz-pricing-table .vuzz-pricing-header {
    text-align: center;
    padding: 5px 0 0px;
}


.vuzz-pricing-table .vuzz-pricing-header h3 {
color:#333;
font-family:"NotoSansCJKtc Regular","微軟正黑體", Arial, Helvetica, sans-serif;
margin:0;
    font-size: 28px;
    padding: 0 20px 5px 20px;
}

.vuzz-pricing-table .vuzz-pricing-cost {
color:#fff;
font-size:20px;
line-height:1.5;
padding:10px 0;
background:#666;
}
.vuzz-pricing-table .vuzz-pricing-per {
font-size:0.786em;
color:#fff;
background:#666;
padding-bottom:10px;
}
.vuzz-pricing-table .vuzz-pricing-content {
background:#fff;
font-size:0.857em;
text-align:center;
}
.vuzz-pricing-table .vuzz-pricing-content ul {
margin:0 !important;
list-style:none !important;
}
.vuzz-pricing-table .vuzz-pricing-content ul li {
margin:0 !important;
border-bottom:1px solid #eee;
list-style:none !important;
    padding: 5px 20px !important;
}
.vuzz-pricing-table .vuzz-pricing-content ul li:nth-child(2n+2) {
background:#F9F9F9
}
.vuzz-pricing-table .vuzz-pricing-button {
background:#fff;
text-align:center;
border-top:1px solid #fff;
padding:20px;
}
.vuzz-pricing-table .vuzz-pricing-button .vuzz-button {
float:none;
margin:0 auto;
background:#666;
color:#fff;
padding:7px 15px;
}

.vuzz-pricing-table .vuzz-pricing-cost {
background:#666;
    padding: 5px 0;
}
.vuzz-pricing-table .vuzz-pricing-per {
background:#666;
}
.vuzz-pricing-table>div.popular {
border-top:#e7402f 3px solid;
}
.popular .vuzz-pricing-cost {
background:#e7402f;
}
.popular .vuzz-pricing-per {
background:#e7402f;
}
.popular .vuzz-button {
background:#e7402f;
}
.popular .vuzz-button.buttonprice {
background: #e7402f;
}

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

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
}
/******btn*******/
.btn a {
	display: inline-block;
    padding: 10px 20px;
    color: #5f5f5f;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 300ms ease-in-out;
    border-radius: 5px;
}
.btn a:hover {
    text-decoration: none;
    border-color: #fff;
    color: #fff;
    background: #939393;
}
.btn {
    transition: all 500ms ease-in-out;
    border: 0px;
    padding: 0;
    margin: 5px;
    border-radius: 5px;
}