@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'NotoSansTC-Light';
  font-style: normal;
  font-weight: normal;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'NotoSansTC-Regular';
   font-style: normal;
   font-weight: normal;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'NotoSansTC-Medium';
   font-style: normal;
   font-weight: normal;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'NotoSansTC-Bold';
   font-style: normal;
   font-weight: normal;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'), url(https://fonts.gstatic.com/s/playfairdisplay/v14/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
  position: relative;
  min-height: 100%;
}
body {
  margin :0;
  padding:0;
  height:100%;
  font-family: 'Roboto', 'NotoSansTC-Light', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #322A29;
  width: 100%;
  min-width: 320px;
  margin-bottom: 370px;
}

.footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 370px;
  min-width: 100%;
  z-index: 100;
  text-align: center;
}


span{
	margin: 0;
	padding: 0;
}
fieldset,img{
	border:0;
	word-break:break-all;
}
a,a:hover,a:active,input,button{
	outline:none !important;
	text-decoration: none !important;
}
a:hover{
  outline:none !important;
  text-decoration: none !important;
}
/*
ol,ul {list-style:none;}
*/

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #595959 !important;
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

.Roboto-light{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
.Roboto-Regular{
  font-family: 'Roboto', sans-serif;
  font-weight: 400; 
}
.Roboto-bold{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.NotoSansTC-Light{
  font-family: 'NotoSansTC-Light', sans-serif;
}
.NotoSansTC-Regular{
  font-family: 'NotoSansTC-Regular', sans-serif;
}
.NotoSansTC-Medium{
  font-family: 'NotoSansTC-Medium', sans-serif;
}
.NotoSansTC-Bold{
  font-family: 'NotoSansTC-Bold', sans-serif;
}

.PlayfairDisplay-Regular{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}


.img-responsive{
  min-width:100%;
  height: auto;
}
.img-maxwidth{
  max-width:100%;
  height: auto;
}
.img-maxwidth img{
  max-width:100%;
  height: auto;
}

/*垂直居中 包3層*/
.centerbox-box{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.centerbox-table{
  display:table;
  width: 100%;
  height: 100%;  
}
.centerbox-cell{
  display:table-cell;
  vertical-align:middle; 
}
.centerbox-td{
  margin-left:auto;
  margin-right:auto;
}

/*youtube responsive*/
.video-content {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px; 
    height: 0; 
    overflow: hidden;
}
   
.video-content iframe,
  .video-content object,
    .video-content embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-top: 15px; 
}

/*相關共用------------------------------------*/

.hover-zoom {
  transition: all 0.3s ease-in-out;
  background-size: 100%;
}
.hover-zoom:hover {
  background-size: 110%;
}

.zoomimg{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.zoomimg::after{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.hover-zoom2 .zoomimg{
  transition: all 0.6s ease-in-out;
}
.hover-zoom2:hover .zoomimg{
  transform: scale(1.1);
  background-color: rgba(0,0,0,0.4);
}


.bold{
  font-weight: bold !important;
}

.fh1,.fh1 a{
	font-family: Arial,"微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	font-size: 20px;
	color: #ED6D00;
	text-decoration: none;
	font-weight: bold;
}
.fh1 a:hover{
  text-decoration: none;
}

.ke-content{
	margin: 0;
	padding: 5px;
	background-color: #FFFFFF;
	font-family: Arial,"微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	font-size: 16px;
	color: #333;
}

.load{
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}

.color-white,.color-white a,a.color-white{
  color: #FFF;
}
.color-white a:hover,a.color-white:hover{
  font-weight: bold;
}


.mybtn{
  display: inline-block;
  background-color: #000;
  text-align: center;
  line-height: 36px;
  color: #FFFFFF;
  border: 1px solid #000;
  padding: 0px 40px 0px 40px;
  font-size: 15px;
  font-weight: 300;
}
.mybtn:hover{
  background-color: #9b9b9b;
  transition-property: background-color;
  transition-duration: .5s;
  transition-delay: 0s;
  color: #FFFFFF;
  border: 1px solid #9b9b9b;
}
.mybtn.black{
  border: 2px solid #A87922;
  background-color: #A87922;
}
.mybtn.black:hover{
  background-color: transparent;
  color: #A87922;
}

.mybtn2{
  display: inline-block;
  background-color: #FFF;
  text-align: center;
  line-height: 36px;
  color: #82221C;
  border: 2px solid #82221C;
  padding: 0px 20px 0px 20px;
  font-size: 15px;
}
.mybtn2:hover{
  background-color: #82221C !important;
  color: #FFFFFF !important;
  transition-property: background-color;
  transition-duration: .5s;
  transition-delay: 0s;
  transition-property: color;
  transition-duration: .5s;
  transition-delay: 0s;
}

@media (max-width: 1199.98px) {

}

@media (max-width: 767.98px) {

}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes UptoDown{
    from{
        top:-100px;
    }
    to{
        top:0px;
    }
}