/* CSS Document */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
 
/** font-family:=================================*/
.color-white{color: #fff!important; }
.color-gray{color:#5a5a5a; }
.f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.wrapper { position: relative; display: block; margin:0px  auto;  width: 100%; padding:0px 20px;  max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1025px) {
.wrapper {padding: 0px 40px;  }
}
@media (min-width: 1401px) {
.wrapper { width: 100%;max-width: 90%; padding: 0px;  }
}
@media (min-width: 1920px) {
.wrapper { width: 100%;max-width: 100%;   padding-left: calc(50% - 720px)!important;  padding-right: calc(50% - 720px)!important;}
}
 /* CSS Document */
.top-wrap {padding:0px;margin:0 auto; width: 100%;  }
 @media (min-width:1025px) {
.top-wrap{padding: 0px 30px;  }
}
 @media (min-width: 1401px) {
.top-wrap { width: 100%;max-width: 90%; padding: 0px;  }
}

.banner{background:#fff0f4; }


/*============fotorama===============*/
.fotorama{ width:100%;}
.fotorama__nav-wrap {position: absolute; top: 0; right: 0; width: 20px; height: 100%; z-index: 9999999;}
.fullscreen,.fotorama--fullscreen,.fotorama--fullscreen .fotorama__stage, .fotorama--fullscreen .fotorama__nav, .fotorama-overlay { background: none; }
.fotorama-overlay { }
.fotorama__caption__wrap { color: #fff; background-color: #000;  font-size: 1.15em; }
.fotorama__fullscreen-icon { width: 35px; height: 40px; }
.fotorama__html a{ position:absolute; display: block; top:0; left:0; width:100%; height:100%; z-index:2;}
.fotorama__stage__frame--video .fotorama__html a{ width:1px; height:1px;}
.fotorama__video {top: 0px !important; }
.fotorama__video-close { top: 10px;right: 10px;display: none!important;}
.fotorama__wrap--video .fotorama__arr{opacity: 1!important;}
.fotorama__nav--dots .fotorama__nav__frame {width: 19px; height: 29px;}
.fotorama__dot{width: 10px; height: 10px; border:none;}
.fotorama__nav__frame.fotorama__active .fotorama__dot{width: 16px; height: 16px; background: #fff;}
.fotorama__nav, .sticky .fotorama__nav {position: relative; bottom: inherit;}
.fotorama__dot, .sticky .fotorama__dot{background:#e74a75;}
/*============fotorama thumbs===============*/
.thumbs > .fotorama {overflow: visible;}
.thumbs a {text-decoration: none;}
.img-list.thumbs a, .item-list.thumbs a{ display: inline !important;}
.fotorama--fullscreen .fotorama__fullscreen-icon { background-position: -64px 10px; }
.fotorama__thumb-border{border-color:#151861;}
.fotorama__nav {position: absolute; /*bottom: 1%;*/ top: 0; right: 41px; height: 100%; width: 20px!important; display: flex; flex-wrap: wrap; align-content: center;}
.fotorama__dot{/*background: #fff;*/ background:#e74a75;width: 10px!important;height: 10px!important;border-width: 1px!important;  border-color:#e74a75!important;  }


@media screen and (min-width:600px) {
   .isChrome .fotorama__video:before{ position: absolute; content: ''; top:0; left: 0; width: 100%; height: 75px; background: #000; z-index: 10;}
}

@media screen and (orientation: landscape) and (min-width: 993px) {
   .fotorama__nav {position: absolute; bottom: 1%;}
    .fotorama__dot{background: rgba(255, 255, 255, 0.41);}
}
 @media (max-width: 767.98px) {
.fotorama__nav-wrap { right: -30px;  }
}
.cms-slider-for { width: 100%;  height: auto; margin:30px auto auto auto; padding:0px; }
.slider-for{width: 100%; max-width: 100%; margin: 0px auto; height: auto; padding:0px;   animation:fadeIn .5s both .5s; }
.slider-item{ width: 100%;  margin:0px auto; padding:0px; display: flex; flex-wrap: wrap;justify-content: space-between; position: relative; z-index: 1; }
.item-img { width:55%; height: auto;  margin:auto 0px; padding:0px;  }
.item-img figure {  width:100%;  height:auto;  margin:0px;padding:0px; border-radius:0px 50rem 50rem 0px;  }
.item-img figure img { margin: 0px; border-radius:0px 50rem 50rem 0px;animation:fadeInRight 1s both 1s}



.main-wrap{ width: 100%; padding:0px;  margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center;  }
.notice{width: 100%; padding:0px; position: relative; }
 /**氣候區塊 =================================*/
.weather{width: 65%; height:80px; padding:0px 0px 8px 0px;  display: flex; flex-wrap: nowrap;justify-content:space-between; align-items: center; background:#e74a75; }
.weather-item{ width:calc(100%/4); padding: 0px 15px; }
.weather-switch{width: 100%;display: flex; flex-wrap:wrap;justify-content: center; align-items: center;  }
.weather-icon{width: 36px; height: 36px; padding: 0px 4px;}
.weather-txt{flex: 0 0 100%;text-align: center; font-weight: 700; color: #fff;}
.weather-nunber{width:auto; display: flex;  flex-wrap: nowrap;  align-items: flex-end;vertical-align: baseline; color: #fff;font-weight: 900;  }
.weather-nunber strong{ font-size: 1.75rem;  }
.weather-nunber em{ font-size: 1rem;    }
.weather-nunber span{ display:flex;   }
.weather-nunber-2{width:auto; display: flex;  flex-wrap: wrap;  flex-direction: column; align-items: flex-end;vertical-align: baseline; color: #fff;font-weight: 900; }
.weather-nunber-2 strong{ font-size: 1.75rem;  }
.weather-nunber-2 span{  font-size: .875rem; line-height:2px;   }



@media (max-width: 1201px) {
.weather{width: 100%; padding: 10px;}
.weather-txt{width:auto; }
.notice-wrap{  width:100%; }
}
@media (max-width:1024px) {
.weather{ padding: 10px 10px 20px 10px;}    
}
@media (max-width:767.98px) {
.weather{flex-wrap: wrap; justify-content: flex-start;  align-items: flex-start; height: auto;  }
.weather-txt{ font-size: .75rem;}
.weather-icon{width: 26px; height: 26px; padding: 0px 2px;}
.weather .weather-item{ width: calc(100%/5); padding: 5px 0px; }
.weather-nunber strong{ font-size:1rem;  }
.weather-nunber-2 strong{ font-size: 1rem;  }   
.weather-nunber-2 span{  font-size: .75rem; line-height:2px;margin-top: 5px;   }
}

@media (max-width:320px) {
.weather{ padding: 10px 5px ; }
.weather-txt{display: none}
.weather-icon{ display: block; margin: auto;}
.weather-nunber{width:100%; justify-content: center; }
}

/**訊息公告區塊 =================================*/
.notice-wrap{  width:35%; margin:0; padding: 0px 15px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: center; align-content: center; background:#fff0f4; }
.notice-title{ width:36px; display: flex; flex-wrap: wrap; align-items: center;  color: #fff;  font-weight: 700; }
.notice-title i{ display: block; margin:auto; }
.notice-list{ width: calc(100% - 40px); margin: 0px; padding: 0px; list-style: none;   position: relative; }
.notice-list li{ width: 100%; height: 60px;  list-style: none;padding:10px;margin: 0px;  display: block; overflow: hidden; }
.notice-list li a{ width: 100%;  display: block;  color: #585353;}
.notice-list li a p{word-break: normal;}

.notice-list .slick-prev { width: 24px;height: 24px; top:17px; left:calc(100% - 60px);z-index: 1; }
.notice-list .slick-next { width: 24px;height: 24px;  top:17px; right:0;z-index: 1;  }
.notice-list .slick-prev:before, .notice-list .slick-next:before { width: 12px;height: 12px;  color: #fff; }
.notice-list .slick-prev:hover,.notice-list .slick-next:hover{color: transparent;outline: none;background:#d42d24;  }
 
@media (max-width: 1201px) {
 .notice-wrap{  width:100%; }
}

/**牡丹有趣  product-item  
---------------------------------------*/
.attractions{width:100%;padding:130px 0px 50px 0px;position: relative;z-index: 1;  }
 
.box-wrap{width: 100%; display: flex; flex-wrap: wrap;padding: 0px; margin: 0px; position: relative;z-index: 1;   }
.box-wra p{font-size:0.9375rem!important; }
.box-3{width: 25%; padding: 0px 40px; margin: 0px;position: relative; }
.box-3:after{ content: "";position: absolute; z-index: -1; right: -18px; top:150px; width:100%; height: 383px; background: url("../images/index/map.png")  no-repeat ; background-size: contain; }

.box-7{width: 75%;  }
.box-p{ margin:20% 0px;}
.box-p p{ font-size: 1rem; font-size: min(max(3vw, 0.875rem), 1rem); font-weight:700; letter-spacing:-0.3px;}

@media (max-width: 1920px) {
 .box-3:after{  right: -40px; top:150px; width:100%; height: 383px;  }
 }

@media (max-width: 1680px) {
 .box-3:after{  right: -28px; top:150px; width:100%; height: 383px;  }
}
@media (max-width: 1440px) {
 .box-3:after{  right: -18px; top:150px; width:100%; height: 383px;  }
.box-3{  padding: 0px; margin: 0px; }
 }
@media (max-width: 1024px) {
.box-3{width: 30%;  }
.box-7{width: 70%;  }
}
@media (max-width: 768px) {
.attractions{ padding:100px 0px 0px 0px;position: relative;z-index: 1;  }
 .box-p{ margin:15px 0px;}   
.box-3{width: 100%;  }
.box-3:after{ right: -20px; top:-80px; width:100%; height: 383px; background: url("../images/index/map.png")  no-repeat  right top; background-size: contain; }
    .box-7{width: 100%;  }
}
@media (max-width: 767.98px) {
.box-3:after{ width:100%; height: 300px; opacity: .5; }
   
}

.product-item{ width:100%; margin:0; padding:20px 0px;} 
.product-item li { width: 100%; margin:0px; padding:50px 0px 0px  0px;  list-style: none; transition: all 0.3s linear 0s; transform: scale(.85); }


.product-item li .item-wrap{ width: 100%; height: auto;  margin:0px; padding:0px; position: relative;  display: flex; flex-wrap: wrap;}
.product-item li .item-wrap img { width:100%; height:auto; margin: auto;  }
.product-inner{width:100%;padding:0px 20px; position: relative;z-index: 9; transform: translateY(-40px) } 
.product-inner h3{  margin:5px 0px;padding-left: 20px; font-size:1.125rem; line-height:1.35rem; font-weight:700; color:#fff;  position: relative; }
.product-inner h3:before{ content: ""; width: 12px; height:15px; left:0px; top:4px;  position: absolute;  background: url("../images/icon/map.svg") no-repeat left top; }
.product-item li.slick-slide.slick-current.slick-active{ transform: scale(1)  translateY(-40px);}

.product-item .slick-prev{left:0px;}
.product-item .slick-next{right:0px;}

@media (max-width: 768px) {
.product-item{  padding: 0px;}     
}

@media (max-width: 767.98px) {
.product-item .slick-prev{left:-15px; top:90px; }
.product-item .slick-next{right:-15px; top:90px;}

.product-inner{width:100%;  } 
.product-inner h3{ font-size:.9rem; }
}
  
/*--分類小圖示icon--*/
.icon-tag{ display: flex; width: 26px; height: 26px;margin:auto 10px auto 0px;  background: url("../images/icon/note.svg") no-repeat left 0px; }

.cms-news-wrap{ width: 100%; max-width: 1200px; padding:50px 0px; margin:0px auto; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; position: relative; z-index: 1;}
/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.main-news {width: 100%;  margin: 100px auto;  padding:20px; border: solid 1px #e74a75;}
.news-title { width: 300px; height: auto; margin:-60px auto 30px  auto; padding:20px;  background: #fff; display: flex; justify-content: center;align-items: flex-start; flex-wrap: wrap; flex-direction:column;  }
.news-title h2{  width: auto;  margin:10px auto;  font-size:2.25rem;  font-size: min(max(3vw, 1.25rem), 2.25rem);line-height:1.35rem; font-weight:700; color:#e74a75;  letter-spacing:2px; }
.news-title span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333;   }
.news-title p{ margin:0px auto;font-size: 1rem; font-size: min(max(3vw, .9rem), 1rem); font-weight: 700; color:#8f929e;}
.news-btnbox {position: relative;z-index:99; display: flex;  justify-content: center;  width: 100%; height: auto; margin:-135px auto auto auto;  transition: all 1s;}  
.vieo-item{width: 100%;}
@media (max-width: 767.98px) {
.news-title { margin:-60px auto 0px  auto; width: 80%;  }
}


.news-block{width: 50%; padding: 10px;}
@media (max-width: 1199.98px) {
.main-news { padding:20px 10px; }
.news-block{ padding: 0px; }
}
@media (max-width:992px) {
.main-news { padding:0px 10px; }
.news-block{ width: 100%; padding: 10px; }   
}
@media (max-width:320px) {
.main-news { padding:0px; }
.news-block{ width: 100%; padding: 10px; } 
.vieo-item iframe{width: 100%; max-height: 240px;}   
}


/*--分類new-tag --*/
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; width: auto;padding: 0px 10px ; margin-right: 5px; font-size: 0.875rem; font-weight: 400; color:#c09547;  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; text-transform: capitalize;  word-break: keep-all; z-index: 9;  position: relative; }

.new-tag-01{color:#e84a75; border: solid 1px #e84a75;}
.new-tag-01 a{color:#e84a75;}
 

.m-title {width: 100%;padding:0px; margin-bottom: 20px; font-size: 1.15rem;   font-size: min(max(3vw, 1rem), 1.15rem);  font-weight: 700; letter-spacing: 2px; color: #e74a75; position: relative; }
.m-title:after{ content:""; position: absolute; right:0px; top:14px; width: 60%; height: 1px; background:#e74a75;  }

.news-list {width: 100%; margin: 0px auto; padding:0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1; }
.news-list li{display: flex;  flex-wrap: wrap; width: calc(100%/2); padding:0px 10px;margin:0px auto; box-sizing: border-box;list-style: none; transition: all 0.5s ease 0s;  position: relative;}
.news-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; overflow: hidden; border-radius:0px;   transition: all 0.5s ease-in-out;}
.news-list figure  {width: 100%; padding-bottom: 66.66%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.news-list li:hover figure img { opacity:1;  transform: scale(1.15); background:#e84a75  }

.listDateBox { display: flex; align-items: center; flex-wrap: wrap;  }
.listDateBox .date  {  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #aaa;}
.news-list .news-box {width:100%;  box-sizing: border-box;  padding:0px 0px 20px 0px;  }
.news-list .news-box  .date  { font-size: 14px; font-weight: 700; letter-spacing: 1px; color: #999;}
.news-list .news-box-inner{width:100%; min-height: 70px;}
.news-list h3 {position: relative;width: 100%; margin:10px 0px; font-size:1.375rem;  font-size: min(max(3vw, 1.125rem), 1.375rem);font-weight:700;letter-spacing: 1px; }
.news-list h3 a{ color:#e74a75!important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.news-list p { width: 100%;  font-size: 0.9375rem; line-height: 1.7142857143rem;  letter-spacing: .05em;color:#666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.news-list p a{ color:#333;   }
 

@media (max-width: 767.98px) {
.news-list li{width: calc(100% - 20px); padding:10px 0px; }
 }
 
/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
  
/*牡丹心旅行*/
.main-about{position: relative; margin:0px auto; padding:120px 0px 40px 0px; width: 100%; height: auto;  }
.main-about .main-wrap{ flex-direction: row-reverse; }

.block-title{width:20%; height: auto; max-height:100% ; margin:0; padding: 0px; display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-content: flex-start;position: relative; z-index: 1;}
.block-txt{width:40%; margin:0; padding: 0px 40px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;  } 
.block-txt .cms-btn{ margin:15px 0px; }
.block-txt p { font-size:1em;  font-weight: 700; letter-spacing:10px;  line-height: 2rem;  margin-bottom:15px;   }
.block-txt-2{width:40%; margin:0; padding: 0px 0px;  }
@media (max-width: 920px) {
.main-about{  padding: 40px 0px;   }    
.block-txt{ padding: 0px 20px;  } 
.block-txt p { font-size:1em;  font-weight: 700; letter-spacing:10px;  line-height: 1.75rem;  margin-bottom:15px;   }   
}
@media (max-width: 768px) {
.block-txt{ padding: 0px 30px 0px 0px;  } 
.block-txt p { font-size:.875em; line-height: 1.5rem;  }   
}

@media (max-width: 767.98px) {
.main-about{  padding: 40px 0px 0px 0px;  }   
.block-title{ width:100%; margin: 30px auto;} 
.block-txt{width:100%; padding: 0px; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } 
     .block-txt p { margin-bottom: 0px; font-size:.875em; line-height: 1.5rem; text-align: center;  }   
}
 /*Title Styles-v 樣式
=================================*/
.title-v  {max-width: 20%;height: 100%;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; z-index: 9;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;  }   
.title-v h2 { width: auto; height: 100%; margin:0px 5px; font-size: 2rem;   font-size: min(max(3vw, 1.25rem), 2rem); letter-spacing: 10px; font-weight:700; color: #e74a75; word-wrap:break-word;word-break:keep-all;  }
.title-v h3 { width: auto; height: 100%;  margin:0px 5px; font-size: 1.875rem; line-height:2.5rem; letter-spacing: 5px; font-weight:700; word-wrap:break-word;word-break:keep-all;  }
.title-v p { width: auto; height: 100%; font-size: 1.375rem; font-weight: 400; text-align: left; word-wrap:break-word;word-break:keep-all; color: #8f929e; font-family: 'Tenor Sans', sans-serif; }

@media (max-width: 992px) {
.title-v h2 {  margin:0px 0px 0px 5px; line-height: 2rem;  }
.title-v p {  font-size: 1.15rem; line-height:1rem;   }
.title-v, .title-v h2, .title-v p{ height: auto;display: block; }    
 }
@media (max-width: 767.98px) {
.title-v{  width: 100%; max-width: 100%; margin-bottom: 10px; height:auto;flex-direction: column;  justify-content: center;   -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }
.title-v h2{ margin:0px auto 10px auto;  text-align: center; }
.title-v h3, .title-v p{ margin:0px auto;  text-align: center; }
 }
@media (max-width: 320px) {
 .title-v h2{ margin:0px auto ; }   
.title-v p {  font-size: .9rem; line-height:1rem;   }
    
}


.grid-w100{width: 100%; }
.grid-w45{width:45%; }
.grid-w50{width:50%;}
.grid-w55{width:55%;}
.grid-w30{width:calc(100%/3);  }

.grid-w70{width:70%;}
.grid-w80{width:80%;}
@media (max-width: 767.98px) {
.grid-w50{width:100%;}  
.grid-w80{width:100%;}
    .grid-w50 .grid-w50{width:50%;}   
}

/*photo Styles 1
=================================*/
.tour{position: relative; overflow: hidden; margin:0px 15px 15px 15px; padding:0px;}
.tour { position: relative; overflow: hidden;}
.tour figure{ display: block;   width: 100%; height: auto;  object-fit: cover; transition: all 0.5s ease 0s;   }

.ad-img-box { position:absolute;bottom:0px; left:0px; margin:0px auto; padding:0px; width:100%; height:auto; text-align:left;z-index:3;  }
.ad-img-box i { display:flex;  margin:20px 10px; width:46px; height:46px; }
.ad-img-box h3 { display:flex; width: auto; font-size:1.5rem;font-weight:700;letter-spacing:2px; color:#fff; overflow:hidden;   }
.ad-img-box h3 a{ color:#fff; }

.ad-img-box-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}

     
.ad-img-box:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0;background:rgba(234,93,132,.65); -webkit-transform: scaleX(0);  transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.ad-img-box:hover::before { color: #fff; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}    
     
@media (max-width: 992px) {
.tour{ margin:0px  15px 15px 0px;}
.ad-img-box i { margin:20px 10px; width:26px; height:26px; }   
.ad-img-box h3 {  font-size:1.25rem;   }    
}
 @media (max-width: 768px) {
 
.ad-img-box i { margin:10px 5px; width:22px; height:22px; }   
.ad-img-box h3 {  font-size:1.25rem;   }    
}
@media (max-width:767.98px) {
.grid-w100 .tour{ margin:0px auto 15px auto; padding-right:0px }
.grid-w50 .grid-w50 .tour { margin:0px 0px 15px auto; padding-right: 4px; } 
 }
@media (max-width: 320px) {
.ad-img-box h3 { font-size:1rem;   }    
    
}

/*-------------------*/
/***** product  *****/
/*------------------*/
.experience{width:100%; padding:0px;margin:0px; }
.bg-experience{  background: url("../images/index/experience.jpg") no-repeat left top;  background-size:cover;}


.section{ width: 100%; padding:500px 0px  0px 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; position: relative;}
.section-title{width:20%; height: auto; max-height:100% ; margin:0; padding: 0px; display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-content: flex-start;position: absolute; right: 5%; top:0px; z-index: 1;}
 

@media (max-width:767.98px) {
 .experience{ margin-top: 240px; }
 .section-title{width:100%; height: auto;  right:auto; top:-240px; }  
}


 /*Title Styles-v 樣式
=================================*/
.m-title-v  {max-width: 20%;height: 100%;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: center; z-index: 9;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;  }   
.m-title-v  h2 { width: auto; height: 100%; margin:0px 5px; padding-top: 10%; font-size: 36px;  letter-spacing: 10px; font-weight:700; color: #000; word-wrap:break-word;word-break:keep-all;  }
.m-title-v h3 { width: auto; height: 100%;  margin:0px 15px; padding-top:20%; font-size: 60px; line-height:2.5rem; letter-spacing: 15px; font-weight:700;  position: relative;  }
.m-title-v h3:after{content: ""; position: absolute; top:0px; left:15px; width: 1px; height: 20%; background: #000;}


.m-title-v p { width: auto; height: 100%; padding-top:21%; font-size: 1.375rem; font-weight: 700;  letter-spacing:10px; text-align: left; }
@media (max-width: 767.98px) {
.m-title-v { width:100%;max-width: 100%; height:auto; margin: auto; flex-direction: column;  justify-content: center; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }  
.m-title-v  h2 { height: auto; margin:0px auto; padding-top: 10%; font-size: 36px;   }
.m-title-v h3 { width: auto; height: auto;  margin:0px auto; padding-top:5%; font-size: 60px; line-height:2.5rem; letter-spacing: 15px; font-weight:700;  position: relative;  }
.m-title-v h3:after{ left:50%;  }
.m-title-v  p {  padding-top:2%;text-align: center;margin: auto;  }
}


.cms-slider-nav { width:40%; max-width: 500px;  height: 500px; margin:0px; position: absolute;z-index:1; left:10%;top:20%;-moz-transform:translate(-10%, -20%); -webkit-transform:translate(-10%, -20%); -o-transform:translate(-10%, -20%); -ms-transform:translate(-10%, -20%); transform:translate(-10%, -20%);  background: url("../images/index/map.svg") no-repeat center top;  background-size:contain;}

 

.slider-nav { width: 400px;  height: 460px; margin:0px auto; padding:0px!important; z-index: 99;position: relative; }
.slider-nav li { width: 30px;  height: 60px; display: flex;  margin:5px auto;  position: absolute; }
.slider-nav li span{  font-size:1rem; font-weight: 700; letter-spacing: 5px; text-align: center;  cursor: pointer; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.slider-nav li.slick-slide.slick-current span{   color:#fff;  background:#ea5d84; border-radius:30px;  padding:10px 0px 5px 0px;  }
.slider-nav li.slick-slide.slick-active { width: 30px!important;  height: 60px;}
.slider-nav .slick-list{height: 460px!important; }
/*.slider-nav li.slick-slide.slick-current:before{  content: ""; position: absolute;z-index:99!important; left: 20%; top: 20px; width:30px; height:60px; border-radius:30px;background:#ea5d84; }*/

.slider-nav li:nth-child(1){  right:20px; top:100px;    } 
.slider-nav li:nth-child(2){ right:80px; top:90px;  } 
.slider-nav li:nth-child(3){ right:180px; top:140px;  } 
.slider-nav li:nth-child(4){  right:300px; top:240px;} 
.slider-nav li:nth-child(5){ right:140px; top:280px;} 
.slider-nav li:nth-child(6){right:200px; top:380px;} 
 
.cms-slider-for { width:100%; max-width: 1000px; margin: 0px auto; padding:0px; position: relative; z-index: 9; }
@media (max-width: 1440px) {
.cms-slider-nav {left:0;top:18%;-moz-transform:translate(0, -18%); -webkit-transform:translate(0, -18%); -o-transform:translate(0, -18%); -ms-transform:translate(0, -18%); transform:translate(0, -18%);}
.cms-slider-for { margin: -100px auto auto auto; }    
}

@media (max-width: 1366px) {
.cms-slider-nav {left:-5%;top:18%;-moz-transform:translate(5%, -18%); -webkit-transform:translate(5%, -18%); -o-transform:translate(5%, -18%); -ms-transform:translate(5%, -18%); transform:translate(5%, -18%);}
}
@media (max-width: 1280px) {
.cms-slider-nav {left:-8%;top:-2%;-moz-transform:translate(8%, 2%); -webkit-transform:translate(8%, 2%); -o-transform:translate(8%, 2%); -ms-transform:translate(8%, 2%); transform:translate(8%, 2%);}
.cms-slider-nav,.slider-nav {transform: scale(.95)}
}

@media (max-width: 840px) {
.cms-slider-nav {left:0;top:-5%;-moz-transform:translate(0, 5%); -webkit-transform:translate(0, 5%); -o-transform:translate(0, 5%); -ms-transform:translate(0, 5%); transform:translate(0, 5%);width: 400px;  height: 460px;  background-position: right top;}
.cms-slider-nav,.slider-nav {transform: scale(1); }
.slider-nav li:nth-child(4){  right:300px; top:200px;} 
}

@media (max-width: 576px) {
.cms-slider-nav {width: 320px;  height: 420px; left:30px;top:0px;-moz-transform:translate(0%, 0%); -webkit-transform:translate(0%,0%); -o-transform:translate(0%,0%); -ms-transform:translate(0%, 0%); transform:translate(0%,0%);  }
.slider-nav {width: 320px;  height: 420px;}
    .slider-nav li:nth-child(2){ right:70px; top:70px;  } 
 .slider-nav li:nth-child(3){ right:140px; top:120px;  }    
 .slider-nav li:nth-child(4){  right:240px; top:160px;} 
.slider-nav li:nth-child(5){ right:90px; top:200px;} 
.slider-nav li:nth-child(6){right:160px; top:300px;} 

}






@media (max-width: 320px) {
.cms-slider-nav {width: 280px;  height: 420px; left:0px;top:0px;-moz-transform:translate(0%, 0%); -webkit-transform:translate(0%,0%); -o-transform:translate(0%,0%); -ms-transform:translate(0%, 0%); transform:translate(0%,0%);  }
.slider-nav {width: 280px;  height: 420px;}
.slider-nav li:nth-child(1){  right:10px; top:50px;    } 
.slider-nav li:nth-child(2){ right:60px; top:60px;  } 
.slider-nav li:nth-child(3){ right:120px; top:100px;  } 
.slider-nav li:nth-child(4){  right:200px; top:140px;} 
.slider-nav li:nth-child(5){ right:90px; top:180px;} 
.slider-nav li:nth-child(6){right:140px; top:280px;} 

}

.slider-for{ width: 100%; margin: 0px!important; padding:0px!important;  position: relative; z-index: 99;  }
.slider-for li { width: 100%; display: block;margin: auto; padding: 0px; cursor: pointer; position: relative; z-index: 1;}
.slider-for li .item{  width: 100%;display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items:flex-end;  }
.slider-for li .item h3{  width: auto; margin: 0px auto; padding:5px 15px; font-size: 1.5rem;  letter-spacing: 5px; font-weight: 700;    color: #fff; background: #ea5d84;}

.item-wrap{ width: 100%; padding: 0px 5px;   display: flex; flex-wrap: wrap; justify-content: center; position: relative; background-color: #fff;}
.item-3x{ width: calc(100%/3); padding:10px 5px; }

.item-3x .item-img-box {   width: 100%; padding-bottom: 66.66%; height: 0; overflow: hidden; position: relative; background-color: #e8e5e3; transition: all 0.5s ease 0s;}
.item-3x .item-img-box * { -webkit-box-sizing:border-box;  box-sizing:border-box;  -webkit-transition:all 0.35s ease;  transition:all 0.35s ease;}
.item-3x .item-img-box img {max-height: 100%; object-fit: contain; margin: auto;  overflow: hidden;  transition: all 0.5s ease-in-out;}
.item-3x .item-img-box img:hover { transform:scale(1.12); overflow:hidden;}
 
/** common======*/
.imgCenter,.imgCenter a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 10;  transition: all 0.5s ease 0s; }
.imgCenter img {max-height: 100%; transition: all 0.3s linear 0s;}
/* figure {  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative; background-color: #e8e5e3; transition: all 0.5s ease 0s;}*/


@media (max-width:767.98px) {
.item-wrap{ padding: 0px 25px; }  
.item-3x{ width: 100%; padding: 0px; margin: auto auto 20px auto; } 
}


 
.township{padding:60px 0px; }
 
.cate-wrap { width: 100%;max-width: 100%;padding-left: calc(50% - 420px)!important;  padding-right: calc(50% - 420px)!important;  position: relative; }
.cate {opacity: 1;  margin: 0px auto; padding:40px 40px 80px 40px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; position: relative;z-index: 1; list-style: none; }
.cate li { width: calc(100%/4 - 40px); margin:auto 20px; opacity: 1!important; position: relative;  z-index: 1; }

.cate li a { display: flex; flex-wrap: wrap;  justify-content: center;  align-items: center;text-align: center;transition: all 0.3s ease 0s;   }
.cate li .circe-box{ width: 100%; height: 100%;padding: 15px; border: solid 1px #e74a75; border-radius:99rem;  }
.cate li i{opacity: 1!important; border-radius:99rem;  }
.cate li a h3{  margin: 15px auto; font-size: 1.5rem; font-weight: 700; color: #000; letter-spacing: 3px;   }
.cate li a:hover h3 { color:#e74a75;  }
.cate li a:hover  { transform:scale(.95); }

@media (max-width:767.98px) {
.cate {padding:40px 0px ;   }
.cate li { width: calc(100%/2 - 50px); margin:auto 25px 10px 25px;   }
}

@media (max-width:320px) {
.cate li a h3{  font-size: 1.25rem;   }
}

.cms-title-2 { width:auto; height: auto; margin: 60px auto;padding: 0px ;  display: flex; justify-content: center;  flex-wrap: wrap; flex-direction:column;   }
.cms-title-2 h2{ display: block; margin: 20px auto; padding-left:90px; font-size:2.25rem;  font-size: min(max(3vw, 1.25rem), 2.25rem);line-height:1.35rem; font-weight:700; color:#e74a75;  letter-spacing:2px; position: relative;  }
.cms-title-2 h2:before{content: ""; position: absolute;z-index:99!important; left: 0px; top:-30px; width:70px; height:90px; background: url("../images/icon/a-7.svg")  no-repeat left top;  background-size: contain;}
.cms-title-2 p{ margin:0px auto;font-size: 1rem;  font-weight: 700; color:#8f929e;}
 

.cms-title-3 { width:auto; height: auto; margin:0px 0px 60px 0px;padding: 0px ;  display: flex; justify-content: flex-start;align-items: flex-start; flex-wrap: wrap; flex-direction:column; text-shadow: 0px 1px 1px rgb(0,0,0,.1); }
.cms-title-3 h2{ display: block; margin: 0px;padding-left:90px; font-size:2.25rem;  font-size: min(max(3vw, 1.25rem), 2.25rem);line-height:1.35rem; font-weight:700; color:#e74a75;  letter-spacing:2px; position: relative;  }
.cms-title-3 h2:before{content: ""; position: absolute;z-index:99!important; left: 0px; top:-30px; width:70px; height:90px; background: url("../images/icon/a-6.svg")  no-repeat left top;  background-size: contain;}
 @media (max-width: 992px) {
  .cms-title-3 h2{ padding-left:60px; font-size:2rem; line-height:1.35rem; font-weight:700; color:#e74a75;  letter-spacing:2px; position: relative;  }   
 .cms-title-3 h2:before{ width:50px; height:70px;  }    
}



.cms-title-3 h3{ display: block; margin: 0px;padding-left:90px; font-size:2.25rem;  font-size: min(max(3vw, 1.25rem), 2.25rem);line-height:1.35rem; font-weight:700; color:#e74a75;  letter-spacing:2px; position: relative;  }

.cms-title-3 h4{  width: auto;  margin:0px;  font-size: 2rem; font-weight: 700;color: #e74a75; letter-spacing: 2px;}
.cms-title-3 span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333;   }
.cms-title-3 p{  width:100%;  margin:0px;  font-size:0.875rem; font-weight:700;  color:#e74a75; }



/*---------------*/
/***** btn *****/
/*---------------*/
.icon-next{background: url("../images/icon/icon-arrow-r-w.svg") no-repeat left 0px;  background-size:auto;}
.cms-btn { width: 100%; max-width: 180px; height: 42px;   margin: 15px 0px;  padding: 0px 20px; font-size: 1rem; font-weight: 700; text-decoration: none;   display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: center; cursor: pointer;  border-radius:30px;  overflow: hidden;position: relative;  }
a.cms-btn { color: #fff;font-size: 0.9rem; font-weight:700; letter-spacing: 3px;   background:#e74a75; text-shadow: 0px 1px 1px rgb(0,0,0,.3); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1); }
.cms-btn:hover {border-color: rgba(255, 255, 255,.5); }
a.cms-btn:hover {color: #fff;}
.cms-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;}
.cms-btn:hover:before {left: 100%;}
.cms-btn i { margin-left: 10px; width:30px; height: 20px; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-btn:hover i{ -webkit-transform: translateX(15px); transform: translateX(15px)}
@media (max-width: 768px) {
.cms-btn i { width:18px; height: 18px;  }
.cms-btn {padding: 15px;}
}

/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:99; display: flex;  justify-content: center;  width: 100%; height: auto; margin:-120px auto 60px auto;  transition: all 1s;}  
.scroll-downs { position: absolute; top: 0; right: 0; bottom: auto; left: 0; margin: auto; width :20px; height: 44px;}
.mousey { width: 2px; padding: 5px 8px; height: 24px; border: 1px solid #333; border-radius: 25px; opacity: 0.75; box-sizing: content-box; position: relative;}
.mousey:after{content: "";position: absolute;top:38px; left:8px;width: 1px; height:50px; background: #c1c1c1;}
.scroller { width: 2px; height: 8px; border-radius: 25%; background-color: #333; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}



@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
@media (max-width: 920px) {
.scroll-downs { display: none;}   
}