@charset "utf-8";

/*@font-face {

font-family: 'agate';

src: local('agate Regular'),

              local('AGATE_NO'),

              url('AGATE_NO.ttf') format('truetype')

              

} */

/*粒子*/

canvas{

	display:block;

	vertical-align:bottom;

	position:absolute;

	z-index:100;

	top:120px;

	left:0px;

	opacity:0.5;

	height:80%;



}





/*loading*/

#loading{

	background-color: rgba(255,255,255,1);

	height: 100%;

	width: 100%;

	position: absolute;

	left: 0px;

	top: 0px;

	z-index: 100;

	/*background-image: url(../images/loadingBg.jpg);*/

	background-position: center center;

	background-repeat: no-repeat;	

}

.pace {

  -webkit-pointer-events: none;

  pointer-events: none;

  z-index: 200;

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none;



  position: fixed;

  top: 0;

  left: 0;

  width: 100%;



  -webkit-transform: translate3d(0, -50px, 0);

  -ms-transform: translate3d(0, -50px, 0);

  transform: translate3d(0, -50px, 0);



  -webkit-transition: -webkit-transform .5s ease-out;

  -ms-transition: -webkit-transform .5s ease-out;

  transition: transform .5s ease-out;

}



.pace.pace-active {

  -webkit-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

}



.pace .pace-progress {

  display: block;

  position: fixed;

  z-index: 2000;

  top: 0;

  right: 100%;

  width: 100%;

  height: 10px;

  background: #175fa0;



  pointer-events: none;

}



/*CSS3 動畫*/

.Tip {

	position:absolute;

    width: 24px;

    height: 24px;

	bottom:10%;

	left:50%;

	margin-left:-12px;

}

.chevron {

    position: absolute;

    width: 28px;

    height: 8px;

    opacity: 0;

    transform: scale3d(0.5, 0.5, 0.5);

    animation: move 3s ease-out infinite;

}

.chevron:first-child {

    animation: move 3s ease-out 1s infinite;

}

.chevron:nth-child(2) {

    animation: move 3s ease-out 2s infinite;

}

.chevron:before,

.chevron:after {

    content: ' ';

    position: absolute;

    top: 0;

    height: 100%;

    width: 51%;

    background: #fff;

}

.chevron:before {

    left: 0;

    transform: skew(0deg, 30deg);

}

.chevron:after {

    right: 0;

    width: 50%;

    transform: skew(0deg, -30deg);

}

@keyframes move {

    25% {

        opacity: 1;

    }

    33% {

        opacity: 1;

        transform: translateY(30px);

    }

    67% {

        opacity: 1;

        transform: translateY(40px);

    }

    100% {

        opacity: 0;

        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);

    }

}

.text {

    display: block;

    margin-top: 50px;

	margin-left:-12px;

    font-size: 1rem;

    color: #fff;

    white-space: nowrap;

    opacity: .25;

    animation: pulse 2s linear alternate infinite;

}

@keyframes pulse {

    to {

        opacity: 1;

    }

}





/*結束*/



select:focus{

outline:none;

}

.select{

	margin-top:15px;

}



html, body {

	height:100%;

    margin:0;

	color:#363636;

	font-family:'微軟正黑體';

	font-size: 1rem;

}



 select {

	background-color: transparent;

	border-radius: 0;

	outline: none;

	height: 3rem;

	width: 100%;

	font-size: 1rem;

	margin: 0 0 20px 0;

	padding: 0;

	-webkit-box-shadow: none;

	box-shadow: none;

	-webkit-box-sizing: content-box;

	box-sizing: content-box;

	-webkit-transition: all 0.3s;

	transition: all 0.3s;

	color: #A8A8A8;

	border-bottom-width: 1px;

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: solid;

	border-left-style: none;

	border-bottom-color: #999999;

}

.nav  {

    position:fixed;

	top:0px;

	padding:30px 0px 30px 0px;

	left:0px;

	z-index:999;

	height:120px;

	background-color:transparent;

	transition:all 1s;

	

}

.nav li a{

	transition:all 1.5s;

}

.nav li a:hover{

	color:#e1b26b;

	background-color:transparent;

}





.navColor{

	background-color:rgba(0,0,0,0.5);

	transition:all 1s;

}



nav ul li{

	margin:0px 30px 0px 30px;

}

h2{

	font-size: 1.6rem;

	font-style: normal;

	margin: 0px;

	white-space: nowrap;

	font-family: "Times New Roman", Times, serif;

	

}

h3{

	color: #FFF;

	font-size: 4rem;

	left:10%;

	top:45%;

	position:absolute;

	

	

}

h4{

	font-size: 1.6rem;

	font-style: normal;

    margin: 10px opx 20px 0px;

	background-image: url(../images/line.png);

	background-repeat: no-repeat;

	background-position: left bottom;

	padding-bottom:40px;
	
	white-space: nowrap;

	font-family: "Times New Roman", Times, serif;

	

}

h5{

	font-size: 1.1rem;

	font-weight: bold;	

}

.Block{

	background-position: center center;

	height:auto;

	background-repeat: no-repeat;

	position:relative;

	padding:5%;

	line-height:2.6rem;

	background-size:cover;

	background-position:center top;

	overflow:hidden;

	display:none;

	

	

}

#tassltcl{

	background-image: url(../images/tasselBg.jpg);

	height:100%;

}

#about{

	background-image: url(../images/aboutBg2.jpg);

	background-position:left top;

	background-size:auto;

	padding-top:180px;

	

	

}

#history{

	width:80%;

}

/*

#about img{

	margin:0 auto 0 auto;

	position:relative;

}

*/

#product{

	background-image: url(../images/productBg.jpg);

	padding-top:180px;

	

	height:auto;

}

.card .card-image h6 {

	display:block;

	position:absolute;

	top:27%;

	color:rgba(255,255,255,1);

	text-align:center;

	width:100%;

	font-size:1.4rem;

	line-height:2.4rem;

}

.card{

	border-radius:10px;

}

.card .card-image img{

	border-radius:10px 10px 0px 0px;

}
.card .card-content p.left-align{
	font-size: 0.9rem;
	line-height: 1.6rem;
}
.modal-close{

	color:#e1b26b;

	display:block;

	position:absolute;

	right:0px;

	top:10%;

}

.btn-floating{

    width: 180px;

    height: 60px;

    line-height: 60px;

    padding: 0;

    background-color: #7a163a;

    border-radius: 60px;

    vertical-align: middle;

}

.btn-floating:hover{

	background-color: #550F27;

}

.btn-floating.halfway-fab {

	position:relative;

	right:0px;

	top:-30px;	

}

.card .card-content{

	padding-top:0px;

}

.modal-overlay{

	background-image:url(../images/maskBg.png);

	background-repeat:no-repeat;

	background-size:cover;

}

.modal{

	background-color:transparent;

}

.modal-content{

	color:rgba(255,255,255,1);

}

.modal-content h4{

	margin-top:10px;

    padding-bottom:20px;

	background-image: url(../images/wline.png);

	background-position:center bottom;

}

.z-depth-5, .modal {

    -webkit-box-shadow: none;

    box-shadow: none;

}

table{

	border-collapse:separate;

	border-spacing:3px;

}

th{

	background-color:#4e718a;

	border-radius:0px;

	padding:0px 10px;

}

td{

	padding:5px 10px;

}

table tr:nth-of-type(even){

	background-color:rgba(255,255,255,.1);

}



#distribute{

	background-image: url(../images/distributeBg.jpg);

	height: 110%;

	padding-top:180px;

	/*max-height: 1080px;*/

	background-color: rgba(235,235,235,1);

	

}

#contact{

	background-image: url(../images/contactBg.jpg);

	padding-top:180px;

	height:auto;

	padding-bottom:20px;

}

#contact h4{

	background-position: center bottom;

}

#contactTitle{

	margin-top:100px;

}

#footer{

	color:rgba(102,102,102,1);

	position:relative;

	margin-top:80px;

	width:80%;

	margin-left:auto;

	margin-right:auto;

	margin-bottom:10px;

	

}

/*for animate*/

.aboutinfo,#about img,.row .col.s12.productTitle,.card,.distributeinfo,.fill,.contactTitle,#footer{

	position:relative;

	opacity:0;

}

.aboutinfo{

    left:-200px;

}

#about img,.row .col.s12.productTitle{

	left:200px;

}

.distributeinfo{

	transform:translate(200px,0px);

	-ms-transform:translate(200px,0px); 

    -moz-transform:translate(200px,0px); 

    -webkit-transform:translate(200px,0px); 

    -o-transform:translate(200px,0px); 

}

.card,.fill,#footer{

	top:300px;

}



.nav{

 opacity:0;

}





@media all and (max-width: 1367px) {

.modal {

    width: 70%;

}

#history{

	width:100%;

	margin:60px 60px;

}

.card h6{

	margin-top:0px;

}

#distribute{

	background-image: url(../images/MdistributeBg.jpg);

}

#contactTitle{

	margin-top:60px;

}

#footer{

	width:100%;

	margin-top:20px;

}

}

@media all and (max-width: 992px) {
	
#about{

	background-image: url(../images/SaboutBg.jpg);	
}

.modal {

    width: 97%;

	max-height:100%;

	overflow-x: hidden;

}

th:nth-of-type(even){

	background-color: #324858;

	}

th{

	padding:15px 10px;

}

td{

	padding:15px 10px;

}

#history{

	width:100%;

	margin:0px 0px;

}

#contactTitle{

	margin-top:30px;

}

.Block{

	padding-top:50px;

}

#tassltcl{

	background-image: url(../images/StasselBg.jpg);

	

}

#distribute{

	padding-bottom:100px;

	height:auto;

}

h3{
  
  font-size: 2rem;

  line-height:3rem;

  top:35%;

  left:0%;	

  position:relative;

  margin:0 auto 0 auto;

}

.modal-close{

	color:#e1b26b;

	display:block;

	position:absolute;

	right:0px;

	top:0px;

}

}