@charset "utf-8";

/* CSS Document */

*{ 

	box-sizing: border-box;

	border:0;

	margin:0;

	padding:0;

	outline:0;

}



body {font: 15px Arial, Helvetica, sans-serif, 微軟正黑體;}



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

header, section, footer { overflow:hidden; margin:0 auto;}

a{

	-webkit-transition: all 0.3s ease-in-out 0s;

    -moz-transition: all 0.3s ease-in-out 0s;

    -o-transition: all 0.3s ease-in-out 0s;

    -ms-transition: all 0.3s ease-in-out 0s;

	transition: all 0.3s ease-in-out 0s; 

	color:inherit;

	display:block;

}

a:hover { opacity:0.8;}

button { cursor:pointer;}

address,caption,cite,code,dfn,em,th,var {font-weight: normal;font-style: normal;}

a,a:hover,img,div,input,background,li{text-decoration: none;outline: none; list-style:none; /* for Firefox */border:none;

hlbr:expression(this.onFocus=this.blur()); /* for IE */}



img { max-width:100%; width:100%; height:auto;}



table {

	border-collapse: collapse;

	border-spacing: 0;

}

/*---------------------------------------------------------------------header-------------*/

.main_h {

  	position:absolute;

    top: 0;

    left: 0;

    z-index: 999;

    width: 100%;

	max-height: 85px;

    padding-top: 17px;

    background-color:#732701; 

    overflow: hidden;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    opacity: 0.9;

    padding-bottom: 6px;

}

#tool-bar {display: flex; flex: 1;}

.open-nav { max-height: 400px !important;}

.open-nav .mobile-toggle { transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}



.sticky {

	background-color: #732701;

    top: 0px;

    position: fixed !important;

    left: 0;

    width: 100%;

    border-radius: 0;

}



.logo { width: 100px; float: left; display: block;}



/**/

.search {

	position: relative;

    display: flex;

    height: 25px;

    margin: 20px 0 0 100px;

    flex: 1;

}

.search input[type="text"] {

	background: rgba(255, 255, 255, 0.25);

    color: #fc7701;

    padding: 7px;

	-webkit-apperance:none;

	margin:0;

	-webkit-transition: all 0.5s ease-out;

	-moz-transition: all 0.5s ease-out;

	-ms-transition: all 0.5s ease-out;

	-o-transition: all 0.5s ease-out;

}

.search input[type="submit"] {

	cursor: pointer;

	background:url(../images/icon08.png) center top no-repeat;

	background-size:contain;

	width: 30px;

    height: 30px;

    margin-right: 10px;

    opacity: 0.5;

}	

.search input[type="submit"]:active {

	position:relative;

}

/**/







nav { float: right;flex: 2;}



nav ul {

  overflow: hidden;

  text-align: right;

  float: right;

  margin-top: 20px;

}



nav ul li { display: inline-block; margin-left: 35px; line-height: 1.5;}



nav ul a { color: #fff; font-weight:bold; text-shadow:0 0 5px #930;}



.mobile-toggle {

  display: none;

  cursor: pointer;

  font-size: 20px;

  position: absolute;

  right: 22px;

  top: 0;

  width: 30px;

  -webkit-transition: all 200ms ease-in;

  -moz-transition: all 200ms ease-in;

  transition: all 200ms ease-in;

}



.mobile-toggle span {

  width: 30px;

  height: 4px;

  margin-bottom: 6px;

  border-radius: 1000px;

  background: #c5a799;

  display: block;

}

.row {

  width: 100%;

  position: relative;

  padding: 0 5%;

  display:flex;

}

.hero { position: relative; text-align: center; letter-spacing: 2px;}





.mouse {

  display: block;

  margin: 0 auto;

  width: 26px;

  height: 46px;

  border-radius: 13px;

  border: 2px solid #930;

  position: absolute;

  bottom: 40px;

  position: absolute;

  left: 50%;

  margin-left: -26px;

}

.mouse span {

  display: block;

  margin: 6px auto;

  width: 2px;

  height: 7px;

  border-radius: 4px;

  background: #930;

  border: 1px solid transparent;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-name: scroll;

  animation-name: scroll;

}



@-webkit-keyframes scroll {

  0% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translateY(20px);

    transform: translateY(20px);

  }

}

@keyframes scroll {

  0% {

    opacity: 1;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }



  100% {

    opacity: 0;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

  }

}









.cd-container {

  width: 90%;

  max-width: 768px;

  margin: 2em auto;

}

.cd-container::after {

  /* clearfix */

  content: '';

  display: table;

  clear: both;

}

.cd-top {

  display: inline-block;

  height: 40px;

  width: 40px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  /* image replacement properties */

  white-space: nowrap;

  visibility: hidden;

  opacity: 0;

  -webkit-transition: opacity .3s 0s, visibility 0s .3s;

  -moz-transition: opacity .3s 0s, visibility 0s .3s;

  transition: opacity .3s 0s, visibility 0s .3s;

}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {

  -webkit-transition: opacity .3s 0s, visibility 0s 0s;

  -moz-transition: opacity .3s 0s, visibility 0s 0s;

  transition: opacity .3s 0s, visibility 0s 0s;

}

.cd-top.cd-is-visible {

  /* the button becomes visible */

  visibility: visible;

  opacity: 1;

}

.cd-top.cd-fade-out {

  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */

  opacity: .5;

}

.no-touch .cd-top:hover {

  background-color: #e86256;

  opacity: 1;

}

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

  .cd-top {

    right: 20px;

    bottom: 20px;

  }

}

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

	.cd-top {

    height: 60px;

    width: 60px;

    right: 30px;

    bottom: 30px;

  }

}

#lang { color: #755e53;

    background-color: #fff;

    border-radius: 30px;

    padding: 5px;

    margin: 17px 0 0 50px;}

footer { position:relative;}

footer #tool { position:fixed; bottom:35px; right:-1px;}

footer #tool a { width:50px; height:50px; display: -webkit-flex;

  display:         flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;margin:-1px;}

footer article { display:flex; padding:2% 5% 3%; background-color:#930;color:#fff;}

footer article .title { font-weight:bold; text-decoration:underline; margin-bottom:10px;}

footer article li { display:flex; line-height: 30px;}

footer article .contacts { flex:1;}

footer article .contacts li a { margin-right:15px;}

footer article .contacts li img { width:20px;    height: 20px; margin-right:10px;}

footer article .item-box {flex:1.5;}

footer article .item {

	-moz-column-count: 3;

  	-moz-column-gap: 1em;

  	-webkit-column-count: 3;

  	-webkit-column-gap: 1em;

  	column-count: 3;

  	column-gap: 1em;

}

#copyright { position:absolute; left:0; bottom:0;  border-radius: 0 10px 0 0; text-align:center; font-size:small; font-weight:bold;color:#930; background-color:#fff; padding:10px 10px 10px 5%;}

/*-----------------------------------------------------------------------------*/



.btn { background-color:#009985; color:#fff; border-radius:3px; display:table; margin:30px 0; padding:5px;}



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

	.search {    margin: 20px 0 0 20px;}

}

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

	.main_h { position: relative; width:100%; left:0;    background-color: #732701; border-radius:0;}

	.row { display:block;}

	.logo { float: none;}

	.search input[type="text"] { width:100%; }

  	nav { width: 100%;}

	nav ul {

    padding-top: 10px;

    margin-bottom: 22px;

    float: left;

    text-align: center;

    width: 100%;

  	}

  	nav ul li { width: 100%; padding: 7px 0; margin: 0;}

	nav ul a {font-size: large;}

	.mobile-toggle { display: block; padding-top: 10px;}

	#lang {position: absolute; top: 10px; right: 15%;margin: 0;}



	

	footer #tool a {width: 35px; height:35px; }

	.mouse, footer article .item-box { display:none;}

	#copyright {position: relative; width: 100%;border-radius: 0; z-index: -1;}

  

}

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

	.search { margin: 20px auto;}

	#lang {right: 25%;}

}

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

	

}