/* ----------------通用-------------- */
/* ----------------通用-------------- */
/* ----------------通用-------------- */
/* ----------------通用-------------- */
:root{
  --padding: 50px;
}

#mtkContainer {
    text-align: left;
    /*font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;*/
    font-family: 'Noto Serif TC', serif;
    font-weight: 400;
    background: url(../images/bg.jpg) center top repeat-y;
    color: #4a3e40;
}

#mtkContainer * {
    transition: all 0.2s , font-size 0s;
}

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

img {
    width: 100%;
    border: 0;
    vertical-align: top;
}
.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img{width: auto;}

a {
    text-decoration: none;
    color: #4a3e40;
}

main{
  position: relative;
    z-index: 2;
}

.color-cover{
  width: 100%;
  position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
    z-index: 1;
 }

.tour{ 
  padding: var(--padding) 0;
}

 .poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img , .poi-header .mobile-menu-level-1 .tab .tablinks.active .tablinks-img{
      background-color: white;
 }

 @media screen and (max-width:1400px) {
    :root{
      --padding: 5%;      
    }

    #mtkContainer{
      background-size: 110%;
    }
}
/* ----------------通用-------------- */
/* ----------------通用-------------- */
/* ----------------通用-------------- */
/* ----------------通用-------------- */




/* ----------------goTop-------------- */
/* ----------------goTop-------------- */
/* ----------------goTop-------------- */
/* ----------------goTop-------------- */
#goTop {
    display: none;
    position: fixed;
    z-index: 99;
    right: 10px;
    bottom: 10px;
    padding: 10px 10px 2px 10px;
    border-radius: 5em;
    font-size: 12px;
    line-height: 3em;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    transition: padding 0.2s; 
    text-decoration: none;
}

#goTop:hover {
    padding-top: 30px;
    background-color: rgba(0, 0, 0, 7);
}

#goTop::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 18px;
    width: 0;
    height: 0;
    border: 4px solid #000;
    border-color: transparent transparent #fff;
}
/* ----------------goTop-------------- */
/* ----------------goTop-------------- */
/* ----------------goTop-------------- */
/* ----------------goTop-------------- */











/* ----------------版頭-------------- */
/* ----------------版頭-------------- */
/* ----------------版頭-------------- */
/* ----------------版頭-------------- */
.header{
    position: relative;
    background:#f4f0e4 url(../images/header.jpg) center top no-repeat;
}
.header h1{
  text-indent: -9999px;
  height: 780px;
}

@media screen and (max-width:1600px) {
    .header{
        background-size: 120%;
    }
    .header h1{
      height:52vw;
    }
}
/* ----------------版頭-------------- */
/* ----------------版頭-------------- */
/* ----------------版頭-------------- */
/* ----------------版頭-------------- */




/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */
.nav-page{
  width: 90%;
      margin: 0 auto;
  display: flex;
  justify-content: center;
}
.nav-page a{
  position: relative;
  max-width: 233px;
  margin: 0 20px;
}

.nav-page a img:last-child{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.nav-page a:hover img:last-child , .nav-page a.on img:last-child{
  opacity: 1;
}

@media screen and (max-width:1600px) {
    .nav-page a{
      margin: 0;
    }
}
@media screen and (max-width:480px) {
    .nav-page{
      width: 80%;
      flex-wrap: wrap;
    }
    .nav-page a{
      width: 48%;
       margin: 0 1%;
    }
}
/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */
/* ----------------頁面選單-------------- */







/* ----------------介紹-------------- */
/* ----------------介紹-------------- */
/* ----------------介紹-------------- */
/* ----------------介紹-------------- */
.intro{
  position: relative;
  overflow: hidden;
background: -moz-linear-gradient(top,  rgba(244,240,228,1) 0%, rgba(255,255,255,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(244,240,228,1) 0%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to bottom,  rgba(244,240,228,1) 0%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f0e4', endColorstr='#00ffffff',GradientType=0 ); 
}

.intro.intro-worldforestworld{
background: -moz-linear-gradient(top,  rgba(227,252,220,1) 0%, rgba(255,255,255,0) 100%); 
background: -webkit-linear-gradient(top,  rgba(227,252,220,1) 0%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to bottom,  rgba(227,252,220,1) 0%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3fcdc', endColorstr='#00ffffff',GradientType=0 ); 
}

.intro p{
      text-align: center;
    font-size: 28px;
    font-weight: 700;
    padding: 100px 0;
    line-height: 2.5;
    letter-spacing: 0.35em;
    position: relative;
    z-index: 3;
}
.intro p span{
  display: inline-block;
  font-size: 160%;
  line-height: 1em;
      letter-spacing: 0.35em;
    transform: translate(0.1em,0.1em);
}
.intro.intro-index p span{
  color: #fe744f;
}
.intro.intro-newarrivals p span{
  color: #f5766e;
}
.intro.intro-worldforestworld p span{
  color: #5fdf76;
}
.intro p .forM{
  display: none;
}

.intro-pic-1{
  position: absolute;
  left: 50%;
    top: 15px;
    transform: translateX(-236%);
  width: 336px;
  z-index: 2;
}
.intro-pic-2{
  position: absolute;
  left: 50%;
  top: 75px;
      transform: translateX(134%);
  width: 340px;
  z-index: 2;
}
@media screen and (max-width:960px) {
    .intro p{
      width: 70%;
    margin: 0 auto;
          font-size: 14px;
              line-height: 2;
          padding: 10% 0;
    }
    .intro p .forM{
      display: block;
    }
    .intro-pic-1 {
      transform: translateX(-250%);
      width: 20%;
      top: 10%;
    }
    .intro-pic-2 {
      transform: translateX(150%);
      width: 20%;
      top: 30%;
    }
}
@media screen and (max-width:480px) {
  .intro p{
      width: 90%;
    }
    .intro-pic-1 , .intro-pic-2 {
      display: none;
    }
}
/* ----------------介紹-------------- */
/* ----------------介紹-------------- */
/* ----------------介紹-------------- */
/* ----------------介紹-------------- */




/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */
.nav-sort{
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
    max-width: 1400px;
        margin: 20px auto;
  z-index: 5;
}
.nav-sort a{
  position: relative;
  display: inline-block;
  width: calc(33% - 4vw);
  max-width: 285px;
  margin: 2vw;
}
.nav-sort a img:last-child{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}


.nav-sort a:hover , .nav-sort a.on{
  filter: drop-shadow(10px 10px 0px #f5766e);
}
.nav-sort a:hover img:last-child , .nav-sort a.on img:last-child{
  opacity: 1;
}

.nav-sort a:hover{
  transform: translate(2px,2px);
}
.nav-sort a.on:hover{
  transform: none;
  cursor: default;
}
@media screen and (max-width:960px) {
  .nav-sort a:hover , .nav-sort a.on{
    filter: drop-shadow(1vw 1vw 0px #f5766e);
  }
}

/*改色*/
.nav-sort.pink a:hover , .nav-sort.pink a.on{
  filter: drop-shadow(10px 10px 0px #e58b33);
}
.nav-sort.green a:hover , .nav-sort.green a.on{
  filter: drop-shadow(10px 10px 0px #22abbe);
}
@media screen and (max-width:960px) {
  .nav-sort.pink a:hover , .nav-sort.pink a.on{
    filter: drop-shadow(1vw 1vw 0px #e58b33);
  }
  .nav-sort.green a:hover , .nav-sort.green a.on{
    filter: drop-shadow(1vw 1vw 0px #22abbe);
  }
}
/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */
/* ----------------分類選單-------------- */





/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */
.tab-sort{
  display: flex;
  justify-content: center;
  position: relative;
    z-index: 6;
}
.tab-sort a{
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin: 50px;
  letter-spacing: 0.1em;
      line-height: 1.4em;
}
.tab-sort a strong{
  position: relative;
  display: inline-block;
  letter-spacing: 0.2em;
  padding: 0.2em 0.5em;
  border-bottom: solid 2px white;
}
.tab-sort a strong img{
  width: auto;
  position: absolute;
  left: 0; top: 0;
  transform: translate(-90%,-25%);
  opacity: 0;
}
.tab-sort a small{
  display: block;
  font-size: 64%;
  font-weight: 400;
      line-height: 1.4em;
          padding: 0.5em;
}

.tab-sort a.on strong , .tab-sort a:hover strong{
  border-bottom: solid 2px #fe744f;
}
.tab-sort a.on strong img , .tab-sort a:hover strong img{
  opacity: 1;
}
@media screen and (max-width:960px) {
  .tab-sort a{
   font-size: 22px;
    width: 50%;
    margin: 5% 0;
  }
}
/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */
/* ----------------主題按鈕-------------- */




/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */
.tour-area{ display: none;
}
.tour-area.on{
  display: block;
}
/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */
/* ----------------TAB切換內容-------------- */







/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */
.tour-special {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: calc( var(--padding) * 2);
}

.tour-special .tour-main {
    width: 70%;
    background: #fff2f6;
    border-radius: 0 15px 15px 0;
    padding: 50px 15% 50px 10%;
}
.pink .tour-special .tour-main{
    background: #fff2f6;
}
.blue .tour-special .tour-main{
    background: #f2f8ff;
}
.orange .tour-special .tour-main{
    background: #fff5f2 ;
}

.tour-special .tour-photo {
    width: 30%;
    transform: translateX(-25%);
    text-align: center;
}

.tour-special .tour-photo img {
    max-width: 744px;
}

@media screen and (max-width:960px) {
  .tour-special .tour-main{
    width: 100%;
    padding: 5%;
    order:2;
  }
  .tour-special .tour-photo {
    width: 100%;
    padding: 5%;
    transform: none;
    order:1;
  }
}
/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */
/* ----------------圖文介紹poi-------------- */