@charset "utf-8";
/* CSS Document */
iframe, object, embed {max-width: 100%;}

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

.sub_banner, .sub_bannerW {position: relative; z-index: 10;}
.sub_banner::before, .sub_bannerW::before {/*content: '';*/ width: 121px; height: 104px; background: url("../images/pic_02.png") no-repeat center; background-size: cover; position: absolute; bottom: -77.975%; left: 13.978%; z-index: -1; -webkit-animation-name: move-left; animation-name: move-left; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.sub_banner::after, .sub_bannerW::after {/*content: '';*/ width: 87px; height: 116px; background: url("../images/pic_03.png") no-repeat center; background-size: cover; position: absolute; bottom: -68.134%; right: 13.348%; z-index: -2; -webkit-animation-name: move-right; animation-name: move-right; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.sub_banner > div:nth-child(1), .sub_bannerW > div:nth-child(1) {line-height: 0;}
.sub_banner > div:nth-child(2), .sub_bannerW > div:nth-child(2) {position: absolute; top: 60px; left: 10px; right: 10px; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 777;}
.sub_banner > div:nth-child(2) h2, .sub_bannerW > div:nth-child(2) h2 {font-family: 'Noto Sans TC', sans-serif; color: #333333; margin-bottom: 25px;}
.sub_banner > div:nth-child(2) p {color: #8dac04;}
.sub_bannerW > div:nth-child(2) p {color: #fff;}
.sub_bannerP {position: absolute; bottom: -46%; left: 9.669%; width: 25.854%; line-height: 0; z-index: 10; display: none;}

.path {color: #666666; position: relative; z-index: 10;}
.path > div {position: relative; z-index: 10;}
.path > div::before {/*content: '';*/ background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 14px; height: 14px; position: absolute; right: 237px; bottom: 5px;}
.path > div::after {/*content: attr(data-title);*/ position: absolute; right: 105px; bottom: -5px; font-size: 16px; color: #8dac04; font-family: 'Lora', serif; font-weight: 700; font-style: italic; -moz-transform:skewX(-10deg); -webkit-transform:skewX(-10deg); -o-transform:skewX(-10deg); -ms-transform:skewX(-10deg); transform:skewX(-10deg);}
.path > div > ul {width: 100%; padding: 25px 0 25px 28.653%; display: flex; flex-wrap: wrap; position: relative;}
.path > div > ul li {position: relative; z-index: 9999}
.path > div > ul li::after {content: '/'; padding: 0 4px;}
.path > div > ul li:last-child::after {content: none;}
.path > div > ul li a:link, .path > div > ul li a:visited {text-decoration:none; color:#999999; position: relative; transition: all 0.5s ease 0s;}
.path > div > ul li a:active, .path > div > ul li a:hover {text-decoration:none; color:#95b128; cursor:pointer; transition: all 0.5s ease 0s;}
.path > div > ul li a:hover::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

.main {position: relative;}
.main_T {position: relative;}
.main_T::after {content: ''; height: 1px; width: calc(100% - 350px); background-color: #e4eac8; position: absolute; top: -3px; right: 250px;}
.main_T > div {padding: 76px 0 0px 0;}
.main_T > div > h1 {color: #8dac04; text-align: center; line-height: 160%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 20;}
.main_T > div > h1::after {content: ''; background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 14px; height: 14px; display: block; margin: 19px 0 28px 0;}
.main_T > div > h3 {color: #333333; text-align: center; margin-bottom: 28px; position: relative; z-index: 20;}
.main_T > div > h4 {color: #666666; text-align: center; /*margin-bottom: 68px;*/ position: relative; z-index: 20;max-width: 1000px; margin: 0 auto 68px auto;}
/*.main_T > div > p ,.main_T > div > ul {color: #666666; line-height: 187.5%; max-width: 1055px; margin: 0 auto 104px auto; position: relative; z-index: 20;}*/
.main_T > div > div.con {max-width: 1055px; margin: 0 auto 104px auto; position: relative; z-index: 20;}
.main_T > div p ,.main_T > div ul {color: #666666; line-height: 187.5%;}
.main_T > div > div.con a {position: relative;}
.main_T > div > div.con a:hover::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.pro_content{color: #666666;line-height: 187.5%;max-width: 1055px;position: relative;z-index: 20;padding-bottom: 30px;margin:0 auto;}
.pro_content ul, .pro_content ol {padding:12px 0;margin: 0;}
.pro_content ul li{list-style: disc; margin-left:25px;}
.pro_content ol li{list-style: decimal; margin-left:25px;}
.pro_content h2 {color: #8dac04; font-size: 140%; line-height: 160%;}
.pro_content h3 {color: #8dac04; font-size: 130%; line-height: 160%;}
.pro_content h4 {color: #8dac04; font-size: 120%; line-height: 160%;}
.pro_content h5 {color: #8dac04; font-size: 110%; line-height: 160%;}
.pro_content h6 {color: #8dac04; font-size: 100%; line-height: 160%;}
.main_T > div > .OEM-p{margin:0px;margin: 0 auto 10px auto;}

.oem-select-content h2{color: #8dac04;text-align: center;line-height: 160%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;z-index: 20;}
.oem-select-content h2::after {content: ''; background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 14px; height: 14px; display: block; margin: 19px 0 28px 0;}
.oem-select-box .oem-select-item{display: flex;flex-wrap: wrap;position: relative;margin-bottom: 50px;}
.oem-select-box .oem-select-item .title{width: 136px;height: 136px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;background: #95B128;color: #fff;border-radius: 50%;text-align: center;padding: 15px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-size: 24px;}
.oem-select-box .oem-select-item .text{background: #F2F2F2;width: calc(100% - 106px);margin: 0 0 0 auto;min-height: 109px;align-content: center;padding: 10px 30px 10px 60px;line-height: 187.5%;}

.subMenu > div {position: relative; width: 30px; height: 30px; margin: auto; cursor: pointer; display: none;}
.subMenu > div::before {content: attr(data-title); position: absolute; top: -20px; left: 50%; width: 200px; margin-left: -100px; text-align: center; color: #333333;}
.subMenu > div span:nth-child(1) {width: 18px; height: 2px; background-color: #8dac04; position: absolute; left: 0; top: 15px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.5s ease 0s;}
.subMenu > div span:nth-child(2) {width: 18px; height: 2px; background-color: #8dac04; position: absolute; right: 0; top: 15px; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); transition: all 0.5s ease 0s;}
.subMenu > div.open span:nth-child(1) {-moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
.subMenu > div.open span:nth-child(2) {width: 18px; height: 2px; background-color: #8dac04; position: absolute; right: 0; top: 15px; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.subMenu > ul {width: 100%; margin-bottom: 60px!important; display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; transition: all 0.5s ease 0s;}
.subMenu > ul.show {max-height: 300px!important;}
.subMenu > ul > li {margin: 16px 8px 0px 8px!important; position: relative; z-index: 5;}
.subMenu > ul > li a:link, .subMenu > ul > li a:visited {text-decoration:none; color:#333333; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 9px 24px; border: 1px solid #d9d9d9; overflow: hidden; position: relative; z-index: 10; transition: all 0.5s ease 0s;}
.subMenu > ul > li a:active, .subMenu > ul > li a:hover {text-decoration:none; color:#fff; border: 1px solid #99bc27; position: relative; cursor:pointer; transition: all 0.5s ease 0s;}
.subMenu > ul > li:hover::after {content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border: 1px solid #8dac04; z-index: -1;}
.subMenu > ul > li a::before {content: ''; width: 200%; height: 100%; background-color: #8dac04; position: absolute; top: -20%; left: 87%; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.75s ease 0s;}
.subMenu > ul > li a:hover::before {left: -187%; transition: all 0.25s ease 0s;}
.subMenu > ul > li a::after {content: ''; width: 200%; height: 100%; background-color: #8dac04; position: absolute; top: -20%; left: 187%; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.25s ease 0s;}
.subMenu > ul > li a:hover::after {top: -300%; left: -140%; width: 400%; height: 700%; transition: all 0.75s ease 0s;}
.subMenu > ul > li a.current {color:#fff; background-color: #99bc27; border: 1px solid #99bc27;}

.pages {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-bottom: 10%;}
.pages a:link, .pages a:visited {text-decoration:none; color:#7e7e7e; width: 34px; height: 34px; border-radius: 34px; margin: 5px 1px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0.5s ease 0s;}
.pages a:active, .pages a:hover {text-decoration:none; color:#fff; background-color: #99bc27; cursor:pointer; transition: all 0.5s ease 0s;}
.pages .prev {font-size: 0;}
.pages .prev::before {content: ''; background: url("../images/prev_a.png") no-repeat center; background-size: cover; width: 11px; height: 20px;}
.pages .prev:hover::before {background: url("../images/prev_aw.png") no-repeat center;}
.pages .next {font-size: 0;}
.pages .next::before {content: ''; background: url("../images/next_a.png") no-repeat center; background-size: cover; width: 11px; height: 20px;}
.pages .next:hover::before {background: url("../images/next_aw.png") no-repeat center;}
.pages a.current {color:#fff; background-color: #99bc27;}

.share {display: flex; flex-wrap: wrap; align-items: center;}
.share a {margin-right: 8px;}
.share a:last-child {margin-right: 0px;}
.share a:hover img {-webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}

.about_A {background-color: #f8f8f8; padding: 104px 0 50px 0;}
.about_A > div > h3 {color: #8dac04; text-align: center; margin-bottom: 50px; display: flex; justify-content: center; position: relative;}
.about_A > div > h3::before {content: ''; background: url("../images/icon_02d.png") no-repeat center; background-size: cover; width: 21px; height: 17px; display: block; margin-right: 15px;}
.about_A > div > h3::after {content: ''; background: url("../images/icon_02d.png") no-repeat center; background-size: cover; width: 21px; height: 17px; display: block; margin-left: 15px;}
.about_A > div > p {color: #666666; text-align: center; line-height: 187.5%; max-width: 905px; margin: auto;}
.about_A > div > div {line-height: 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; max-width: 905px; margin: auto; padding: 74px 0 0 0;}
.about_A > div > div span {padding: 0 10px;}

.productsL {display: flex; flex-wrap: wrap; padding: 30px 0 10% 0;}
.productsL > div {width: 32%; margin: 0 2% 0 0; position: relative;}
.productsL > div:nth-child(3n+3) {margin: 0;}
.productsL > div > div {max-width: 311px; height: 0; padding-bottom: 66.18%; margin: 0 auto 10px auto; overflow: hidden; position: relative;}
.productsL > div > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden;}
.productsL > div > div > div img {max-height: 100%; -moz-transform:scale(1.0, 1.0); -webkit-transform:scale(1.0, 1.0); -o-transform:scale(1.0, 1.0); -ms-transform:scale(1.0, 1.0); transform:scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.productsL > div:hover > div > div img {max-height: 100%; -moz-transform:scale(0.8, 0.8); -webkit-transform:scale(0.8, 0.8); -o-transform:scale(0.8, 0.8); -ms-transform:scale(0.8, 0.8); transform:scale(0.8, 0.8); transition: all 0.5s ease 0s;}
.productsL > div > div > div:before {position: absolute; top: -20px; left: 100px; width: 140%; height: 100%; background: #8dac04; opacity: .5; content: ''; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s, -webkit-transform .6s, -o-transform .6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 15;}
.productsL > div:hover > div > div:before {left: -100px; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);}
.productsL > div > h3 {position: relative; max-width: 311px; color: #8dac04; text-align: center; line-height: 187.5%; margin: auto;}
.productsL > div > a:link, .productsL > div > a:visited {text-decoration:none; color:#8dac04; position: absolute; top: 0; left: 50%; font-size: 0; width: 311px; height: 100%; margin-left: -156px; display: block; z-index: 20; transition: all 0.5s ease 0s;}
.productsL > div > a:active, .productsL > div > a:hover {text-decoration:none; color:#8dac04; cursor:pointer; transition: all 0.5s ease 0s;}
.productsL > div:hover > h3::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

.productsLC {display: flex; flex-wrap: wrap; padding: 8.511% 0 0 0;}
.productsLC > div {width: 18.511%; margin: 0 1.86125% 100px 0; position: relative;}
.productsLC > div:nth-child(5n+5) {margin: 0 0 100px 0;}
.productsLC > div > div {max-width: 261px; height: 0; padding-bottom: 100%; margin: 0 auto 10px auto; overflow: hidden; position: relative;}
.productsLC > div > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden;}
.productsLC > div > div > div img {max-height: 100%; -moz-transform:scale(1.0, 1.0); -webkit-transform:scale(1.0, 1.0); -o-transform:scale(1.0, 1.0); -ms-transform:scale(1.0, 1.0); transform:scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.productsLC > div:hover > div > div img {max-height: 100%; -moz-transform:scale(0.8, 0.8); -webkit-transform:scale(0.8, 0.8); -o-transform:scale(0.8, 0.8); -ms-transform:scale(0.8, 0.8); transform:scale(0.8, 0.8); transition: all 0.5s ease 0s;}
.productsLC > div > div > div:before {position: absolute; top: -20px; left: 100px; width: 140%; height: 100%; background: #8dac04; opacity: .5; content: ''; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s, -webkit-transform .6s, -o-transform .6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 15;}
.productsLC > div:hover > div > div:before {left: -100px; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);}
.productsLC > div > h3 {position: relative; max-width: 261px; color: #8dac04; text-align: center; line-height: 187.5%; margin: auto;}
.productsLC > div > p {position: relative; max-width: 261px; color: #333333; text-align: center; line-height: 187.5%; margin: auto;}
.productsLC > div > a:link, .productsLC > div > a:visited {text-decoration:none; color:#8dac04; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; display: block; z-index: 20; transition: all 0.5s ease 0s;}
.productsLC > div > a:active, .productsLC > div > a:hover {text-decoration:none; color:#8dac04; cursor:pointer; transition: all 0.5s ease 0s;}
.productsLC > div:hover > h3::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

.productsD {background: url("../images/bg_03a.png") no-repeat top center; background-size: 100%;}
.productsD .path > div > ul {padding: 25px 0;}
.productsD .path > div > ul::before {content: ''; height: 1px; width: 100%; background-color: #e4eac8; position: absolute; bottom: 2px; right: 0px;}
.productsDT {display: flex; flex-wrap: wrap; padding: 10.426% 0 0 0;}
.productsDT > div {width: 50%; position: relative;}
.productsDT > div:nth-child(1) {padding: 30px 20px 0 20px;}
.productsDT > div:nth-child(1)::after {content: ''; background-color: #e4eac8; height: 100%; width: 1px; position: absolute; bottom: 0; right: 0;}
.productsDT .owl-carousel .item {text-align: center;}
.productsDT > div:nth-child(2) {padding: 50px 8.511% 0 9.93%;}
/*.productsDT > div:nth-child(2) h1 {color: #333333; line-height: 142.857%; margin-bottom: 24px;}*/
.productsDT > div:nth-child(2) h1 {color: #8dac04; line-height: 142.857%; margin-bottom: 33px; display: flex; flex-wrap: wrap; align-items: center;}
.productsDT > div:nth-child(2) h1::before {content: ''; background: url("../images/icon_02e.png") no-repeat center; background-size: cover; width: 14px; height: 14px; margin: 0 14px 0 0;}
.productsDT > div:nth-child(2) h1 span{line-height: 142.857%;}
.productsDT > div:nth-child(2) p {color: #666666; line-height: 187.5%; margin-bottom: 41px;}
.productsDT > div:nth-child(2) .blow-up {margin-bottom: 61px;}
.productsDT > div:nth-child(2) .blow-up a::after {content: none;}
.productsDT > div:nth-child(2) .blow-up a span img {margin-right: 18px;}
.productsDT > div:nth-child(2) .share {margin-bottom: 60px;}
.pro_btn {display: flex; flex-wrap: wrap; align-items: center;}
.pro_btn > div {position: relative;}
.pro_btn > div::after {content: ''; height: 14px; width: 1px; background-color: #dedede; position: absolute; top: 50%; right: 0; margin-top: -7px;}
.pro_btn > div:last-child::after {content: none;}
.pro_btn > div a:link, .pro_btn > div a:visited {text-decoration:none; color:rgba(51, 51, 51, 0.51); position: relative; display: flex; flex-wrap: wrap; justify-content: center; transition: all 0.5s ease 0s;}
.pro_btn > div a:active, .pro_btn > div a:hover {text-decoration:none; color:#8dac04; cursor:pointer; transition: all 0.5s ease 0s;}
.pro_btn > .prev_a {width: 28%; padding: 0 15px 0 0;}
.pro_btn > .prev_a a::before {content: ''; background: url("../images/prev_b.png") no-repeat center; background-size: cover; width: 11px; height: 21px; margin-right: 10px;}
.pro_btn > .next_a {width: 33%; padding: 0 15px;}
.pro_btn > .next_a a {justify-content: center;}
.pro_btn > .next_a a::after {content: ''; background: url("../images/next_b.png") no-repeat center; background-size: cover; width: 11px; height: 21px; margin-left: 10px;}
.pro_btn > .back_a {width: 26%; padding: 0 0 0 15px;}
.pro_btn > .back_a a {justify-content: flex-end;}
.pro_btn > .back_a a::before {content: ''; background: url("../images/icon_05b.png") no-repeat center; background-size: cover; width: 23px; height: 21px; margin-right: 10px;}
.pro_btn > .prev_a a:hover::after, .pro_btn > .back_a a:hover::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.pro_btn > .next_a a:hover::before {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.productsDC {padding: 7.093% 0 9.22% 0;}
.productsDC > h3 {color: #7a9500; line-height: 125%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.productsDC > h3::after {content: ''; background: url("../images/icon_02e.png") no-repeat center; background-size: cover; width: 14px; height: 14px; margin: 20px auto 60px auto;}
.productsDC .item > div {padding: 10px 10px;}
.productsDC .item > div > div {max-width: 261px; height: 0; padding-bottom: 100%; margin: 0 auto 10px auto; overflow: hidden; position: relative;}
.productsDC .item > div > div > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; overflow: hidden;}
.productsDC .item > div > div > div img {max-height: 100%; -moz-transform:scale(1.0, 1.0); -webkit-transform:scale(1.0, 1.0); -o-transform:scale(1.0, 1.0); -ms-transform:scale(1.0, 1.0); transform:scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.productsDC .item > div:hover > div > div img {max-height: 100%; -moz-transform:scale(0.8, 0.8); -webkit-transform:scale(0.8, 0.8); -o-transform:scale(0.8, 0.8); -ms-transform:scale(0.8, 0.8); transform:scale(0.8, 0.8); transition: all 0.5s ease 0s;}
.productsDC .item > div > div > div:before {position: absolute; top: -20px; left: 100px; width: 140%; height: 100%; background: #8dac04; opacity: .5; content: ''; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s, -webkit-transform .6s, -o-transform .6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 15;}
.productsDC .item > div:hover > div > div:before {left: -100px; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);}
.productsDC .item > div > h3 {position: relative; max-width: 261px; color: #8dac04; text-align: center; line-height: 187.5%; margin: auto;}
.productsDC .item > div > p {position: relative; max-width: 261px; color: #333333; text-align: center; line-height: 187.5%; margin: auto;}
.productsDC .item > div > a:link, .productsDC .item > div > a:visited {text-decoration:none; color:#8dac04; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0; display: block; z-index: 20; transition: all 0.5s ease 0s;}
.productsDC .item > div > a:active, .productsDC .item > div > a:hover {text-decoration:none; color:#8dac04; cursor:pointer; transition: all 0.5s ease 0s;}
.productsDC .item:hover > div > h3::after {content: ''; border: 1px solid #8dac04; position: absolute; top: 0px; left: -4px; right: -4px; bottom: 0px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.product-show img{width: 50%;}

.process_A {padding: 40px 0 65px 0; text-align: center;}
.process_A > div > p {color: #666666; line-height: 187.5%; max-width: 920px; margin: auto;}
.process_A h2, .process_A h3 { color: #8dac04; text-align: center; line-height: 160%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin: 40px 0 30px 0; z-index: 20;}
.process_A h3::before { content: '';width: 70px;bottom: -15px;left: 50%; height: 1px; background: #e4eac8; position: absolute; transform: translate(-50%, 0%);}
.process_A p { color: #666666; line-height: 187.5%;}
.process_A .top { position: relative;margin-bottom: 56px;z-index: 1;}
.process_A .top .pic { position: absolute; top: 15%; left: -23%; z-index: -1;}
.process_A .bottom { position: relative;z-index: 1;}
.process_A .bottom .pic { position: absolute; top: 35%; right: -20%; z-index: -1;}
.process_A .bottom h3:nth-of-type(2) {margin-top: 10%;}
.process_A .bottom .green { border: 1px solid #e4eac8; padding: 22px 17px; margin: 20px 0;}
.process_A .bottom .green .gray {display: flex;flex-wrap: wrap; align-items: center; background: #f8f8f8;border: 1px solid #d9d9d9;}
.process_A .bottom .green .gray > div:first-child { width: 306px; padding: 22px 17px;}
.process_A .bottom .green .gray > div:last-child { width: calc(100% - 306px); text-align: justify; padding: 22px 17px 22px 0;}
.process_A .bottom .green .gray > div > div { color: #8dac04; background: #fff; padding: 55px 10px; line-height: 187.5%; display: flex; align-items: center; justify-content: center;}
.process_A .bottom .green .border_b { border-bottom: none;}
.process_A > div > div {line-height: 0; padding: 70px 0 0 0;}
.process_B {background-color: #f8f8f8; padding: 87px 0 9.459% 0;}
.process_B > div > h2 {color: #8dac04; line-height: 160%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.process_B > div > h2::after {content: ''; background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 14px; height: 14px; display: block; margin: 27px 0 50px 0;}
.process_BA {position: relative; z-index: 10; margin-bottom: 7.808%;}
.process_BA::before {content: ''; background: url("../images/bg_04a.png") no-repeat center; background-size: cover; width: 29.211%; height: 0; padding-bottom: 27.895%; position: absolute; left: -17.82%; top: 28.2%; z-index: -1;}
.process_BA > div {display: flex; flex-direction: row; background-color: #fff;}
.process_BA > div:nth-child(2) {flex-direction: row-reverse;}
.process_BA > div > div:nth-child(1) {width: 46.403%; padding: 0 6.09%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.process_BA > div > div:nth-child(1) > div {display: flex; flex-direction: column;}
.process_BA > div > div:nth-child(1) > div h3 {color: #7a9500; margin-bottom: 44px;}
.process_BA > div > div:nth-child(1) > div p {color: #666666; line-height: 187.5%;}
.process_BA > div > div:nth-child(2) {width: 53.597%; line-height: 0;}
.process_BA > div > div:nth-child(2) img {width: 100%;}
.process_BB {position: relative; z-index: 10; margin-bottom: 7.808%;}
.process_BB::before {content: ''; background: url("../images/bg_04b.png") no-repeat center; background-size: cover; width: 26.755%; height: 0; padding-bottom: 44.387%; position: absolute; right: -12.62%; top: 32.2%; z-index: -1;}
.process_BB > div {display: flex; flex-direction: row; background-color: #fff;}
.process_BB > div:nth-child(2) {flex-direction: row-reverse;}
.process_BB > div > div:nth-child(1) {width: 46.403%; padding: 0 6.09%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.process_BB > div > div:nth-child(1) > div {display: flex; flex-direction: column;}
.process_BB > div > div:nth-child(1) > div h3 {color: #7a9500; margin-bottom: 44px;}
.process_BB > div > div:nth-child(1) > div p {color: #666666; line-height: 187.5%;}
.process_BB > div > div:nth-child(2) {width: 53.597%; line-height: 0;}
.process_BB > div > div:nth-child(2) img {width: 100%;}
.process_BC {position: relative; z-index: 10;}
.process_BC::before {content: ''; background: url("../images/bg_04a.png") no-repeat center; background-size: cover; width: 29.211%; height: 0; padding-bottom: 27.895%; position: absolute; left: -17.32%; top: 26.7%; z-index: -1;}
.process_BC > div {display: flex; flex-direction: row; background-color: #fff;}
.process_BC > div:nth-child(2) {flex-direction: row-reverse;}
.process_BC > div > div:nth-child(1) {width: 47.017%; padding: 0 6.09%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.process_BC > div > div:nth-child(1) > div {display: flex; flex-direction: column;}
.process_BC > div > div:nth-child(1) > div h3 {color: #7a9500; margin-bottom: 44px;}
.process_BC > div > div:nth-child(1) > div p {color: #666666; line-height: 187.5%;}
.process_BC > div > div:nth-child(2) {width: 52.983%; line-height: 0;}
.process_BC > div > div:nth-child(2) img {width: 100%;}

.process_content .flip-x{transform: scaleX(-1);}
.process_content .process_item{position: relative;z-index: 1;display: flex;flex-wrap: nowrap;align-items: flex-start;margin-bottom: 60px;}
.process_content .process_item:last-child{margin-bottom: 0;}
.process_content .process_item .pho-block{min-width: 430px;height: 380px; font-size: 0;line-height: 0;margin-top: 50px; z-index: 1;}
.process_content .process_item .pho-block img{width: 100%;height: 100%!important;object-fit: cover;}
.process_content .process_item .text-block{position: relative;margin: 0 30px 0 -330px; padding: 50px 45px 50px 375px; border: 1px solid #333333; background: #fff;}
.process_content .process_item .text-block::before{position: absolute;content: "";width: 100%;height: 100%;top: 30px;right: -30px;background: #ecf0d8;z-index: -1;}
.process_content .process_item .text-block .title {margin-bottom: 32px;}
.process_content .process_item .text-block .title h3{color: #7a9500;position: relative;line-height: 1;}
.process_content .process_item .text-block .title h3::before{position: absolute;content: "";bottom: -14px;left: 0;width: 90%;height: 1px;background: linear-gradient(to right, #8dac04 0%, #fff 100%);}
.process_content .process_item .text-block .kind{list-style-type: none;margin: 0 0 15px 0;padding: 0;display: flex;flex-wrap: wrap;color: #333333;gap:15px;}
.process_content .process_item .text-block .kind li{display: flex;flex-wrap: nowrap;gap:4px;}
.process_content .process_item .text-block .txt{color: #333333;line-height: 187.5%;}

.process_content .process_item:nth-child(2n+2) .pho-block{order: 2;}
.process_content .process_item:nth-child(2n+2) .text-block{order: 1;margin: 0 -330px 0 30px;padding: 50px 375px 50px 45px;}
.process_content .process_item:nth-child(2n+2) .text-block::before{right: auto;left: -30px;}

.main .leaf,.main .leaf2 { position: relative; z-index: 1;}
.main .leaf::before { content: ''; width: 339px; height: 393px; background: url("../images/aboutus-12.png") no-repeat center; background-size: cover; position: absolute; top: -20%; left: 0; z-index: 10;}
.main .leaf2::before { content: ''; width: 339px; height: 393px; background: url("../images/aboutus-12.png") no-repeat center; background-size: cover; position: absolute; top: -69.7%; left: 0; z-index: 10;}
.cus_gray { background-color: #f8f8f8;}
.cus_gray { padding: 70px 0 80px;}
.cus_no_gray { padding: 80px 0 12px;}
.cus_gray > div, .cus_no_gray > div { position: relative; z-index: 20;}
.main .cus_no_gray:nth-child(2) { padding: 0 0 161px 0;}
.aboutus .l_title, .feature .l_title, .service .l_title, .production_base .l_title { padding-left: 40px; position: relative; color: #8dac04; margin: 20px 0;}
.aboutus .l_title span::after, .feature .l_title span::after, .service .l_title span::after, .production_base .l_title span::after {content: ''; background: url("../images/icon_02a.png") no-repeat center; background-size: cover; width: 14px; height: 14px; display: inline-block; position: absolute; top: 0; left: -50%; transform: translate(-50%, -50%);}
.aboutus .l_title span, .feature .l_title span, .service .l_title span, .production_base .l_title span { width: 45px; height: 10px; display: inline-block; position: relative; top: 0; left: -1%;}
.aboutus .l_title span::before, .feature .l_title span::before, .service .l_title span::before, .production_base .l_title span::before {content: '';width: 40px;height: 1px;background: #94b44d;position: absolute;top: 0;left: 0;}
.aboutus .reverse, .feature .reverse, .service .reverse { flex-direction: row-reverse;}
.aboutus p, .production_base p, .production_base h3, .production_base li {color: #666666; line-height: 312.5%;}
.aboutus .about-1 {display: flex; flex-wrap: wrap; position: relative; z-index: 1; padding-bottom: 100px; margin-top: 35px;}
.aboutus .about-1 p {color: #000;}
.aboutus .about-1 > div:nth-child(1) { background: #F8F8F8; padding: 41px 60px 49px 60px; width: 570px;position: relative; text-align: right;}
.aboutus .about-1 > div:nth-child(1)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;width: 228px;height: 228px;position: absolute;top: -18.2%;left: -12.2%;z-index: -5;}
.aboutus .about-1 > div:nth-child(2) { width: 63.51%; position: absolute; top: 12.3%; right: 0; z-index: -2;}
.aboutus .about-1 > div:nth-child(2)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;width: 228px;height: 228px;position: absolute;bottom: -13.5%;right: -9.7%;z-index: -5;}
.aboutus .about-2 { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 0 0 0;gap:0 1.33%;}
/*.aboutus .about-2 > div {width: 50%;display: flex;flex-direction: column;align-items: center;}*/
/*.aboutus .about-2 > div > div { background: #8DAC04; padding: 44px 10%; min-height: 240px; width: 65%; line-height: 200%; text-align: center; margin: 30px 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;position: relative;}*/
/*
.aboutus .about-2 > div > div::before {content: '';width: 100%;border: 1px solid #8DAC04;position: absolute;top: -8px;left: -8px;-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg);height: 100%;z-index: -2;}
*/
/*
.aboutus .about-2 > div > div::after {content: '';width: 100%;position: absolute;top: 0;left: 0;-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg);height: 100%;z-index: -3; box-shadow: 0 0 10px #d1d1d1;}
*/
/*.aboutus .about-2 > div > div h3, .aboutus .about-2 > div > div p { color: #fff;}*/
/*.aboutus .about-2 > div:nth-child(2) { margin-top: 170px;}*/
.aboutus .about-2 > div {background: #ECECEC; display: grid;grid-template-rows: subgrid;grid-row: span 3;gap: 12px 0;}
.aboutus .about-2 .pic { text-align: center; line-height: 0;} 
.aboutus .about-2 .title { margin: 0; padding:10px 0 0 0; font-weight: 700; text-align: left; letter-spacing: 1px;padding: 0 13px;}
.aboutus .about-2 .text { margin: 0; letter-spacing: 1px; padding: 10px 10px 10px 0; text-align: left; line-height: 1.7;color: #666;padding: 0 13px 15px 13px;}
.aboutus .about-3 {display: flex; flex-direction: column;position: relative; z-index: 1;}
.aboutus .about-3::before { content: ''; width: 238px; height: 417px; background: url("../images/aboutus-13.png") no-repeat top left; background-size: cover;    position: absolute; top: 3%; left: -20.8%; z-index: -1;}
.aboutus .about-3::after { content: ''; width: 200px; height: 358px; background: url("../images/aboutus-14.png") no-repeat top right; background-size: cover; position: absolute; bottom: 10%; right: -17.5%; z-index: -1;}
.aboutus .about-3 h3 { color: #8dac04; margin-bottom: 20px;}
.aboutus .about-3 > div { display: flex;flex-wrap: wrap;}
.aboutus .about-3 > div > div:nth-child(1) { width: 55%; line-height: 0;}
.aboutus .about-3 > div > div:nth-child(2) { width: 45%; background: #f8f8f8; padding: 40px 3.4%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.aboutus .about-4 {display: flex; flex-wrap: wrap;}
.aboutus .about-4 > div { width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
.aboutus .about-4 > div:nth-child(1) { padding: 0 3.5% 0 0;}
.aboutus .about-4 > div:nth-child(1) > div {padding: 0 0 66px 0;}
.aboutus .about-4 > div:nth-child(1) p { color: #000;}
.aboutus .about-5 {display: flex; flex-wrap: wrap; justify-content: center; max-width: 736px; margin: 30px auto 0 auto; text-align: center;color: #8dac04;}
.aboutus .about-5 > div:nth-child(1) { margin-bottom: 30px;}
.aboutus .about-5 > div:nth-child(2) { display: flex; flex-wrap: wrap; width: 100%; justify-content: center;}
.aboutus .about-5 > div:nth-child(2) > div { width: calc(100% / 5); padding: 5px;}
.aboutus .about-5 > div:nth-child(3) { margin-top: 40px;}
.aboutus .about-5 > div:nth-child(3) a { background: #95b128; color: #fff; padding: 10px 15px; text-decoration: none; position: relative;}
.aboutus .about-5 > div:nth-child(3) a:hover::after { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border: 1px solid #8dac04; z-index: -1;}
.about-6 {display: flex; flex-wrap: wrap; position: relative; z-index: 1; padding-bottom: 100px; margin: 9px 0 169px 0;}
.about-6 p {color: #000;}
.about-6 > div:nth-child(1) { width: 59.74%; position: absolute; top: 13.8%; left: 0; z-index: -2;}
.about-6 > div:nth-child(1)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;width: 228px;height: 228px;position: absolute;top: -15%;left: -10.4%;z-index: -5;}
.about-6 > div:nth-child(2) { background: #F8F8F8; padding: 42px 48px 48px 48px; width: 570px; position: relative; margin: 0 0 0 auto;}
.about-6 > div:nth-child(2)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;width: 228px;height: 228px;position: absolute;bottom: -20.5%;right: -12.2%;z-index: -5;}
.vision {}
.vision p {line-height: 187.5%; color: #333333;}
.about-7 {display: flex; flex-flow: wrap; justify-content: space-between; color: #8ca333; text-align: center; padding: 5px 0 95px 0;}
.about-7 > div {width: 15%; margin: 20px 0 0 0;}
.about-7 > div > div.photo {line-height: 0; font-size: 0; margin-bottom: 32px;}
.about-7 > div > h3 {font-weight: bold;}
.aboutus .service_advantage { display: flex; flex-wrap: wrap;padding: 75px 0;}
.aboutus .sd_in { position: relative;}
.aboutus .sd_in:nth-child(3), .aboutus .sd_in:nth-child(5) { background: #F8F8F8;}
.aboutus .sd_in:nth-child(2) .img { position: absolute; bottom: 0; right: 0; line-height: 0; font-size: 0; z-index: -1;}
.aboutus .sd_in:nth-child(4) .img { position: absolute; bottom: 0; left: 0; line-height: 0; font-size: 0; z-index: -1;}
.aboutus .service_advantage > div:nth-child(1) { width: 58%; display: flex; flex-wrap: wrap; align-items: center; padding: 15px 6% 15px 0;text-shadow: 1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff, -1px 1px 0px #fff;}
.aboutus .service_advantage > div:nth-child(2) { width: 42%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.aboutus .service_advantage > div:nth-child(2) > div { position: relative; line-height: 0; font-size: 0;}
.aboutus .service_advantage h3 { color: #8dac04; padding-bottom: 50px; position: relative;display: inline-block;}
.aboutus .service_advantage h3::before { content: ''; width: 100%; height: 2px; background: linear-gradient(90deg, #e4eac8, transparent); position: absolute; top: 60%; left: 0;}
.aboutus .service_advantage > div:nth-child(2) > div::before { content:''; position:absolute; top:10px; left:-10px; width:100%; height:100%; background:#ECF0D8; z-index:-1;}
.aboutus .sd_in:nth-child(3) .service_advantage > div:nth-child(1), .aboutus .sd_in:nth-child(5) .service_advantage > div:nth-child(1) {order: 2; padding: 15px 0 15px 6%;}
.aboutus .sd_in:nth-child(3) .service_advantage > div:nth-child(2), .aboutus .sd_in:nth-child(5) .service_advantage > div:nth-child(2) {order: 1;}
.aboutus .sd_in:nth-child(3) .service_advantage > div:nth-child(2) > div::before, .aboutus .sd_in:nth-child(5) .service_advantage > div:nth-child(2) > div:before {top: 10px; left: auto;  right: -10px!important;}

.certification {line-height: 187.5%; color: #5a5757; padding: 0 0 11px 0}
.certification p {line-height: 187.5%; color: #5a5757;}
.certification-1 {padding: 4px 0 0 0;}
.certification-2 {display: flex; flex-flow: wrap; justify-content: space-between; padding: 47px 0 60px 0;}
.certification-2 > div {width: 23.684211%; margin: 0 0 40px 0; text-align: center; color: #231815; line-height: 187.5%;}
.certification-2 > div > h3 {color: #8dac04; margin-bottom: 20px;}
.certification-2 > div > p {color: #231815; line-height: 187.5%;}
.certification-2 > div > div.txt {width: 100%; height: 0; padding: 0 0 87.41% 0; border-radius: 50%; border: 17px solid #006835; color: #231815; font-family: 'Arial', sans-serif; letter-spacing: 6px; font-weight: 600; display: flex; flex-flow: wrap; justify-content: center; align-items: center; position: relative; z-index: 1; margin: 12.593% auto 0 auto;}
.certification-2 > div > div.txt p {color: #231815; font-family: 'Arial', sans-serif; letter-spacing: 6px; font-weight: 600; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-flow: wrap; justify-content: center; align-items: center; text-align: center; padding: 7px 0 0 0;}
.certification-3 {display: flex; flex-flow: wrap; justify-content: space-between; padding: 36px 0 42px 0;}
.collapse_list {width: 48.58156%;}
.collapse_list a:link, .collapse_list a:visited {text-decoration:none; color:#be4539; transition: all 0.5s ease 0s;}
.collapse_list a:active, .collapse_list a:hover {text-decoration:none; color:#95b128; cursor:pointer; transition: all 0.5s ease 0s;}
.collapse_list > div {margin: 0 0 46px 0;}
.collapse_list > div > h3 {border-radius: 15px; border: 2px solid #e5e5e5; line-height: 1.25; position: relative; z-index: 1; padding: 18px 85px 23px 25px;}
.arrowBtn {width: 40px; height: 40px; position: absolute; top: 17.5px; right: 37px; z-index: 10; cursor: pointer; transition: all 0.5s ease 0s;}
.arrowBtn::before {content: ''; width: 20px; height: 6px; background: #090404; position: absolute; left: 5px; top: 15px; transform: rotate(45deg); transition: all 0.5s ease 0s;}
.arrowBtn::after {content: ''; width: 20px; height: 6px; background: #090404; position: absolute; right: 5px; top: 15px; transform: rotate(-45deg); transition: all 0.5s ease 0s;}
.active > .arrowBtn {top: 13.5px; transform: rotate(180deg); transition: all 0.5s ease 0s;}
.collapse_list > div > div {padding: 46px 27px 17px 27px; display: none;}

.feature h4 { text-align: justify!important; max-width: 1140px!important;}
.feature p { text-align: justify;}
.feature .feature_line { display: flex; flex-wrap: wrap; justify-content: center; position: relative; padding: 5px;}
.feature .feature_line span { background: #fff; padding: 5px 15px; font-weight: 600; color: #8dac04; font-size: 20px;}
.feature .feature_line::after { content: ''; width: 90%; height: 1px; background: #8dac04;	z-index: -2; position: absolute; top: 53%; left: 5%;}
.feature .flex_1 { display: flex; flex-wrap: wrap;}
.feature .flex_1 > div { width: 50%; padding: 5px;}


.service { color: #666666; padding: 0 0 94px 0;}
.service .flex_1 { display: flex; flex-wrap: wrap; line-height: 0;}
.service .flex_1 > div:first-child { width: 60%;}
.service .flex_1 > div:last-child { width: 40%; background: #F7F7F7; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 200%;}
.service .flex_1 > div:last-child h3 { margin: 0 0 15px 0;}
.service .flex_2 { display: flex; flex-wrap: wrap; justify-content: flex-end;}
.service .flex_2 .bg-block{background: linear-gradient(to right, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%), url(../images/service-5.jpg) no-repeat 25%; background-size: cover;width: 50%;}
.service .flex_2 .text-block { background-image: linear-gradient(90deg, rgba(255, 255, 255,0) 0%, #fff 20%, rgb(255, 255, 255) 100%); padding: 50px 20px 50px 0px; width: 50%;}
.service .flex_2 .text-block > div { padding: 30px; }
.service .flex_2 .text-block > div h3 { background: #F0F4DF; display: inline-block; padding: 15px; width: 100%; max-width: 400px; text-align: center;font-weight: bold;}
.service .flex_2 .text-block > div p { margin-top: 15px;line-height: 200%;}

.production_base .about-1 {display: flex; flex-wrap: wrap; position: relative; z-index: 1; padding-bottom: 100px; margin-top: 100px;}
.production_base .about-1 > div:nth-child(1) { background: #F8F8F8; padding: 45px 10% 45px 3.8%; width: 50%; max-width: 572px; position: relative;}
.production_base .about-1 > div:nth-child(1)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;
	width: 228px;height: 228px; position: absolute;top: -10%;left: -10%;z-index: -5;}
.production_base .about-1 > div:nth-child(2) { width: 60%; position: absolute; top: 40%; right: 0; z-index: 1; text-align: center;}
.production_base .about-1 > div:nth-child(2)::before {content: '';background: url(../images/aboutus-line.png) no-repeat center;background-size: cover;
	width: 228px;height: 228px; position: absolute; bottom: -10%; right: -10%; z-index: -5;}
.production_base .production_base_bg {background: url(../../../../upload_files/aboutus/production%20base/production-base-2-1.jpg) no-repeat center; 
	background-size: cover; position: relative; margin-top: 10%;}
.production_base .production_base_bg #pro_base { position: absolute; top: -500px;}
.production_base .production_base_bg .jumbo { text-align: center; display: flex;flex-wrap: wrap; justify-content: center; padding: 12% 0; color: #8CAC03;}
.production_base .production_base_bg .jumbo > div { width: 25%;}
.production_base .production_base_bg .jumbo div span { text-align: center; font-weight: 500; font-family: 'Lora', sans-serif; }
.production_base .production_base_bg .jumbo div h3 {line-height: 170%;font-weight: 700;color: #333333;}
.production_base .production_base_pic {display: flex;flex-wrap: wrap; margin-bottom: 10%;}
.production_base .production_base_pic > div { width: 50%; padding: 0 50px 0 20px;}
.production_base .production_base_pic > div:nth-child(even) {margin-top: 100px;}
.production_base .production_base_pic > div > div { position: relative; z-index: 1; display: flex; flex-wrap: wrap; }
.production_base .production_base_pic > div > div::after {content: ''; position: absolute; bottom: -35px; left: 15px; z-index: -1; border: 1px solid #7a9500;
	width: 100%; height: 100%;}
.production_base .l_title_2 {padding: 2px 15px; display: inline-block; background: #fff; border: 1px solid #8CAC03; margin: 5% 0 2%; position: relative; 
	z-index: 1;}
.production_base .l_title_2::before {content: '';width: 200px; height: 1px; position: absolute; top: 50%; left: calc(100% - 8px); z-index: 5; 
	background: linear-gradient(to right, #8dac04 0%, #fff 100%);}
.production_base .about-4 {display: flex; flex-wrap: wrap;}
.production_base .about-4 > div { width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
.production_base .about-4 > div:nth-child(1) { padding: 0 3.5% 0 0;}
.production_base .about-4 > div:nth-child(1) img { margin: auto;}
.production_base .about-4 .text-block .title {margin-bottom: 32px;}
.production_base .about-4 .text-block .title h3{color: #7a9500;position: relative;line-height: 1;}
.production_base .about-4 .text-block .title h3::before{position: absolute;content: "";bottom: -14px;left: 0;width: 90%;height: 1px;background: linear-gradient(to right, #8dac04 0%, #fff 100%);}
.production_base .about-4 .text-block .kind{list-style-type: none;margin: 0;padding: 0;display: flex;flex-direction: column;}
.production_base .about-4 .text-block .kind li {display: flex;flex-wrap: nowrap;line-height: 187.5%;color: #333;gap:4px;text-shadow: none;}
.production_base .leaf3, .production_base .leaf5 { position: relative; z-index: 1;}
.production_base .leaf3::before { content: ''; position: absolute; top: -2%; right: 0; width: 367px; height: 351px; z-index: -1;
	background: url(../../../../upload_files/aboutus/production%20base/production-base-3.png) no-repeat center;}
.production_base .leaf3::after { content: ''; position: absolute; top: 20%; left: 0; width: 219px; height: 680px; z-index: -1;
	background: url(../../../../upload_files/aboutus/production%20base/production-base-4.png) no-repeat center;}
.leaf4 {position: absolute!important;top: 50%;right: 0;z-index: 1!important;}
.production_base .leaf5::before { content: ''; position: absolute; top: -25%; left: 0; width: 293px; height: 463px; z-index: 1;
	background: url(../../../../upload_files/aboutus/production%20base/production-base-6.png) no-repeat center;}
.production_base .leaf5::after { content: ''; position: absolute; bottom: 0; right: 0; width: 339px; height: 285px; z-index: 1;
	background: url(../../../../upload_files/aboutus/production%20base/production-base-7.png) no-repeat center;}
.production_base .leaf5 h3 { background: #F8F8F8;}
.production_base .leaf5 li { text-shadow: 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white;}

.quality_management {padding-bottom: 5%!important; text-align: center;}
.quality_management h2, .quality_management_2 h2 { color: #8dac04; text-align: center; line-height: 160%; display: flex;  flex-direction: column; justify-content: center; align-items: center; position: relative; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #e4eac8; z-index: 20;}
.quality_management_2 { text-align: center; color: #666666;line-height: 187.5%;}
.quality_management_2 .color_2 {margin:46px 0 0 0;}
.quality_management_2 .green { background: #A9BF52; color: #fff!important; text-align: left; position: relative; margin: 0 0 15% 0;}
.quality_management_2 .gray { background: #ECECEC; color: #666666!important; text-align: left; position: relative; margin: 0 0 15% 0;}
.quality_management_2 .green .text { padding: 65px 30px; margin: 0 473px 0 0;}
.quality_management_2 .green .pic { width: 443px; box-shadow: 0px 0px 20px rgb(89 86 86 / 66%); position: absolute; bottom: -50px; right: 30px; line-height: 0;}
.quality_management_2 .gray .text { padding: 65px 30px; margin: 0 0 0 473px;}
.quality_management_2 .gray .pic { width: 443px; box-shadow: 0px 0px 20px rgb(89 86 86 / 66%); position: absolute; bottom: -50px; left: 30px; line-height: 0;}
.quality_management_2 .green .text h3, .quality_management_2 .gray .text h3 { margin-bottom: 30px;}
.quality_management_bg { position: relative;z-index: 1; padding: 5% 0;}
.quality_management_bg .left { position: absolute; bottom: 0; left: 0; z-index: -1; width: 22.071%; line-height: 0;}
.quality_management_bg .right { position: absolute; top: 0; right: 0; z-index: -1; width: 31.5295%; line-height: 0;}
.quality_management_bg h2 { color: #8dac04; line-height: 160%; margin-bottom: 30px;}
.quality_management_bg .certified {display: flex; flex-wrap: wrap;}
.quality_management_bg .certified > div { width: 28%; margin: 50px 8% 50px 0; text-align: center;background: #AAC053; padding: 10px;box-shadow: 0px 0px 20px rgb(0 0 0 / 25%);}
.quality_management_bg .certified > div:nth-child(3n+3) { margin: 50px 0 50px 0;}
.quality_management_bg .certified > div > div { color: #fff; border: 1px solid #fff; line-height: 1.83; min-height: 220px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding: 20px;}
.quality_management_bg .certified > div > div span { margin-top: 15px; display: block;}

.faqs {padding: 30px 0 70px 0;}
.faqs > div {line-height: 187.5%; background: url("../images/icon_05d.png") repeat-x bottom left; padding: 30px 33px 35px 33px;}
.faqs > div > h3 {color: #85a40f; padding-left: 35px; position: relative; margin-bottom: 15px;}
.faqs > div > h3::before {content: ''; background: url("../images/icon_05c.png") no-repeat center; background-size: cover; width: 25px; height: 25px; position: absolute; left: 0; top: 3px;}
.faqs > div > p {color: #666666; padding-left: 35px;}
.datatable { width: 100%; min-width: 700px; border-collapse: collapse;}
.iframe-rwd { position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 50%; height: 80%;}

.ingredient {padding: 30px 0 10.639% 0; display: flex; flex-wrap: wrap; position: relative; z-index: 10;}
.ingredient > div {width: 21.703%; margin: 0 1.3188% 76px 1.3188%; position: relative; box-shadow: 0 0 13px rgba(0, 0, 0, 0.15);}
.ingredient > div > div:nth-child(1) {line-height: 0; position: relative; overflow: hidden;}
.ingredient > div > div:nth-child(1) img {width: 100%;}
.ingredient > div > div:nth-child(1):before {position: absolute; top: -20px; left: 100px; width: 140%; height: 100%; background: #fff; opacity: .5; content: ''; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s, -webkit-transform .6s, -o-transform .6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); z-index: 15;}
.ingredient > div:hover > div:nth-child(1):before {left: -100px; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);}
.ingredient > div > div:nth-child(2) {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #6f8811; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; filter:alpha(opacity=0); Opacity:0; transition: all 0.5s ease 0s;}
.ingredient > div:hover > div:nth-child(2) {filter:alpha(opacity=100); Opacity:1.0; transition: all 0.95s ease 0s;}
.ingredient > div > div:nth-child(2) > div {padding: 20px 15px 0 10px; overflow-y: auto;}
.ingredient > div > div:nth-child(2) > div h3 {text-align: center; margin-bottom: 35px;}
.ingredient > div > div:nth-child(2) > div ul {width: 100%; line-height: 150%; padding-bottom: 20px!important;}
.ingredient > div > div:nth-child(2) > div ul li {padding-left: 17px; position: relative; background: url("../images/icon_05e.png") no-repeat 7px 7px;}

.contact {padding: 30px 0 7.81% 0;}
.contact > p {color: #666666; line-height: 187.5%; text-align: center; margin-bottom: 55px;}
.contact > div {background-color: #f7f7f7; padding: 70px 70px 70px 35px; max-width: 1140px; margin: auto;}
.contact > .contactus{text-align: left;padding-left: 135px;}
.contactF {display: flex; flex-wrap: wrap;}
.contactF > div {width: 50%;}
.contactF > div > ul {list-style-type:none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.contactF > div > ul > li {list-style-type:none; margin: 0 0 13px 0; padding: 0;}
.contactF > div > ul > li span {color: #e90000;}
.contactF > div > ul > li:nth-child(1) {width: 100px; padding: 0 0 0 33px; color: #666666;}
.contactF > div > ul > li:nth-child(2) {width: calc(100% - 100px);}
.contactF > div:nth-child(2) > ul {align-items: flex-start;}
.contactF > div:nth-child(2) > ul > li:nth-child(1) {padding: 10px 0 0 33px;}
.contactB {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 45px 0 10px 0;}
.contactB > div {margin: 0px 6px!important; position: relative; z-index: 5;}
.contactB > div:hover::after {content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; -webkit-animation-name: blow-up; animation-name: blow-up; -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border: 1px solid #8dac04; z-index: -1;}
.contactB > div a:link, .contactB > div a:visited {text-decoration:none; color:#8dac04; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 12px 42px; border: 1px solid #a0c324; overflow: hidden; position: relative; z-index: 10; transition: all 0.5s ease 0s;}
.contactB > div a:active, .contactB > div a:hover {text-decoration:none; color:#fff; border: 1px solid #8dac04; position: relative; cursor:pointer; transition: all 0.5s ease 0s;}
.contactB > div a::before {content: ''; width: 200%; height: 100%; background-color: #8dac04; position: absolute; top: -20%; left: 87%; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.75s ease 0s;}
.contactB > div a:hover::before {left: -187%; transition: all 0.25s ease 0s;}
.contactB > div a::after {content: ''; width: 200%; height: 100%; background-color: #8dac04; position: absolute; top: -20%; left: 187%; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition: all 0.25s ease 0s;}
.contactB > div a:hover::after {top: -300%; left: -140%; width: 400%; height: 700%; transition: all 0.75s ease 0s;}
.about_factory {text-align: center;overflow: hidden;margin-top: 15px;border-radius: 2px;}
.about_factory span { display: block; color: #666;}

.cert-box {padding: 0px 0 60px 0;}
.cert-box h2{color: #8dac04;text-align: center;line-height: 160%;position: relative;z-index: 20;}
.cert-box .cert-bg{margin-top: 20px;}
.cert-box .cert-bg img:nth-child(2){display: none;}

.base-wrap{display: grid;grid-template-columns: repeat(2, 1fr);margin-bottom: 45px;gap:10px;}
.base-wrap .base-item .pho{font-size: 0;line-height: 0;height: 335px;}
.base-wrap .base-item .pho img{width: 100%;height: 100%!important;object-fit: cover;}
.base-wrap .base-item .text-block{width: 100%;height: 100%!important;align-content: center;padding: 45px;}
.base-wrap .base-item .text-block .title {margin-bottom: 32px;}
.base-wrap .base-item .text-block .title h3{color: #7a9500;position: relative;line-height: 1;}
.base-wrap .base-item .text-block .title h3::before{position: absolute;content: "";bottom: -14px;left: 0;width: 90%;height: 1px;background: linear-gradient(to right, #8dac04 0%, #fff 100%);}
.base-wrap .base-item .text-block .kind{list-style-type: none;margin: 0 0 15px 0;padding: 0;display: flex;flex-wrap: wrap;gap: 15px;}
.base-wrap .base-item .text-block .kind li{color: #333333;line-height: normal;display: flex;flex-wrap: nowrap;gap:4px;}
.base-wrap .base-item .text-block .txt{color: #333333;line-height: 187.5%;}

/* timeline */
.section_timeline{background-color: #fff;padding: 40px 0 0 0;}
.timeline_title{margin-bottom: 15px;}
.timeline_title, .client_title{text-align: center;}
.timeline_box{max-width: 800px; margin: 0 auto;min-height: 450px;}
.timeline_box ol {padding: 0;}
.timeline_list {text-align: left;list-style: none;}
.timeline_list h3{margin: 15px 0;color: #8dac04;font-weight: 600;}
.timeline_list h3:first-child{margin-top: 0;}
.timeline_list p{text-align: left;font-size: 16px;line-height: 187.5%;}
.timeline_list p span{display: block;line-height: 1.5;}
.timeline_list p span:not(:last-child){margin: 0 0 10px 0;}
/*  */