@charset "UTF-8";

@media screen and (min-width: 768px) {
  .navbar-nav {
    float: none;
    margin: 0;
	padding-bottom: 0px;
  }
  .navbar-nav > li {
    float: none;
  }
}

@media screen and (min-width: 992px) {
  .navbar-nav {
    float: left;
    margin: 0;
	padding-bottom: 0px;
  }
  .navbar-nav > li {
    float: left;
  }
   .navbar-toggle {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .inner .col-sm-2 {
    float: none;
    width: 100%;
	  }

  .inner .col-sm-10 {
    float: none;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
  }
	
  .visible-xs {
    display: block !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-nav > li > a {
    padding: 10px 15px 10px 15px;
	font-size: 16px;
	line-height: 30px;
  }
  .navbar-nav > li > a > i {
    padding-right: 10px;
	font-size: 20px;
	line-height: 30px;
  }
}


@media screen and (max-width: 991px) {	
  body { 
    padding-top:50px; 
  }

  .inner { padding: 0px 0 80px 0;}
  .main-content  { padding: 0 0 0 0px;}
  .main-content-alone  { padding: 0 0 0 0px;}
  .col-sm-10.col-sm-push-1 {left: 0;}
	
  .header-top.hidden-xs,
  .header-inner.hidden-xs,
  footer.hidden-xs,
  .sub-nav-header.hidden-xs,
  .breadcrumb.hidden-xs,
  .page-header.hidden-xs {
    display: none;
  }
	
  .page-header.mt0, .page-header.xs-mt0  { margin-top: 0px;}
	
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0px;
    margin-left: 0px;
  }
  .navbar .container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
  }

  .header-bottom {
    height: 50px;
    background-color: #4c4c4c;
  }

    .navbar {
        height:50px;
    }
}




/* input-group-inline **********************************************************/
.input-group-inline .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	border-radius: 0px;		
	border-color: #CECECE;
	border-right: 0px;	
}

/* Tabs ************************************************************************/

@media screen and (min-width: 768px) and (max-width: 991px) {
	.nav-tabs.nav-justified > li {
		display: table-cell;
		width: 1%;
	}
	.nav-tabs.nav-justified > li > a {
	  text-align: center;
	  padding: 5px 0 10px 0;
	}
	.nav-tabs.nav-justified > li > a > i {
	   display: none;
	}
}

@media screen and (min-width: 992px) {
	.nav-tabs.nav-justified > li {
	  display:block;
	  width: 100%;
	}
	.nav-tabs.nav-justified > li > a {
	  text-align: left;
	  padding: 20px 0 10px 0;
	}
	.nav-tabs.nav-justified > li > a > i {
	  display: inline;	
	  margin-right: 5px;
	  color: #E5E5E5;
	}
	.nav-tabs.nav-justified > li > a:hover > i,
	.nav-tabs.nav-justified > li > a:focus > i,
	.nav-tabs.nav-justified > .active > a > i,
	.nav-tabs.nav-justified > .active > a:hover > i,
	.nav-tabs.nav-justified > .active > a:focus > i{
	  color: #A6D107;
	}
}



/* nav-left & nav-right for mobile phone ************************************/
@media screen and (max-width:991px){
	.mobile-phone-navbar{
		position: fixed;
		background-color: #4c4c4c; /* 黑底 */
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		width: 35%;
		top: 50px;
		z-index: 201;
		height: calc(100vh - 50px);
		transition: 1s;
					border: 0px solid #F0F; 
	}
	.mobile-phone-navbar .navbar-nav{
		margin: 0;
		width: 100%;
				border: 0px solid #F0F;
	}
	.mobile-phone-navbar .navbar-form{
		margin: 0;
	}
	.leftIn{
		left: -100%;
	}
	.rightIn{
		right: -100%;
	}
	.mobile-phone-navbar.leftIn.open{
		left: 0;
	}
	.mobile-phone-navbar.rightIn.open{
		right: 0;
	}
	
	.mobile-phone-navbar .dropdown-menu {
		border: 0px solid #F0F;
	}
	
	/* nav-right ------*/
	.navbar-toggle.nav-right {
		position:absolute;
		top: 5px;
		right: 15px;
		margin: 0;
		padding: 0;
			border: 0px solid #F0F;
	}
	.nav-right i {
		font-size: 30px;
		color: #A6D107;
	}
	.navbar-toggle.nav-right:hover i,
	.navbar-toggle.nav-right:focus i {
		color: #CECECE;
	}
}

@media screen and (max-width:767px){
	.mobile-phone-navbar{
		width: 70%;
	}
}





/* fixed icon button  *************************************************************************************/
.swiper-slide.display {
  display: inline-block;
}

.fixed-icon-btn{
	width:100%;
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	overflow:hidden;
	/*min-width:320px;*/
	position: fixed;
	bottom: 0;
	z-index: 100;
			border: 0px solid #F0F;
}

.fixed-icon-btn ul {
	list-style:none;
	width:100%;
	margin: 0;
	padding: 0;
	z-index: 100;
  border: 0px solid #F0F;
}

.fixed-icon-btn ul {
	display: inline-block;
  /* position: absolute; */
  vertical-align: bottom;
  /* margin-right: -4px; */
}

.fixed-icon-btn > ul {
  position: absolute;
  bottom: 0;
} 

.fixed-icon-btn ul:nth-child(2) {
  /*-webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);*/
}

@media screen and (min-width: 992px) {
  .fixed-icon-btn ul:nth-child(2) {
    /*-webkit-transform: translate(0, 0);
    transform: translate(0, 0);*/
  }

  .fixed-icon-btn > ul {
    position: relative;
    bottom: 0;
  } 
}

.fixed-icon-btn .arrow.ab {
  z-index: 101;
  position: fixed;
  width: 30px;
  height: 30px;
  margin-bottom: 15px;
  font-size: 50px;
  font-family: serif;
  line-height: 1;
  filter: alpha(opacity=50);
  outline: 0;
  opacity: .5;
  color: red;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.ab-left {
  left: 0;
}

.ab-right {
  right: 0;
}

.ab-left.icon-prev:before {
  content: '\2039';
}

.ab-right.icon-next:before {
  content: '\203a';
}


.fixed-icon-btn ul li{
	float:left;
	width: 25%;
	border: 1px solid #FFFFFF;	
	 /*  height:50%;  不寫height或寫100%代表跟寬度一樣大，形成正方形 */	
}

.fixed-icon-btn ul li a{
	display:block;
	width:100%; /* 百分比是會去抓取上一層的寬度來計算，所以上一層 li 一定也要有寬度  */
	height:0;
	padding-bottom:70%;  /*寫100%代表跟寬度一樣大，形成正方形 */
	text-decoration:none;
	font-size:11px;
	color:#FFFFFF;
	font-weight: 700;
	text-transform:uppercase;
	box-sizing:border-box;
	background-size:56% 80%; /*把背景圖縮小一點點*/
	background-position:center top; /*背景圖靠上*/
	background-repeat:no-repeat;
	position:relative;
}

.fixed-icon-btn ul li a span{
	display:block; /*span一定要加display:block*/
	width:100%;
	position:absolute;
	bottom:8%;
	text-align:center;
		border: 0px solid #F0F;
}

.fixed-icon-btn ul li a{
	background-image:url(../images/btn/fixed-icon/home.png);
	background-color: #689D4D;
}
.fixed-icon-btn ul li a.fixed-bg-01{ background-color: #A6D107;}
.fixed-icon-btn ul li a.fixed-bg-02{ background-color: #689D4D;}
.fixed-icon-btn ul li a.fixed-bg-03{ background-color: #86B171;}
.fixed-icon-btn ul li a.fixed-bg-04{ background-color: #4E7639;}

.fixed-icon-btn ul li a:hover,
.fixed-icon-btn ul li a:focus {
	color:#FFFFFF;
	background-color: #FF7F7D;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.fixed-icon-btn ul li a{
		padding-bottom:40%;
		font-size:16px;
		background-size:28% 70%; 
	}

	.fixed-icon-btn ul li a span{
		bottom:10%;
	}
}

@media screen and (min-width: 992px) {
    .fixed-icon-btn {
        display: none;
        width: 80px;
        height: 640px;
        position: fixed;
        right: 0%;
        top: 150px;
        border: 0px solid #F0F;
    }

    .fixed-icon-btn-right {
        display: inline-block;
    }

	.fixed-icon-btn ul{
		width: 100%;
	}

	.fixed-icon-btn ul li{
		float:none;
		width: 100%;
		border: 1px solid #FFFFFF;	
		border-bottom: none;
	}
	.fixed-icon-btn ul li:last-child{	
		border-bottom: 1px solid #FFFFFF;
	}
	
	.fixed-icon-btn ul li a{
		padding-bottom:100%;  /*寫100%代表跟寬度一樣大，形成正方形 */
		font-size:12px;
		background-size:70% 70%; /*把背景圖縮小一點點*/
	}

	.fixed-icon-btn ul li a span{
		bottom:10%;
	}
}

@media screen and (min-width: 1200px) {
	.fixed-icon-btn{
		right: 3%;
	}
	.fixed-icon-btn ul li a{
		padding-bottom:100%;  /*寫100%代表跟寬度一樣大，形成正方形 */
		font-size:12px;
		background-size:70% 70%; /*把背景圖縮小一點點*/
	}

	.fixed-icon-btn ul li a span{
		bottom:10%;
	}
}


/* Portrait 手機拿直*/
@media screen and (max-device-width: 991px) and (orientation:portrait) {
	.fixed-icon-btn ul li{
		width:25%;
	}
}
@media screen and (min-width: 992px) and (orientation:portrait) {
	.fixed-icon-btn ul li{
		width:100%;
	}
}

/* Landscape 手機拿橫 */
@media screen and (max-device-width: 767px) and (orientation: landscape) {
	.fixed-icon-btn ul li{
		width:25%;
	}
	.fixed-icon-btn ul li a{
		padding-bottom:50%;  /*寫100%代表跟寬度一樣大，形成正方形 */
		font-size:15px;
		background-size:35% 70%; /*把背景圖縮小一點點*/
	}

	.fixed-icon-btn ul li a span{
		bottom:10%;
	}
}