.cms-main-content {padding: 0px;}
.cms-main-banner-img:before {  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(255,255,255,.1) 75%); background-image: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.1) 75%);}
.cms-about h2 { font-size:1.75rem; font-weight: 400; margin:3% 0; }
.cms-about h3 { font-size: 1.5rem; display: block;margin:5% 0; color:#4c9063; line-height: 1.75;}
.cms-about h4 { font-size: 1.75rem; display: block;margin:6% auto; }
#cms-main .cms-about p { font-size:1rem;	font-weight:400; line-height:2rem; color:#333; width: 100%;	display: block; margin-bottom: 5%;		}
.cms-about figure img{ width: 100%; max-width: 100%;}
.cms-about-wrap .edit{ display: inline-block; margin:2% auto 2% 40%; max-width:100%; padding:2vh 0; text-align: right;}
.cms-about-wrap .edit-half{display: inline-block; width:70%; margin:0 auto; padding: 2rem; }


.cms-about-1 { margin:0 auto;  padding:10vh 5vw 25vh 5vw; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; background-image: url("../images/index/contact-bg.png"), url("../images/index/contact-bg-r.png"),url(../images/about/about-01.jpg) ;background-color: #e3ece4;
 background-position: left top, right top,center bottom; background-size:30% auto, 30% auto,100% auto; background-repeat: no-repeat;}
.cms-about-2 {padding:10vh 0; background: url("../images/about/about-02.jpg") no-repeat  center top; background-size: 100% auto; background-repeat: no-repeat;  }
.cms-about-3 {padding:10vh 0; background-image: url("../images/about/about-right.png"),url("../images/about/about-03.jpg"); background-position: right top, center top;background-size:30% auto, 100% auto; background-repeat: no-repeat; background-attachment: fixed,scroll;}
.cms-about-box {width: 100%; margin:5% 100px; padding:15px; /* display: flex; flex-wrap: wrap; flex-direction: row;*/ background-color: rgba(255, 255, 255, 0.75);-webkit-box-shadow: 0 0 80px rgba(38, 38, 38, 0.3); box-shadow: 0 0 80px rgba(38, 38, 38, 0.3); }
.cms-about-box .cms-about-box-style{ padding: 100px 60px; background: url("../images/index/right-line-1.png") repeat-y right top rgba(255, 255, 255, 0.9);width: 100%;}
.cms-about-4 { margin:0 auto;  padding:10vh 5vw 5vh 5vw; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; background-image: url("../images/index/contact-bg.png"), url("../images/about/about-2-1.png"),url(../images/about/about-2-1.jpg) ,url(../images/about/about-bg.jpg) ; 
 background-position: left top, right top,center top,left top; background-size:30% auto, 30% auto,100% auto,100% auto; background-repeat: no-repeat,no-repeat,no-repeat,repeat-y;}
.cms-about-4 ol, .cms-about-4 ul { padding-left: 20px;}
.cms-about-5 { margin:0 auto;  padding:10vh 5vw 5vh 5vw; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; background:url(../images/about/about-5-1.jpg) left top no-repeat ;  background-size:100% auto;   }
.cms-about-6 {padding:10vh 0; background: url("../images/about/about-5-2.jpg") no-repeat right bottom #f3f1f6; background-size: 50% auto; background-repeat: no-repeat;  }
.cms-about-box-2 {width: 100%; margin:6% auto; padding:25px;  display: flex; flex-wrap: wrap; flex-direction: row; }
.cms-about-bg {padding:0; background: url("../images/about/about-bg.jpg") repeat-y left bottom ; background-size: 100% auto;   }
.cms-circle{ height: 36px; width: 36px; margin: auto; border: 1px solid #000; border-radius: 18px; text-align: center; color: #FFF; line-height: 36px; background-color: #000; font-size: 22px;}
.frame_1610 { max-width: 1810px; margin: auto; padding: 0 100px; width: 100%; height: 100%; }
.cms-about-7 {padding-top: 80px;}
.cms-about-7 .process_6 { display: flex; flex-wrap: wrap;justify-content: space-between;margin-top: 60px;}
.cms-about-7 .process_6 > div { background: #E2ECE4; width: 218px; border-radius: 25px;padding-bottom: 10px;margin: 20px 20px 20px 0;}
.cms-about-7 .process_6 ul { padding-left: 20px;margin: auto;}
.cms-about-7 .process_6 > div:last-child { margin: 20px 0 20px 0;}
.cms-about-7 .process_6 > div > div:first-child { position: relative; text-align: center;}
.cms-about-7 .process_6 > div > div:last-child { display: flex; flex-wrap: wrap; margin: 20px 0;}
.cms-about-7 .process_6 > div > div:last-child h4 {width: 100%;text-align: center;font-size: 24px; color: #003608;}
.cms-about-7 .process_6 > div > div span { position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); font-size: 80px; font-family: 'Noto Sans TC'; font-style: italic; text-shadow: 0px 0px 5px rgb(0 0 0 / 50%);}
.cms-about-8 {padding:10vh 0; background: url("../images/about/story_bg1.png") no-repeat  top center;background-size: auto;}
.cms-about-8 .pic { display: flex; flex-wrap: wrap;}
.cms-about-8 .pic > div, .cms-about-9 .pic > div { width: 30.33%; margin: 2% 1.5%; text-align: center; }
.cms-about-9 {padding:10vh 0; background: url("../images/about/story_bg2.png") no-repeat bottom center;background-size: auto;}
.cms-about-9 .pic { display: flex; flex-wrap: wrap; justify-content: center;}
.cms-about-9 .pic > div span { font-weight: 600!important; font-size: 20px!important; position: relative;text-align: justify;}
.cms-about-10 { padding: 5vh 0; background-image: url("../images/about/about-right-o.png"),url("../images/about/contact-bg-o.png"); background-position: 0px 200px, top right; background-size:20% auto, 20% auto; background-repeat: no-repeat;}
.cms-about-10 .pic { margin: 5vh 0;}
.cms-about-11 { margin:0 auto; padding: 21vh 5vw 21vh 5vw; background: url("../images/about/technology_bg1.png") no-repeat center; background-size: auto;}
.cms-about-12 { padding: 10vh 0 5vh; background: url("../images/about/technology_bg2.png") no-repeat center; background-size: auto;}
.cms-about-13 { padding: 10vh 0 5vh; background: url("../images/about/new_market_bg1.png") no-repeat top right; background-size: auto;}
.cms-about-14 { padding: 7vh 0 10vh; background: linear-gradient(180deg, #e3ece4 , transparent); position: relative;}
.cms-about-15 { padding: 10vh 0; background: linear-gradient(180deg, #f1eacd , transparent); position: relative;}
.cms-about-16 { padding: 10vh 0; background: url("../images/about/new_market_bg2.png") no-repeat bottom center; background-size: cover; position: relative;}
.cms-about-13 .pic, .cms-about-14 .pic, .cms-about-15 .pic, .cms-about-16 .pic { text-align: center;}
.cms-about-13 .cms-title-h1, .cms-about-14 .cms-title-h1, .cms-about-15 .cms-title-h1, .cms-about-16 .cms-title-h1 { margin: 0 0 40px;}
.cms-about-14 .cms-about-box, .cms-about-15 .cms-about-box, .cms-about-16 .cms-about-box { margin: 0!important;}
.cms-about-14 .top, .cms-about-14 .pic, .cms-about-15 .top, .cms-about-15 .pic, .cms-about-16 .top { display: flex; flex-wrap: wrap; margin-top: 50px;}
.cms-about-14 .top > div, .cms-about-15 .top > div, .cms-about-16 .top > div { padding: 0 15px 15px 15px;}
#cms-main .cms-about-14 .top ul, #cms-main .cms-about-15 .top ul, #cms-main .cms-about-16 .top ul { padding-left: 25px;}
#cms-main .cms-about-14 .top li, #cms-main .cms-about-15 .top li, #cms-main .cms-about-16 .top li { font-weight: 500!important; font-size: 24px; color: #003608;line-height: 1.75;font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Oswald', sans-serif!important;}
#cms-main .cms-about-16 .top .pic p { font-weight: 500!important; font-size: 14px; margin-bottom: 0; line-height: 1.5; font-family: 'Noto Sans TC', 'Microsoft Jhenghei', '微軟正黑體', 'Oswald', sans-serif !important;}
.cms-about-14 .top > div:first-child { width: 57%;}
.cms-about-14 .top > div:last-child { width: 42%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.cms-about-14 .pic > div, .cms-about-15 .pic > div { width: calc(100%/6); padding: 0 10px 10px 10px; text-align: center;}
.cms-about-15 .top > div:first-child { width: 48%; text-align: center;}
.cms-about-15 .top > div:last-child { width: 52%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.cms-about-16 .top > div:first-child { width: 63%;}
.cms-about-16 .top > div:last-child { width: 37%; display: flex; flex-wrap: wrap; justify-content: center;}
.cms-about-16 .top .pic { width: 100%; display: flex; flex-wrap: wrap;}
.cms-about-16 .top .pic > div { width: 103px; min-height: 103px; margin: 8px; background: #E2ECE4; padding: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.cms-about-14:before { content: ''; position: absolute; top: 5%; left: 0; background: url("../images/about/new_market_leaf1.png") no-repeat top left; background-size: cover; z-index: 4; width: 15.292%; padding-bottom: 60.852%;}
.cms-about-15:before { content: ''; position: absolute; top: 20%; left: 0; background: url("../images/about/about-right-o.png") no-repeat top left; background-size: cover; z-index: 4; width: 19.286%; padding-bottom: 47.662%;}
.cms-about-15:after { content: ''; position: absolute; top: 5%; right: -2%; background: url("../images/about/contact-bg-o.png") no-repeat top right; background-size: cover; z-index: 4; width: 20.5992%; padding-bottom: 13.926%;}
.cms-about-16:before { content: ''; position: absolute; top: 5%; left: 0; background: url("../images/about/new_market_leaf2.png") no-repeat top left; background-size: cover; z-index: 4; width: 18.287%; padding-bottom: 13.926%;}
.cms-about-16:after { content: ''; position: absolute; bottom: 0; left: 5%; background: url("../images/about/new_market_leaf3.png") no-repeat bottom left; background-size: cover; z-index: 4; width: 13.505%; padding-bottom: 13.873%;}
.cms-about-17 { padding: 26.5vh 0; background: url("../images/about/geored_coffee_bg1.png") no-repeat center; background-size: cover; position: relative;}
#cms-main .cms-about-17 p { text-align: center; font-weight: 600!important;}
.cms-about-18 { padding: 10vh 0; background: url("../images/about/geored_coffee_bg2.png") no-repeat top center; background-size: cover; position: relative;}
.cms-about-19 { padding: 10vh 0; background: url("../images/about/geored_coffee_bg3.png") no-repeat bottom center; background-size: cover; position: relative;}
.cms-about-20 { padding: 10vh 0; background: url("../images/about/geored_coffee_bg4.png") no-repeat bottom center; background-size: cover; position: relative;}
.cms-about-20 .cms-title {margin: 0 auto 30px;}
.pic-top_mv {width: 100%; height: 100%; position: relative; top: auto; right: auto; overflow: hidden; z-index: 0;}
.pic-top_mv video { width: 100%; height: auto; display: block; position: relative; z-index: 1; transform: scale(1); }
.cms-about-20 .pic-top_mv { padding: 0 15px;}

@media screen and (max-width: 1400px) {
	.cms-about-7 .process_6 { justify-content: center;}
	.cms-about-7 .process_6 > div, .cms-about-7 .process_6 > div:last-child { margin: 20px;}
	.cms-about-8 .pic > div, .cms-about-9 .pic > div { width: 48%; margin: 2% 1%;}
	.cms-about-14 .pic > div, .cms-about-15 .pic > div { width: calc(100%/3);}
	.cms-about-16 .top > div:first-child { width: 100%;}
	.cms-about-16 .top > div:last-child { width: 100%; align-items: center;}
	.cms-about-16 .top > div:last-child > div:first-child { width: 40%;}
	.cms-about-16 .top > div:last-child > div:last-child { width: 60%;}
}

@media screen and (max-width: 1024px) {
	.font-huge{ font-size:3em!important;  }
	.cms-about-wrap .edit{  margin:2% auto 2% 0; }
	.frame_1610, .frame_1750 { padding: 0 50px;}
	.cms-about-10 { background-image: none;}
	.cms-about-14:before, .cms-about-15:before, .cms-about-15:after, .cms-about-16:before, .cms-about-16:after { display: none;}
}

@media (max-width: 992px) {
	.cms-about-box { padding: 15px; margin:5% auto; }
	.cms-about-14 .top > div:first-child, .cms-about-14 .top > div:last-child, .cms-about-15 .top > div:first-child, .cms-about-15 .top > div:last-child, .cms-about-16 .top > div:first-child, .cms-about-16 .top > div:last-child, .cms-about-16 .top > div:last-child > div:last-child { width: 100%;}
	.cms-about-16 .top > div:last-child > div:first-child { width: auto;}
	.cms-about-14 .top, .cms-about-14 .pic, .cms-about-15 .top, .cms-about-15 .pic, .cms-about-16 .top { margin-top: 0;}
	.cms-about-16 .top > div:last-child > div:last-child { justify-content: space-between;}
	.cms-about-17 { padding: 16.5vh 0;}
}

 @media screen and (max-width: 800px) {
	h1 span {display: block;}
	.cms-about-wrap .edit-half{width:100%; margin:0 auto; }
	.cms-about-wrap{ width:100%; }
}

@media (max-width: 768px) {
	.cms-about h2 { font-size: 1.55rem;}
	.cms-about h3 { font-size: 1.4rem;}
	.cms-about figure img{ width: 100%; max-width: 80%;}
	.cms-about-1 { background-size:50% auto,40% auto, 150% auto;}
	.cms-about-2,.cms-about-3,.cms-about-4{padding: 15px;}
	.cms-about-box .cms-about-box-style{  padding: 10px; background:none; }
	.frame_1610, .frame_1750 { padding: 0 20px;}
	.cms-about-7 .process_6 > div,.cms-about-7 .process_6 > div, .cms-about-7 .process_6 > div:last-child { margin: 10px; width: calc(50% - 20px); max-width: 218px;}
}

@media (max-width: 576px) {
	.cms-about-7 .process_6 { margin-top:20px;}
	#cms-main .cms-about-14 .top li, #cms-main .cms-about-15 .top li, #cms-main .cms-about-16 .top li {font-size: 20px;}
	.cms-about-14 .pic > div, .cms-about-15 .pic > div { width: calc(100%/2);}
	.cms-about-16 .top > div:last-child > div:last-child { justify-content: space-around;}
}

@media (max-width: 430px) {
	.cms-about-7 .process_6 > div, .cms-about-7 .process_6 > div:last-child { width: calc(50% - 10px); margin: 0px 5px 20px 5px;}
	.cms-about-7 .process_6 > div > div span { font-size: 15vw;}
	.cms-about-16 .top > div:last-child > div:last-child { justify-content: center;}
}

@media (max-width: 360px) {
	.cms-about-16 .top .pic > div { width: 90px; min-height: 90px; margin: 5px;}
}