/*** Two main color: #C7B299, #A38C71  */
body {
  margin: 0;  font-family: "微軟正黑體", "Microsoft JhengHei", Times, serif;
}



a {white-space: nowrap}
a:active,
 a:hover {
  outline: 0;
 white-space: nowrap}
img, image {
  border: 0;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
p {
  margin-top: 0; }



.illustration img { width: 100%; display: block;}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }
.box {   display: flex;  flex-direction: column;   align-items: center; justify-content: center; }
.container {
  position: relative;
 width: 100%;
 max-width: 960px;
 margin:0 auto;
 box-sizing: border-box;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
 display: block;
}


.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }



.js_active .main_menu ul {display: block }
/* input 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type=text], input[type=password] {
    width: 300px;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: thin solid; border-color: #f1f1f1; border-radius: 10px;
    background: #ffffff;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
    background-color: #cccccc;
    outline: none;
}

.sectionForm a {
	color:  #C7B299; text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
 	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
 	-ms-transition: color .5s, background .5s, height .5s; 
	transition: color .5s, background .5s, height .5s;
}
.sectionForm a:hover { color: #A38C71;}

/* Login & Register button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.Loginbutton {
    background-color: #FFFFFF;  color: #C7B299;
    border: thin solid; border-color: #C7B299; border-radius: 20px;
    padding: 2px; margin: 0px 2px;
    text-align: center;    text-decoration: none; display: inline-block;
    font-size: 12px; cursor: pointer; width: 60px;
}
.Loginbutton:hover {color: #A38C71; border-color: #A38C71}
.Registerbutton {
    background-color: #C7B299;  color:#FFFFFF;
    border: thin solid; border-color: #C7B299; border-radius: 20px;
    padding: 2px; margin: 0px 2px;
    text-align: center; text-decoration: none; display: inline-block;
    font-size: 12px; cursor: pointer; width: 60px;
}
.Registerbutton:hover { background-color: #A38C71; border-color: #A38C71}
.Otherbutton {
    background-color: #C7B299;  color:#FFFFFF;
    border: thin solid; border-color: #C7B299; border-radius: 10px;
    padding: 10px; margin: 5px 0 22px 0;
    text-align: center; text-decoration: none; display: inline-block;
    font-size: 16px; cursor: pointer; width: 300px;
}
.Otherbutton:hover { background-color: #A38C71; border-color: #A38C71}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sectionW {  text-align: center; align-content: center; background:#FFFFFF;}
.sectionG {  text-align: center; align-content: center; background:#F2F2F2;}
.sectionB {  text-align: center; align-content: center; background:#A38C71;}
.section1W { text-align: center; align-content: center; background:#FFFFFF;}
.sectionFirst {text-align: center;align-content: center; background:#FFFFFF; padding: 20rem 0.5rem 10rem 0.5rem;}
.sectionSecond {text-align: center;align-content: center; background:#FFFFFF; padding: 10rem 0.5rem 10rem 0.5rem;}
.sectionForm {text-align: center;align-content: center; background:#FFFFFF; padding: 16rem 0.5rem 10rem 0.5rem;}
.section1G   {text-align: center;align-content: center; background:#F2F2F2;}

/* News
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.news {	text-align: left; padding: 0 10px 0 10px;}
.newsheader { text-align: left;font-size: 1.2em; font-weight: bold; padding: 0 10px 0 10px;}
.newsdate   { text-align: left;font-size: 0.8em; padding: 0 10px 0 10px; }

/* Activities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.activities {	padding: 0 10px 0 10px;}
.activitiesheader { font-size: 1.2em; font-weight: bold; padding: 5px 10px 15px 10px;}

/* FAQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.faqheader {text-align: left;font-size: 2em; font-weight: bold; padding: 20px 10px 20px 10px;}
.faq {
    background-color: #FFFFFF; 
    border: thin solid; border-color: #F2F2F2;
    padding: 10px 10px 10px 10px;
    text-align: left;    text-decoration: none; display: inline-block; font-weight:bold;
    cursor: pointer; width: 100%; transition: 0.4s;
    background: url(../images/collapse.png) no-repeat right;
}
.faq.active {
    background: url(../images/expand.png) no-repeat right;
}
.answer {
    padding: 10px 10px 10px 10px; 
    display: none;
    background-color: white;
    border: thin solid; border-color: #F2F2F2;
    overflow: hidden; width: 100%; transition: 0.4s;
    text-align: left;   
}

/* Load more
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.loadmorebtn { cursor: pointer;display: inline-block;} 
.loadmorebtn.active {display: none;}
.loadmoretxt { display: none;}

/* vertical line
–––––––––––––––––––––––––––––––––––––––––––––––––– */
vl1 {    border-left: thick solid #C7B299; }
vl2 {    border-left: thick solid #A38C71; }

/* Slide 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {box-sizing: border-box}
.mySlides {display: none}

/* Slideshow container */
.slideshow-container {  max-width: 1000px; position: relative; margin: auto;}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.prev {  left: 0;}
.next {  right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {  background-color: rgba(0,0,0,0.8);}

/* Caption text */
.captiontext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover { background-color: #717171;}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section-footer {  Background:#616161; Color:#ffffff; text-align:center; }
.section-copy 	{  Background:#424242; Color:#cccccc; text-align:center; }

.section-footer a {
	color: #ffffff; text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
 	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
 	-ms-transition: color .5s, background .5s, height .5s; 
	transition: color .5s, background .5s, height .5s;
}

.section-copy a {
	color: #cccccc; text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
 	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
 	-ms-transition: color .5s, background .5s, height .5s; 
	transition: color .5s, background .5s, height .5s;
}
.section-footer a:hover, .section-copy a:hover { color: #C7B299;}

/* Different Screen
-----------------------------------------------------------------*/
@media (max-width: 550px) 
{
  
.container {
    width: 85%;
    padding: 0; }

.one-third.column { padding: 5px; }

.offset-by-one-third.column,
  .offset-by-one-third.columns { padding: 5px; }

}



/* For devices larger than 550px */

@media (min-width: 550px) 
{
  
.container 			           {
    width: 80%; }
  
.column,
  .columns                         {
 margin-left: 4%; }
  
.column:first-child,
  .columns:first-child {
 margin-left: 0; }

  
.one.column,
  .one.columns                 { width: 4.66666666667%; }
  
.two.columns                               { width: 13.3333333333%; }
  
.three.columns                             { width: 22%;            }

.four.columns                              { width: 30.6666666667%; }
  
.five.columns                              { width: 39.3333333333%; }
  
.six.columns                               { width: 48%;            }
  
.seven.columns                             { width: 56.6666666667%; }
  
.eight.columns                             { width: 65.3333333333%; }
  
.nine.columns                              { width: 74.0%;          }
  
.ten.columns                               { width: 82.6666666667%; }
  
.eleven.columns                            { width: 91.3333333333%; }
  
.twelve.columns            	           { width: 100%; margin-left: 0;}

  
.one-third.column                          { width: 30.6666666667%; }
  
.two-thirds.column                         { width: 65.3333333333%; }

  
.one-half.column                           { width: 48%; }

  

/* Offsets */
  
.offset-by-one.column,
        .offset-by-one.columns        { margin-left: 8.66666666667%; }
  
.offset-by-two.column,
        .offset-by-two.columns        { margin-left: 17.3333333333%; }
  
.offset-by-three.column,
      .offset-by-three.columns      { margin-left: 26%;            }
  
.offset-by-four.column,
       .offset-by-four.columns       { margin-left: 34.6666666667%; }
  
.offset-by-five.column,
       .offset-by-five.columns       { margin-left: 43.3333333333%; }
  
.offset-by-six.column,
        .offset-by-six.columns        { margin-left: 52%;            }
.offset-by-seven.column,
      .offset-by-seven.columns      { margin-left: 60.6666666667%; }
  
.offset-by-eight.column,      .offset-by-eight.columns      { margin-left: 69.3333333333%; }
  
.offset-by-nine.column,
       .offset-by-nine.columns       { margin-left: 78.0%;          }
  
.offset-by-ten.column,
        .offset-by-ten.columns        { margin-left: 86.6666666667%; }
  
.offset-by-eleven.column,
     .offset-by-eleven.columns     { margin-left: 95.3333333333%; }

  
.offset-by-one-third.column,
  .offset-by-one-third.columns  { margin-left:34.6666666667%; }
  
.offset-by-two-thirds.column,
 .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }

  
.offset-by-one-half.column,
   .offset-by-one-half.columns   { margin-left: 52%; }


}





/* Lower than 550 */
@media (max-width: 34.375em) 
{
  .prev, .next, .captiontext {font-size: 11px}
  .section1W, .section1G {     padding: 3.5rem 0.2rem 0.5rem 0.2rem;}
  .section-footer { font-size: 0.9em;} 
  .section-copy { font-size: 0.7em;} 
	small { font-size: 0.6rem;}
	h1 { font-size: 2.4rem; }
  
	h2 { font-size: 2.2rem; }
  
	h3 { font-size: 2.0rem; }
  
	h4 { font-size: 1.8rem; }
  
	h5 { font-size: 1.6rem; }
  
	h6 { font-size: 1.3rem; }

}

/* Bigger than 550 */
@media (min-width:34.375em) and (max-width:68em) {
  .section1W, .section1G, .sectionForm {     padding: 7rem 0.5rem 0.6rem 0.5rem;}
  .section-footer { font-size: 0.9em;} 
  .section-copy { font-size: 0.7em;}  
	small { font-size: 0.6rem;}
	h1 { font-size: 4.0rem; }
  
	h2 { font-size: 3.2rem; }
  
	h3 { font-size: 2.6rem; }
  
	h4 { font-size: 2.0rem; }
  
	h5 { font-size: 1.4rem; }
  
	h6 { font-size: 1.2rem; }

}

/* Bigger than 1088 */
@media (min-width: 68em)  {
  .section1W, .section1G, .sectionForm {     padding: 5rem 0.5rem 1rem 0.5rem;}
  .section-footer  { font-size: 1em;} 
  .section-copy { font-size: 0.8em;} 
	small { font-size: 0.8rem;}
	h1 { font-size: 5.0rem; }
  
	h2 { font-size: 4.2rem; }
  
	h3 { font-size: 3.6rem; }
  
	h4 { font-size: 3.0rem; }
  
	h5 { font-size: 2.4rem; }
  
	h6 { font-size: 1.5rem; }

}