@charset "utf-8";

/* CSS Document */
body{font-family:'Noto Serif TC', sans-serif ,'微軟正黑體',sans-serif;font-size:16px;line-height:1.5;color:#333}
a{color:#000;text-decoration:none!important}
a:hover{color:#777;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/

/* 回頂端 */
#goTop{border:1px solid #CCC;color:#aaa;background:#FFF;text-align:center;position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:50px;cursor:pointer;display:none;font-family:Verdana,Geneva,sans-serif;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:#EEE 0 0 5px;-moz-box-shadow:#EEE 0 0 5px;box-shadow:#EEE 0 0 5px}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
@media screen and (max-width: 640px) {
#goTop{width:100%;left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #eee}
}

/*RWD編輯器表格(X捲軸)*/
.table-container table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
.table-container{width:100%;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}
.scrollbar-style::-webkit-scrollbar-track,
body::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color:#eee;
}
.scroll02::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px #eee;
    background-color:#eee;}
.scroll02::-webkit-scrollbar{width: 4px;}

.scrollbar-style::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb, .scroll02::-webkit-scrollbar-thumb,.d_menu_h::-webkit-scrollbar-thumb
{
    background-color:#438e33;
}

body::-webkit-scrollbar{width:8px;}
.d_menu_h{overflow-y: auto; max-height: 200px;}

.d_menu_h::-webkit-scrollbar,
body::-webkit-scrollbar
{
    width: 4px;
    background-color:#eee;
}
/*---------------------- 頁面開始 ----------------------*/

/*全頁佈局*/
.wrapper {padding: 3em 0 0;/* margin-bottom: 20px; */}
main {margin-bottom: 383px;background-color: #fff;overflow: hidden;}
.container01{max-width: 1500px;margin: 0 auto;}
.green01{background-color: #7FB43A;}
.green02{background-color: #438E33;}
.green03{background-color: #6D9D32;}
.green04{background-color: #CCDB2B;}
.brown01{background-color: #665232;}
.brown02{background-color: #977248;}

/*header*/
nav{width: 76%;padding:0!important;margin:0 auto;}
.navbar-brand{background-color:#7FB43A;padding: 43px 5px;margin-right: 0;color: #fff;width: 240px;position: relative;-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;}
.navbar-brand:hover{color: #fff;}
.navbar-brand:before{position:absolute;content:'';width:0;height:0;border-top: 26px solid #6D9D32;border-left:0 solid transparent;border-right:20px solid transparent;bottom:0;right:-20px;z-index: -2;}
.navbar-brand span{font-size: 13px;}
.navbar-right{width: calc(100% - 200px);-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition: all .4s  linear;}
.header-slogan{margin-left: 15px;margin-bottom: 10px;opacity:1; -o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;}
.header-slogan span{font-size: 15px;color: #ffffff;}
.header-slogan span b{color: #438e33;font-weight:initial;}
.header-slogan span+span{position:relative;padding-left: 20px;}
.header-slogan span+span:before{position:absolute;content:'/';left: 6px;opacity: .3;top: 1px;font-size: 12px;}
.menu-box{background-color:#fff;width:100%;box-shadow: 0 0 25px rgba(51, 51, 51, .2);}
.menu-box li{width:100%;text-align: center;}
.menu-box li+li{position: relative;}
.menu-box li+li:before{position:absolute;content:'';width: 1px;height: 100%;background-color: #eee;left: 0;}
.nav-link{padding: 18px 0;font-size: 15px;}
.menu-box .active a,.nav-link:hover{color: #438e33;}
.lan-box a{opacity:.5}
.lan-box a.active{opacity:1}
.lan-box a+a{margin-left: 13px;position: relative;}
.lan-box a+a:before{position:absolute;content:'';width: 10px;height:1px;background-color: #689e36;left: -11px;top: 50%;}
.lineme{background-color: #438e33;}
.lineme a{color:#fff;}
.line-icon i{font-size: 30px;line-height: 33px;color: #ffffff;}
@media(min-width: 991px){
    .mobile-top{display: none!important;}
    .navbar.change .header-slogan{display:none;opacity: 0;margin-bottom: 0;}
    .navbar.change .navbar-brand{padding:15px 20px}
    .change .navbar-right{margin-top: -24px;}
    footer+.lineme{display: none;}
}
/*banner*/
.carousel-inner{overflow:initial}
.fill{height: 45vw;}
.slogan{width: 740px;position:absolute;color:#fff;z-index: 5;top: 50%;transform: translateY(-50%);left: 8%;letter-spacing: 1px;text-shadow: 0 0 6px rgba(34, 34, 34, 0.8);}
.slogan:before{position:absolute;content:'';width:100%;height:2px;bottom: -30px;left: 220px;background-color: #fff;background: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .7),rgba(255, 255, 255, 0)100%);background: linear-gradient(90deg,rgba(255, 255, 255, .7),rgba(255, 255, 255, 0)100%);}
.slogan h3,.slogan h4{font-size: 2.2rem;}
.slogan h4{margin-top: 30px;margin-left: 70px;line-height: 1.5;pointer-events: none;}
.slogan h3{position: relative;}
.slogan h3:before{position:absolute;content:'';width:50%;height: 2px;right: 50px;top: 50%;background-color: #fff;background: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .7),rgba(255, 255, 255, 0)100%);background: linear-gradient(90deg,rgba(255, 255, 255, .7),rgba(255, 255, 255, 0)100%);}
.sm-img{position:absolute;bottom: -30px;z-index: 3;border-radius: 5px;}
.dex-banner03 .sm-img{right: 30px;pointer-events: none;width: 550px;box-shadow: 0 0 50px rgba(76, 76, 76, 0.5);}
.Bimg-box{position:relative}
.carousel-item02 br{display:none}
.banner-iso{position:absolute;z-index: 3;}
.dex-banner01 .banner-iso{right: 100px;bottom: -40px;width: 380px;}
.dex-banner02 .banner-iso{left: 400px;bottom: -40px;width: 500px;}
.ba-iso-img{pointer-events: none;margin: 0 10px 20px;padding: 15px;background: rgba(255, 255, 255, .75);border-radius: 5px;box-shadow: 0 0 50px rgba(76, 76, 76, 0.5);}
.dex-banner01 .ba-iso-img:nth-of-type(3){margin-left: -70px;}
.dex-banner02 .ba-iso-img:nth-of-type(4){margin-left: -70px;}
/*footer*/
footer{position: fixed;bottom: 0;left: 0;width: 100%;z-index: -5;}
footer:before{position:absolute;content:'';background-image:url(../images/all/deco.jpg);width: 100%;height: 100%;opacity: .3;}
.footer-top{background-color: #c7d2c2;padding: 75px 30px;position: relative;text-align: center;}
.footer-top h1{font-size: 22px;letter-spacing: 1px;margin-bottom: 0;color: #438E33;position: absolute;width: 100%;left: 0;top: 50%;}
.footer-top h2{font-family: 'Libre Baskerville', serif;font-weight: 700;font-style: italic;opacity: .7;color: #fff;}
.footer-box{position:relative;padding: 70px 30px 30px;background-color: rgba(239, 239, 239, 0.5);}
.footer-box:before{position:absolute;content:'';background-image: url(../images/all/tea-leaf.png);background-size: contain;width: 360px;height: 270px;right: 0;bottom: 0;z-index: -1;opacity: .5;}
footer ul{margin-bottom:0;padding-left:0;list-style:none}
.copyright{background-color: rgba(101, 103, 98, 0.2);padding: 30px 30px 20px;font-family: 'Libre Baskerville', serif;position: relative;font-size: 13px;text-align: right;}
.copyright .color-bar{width: 400px;position:absolute;right: 0;top: -2px;}
.color-bar{height:5px;}
.color-bar span:nth-of-type(1){width:40%}
.color-bar span:nth-of-type(2){width:10%}
.color-bar span:nth-of-type(3){width:5%}
.color-bar span:nth-of-type(4){width:10%}
.color-bar span:nth-of-type(5){width:20%}
.color-bar span:nth-of-type(6){width:10%}
.color-bar span:nth-of-type(7){width:5%}
.copyright a{color:#fff}
.com-info+.com-info{border-bottom:1px solid rgba(212,212,212,.5);padding-bottom:15px}
.com-info li+li{margin-left:25px}
.com-info li span{display:inline-block;color:#b5b5b5;font-size:15px;margin-right:10px}
.iso-box li{margin:0 10px}
/*頁碼*/
.page_01{margin-right:50px;}
.page_01 a{margin: 0 8px 25px;background-color: rgb(227, 227, 227);border-radius: 1px;padding: 2px 8px;color: #747474;}
.page_01 a.num{position: relative;}
.page_01 a:hover{color: #000000;text-decoration:none}
.page_01 a.num:before{position:absolute;content:'';width: 50%;height: 2px;bottom: -2px;left: 50%;transform: translateX(-50%);}
.page_01 a.on.num:before{background-color: #438e33;}
/*內頁*/
.container02{max-width: 85%;margin-left:auto;}
.inner-banner{height: 24vw;background-size:cover!important;}
.inner-title{margin-bottom:70px;}
.inner-title h3{display: table;position: relative;margin-bottom: 0;}
.inner-title p:before{position:absolute;content:'';width: 100%;height: 1px;background-color: rgba(67, 142, 51, .8);background: #0a99d9;background: -webkit-linear-gradient(90deg,#49c89a,rgb(10, 153, 217)100%);background: linear-gradient(90deg,rgba(67, 142, 51, .8),rgba(67, 142, 51, 0)100%);left: 0;bottom: 0;}
.inner-title p{font-family:'Libre Baskerville',serif;font-size: 15px;color: #b3b3b3;font-weight: 600;margin: 15px 0 0 20px;position: relative;}
.btn_style_01{position: relative;display: table;}
.btn_style_box{overflow: hidden;width: 95px;height: 40px;text-align: center;}
.btn_style_box span{display:block;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;-o-transition:-o-transform .4s;transition:transform .4s;-webkit-transition-timing-function:cubic-bezier(.6,0,.3,1);-moz-transition-timing-function:cubic-bezier(.6,0,.3,1);-o-transition-timing-function:cubic-bezier(.6,0,.3,1);transition-timing-function:cubic-bezier(.6,0,.3,1);color: #977248;font-size: 15px;z-index: 1;line-height: 40px;}
.btn_style_box span:nth-of-type(2){font-family: 'Libre Baskerville', serif;color: #665232;}
.pro-card a:hover .btn_style_01 span,.btn_style_01:hover span{-webkit-transform:translate3d(0,-100%,0); -moz-transform:translate3d(0,-100%,0); -o-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0)}
/*包裝*/
.w-92 {width: calc(92% - 40px);}
.page-content{position:relative}
.page-content  h4{position: absolute;background-color: #977248;color: #fff;padding: 5px 25px;top: -20px;left: 20px;margin-bottom: 0;}
.page-content h4:before{position:absolute;content:'';width: 0;height:0;right: -12px;top: 0;border-bottom: 21px solid #665232;border-left:0 solid transparent;border-right: 12px solid transparent;}
.page-content h4+article>p:nth-of-type(1) {padding-top: 35px;border-top: 2px solid #eee;}
.page-content h4+article>figure+p:nth-of-type(1){padding-top:0;border-top:0}
.page-content table { max-width:100%; }
.imgg { max-width:100%; display:block; margin:1em 0; }
.imgg2 { max-width:100%; display:block; }
.tx01 { clear: both; margin-bottom:2em;}
.tx02 { clear: both; overflow:hidden; margin-bottom: 2em;}
.tx01 img {/* margin-bottom: 1em; */}
.img-left,.img-left1 { float: left; padding-bottom: 1em; padding-right: 2em;max-width:50%;}
.img-right,.img-right1 { float: right; padding-bottom: 1em; padding-left: 2em;max-width:50%;}
.img_center{width: 33.3%; }
.img-left img, .img-right img { max-width:100%; }
.img-left1 img, .img-right1 img { max-width:100%; }
.img_center img {  float: left;  padding: 1em;  width: 100%;   text-align: center;}
/*茶原料*/
.tea-leaves{position:absolute;z-index:1}
.tea-leaves01{left: 9%;width:150px;top:-30px;}
.tea-leaves02{right: 3%;width:100px;top: 100px;}
.tea-leaves03{right:0;width:100px;top:300px;z-index:-1;}
.tea-leaves04{left: 4%;width:100px;top:60px;}
.tea-leaves05{left: 8%;width:100px;top: 300px;z-index:-1;opacity: .7;}
.tea-leaves06{right: 80px;width: 140px;bottom: 100px;opacity: .5;z-index: -1;}
.pro-box-all{position:relative;z-index: 0;}
.pro-box-all:before{position:absolute;content:'';width:100%;height: calc(100% - 50px);background-color:#eee;z-index: -5;top:50px;}
.pro-box{list-style:none;padding-left:0;margin-bottom:0;margin-left: -20px;padding-right: 30px;}
.pro-card{width: calc(100% / 4 - 40px);margin: 0 20px 35px;}
.pro-card figure{margin-bottom: 0;position:relative;z-index: 0;}
.pro-card figure .pro-first{-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;}
.pro-card figure .hover-pro{position:absolute;left:0;z-index: -1;-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;}
.pro-card a{text-decoration:none}
.pro-info{border-bottom:1px solid #ddd;padding-bottom: 10px;}
.pro-info h4{font-size: 18px;font-weight:normal;padding: 5px 15px;display: table;color: #fff;position: relative;margin-top: -20px;margin-left: -10px;}
.pro-info h4:before{position:absolute;content:'';width:0;height:0;border-top: 24px solid #3a762e;border-left:0 solid transparent;border-right:20px solid transparent;bottom:0;right:-20px;z-index: -2;}
.pro-info h5{font-size: 15px;font-weight:normal;line-height: 1.5;letter-spacing: 1px;color: #6d6d6d;margin: 10px 0 0;}
.pro-card a:hover img+.pro-first{opacity:0}
/*茶底層*/
.product-img {width: 37%;float: left;}
.product-img .img-focus {text-align: center;position:relative;margin-bottom: 20px;}
.product-img .img-thumb {list-style:none;padding:0;margin: 0 -10px;width: 90%;}
.product-img .img-thumb li {width: calc(100% / 3 - 20px);margin: 0 10px;}
.pro-text-box{width:55%;margin-left:-40px;float:left;padding:40px 40px 40px 90px;background-color:#438E33;box-shadow:0 5px 25px -5px rgba(173,173,173,0.8);position:relative;margin-top:-30px;z-index:-1;color:#fff}
.pro-text-box:before{position:absolute;content:'';width:50px}
.pro-name{font-size:22px;margin-bottom:15px;border-bottom:1px solid #fff;padding-bottom:5px}
.pro-text{letter-spacing:1px;line-height:1.7}
/*contact*/
.contact-t span:nth-of-type(1){
    font-size: 18px;
}
.sample{
    color: #438e33;
    font-style: italic;
}
.contact-t .red{font-size:14px;}
.red{color: #848484;}
.contact-box{padding-right:40px}
.cpmpany-info{list-style:none;padding-left:0;margin: 0 0 50px;}
.cpmpany-info li{width:calc(100% / 4 - 30px);background-color:rgba(255,255,255,.5);padding:30px;text-align:center;box-shadow:0 5px 20px -2px rgba(153,153,153,0.35);-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;word-wrap: break-word;}
.cpmpany-info li:hover{background-color:rgba(255,255,255,.7);box-shadow:0 5px 20px -2px rgba(153,153,153,0.55)}
.cpmpany-info li a{display:block}
.cpmpany-info li span{display:block;position: relative; width:60px;height:60px;line-height:60px;border-radius:60px;background-color:rgba(127,180,58,.7);color:#fff;margin:0 auto 25px}
.cpmpany-info li span:before{position: absolute;content:'';width: 55px;height: 55px;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 2px solid rgba(255, 255, 255, .5);border-radius:60px}
.border-box {border: 1px solid #665232;}
.map-box iframe{vertical-align: bottom;}
.textarea{height:150px;padding:2.5em .15em 1em!important}
/*輸入框樣式*/
.input {
	position: relative;
	z-index: 1;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
.con_block_l{float: left;width: 49%;}
.con_block_r{float: right;width: 49%;}
.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #ffffff;
	color: #aaa;
	font-weight: bold;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #7fb43a;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1em 0 0;
	width: 100%;
	font-size: 16px;
	color: #7e7e7e;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

input:-internal-autofill-selected{
	background-color: transparent!important;
}
/* Hoshi */
.input--hoshi {overflow: hidden;}
.input__field--hoshi {margin-top: 1em;padding: 2em 0.15em 1em;width: 100%;background: transparent;color: #257123;line-height: 30px;}
.input__label--hoshi {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.25em;
	width: 100%;
	height: calc(100% - 1em);
	text-align: left;
	pointer-events: none;
}
.input__label-content--hoshi {position: absolute;}

.input__label--hoshi::before,
.input__label--hoshi::after {
	content: '';
	position: absolute;
	top: 0;
	left:-1px;
	width: 100%;
	height: calc(100% - 10px);
	border-bottom: 1px solid #7fb43a;
}

.input__label--hoshi::after {
	margin-top: 2px;
	border-bottom: 4px solid red;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}


.input__label--hoshi-color-3::after {
	border-color: #438E33;
}

.input__field--hoshi:focus + .input__label--hoshi::after,
.input--filled .input__label--hoshi::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
.input--filled .input__label-content--hoshi {
	-webkit-animation: anim-1 0.3s forwards;
	animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}

@keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}
/*rwd開始*/
@media(max-width: 1600px){
    .ba-iso-img {width: 120px;}
    .dex-banner01 .banner-iso {width: 320px;}
    .dex-banner02 .banner-iso {width: 450px;}
}
@media(max-width: 1500px){
    .container01,.container02{max-width: 1100px;margin: 0 auto;}
    main{margin-bottom:363px}
    .contact-box{padding-right:0}
    .w-92{width:100%}
    /*banner*/
    .slogan{width: 600px;}
    .slogan h3,.slogan h4{font-size:1.7rem}
    .slogan h4{margin-top: 15px;}
    .slogan:before{left: 100px;bottom:-20px;width: 90%;}
    .dex-banner02 .banner-iso{left:350px}
    .ba-iso-img{padding:10px}
    .dex-banner03 .sm-img{width: 500px;}
    /*茶原料*/
    .pro-box{margin-left: 0;padding-right: 0;}
    .pro-card{width: calc(100% / 3 - 30px);margin: 0 15px 35px;}
    .tea-leaves{z-index:-1;opacity:.5}
    .tea-leaves01{left: 6%;}
    .tea-leaves02{left: auto;right: 50px;}
    .tea-leaves03{right: 9.5%; top: 650px;}
    .tea-leaves04{left: 3%;top: 180px;}
    .tea-leaves05{left: 9.5%;top: 450px;}
    /*茶底層*/
    .product-img{width:40%}
    .pro-text-box{width:calc(60% + 40px)}
}
@media(max-width: 1200px){
     .container01,.container02{max-width: 950px;}
     main{margin-bottom: 345px;}
     .dex-banner01 .banner-iso{width:250px}
    /*header*/
    nav {width: 95%;}
    /*banner*/
    .slogan{left:3%;top: 55%;}
    .slogan h3,.slogan h4{font-size:1.5rem}
    .slogan h4{margin-top: 10px;margin-left: 50px;}
    .slogan:before{bottom:-15px;left: 150px;}
    .dex-banner03 .sm-img{width: 450px;}
    .dex-banner02 .banner-iso{left:10%;width: 380px;bottom: -60px;}
    .ba-iso-img {width: 100px;margin: 0 9px 15px;}
    /*茶原料*/
    .tea-leaves01{left: 0;top: -68px;width: 120px;}
    .tea-leaves02{left: 5px;width: 90px;}
    .tea-leaves03{right: 5px;}
    .tea-leaves04{left: auto;right: 5px;}
    .tea-leaves05{left: 370px;top: 370px;}
}
@media(max-width: 991px){
    .container01,.container02{max-width:100%;padding: 0 20px;}
     main{margin-bottom: 0;}
    /*header*/
    nav{width:100%}
    nav.fixed-top:before{position:absolute;content:'';width:100%;height: 77px;background-color: #ffffff;top:0;z-index: 0;-o-transition: all .3s linear;-webkit-transition: all .3s linear;-moz-transition: all .3s linear;transition:  all .3s linear;}
    .navbar-toggler-icon{height:3px;width:2em;position:relative;background-color:#438e33;border-radius:11px}
    .navbar-toggler-icon:before,.navbar-toggler-icon:after{position:absolute;content:'';width:100%;height:100%;left:0;border-radius:11px}
    .navbar-toggler-icon:before{background-color:#7fb43a;top:-10px}
    .navbar-toggler-icon:after{background-color:#6d9d32;bottom:-10px}
    .navbar-right .header-slogan{display:none}
    .navbar-brand{padding: 28px 20px;margin-left:15px;position: relative;z-index: 1;}
    .mobile-top{position:absolute;width:100%;top:0;border-bottom:1px solid #e3e3e3;z-index:0;left:0}
    .change .mobile-top{display:none!important}
    .change .navbar-brand{padding:15px 20px}
    .change .navbar-brand:before{border-top: 21px solid #6D9D32;}
    nav.change.fixed-top:before{height:56px}
    .change button.navbar-toggler{margin-top:-25px}
    .header-slogan{margin:0}
    .lan-box .nav-link{padding:5px 15px}
    .lan-box{background-color:#eee}
    .header-slogan span{color:#747474}
    .navbar-right{width:100%;margin-top: -24px;}
    li.lan-box{display: none!important;}
    .menu-box{box-shadow: none;background-color: #f1f3f1;}
    .menu-box li+li{border-top: 1px solid #fff;}
    li.lineme{display: none;}
    .lineme{width:100%;position:fixed;bottom:0;box-shadow: 0 -1px 8px rgba(18, 53, 8, 0.3);}
    .lineme a{padding:10px 0}
    /*banner*/
    .carousel-inner,.inner-banner {margin-top: 78px;}
    .slogan{top: 50%;}
    .sm-img{width: 330px;right: 30px;bottom: -20px;z-index: 5;}
    .slogan h4{margin-left:30px}
    .slogan h3, .slogan h4{font-size: 1.3rem;}
    .dex-banner03 .sm-img{width: 360px;right: 20px;}
    .dex-banner02 .banner-iso{display: none!important;}
    /*footer*/
    footer{position:relative;padding-bottom: 54px;}
    .footer-top{padding: 60px 20px;}
    .footer-box{padding: 50px 0;}
    .iso-box li{margin:0}
    /*茶底層*/
    .pro-text-box{padding-left: 70px;}
    /*聯絡我們*/
    .cpmpany-info li{width: calc(100% / 4 - 10px);}
}
@media(max-width: 768px){
    /*banner*/
     .slogan{width: 100%;left: 0;bottom: -103px;top: auto;transform: initial;background-color: #438e33;padding: 30px 10px 20px;text-align: center;}
     .slogan:before{top: -30px;bottom: auto;width: 2px;height: 50px;left: 50%;}
     .slogan h3:before{display:none}
     .slogan h3, .slogan h4{font-size: 18px;}
     .slogan h3{margin-bottom: 5px;}
     .slogan h4{margin: 0;}
     .sm-img{width:280px}
     .carousel-item02 br{display:block;}
     .carousel-item02 span{display:none}
     .dex-banner03 .sm-img{width: 280px;bottom: -5px;right: 15px;}
     .dex-banner01 .banner-iso{display: none!important;}
    /*footer*/
    #myCarousel+.footer-top{margin-top: 102px;padding: 30px 20px;}
    .footer-top h2{font-size: 1.7rem;}
    .footer-top h1{font-size: 20px;position: relative;margin-top: -21px;}
    .footer-box{padding: 20px 0;}
    .com-info.mb-3{margin-bottom: 0!important;}
    .com-info{flex-wrap: wrap;-ms-flex-wrap:wrap;}
    .com-info li{width:100%;text-align: center;}
    .com-info li+li{margin: 8px 0 0;}
    .iso-box{flex-wrap:wrap;-ms-flex-wrap:wrap;}
    .copyright{text-align:center;}
    /*頁碼*/
    .page_01{-webkit-justify-content: center!important;justify-content: center!important;margin: 40px 0 0;}
    /*茶原料*/
    .inner-banner{height: 25vw;}
    .inner-title{-webkit-justify-content: center;justify-content: center;flex-wrap: wrap;-ms-flex-wrap:wrap;}
    .inner-title h3{width:100%;text-align: center;margin-bottom: 6px;}
    .inner-title p{display: table;margin: 0 auto;font-size: 14px;}
    .pro-card{width: calc(100% / 2 - 30px);margin: 0 15px 20px;}
    /*茶底層*/
    .product-img{float:none;width:80%;margin:0 auto}
    .product-img .img-thumb{width:100%;margin: 0 auto;}
    .pro-text-box{width:100%;margin:-50px auto 0;padding:85px 30px 30px}
    .pro-name{text-align:center}
    .detail-top+.btn_style_01{margin:0 auto}
     /*包裝*/
     .page-content h4{font-size: 1.3rem;}
     /*聯絡我們*/
    .cpmpany-info{flex-wrap:wrap;-ms-flex-wrap:wrap;}
    .cpmpany-info li{width: calc(100% / 2 - 10px);margin-bottom: 20px;padding: 25px;}
}
@media(max-width: 575px){
    .header-slogan{display:none}
    .iso-box li {width: calc(100% / 5);}
    .dex-banner03 .sm-img{width: 180px;}
    /*header*/
    .navbar-brand{padding: 10px 26px 0;margin-left:0;height: 78px;width: 200px;}
    nav.fixed-top:before{height: 77px;}
    .navbar-brand:before{border-top:10px solid #6D9D32;border-right:10px solid transparent;right:-10px;display: none;}
    button.navbar-toggler{margin-top: 26px;}
    .navbar-right{margin-top: 0px;}
    .change .navbar-brand{padding: 11px 20px;height: 63px;}
    .change button.navbar-toggler{margin-top: -15px;}
    .navbar-brand img.mb-1{margin-bottom: -3px!important;}
    .carousel-inner,.inner-banner{margin-top: 78px;}
    .sm-img{width: 200px;right: 15px;bottom: -10px;}
    .footer-top{padding: 15px 20px;}
    .copyright .color-bar{width:350px}
    .product-img .img-thumb li{width:calc(100% / 3 - 10px);margin:0 5px}
    .product-img .img-focus{margin-bottom:10px}
    .pro-text-box{padding:70px 25px 25px;margin-top:-40px}
    /*圖文*/
    .img-left, .img-left1,.img-right, .img-right1{float: none;max-width: 100%;padding: 0;}
    /*聯絡我們*/
    .con_block_l,.con_block_r{width:100%;float: none;}
}
@media(max-width: 480px){
    .sm-img{width: 150px;right: 10px;}
    .pro-card {width: 100%;}
    .tea-leaves05{left: 0;top: 350px;}
    .product-img{width:93%}
    .dex-banner03 .sm-img{width:150px;right: 5px;bottom: -10px;}
    /*聯絡我們*/
    .cpmpany-info li{width: 100%;margin-bottom: 15px;padding: 15px;}
    .cpmpany-info li span{margin-bottom: 10px;}
}