@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);

/*************************
*******Typography******
**************************/

body {
    background: transparent;
    font-family: Futura Lt BT, Microsoft JhengHei, Orator Std, sans-serif;
    /*微軟正黑體=Microsoft JhengHei*/
    color: #000;
	font-size:15px;
	line-height:24px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: Orator Std, Microsoft JhengHei, sans-serif;
    /*微軟正黑體=Microsoft JhengHei*/
    color: #fff;
    line-height: 30px;
}

h1 {
    font-size: 36px;
    color: #fff;
}

h2 {
    font-family: Orator Std, sans-serif, Microsoft JhengHei;
    /*微軟正黑體=Microsoft JhengHei*/
    font-size: 16px;
    /*20px*/
}

h3 {
    font-size: 16px;
    color: #787878;
    font-weight: 400;
    line-height: 24px;
}

h4 {
    font-size: 16px;
}

p {
    font-size: 16px;
}

a {
    color: #fff;
    -webkit-transition: color 300ms, background-color 300ms;
    -moz-transition: color 300ms, background-color 300ms;
    -o-transition: color 300ms, background-color 300ms;
    transition: color 300ms, background-color 300ms;
}


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

/*---header----------------------------------------------------------------------------------------------------------------------------------------------*/
.mask_area {
	position:fixed;
	z-index:999;
}
	.mask {
		position:relative;
		z-index:999;
	}
		.holder {
			position:fixed;
			z-index:999;
		}
		.mbg {
			background:url(../../images/mask.jpg) repeat;
		}
			.m_top {
				top:0px;
				height:50px;
			}
			.m_bottom {
				bottom:0px;
				height:50px;
				text-align:center;
			}
			.m_top ,.m_bottom {
				width:100%;
			}
			.m_left ,.m_right {
				top:0px;
				bottom:0px;
				width:50px;
				height:100%;
			}
			.m_left {
				left:0px;
			}
			.m_right {
				right:0px;
			}
			
			.m_bottom img {
				padding-top:13px;
			}
			
			.intop {
				height:90px;
			}
.center0 .img-responsive {
	margin: 0px auto;
}		
/*---inlogo-------------------------------------------------------------------------------------------------------------------------------------------*/
.inlogo {
	position: fixed;
	top:22px;
	width:100%;
	text-align:center;
	z-index:1000;
}
.inlogo_bg {
	position:fixed;
	top:90px;
	width:100%;
	text-align:center;
	z-index: 99;
}
				


/*menu*/
.menu {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 52px;
    height: 40px;
    padding: 42px;
    text-align: center;
    border-radius: 0;
    font-size: 12px;
    background: #2e2928;
    z-index: 9999;
    cursor: pointer;
}
	.menu span {
		display: inline-block;
        width: 48px;
        height: 3px;
        background: #71533f;
        transition: .3s ease all;
		position: absolute;
		border-radius:5px;
	}
		.menu span:nth-child(1) {
			top:10px;
		}
		.menu span:nth-child(2) {
			top:19px;
		}
        .menu span:nth-child(3) {
			top:29px;
        
        }
	.menu strong {
		font-size:16px;
		color:#71533f;
		letter-spacing:1px;
		position:absolute;
		bottom:-64px;
	}
	.menu_ani span {
		background:#71533f;
	}
		.menu_ani span:nth-child(1) {
			-webkit-transform:rotate(25deg);
					transform:rotate(25deg);
			-webkit-transform-origin:left top;
					transform-origin:left top;
		}
		.menu_ani span:nth-child(2) {
			display: none;
		}
		.menu_ani span:nth-child(3) {
			-webkit-transform:rotate(-25deg);
					transform:rotate(-25deg);
			-webkit-transform-origin:left bottom;
					transform-origin:left bottom;
		}
		
.menuin {
	position:absolute;
	top:8px;
	left:20px;
}


.navbar {
	position: fixed;
    z-index: 9990;
    width: 285px;
    display: inline-block;
    background: rgba(46, 41, 40, 0.8);
	right:-300px;
    padding: 6% 3% 2%;
	top:0px;
}
.navmid {
	text-align:center;
}
.navleft {
	position:fixed;
	right:-300px !important;
	transition:.5s ease-in-out;
}
	.nav {
		text-align:center;
		padding-bottom:10px;
	}
		.nav a {
			display:block;
			width:100%;
		}
			.nav span {
				display:block;
				text-align:center;
				font-size:16px;
				color:#f7e0d9;
				letter-spacing:1.5px;
				line-height:22px;
			}
				.nav span:nth-of-type(2) {
					font-size:13px;
					color:#e27a7a;
					letter-spacing:0.5px;
				}
				.nav a:hover {
					text-decoration:none;
				}
				.nav a:hover span {
					text-decoration:none;
					color:#e27a7a;
					transition:0.2s ease-in-out;
				}
				.nav a:hover span:nth-of-type(2) {
					color:#f7e0d9;
				}

/*---dex area------------------------------------------------------------------------------------------------------------------------------------------*/
.banner {
	background:#fff;
	position:relative;
}
.spot {
	position:absolute;
	z-index:1;
}
	.spot img {
		width:100%;
	}
	.dex_area {
		position:relative;
		margin:100px;
	}
		.dex img {
			width:100%;
		}
		.logo {
			position:absolute;
			text-align:center;
			top:-35px;
			width:100%;
			z-index:5;
		}
		.logobg {
			background:url(../../images/logobg.png) top center no-repeat;
			min-height:160px;
			position: absolute;
			top: 0px;
			width: 100%;
			z-index: 3;
		}
.banner p {
	z-index: 999;
    position: absolute;
    left: 0px;
    bottom: -63px;
}
@media screen and (max-width: 768px) {
	.banner p {
	z-index: 999;
    position: absolute;
    left: 0px;
    bottom: -60px;
	line-height: 25px;
}}
@media screen and (max-width: 425px) {
	.banner p {
	z-index: 999;
    position: absolute;
    left: 0px;
    bottom: -45px;
	font-size:14px;
	line-height: 16px;
}}
	@media screen and (max-width: 1440px) {
		.logo {
			top:-36px;
		}
			.logo img {
				width:19%;
			}
		.logobg {
			background-size: 45%;
		}
	}
	@media screen and (max-width: 1000px) {
		.dex_area {
			margin: 65px 50px 30px;
		}
		.logo {
			top:-22px;
		}
		.m_left, .m_right {
			width:30px;
		}
		.m_top, .m_bottom {
			height:30px;
		}
			.m_bottom img {
				width:30%;
				padding:0px;
			}
		.menu {
			padding:39px 35px;
		}
			.menuin {
				top:9px;
				left:17px;
			}
			.menu span {
				width:40px;
			}
			.menu strong {
				bottom: -59px;
				font-size:13px;
			}
			
		.intop {
			height:70px;
		}
			.inlogo {
				top:18px;
			}
				.inlogo img {
					width:23%;
				}
			.inlogo_bg {
				top:70px;
			}
				.inlogo_bg img {
					width:50%;
				}
	}
	@media screen and (max-width: 700px) {
		.menu {
			padding: 24px 28px;
		}
			.menuin {
				top: 2px;
				left: 14px;
			}
				.menuin strong {
					display:none;
				}
				.menu span {
					width: 30px;
				}
					.menu_ani span:nth-child(1) {
						-webkit-transform: rotate(35deg);
    					transform: rotate(35deg);
					}
					.menu_ani span:nth-child(3) {
						-webkit-transform: rotate(-35deg);
    					transform: rotate(-35deg);
					}
		.inlogo img {
			width:25%;
		}
	}
	@media screen and (max-width: 500px) {
		.m_top, .m_bottom {
			height:25px;
		}
		.m_left, .m_right {
			width:25px;
		}
		.dex_area {
			margin: 55px 35px 30px;
		}
		.logo {
			top:-20px;
		}
		.logo img {
			width: 25%;
		}
		.logobg {
			background-size: 60%;
		}
		.menu {
			padding: 20px;
			width:45px;
		}
			.menu_ani span:nth-child(1) {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.menu_ani span:nth-child(3) {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			.menu span {
				width: 25px;
			}
				.menu span:nth-child(3) {
					top: 28px;
				}
			.menuin {
				top: -1px;
				left: 11px;
			}
			
		.intop {
			height: 60px;
		}
			.inlogo {
				top: 15px;
			}
				.inlogo img {
					width: 28%;
				}
			.inlogo_bg {
				top: 59px;
			}
	}
	@media screen and (max-width: 425px) {
		.m_left, .m_right {
			width: 20px;
		}
		.m_top, .m_bottom {
			height: 40px;
		}
		.dex_area {
			margin: 70px 30px 30px;
		}
		.logo img {
			width: 32%;
		}
		.logobg {
			background-size: 63%;
		}
		.m_bottom img {
			width: 60%;
			padding-top: 8px;
		}
		.intop {
			height: 55px;
		}
			.inlogo {
				top: 14px;
			}
				.inlogo img {
					width: 30%;
				}
			.inlogo_bg {
				top: 55px;
			}
	}
	@media screen and (max-width: 425px) {
		.inlogo_bg {
			top: 50px;
		}
	}

/*---about area--------------------------------------------------------------------------------------------------------------------------------------------*/
.about_area {
	padding:4% 11% 0;
}

	/*about top*/
	.about_top {
		background:url(../../images/about_bg1.png) center no-repeat;
		position:relative;
		background-size: 100%;
		background-position-y: 55%;
	}
		.alist {
			display:inline-block;
		}
			.about_tit {
				padding:53px 0px;
			}
				.about_tit img {
				}
			.about_text {
				background: url(../../images/text_bg_01.png)top center no-repeat, url(../../images/text_bg_02.png) repeat-y, url(../../images/text_bg_03.png) bottom center no-repeat;
				padding: 6% 26% 5% 21%;
				background-size:100%;
			}
				.about_text img {
					display:block;
				}
				.about_text span {
					font-size:16px;
					color:#343434;
					line-height:28px;
					padding-top: 5%;
					letter-spacing: 1.5px;
					display: block;
				}
				.fac {
					width:45%;
				}
			.fac_text {
				background: url(../../images/fac_bg_01.png)top center no-repeat, url(../../images/fac_bg_02.png) repeat-y, url(../../images/fac_bg_03.png) bottom center no-repeat;
				padding: 1% 5% 5% 5%;
				background-size:100%;
				text-align:center;
			}
				.fac_text img {
					display:block;
				}
				.fac_text span {
					font-size:16px;
					color:#343434;
					line-height:28px;
					padding-top: 1%;
					letter-spacing: 1.5px;
					display:inline-block;
					width: 100%;
				}
		.attop1 {
			width:55%;
		}
		.attop {
			position:absolute;
			top:0px;
			right:0px;
			text-align:right;
		}
			.about1 {
			}
			.deco1 {
				padding-top:17px;
			}
			@media screen and (max-width: 1850px) {
				.attop {
					width:52%;
				}
					.about1 img {
						width:100%;
					}
				.about_text {
					padding: 6% 15% 5% 21%;
				}
               .fac_text {
				}
			}
			@media screen and (max-width: 1700px) {
				.about_text {
					padding: 6% 20% 5% 7%;
				}
                .fac_text {
				}
				.about_area {
					padding: 4% 10%;
				}
			}
			@media screen and (max-width: 1560px) {
				.about_top {
					width:80%;
					margin:0 auto;
				}
				.about_tit img {
					width:80%;
				}
			}
			@media screen and (max-width: 1200px) {
				.attop1 {
					width:100%;
				}
				.attop {
					width:100%;
					position:relative;
					padding-top:40px;
				}
				.fac {
					width:80%;
				}
			@media screen and (max-width: 825px) {
				.about_tit {
					padding: 30px 0px;
				}
				.about_text {
					padding: 6% 10% 5% 10%;
				}
				.about_text img {
					width:100%;
				}
				.fac {
					width:100%;
				}
				.fac_text img {
					width:100%;
				}
					.deco1 {
					}
						.deco1 img {
							width:100%;
						}
			}
			@media screen and (max-width: 700px) {
				.about_top {
					width:100%;
				}
			}
			@media screen and (max-width: 500px) {
				.about_tit {
					padding: 0px;
				}
				.about_text {
					padding: 6% 5% 5%;
				}
				.about_text span {
					line-height:25px;
					font-size:15px;
				}
				.fac_text {
				}
				.fac_text span {
					line-height:25px;
					font-size:15px;
				}
				.attop {
					padding-top:20px;
				}
			}
/**order**/
.ordericon {
	position:fixed;
	bottom:141px;
	right:55px;
	display:inline-block;	
}
.ordericon a {
	display: block;
	transition: .3s ease-in-out;
}
.ordericon a:hover {
	transform: scale(0.9);
    opacity: .9;
}