/* Browser Resets
*********************************/
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus  { outline:none; }
.slides, .flex-control-nav, .flex-direction-nav { margin:0; padding:0; list-style:none; }


/* FlexSlider Necessary Styles
*********************************/
.flexslider { margin:0; padding:0; position:relative; zoom:1; width:100%; overflow:hidden; }
.flexslider .slides > li {
	position:relative;
	display:none;
	overflow:hidden;
	
	-webkit-backface-visibility:hidden;
	   -moz-backface-visibility:hidden;
	    -ms-backface-visibility:hidden;
		    backface-visibility:hidden;
}
.flexslider .slides img { max-width:100%; max-height:100%; position:relative; display:block; margin:0 auto; }
.pages .mainVisual .flexslider .slides img { max-width:inherit; max-height:inherit; height:250px; }
.flex-pauseplay span { text-transform:capitalize; }

/* Clearfix for the .slides element */
.slides::after { display:block; clear:both; visibility:hidden; line-height:0; height:0; }
html[xmlns] .slides { display:block; }
* html .slides { height:1%; }

/* No JavaScript Fallback */
.no-js .slides > li:first-child { display:block; }


/* FlexSlider Default Theme
*********************************/
.flex-viewport {
	max-height:2000px;
	-webkit-transition:all 1s ease-in-out;
	   -moz-transition:all 1s ease-in-out;
	     -o-transition:all 1s ease-in-out;
	        transition:all 1s ease-in-out;
}
.loading .flex-viewport { max-height:300px; }
.flexslider .slides { zoom:1; }
.carousel li { margin-right:20px; }

/* Direction Nav */
.flex-direction-nav { *height:0; }
.flex-direction-nav a {
	display:block;
	width:44px;
	height:100%;/*原本是44px，因為要改成按整條　Gabby 20160203*/
	margin:0 0 0;/*改整條 拿掉top -22px carrie 20160416*/
	position:absolute;
	top:0;/*原本是50%，因為要改成按整條　Gabby  20160203*/
	z-index:10;
	overflow:hidden;
	opacity:0;
	cursor:pointer;
	color:rgba(0,0,0,0.8);
	
	-webkit-transition:all .3s ease-in-out;
	   -moz-transition:all .3s ease-in-out;
	     -o-transition:all .3s ease-in-out;
	        transition:all .3s ease-in-out;
}
.flex-direction-nav .flex-prev { left:-50px; background-image:url(../images/icon/arrow-left.png); background-repeat:no-repeat; background-position:center; }
.flex-direction-nav .flex-next { right:-50px; background-image:url(../images/icon/arrow-right.png); background-repeat:no-repeat; background-position:center; }
.flexslider:hover .flex-prev { opacity:0.7; left:22px; }
.flexslider:hover .flex-next { opacity:0.7; right:22px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity:1; }
.flex-direction-nav .flex-disabled { opacity:0!important; filter:alpha(opacity=0); cursor:default; }
.flex-direction-nav a::before { font-size:40rem; display:inline-block; }
.flex-direction-nav a.flex-next::before { }

/* carouselSlide - Direction Nav */
.carouselSlide .flex-direction-nav a {
	width:28px;
	height:28px;
	margin:0;
	top:50%;
	margin-top:-14px;
	opacity:0;
	background-color:#000000;
}
.carouselSlide .flex-direction-nav .flex-prev {
	left:0;
	background-image:url(../images/icon/prev.png);
	background-position:40% 55%;
	background-repeat:no-repeat;
	background-size:60%;
}
.carouselSlide .flex-direction-nav .flex-next {
	right:0px;
	background-image:url(../images/icon/next.png);
	background-position:60% 55%;
	background-repeat:no-repeat;
	background-size:60%;
}
.carouselSlide .flexslider:hover .flex-prev { opacity:1; left:0; }
.carouselSlide .flexslider:hover .flex-next { opacity:1; right:0px; }
.carouselSlide .flexslider:hover .flex-next:hover, .carouselSlide .flexslider:hover .flex-prev:hover { opacity:1; }


/* Pause/Play */
.flex-pauseplay a {
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	bottom:5px;
	left:10px;
	opacity:0.8;
	z-index:10;
	overflow:hidden;
	cursor:pointer;
	color:#000;
}
.flex-pauseplay a::before { font-size:20rem; display:inline-block; }
.flex-pauseplay a:hover { opacity:1; }
.flex-pauseplay a.flex-play::before {}

/* Control Nav */
.flex-control-nav { width:100%; position:absolute; bottom:12px; text-align:center; z-index:99; }
.flex-control-nav li { margin:0 5px; display:inline-block; zoom:1; *display:inline; overflow: hidden; }
.flex-control-paging li a {
	width:8px;
	height:8px;
	border-radius:50%;
	display:block;
	border:1px solid #ffffff;
	cursor:pointer;
	text-indent:-9999px;
	overflow: hidden;
}
.flex-control-paging li a:hover { background-color:#cccccc; }
.flex-control-paging li a.flex-active { background-color:#ffffff; cursor:default; }

.flex-control-thumbs { margin:5px 0 0; position:static; overflow:hidden; }
.flex-control-thumbs li { width:25%; float:left; margin:0; }
.flex-control-thumbs img { width:100%; display:block; opacity:.7; cursor:pointer; }
.flex-control-thumbs img:hover { opacity:1; }
.flex-control-thumbs .flex-active { opacity:1; cursor:default; }


/* thumbnailNav */
.thumbnailNav.carousel li { margin:6px 6px 6px 0; }
.thumbnailNav .flex-direction-nav a {
	width:28px;
	height:28px;
	margin:-14px 0 0;
	top:50%;
	opacity:1;
	background-color:#dedede;
}
.thumbnailNav .flex-direction-nav .flex-prev {
	left:0px;
	right:auto;
	background-image:url(../images/icon/prev.png);
	background-position:40% 55%;
	background-repeat:no-repeat;
	background-size:60%;
}
.thumbnailNav .flex-direction-nav .flex-next {
	right:0px;
	background-image:url(../images/icon/next.png);
	background-position:60% 55%;
	background-repeat:no-repeat;
	background-size:60%;
}
.thumbnailNav.flexslider:hover .flex-prev { opacity:1; left:0px; right:auto; }
.thumbnailNav.flexslider:hover .flex-next { opacity:1; right:0px; }
.thumbnailNav.flexslider:hover .flex-next:hover, .thumbnailNav.flexslider:hover .flex-prev:hover { opacity:1; }


/* fullSlide */
.fullSilde {
	position:relative;
	z-index:1;
	width:100%;
	overflow:hidden;
	min-height:150px;
}
.fullSilde .slides > li {
	height:400px;
	background-position:center center;
	background-repeat:no-repeat;
}
.fullSilde.smallImg .slides > li {
	height:250px;
}
.fullSilde.bigImg .slides > li {
	height:500px;
}


/**/
.visualContent {
	width:25%;
	right:0;
	bottom:0;
	position:absolute;
	padding:20px 30px;
	background-color:#ffffff;
	z-index:2;
}

.visualContent .name { font-size:16px; font-size:1.6rem; padding-bottom:10px; }
.visualContent p { color:#787878; font-size:13px; font-size:1.3rem; }

/* full height */
.full .visualContent {
	height:100%;
	top:0;
	bottom:auto;
}

/* bg dark */
.dark .visualContent {
	background-color:#000000;
}
.dark .visualContent .name { color:#ffffff; }
.dark .visualContent p { color:#aaaaaa; }

/* bg transparent*/
.transparent .visualContent {
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#CCFFFFFF') !important;
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#CCFFFFFF') !important;
	background-color:rgba(255,255,255,0.8) !important;
}

.transparent.dark .visualContent {
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000') !important;
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000') !important;
	background-color:rgba(0,0,0,0.8) !important;
}

/* bg rotate */
.rotate .visualContent::after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	transform: perspective(1px) rotate(5deg);
	background-color:#ffffff;
	bottom:-15px;
	left:-22px;
	z-index:-1;
	visibility:visible;
	overflow:visible;
}
.rotate.dark .visualContent::after {
	background-color:#000000;
}
.rotate.both .slides > li::before {
	content:'';
	display:block;
	width:100%;
	height:200%;
	position:absolute;
	transform: perspective(1px) rotate(5deg);
	background-color:#ffffff;
	top:-45px;
	right:100%;
	z-index:1;
}
.rotate.dark.both .slides > li::before {
	background-color:#000000;
}

/* bubble */
.bubble .visualContent::before {
	border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 20px 20px 20px 10px;
	
    content: "";
    display: block;
	
    position: absolute;
    left: -23px;
    top: 20px;
	
    height: 0;
	width: 0;
    z-index: -1;
}
.top.bubble .visualContent::before {
	border-color: transparent transparent transparent #ffffff;
    border-width: 20px 10px 20px 20px;
	
    left:auto;
	right: -23px;
    top:auto;
	bottom:30px;
}
.bottom.bubble .visualContent::before {
	border-color: transparent transparent transparent #ffffff;
    border-width: 20px 10px 20px 20px;
	
    left:auto;
	right: -23px;
}
.right.bubble .visualContent::before {
	border-color: transparent #ffffff transparent transparent;
    border-width: 20px 20px 20px 10px;
	
    left:-23px;
	right:auto;
}
.left.bubble .visualContent::before {
	border-color: transparent transparent transparent #ffffff;
    border-width: 20px 10px 20px 20px;
	
    left:auto;
	right: -23px;
}

.bubble.dark .visualContent::before {
	border-color: transparent #000000 transparent transparent;
}
.top.bubble.dark .visualContent::before {
	border-color: transparent transparent transparent #000000;
}
.bottom.bubble.dark .visualContent::before {
	border-color: transparent transparent transparent #000000;
}
.right.bubble.dark .visualContent::before {
	border-color: transparent #000000 transparent transparent;
}
.left.bubble.dark .visualContent::before {
	border-color: transparent transparent transparent #000000;
}

/* visualConten position */
.top .visualContent { right:auto; bottom:auto; top:10px; }
.bottom .visualContent { right:auto; bottom:10px; }
.left .visualContent { right:auto; left:10px; }
.right .visualContent { right:10px; }

/* hover */
.hover .visualContent {
	width:96%;
	right:0;
	bottom:0;
	position:absolute;
	padding:10px 2%;
	opacity:0;
	
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');
	background:rgba(0,0,0,0.6);
	
	z-index:2;
	
	-webkit-transition:all .5s ease-in-out;
	   -moz-transition:all .5s ease-in-out;
	     -o-transition:all .5s ease-in-out;
	        transition:all .5s ease-in-out;
}

.hover li:hover .visualContent { opacity:1; }

.hover .visualContent h2 { font-size:16px; font-size:1.6rem; margin-bottom:1px; color:#ffffff; }
.hover .visualContent .name { font-size:13px; font-size:1.3rem; padding-bottom:0; color:#efefef; }
.hover .visualContent p { color:#dddddd; font-size:12px; font-size:1.2rem; }


/*responsive*/
@media screen and (max-width : 1280px) {
}

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

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

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

@media screen and (max-width : 680px) {
	.hover li .visualContent { display:none; }
}

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

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

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

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

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

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

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:portrait)  {/*直*/
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:landscape) {/*橫*/
}


/*
==============================================
   Chrome Hack
==============================================
*/
@media screen and (-webkit-min-device-pixel-ratio:0){  }  


/*
==============================================
   IE11 Hack
==============================================
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}