.inlineBlockSpacing {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}

body {overflow-x: hidden; background: url(../images/whBg.png) center top repeat;font-family: "微軟正黑體", "roboto", "Helvetica Neue", "Helvetica", "Arial","Microsoft JhengHei", sans-serif;}

#mtkContainer { position: relative; overflow-x: hidden;}
#mtkContainer, #mtkContainer * { box-sizing: border-box; }

a,a:hover { text-decoration: none; }
ul,li{list-style: none;}

.middle{width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}


/*版頭*/
header.header { position: relative; padding: 0; margin: 0; width: 100%; height:650px; background: url(../images/header.jpg) top center no-repeat; }
header.header h1 img.mobile{display:none;}

header.header .header-word{position: relative; z-index: 100; }
header.header .header-word .left-text{position: absolute; top: 28px; left: 26px; text-align: left;}
header.header .header-word .right-text{position: absolute; top: 28px; right: 26px; text-align: right;}
header.header .header-word span{
  display: block;
  font: 400 16px/1.5 'Scheherazade New', serif; 
  color: #fff; 
  letter-spacing: 0.1em;
  text-decoration: underline; 
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;  
}


/*--引言--*/
.introduction{
  position: relative; 
  background: url(../images/second_bg.jpg) top center no-repeat;
  min-height: 380px;
  background-attachment: fixed;
  background-size: cover;
  padding: 2.5% 2%;
}
.introduction .slogan{display: block; text-align: center;margin: 3% auto 2%; max-width: 505px;}
.introduction .slogan img{width: 100%;}
.introduction .text{text-align: center; font:bold 18px/1.8 "微軟正黑體"; color: #fff;letter-spacing: 0.1em;padding: 1%;}


/*選單*/
nav.pageMenu *{transition: 0.3s;}
nav.pageMenu{background: #f6efe5;display: inline-flex;flex-wrap: wrap;justify-content: center;width: 100%;padding: 7px 0 15px 0;z-index: 99;}
nav.pageMenu > a {max-width: 300px; font:28px/1.2 "微軟正黑體"; color:#FFF;width: 200px; margin:0 10px;padding: 21px 10px 10px 69px;}
nav.pageMenu .btn01{background:url(../images/btn02.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn01.on,nav.pageMenu .btn01:hover{background:url(../images/btn02_on.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn02{background:url(../images/btn01.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn02.on,nav.pageMenu .btn02:hover{background:url(../images/btn01_on.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn03{background:url(../images/btn03.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn03.on,nav.pageMenu .btn03:hover{background:url(../images/btn03_on.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn04{background:url(../images/btn04.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn04.on,nav.pageMenu .btn04:hover{background:url(../images/btn04_on.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn05{background:url(../images/btn05.png) top center no-repeat;background-size: 100%;}
nav.pageMenu .btn05.on,nav.pageMenu .btn05:hover{background:url(../images/btn05_on.png) top center no-repeat;background-size: 100%;}



nav.pageMenu.scroll{position: fixed;top:0;left: 0;}
nav.pageMenu.scroll > a {width: 170px;  font:22px/1.2 "微軟正黑體";padding:19px 10px 10px 64px;}



@media only screen and (max-width:1200px) {
nav.pageMenu > a ,nav.pageMenu.scroll > a{width: 18%;margin:0 5px;font:2.4vw/1.2 "微軟正黑體";padding: 2% 1% 1% 6%;}
}

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



}

@media only screen and (max-width: 530px) {
nav.pageMenu{justify-content: flex-start;flex-wrap: nowrap;overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;padding:7px 0 15px 0;}
nav.pageMenu > a,nav.pageMenu.scroll > a  {flex-shrink:0; padding: 16px 8px 9px 53px;font:18px/1.2 "微軟正黑體";width: 140px;}

}


/*--職人區--輪播--*/
.content{text-align: center;max-width: 1400px;margin: 40px auto 0 auto;}

.rotateWrap{position: relative; margin:0.5% auto 2%; width: 100%; text-align: center;width: 100%}
.rotateWrap .areaTitle{padding: 0% 1% 3%;}
.rotateWrap .areaTitle img{width: 100%;max-width: 242px;margin:0 auto;}

.rotateWrap .allBox{display: flex; flex-wrap: wrap; justify-content: center; position: relative; width: 95%; margin: 0 auto; align-items: flex-start;}

/*照片*/
.rotateWrap .allBox .personPic{position: relative; width: 46%;}
.rotateWrap .allBox .personPic img{width: 100%;}
.rotateWrap .allBox .personPic::after{ content: ""; position: absolute; top: 26px; right: 26px; width: 100%; height: 100%; background: #d9efb6; z-index: -1;}

.rotateWrap .allBox .personPic.brown::after{ background: #dec3ae;}
.rotateWrap .allBox .personPic.blue::after{ background: #b2bfdc;}



/*內文介紹*/
.rotateWrap .allBox .info{width: 54%; text-align: left; padding: 0 2% 0 3%;}
.rotateWrap .allBox .info h2{font: bold 36px/1.4 "Arial","微軟正黑體"; background: #7d9f46; color: #fff; display: inline-block;letter-spacing: 0.02em; padding: 0 0.3em;}


.rotateWrap .allBox .info h3{font-size: 24px; font-weight: bold; line-height: 1.4; color: #7d9f46;padding: 0.3em 0; letter-spacing: 0.02em;}
.rotateWrap .allBox .info p{font: 16px/1.8 "Arial","微軟正黑體"; padding-bottom: 1%;}
.rotateWrap .allBox .info small{font: 14px/1.8 "Arial","微軟正黑體";vertical-align: middle;color: #7d9f46;}
.rotateWrap .allBox .info .dotLine {border-bottom: 1px dotted #7d9f46; width: 100%; margin: 2% 0;}



/*---職人區--第2+3+4+5+6區---*/
.content-second,
.content-third,
.content-fourth,
.content-fifth,
.content-sixth,
.content-seventh{text-align: center;max-width: 1400px;margin: 0 auto;}

.talentWrap{position: relative; margin:6% auto 6%; width: 100%; text-align: center;}
.talentWrap .areaTitle{padding: 0% 1% 3%;}
.talentWrap .areaTitle img{width: 100%;max-width: 242px;margin:0 auto;}

.talentWrap .allBox{display: flex; flex-wrap: wrap; justify-content: center; position: relative; width: 95%; margin: 0 auto; align-items: flex-start;}

/*照片*/
.talentWrap .allBox .personPic{position: relative; width: 46%;}
.talentWrap .allBox .personPic img{width: 100%;}
.talentWrap .allBox .personPic::after{ content: ""; position: absolute; top: 26px; right: 26px; width: 100%; height: 100%; background: #b2bfdc; z-index: -1;}
.content-third .talentWrap .allBox .personPic::after{ background: #dec3ae;}
.content-fourth .talentWrap .allBox .personPic::after{ background: #d9efb6;}





/*內文介紹*/
.talentWrap .allBox .info{width: 54%; text-align: left; padding: 0 2% 0 3%;}
.talentWrap .allBox .info h2{font: bold 36px/1.4 "Arial","微軟正黑體"; color: #fff; display: inline-block;letter-spacing: 0.02em; padding: 0 0.3em;}
.talentWrap .allBox .info h3{font-size: 24px; font-weight: bold; line-height: 1.4; padding: 0.3em 0; letter-spacing: 0.02em;}
.talentWrap .allBox .info p{font: 16px/1.8 "Arial","微軟正黑體"; padding-bottom: 1%;}
.talentWrap .allBox .info small{font: 14px/1.8 "Arial","微軟正黑體";vertical-align: middle;}
.talentWrap .allBox .info .dotLine {border-bottom: 1px dotted #7d9f46; width: 100%; margin: 2% 0;}

.gnBlock{background: #7d9f46;}
.gnColor{color: #7d9f46;}
.blueBlock{background: #3d4e74;}
.blueColor{color: #3d4e74;}
.rotateWrap .allBox .info h2.brownBlock,.brownBlock{background: #a46546;}
.rotateWrap .allBox .info h3.brownColor,.brownColor,.rotateWrap .allBox .info small.brownColor{color: #a46546;}

.rotateWrap .allBox .info h2.blueBlock,.blueBlock{background: #3d4e74;}
.rotateWrap .allBox .info h3.blueColor,.blueColor,.rotateWrap .allBox .info small.blueColor{color: #3d4e74;}





.gnBlock2{background: #7bba48;}
.gnColor2{color: #7bba48;}



/*-1-私房雨露*/
.gnWrap{width: 100%; margin: 0 auto; position: relative; background: url(../images/gn_bg.jpg) center top no-repeat,#a2cc60; background-size: cover;padding: 35px 0 20px;}
/*-2-食尚人文*/
.blueWrap{width: 100%; margin: 0 auto; position: relative; background: url(../images/blue_bg.jpg) center top no-repeat,#3d4e74; background-size: cover;padding: 35px 0 20px;}
/*-3-微酵廚房*/
.brownWrap{width: 100%; margin: 0 auto; position: relative; background: url(../images/brown_bg.jpg) center top no-repeat,#a4765f; background-size: cover;padding: 35px 0 20px;}
/*-4-極獻奢華*/
.gnWrap-star{width: 100%; margin: 0 auto; position: relative; background: url(../images/gn_bg-star_new.jpg) center top no-repeat,#a2cc60; background-size: cover;padding: 35px 0 20px;}
/*-5-天生好動*/
.blueWrap-shoot{width: 100%; margin: 0 auto; position: relative; background: url(../images/blue_bg-shoot-new.jpg) center top no-repeat,#3d4e74; background-size: cover;padding: 35px 0 20px;}
/*-6-綠藝盎然*/
.brownWrap-plant{width: 100%; margin: 0 auto; position: relative; background: url(../images/brown_bg-plant.jpg) center top no-repeat,#a4765f; background-size: cover;padding: 35px 0 20px;}
/*-6-綠藝盎然*/

.brownWrap-fun{width: 100%; margin: 0 auto; position: relative; background: url(../images/brown_bg-fun-new.jpg) center top no-repeat,#a4765f; background-size: cover;padding: 35px 0 20px;}

.brownWrap-fun.calligraphy{ background: url(../images/brown_bg-calligraphy.jpg) center top no-repeat,#a4765f;background-size: cover;}

.blueWrap-shoot.lukang{background: url(../images/blue_bg-lukang-new.jpg) center top no-repeat,#3d4e74;background-size: cover;}

.brownWrap-plant.sugar{background: url(../images/brown_bg-sugar-2.jpg) center top no-repeat,#a4765f;background-size: cover;}
.blueWrap-shoot.bee{background: url(../images/blue_bg-bee-2.jpg) center top no-repeat,#3d4e74;background-size: cover;}
.gnWrap-star.cow{background: url(../images/gn_bg-cow.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.gnWrap-star.tea{background: url(../images/gn_bg-tea.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.gnWrap-star.algal{background: url(../images/gn_bg-algal.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.blueWrap-shoot.bamboo{background: url(../images/blue_bg-bamboo-new.jpg) center top no-repeat,#3d4e74;background-size: cover;}
.blueWrap-shoot.umbrella{background: url(../images/blue_bg-umbrella.jpg) center top no-repeat,#3d4e74;background-size: cover;}
.gnWrap-star.green{background: url(../images/gn_bg-green.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.gnWrap-star.music{background: url(../images/gn_bg-music.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.gnWrap-star.vegetable{background: url(../images/gn_bg-vegetable.jpg) center top no-repeat,#a2cc60;background-size: cover;}
.blueWrap-shoot.dyeing{ background: url(../images/blue_bg-dyeing.jpg) center top no-repeat,#3d4e74;background-size: cover;}
.brownWrap.clay{background: url(../images/brown_bg-clay.jpg) center top no-repeat,#a4765f;background-size: cover;}
.brownWrap.soysauce{background: url(../images/brown_bg-soysauce-2.jpg) center top no-repeat,#a4765f;background-size: cover;}

/*共用*/
.prodArea .colorTitle{width: 100%; /*max-width: 900px;*/ margin: 0 auto; display: inline-block; position: absolute;left: -25px;z-index: 3;}
.prodArea .colorTitle img{width: 100%;max-width: 95px;}
.color-tt-pc{display: inline-block;}
.color-tt-mob{display: none;}



/*--POI--*/
.slidecontain{display: none;}
.ph-group { position: relative; width: 100%; margin: 0 auto 0 auto; max-width: 1400px; padding: 0 2% 0;}
.ph-group-title{display: none;}
.prodArea{position: relative; width: 100%; max-width: 900px;margin: 0 auto; display: block; text-align: center; padding: 3% 1%;}

.prodArea .pd-sTitle{
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  width: 75%;
  padding: 1% 0 0.5%;
}
.prodArea .pd-sTitle h4{
  display: inline-block;
  color: #fff;
  /*width: auto;*/ 
  font: 24px/1.3 "arial","微軟正黑體";
  position: relative; 
  letter-spacing: 0.3em;
}
.prodArea .pd-sTitle h4 small{display: inline-block;font-size: 10px;/*vertical-align: bottom;*/ vertical-align: baseline;}
.prodArea .type-3-normal {display: flex;flex-wrap: wrap; justify-content: right;}
.prodArea .type-3-normal .ph-group-content {
  width: 42%; 
  position: relative; 
  overflow:hidden; 
  margin: 10px; 
  display: flex; 
  flex-wrap: wrap; 
  padding: 15px 15px 3em;
  background: #fff;
  box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px; 
  -webkit-box-shadow:rgb(121 121 121 / 30%) 0px 1px 5px 2px; 
  transition: 0.3s;
}
.prodArea .type-3-normal .ph-group-content-photo{overflow:hidden;}
.prodArea .type-3-normal .ph-group-content-photo img{width: 100%;}
.prodArea .type-3-normal .ph-group-content-photo .ph-group-content-tag{padding: 8px 5px 5px;position: absolute;top: 15px;left: 0px; font: 400 16px/1 "Century Gothic","微軟正黑體";color: #fff;background: #ff6275;padding: 5px 12px 5px 6px; border-radius: 0 99rem 99rem 0;}
.prodArea .type-3-normal .ph-group-content-text{ text-align: left; width: 100%; letter-spacing: 0.05em;}
.prodArea .type-3-normal .ph-group-content-text-name{
  display: block;
  color:#30375c;
  font: bold 20px/1.3 "微軟正黑體"; 
  padding: 15px 0;
  border-bottom: 1px solid #ef7d4e;
}
.prodArea .type-3-normal .ph-group-content-text-detail{color:#4f4f4f; font:14px/1.5 "微軟正黑體";text-align: left; margin: 5px auto;}
.prodArea .type-3-normal .ph-group-content-text-detail a {color:#4f4f4f;}
.prodArea .type-3-normal .ph-group-content-text-price{width: 90%; display: block; color:#e32222; font:bold 26px/1.4 "Century Gothic","微軟正黑體"; text-align: center; margin:10px auto 10px auto; align-self: end; position: absolute; bottom: 5px; left: 5%;}
.prodArea .type-3-normal .ph-group-content-text-price span{font:16px/1.4 "Century Gothic","微軟正黑體";color: #30375c; vertical-align: baseline;}
.prodArea .type-3-normal .ph-group-content:hover{transform: translateY(5px);/*filter: brightness(110%);*/}

.prodArea .ph-group-content-text-sale{color: #e72c2c; font:14px/1.5 "微軟正黑體";margin: 7px auto;}
.prodArea .ph-group-content-text-sale a {color: #e72c2c;}
.poi-header .mobile-menu-content .mobile-menu-content-title .mobile-menu-collapse-btn i{display: none;}




.bnAD{padding: 40px 0 0px 0;text-align: center;}
.bnAD.bnAD2{margin: 30px auto;}
.bnAD img.pc{width: 90%;max-width: 1100px;margin: 0 auto 0 auto; }
.bnAD img.m{width: 90%;max-width: 800px;display: none;margin: 0 auto;}

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

.bnAD{/*margin: 60px auto 0px auto;*/padding:50px 0 0 0;}
.bnAD img.pc{display: none;}
.bnAD img.m{display: block;}

}







/*兩支-三支POI*/


.morePoi .ph .ph-group{display: block;}
.morePoi .ph .ph-group .ph-group-content {width: 100%;display: block;padding: 15px;margin: 10px auto;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-photo{display: inline-block;width: 27%;max-width: 220px;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-text{display: inline-block;width: 70%;margin: 5px 5px 5px 10px ;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-text-price{width: auto;position: static;display: inline-block;margin: 0px auto;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-text .ph-group-content-text-detail{margin: 5px auto;}
.morePoi .ph .ph-group  .ph-group-content .ph-group-content-text-name{font: bold 16px/1.3 "微軟正黑體";border-bottom: none;padding: 5px 0;}
.morePoi .ph .ph-group  .ph-group-content .ph-group-content-text-sale{margin: 0px auto;}
.morePoi .prodArea .colorTitle{left: -346px;}
.morePoi .ph{position: relative;left: 187px;}
.morePoi .prodArea .pd-sTitle{display: block;width: 65%;}
.ph-group-content-otherlink{display: block;margin: 5px auto;text-align: right;}
.ph-group-content-otherlink a {/*background:#f78255; */padding: 5px 10px ;color:#2745eb;border-radius: 20px;font:14px/1.4 "微軟正黑體";transition: 0.3s;display: inline-block;text-decoration: underline;}

.ph-group-content-otherlink a:hover{transform: translateY(-5px);}




@media only screen and (max-width: 1300px) {
.morePoi .ph{left: 12%;}
.morePoi .prodArea .colorTitle{width: auto;left: -30px;}
.morePoi .ph .ph-group .ph-group-content {width: 80%;}
}

@media only screen and (max-width: 1000px) {
.morePoi .prodArea .colorTitle{left: 0;}
.morePoi .ph{left: 8%;}
}


@media only screen and (max-width:768px) {
.morePoi .prodArea .colorTitle{width: 100%;}
.morePoi .ph{left: 0;}
.morePoi .ph .ph-group .ph-group-content{width: 90%;}

}

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

.morePoi .ph .ph-group .ph-group-content .ph-group-content-photo{max-width: none;width: 100%;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-text{width: 100%;margin: 5px auto;}
.morePoi .ph .ph-group .ph-group-content .ph-group-content-text-price{width: 90%;}
.morePoi .ph .ph-group{display: flex;overflow-x: scroll;}
.morePoi .ph .ph-group .ph-group-content{margin:0 10px;}


.ph-group-content-otherlink{text-align: center;}

}



a{ flex-grow: 0; /*flex-shrink: ;*/}

/*slick*/
.slick-next { right: 0px; z-index: 10;}
.slick-prev { left: 0px;z-index: 10;}
.slick-dots { bottom: 20px; }/* Dots */
.slick-prev:before{content: '❮'; color: #3d4e74; opacity: 1;line-height: 2;}
.slick-next:before{content: '❯'; color: #3d4e74; opacity: 1;line-height: 2;}


@media only screen and (max-width: 800px) {
  .slick-prev:before, .slick-next:before{font-size: 40px;}
}

@media only screen and (max-width: 600px) {
  .slick-prev:before, .slick-next:before{font-size: 30px; line-height: 3;}
}



/*黏人精*/
.fixBase{display: none; position: fixed; bottom: 3%; right: 2%; z-index: 100;}
.fixBase ul{list-style: none;}
.fixBase li {position: relative; margin-bottom: 10px; padding: 14px; width: 70px; height: 70px; text-align: center; background: rgba(0,0,0,0.8); border-radius: 99em; transition: .3s;}
.fixBase li a { width: 100%; font: 18px/22px "微軟正黑體";color: #fff; text-align: center;}
.fixBase ul li.fixGreen:hover{ background: #618030; }
.fixBase ul li.fixBlue:hover{ background: #5a7bc4; }
.fixBase ul li.fixBrown:hover{ background: #633c28; }


@media only screen and (max-width: 800px) {
  .fixBase{ 
    right: 0; 
    top: inherit; 
    bottom: 0;  
    margin: 0; 
    width: 100%; 
    text-align: center; 
    background: rgba(0,0,0,0.7); 
  }

  .fixBase ul{overflow-x: scroll;white-space: nowrap;}/*滾軸*/

  .fixBase ul li{ 
    display: inline-block; 
    /*float: none; */
    width: auto; 
    height: auto; 
    margin: 0; 
    padding: 12px 15px; 
    background: none; 
    border-radius: 0;
  }
  .fixBase ul li a{width: 100%; font:16px/16px "微軟正黑體"; } 

}


.beachCleanBase{max-width: 1100px;width: 100%;margin: 10px auto 30px auto;}
.beachCleanTitle{font:bold 30px/1.4 "微軟正黑體";color: #a47343;text-align: center;margin: 10px auto;position: relative;display: block;}
.beachCleanTitle:before{content: "";position: absolute;width: 15%;height:1px;background:  #a47343;left: 10%;top: 50%;}
.beachCleanTitle:after{content: "";position: absolute;width: 15%;height:1px;background:  #a47343;right: 10%;top: 50%;}
.beachCleanTextBg{background: url(../images/beach_bg.jpg) center top no-repeat;position: relative; padding: 118px 0;}
.beachCleanText{position: absolute;right: 13%;top:15%;}
.beachCleanText img{max-width: 415px;width:100%;margin: 5px auto;}
.beachCleanText a {background:#FFF;border-radius: 20px;padding: 5px 10px;font:bold 16px/1.4 "微軟正黑體";color: #a77338;margin: 10px auto;display: block;text-align: center;width: 80%;transition: 0.3s;box-shadow: 0px 0px 4px rgba(0,0,0,0.1);}
.beachCleanText a:hover{background:#a77338;color: #FFF;}


/*-------------------------------RWD-------------------------------*/
@media only screen and (max-width: 1430px) {
  .rotateWrap .allBox,
  .talentWrap .allBox{width: 90%; padding-left: 2%;}

  .rotateWrap .allBox .personPic,
  .talentWrap .allBox .personPic{width: 50%;}

  .rotateWrap .allBox .info,
  .talentWrap .allBox .info{width: 50%;}

  .rotateWrap .allBox .info p > .brOne{display: none;}

  .content{width: 95%;}

}


@media only screen and (max-width: 1280px) {
  .introduction{background: url(../images/second_bg.jpg) center center no-repeat; min-height: 40vh;padding: 6% 2% 8%;}
}


@media only screen and (max-width: 1000px) {
  header.header {height:auto; background: none;}
  header.header h1 img.mobile{display:block;width: 100%;}
  header.header .header-word{display: none;}

  .rotateWrap .allBox .info h2,
  .talentWrap .allBox .info h2{font-size: 34px;}

  .beachCleanTitle{font:bold 2.5vw/1.4 "微軟正黑體";}
}


@media only screen and (max-width: 920px) {
  .rotateWrap{margin: 1.8% auto 1%;}
  .talentWrap{margin: 6% auto 7%;}

  .rotateWrap .areaTitle,
  .talentWrap .areaTitle{padding: 1% 1% 4%;}
}



@media only screen and (max-width: 800px) {
  .introduction{min-height: auto;}
  .introduction .text{font-size: 16px;}

  .rotateWrap .allBox,.talentWrap .allBox{padding-left: 0;}

  .rotateWrap .allBox .personPic,
  .talentWrap .allBox .personPic{width: 100%;}

  .rotateWrap .allBox .personPic::after,
  .talentWrap .allBox .personPic::after{display: none;}

  .rotateWrap .allBox .info,
  .talentWrap .allBox .info{width: 100%;padding: 3% 2% 2%;}

  .beachCleanTitle{font:bold 3.5vw/1.4 "微軟正黑體";}
  .beachCleanTitle:before, .beachCleanTitle:after{content: none;}
}



@media only screen and (max-width: 768px) {
  .introduction .text{padding: 2%;}

  .gnWrap{background: url(../images/mobile_gn_bg.jpg) center top no-repeat,#a2cc60; background-size: cover;}
  .blueWrap{background: url(../images/mobile_bl_bg.jpg) center top no-repeat,#3d4e74; background-size: cover;}
  .brownWrap{background: url(../images/mobile_br_bg.jpg) center top no-repeat,#a4765f; background-size: cover;}
  .brownWrap-fun{background: url(../images/mobilel_bg-fun.jpg) center top no-repeat,#a4765f; background-size: cover;}
  .gnWrap-star{background: url(../images/mobile_bg-star.jpg) center top no-repeat,#a2cc60; background-size: cover;}
  .blueWrap-shoot{background: url(../images/mobilel_bg-shoot.jpg) center top no-repeat,#3d4e74; background-size: cover;}
  .brownWrap-plant{background: url(../images/mobile_bg-plant.jpg) center top no-repeat,#a4765f; background-size: cover;}
  .brownWrap-fun.calligraphy{ background: url(../images/mobile_bg-calligraphy.jpg) center top no-repeat,#a4765f;background-size: cover;}
  .blueWrap-shoot.lukang{background: url(../images/mobile_bg-lukang.jpg) center top no-repeat,#3d4e74;background-size: cover; }
  .brownWrap-plant.sugar{background: url(../images/mobile_bg-sugar.jpg) center top no-repeat,#a4765f;background-size: cover;}
  .blueWrap-shoot.bee{background: url(../images/mobile_bg-bee.jpg) center top no-repeat,#3d4e74;background-size: cover;}
  .gnWrap-star.cow{background: url(../images/mobile_bg-cow.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .gnWrap-star.tea{background: url(../images/mobile_bg-tea.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .gnWrap-star.algal{background: url(../images/mobile_bg-algal.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .blueWrap-shoot.bamboo{background: url(../images/mobile_bg-bamboo.jpg) center top no-repeat,#3d4e74;background-size: cover;}
  .blueWrap-shoot.umbrella{background: url(../images/mobile_bg-umbrella.jpg) center top no-repeat,#3d4e74;background-size: cover;}
  .gnWrap-star.green{background: url(../images/mobile_bg-green.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .gnWrap-star.music{background: url(../images/mobile_bg-music.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .gnWrap-star.vegetable{background: url(../images/mobile_bg-vegetable.jpg) center top no-repeat,#a2cc60;background-size: cover;}
  .blueWrap-shoot.dyeing{ background: url(../images/mobile_bg-dyeing.jpg) center top no-repeat,#a4765f;background-size: cover;}
  .brownWrap.clay{background: url(../images/mobilel_bg-clay.jpg) center top no-repeat,#a4765f;background-size: cover;}
  .brownWrap.soysauce{background: url(../images/mobilel_bg-soysauce.jpg) center top no-repeat,#a4765f;background-size: cover;}


  .color-tt-pc{display: none;}
  .color-tt-mob{display: inline-block; width: 35%;}
  .prodArea .colorTitle{text-align: left;}
  .prodArea .colorTitle .color-tt-mob img{width: 100%; max-width: 335px;}

  .prodArea .pd-sTitle{width: 100%; padding: 1% 6% 1% 1%; position: absolute;top: 25%; display: block; text-align: right;right: 0;}
  .prodArea .pd-sTitle h4{font-size: 2em; text-shadow: 1px 2px 10px #000;}
  .ph{margin-top: 45%;}

  .ph-group,.prodArea .ph-group{flex-wrap: nowrap; /*overflow-x: scroll;*/ flex-grow: 1;align-items: stretch; justify-content: flex-start; padding: 2% 3% 5%;}
  .prodArea .type-3-normal .ph-group-content {width: 70%; flex-wrap: wrap; align-content: flex-start; flex-shrink: 0; flex-grow: 1;}

  .rotateWrap .allBox .info h2, .talentWrap .allBox .info h2{font-size: 2.2em;}

  .slick-dots{bottom: 0px;}

}

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

.beachCleanText{position: static;text-align: center;margin-top:0px;}
.beachCleanTextBg{padding: 33px 0;}
.beachCleanText img{width: 85%;}
.beachCleanText a{font:bold 16px/1.4 "微軟正黑體";}

}

@media only screen and (max-width: 500px) {
  .prodArea .pd-sTitle{top: 23%;}
  .prodArea .pd-sTitle h4{font-size: 1.7em;}
}



@media only screen and (max-width: 440px) {
  .prodArea .pd-sTitle{top: 21%;}
  .prodArea .pd-sTitle h4{font-size: 1.6em;}
  .beachCleanTitle{font:bold 5vw/1.4 "微軟正黑體";}

  .beachCleanTextBg{background-position:60% 0;}
  .beachCleanBase{width: 90%;}
}

@media only screen and (max-width: 414px) {
  .introduction .slogan{width: 95%;}
  .introduction .text{font-size: 14px; letter-spacing: 0;}

  .color-tt-mob{width: 45%;}
  .prodArea .pd-sTitle{top:22%;}
  .prodArea .pd-sTitle h4{font-size: 1.5em;}

  .ph {margin-top: 50%;}

  .rotateWrap .allBox .info h2, .talentWrap .allBox .info h2{font-size: 2em;}
  .talentWrap .allBox .info h3{font-size: 1.6em;}
  .rotateWrap .areaTitle img, .talentWrap .areaTitle img{width: 55%;}

  .slick-dots {bottom: -15px;}
  .slick-dotted.slick-slider{margin-bottom: 40px;}

}


@media only screen and (max-width: 400px) {
  .prodArea .pd-sTitle{top:21%;}
}


@media only screen and (max-width: 350px) {
  .prodArea .pd-sTitle{top:20%;}
}

@media only screen and (max-width: 330px) {
  .prodArea .pd-sTitle{top:19%;}

}



.videoGo{width: 90%;text-align: center;margin: 20px auto;}
.videoGo iframe {max-width: 900px;width: 100%;}
.videoTitle{font:bold 24px/1.4 "微軟正黑體";margin: 10px auto;color:#30a6c5;}

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

.videoTitle{font:bold 20px/1.4 "微軟正黑體";width: 90%;}

}