/* 自訂檔 */

/* font-family: 'Noto Sans TC', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,800'); /* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script'); /* font-family: 'Petit Formal Script', cursive; */

html {
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font-family: Helvetica, Arial, "微軟正黑體", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}

.clear01 {
}
.clear01::after {
	content: "";
	display: block;
	clear: both;
}

.fleft{
	float: left;
}

.fright{
	float: right;
}

/*
.back-to-top {
	width: 38px;
	height:41px;	
	position: fixed;
	bottom: 20px;
	right: 25px;
	text-decoration: none;
	font-size: 12px;
	padding: 1em;
	display: none;
	background:url(../top.png) no-repeat;
	z-index:1000;
}
*/

/* =============== 首頁 ===================== */

.language{
	position: absolute;
	top:40px;
	right: 50px;
	z-index: 52;
}

@media (max-width: 1199px) {
.language{
	top:20px;
	right: 45px;
}
}



.language select{
	height: auto;
	padding: 5px 15px;
	border:none;
	background: rgba(255,255,255,0.4);
}


.language.mobeil{
	display: none;
	position: static;
	margin: 20px 0;
}

@media (max-width: 991px) {
.language{
	display: none;
}

.language.mobeil{
	display:block;
}
}





.i_product{
	position: relative;
}

.i_product ul{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	position:relative;
	top:-40px;
	z-index: 30;
	
	display: flex;
	flex-flow: row wrap;
}

.i_product ul li{
	width: calc(100%/6 - 30px);
	margin: 0 15px;
	text-align: center;
}

@media (max-width: 991px) {
.i_product ul li{
	width: calc(100%/3 - 30px);
	margin: 0 15px 40px;
}
}

@media (max-width: 499px) {
.i_product ul li{
	width: calc(100% - 60px);
	margin: 0 30px 40px;
}
}

.i_product ul li .pic{
	width: 100%;
	padding-top: 88%;
	margin-bottom: 15px;
	overflow: hidden;
	border: #FFFFFF solid 10px;
	border-radius: 100%;
	
	box-shadow: 0 -10px 20px -5px rgba(0,0,0,0.2);
	transition: all 0.5s;
}

.i_product ul li:hover .pic{
	transform: scale(0.9,0.9);
}

.i_product ul li p{
	display: inline-block;
	padding: 5px 20px;
	font-weight: bold;
	background: #eeeeee;
	border-radius: 15px;
}




.i_news{
	color: #fff;
	padding: 40px 0 1px;
	background: #025b3a;
}

.i_news dl{
	display: flex;
	margin: 0;
}

.i_news dl dt{
	padding-right: 45px;
	background:url(../index_07.png) no-repeat right 25%;
}

.i_news dl dt h6{
	font-size: 20px;
	letter-spacing: 20px;
	margin: 0 0 5px;
}

.i_news dl dt h3{
	display: inline-block;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	letter-spacing: 1px;
	margin: 0;

background: -moz-linear-gradient(45deg, rgba(248,195,2,1) 0%, rgba(255,233,122,1) 92%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(248,195,2,1) 0%,rgba(255,233,122,1) 92%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(-135deg, rgba(248,195,2,1) 0%,rgba(255,233,122,1) 92%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -webkit-background-clip: text;
    color: transparent;
}

.i_news dl dd{
	padding: 0 0 0 20px;
}

.i_news ul{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-flow: row wrap;
}

.i_news ul li{
	width: 50%;
	margin-bottom: 15px;
	letter-spacing: 1px;
	padding:5px 10px 10px;
}

.i_news ul li i{
	display: inline-block;
	margin-right: 10px;
}

.i_news ul li .date{
	color: #f8c301;
	margin-bottom: 10px;
}

.i_news ul li a{
	color: #fff;
}



@media (max-width: 767px) {
.i_news dl{
	flex-flow: row wrap;
}

.i_news dl dt, .i_news dl dd{
	width: 100%;
	padding:0 10px;
	margin-bottom: 15px;
	background:none;
}

}



footer{
	color: #fff;
	background: #025b3a;
	padding: 1px 0;
}

footer ul{
	margin: 0;
	padding:30px 0 10px;
	list-style: none;
	text-align: center;
	border-top: #C8C8C8 dashed 1px;
}

footer.page ul{
	border-top:none;
}

footer ul li{
	display: inline-block;
	margin-right: 20px;
}

footer ul li i{
	color: #f8c301;
}

footer p{
	color: #b4b4b4;
	font-size: 13px;
	margin-bottom: 30px;
}

footer p a{
	color: #b4b4b4;
}



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

.pageswf{
	width: 100%;
	height: 367px;
}

.pageswf.swf01{
	background: url(../pageswf_01.jpg) no-repeat center top;
}

.pagetitle{
	margin: 50px 0 0;
}

.pagetitle h1{
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 15px;
}

.pagetitle h1 span{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 28px;
	color: #85c226;
}

.pagecon{
	padding:40px 0;
	letter-spacing: 1px;
}









/*==========================公司簡介============================*/

.pro_title{
	position: absolute;
	left:0;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 10px;
	background: #fff;
}

.pro_title h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 40px;
	text-align: right;
	margin: 0 0 5px;
	
	background: url(../profile_02.jpg) no-repeat center;
	background-size: cover;
    -webkit-background-clip: text;
    color: transparent;
}

.pro_title h5{
	font-size: 23px;
	font-family: 'Noto Sans TC', sans-serif;
	text-align: right;
	font-weight: 600;
	letter-spacing: 5px;
	margin: 0 0 10px;
}




.profile{
	background: url(../profile_03.jpg) no-repeat center;
	background-size: cover;
	padding: 10px;
	margin-left: 170px;
}

.profile ul{
	margin: 0 ;
	padding:50px 40px 50px 90px;
	list-style: none;
	
	background: #fff;
	
	display: flex;
	flex-flow: row wrap;
}

.profile ul li:nth-of-type(1){
	width: 220px;
	margin-right: 40px;
}

.profile ul li:nth-of-type(2){
	width: calc(100% - 220px - 40px);
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 150%;
}


@media (max-width: 991px) {
	
.pro_title{
	left:50%;
	top: -30px;
	transform: translateX(-50%);
	padding: 10px 30px 10px;
}
	
.pro_title h2, .pro_title h5{
	text-align: center;
}

.profile{
	padding: 10px;
	margin-left: 0px;
}
	
.profile ul{
	padding:130px 40px 50px 40px;
}

}


@media (max-width: 599px) {
.profile ul li:nth-of-type(1){
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
	padding-top: 80%;
	background: url(../profile_01.jpg) no-repeat center left;
	background-size: cover;
}
	
.profile ul li:nth-of-type(1) img{
	display: none;
}

.profile ul li:nth-of-type(2){
	width: calc(100%);
	
}
}

@media (max-width: 575px) {
.profile ul{
	margin: 0 ;
	padding-left: 20px;
	padding-right: 20px;
}

.pro_title h2{
	font-size: 36px;
}

}




/*======================最新消息========================*/

.newslist{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-flow: row wrap;
}

.newslist li{
	width: calc(100%/3 - 15px);	
	margin: 0 calc(15px*3/2) 40px 0;
	transition: all 0.5s;
}

.newslist li:nth-of-type(3n){
	margin-right: 0;
}

@media (max-width: 991px) {
.newslist li{
	width: calc(100%/2 - 15px);	
	margin: 0 calc(15px*2) 40px 0;
}
	
.newslist li:nth-of-type(3n){
	margin-right:auto;
}

.newslist li:nth-of-type(2n){
	margin-right:0;
}

}


@media (max-width: 575px) {
.newslist li{
	width: calc(100%);	
	margin: 0 0 40px 0;
}
}


.newslist li a{
	display: flex;
	transition: all 0.5s;
}

.newslist li:hover a, .newslist li:hover p{
	color: #84c125;
}

.newslist li .icon{
	width: 50px;
	height: 50px;
	position: relative;
	border: #CECECE solid 1px;
}

.newslist li .icon span{
	width: 50px;
	height: 50px;
	position: absolute;
	top:5px;
	left: 5px;
	padding: 10px;
	margin-bottom: 15px;
	color: #fff;
	font-size: 20px;
	background: #6F9A2F;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.newslist li:nth-of-type(even) .icon span{
	background: #015c3b;
}

.newslist li .title{
	width: calc(100% - 60px);
	padding: 5px 0 5px 30px;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: bold;
}

.newslist li .title .date{
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 2px;
	color: #999;
}

.newslist li p{
	width: 100%;
	color: #666;
	font-size: 14px;
	transition: all 0.5s;
}






.newscon{
}

.newscon .title{
	position: relative;
	text-align: center;
	font-weight: 500;
	font-family: 'Noto Sans TC', sans-serif; 
	margin: 0 0 70px;
}

.newscon .title::after{
	content: "...";
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 50px;
	color: #85c225;
	letter-spacing: 8px;
}


.btn {
    display: inline-block;
    padding: 8px 20px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 20px;
}

.btn-primary {
    color: #fff;
    background-color: #015c3b;
    border-color: #015c3b;
	
	transition: all 0.3s;
}

.btn-primary:hover {
    color: #fff;
    background-color: #85c225;
    border-color: #85c225;
}







/*======================特調飲品========================*/

.drink{
	display: flex;
	flex-flow: row wrap;
}

.drink > span{
	display: block;
}

.drink > span:nth-of-type(1){
	width: 220px;
}

.drink > span:nth-of-type(2){
	width: calc(100% - 220px);
	padding-left: 50px;
}

@media (max-width: 767px) {
.drink > span:nth-of-type(1){
	width: 100%;
}

.drink > span:nth-of-type(2){
	width: calc(100%);
	padding-left: 0;
}
}

.drink .title{
	margin: 0 0 20px;
	font-weight: 500;
	font-family: 'Noto Sans TC', sans-serif; 
}

.drink .title02{
	color: #9da036;	
	text-align: center;
	margin: 0 0 20px;
	padding: 8px 15px;
	font-size: 16px;
	font-weight: bold;
	border:#d0d547 solid 1px;
	border-radius: 20px;
}

.drink .title03{
	color: #9da036;	
	border-bottom: #d0d547 double 4px;
	text-align: center;
	font-size: 20px;
	padding: 10px 0;
	font-weight: bold;
	margin-bottom: 30px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}



.drinklist{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-flow: row wrap;
}


.drinklist li{
	width: calc(100%/4 - 10px);
	margin: 0 calc(10px*4/3) 15px 0;
	text-align: center;
}

.drinklist li:nth-of-type(4n){
	margin-right: 0;
}

.drinklist li .pic{
	padding-top: 70%;
	margin-bottom: 10px;
	border-radius: 3px;
	
	transition: all 0.3s;
}

.drinklist li:hover .pic{
	filter: brightness(1.1);
}

.drinklist li p{
}





/*===========================產品介紹===========================*/


.producttitle{
	font-size: 28px;
	font-weight: 500;
	margin:0 0 40px;
	text-transform: uppercase;
}

.product{
	display: flex;
	flex-flow: row wrap;
}

.product .form{
	width: calc(50% - 7.5px);
	margin: 0 15px 15px 0;
}

.product .form:nth-of-type(2n){
	margin-right: 0;
}

@media (max-width: 1199px) {
.product .form{
	width: 100%;
	margin: 0 0 20px 0;
}

.product .form:nth-of-type(2n){
	margin-right: 0;
}
}




.style01{
	border-collapse: collapse;
}


.style01 tr th{
	padding: 8px 15px;
	background: #025b3a;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	border: #fff solid 2px;
}

.style01 tr th:nth-of-type(1){
	width: 30%;
}

.style01 tr td{
	padding: 8px 15px;
	text-align: center;
	border: #fff solid 2px;
	background: #fffeea;
}

.style01 tr:nth-of-type(even) td{
	background: #f9f1e2;
}

.style01 tr td.category{
	color: #fff;
	font-weight: bold;
	background: #dcc27a;
}





@media (max-width: 767px) {

.style01 tr{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
}

.style01 tr th:nth-of-type(1){
	width:50%;
}

.style01 tr th, .product table tr td{
	width: 50%;
	display:flex;
	text-align: left;
}

.style01 tr td.category{
	width: 100%;
	align-items: center;
}

.style01 tr td.category img{
	display: inline-block;
	margin-right: 8px;
}

}




.tips{
	display: flex;
	border: #DADADA solid 6px;
}

.tips dt{
	padding: 10px 15px;
	white-space: nowrap;
	text-transform: uppercase;
}

.tips dd{
	padding: 10px 15px;
}

.tips dd span:not(:last-of-type){
	display: block;
	margin-bottom: 8px;
}

@media (max-width: 479px) {
.tips{
	flex-flow: column;
}
}







/*=========================== OEM =============================*/


.oem{
	
}

.oem h3{
	font-size: 28px;
	margin: 0 0 40px;
	font-weight: bold;
}

.oem ul{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-flow: row wrap;
}

.oem ul li{
	width: calc(100%/3);
	padding: 0 40px;
	border-right: #B7B7B7 dashed 1px;
	text-align: center;
}

.oem ul li:last-of-type{
	border-right: 0;
}

@media (max-width: 991px) {
.oem ul li{
	width: calc(100%/3);
	padding: 0 15px;
	border-right: #B7B7B7 dashed 1px;
	text-align: center;
}
}

@media (max-width: 575px) {
.oem ul li{
	width: calc(100%);
	padding: 30px 15px;
	border-right: 0;
	border-bottom: #B7B7B7 dashed 1px;
	text-align: center;
}
}

.oem ul li .num{
	font-size: 52px;
	color: #a7a7a7;
	font-family: 'Petit Formal Script', cursive;
}

.oem ul li h4{
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 150%;
}



.oem .pic{
	position: relative;
}

.oem .pic::after{
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: #fff dashed 4px;
}






























/* ======================聯絡我們========================== */

.contact_info{
	margin: 0 auto;
}

@media(min-width:1200px){
	.contact_info{
		width: 70%;
	}
}

@media(max-width:1199px){
}

.contact_info h4{
	color:#bfab97;
	font-weight:400;
	margin:0 0 6px;
}

.contact_info p{
	color:#333;
	margin:0 0 15px;
}





.registered{
	padding: 0 20px;
}

@media(min-width:1200px){
	.registered{
		padding: 0 60px;
	}
}

@media(min-width:992px) and (max-width:1199px){
	.registered{
		padding: 0 30px;
	}
}

.registered select{
	width:  calc(100% - 30px);
	height: 34px;
	display: block;
	position: relative;
	line-height: 32px;
	background-color: #efefef;
	border-radius: 4px;
	border: solid 0px #dfdfdf;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 14px;
	font-weight: normal;
	outline: none;
	padding-left: 18px;
	padding-right: 30px;
	margin: 0 15px 10px;
	text-align: left !important;
	
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}


.registered h4{
	margin:0 0 30px;
	font-weight:400;
	color:#333;
}

.registered ul{
	margin:0;
	padding:0;
}

.registered ul li{
	list-style-type:none;
	margin-bottom:15px;
	font-size:14px;
}

























/* Pagination
----------------------------------------------------------*/
.pagination {
	text-align: center;
	display: block;
	padding: 30px 0 40px;
}
.pagination > li {
	display: inline-block;
}
.pagination > li > a, .pagination > li span {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: none !important;
	width: 34px;
	height: 34px;
	text-align: center;
	padding: 7px 3px;
	font-family: "Montserrat", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: inherit;
}
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li span:hover, .pagination > li span:focus {
	background: transparent;
	color: #6f9a2f;
}
.pagination > li.active > a, .pagination > li.active span {
	background: #015c3b;
	color: #fff;
}
.pagination > li:first-child a, .pagination > li:last-child a {
	margin: 0 2px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: transparent;
	color: #015c3b;
	font-size: 14px;
	font-weight: 600;
}







/*=====================================================================================
快選外內距
======================================================================================*/

.ptop5 { padding-top: 5px;}
.ptop50 { padding-top: 50px;}
.ptop100 { padding-top: 100px;}
.pbottom50 { padding-bottom: 50px;}
.pbottom70 { padding-bottom: 70px;}
.pbottom80 { padding-bottom: 80px;}
.pright0 { padding-right: 0;}
.pright5 { padding-right: 5px;}
.pright10 { padding-right: 10px;}
.pright15 { padding-right: 15px;}
.pright20 { padding-right: 20px;}
.pright25 { padding-right: 25px;}
.pright30 { padding-right: 30px;}
.pleft0 { padding-left: 0;}
.pleft5 { padding-left: 5px;}
.pleft10 { padding-left: 10px;}
.pleft15 { padding-left: 15px;}
.pleft20 { padding-left: 20px;}
.pleft25 { padding-left: 25px;}
.pleft30 { padding-left: 30px;}



.mauto { margin: 0 auto;}
.m0 { margin: 0 !important;}
.mtop5 { margin-top: 5px;}
.mtop10 { margin-top: 10px;}
.mtop15 { margin-top: 15px;}
.mtop20 { margin-top: 20px;}
.mtop25 { margin-top: 25px;}
.mtop30 { margin-top: 30px;}
.mtop40 { margin-top: 40px;}
.mtop50 { margin-top: 50px;}
.mtop70 { margin-top: 70px;}
.mtop100 { margin-top: 100px !important;}
.mtop106 { margin-top: 106px !important;}
.mtop130 { margin-top: 130px !important;}
.mbottom0 { margin-bottom: 0 !important;}
.mbottom5 { margin-bottom: 5px !important;}
.mbottom10 { margin-bottom: 10px !important;}
.mbottom15 { margin-bottom: 15px !important;}
.mbottom20 { margin-bottom: 20px !important;}
.mbottom25 { margin-bottom: 25px !important;}
.mbottom30 { margin-bottom: 30px !important;}
.mbottom35 { margin-bottom: 35px !important;}
.mbottom40 { margin-bottom: 40px !important;}
.mbottom50 { margin-bottom: 50px !important;}
.mbottom60 { margin-bottom: 60px !important;}
.mbottom70 { margin-bottom: 70px !important;}
.mbottom80 { margin-bottom: 80px !important;}
.mbottom90 { margin-bottom: 90px !important;}
.mbottom100 { margin-bottom: 100px !important;}
.mleft5 { margin-left: 5px;}
.mleft10 { margin-left: 10px;}
.mleft15 { margin-left: 15px;}
.mleft20 { margin-left: 20px;}
.mleft25 { margin-left: 25px;}
.mleft30 { margin-left: 30px;}
.mleft50 { margin-left: 50px;}
.mleft60 { margin-left: 60px;}
.mleft65 { margin-left: 65px;}
.mleft80 { margin-left: 80px;}
.mleft85 { margin-left: 85px;}
.mleft90 { margin-left: 90px;}
.mleft160 { margin-left: 160px;}
.mleft230 { margin-left: 230px;}
.mleft240 { margin-left: 240px;}
.mright5 { margin-right: 5px;}
.mright10 { margin-right: 10px;}
.mright15 { margin-right: 15px;}
.mright20 { margin-right: 20px;}
.mright25 { margin-right: 25px;}
.mright30 { margin-right: 30px;}
.mright40 { margin-right: 40px;}
.mright50 { margin-right: 50px;}
.mright60 { margin-right: 60px;}