@charset "utf-8";
/* CSS Document */
#content {padding: 97px 0 0 0!important;}
.top-bar {background: #fff; box-shadow: 0 0 10px rgba(65, 72, 68, 0.1);}
.logo {width: 88px;}

.share_btn {position: absolute; top: 272px; left: 23px; z-index: 99; display: flex; flex-direction: column; align-items: center; width: 55px; font-family: 'Noto Serif TC', serif;}
.share_btn > div.txt {color: #383b37; letter-spacing: 1.3px; line-height: 25px; writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *display: inline; *writing-mode: tb-rl;}
.share_btn > ul li {margin-top: 19px; line-height: 0;}
#share_btn {position: absolute; top: -80px; left: 0; z-index: -11;}
.share_btn_change {top: 80px!important; bottom: auto!important; position: fixed!important; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;}
.share_btn_new {display: flex; flex-flow: column; padding: 10px 0 0 0;}
.share_btn_new > div {text-align: center; margin-top: 10px;}
.share_btn_new > div > .img {line-height: 0; font-size: 0; width: 44px; height: 44px; border-radius: 44px; padding: 2px 0 0 0; display: flex; flex-flow: wrap; justify-content: center; align-items: center; transform: scale(1, 1); transition: all 0.5s ease 0s;}
.share_btn_new > div > .img:hover {transform: scale(0.9, 0.9); transition: all 0.5s ease 0s;}
.share_btn_new > div.shop > .img {background: #d5b55c;}
.share_btn_new > div.line > .img {background: #44cb28;}

.subBanner {padding: 0 68px; position: relative; z-index: 1;}
@media only screen and (max-width:1200px){
    #content {padding: 60px 0 0 0!important;}
    .top-barC {height: 60px;}
    .logo {width: 170px; top: calc(50% - 23px)!important;}
    .top-barC .links {top: 10px;}
    .share_btn {bottom: auto!important; top: 80px; position: fixed; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;}
    .share_btn > ul li {margin-top: 15px;}
    footer::before {width: 450px; height: 345px; top: -72px; left: -278px;}
}

.path {max-width: 1480px; margin: auto; padding: 7.5px 100px; position: relative; z-index: 100;}
.path > ul, .path > ul li {list-style-type:none; margin: 0; padding: 0;}
.path > ul {width: 100%; display: flex; flex-wrap: wrap;}
.path > ul li {color:#646664; font-family:'Microsoft JhengHei'; letter-spacing: 1.2px;}
.path > ul li::after {content: '/'; margin: 0 4.5px; color:#adb6ab;}
.path > ul li:last-child::after {content: none;}
.path > ul li a:link, .path > ul li a:visited {text-decoration:none; color:#adb6ab; transition: all 0.5s ease 0s;}
.path > ul li a:active, .path > ul li a:hover {text-decoration:none; color:#cfaa45; cursor:pointer; transition: all 0.5s ease 0s;}

.main_wrap {padding: 38px 0 6.306% 0;}
.sub_wrap {padding: 2px 0 0 0;}
.sub_content {border-top: 1px solid #ecf0eb; padding: 2.344% 3.125% 5% 3.125%;}

.relatedP {border-top: 1px solid #ecf0eb; padding: 4.22% 0px 0px 0px; margin: 2.423% 0 0 0;}
.relatedP .pro_list {padding: 21px 0 0 0;}

.sub_menu {font-family: 'Noto Serif TC', serif; color: #646664; letter-spacing: 1.1px; position: relative; z-index: 50; /*border-bottom: 1px solid #ecf0eb;*/}
.sub_menu a:link, .sub_menu a:visited {text-decoration:none; color:#646664; display: block; position: relative; z-index: 1; transition: all 0.5s ease 0s;}
.sub_menu a:active, .sub_menu a:hover {text-decoration:none; color:#679c5a; cursor:pointer; transition: all 0.5s ease 0s;}
.sub_menu > div {display: none;}
.sub_menu > ul, .sub_menu ul > li {list-style-type:none; margin: 0; padding: 0;}
.sub_menu > ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; transition: all 0.5s ease 0s;}
.sub_menu ul > li {padding: 1px 22.5px 10px 22.5px; position: relative; z-index: 1;}
.sub_menu ul > li::after {content: ''; background: #ecf0eb; width: 1px; height: 20px; position: absolute; top: calc(50% - 13px); right: 0px;}
.sub_menu ul > li:last-child::after {content: none;}
.sub_menu li.current a {color:#679c5a;}
.sub_menu li a::after {content: ''; background: #bbdbc6; height: 3px; width: 0%; position: absolute; left: 50%; bottom: -12px; transition: all 0.5s ease 0s;}
.sub_menu li.current a::after, .sub_menu a:hover::after {content: ''; background: #bbdbc6; height: 3px; width: 100%; position: absolute; left: 0; bottom: -12px; transition: all 0.5s ease 0s;}
@media only screen and (max-width:992px){
    .sub_menu {padding: 40px 0 15px 0;}
    .sub_menu > div {width: 30px; height: 30px; position: relative; display: block; margin: auto; cursor: pointer;}
    .sub_menu > div > span:nth-child(1) {width: 30px; height: 2px; background-color: #679c5a; position: absolute; top: 10px; left: 0; transition: all 0.5s ease 0s;}
    .sub_menu > div.show > span:nth-child(1) {top: 14px; transform: rotate(45deg);}
    .sub_menu > div > span:nth-child(2) {width: 30px; height: 2px; background-color: #679c5a; position: absolute; top: 20px; left: 0; transition: all 0.5s ease 0s;}
    .sub_menu > div.show > span:nth-child(2) {top: 14px; transform: rotate(-45deg);}
    .sub_menu > div::before {content: attr(data-title); width: 260px; height: 30px; line-height: 30px; position: absolute; top: -30px; left: calc(50% - 130px); text-align: center; font-size: 12px; color: #679c5a;}
    .sub_menu > ul {max-height: 0; overflow: hidden; justify-content: flex-start;}
    .sub_menu > ul > li {width: calc(100% / 4); padding: 5px 10px!important; text-align: center;}
    .sub_menu > ul > li::after {content: none;}
    .sub_menu > ul.open {max-height: 2000px; transition: all 0.5s ease 0s;}
    .sub_menu a:hover::after {content: none;}
    .sub_menu li.current a::after, .sub_menu a:hover::after {bottom: -2px;}
}

.anchor_menu {font-family: 'Noto Serif TC', serif; color: #7ca571; letter-spacing: 1.1px; position: relative; z-index: 50;}
.anchor_menu a:link, .anchor_menu a:visited {text-decoration:none; color:#7ca571; line-height: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; padding: 10.5px 19px; transition: all 0.5s ease 0s;}
.anchor_menu a:active, .anchor_menu a:hover {text-decoration:none; color:#fff; cursor:pointer; transition: all 0.5s ease 0s;}
.anchor_menu > div {display: none;}
.anchor_menu > ul, .anchor_menu ul > li {list-style-type:none; margin: 0; padding: 0;}
.anchor_menu > ul {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; transition: all 0.5s ease 0s;}
.anchor_menu ul > li {padding: 0; border: 1px solid #7ca571; margin: 0 5px 10px 5px; position: relative; z-index: 1; transition: all 0.5s ease 0s;}
.anchor_menu ul > li:hover, .anchor_menu li.current {background: #7ca571;}
.anchor_menu li:hover a, .anchor_menu li.current a {color:#fff;}
@media only screen and (max-width:992px){
    .anchor_menu {padding: 40px 0 15px 0;}
    .anchor_menu > div {width: 30px; height: 30px; position: relative; display: block; margin: auto; cursor: pointer;}
    .anchor_menu > div > span:nth-child(1) {width: 30px; height: 2px; background-color: #679c5a; position: absolute; top: 10px; left: 0; transition: all 0.5s ease 0s;}
    .anchor_menu > div.show > span:nth-child(1) {top: 14px; transform: rotate(45deg);}
    .anchor_menu > div > span:nth-child(2) {width: 30px; height: 2px; background-color: #679c5a; position: absolute; top: 20px; left: 0; transition: all 0.5s ease 0s;}
    .anchor_menu > div.show > span:nth-child(2) {top: 14px; transform: rotate(-45deg);}
    .anchor_menu > div::before {content: attr(data-title); width: 260px; height: 30px; line-height: 30px; position: absolute; top: -30px; left: calc(50% - 130px); text-align: center; font-size: 12px; color: #679c5a;}
    .anchor_menu > ul {max-height: 0; overflow: hidden; justify-content: flex-start;}
    .anchor_menu > ul > li {width: calc(100% / 4 - 10px); margin: 5px;}
    .anchor_menu > ul > li::after {content: none;}
    .anchor_menu > ul.open {max-height: 2000px; transition: all 0.5s ease 0s;}
    .anchor_menu a:hover::after {content: none;}
    .anchor_menu li.current a::after, .anchor_menu a:hover::after {bottom: -2px;}
}

.pages {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: -4px 0 0 0;}
.pages a:link, .pages a:visited {text-decoration:none; color:#646664; font-family:'Microsoft JhengHei'; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-width: 40px; height: 40px; border-radius: 40px; overflow: hidden; margin: 0px 1px 5px 1px; position: relative; z-index: 10; transition: all 0.5s ease 0s;}
.pages a:active, .pages a:hover {text-decoration:none; color:#fff; cursor:pointer; transition: all 0.5s ease 0s;}
.pages a::before {content: ''; background-color: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.5s ease 0s; z-index: -1;}
.pages a:hover::before {background-color: #8ebd82; transition: all 0.5s ease 0s;}
.pages .prev {font-size: 0; margin: 0px 22px 5px 0px!important;}
.pages .next {font-size: 0; margin: 0px 0px 5px 22px!important;}
.pages .prev::after {content: ''; background: url("../images/arrow_c.png") no-repeat center; background-size: cover; width: 8px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -5px;}
.pages .prev:hover::after {background: url("../images/arrow_cw.png") no-repeat center; background-size: cover;}
.pages .next::after {content: ''; background: url("../images/arrow_c.png") no-repeat center; background-size: cover; width: 8px; height: 14px; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -3px;}
.pages .next:hover::after {background: url("../images/arrow_cw.png") no-repeat center; background-size: cover;}
.pages .current {color:#fff!important;}
.pages .current::before {background-color: #8ebd82; z-index: -1;}


.pro_wrap {padding: 3.206% 0 0 0;}
.list_pro {display: flex; flex-wrap: wrap;}
.list_pro > div {width: 31.09375%; margin: 0 3.359375% 30px 0; font-weight: 200; color: #383b37; letter-spacing: 0.2px; line-height: 1.5; text-align: center; position: relative; z-index: 1; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;}
.list_pro > div:nth-child(3n+3) {margin: 0 0 30px 0;}
.list_pro > div > div.photo {overflow: hidden; height: 0; padding-bottom: 100%; line-height: 0; border: 1px solid #e6e6e6; position: relative; z-index: 1; margin-bottom: 18px; transition: all 0.5s ease 0s;}
.list_pro > div > div.photo img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.list_pro > div > h3 {font-weight: 300; letter-spacing: 1.5px; margin-bottom: 6px; transition: all 0.5s ease 0s;}
.list_pro > div > p {font-weight: 200; margin-bottom: 10px;}
.list_pro > div > span {color: #adb6ab;}
.list_pro > div:hover > div.photo {border: 1px solid #cfaa45;}
.list_pro > div:hover > div.photo img {transform: scale(0.9, 0.9);}
.list_pro > div:hover > h3 {color: #cfaa45;}
.pro_sub {display: flex; flex-wrap: wrap;}
.pro_sub > div:nth-child(1) {width: 50%; padding: 0 7.423% 59px 0;}
.pro_sub > div:nth-child(2) {width: 50%; padding: 43px 0 59px 5.079%;}
.pro_sub > div:nth-child(2) h1 {font-family: 'Noto Serif TC', serif; letter-spacing: 2.6px; line-height: 1.4; position: relative; z-index: 1; margin-bottom: 8.35%;}
.pro_sub > div:nth-child(2) h1 span {position: absolute; top: 16.53%; left: -9.911%; z-index: -1;}
.pro_sub > div:nth-child(2) h1 font {color: #7fa276; letter-spacing: 0.8px; display: block; padding: 5px 0 0 0;}
.pro_sub > div:nth-child(2) > h2 {color: #7fa276; font-family:'Microsoft JhengHei';}
.pro_sub > div:nth-child(3) {width: 100%;}
.pro_sub > div:nth-child(3) > h2 {color: #383b37; font-family: 'Noto Serif TC', serif; border-bottom: 1px solid #ecf0eb; padding: 0 0 7px 0;}
.edit_a {display: flex; flex-wrap: wrap; padding: 45px 33px 23px 33px;}
.edit_a > div {padding: 0 0 8px 0;}
.edit_a > div:nth-child(2n+1) {width: 34.711%;}
.edit_a > div:nth-child(2n+2) {width: 65.289%;}
.edit_a > div > h3 {margin-bottom: 9px;}


.tex_wrap {padding: 3.3632% 0 0 0;}
.list_tex {display: flex; flex-wrap: wrap;}
.list_tex > div {width: 48.75%; margin: 0 2.5% 67px 0; display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; border: 1px solid #e6e6e6; box-shadow: 0 0 30px rgba(153, 157, 155, 0); transition: all 0.5s ease 0s;}
.list_tex > div:nth-child(2n+2) {margin: 0 0 67px 0;}
.list_tex > div > div.photo {width: 50%;}
.list_tex > div > div.photo img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.list_tex > div > div.photo > div.photoC {height: 0; padding-bottom: 84.89%; line-height: 0; overflow: hidden; position: relative; z-index: 1;}
.list_tex > div > div.text {width: 50%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px;}
.list_tex > div > div.text > div.textC {max-width: 225px; padding: 7px 0 0 0; margin: auto;}
.list_tex > div > div.text > div.textC > h3 {color: #383b37; font-family: 'Noto Sans TC', sans-serif; font-weight: 300; letter-spacing: 1.6px; margin-bottom: 4.45%; transition: all 0.5s ease 0s;}
.list_tex > div > div.text > div.textC > p {color: #646664; line-height: 1.8667; font-family:'Microsoft JhengHei'; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical;}
.list_tex > div > div.text > div.textC > span {display: block; color: #7fa276; font-family: 'Noto Serif TC', serif; text-align: right; padding: 5.34% 0 0 0; transition: all 0.5s ease 0s;}
.list_tex > div:hover {border: 1px solid rgba(153, 157, 155, 0.1); box-shadow: 0 0 30px rgba(153, 157, 155, 0.2); transition: all 0.5s ease 0s;}
.list_tex > div:hover > div.photo img {transform: scale(1.1, 1.1); transition: all 0.5s ease 0s;}
.list_tex > div:hover > div.text > div.textC > h3 {color: #d5b55c; transition: all 0.5s ease 0s;}
.list_tex > div:hover > div.text > div.textC > span {color: #cfaa45; transition: all 0.5s ease 0s;}


.res_wrap {}
.list_res {display: flex; flex-wrap: wrap; border-top: 1px solid #ecf0eb; padding: 5% 0 0 0;}
.list_res > div {width: 31.40625%; margin: 0 2.890625% 61px 0; border: 1px solid #ecedea; box-shadow: 0 0 30px rgba(153, 157, 155, 0); transition: all 0.5s ease 0s;}
.list_res > div:nth-child(3n+3) {margin: 0 0 61px 0;}
.list_res > div > div.photo {height: 0; padding-bottom: 65.504%; line-height: 0; overflow: hidden; position: relative; z-index: 1;}
.list_res > div > div.photo img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.list_res > div > div.text {padding: 8.75% 9.5% 7.75% 7.25%;}
.list_res > div > div.text > h2 {color: #383b37; line-height: 1.5; font-family: 'Noto Serif TC', serif; position: relative; z-index: 1;}
.list_res > div > div.text > h2::after {content: ''; background: #91ca83; height: 2px; width: 33px; position: absolute; bottom: -18px; left: 0; transition: all 0.5s ease 0s;}
.list_res > div > div.text > h2 a:link, .list_res > div > div.text > h2 a:visited {text-decoration:none; color:#383b37; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 37px; transition: all 0.5s ease 0s;}
.list_res > div > div.text > h2 a:active, .list_res > div > div.text > h2 a:hover {text-decoration:none; color:#cfaa45; cursor:pointer; transition: all 0.5s ease 0s;}
.list_res > div > div.text > p {color: #7c7e7c; font-family:'Microsoft JhengHei'; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.textB {display: flex; flex-wrap: wrap; padding: 9.91% 0 0 0;}
.textB > div:nth-child(1) {width: calc(100% - 95px); display: flex; flex-wrap: wrap;}
.textB > div:nth-child(1) a:link, .textB > div:nth-child(1) a:visited {text-decoration:none; color:#a0a69f; background: #f3f3f3; font-family:'Microsoft JhengHei'; padding: 0 6.5px; border-radius: 3px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; margin: 0 2px 2px 0; transition: all 0.5s ease 0s;}
.textB > div:nth-child(1) a:active, .textB > div:nth-child(1) a:hover {text-decoration:none; color:#fff; background: #7fa276; cursor:pointer; transition: all 0.5s ease 0s;}
.textB > div:nth-child(2) {width: 95px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end;}
.textB > div:nth-child(2) a:link, .textB > div:nth-child(2) a:visited {text-decoration:none; color:#7fa276; font-family: 'Noto Serif TC', serif; line-height: 1.5; transition: all 0.5s ease 0s;}
.textB > div:nth-child(2) a:active, .textB > div:nth-child(2) a:hover {text-decoration:none; color:#cfaa45; cursor:pointer; transition: all 0.5s ease 0s;}
.list_res > div:hover {border: 1px solid rgba(153, 157, 155, 0.1); box-shadow: 0 0 30px rgba(153, 157, 155, 0.2); transition: all 0.5s ease 0s;}
.list_res > div > div.photo:hover img {transform: scale(1.1, 1.1); transition: all 0.5s ease 0s;}
.list_res > div > div.text > h2:hover::after {width: 100%;}

.tes_wrap {padding: 14px 0 0 0;}
.list_tes {display: flex; flex-wrap: wrap; padding-bottom: 6.875%;}
.list_tes > div {width: 50%; position: relative; z-index: 1; display: flex; flex-wrap: wrap; margin: 48px 0 42px 0;}
.list_tes > div:nth-child(2n+1)::before {content: ''; background: #ecf0eb; width: 1px; position: absolute; top: 0; right: 0; bottom: 0;}
.list_tes > div::after {content: ''; background: #ecf0eb; height: 1px; position: absolute; bottom: -41px;}
.list_tes > div:nth-child(2n+1) {padding: 9px 45px 19px 1px;}
.list_tes > div:nth-child(2n+1)::after {left: 0; right: 45px;}
.list_tes > div:nth-child(2n+2) {padding: 9px 11px 19px 41px;}
.list_tes > div:nth-child(2n+2)::after {left: 45px; right: 0;}
.list_tes > div > div.photo {width: 207px; overflow: hidden;}
.list_tes > div > div.photo > div.photoC {height: 0; overflow: hidden; padding-bottom: 143px; /*border-radius: 50%;*/ line-height: 0; position: relative; z-index: 1;}
.list_tes > div > div.text {width: calc(100% - 207px); padding: 18px 0 0 18px; color: #7c7e7c; line-height: 1.8667;  font-family:'Microsoft JhengHei';}
.list_tes > div > div.text > h2 {color: #383b37; font-family: 'Noto Serif TC', serif; letter-spacing: 2px; line-height: 1.3; margin-bottom: 4.88%;}
.list_tes > div > div.text > h2 a:link, .list_tes > div > div.text > h2 a:visited {text-decoration:none; color:#383b37; transition: all 0.5s ease 0s;}
.list_tes > div > div.text > h2 a:active, .list_tes > div > div.text > h2 a:hover {text-decoration:none; color:#cfaa45; cursor:pointer; transition: all 0.5s ease 0s;}
.list_tes > div > div.text > p {line-height: 1.8667; font-family:'Microsoft JhengHei';}
.list_tes > div > div.text > span {color: #383b37; font-family: 'Noto Serif TC', serif; letter-spacing: 1.7px; line-height: 1.3; display: block; text-align: right; padding: 6.776% 0 0 0;}


.oem_icon {position: relative; z-index: 1;}
.oem_icon::before {content: ''; width: 8px; height: 8px; background: #d5b55c; position: absolute; top: calc(62% - 5.5px); left: -14px; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.oem_icon::after {content: ''; width: 8px; height: 8px; background: #d5b55c; position: absolute; top: calc(62% - 5.5px); right: -14px; z-index: -1; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.oem_comA {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; padding: 10.625% 0 6.954% 0;}
.oem_comA > div:nth-child(1) {width: 50%; color: #646664; font-family:'Microsoft JhengHei', sans-serif; padding: 0 3.907% 0 0;}
.oem_comA > div:nth-child(1) > h2 {margin-bottom: 11px;}
.oem_comA > div:nth-child(2) {position: absolute; left: calc(50% + 1px); top: 11.5%; z-index: -1;}
.oem_comB {padding: 60px 0 3.125% 0;}
.oem_comBT {max-width: 933px; color: #646664; font-family:'Microsoft JhengHei', sans-serif; text-align: center; margin: auto;}
.oem_comBT > h2 {margin-bottom: 11px; justify-content: center;}
.oem_comBL {display: flex; flex-wrap: wrap; justify-content: center; padding: 30px 0 0 0;}
.oem_comBL > div {width: calc(100% / 3); max-width: 360px; padding: 0 15px; text-align: center; line-height: 0;}
.oem_comC {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; padding: 60px 0 14.141% 0;}
.oem_comC > div:nth-child(1) {position: absolute; right: calc(50% + 11px); top: 2.12%; z-index: -1;}
.oem_comC > div:nth-child(2) {width: 50%; color: #646664; font-family:'Microsoft JhengHei', sans-serif; padding: 0 0 0 3.75%; margin: 0 0 0 auto;}
.oem_comC > div:nth-child(2) > h2 {margin-bottom: 9px;}
.oem_comD {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; padding: 60px 0 11.875% 0;}
.oem_comD > div:nth-child(1) {width: 31.25%; color: #646664; font-family:'Microsoft JhengHei', sans-serif;}
.oem_comD > div:nth-child(1) > h2 {margin-bottom: 9px;}
.oem_comD > div:nth-child(2) {width: 100%; position: absolute; left: calc(31.25% + 37px); top: -10px; z-index: -1; line-height: 0;}
.oem_comD > div:nth-child(2) > div:nth-child(1) {position: absolute; top: 0; left: 0; z-index: 1;}
.oem_comD > div:nth-child(2) > div:nth-child(2) {position: absolute; top: 86px; left: 16.25%; z-index: 1;}
.oem_comD > div:nth-child(2) > div:nth-child(3) {position: absolute; top: 0; left: 30.079%; z-index: 1;}
.oem_comD > div:nth-child(2) > div:nth-child(4) {position: absolute; top: 86px; left: 46.329%; z-index: 1;}
.oem_comE {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; padding: 60px 0 12.032% 0;}
.oem_comE > div:nth-child(1) {position: absolute; right: calc(50% + 3px); top: -4%; z-index: -1;}
.oem_comE > div:nth-child(2) {width: 50%; color: #646664; font-family:'Microsoft JhengHei', sans-serif; padding: 0 0 0 3.75%; margin: 0 0 0 auto;}
.oem_comE > div:nth-child(2) > h2 {margin-bottom: 11px;}
.oem_comF {padding: 60px 0 4.61% 0; color: #646664; font-family:'Microsoft JhengHei', sans-serif;}
.oem_comF > h2 {margin-bottom: 11px; justify-content: center;}
.oem_comFL {display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 0 0 0;}
.oem_comFL > div {width: 19.53125%; text-align: center; margin: 0 1.5625% 34px 1.5625%;}
.oem_comFL > div > div {width: 150px; height: 150px; border-radius: 50%; border: 1px solid #e5e5e5; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; margin: 0 auto 19px auto;}
.oem_comFL > div > div img {max-height: 100%;}
.oem_comG {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; padding: 60px 0 11.954% 0;}
.oem_comG > div:nth-child(1) {position: absolute; right: calc(50% + 27px); top: -2.16%; z-index: -1;}
.oem_comG > div:nth-child(2) {width: 50%; color: #646664; font-family:'Microsoft JhengHei', sans-serif; padding: 0 0 0 3.75%; margin: 0 0 0 auto;}
.oem_comG > div:nth-child(2) > h2 {margin-bottom: 9px;}
.oem_comH {padding: 60px 0 0px 0; color: #646664; font-family:'Microsoft JhengHei', sans-serif; text-align: center;}
.oem_comH > h2 {margin-bottom: 11px; justify-content: center;}
.oem_comHL {display: flex; flex-wrap: wrap; padding: 56px 0 0 0;}
.oem_comHL > div {width: calc(100% / 4); background-image: linear-gradient(90deg, rgba(221, 243, 228,0.6) 0%, rgba(198, 219, 205,0.6) 100%); position: relative; z-index: 1; padding: 46px 10px 24px 10px; margin-bottom: 50px;}
.oem_comHL > div::before {content: ''; height: 0; width: 0; border-color: transparent transparent transparent #dde9e1; border-style: solid solid solid solid; border-width: 14px 12px; position: absolute; top: calc(50% - 14px); left: 0; z-index: 1;}
.oem_comHL > div:first-child::before {content: none;}
.oem_comHL > div > div {width: 70px; height: 70px; border-radius: 50%; border: 1px solid #c6dbcd; background: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-size: 173.33%; color: #88b07e; font-family: 'Noto Serif TC', serif; letter-spacing: 2.2px; position: absolute; top: -36px; left: calc(50% - 35px); z-index: 10; padding: 0 0 4px 0;}
.oem_comHL > div > p {position: relative; z-index: 10;}
.oem_comI {padding: 60px 0 0px 0; color: #646664; font-family:'Microsoft JhengHei', sans-serif; text-align: center;}
.oem_comI > h2 {margin-bottom: 11px; justify-content: center;}
.oem_comIL {display: flex; flex-wrap: wrap; padding: 56px 0 0 0;}
.oem_comIL > div {width: calc(100% / 4); background-image: linear-gradient(90deg, rgba(255, 222, 129,0.6) 0%, rgba(213, 181, 92,0.6) 100%); position: relative; z-index: 1; padding: 46px 10px 24px 10px; margin-bottom: 50px;}
.oem_comIL > div::before {content: ''; height: 0; width: 0; border-color: transparent transparent transparent #e6d39d; border-style: solid solid solid solid; border-width: 14px 12px; position: absolute; top: calc(50% - 14px); left: 0; z-index: 1;}
.oem_comIL > div:first-child::before {content: none;}
.oem_comIL > div > div {width: 70px; height: 70px; border-radius: 50%; border: 1px solid #d5b55c; background: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-size: 173.33%; color: #d5b55c; font-family: 'Noto Serif TC', serif; letter-spacing: 2.2px; position: absolute; top: -36px; left: calc(50% - 35px); z-index: 10; padding: 0 0 4px 0;}
.oem_comIL > div > p {position: relative; z-index: 10;}


.new_wrap {padding: 14px 0 0 0;}
.newsL {display: flex; flex-wrap: wrap; padding: 1.407% 0 4.063% 0;}
.newsL > div {width: 50%; display: flex; flex-wrap: wrap; align-items: center; padding: 18px 32px 0 6px; margin: 0 0 93px 0; position: relative; z-index: 1;}
.newsL > div::after {content: ''; width: 1px; height: 100%; background: #e9e9e9; position: absolute; top: 0; right: 0; z-index: -1;}
.newsL > div:nth-child(2n+2)::after {content: none;}
.newsL > div:nth-child(2n+2) {padding: 18px 0 0 38px;}
.newsL > div > div.photo {width: 47.675%; position: relative; z-index: 1;}
.newsL > div > div.photo::before {content: ''; border: 1px solid #e5e5e5; width: calc(100% + 2.5px); height: calc(100% + 2.5px); position: absolute; left: -21px; top: -18px; z-index: 10; transition: all 0.5s ease 0s;}
.newsL > div:hover > div.photo::before {top: -7px!important; left: -7px!important; width: calc(100% + 12.5px); height: calc(100% + 12.5px); border: 1px solid #cfaa45;}
.newsL > div > div.photo img {transform: scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.newsL > div:hover > div.photo img {transform: scale(1.1, 1.1); transition: all 0.5s ease 0s;}
.newsL > div > div.photo > div {position: relative; z-index: 1; height: 0; overflow: hidden; padding-bottom: 100%;}
.newsL > div > div.text {width: 52.325%; padding: 11px 0 0 48px; color: #7c7e7c; line-height: 1.6;}
.newsL > div > div.text > div {color: #7c7e7c; font-family: 'Noto Serif TC', serif; letter-spacing: 0.9px; line-height: 1; position: relative; z-index: 1; padding: 0 0 0 24px; margin: 0 0 13.11% 0;}
.newsL > div > div.text > div > span {font-weight: 300; letter-spacing: 0.5px; position: absolute; left: 0; top: 62%; -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *display: inline; *writing-mode: tb-rl;}
.newsL > div > div.text > h3 {color: #383b37; font-family: 'Noto Serif TC', serif; line-height: 1.5; padding: 0 0 0 2px; margin: 0 0 8.62% 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; transition: all 0.5s ease 0s;}
.newsL > div:hover > div.text > h3 {color: #cfaa45; transition: all 0.5s ease 0s;}
.newsL > div > div.text > p {padding: 0 7px 0 0; color: #7c7e7c; line-height: 1.6; font-family:'Microsoft JhengHei', sans-serif; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.newsL > div:nth-child(2n+2) > div.photo::before {top: 17px; left: 16px;}


.abo_main {position: relative; z-index: 1; padding: 5.255% 0 9.617% 0;}
.abo_main::before {content: ''; background: url("../images/bg_a.jpg") no-repeat center / cover; position: absolute; top: -39px; left: 0; right: 0; bottom: 0; z-index: -1;}
.abo_logo {line-height: 0; text-align: center; margin-bottom: 3.047%;}
.abo_mainC {padding: 8.75% 0 0 0; position: relative; z-index: 1;}
.abo_mainC::before {content: ''; background: #ecf0eb; height: 1px; width: 565px; position: absolute; left: calc(50% - 282.5px); top: 0px; z-index: -1;}
.abo_con {background: url("../images/bg_b.png") no-repeat bottom center / 100%; padding: 227px 0 10px 0;}
.abo_conA {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; margin-bottom: 34.766%;}
.abo_conA > div:nth-child(1) {color: #646664; font-family:'Microsoft JhengHei', sans-serif; line-height: 28px;}
.abo_conA > div:nth-child(1) > h2 {margin-bottom: 10.536%;}
.abo_conA > div:nth-child(2) {position: absolute; right: -10%; top: -43.64%; z-index: -1;}
.abo_conB {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1;margin-bottom: 14.766%;}
.abo_conB > div:nth-child(1) {position: absolute; left: -16.015%; top: -77.333%; z-index: -1;}
.abo_conB > div:nth-child(2) {color: #646664; font-family:'Microsoft JhengHei', sans-serif; line-height: 28px; margin: 0 0 0 422px; max-width: 554px;}
.abo_conB > div:nth-child(2) > h2 {margin-bottom: 10.47%;}
.abo_conB > div:nth-child(2) > p {line-height: 30px;}
.abo_conC {display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; margin-bottom: 34.766%;}
.abo_conC > div:nth-child(1) {color: #646664; font-family:'Microsoft JhengHei', sans-serif; line-height: 28px; margin: 0 0 0 422px;}
.abo_conC > div:nth-child(1) > h2 {margin-bottom: 10.536%;}
.abo_conC > div:nth-child(2) {position: absolute; left:-8.015%; top: -43.64%; z-index: -1;width: 30%;}


.con_wrap {padding: 31px 0 0 0;}
.con_main {background: #f7f7f6; padding: 5.524% 9.37% 4.833% 9.764%;}
.con_row {display: flex; flex-direction: row; justify-content: space-between; font-family:'Microsoft JhengHei', sans-serif; color: #666666; margin-bottom: 8px;}
.con_col {border: 1px solid #e7e7e7; background: #fff; position: relative; z-index: 1;}
.form_note {position: absolute; top: 14px; left: 25px; z-index: 1; line-height: 1; font-size: 15px;}
.form_note > span {position: absolute; left: -15px; top: 2px; font-family:'Arial', sans-serif; color: #63cb30; font-weight: 600; font-size: 160%;}
.con_col_a {width: 56.5854%;}
.con_col_b {width: 42.4391%;}
.con_col_c {width: 100%;}
.con_row textarea {width: 100%; height: 132px; border: 0; background: transparent; padding: 10px 25px;}
.con_btn {display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 31px 0 0 0;}
.con_btn > button {max-width: 152px; width: calc(100% - 12px); height: 47px; border-radius: 47px; color: #7ca571; font-family:'Microsoft JhengHei', sans-serif; border: 1px solid #7fa276; background: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; cursor: pointer; margin: 5px; transition: all 0.5s ease 0s;}
.con_btn > .con_btn_s {background: #7ca571; color: #fff;}
.con_btn > button:hover {color: #fff; background: #cfaa45; border: 1px solid #cfaa45; transition: all 0.5s ease 0s;}

/*----------------------------------------/
數量選擇
----------------------------------------*/
#cms-amount-panel > div:first-child {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
}
#cms-amount-panel .cms-amount-value {
    border: 1px solid #999;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 156px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
}
#cms-amount-less {
    width: 36px;
    border: 0;
    border-right: 1px solid #999;
    line-height: 36px;
    display: block;
    text-align: center;
    background: none;
    cursor: pointer;
    outline: 0;
}
#cms-amount-more {
    width: 36px;
    border: 0;
    border-left: 1px solid #999;
    line-height: 36px;
    display: block;
    text-align: center;
    background: none;
    cursor: pointer;
    outline: 0;
}
#cms-amount-value {
    display: block;
    width: calc(100% - 72px);
    text-align: center;
    background: none;
    border-width: 0;
    font-size: 16px;
    height: 38px;
    line-height: 38px;
    outline: 0;
    padding: 0;
}
#cms-amount-value:disabled {
    color: lightgrey;
}
#cms-lower-panel{ width: 100%; margin-top: 15px;}
#cms-lower-panel > div + div { margin-top:5px; }
#cms-lower-panel > div.cms-lower-item {display: flex; flex-direction: row; align-items: center; width: 100%;  margin-bottom: 10px; font-size: 0.9rem;}
.cms-lower-item-checkbox{ width: 30px;}
.cms-lower-item-checkbox input[type="checkbox"] { width:20px;height: 40px; text-align:center;color:#000; background-color: #fff; border: solid 1px #333; border-radius:0px;}
.cms-lower-item-img{width:40px; height:auto; }
.cms-lower-item-img img { width:40px; height:auto;  }
.cms-lower-item-title{ width: 50%; max-width: 100%; padding: 0px 10px;   }
.cms-lower-item-title span{  font-weight: 700; }
.cms-lower-item-amount { width:12%;  margin: auto 10px;}
.cms-lower-item-amount  select{  width: 100%; margin: auto;  border: solid 1px #333;}
.cms-lower-item-price{ width: 18%;font-size: 0.875rem;  color:#df7475;}
.cms-lower-item-price span{  display: inline-block;}
@media (max-width: 767.98px) {
.cms-lower-item-amount  select{ padding-left: 0px;}
}

.fs_18 button.active {
    color: white !important;
    border-color: #7fa276;
    background-color: #7fa276;
}
.fs_18 button {
    display: inline-block;
    padding: 6px;
    margin-right: 5px;
    margin-bottom: 5px;
    min-width: 4rem;
    border: 1px solid #30315f;
    border-radius: 4px;
    color: #30315f;
    text-align: center;
}