/* $Mobile
--------------------------------------------------------------------------------------*/
html, body {font-family: '微軟正黑體','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;}
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

@media screen and (max-width:600px){

.col12 { padding: 20px 0; }
.D-pc { display: none; }
.D-m { display: block; }


.main-5th { background: url(../images/kv-top-m.png) top center no-repeat #005E66; background-size: contain; padding-top: 54%; overflow-x:hidden;}
.l-section { width:95%; margin:0 auto;  }
.s1, .s2, .s3, .s4, .s5, .s6, .s7 { width: 100%; position: relative; }
.s1 { background: url(../images/grid1-bg.png) top center no-repeat #F0E1B0; background-size: contain; padding: 85% 0 20% 0;}
.s2 { background:#F0E1B0; padding: 50px 0 20% 0; margin-top: -10%;}
.s3 { background: url(../images/grid3-bg.png) top center no-repeat #fff; background-size: contain; padding: 50px 0 20% 0; margin-top: -10%;}
.s4 { background: url(../images/grid4-bg.png) top center no-repeat #C1D48B; background-size: contain; padding: 50px 0 20% 0; margin-top: -10%;}
.s5 { background: url(../images/grid5-bg.png) top center no-repeat #D4E9E2; background-size: contain; padding: 50px 0 20% 0; margin-top: -10%;}
.s6 { background: url(../images/grid6-bg.png) top center no-repeat #4D9F87; background-size: contain; padding: 90% 0 20% 0; margin-top: -110%;}
.s7 { background: url(../images/grid7-bg.png) top center no-repeat #F3A491; background-size: contain; padding: 70px 0 50px 0; margin-top: -10%;    border-radius: 0 0 20px 20px;}

/*裝飾圖片區塊*/
.icon { position: absolute; }
.s1 .icon { width: 75%; top:0; right:13%; }
.s2 .icon { width: 20%; top:-1%; right:72%; }
.s3 .icon { width: 25%; top:-5%; right:10%; }
.s4 .icon { width: 25%; top:-3%; right:5%; }
.s6 .icon { width: 45%; top:10%; right:1%; }
.s7 .icon.i2 { width: 30%; top:0%; left:10%; }

/*文字區塊*/
.text-block { width: 100%; padding: 0 10px; }
.text-block .date { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1em; color: #fff; background-color: #00704A; border-radius: 50%; margin: 0 auto; }
.text-block h2 { color: #00704A; font-weight: bold; font-size: 1em; margin: 20px 0 10px 0; text-align: center;}
.text-block h3 { color: #00704A; font-weight: bold; font-size: 1.6em; margin: 0 0 10px 0; text-align: center;}
.text-block p { color: #1E3932; font-weight: bold; font-size: 1em; margin: 0 0 20px 0;}
.text-block p span { color: #1E3932; font-weight: lighter;}
.text-block a { width: fit-content; max-width: 200px; display: flex; color: #00704A; padding: 10px 30px; font-size: 1em; border:1px solid #00704A; border-radius: 25px; transition: .5s; margin:0 auto; }
.text-block a:hover { background:#00704A; color: #fff; transition: .5s; }
.s3 .text-block .date { background-color: #D2A04A; }
.s3 .text-block h2 { color: #D2A04A;}
.s3 .text-block h3 { color: #D2A04A;}
.s3 .text-block a { color: #D2A04A; border:1px solid #D2A04A; }
.s3 .text-block a:hover { background:#D2A04A; color: #fff; }
.s5 .text-block .date { position: absolute; bottom: -20%; right: 14%; }
.s5 .text-block h3 { text-align: center; margin: 0 0 30px 0;}
.s5 .text-block p { margin: 0 0 20px 0;}
.s6 .text-block .date { background-color: #EDD44F; color: #4D9F87; }
.s6 .text-block h2 { color: #EDD44F;}
.s6 .text-block h3 { color: #EDD44F;}
.s6 .text-block p span { color: #fff;}
.s6 .text-block a { color: #EDD44F; border:1px solid #EDD44F; }
.s6 .text-block a:hover { background:#EDD44F; color: #4D9F87; }


.s5 .coffee-block { width: 100%; margin:0 auto; padding-top: 15%; display: flex; align-items: center; flex-direction: column-reverse; position: relative; z-index: 10; }
.s5 .coffee-block .coffee-name { margin: 20px 0 50px 0; }
.s5 .coffee-block .coffee-name h2 { font-size: 1.2em; color: #EDD44F; font-weight: bold; text-align: center; }
.s5 .coffee-block .coffee-name h2 span { font-size: .8em; }
.s5 .coffee-block .coffee-name p { font-size: 1em; color: #fff; text-align: center;}
.s5 .coffee-block .coffee-img { margin: 0 0 0 26%; }
.s5 .coffee-block .icon-star1 { position: absolute; width: 36%; top:10%; left:-2%;  }
.s5 .coffee-block .icon-star2 { position: absolute; width: 20%; top:10%; right:-2%; }


.new-products { max-width: 1000px; margin:0 auto; padding: 30px 0 50px 0; }
.new-products h2 { width: 95%; margin:0 auto; }
.new-products .date { background: url(../images/line-gold.png) center center repeat-x; margin-bottom: 10px; }
.new-products .date p { max-width: 120px; margin: 0 auto; font-size: 1em; color: #fff; padding: 10px 10px; background:#005E66; text-align: center;  }
.new-products ul { display: flex; flex-wrap: wrap; }
.new-products ul li { width: 48%; margin: 0 1% 20px 1%; }
.new-products ul li p { width: 100%; text-align: center; font-size: 1em; color: #fff; padding: 10px 0; }
.new-products .notice { max-width: 630px; margin:20px auto; color: #fff;font-size: 1em; line-height: 1.5em; }


}


/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){
.col12 { padding: 20px 15px; }
.D-pc { display: block; }
.D-m { display: none; }


.main-5th { background: url(../images/kv-top.png) top center no-repeat #005E66; background-size: contain; padding-top: 47%; overflow-x:hidden;}
.l-section { width: 95%; margin:0 auto;  }
.s1, .s2, .s3, .s4, .s5, .s6, .s7 { width: 100%; position: relative; }
.s1 { background: url(../images/grid1-bg.png) top center no-repeat #F0E1B0; background-size: contain; padding: 50px 0 50px 50px;}
.s2 { background:#F0E1B0; padding: 30px 0 200px 0;}
.s3 { background: url(../images/grid3-bg.png) top center no-repeat #fff; background-size: contain; padding: 50px 0 200px 0; margin-top: -180px;}
.s4 { background: url(../images/grid4-bg.png) top center no-repeat #C1D48B; background-size: contain; padding: 50px 0 200px 0; margin-top: -180px;}
.s5 { background: url(../images/grid5-bg.png) top center no-repeat #D4E9E2; background-size: contain; padding: 120px 0 200px 0; margin-top: -180px;}
.s6 { background: url(../images/grid6-bg.png) top center no-repeat #4D9F87; background-size: contain; padding: 420px 0 200px 0; margin-top: -620px;}
.s7 { background: url(../images/grid7-bg.png) top center no-repeat #F3A491; background-size: contain; padding: 100px 0 50px 0; margin-top: -160px;    border-radius: 0 0 30px 30px;}

/*裝飾圖片區塊*/
.icon { position: absolute; }
.s1 .icon { width: 50%; top:-10%; right:13%; }
.s2 .icon { width: 11%; top:5%; right:25%; }
.s3 .icon { width: 13%; top:0; right:40%; }
.s4 .icon { width: 14%; top:10%; right:10%; }
.s6 .icon { width: 45%; top:10%; right:1%; }
.s7 .icon.i1 { width: 24%; top:-20%; left:5%; }
.s7 .icon.i2 { width: 18%; top:10%; right:20%; }

/*文字區塊*/
.text-block { width: 88%; margin: 0 auto; }
.text-block .date { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2em; color: #fff; background-color: #00704A; border-radius: 50%; }
.text-block h2 { color: #00704A; font-weight: bold; font-size: 1.125em; margin: 20px 0 10px 20px;}
.text-block h3 { color: #00704A; font-weight: bold; font-size: 1.875em; margin: 0 0 10px 20px;}
.text-block p { color: #1E3932; font-weight: bold; font-size: 1.125em; margin: 0 0 20px 20px;}
.text-block p span { color: #1E3932; font-weight: lighter;}
.text-block a { width: fit-content; max-width: 200px; display: flex; color: #00704A; padding: 10px 30px; font-size: 1.125em; border:1px solid #00704A; border-radius: 25px; transition: .5s; float: right; }
.text-block a:hover { background:#00704A; color: #fff; transition: .5s; }
.s1 .text-block { width: 50%; max-width: 425px; margin:0;  }
.s3 .text-block .date { background-color: #D2A04A; }
.s3 .text-block h2 { color: #D2A04A;}
.s3 .text-block h3 { color: #D2A04A;}
.s3 .text-block a { color: #D2A04A; border:1px solid #D2A04A; }
.s3 .text-block a:hover { background:#D2A04A; color: #fff; }
.s5 .text-block .date { position: absolute; bottom: -35%; right: 14%; }
.s5 .text-block h3 { text-align: center; margin: 0 0 30px 0;}
.s5 .text-block p { margin: 0 0 20px 0;}
.s6 .text-block .date { background-color: #EDD44F; color: #4D9F87; }
.s6 .text-block h2 { color: #EDD44F;}
.s6 .text-block h3 { color: #EDD44F;}
.s6 .text-block p span { color: #fff;}
.s6 .text-block a { color: #EDD44F; border:1px solid #EDD44F; }
.s6 .text-block a:hover { background:#EDD44F; color: #4D9F87; }


.s5 .coffee-block { width: 100%; margin:0 auto; padding-top: 15%; display: flex; align-items: center; flex-direction: column-reverse; position: relative; z-index: 10; }
.s5 .coffee-block .coffee-name { margin: 20px 0 50px 0; }
.s5 .coffee-block .coffee-name h2 { font-size: 1.2em; color: #EDD44F; font-weight: bold; text-align: center; }
.s5 .coffee-block .coffee-name h2 span { font-size: .8em; }
.s5 .coffee-block .coffee-name p { font-size: 1em; color: #fff; text-align: center;}
.s5 .coffee-block .coffee-img { margin: -15% 0 0 26%; }
.s5 .coffee-block .icon-star1 { position: absolute; width: 36%; top:0; left:-2%;  }
.s5 .coffee-block .icon-star2 { position: absolute; width: 20%; top:0; right:-2%; }


.new-products { max-width: 1000px; margin:0 auto; padding: 30px 0 50px 0; }
.new-products h2 { max-width: 630px; margin:0 auto; }
.new-products .date { background: url(../images/line-gold.png) center center repeat-x; margin-bottom: 10px; }
.new-products .date p { max-width: 180px; margin: 0 auto; font-size: 1.125em; color: #fff; padding: 10px 30px; background:#005E66;  }
.new-products ul { display: flex; flex-wrap: wrap; justify-content: center; }
.new-products ul li { width: 23%; margin: 0 1% 20px 1%; }
.new-products ul li p { width: 100%; text-align: center; font-size: 1.125em; color: #fff; padding: 10px 0; }
.new-products .notice { max-width: 630px; margin:20px auto; color: #fff;font-size: 1.125em; line-height: 1.5em; }


}






/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

.col12 { padding: 20px 15px; }
.D-pc { display: block; }
.D-m { display: none; }


.main-5th { background: url(../images/kv-top.png) top center no-repeat #005E66; background-size: contain; padding-top: 47%; overflow-x:hidden;}
.l-section { width: 1120px; margin:0 auto;  }
.s1, .s2, .s3, .s4, .s5, .s6, .s7 { width: 100%; position: relative; }
.s1 { height: 586px; background: url(../images/grid1-bg.png) top center no-repeat; background-size: contain; padding: 80px 0 0 100px;}
.s2 { background:#F0E1B0; padding: 30px 0 200px 0;}
.s3 { background: url(../images/grid3-bg.png) top center no-repeat #fff; background-size: contain; padding: 50px 0 200px 0; margin-top: -180px;}
.s4 { background: url(../images/grid4-bg.png) top center no-repeat #C1D48B; background-size: contain; padding: 50px 0 200px 0; margin-top: -180px;}
.s5 { background: url(../images/grid5-bg.png) top center no-repeat #D4E9E2; background-size: contain; padding: 120px 0 200px 0; margin-top: -180px;}
.s6 { background: url(../images/grid6-bg.png) top center no-repeat #4D9F87; background-size: contain; padding: 420px 0 200px 0; margin-top: -620px;}
.s7 { background: url(../images/grid7-bg.png) top center no-repeat #F3A491; background-size: contain; padding: 100px 0 50px 0; margin-top: -160px;    border-radius: 0 0 30px 30px;}

/*裝飾圖片區塊*/
.icon { position: absolute; }
.s1 .icon { width: 50%; top:-10%; right:13%; }
.s2 .icon { width: 11%; top:5%; right:25%; }
.s3 .icon { width: 13%; top:0; right:40%; }
.s4 .icon { width: 14%; top:10%; right:10%; }
.s6 .icon { width: 45%; top:10%; right:1%; }
.s7 .icon.i1 { width: 24%; top:-20%; left:5%; }
.s7 .icon.i2 { width: 18%; top:10%; right:20%; }

/*文字區塊*/
.text-block { width: 62.5%; margin: 0 auto; }
.text-block .date { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2em; color: #fff; background-color: #00704A; border-radius: 50%; }
.text-block h2 { color: #00704A; font-weight: bold; font-size: 1.125em; margin: 20px 0 10px 20px;}
.text-block h3 { color: #00704A; font-weight: bold; font-size: 1.875em; margin: 0 0 10px 20px;}
.text-block p { color: #1E3932; font-weight: bold; font-size: 1.125em; margin: 0 0 20px 20px;}
.text-block p span { color: #1E3932; font-weight: lighter;}
.text-block a { width: fit-content; max-width: 200px; display: flex; color: #00704A; padding: 10px 30px; font-size: 1.125em; border:1px solid #00704A; border-radius: 25px; transition: .5s; float: right; }
.text-block a:hover { background:#00704A; color: #fff; transition: .5s; }
.s1 .text-block { width: 38%; max-width: 425px; margin:0;  }
.s3 .text-block .date { background-color: #D2A04A; }
.s3 .text-block h2 { color: #D2A04A;}
.s3 .text-block h3 { color: #D2A04A;}
.s3 .text-block a { color: #D2A04A; border:1px solid #D2A04A; }
.s3 .text-block a:hover { background:#D2A04A; color: #fff; }
.s5 .text-block .date { position: absolute; bottom: -35%; right: 14%; }
.s5 .text-block h3 { text-align: center; margin: 0 0 30px 0;}
.s5 .text-block p { margin: 0 0 20px 0;}
.s6 .text-block .date { background-color: #EDD44F; color: #4D9F87; }
.s6 .text-block h2 { color: #EDD44F;}
.s6 .text-block h3 { color: #EDD44F;}
.s6 .text-block p span { color: #fff;}
.s6 .text-block a { color: #EDD44F; border:1px solid #EDD44F; }
.s6 .text-block a:hover { background:#EDD44F; color: #4D9F87; }


.s5 .coffee-block { width: 1000px; margin:0 auto; display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 10; }
.s5 .coffee-block .coffee-name { margin: 0 10px 120px 0; }
.s5 .coffee-block .coffee-name h2 { font-size: 1.5em; color: #EDD44F; font-weight: bold; text-align: right; }
.s5 .coffee-block .coffee-name h2 span { font-size: .8em; }
.s5 .coffee-block .coffee-name p { font-size: 1.125em; color: #fff; text-align: right;}
.s5 .coffee-block .icon-star1 { position: absolute; width: 36%; top:0; left:-2%;  }
.s5 .coffee-block .icon-star2 { position: absolute; width: 20%; top:0; right:-2%; }


.new-products { max-width: 1000px; margin:0 auto; padding: 30px 0 50px 0; }
.new-products h2 { max-width: 630px; margin:0 auto; }
.new-products .date { background: url(../images/line-gold.png) center center repeat-x; margin-bottom: 10px; }
.new-products .date p { max-width: 180px; margin: 0 auto; font-size: 1.125em; color: #fff; padding: 10px 30px; background:#005E66;  }
.new-products ul { display: flex; flex-wrap: wrap; justify-content: center; }
.new-products ul li { width: 23%; margin: 0 1% 20px 1%; }
.new-products ul li p { width: 100%; text-align: center; font-size: 1.125em; color: #fff; padding: 10px 0; }
.new-products .notice { max-width: 630px; margin:20px auto; color: #fff;font-size: 1.125em; line-height: 1.5em; }


}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}