@import url("/css/font-awesome.css");
@import url("/css/common/reset.css");
@import url("/css/common/form.css");
@import url("/css/common/btn.css");
@import url("/css/common/column.css");
@import url("/css/common/article.css");
@import url("/css/common/list.css");
@import url("/css/common/text.css");
@import url("/css/common/table-from.css");
@import url("/css/common/table-text.css");
@import url("/css/idangerous.swiper.css");


/*@import url("/css/common/message.css");*/
/*@import url("/css/bootstrap.css");*/
/*@import url("/css/animate.css");*/
/*@import url("/css/hover.css");*/


/*------------------Material Icons-------------------*/

/*@import url("https://fonts.googleapis.com/icon?family=Material+Icons");*/


/*------------------思源黑體字-------------------*/
/*

@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
*/
/*{font-family:  'Noto Sans TC';}*/



html, body { width:100%; height: auto; }
html {/*overflow-X: hidden*/}
body { font-size:100%; background: #FFF; /*overflow-X: hidden ;*/font-family:"微軟正黑體" , Helvetica ; }

body > h1 {text-indent:-200%; white-space:nowrap; overflow:hidden; height:0;}

.wrap{width:100%;height:auto; min-height:500px;position:relative; line-height:1.6; font-size:1em}



a{ color: #333; vertical-align: inherit;}
a:hover{ text-decoration: underline; color:#02b9c4}

 canvas{max-width: 100%!important;width: 100%!important;height:auto !important;}


/*------------------------------------------------------- 單元名稱 ------------------------------------------------------- */

.unitName{ position:relative; width:100%; height:2.4em; line-height:2.4em; vertical-align:central;display:block; color:#FFFFFF; font-size:1.8em; font-weight:bold; letter-spacing:2px; background:#66CCFF;}
.unitName div {width:100%; max-width:1200px; margin:0 auto; padding-left:1.5em;}
.unitName div span{ font-family:Helvetica; font-size:.7em; font-weight:normal ; margin:0 10px}
.unitName div p{ display:inline-block;font-size:.9em ;font-weight:normal ;}


/*------------------------------------------------------- 單元路徑 ------------------------------------------------------- */


[class*="unitPath"]{ position:relative; width:100%; display:block;}
[class*="unitPath"] div { line-height:1.6;width:100%; max-width:1200px; margin:1em auto; padding-left:1em;font-size:1em;}
[class*="unitPath"] div span:before {content:"\f105";font-family: 'FontAwesome'; margin:0 .2em;}

/*----------內容小---------*/

.unitPath2 div {  padding-left:0;}

/*----------內容單純---------*/

.unitPath3 div { padding-left:8em;}




/*------------------------------------------------------- 其他設定 ------------------------------------------------------- */
.left{ float:left}
.right{ float:right}
img.w100% { width:100%; height: auto;}


/*----------------------------------  sprite-----------------------------------*/ 
	 
/*
.sprite{background: url(/images/common/sprite.png) no-repeat top left;}
.sprite-arr-phone{ background-position: 0 0; width: 20px; height: 13px; } 
.sprite-arr{ background-position: 0 -23px; width: 18px; height: 10px; } 
.sprite-contnen-arr-next{ background-position: 0 -43px; width: 30px; height: 60px; } 
.sprite-contnen-arr-prev{ background-position: 0 -113px; width: 30px; height: 60px; } 
*/


/*-----警告文字----*/
span.warn{ font-size:13px; color:#F01515; vertical-align:top; margin-bottom:10px;}


/*------------------------------------------------------- 社群(臉書 LINE)  ------------------------------------------------------- */

.community { width:96%; max-width:300px; margin:1.2em auto 0; text-align:center;}

.community div{ display:inline-block; vertical-align: top; margin:0 2px;}
.community div img{ margin:0 auto;}
.community div p{ font-size:12px;}
.community div p span{ font-weight:bold; font-family:Arial;}
.community .fb span{ color:#4d69a2;}
.community .line span{ color:#4bb000;}
.community .line p{ margin-top:5px;}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 文章設定 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


/*---------------------------------- 標題分隔 -----------------------------------*/
 ul.titleWrap { width:100%; display:table; margin:0 auto;}
 ul.titleWrap li{ display: table-cell; font-family:"微軟正黑體"; }
 ul.titleWrap li hr{  border-top: 1px  solid  #666 ; margin-bottom:5px; }
 ul.titleWrap li.title { color:#666; font-size:1.2em;font-weight: bold ;width:30%; text-align:center; letter-spacing:8px; }



/*---------------------------------- 日期設定 -----------------------------------*/

.time{font-size:12px; color:#999999; font-family:Helvetica; letter-spacing:1px;}


/*---------------------------------- 繼續閱讀 -----------------------------------*/

 a.more{ position:relative; z-index:99;  display:block;float:right; font-size:.95em;  color:#009297; text-decoration:none;  }
 a.more:before{ content:"繼續閱讀...";}
 a.more:hover{text-decoration: underline;}


/*---------------------------------- 搜尋文字變色 -----------------------------------*/

.item-content h3 span ,.item-content p span{ color:#F00;}



/*---------------------------------- 熱門推薦 -----------------------------------*/


.hot-offers {width:100%; margin:1em auto 3em;}

.hot-offers h3 { margin:1em 0; padding-left:.5em; font-weight:bold; letter-spacing:2px;}

.hot-offers ul{ width:100%; letter-spacing:-5px;}

.hot-offers ul li{ display:inline-block; width:23%;letter-spacing:0px; margin:0 1%; vertical-align:top; margin-bottom:1em;}


/*---------------------------------- step 步驟 -----------------------------------*/

.step { width:100%; margin:3em auto ; letter-spacing:-5px;}
.step li {/*width:33.3333%; */ display:inline-block;  }

.step li .circle { letter-spacing:0px;font-family:Helvetica; width:2em; height: 2em;line-height:1.6em; border-radius: 50%; font-size:1.8em; 
					text-align: center; margin: 0 auto; background: #fff; border: 5px solid #80ba41; color: #80ba41; z-index: 2; position: relative; }
.step li .circle.active {letter-spacing:0px; background-color: #80ba41; color: #fff; border: 5px solid #80ba41;}
.step li .line { width: 50%; height:0;border: 2px solid  #DBDBDB ;  display: block; position: relative; top: -2em; }
.step li .line.right { float: right; }
.step li .line.left { float: left; }
.step li .line.active { border-color: #80ba41; }

.step li p{ text-align:center; letter-spacing:2px ; font-size:.9em; color:#568b1c; font-weight:bold;}


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 文章縮圖設定 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


/*---------------------------------- 圖片滑過放大 -----------------------------------*/

.item-image { position:relative;  overflow:hidden; border:1px solid   #E3E3E3 ; background: #D4D4D4; }
.item-image img{ position:absolute;margin:auto;left:0;top:0;right:0;bottom:0; min-width:100%; height:auto; transition:all .2s linear; }
.item-image:hover img {transform:scale(1.15); transition:all .2s linear;/*-webkit-filter: blur(2px);*/}

/*---------------------------------- 變色與icon -----------------------------------*/
.item-image a { position:relative;display:block; width:100%; height:100%;}
.item-image a:before {content:""; display:block;position:absolute; top:0 ; left:0; width:100%; height:100%; background: rgba(0,0,0,.2); transition:all .2s linear; z-index:1;opacity:0;}
.item-image a:hover:before {opacity:1;transition:all .2s linear;}
.item-image a:after {content:"\f0c1";font-family: 'FontAwesome'; color:#FFFFFF;display:block; font-size:18px; text-align:center; width:40px; height:40px; line-height:40px; background: #F69; border-radius:50%; 
 margin:auto;position:absolute ;left:0;top:0;right:0;bottom:0;z-index:2;opacity:0;}
.item-image a:hover:after {opacity:1;transition:all .3s linear;}


/*--------- 獨立使用 ----------*/
.imgHover {  overflow:hidden; /*border:1px solid  #c2c2c2 ;*/ }
.imgHover img{ height:auto;transition:all .2s linear; }
.imgHover:hover img {transform:scale(1.15); transition:all .2s linear;-webkit-filter: blur(2px);}


/*----------------------------------------大小設定-----------------------------------------------*/

.item-image { height:130px;}
.item-image img{ width:100%; min-height:130px;}


@media screen and (max-width: 1280px) {
	
.item-image { height: 120px;}
.item-image img{  min-height:120px;}

}




@media screen and (max-width: 1030px) {
	
.item-image { height: 100px;}
.item-image img{ min-height:100px;}

[class*="unitPath"] div {  padding-left:.6em;}


}


@media screen and (max-width: 768px) {
	
.item-image {height: 80px;}
.item-image img{  min-height:80px;}

}



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

.item-image {height: auto; max-height:300px;}
.item-image img{  min-height:auto;position:relative; }






}











/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 通用滑動設定 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


 .swiper-container {
	margin:0 auto;
	position:relative;
	
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
 .swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}




@media screen and (max-width: 640px) {
	
.item-image { width:100%; height: auto;}
.item-image img{ width:100%; max-width:100%; height:auto;}

.item-image:hover img {transform: none; transition: none;-webkit-filter: none;}




.hot-offers ul li{  width:96%; }

[class*="unitName"]{  font-size:98%; }

[class*="unitPath"] { display:none; }

	








}
	 
	

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


.faceImg {  width: 360px; }

	 
}



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 配色設定 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.bgB2{ background:#249800;}





.img-response {
    max-width: 100%;
    height: auto;
}
.center {
    margin-left: auto;
    margin-right: auto;
}






.show{ display: block;}
.hide{ display: none;}

	@media screen and (max-width: 640px) {	
		.xs-show{ display:block !important;}
		.xs-hide{ display: none !important;}
		
	}
		


.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}