/* ==========================================================================
   jquery.smartmenus.bootstrap
   jquery.bxslider
   slick
   #my-shuffle 
   cloud-zoom.css
 ==========================================================================*/

.navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow {
	position:static;
	margin-top:0;
	margin-right:0;
	margin-left: 3px;
	display:inline-block;
	background: url(../images/common/down.png) no-repeat;
	/*width:15px;*/
	height:17px;
	overflow:hidden;
	vertical-align:middle;
}
.navbar-fixed-bottom .sub-arrow {
	margin-top:-5px;
	border-top:4px dashed transparent;
	border-bottom:4px solid;
}
.navbar-nav ul .sub-arrow {
	position:absolute;
	right:0;
	margin-top:6px;
	margin-right:15px;
	border-top:4px dashed transparent;
	border-bottom:4px dashed transparent;
	border-left:4px solid;
}
.navbar-nav ul a.has-submenu {
	padding-right:30px;
}
/* scrolling arrows for tall menus */
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
	position:absolute;
	display:none;
	visibility:hidden;
	height:20px;
	overflow:hidden;
	text-align:center;
}
.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {
	position:absolute;
	top:-2px;
	left:50%;
	margin-left:-8px;
	width:0;
	height:0;
	overflow:hidden;
	border-top:7px dashed transparent;
	border-right:7px dashed transparent;
	border-bottom:7px solid;
	border-left:7px dashed transparent;
}
.navbar-nav span.scroll-down-arrow {
	top:6px;
	border-top:7px solid;
	border-right:7px dashed transparent;
	border-bottom:7px dashed transparent;
	border-left:7px dashed transparent;
}
/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */
.navbar-nav .collapsible ul .dropdown-menu > li > a,
.navbar-nav .collapsible ul .dropdown-menu .dropdown-header {
	padding-left:35px;
}
.navbar-nav .collapsible ul ul .dropdown-menu > li > a,
.navbar-nav .collapsible ul ul .dropdown-menu .dropdown-header {
	padding-left:45px;
}
.navbar-nav .collapsible ul ul ul .dropdown-menu > li > a,
.navbar-nav .collapsible ul ul ul .dropdown-menu .dropdown-header {
	padding-left:55px;
}
.navbar-nav .collapsible ul ul ul ul .dropdown-menu > li > a,
.navbar-nav .collapsible ul ul ul ul .dropdown-menu .dropdown-header {
	padding-left:65px;
}
/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */
.navbar-nav .dropdown-menu > li > a {
	white-space:normal;
}
.navbar-nav ul.sm-nowrap > li > a {
	white-space:nowrap;
	outline: none;
}
/* fix .navbar-right subs alignment */
.navbar-right ul.dropdown-menu {
	left:0;
	right:auto;
}
/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
.navbar-nav .collapsible ul {display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
.navbar-nav .collapsible ul.sm-nowrap > li > a {
	white-space:normal;
	outline: none;
	}
.navbar-nav .collapsible iframe{display:none;}



 /* ==========================================================================
  #Media   [.grid ]
  ==========================================================================*/ 

.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	cursor: pointer;

	
}

.grid figure a{
	display: inline-block;
}

.grid figure img {
	position: relative;
	display: block;
	opacity: 1;
	z-index: 50;


}



 figure .figcaption {
	color: #fff;
	font-size: 1em;
	text-align: center;

	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99;	
}

.grid figure .figcaption::before,
.grid figure .figcaption::after {
	pointer-events: none;
}



 /* ==========================================================================
  	jquery.bxslider
  ==========================================================================*/ 
  /**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 10px;
	padding: 0;
	*zoom: 1;
	width:1000px;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	
	border:  0;
	left: 0px;
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom:0px;
	width: 100%;
}


/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	/*background: url(../images/common/loading_01.gif) no-repeat; */
	width:32px; height:32px; 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #eee;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #333;
}




/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	/*background: url(images/controls.png) no-repeat 0 -32px;*/
}

.bx-wrapper .bx-next {
	right: 10px;
	/*background: url(images/controls.png) no-repeat -43px -32px;*/
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 100;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}



/* ==========================================================================
    slick
 ==========================================================================*/
/* 其他 */
.content{margin:auto;padding:20px;width:60%;}
.content h3{background:#3498db;color:#fff;font-size:36px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center;}
/* 基本------- */
.slick-wp { padding:0; margin:0; position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; -webkit-tap-highlight-color: transparent; }
.slick-inner { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-inner:focus { outline: none; }
.slick-loading .slick-inner { background: #ccc url("../images/common/loading_01.gif") center center no-repeat; }
.slick-inner.dragging { cursor: pointer; cursor: hand; }

.slick-wp .slick-inner, 
.slick-innerWp, 
.slick-list, 
.slick-list img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
/*包圍的框*/
.slick-innerWp { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-innerWp:before, .slick-innerWp:after { content: ""; display: table; }
.slick-innerWp:after { clear: both; }
.slick-loading .slick-innerWp { visibility: hidden; }

.slick-list { float: left; height: 100%; min-height: 1px; display: none; position:relative; }
.slick-initialized .slick-list { display: block; transition: all 0s ease-out;}
.slick-loading .slick-list { visibility: hidden; }
.slick-vertical .slick-list { display: block; height: auto; border: 1px solid transparent; }

/* 左右箭頭*/
.slick-prev, .slick-next { z-index:99;  position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; color:#000000; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; background-color:#000000;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none;  }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.7; }
.slick-prev:before, .slick-next:before {  font-size: 20px; line-height: 1; color: white; }
.slick-prev { left: -25px; }
.slick-prev:before { content: " "; }
.slick-next { right: -25px; }
.slick-next:before { content: " "; }

/* Dots 圈圈 */
.slick-list {  }
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; 
		background: #333; 
		display: block; height: 20px; width: 20px; 
		outline: none; line-height: 0; 
		font-size: 1px; color: transparent; 
		padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: " "; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }

/* 其他------- */
/*lazy 圖片等比縮放*/
.slick-list .image img { display: block; }
.slick-list.slick-loading .image img { display: none; }
.slick-list.dragging .image img { pointer-events: none; }

.slick-list .image{}
.slick-list .image img{display:block;width:100%;}
.slick-list .image img.slick-loading{border:0 }
.slick-listr{margin:30px auto 50px;}

/*Fade 大圖等比縮放*/
.imgfade{
	width:60%;
	margin:auto;
}
/*Fade2 大圖等比縮放*/
.imgfadeResize{
	width:60%;
	margin:auto;
}
.imgfadeResize .slick-list{
	height:300px;
}
/*Fade2 大圖等比縮放*/
.imgfadeResizeA{
	width:60%;
	margin:auto;
}
.imgfadeResizeA .slick-list a{
	height:300px;
	position:relative;
	display:block;
}


/* ==========================================================================
     #my-shuffle
 ==========================================================================*/

 #my-shuffle {
    counter-reset: boxes;
    width:100%;
    margin-bottom: 40px;
  }

  #my-shuffle .box {
    position: relative;
    width: 32%;
    margin-left: 1%;
    height: 100px;
   
    float: left;
    /*background: #E74C3C;*/
    counter-increment: boxes;
  }



/*=============================================================================
* jquery - slider 產品圖片
=============================================================================*/

/*大圖*/
#block {
	max-width: 100%;
	height: 480px;
	overflow: hidden;
	position:relative;
	margin-top: 0px;
}

#showbox {
	width: 400px;
	height: 480px;
	position: relative;
	overflow: hidden; float: left;
}

#block .bigImg {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

#block .bigImg.no{
	z-index: 0;

	opacity: 0;
	filter: alpha(opacity=00);
}

#block .bigImg.active{
	z-index: 1;

	opacity: 1;
	filter: alpha(opacity=100);
	transition: all 0.2s ease-out;
}


/*縮小圖*/
#thumbs {
	
}

#thumbs {
	cursor: pointer;
	position: relative;
}

#thumbs img {
	/*float: left;
	width:64px; height:64px; overflow:hidden;*/
}

#thumbs .imgThu{
	position: relative;
}

#thumbs .Mask{
	position: absolute;
	top: 0px;
	left: 0px;
	border: 4px solid transparent;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 200;
}


#thumbs .imgThu.active .Mask,
#thumbs .imgThu:hover .Mask{
	border: 4px solid #64CCC9;
	 transition: all 0.3s ease-out;
}

 
 /* ==========================================================================
  cloud-zoom.css
 ==========================================================================*/


/* 移動框 */
.cloud-zoom-lens {
	border: 0px solid #64CCC9;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;
	cursor:url(../images/p_details/big.cur), auto;;
}


/* This is for the title text. */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:10px;
	top:0px;
}

/* cloud zoom wrapper styles */
.cloud-zoom-wrap {
    top:0;
    z-index:99;
    position:relative;
}

.cloud-zoom-wrap img{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* 大圖設定 */
.cloud-zoom-big {
	border:0px solid #64CCC9;
	/*background-color: #eee;*/
	background-color: #fff;
	overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
	color:white;
	background:#222;
	padding:3px;
	border:1px solid #000;
}



/*縮小圖*/
.cloud-zoom-gallery {
	display: inline-block;
	text-align: center;
	border-right: 1px solid #ededed;
	position: relative;
}

.cloud-zoom-gallery:first-child {
	border-left: 1px solid #ededed;
}

.cloud-zoom-gallery .Mask{
	position: absolute;
	top: 0px;
	left: 0px;
	border: 4px solid transparent;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 199;
}


.cloud-zoom-gallery.active .Mask,
.cloud-zoom-gallery:hover .Mask {
	border: 4px solid #64CCC9;
}