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

html {
  position: relative;
  min-height: 100%;
}
body {
  margin :0;
  padding:0;
  height:100%;
  font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing:1.1px;
  color: #000000;
  width: 100%;
  min-width: 360px;
  margin-bottom: 330px;
}

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; }
}

.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;
}


.error{
  color: red;
}



@media (max-width: 768px) {

}



@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;
    }
}



.footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 300px;
  min-width: 100%;
  background-color: #252525;
  z-index: 150;
}
@media (max-width: 767.98px) {
body {
  margin-bottom: 260px;
}
.footer{
  height: 230px;
}
}



/* 5 Columns */

.col-xs-5-cols,
    .col-sm-5-cols,
    .col-md-5-cols,
    .col-lg-5-cols {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-xs-5-cols {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    @media (min-width: 768px) {
        .col-sm-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 992px) {
        .col-md-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }




/*
modal ios fix
*/
.modal-open .modal {

  top: 0;
  bottom: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    
/*     box-shadow: 0 0 0 2px green inset; */

}

.modal-open .modal.fade .modal-dialog {

  height: 100%;
  margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: none;
    -webkit-overflow-scrolling: touch;
    transform: none;
  max-width: none;
  pointer-events: all;
  padding: 10px;

}

.no-scroll, .no-scroll body {
  
  overflow: hidden;
  
}

.modal-content {
  
  max-width: 500px;
  margin: 0 auto;

}

.modal-footer {
  
  padding-bottom: 1.5rem;
  
}