@charset "utf-8";
#Center { position: relative; }
#Center .guide_title { position: absolute; top: 0; left: 0; }
html{scroll-behavior: smooth} 
/* 有滑動感 */
/*----------------------------------------------------------------------*/
/* Header */
#Header .HeaderKvBox{position:relative; width:100%; height: 100vh; min-height:600px;}

#Header .IndexKvFg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
background: linear-gradient(180deg,rgba(0, 0, 0, 0.59) 0%, rgba(0, 0, 0, 0) 180px);}
#Header .IndexKvBg { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }


/*----------------------------------------------------------------------*/
/* Index KV */
.IndexKvFg > .inner{position:relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.IndexKvFg .KvTitle1, .IndexKvFg .KvTitle2{width: 45%; height: auto; }
.IndexKvFg .KvTitle1{position:absolute; top: calc(50% - 20px); left:27%; transform: translateY(-50%); }
.IndexKvFg .KvTitle2{position:absolute; bottom:6rem; right:40px; }
.IndexKvFg span, .IndexKvFg a{ color:var(--color_white); text-shadow:var(--main-text-shadow);}
.KvScrollDown{font-size: 12px; font-weight: 500; font-family:'Montserrat', sans-serif; letter-spacing: 1px; text-align: center; color:var(--color_white); text-shadow:var(--main-text-shadow);
display:block; width: 60px; height: 60px; padding-top:10px; position:absolute; left:calc(50% - 25px); bottom: 32px; z-index:3;text-transform: uppercase;}
.KvScrollDown .scrollTxt{ position:relative; overflow:hidden; display:block; width: 100%; height: 20px; }
.KvScrollDown .scrollTxt > span, .KvScrollDown .scrollTxt:after{ position:relative; display:block; width: 100%; height:100%; top: -100%; transition:0.3s;}
.KvScrollDown .scrollTxt:after{content: attr(data-hover); color: var(--color_white); }
.KvScrollDown > .arrow_down{display: inline-block;}
.KvScrollDown > .arrow_down:after{margin-top:10px; display: inline-block; width: 20px; height: 20px; font-size:14px; content: "\f322"; font-family: "Font Awesome 5 Pro"; font-weight: 400; animation: myPulseDown 1s infinite;}
/* hover 文字效果 */
.KvScrollDown:hover{color: var(--color_white); }
.KvScrollDown:hover .scrollTxt > span, .KvScrollDown:hover .scrollTxt:after{ top: 0%; transition:0.3s;}
@media screen and (max-width: 1099px) {
  /* 手機版主標置中對齊 */
  .IndexKvFg .KvTitle1, .IndexKvFg .KvTitle2{width: 70%; position: static; transform: none;}
  #Header .IndexKvFg{ background: linear-gradient(180deg,rgba(0, 0, 0, 0.59) 0%, rgba(0, 0, 0, 0) 80px);}
}
@media screen and (max-width: 480px) {
  .IndexKvFg .KvTitle1, .IndexKvFg .KvTitle2{width: 90%;}
  .KvScrollDown{ bottom: 50px;}
}
@media screen and (max-width: 639px) {
  #Header .HeaderKvBox{ height: 100dvh;  }
  .KvScrollDown{ bottom: 80px;}
}

/* Kv Title Animation infinite 文字動畫 - 拿掉*/
/* .KvTitle1 > img{ animation: myFadeInLeft 6s infinite; animation-delay: .5s; opacity: 0;  transform: translate(-10%, 0);}
.KvTitle2 > img{ animation: myFadeInRight 6s infinite; animation-delay: .5s; opacity: 0;  transform: translate(-10%, 0);}
@keyframes myFadeInLeft {
  0% { opacity: 0; transform: translate(-10%, 0); }
  30% { opacity: 1; transform: translate(0px, 0);}
  100% {opacity: 1; transform: translate(0px, 0);}  
}
@keyframes myFadeInRight {
  0% { opacity: 0; transform: translate(10%, 0); }
  30% { opacity: 1; transform: translate(0px, 0);}
  100% { opacity: 1; transform: translate(0px, 0);}  
} */

/*----------------------------------------------------------------------*/
/* Title */
.IndexBlock{padding: 0px; width:100%; overflow-x: hidden;}
.IndexBlock .BlockTitle{ text-align: center; margin-bottom: 3.5rem; }
.smallTitle{ font-size: 1.375rem; font-family:'Montserrat', sans-serif; font-weight: 500;  letter-spacing: .05rem;}
.IndexBlock .BlockTitle .smallTitle{ color: var(--color_greenblue);}
.IndexBlock .BlockTitle h2{ line-height:1; margin-top: 1rem; font-size: 3rem; letter-spacing: .25rem; font-weight: 700; color: var(--color_blue); text-transform: uppercase; }
.IndexBlock article{ font-size:1.25rem; font-style: italic; font-weight: 500;  letter-spacing: .025rem; color:var(--color_black);}
.IndexBlock article p:not(:last-of-type){margin-bottom: 1.5rem;}
@media screen and (max-width: 1399px) {
  .IndexBlock .BlockTitle{ margin-bottom: 2.5rem; }
}
@media screen and (max-width: 1023px) {
  .IndexBlock .BlockTitle{ margin-bottom: 30px;}
  .IndexBlock .BlockTitle h2{font-size: 2rem; letter-spacing: 1px; line-height: 1.2; margin-top: 8px;}
  .IndexBlock article{font-size: 1.125rem; letter-spacing: 0px;}
  .IndexBlock article p:not(:last-of-type){margin-bottom: 1rem;}
  .IndexBlock .BlockTitle .smallTitle{ font-size: 1.125rem;}
}
@media screen and (max-width: 639px) {
  .IndexBlock article p:not(:last-of-type){margin-bottom: 8px;}
}
@media screen and (max-width: 349px) {
  .IndexBlock .BlockTitle h2{font-size: 1.5rem;}
  .IndexBlock .BlockTitle .smallTitle{ font-size: 1rem;}
}
/*----------------------------------------------------------------------*/
/* Index - About Us 關於我們 */
.IndexBlock.AboutUs{padding: 70px 50px 100px 50px; background:var(--color_light_blue);}
.IndexBlock.AboutUs > .inner{width: 100%; max-width: 1640px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.IndexBlock.AboutUs > .inner .AboutBox, .IndexBlock.AboutUs > .inner .ServiceBox{ width: 50%; }

.AboutBox{ padding: 0 36px;}
.AboutBox > .inner{max-width: 700px; width: 100%;}
.AboutBox .AboutLogo{margin-bottom: 3.5rem; display:block; width: 90%; max-width: 340px; height: 70px; aspect-ratio: 240 / 46; background: url('../images/top-logo-blue.svg') no-repeat center center; background-size: 100% auto;}
.AboutBox .BlockTitle{ text-align: left;}
.AboutBox .BlockTitle h2{ font-size: 2.75rem; text-transform: none; letter-spacing: .1rem;}
.AboutBox article .eflySlogan{ display:inline-block; margin: 2.5rem 0; font-size: 1.75rem; letter-spacing: .025rem; color: var(--color_dark_greenblue); font-style: italic; font-weight: 500;}
.ServiceBox{ padding: 0 20px;}
.ServiceBox .inner{ width: 100%;}
.ServiceBox .s-item .s-header .smallTitle{ font-size:1.5rem; color: var(--color_blue);  letter-spacing: .025rem; margin-bottom: 36px; 
  /* display:flex; align-items: center; flex-wrap: wrap; */
}
.ServiceBox .s-item .s-header .smallTitle .SeparateLine{display:inline-block; width: 1px; background-color: var(--color_blue); height: 1.5rem; margin: 0 14px;     vertical-align: middle;}
.ServiceBox .s-item .s-content article{ color:var(--color_black); font-style: normal; font-family:'Montserrat', sans-serif; font-size: 0.9375rem; letter-spacing: .01rem; line-height: 1.5;}
.ServiceBox .s-item .s-content article p:not(:last-of-type){margin-bottom: 0.75rem; }
.ServiceBox .s-item{ border-bottom: 1px solid var(--color_gray); padding: 36px 0;}

@media screen and (max-width: 1023px) {
  .IndexBlock.AboutUs{padding: 70px 24px 50px 24px;}
  .IndexBlock.AboutUs > .inner{flex-direction: column;}
  .IndexBlock.AboutUs > .inner .AboutBox, .IndexBlock.AboutUs > .inner .ServiceBox{ width: 100%;}
  .AboutBox, .ServiceBox{padding: 0;}
  .AboutBox .AboutLogo{height: 44px; width:auto; margin-bottom:24px;}
  .AboutBox .BlockTitle h2{font-size: 1.875rem; letter-spacing: 0px; line-height: 1.2;}
  .AboutBox article .eflySlogan{font-size:1.5rem; margin: 1rem 0 2.5rem 0;}
  .ServiceBox{margin-top: 2.5rem;}
  .ServiceBox .s-item .s-header .smallTitle{ font-size: 1.25rem; letter-spacing: 0; margin-bottom: 20px;}
  .ServiceBox .s-item .s-content article{font-size: 0.9rem;}
  .ServiceBox .s-item{padding: 28px 0;}
}
@media screen and (max-width: 639px) {
  .ServiceBox{margin-top: 1rem; }
}
@media screen and (max-width: 349px) {
  .AboutBox .BlockTitle h2{ font-size: 1.5rem; }
  .ServiceBox .s-item .s-header .smallTitle{ font-size: 1.125rem;}
}

/*----------------------------------------------------------------------*/
/* Index PopularPackages 熱門行程 */
.IndexBlock.PopularPackages{padding: 100px 0px 100px 0px; background:var(--color_light_gray);}
.IndexBlock.PopularPackages > .inner{ padding-left: 50px; padding-right: 50px;}
.IndexBlock.PopularPackages .PackageSliderBox{ width: 100%;  max-width: 1640px; margin: 0 auto; }
.IndexPackageSwiper{ border: 0px solid yellow; padding-bottom: 20px;}
.IndexPackageSwiper .swiper-nav{ display:flex; align-items: center; justify-content: flex-end; margin-bottom: 20px;}
.pkg-item > .inner{display: block; transition: .5s;}
.pkg-item .pkg-photo{  display:block; position:relative; width:100%; max-width: 100%;  aspect-ratio: 6 / 4; overflow:hidden; }
.pkg-item .pkg-photo > img{ width: 100%; height:100%; object-fit: cover; transition: .5s;}
.pkg-item .pkg-photo .cat-day{ z-index:3; position:absolute; top: -0.5rem; left: 0.5rem; text-align: center; width: 3.2rem; display:flex; flex-direction: column; align-items: center; justify-content: flex-start;}
.pkg-item .pkg-photo .cat-day span:first-child{ font-size: 3.125rem; font-weight: 900; color: var(--color_white); }
.pkg-item .pkg-photo .cat-day span:last-child{ font-size: 0.875rem; font-weight: 500; letter-spacing: .15rem; color: var(--color_white); text-transform: uppercase;}
.pkg-item .pkg-photo .cat-day span{ text-shadow: var(--main-text-shadow); }
.pkg-item .pkg-photo::before{ z-index:2; position:absolute; top: 0; left: 0; width:100%; height:100%; content:''; display:block;  background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);}
.pkg-item .pkg-photo::after{ z-index:3 ;  position: absolute; top: 20px; right:20px; content:"\f08e"; font-family:"Font Awesome 5 Pro"; font-weight: 300; font-size: 1.75rem; letter-spacing: .15rem; color: var(--color_white);transform: scale(0); transition: .5s;}
.pkg-item .pkg-content{ padding-left: 8px; padding-right: 8px;}
.pkg-item .pkg-content .title{ margin-bottom:1rem; font-size: 1.375rem; letter-spacing: .025rem; font-family:'Montserrat', sans-serif; font-weight: 500; line-height: 1.2; color: var(--color_blue); }
.pkg-item .pkg-content .desc{ display:flex; align-items: flex-start; justify-content: flex-start; min-height: calc(1.25rem * 6);}
.pkg-item .pkg-content .desc:before{ padding-top: 5px; margin-right: 10px; color:var(--color_gray); display: inline-block;font-size:1.125rem; content: "\f3c5"; font-family: "Font Awesome 5 Pro"; font-weight: 900;}
.pkg-item .pkg-content .desc > article{ color:var(--color_black); font-size:1.25rem; line-height: 1.5;}
.pkg-item .pkg-content .title, .pkg-item .pkg-content .desc > article{ display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; }
.pkg-item .pkg-content .title{ -webkit-line-clamp: 2; position: relative;}
.pkg-item .pkg-content .desc > article{ -webkit-line-clamp: 4; }
.pkg-item .pkg-content{ padding-top:20px; padding-bottom: 20px;}
/* hover變色 - pc only*/
@media screen and (min-width: 1024px) {
.pkg-item:hover .pkg-photo > img{ transform: scale(1.1); transition: .5s;}
.pkg-item:hover .pkg-photo::before{ background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);}
.pkg-item:hover .pkg-photo::after{ transform: scale(1); transition: .5s;}
.pkg-item:hover .pkg-content{ background: var(--color_blue); padding-left: 16px; padding-right:16px;}
.pkg-item:hover .pkg-content .title, .pkg-item:hover .pkg-content .desc > article, .pkg-item:hover .pkg-content .desc:before {color: white; transition: .5s;}
}
.IndexBlock.PopularPackages .more-wrap{margin: 50px 0 70px 0; width: 100%; display: flex; justify-content: flex-end; }

@media screen and (max-width: 1399px) {
  .IndexBlock.PopularPackages{padding: 70px 0px 50px 0px;}
  .IndexBlock.PopularPackages > .inner{ padding-left: 30px; padding-right: 30px;}
}
@media screen and (max-width: 1023px) {
  .IndexBlock.PopularPackages{padding-top: 50px;}
  .IndexBlock.PopularPackages > .inner{ padding-left: 24px; padding-right: 24px;}
  .IndexBlock.PopularPackages .BlockTitle h2{font-size: 1.875rem;}
  .IndexPackageSwiper{padding-bottom: 0;}
  .pkg-item .pkg-content .title{ font-size: 1.25rem; letter-spacing: 0px;}
  .pkg-item .pkg-content .desc > article{font-size: 1.125rem; letter-spacing: 0px;}
  .pkg-item .pkg-content .desc{min-height: auto;}
  .IndexBlock.PopularPackages .more-wrap{margin-top: 0px; margin-bottom: 50px;}
}
@media screen and (max-width: 349px) {
  .IndexBlock.PopularPackages{padding-top: 50px;}
  .IndexBlock.PopularPackages .BlockTitle h2{ font-size: 1.5rem; }
  .pkg-item .pkg-content .title{ font-size: 1.125rem;}
}
/*----------------------------------------------------------------------*/
/* 預約流程 */
.BookingProcessBox{padding:40px 80px 70px 80px; width: calc(100% - 100px); max-width: 1640px; margin: 0 auto; background: url(../images/process-bg.jpg) no-repeat ; background-size: cover; background-position: center; background-attachment: fixed;}
.BookingProcessBox .BlockTitle{ text-align: left;}
.BookingProcessBox .BlockTitle h2{ font-size:1.875rem; letter-spacing: .15rem; color:var(--color_white); margin-bottom: 50px;}
.BookingProcessBox .ProcessBox{margin-top: 80px; width:100%; max-width: 1460px; display: flex; align-items: flex-start; justify-content: space-between;}
.ProcessBox .ProcessItem{ width: 25%; max-width: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.ProcessItem .pcs-icon{ width: 68px; height: 68px; background: url(../images/process-1.png) no-repeat center center; background-size: auto 100%;}
.ProcessItem .pcs-icon.step1{ background-image: url(../images/process-1.png);}
.ProcessItem .pcs-icon.step2{ background-image: url(../images/process-2.png);}
.ProcessItem .pcs-icon.step3{ background-image: url(../images/process-3.png);}
.ProcessItem .pcs-icon.step4{ background-image: url(../images/process-4.png);}
.ProcessItem{font-family:'Montserrat', sans-serif;}
.ProcessItem .title{text-align: center; margin:2rem 0; font-size: 1.375rem; letter-spacing: .025rem; font-weight: 400; line-height: 1.2; color: var(--color_yellow); }
.ProcessItem .desc{padding-left: 10px; font-size: 0.9375rem; letter-spacing: .01rem; line-height: 1.5; color: var(--color_white); text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.ProcessItem .desc p{margin-bottom:1rem; }
.ProcessArrow{ width: 60px; margin-top: 100px; display: flex; align-items: center; justify-content: center;}
.ProcessArrow:before{ color:var(--color_white); display: block; font-size:30px; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 300;}
@media screen and (max-width: 1399px) {
  .BookingProcessBox{padding: 30px 30px 70px 30px; width: calc(100% - 60px);}
}
@media screen and (max-width: 1200px) {
  .BookingProcessBox{background-attachment: initial;}
}

@media screen and (max-width: 1023px) {
  .IndexBlock.PopularPackages{padding-bottom: 0;}
  .BookingProcessBox{padding: 40px 24px 40px 24px; width: 100%; }  
  .BookingProcessBox .BlockTitle h2{ font-size: 1.875rem; }
  .BookingProcessBox .BlockTitle{text-align: center;}
  .BookingProcessBox .ProcessBox{margin-top: 50px; justify-content: flex-start; flex-wrap: wrap;}
  .ProcessBox .ProcessItem{ width: calc(50% - 40px); max-width: none;}
  .ProcessItem .title{font-size: 1.25rem; letter-spacing: 0;}
  .ProcessItem .desc{font-size: 0.9rem;}
  .ProcessArrow{ width: 40px; }
}
@media screen and (max-width: 979px) {
  
  .BookingProcessBox{ background-image: url(../images/process-bg-m.jpg); }
  .ProcessBox .ProcessItem{ margin-bottom: 30px;}
}
@media screen and (max-width: 639px) {
  
  .BookingProcessBox{background-position-x: 20%; padding-bottom: 50px; }
  
  .ProcessBox .ProcessItem{width:100%; margin-bottom: 0;}
  .ProcessItem .title{ margin: 1rem 0;}
  .ProcessItem .desc{ padding: 0;}
  .ProcessItem .desc p{ margin-bottom: 8px; }
  .ProcessArrow{ width: 100%; height: 40px; margin: 0 0 20px 0;}
  .ProcessArrow:before{ content:"\f078";}
}
@media screen and (max-width: 349px) {
  .BookingProcessBox .BlockTitle h2{ font-size: 1.5rem; }
  .ProcessItem .title{ font-size: 1.125rem;}
}
/*----------------------------------------------------------------------*/
/* Index SelectedSpots 精選景點 */
.IndexBlock.SelectedSpots{padding: 0; background:var(--color_white); width: 100%;}
.IndexBlock.SelectedSpots > .inner{ width: 100%; display: flex; align-items: stretch; justify-content: space-between;}
.IndexBlock.SelectedSpots .SpotIntroBox{ flex-grow: 1; padding: 100px 50px;}
.IndexBlock.SelectedSpots .SpotIntroBox .BlockTitle{ text-align: left;}
.IndexBlock.SelectedSpots .SpotIntroBox > .inner{max-width: 500px; width: 100%; margin: 0 auto;}
.IndexBlock.SelectedSpots .SpotIntroBox article{ margin-top: 4rem; margin-bottom: 4rem;}
.IndexBlock.SelectedSpots .SpotSliderBox{ width: 70%;  max-width: 1136px;}

.IndexSpotSwiper, .IndexSpotSwiper .swiper{ width: 100%; height:100%; position:relative;}
.IndexSpotSwiper .swiper-nav{ display:flex; flex-direction: column; align-items: center; justify-content: flex-end;
  position: absolute; z-index: 2; right: 20px; bottom: 20px;
}
.IndexSpotSwiper .swiper-nav .swiper-btn-next{ margin-left: 0px; margin-top: 1px;}
.IndexSpotSwiper .swiper-nav .swiper-btn-next, .IndexSpotSwiper .swiper-nav .swiper-btn-prev{ border-color: transparent; background-color: var(--color_white_a75);}
.IndexSpotSwiper .spot-item{ width: 100%; }
.spot-item .spot-photo{  border: 0px solid yellow; display:block; position:relative; width:100%; max-width: 100%;  height: 100%;   overflow:hidden; }
.spot-item .spot-photo > img{ width: 100%; height:100%; object-fit: cover; object-position:center center; position: absolute; left: 50%; top: 0; transform: scale(1) translateX(-50%); transition: .5s; }
.spot-item .spot-photo .cat-location{ z-index:3; position:absolute; bottom: 6rem; left: 100px; display: block; font-size: 1rem; letter-spacing: .15rem; font-weight: 900; padding: 2px 8px; background:var(--color_white_a90); color: var(--color_dark_blue); text-transform: uppercase;}
.spot-item .spot-photo .title{z-index:3; position:absolute; bottom: 3rem; left: 100px; font-size: 1.75rem; letter-spacing: .025rem; font-family:'Montserrat', sans-serif; font-weight: 500; line-height: 1.2; color: var(--color_white);
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;
}
.spot-item .spot-photo::before{ z-index:2; position:absolute; top: 0; left: 0; width:100%; height:100%; content:''; display:block;  background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);}
.spot-item .spot-photo::after{ z-index:3 ; position: absolute; top: 20px; right:20px; content:"\f08e"; font-family:"Font Awesome 5 Pro"; font-weight: 300; font-size: 1.75rem; letter-spacing: .15rem; color: var(--color_white); transform: scale(0); transition: .5s;}
.spot-item:hover .spot-photo > img{ transform: scale(1.1) translateX(-50%); transition: .5s;}
.spot-item:hover .spot-photo::before{ background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%);}
.spot-item:hover .spot-photo::after{ transform: scale(1); transition: .5s;}
@media screen and (max-width: 1799px) {
  .IndexBlock.SelectedSpots .SpotSliderBox{ width:60%;}
  .IndexBlock.SelectedSpots .SpotIntroBox{ padding: 70px 50px;}
  .IndexSpotSwiper .swiper-nav{bottom: 30px; right: 30px;}
  .spot-item .spot-photo .title{bottom: 30px;}
  .spot-item .spot-photo .cat-location{ bottom: calc(30px + 3rem); }
}
@media screen and (max-width: 1399px) {
    .IndexBlock.SelectedSpots .SpotIntroBox article{margin: 0 0 2.5rem 0;}
}
@media screen and (max-width: 1023px) {
  .IndexBlock.SelectedSpots > .inner{   justify-content: flex-start; flex-direction: column-reverse;}
  .IndexBlock.SelectedSpots .SpotIntroBox{ padding: 50px 24px;}
  .IndexBlock.SelectedSpots .SpotIntroBox > .inner{max-width: none;}
  .IndexBlock.SelectedSpots .SpotIntroBox article{margin: 1.5rem 0;}
  .IndexBlock.SelectedSpots .SpotSliderBox{ width: 100%; margin-left: 0;}
  .IndexSpotSwiper, .IndexSpotSwiper .swiper{ height: auto;}
  .IndexSpotSwiper .swiper-nav{bottom: 24px; right: 24px;}
  .spot-item .spot-photo .cat-location, .spot-item .spot-photo .title{left: 24px; bottom: calc(24px + 3rem);}
  .spot-item .spot-photo .cat-location{font-size: .875rem; bottom: calc(24px + 2rem);}
  .spot-item .spot-photo .title{font-size: 1.25rem; letter-spacing: 0; bottom: 24px;}
  .spot-item .spot-photo{ height: auto; aspect-ratio: 7.1 / 4; }
}
@media screen and (max-width: 639px) {
  .spot-item .spot-photo{ aspect-ratio: 3 / 2; }
}
/*----------------------------------------------------------------------*/
/* Index Reviews 客戶好評 */
.IndexBlock.Reviews{padding: 100px 100px 200px 100px; background: url(../images/review-bg.jpg) no-repeat center bottom; background-size: cover; width: 100%;}
.IndexBlock.Reviews > .inner{ width:100%; max-width:1640px; display: flex; align-items: flex-start; justify-content: space-between;}
.IndexBlock.Reviews .BlockTitle .smallTitle{ color: var(--color_dark_greenblue); }
.IndexBlock.Reviews .ReviewPhotoBox{width: 50%;}
.IndexBlock.Reviews .ReviewCommentBox{ flex-grow: 1; padding: 0px 50px;}
.IndexBlock.Reviews .ReviewCommentBox > .inner{max-width: 620px; width: 100%; margin: 0 auto;}
.FiveStars{margin: 1rem auto 0 auto; width: 200px; display: flex; align-items: center; justify-content: space-between;  }
.FiveStars .star:before{content:''; display:block;  width: 28px; height: 28px;  background: url(../images/review_star.svg) no-repeat center center; background-size: 100% auto;}
.IndexCommentSlider{ width: 100%; margin-top: 4rem; margin-bottom: 4rem; position:relative; padding: 0 40px;}
.IndexCommentSlider .swiper .swiper-wrapper{ align-items: center;}
.IndexCommentSlider .swiper-nav{ width: 100%; display:flex; align-items: center; justify-content: space-between; position: absolute; z-index: 2; top: 50%; left: 0%;  transform: translateY(-50%);}

.IndexCommentSlider .swiper-btn-next{ margin-left: 0px; margin-top: 0px;}
.IndexCommentSlider .swiper-btn-next:before, .IndexCommentSlider .swiper-btn-prev:before{ font-size: 30px}
.IndexCommentSlider .swiper-btn-next, .IndexCommentSlider .swiper-btn-prev{ width: 30px; border-color: transparent; background-color: transparent;transition: .5s;}
.IndexCommentSlider .swiper-btn-next:not(.swiper-button-disabled):hover, 
.IndexCommentSlider .swiper-btn-prev:not(.swiper-button-disabled):hover{ background-color: var(--color_white_a50); transition: .5s;}
.IndexCommentSlider .swiper-btn-next:not(.swiper-button-disabled):hover:before, 
.IndexCommentSlider .swiper-btn-prev:not(.swiper-button-disabled):hover:before{ color:var(--color_dark_blue);}

.IndexCommentSlider .swiper .comment-item{ width: 100%; }
.comment-item > .inner{ position:relative; padding: 30px; width: 100%; border: 0px solid red; }
.comment-item > .inner:before, .comment-item > .inner:after{ position: absolute; content:""; width: 24px; height: 24px; background: url(../images/quote-icon.svg) no-repeat center center; background-size: 100% auto; }
.comment-item > .inner:before{  top: 0px; left:0px;  }
.comment-item > .inner:after{ right: 0px; bottom: 0px; transform: rotate(180deg);}
.IndexBlock.Reviews .comment-item article{ line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5;}
.IndexBlock.Reviews .comment-item article p{ margin-bottom: .5rem;}
.comment-item .commentName{ margin-top:1rem; display: flex; align-items: center; justify-content: flex-end; color: var(--color_black);}
.comment-item .commentName:before{ content: ''; width: 50px; height: 1px; margin-right: 10px; background-color: var(--color_black);}
.comment-item .commentName span{ font-size:1.25rem; font-style: italic; font-weight: 500;  letter-spacing: .025rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}

.IndexBlock.Reviews .ReviewCommentBox .more-wrap{ width: 100%; display:flex; align-items: center; justify-content: center;}
/* 客戶相片牆 */
.ReviewPhotoBox{ padding: 20px;}
.IndexReviewPhotoSlider{ width: 100%; display:flex; align-items: flex-start; justify-content: flex-start;}
.IndexReviewPhotoSlider .swiper-nav .swiper-btn-next{ margin-left: 0px; margin-top: 1px;}
.IndexReviewPhotoSlider .swiper-nav .swiper-btn-next, .IndexReviewPhotoSlider .swiper-nav .swiper-btn-prev{ border-color: transparent; background-color: var(--color_white_a75);}
.review-photo-item{display: flex; flex-wrap: wrap;}
.review-photo-item .review-photo{  display:block; width:50%; aspect-ratio: 1.2875 / 1; overflow:hidden; }
.review-photo-item .review-photo > img{ width: 100%; height:100%; object-fit: cover; transition: .5s;}
@media screen and (max-width: 1799px) {
  .IndexBlock.Reviews .ReviewCommentBox{ width: 50%; padding: 0 60px 0 0;}  
  .IndexBlock.Reviews .ReviewPhotoBox{width: 50%; padding: 0;}
  .IndexCommentSlider{margin: 2rem 0;}
}
@media screen and (max-width: 1399px) {
  .IndexBlock.Reviews{padding-left: 60px; padding-right: 30px;}
  .IndexBlock.Reviews .ReviewCommentBox{ width: 50%; padding: 0 40px 0 0;}  
  .IndexBlock.Reviews .ReviewPhotoBox{width: 50%; padding: 0;}
  .comment-item .commentName:before{width:50px;}
}
@media screen and (max-width: 1199px) {
  .IndexBlock.Reviews{padding: 50px 70px 180px 70px;}
  .IndexBlock.Reviews > .inner{flex-direction: column; justify-content: flex-start;} 
  .FiveStars{width: 150px;}
  .FiveStars .star:before{width:20px; height: 20px;}

  .IndexBlock.Reviews .ReviewCommentBox{width: 100%; padding: 0;}
  .IndexBlock.Reviews .ReviewCommentBox > .inner{max-width: none; padding: 0 0px 50px 0px;}
  .IndexCommentSlider{margin-bottom: 10px;}
  .comment-item .commentName:before{width:100px;}
  .IndexBlock.Reviews .ReviewCommentBox .more-wrap{justify-content: center;}

  .IndexBlock.Reviews .ReviewPhotoBox{padding: 0;  width: calc(100% + 0px);  margin-left: 0px;}
  .IndexReviewPhotoSlider{ width: 100%; max-width: 640px; margin: 0 auto; }
  .review-photo-item .review-photo{aspect-ratio: 1.2875 / 1; }
  .IndexReviewPhotoSlider{ flex-direction: column; align-items: flex-end;}
  .IndexReviewPhotoSlider .swiper-nav { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px;}
  .IndexReviewPhotoSlider .swiper-nav .swiper-btn-next{margin-top:0; margin-left: 1px;}
}  
@media screen and (max-width: 1023px) {
  .comment-item .commentName span{font-size: 1rem;}
}
@media screen and (max-width: 639px) {
  .IndexBlock.Reviews{padding: 50px 24px 140px 24px;}
  .IndexCommentSlider{padding: 0 20px;}
  .IndexCommentSlider .swiper-nav{width: calc(100% + 30px); left: -15px;}
  .comment-item > .inner:before, .comment-item > .inner:after{width: 20px; height: 20px;}
  .comment-item > .inner{padding:24px;}
  .review-photo-item .review-photo{aspect-ratio: 1.2875 / 1; }
}
/*----------------------------------------------------------------------*/
/* swiper button */
.swiper{width: 100%;}
.swiper-btn-next, .swiper-btn-prev{ cursor: pointer; width: 50px; height: 50px; border: 1px solid var(--color_blue); background: var(--color_white); display:flex; align-items: center; justify-content: center;}
.swiper-btn-next{ margin-left: -1px;}
.swiper-btn-next:before, .swiper-btn-prev:before{ color:var(--color_blue); display: inline-block; font-size:1.25rem; content: "\f054"; font-family: "Font Awesome 5 Pro"; font-weight: 300; }
.swiper-btn-prev:before{ content: "\f053"; }
.swiper-btn-next:not(.swiper-button-disabled):hover, .swiper-btn-prev:not(.swiper-button-disabled):hover{ background: var(--color_blue);  }
.swiper-btn-next:not(.swiper-button-disabled):hover:before, .swiper-btn-prev:not(.swiper-button-disabled):hover:before{ color:var(--color_white);}
.swiper-button-disabled{opacity: 0.5; cursor:default;}

@media screen and (max-width: 1023px) {
  .swiper-btn-next, .swiper-btn-prev{width: 40px; height: 40px;}
  .swiper-btn-next:before, .swiper-btn-prev:before{font-size: 1rem;}
}