@charset "utf-8";

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0; /*transition:.5s;*/ }

html{height:100%!important;}

body{margin:0;-webkit-text-size-adjust:none;overflow-x:hidden;font-family:'Microsoft jhenghei', Arial; background: #666666; line-height: 1.8 }

* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

article,aside,dialog,footer,header,section,footer,nav,figure,menu{ position: relative; }

img{vertical-align:middle;max-width:100%}

a,a:hover,a:focus{ text-decoration:none; color:currentColor; }

div,a,p,span,tr,th,td,li,pre{}

table {
  table-layout: fixed;
}

figure{ padding:0;margin:0; }

.clear{ zoom: 1; }
.clear:after{content:"";visibility:hidden;display:block;font-size:0;clear:both;height:0;}

ul,
ul li,
ol,
ol li{
  list-style-type: none;
}

/* input reset */
input,
button,
select,
textarea{
  border:none;
  background-color: #fff;
  cursor: pointer;
  height: 36px;
  padding: 6px 8px;
  font-family:'Microsoft jhenghei', Arial !important;
}

textarea{
  width: 100%;
  height: auto;
  border:#e3dfe3 1px solid;
}

input:focus,button:focus,select:focus{ outline: none; }

/*======Placeholder======*/
input:focus::-webkit-input-placeholder { color:transparent; } 
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

textarea:focus::-webkit-input-placeholder { color:transparent; } 
textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* WebKit browsers */
.usbox input::-webkit-input-placeholder,
.usbox textarea::-webkit-input-placeholder { 
  color: #737276;
}

/* Firefox browsers */
.usbox input input::-moz-placeholder,
.usbox textarea::-moz-input-placeholder { 
  color: #737276
}

/* IE */
.usbox input input::-ms-input-placeholder,
.usbox textarea::-ms-input-placeholder { 
  color: #737276
}

/* Opera */
.usbox input input::-o-input-placeholder,
.usbox textarea::-o-input-placeholder { 
    color: #737276
}

/* Overline From Center */
.nav_link>li>a{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  backface-visibility:hidden; /*隱藏*/
 -webkit-backface-visibility:hidden;  /* Chrome 和 Safari */
 -moz-backface-visibility:hidden;   /* Firefox */
 -ms-backface-visibility:hidden;  /* Internet Explorer */

  -moz-osx-font-smoothing: grayscale;  
}

.nav_link>li>a:before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom:3.1rem;
  background-color: #ffce02; 
  height: 6px;

  transition: left, right, 0.3s ease-out;
  -webkit-transition: left, right, 0.3s ease-out;
  -moz-transition: left, right, 0.3s ease-out;
  -ms-transition: left, right, 0.3s ease-out;
  -o-transition: left, right, 0.3s ease-out;
}

.nav_link>li>a.active:before,
.nav_link>li>a:hover:before{
    left: .5%;
    right: .5%;
}

/*Scroll樣式*/
.select_style { 
  width: 280px; 
  height:45px; 
  font-size: 14px;
  overflow:hidden;
  padding-left: 5px;
  background-color: #fff;
  border:1px solid #ccc;
}
 
.select_style select { 
  display: block; 
  padding:5px; 
  background:transparent; 
  width: 99%; 
  font-size: 100%; 
  border:none; 
  height:100%; 
  -webkit-appearance: none; /*for Webkit browsers*/
} 

.divTable{
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

.divTable .divRow{
  display: table-row;
}

.divTable .divCell{
  display: table-cell;
  vertical-align: middle;
}


/*IWARE FOOTER*/
.iware{
  display: block;
  line-height: 25px;
  color: #949294;
  font-size: 12px;
  text-align: left;
  font-weight: normal;
}

.iware p{
  display: inline-block;
  background-color: #29292a;
  padding: 4px 8px;
}

.iware a,
.iware b{
  font-size: 12px;
  font-weight: normal;
  color: inherit;
}

.mainContent{
  float: left;
  width: 100%;
  overflow: hidden;
}

/*------------------------------------------------------------------------------*/
.bg-full{
  position:relative;
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  overflow: hidden;
}

.flex-center{
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-wrap: wrap;

  display: -moz-flex; /* Firefox 18+ */
  -moz-align-items: center;
  -moz-justify-content: center;
  -moz-flex-wrap: wrap;

  display: -ms-flexbox; /* IE 10 */
  -ms-align-items: center;
  -ms-justify-content: center;
  -ms-flex-wrap: wrap;


  display: -o-flex;
  -o-align-items: center;
  -o-justify-content: center;
  -o-flex-wrap: wrap;
}

.sub-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sub-ju-center{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sub-align-center{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sub-align-stretch{
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.sub-ju-start{
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.sub-ju-end{
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
}

.sub-ju-between{
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
}

.sub-ju-around{
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
}

@media screen and (max-width:1000px){
.sub-column{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}


/*=== 內頁 ===*/

/*頁碼*/

.page{ padding: 15px; width: 100%; display: inline-block; }

.page > li { display: inline-block; }

.page > li > a{
  display: block;
  font-size: 14px;
  color:#2e2e2e;
  padding: 20px 25px; 
}

.page > li.active > a,
.page > li > a:hover{
  outline:#d1d1d1 1px solid;
}



/*== Background Color ==*/


/*== Button ==*/
a.moreLink{
  display: inline-block;
  border:#d1d1d1 1px solid;
  font-size: 14px;
  padding:15px 70px;
  margin-top: 30px;
  transition: .5s
}

a.moreLink:hover{
  background: #000;
  color: #fff
}

.btn-more{background-color:#c11006;font-size:1.1em;padding-left:1.1em;padding-right:1.1em;border-radius:10px;}
.btn-more-s{color:#000;font-size:14px;background-color:transparent;border-radius:14px;padding:2px 1.5em;}


/*check & radio style switched*/
.checkbox_style{ display: inline-block; }

.checkbox_style input[type="checkbox"],
.radio_style input[type="radio"]{
  display: none;
}

.checkbox_style input[type="checkbox"]+label,
.radio_style input[type="radio"]+label {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  text-align: left;
  -webkit-box-sizing: border-box;
}

.checkbox_style label::before,
.radio_style label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border:#9c9a9a 1px solid;
  background: #fff;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -3px;
  -webkit-box-sizing:border-box;
  -webkit-transition:background ease-in .2s
}

.radio_style label::before {
  width: 15px;
  height: 15px;
  background: #EEE;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  margin-top: -5px;
}

.checkbox_style input[type="checkbox"]+label{
  position: relative;
  cursor: pointer;
}

.checkbox_style input[type="checkbox"]:checked+label::after{
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  left: 2px;
}

.checkbox_style input[type="checkbox"]:checked+label::after{
    top: -6px;
    left: 2px;
    color: #000;
    font-size: 21px;
}

.radio_style input[type="radio"]:checked+label::before{
  background-color: #333;
  border: 3px #EEEEEE solid;
}



/*=============================== RESPONSIVE ===================================*/


@media screen and (min-width: 1001px){

  #BOX { display: none }  

}

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

  .sub-column{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }



}