@charset "utf-8";

/* ======================================
	00. reset
====================================== */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}

/* begin  reset*/
html, body, div, ul, ol, li, form, input, button,textarea, blockquote,p{
  margin:0;
  padding:0;
}
img{ border:0; }
:focus { outline:0; }
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:100%; font-weight:100; }

input, button, textarea,select, optgroup, option {
  font-family:inherit;
  font-size:inherit;
  font-style:inherit;
  font-weight:inherit;
  /*line-height:inherit;*/ /*在ie會有問題*/
}

input, button, textarea, select { *font-size:100%; } /*purpose To enable resizing for IE */
ol, ul, li {list-style:none;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display:block;}

/* <<=== end reset==>> */




/* 修正粗體 (碧筵綰在粗體時會隔很遠) */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}



/* Basic Elements：定義基本元素的樣式 */
html , body{ height:100%; min-height:100%; width:100%; }

body{
	background:#FFF;
	font-family:"Microsoft JhengHei","微軟正黑體修正","微軟正黑體",sans-serif;
	
	font-size:16px;
	line-height:1.5;
	letter-spacing:1px;
}


/*a 鏈結字*/
a , a:hover, a:focus{ text-decoration:none; }
a:focus { outline:none; }

.wrapper{ 
	background:#ffffff;
	height:auto;
	width:100%;
	min-height:100%;
}

.container{
	position:relative;
	margin:0 auto;
	padding:0;
	width:90%;
	max-width:1200px;
}
.container:before, .container:after{ display:table; content:" " }
.container:after{ clear:both }

@media (max-width:992px) {
	.container{ width:96%; }
}




/*###### gbe01-方形圖設定*/
.item-thumb-frame { position:relative; display:block; width:100%; overflow:hidden; }
.item-thumb{
	display:block;
	max-width:100%;
	padding-bottom:100%;
	
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}




/*###### gbe01-編輯器區塊*/
.editor-area{
	margin:5px 0; 
	word-wrap: break-word; /*只對英文起作用，以單詞作為換行依據*/
}
.editor-area img{ max-width:100%; height:auto; }
.editor-area iframe{ max-width:100%; }

.editor-area a , .editor-area a:hover, .editor-area a:focus{ text-decoration:underline; }

.editor-area ul , .editor-area ol{
	display:block;
	list-style-position:inside; 
	margin:1em 0;
	padding-left:30px;
}
.editor-area ul { list-style-type:disc; }
.editor-area ol { list-style-type:decimal; }

.editor-area ul ul, .editor-area ol ul,
.editor-area ol ol, .editor-area ul ol{
	list-style-position:inside; 
	margin-left:15px; 
}
.editor-area ul ul, .editor-area ol ul{  list-style-type:circle; }
.editor-area ol ol, .editor-area ul ol{ list-style-type:lower-latin;  }

.editor-area li { display:list-item; list-style:inherit; }

.editor-area h1, .editor-area h2,
.editor-area h3, .editor-area h4,
.editor-area h5, .editor-area h6 { font-weight:600; }
.editor-area h1{ font-size:2em; margin:0.67em 0; }
.editor-area h2{ font-size:1.5em; margin:0.83em 0; }
.editor-area h3{ font-size:1.17em; margin:1em 0; }
.editor-area h4{ font-size:1em; margin:1.33em 0; }
.editor-area h5{ font-size:0.83em; margin:1.67em 0; }
.editor-area h6{ font-size:0.67em; margin:2.33em 0; }





/*###### gbe01-欄模組-有區間*/
.cols-group{}
.full-cols-list , .two-cols-list , .three-cols-list , 
.four-cols-list , .five-cols-list , .six-cols-list{ display:flex; flex-wrap:wrap; margin:0 -20px; }

.cols-group > li{ margin-bottom:40px; }
.full-cols-list , .two-cols-list > li , .three-cols-list > li , .four-cols-list > li , 
.five-cols-list > li , .six-cols-list > li{ padding:0 20px; }

.full-cols-list > li{ width:100%; }
.two-cols-list > li{ width:calc( 100% / 2 ); }
.three-cols-list > li{ width:calc( 100% / 3 ); }
.four-cols-list > li{ width:calc( 100% / 4 ); }
.five-cols-list > li{ width:calc( 100% / 5 ); }
.six-cols-list > li{ width:calc( 100% / 6 ); }

@media (max-width:992px) {
	.four-cols-list > li{ width:calc( 100% / 3 ); }
	.five-cols-list > li{ width:calc( 100% / 3 ); }
	.six-cols-list > li{ width:calc( 100% / 3 ); }
}
@media (max-width:768px) {
	.two-cols-list > li{ width:calc( 100% / 2 ); }
	.three-cols-list > li{ width:calc( 100% / 2 ); }
	.four-cols-list > li{ width:calc( 100% / 2 ); }
	.five-cols-list > li{ width:calc( 100% / 2 ); }
	.six-cols-list > li{ width:calc( 100% / 2 ); }
}
@media (max-width:640px) {
	.cols-group{}
	.full-cols-list , .two-cols-list , .three-cols-list , 
	.four-cols-list , .five-cols-list , .six-cols-list{ margin-left:-10px; margin-right:-10px; }

	.two-cols-list > li , .three-cols-list > li , 
	.four-cols-list > li , .five-cols-list > li , 
	.six-cols-list > li{ padding-left:10px; padding-right:10px; margin-bottom:30px; }

	.two-cols-list > li{ width:100%; }
	.three-cols-list > li{ width:100%; }
	.four-cols-list > li{ width:100%; }
	.five-cols-list > li{ width:100%; }
	.six-cols-list > li{ width:100%; }
}




.fancybox-zoom{ cursor:zoom-in; }







/*========== 表單基本設定 ==========*/
input , select , textarea{
    padding:6px 10px;
    font-size:14px;
    line-height:1.2;
    color:#333;
    background-color:#fff;
    border:1px solid #ccc;
	vertical-align:middle;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input::-webkit-input-placeholder , select::-webkit-input-placeholder , 
textarea::-webkit-input-placeholder{ color:rgba(51,51,51, 0.5); font-size:0.95em;}

input::-moz-placeholder , select::-moz-placeholder , 
textarea::-moz-placeholder { color:rgba(51,51,51, 0.5); font-size:0.95em;}

input::-ms-input-placeholder , select::-ms-input-placeholder , 
textarea::-ms-input-placeholder { color:rgba(51,51,51, 0.5); font-size:0.95em;}

input::-moz-placeholder , select::-moz-placeholder , 
textarea::-moz-placeholder { color:rgba(51,51,51, 0.5); font-size:0.95em;}

select{
	padding-right:25px;
	appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
	background:url(../images/selt-arrow.png) no-repeat scroll right 5px center transparent;
}
select::-ms-expand { display:none; }
input:focus , select:focus{ 
	border-color:rgba(13,105,231, 0.2);
    box-shadow:0 1px 1px rgba(13,105,231, 0.075) inset, 0 0 5px rgba(13,105,231, 0.1);
    outline:0 none;
}
label{ line-height:1; }