@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { color: #000; font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #fff; display: block; position: relative;}
img { border:0;}

html, body {  padding:0; margin:0; overflow-x: hidden;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}

font.red { color: #ff0000;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (min-width: 1440px) {

  /************ aside ************/

  aside#pc { width: 50px; position: fixed; top: 300px; right: 35px; z-index: 9;}
  aside#pc .icon-line { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-tel { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-line img { width: 100%; height: auto;}
  aside#pc .icon-tel img { width: 100%; height: auto;}


  /************ header + nav ************/

  header#main-header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; padding: 0 60px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; justify-content: flex-start; align-items: center; z-index: 1000; box-sizing: border-box; transition: transform 0.3s ease-in-out;}
  #main-header.header-hidden { transform: translateY(-100%);}
 
  .header-logo { width: 250px;}
  .header-logo img { width: 100%; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 250px - 150px);}
  nav#pc ul.header-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.header-nav li { padding: 0; margin: 0;}
  nav#pc ul.header-nav li a { padding: 5px 25px; color: #8D6125; font-size: 1.2rem; text-decoration: none; display: block;}
  nav#pc ul.header-nav li a:hover { color: #D52E5D;}

  .header-icons-mo { display: none;}

  .header-icons { width: 150px; display: flex; justify-content: center; align-items: center;}
  .header-icons img { width: 40px; height: auto; margin: 0 5px;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box-pc { clear: none; width: 100%; height: 28vw; padding: 0; overflow: hidden; position: relative; z-index: 8;}
  .banner-box-pc img.text { width: 260px; height: auto; position: absolute; top: 4vw; right: 23vw;}


  /** 20251112更新==(開始) **/
  /************ hp banner ************/

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box .banner { width: 100%; height: auto; position: relative; z-index: 1;}

  .hp-banner-box .banner-content { width: 47vw; position: absolute; top: 12vw; left: calc(50% - 33vw); z-index: 2;}
  .hp-banner-box .banner-content .content-1 { width: 34vw; padding: 0 0 2vw 0; text-align: center;}
  .hp-banner-box .banner-content .content-1 .logo { width: 4.2vw; height: auto; margin: 0 auto 1.5vw auto;}
  .hp-banner-box .banner-content .content-1 .title-1 { width: 24vw; margin: 0 auto; color: #D52E5D; font-size: 2.6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; background-image: url("../images/banner_title_1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative;}
  .hp-banner-box .banner-content .content-1 .title-2 { width: 100%; color: #D52E5D; font-size: 2.6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .hp-banner-box .banner-content .content-2 { width: 100%; padding: 20px; box-sizing: border-box; color: #8D6125; font-size: 1.8vw; border-radius: 50px; background-color: rgba(255,255,255,0.3);}


  /************ section #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 3vw 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}

  .hp-sec-1-text-con { display: none;}

  .hp-sec-1-col-lf { width: 70vw; padding: 0 5vw 0 0; box-sizing: border-box; border-radius: 0 12vw 12vw 0; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .pic-box { width: 25vw; height: 22.6vw; border-radius: 0 12vw 12vw 0; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-lf .pic-box img { width: auto; height: 100%;}
  .hp-sec-1-col-lf .text-con { width: calc(100% - 25vw); padding: 0 0 0 6vw; box-sizing: border-box;}
  .hp-sec-1-col-lf .text-con .text { width: 100%; font-size: 1.4vw; line-height: 2vw;}
  .hp-sec-1-col-lf .text-con .order-bt { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt { width: 12vw; padding: 0 0.5vw; margin: 0 1.5vw 0 0; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .text { width: calc(100% - 1vw); color: #fff; font-size: 1.3vw; text-align: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .icon { width: 1vw; color: #FCE7EC; font-size: 1.3vw;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .icon { color: #D52E5D;}

  .hp-sec-1-col-rt { width: 25vw; border-radius: 12vw 0 0 12vw; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-rt .pic-box { width: 100%; height: 22.6vw; border-radius: 12vw 0 0 12vw; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-rt .pic-box img { width: auto; height: 100%; margin: 0 0 0 -7vw;}

  
  /************ section #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; padding: 3vw 0 0 0; background-color: #FCE7EC;}

  .hp-sec-2-title { clear: both; width: 100%; padding: 0 0 4vw 0; color: #D52E5D; font-size: 2vw; font-weight: 600; text-align: center;}

  .hp-sec-2-serv-items { width: 100%; padding: 0 calc(50% - 680px) 5vw calc(50% - 680px); box-sizing: border-box; position: relative;}
  .hp-sec-2-serv-items div { position: relative; z-index: 1;}
  .hp-sec-2-serv-items img.hp-serv-items-prev { width: 40px; height: auto; position: absolute; top: 7vw; left: calc(50% - 700px); z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items img.hp-serv-items-next { width: 40px; height: auto; position: absolute; top: 7vw; right: calc(50% - 700px); z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items div .service-item { width: calc(100% / 4); padding: 0 20px; box-sizing: border-box; position: relative; z-index: 1;}
  .hp-sec-2-serv-items div .service-item .photo-mo { display: none;}
  .hp-sec-2-serv-items div .service-item .photo { width: 100%; height: 260px; border-radius: 14px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-sec-2-serv-items div .service-item .photo img { width: auto; height: 100%;}
  .hp-sec-2-serv-items div .service-item .text { width: 100%; color: #000; font-size: 1rem;}
  .hp-sec-2-serv-items div .service-item .text .title { padding: 1vw 0 0.5vw 0; color: #000; font-size: 1.4rem; font-weight: 500;}


  .hp-sec-2-hito-plans { clear: both; width: 100%; padding: 60px 0; background-color: #fff;}
  .hp-sec-2-hito-plans .sub-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .sub-title .word-bx { width: 54px; height: 54px; margin: 0 5px; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1em; border-radius: 100%; background-color: #D52E5D; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list { width: 88vw; padding: 1vw 5vw 1vw 10vw; margin: 3vw 0 0 calc(100% - 88vw); box-sizing: border-box; border-radius: 16vw 0 0 16vw; background-color: #F2B8C1; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list { width: calc(100% - 450px); padding: 0 3vw 0 0; box-sizing: border-box;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx { width: 100%; margin: 0 0 1vw 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon { width: 120px;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon img { width: 100%; height: auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text { width: calc(100% - 120px); padding: 0 10px 0 20px; box-sizing: border-box;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.title { color: #000; font-size: 1.4rem; font-weight: 500; line-height: 2em;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.intro { color: #000; font-size: 1rem;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt { width: 180px; padding: 10px 0 0 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a { width: 100%; padding: 5px; box-sizing: border-box; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #D52E5D solid; border-radius: 20px; background-color: #D52E5D; display: block;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a:hover { color: #D52E5D; background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo { display: none;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx { width: 450px;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx img { width: 100%; height: auto;}

  .hp-sec-2-hito-plans .more-serv-check-bt { width: 300px; margin: 5vw auto 0 auto;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt { width: 100%; padding: 0.5vw; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .text { width: calc(100% - 20px); color: #fff; font-size: 1.4rem; text-align: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .icon { width: 20px; color: #FCE7EC; font-size: 1.4rem;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .icon { color: #D52E5D;}


  /************ section #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; position: relative;}

  img.hp-sec-3-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .hp-sec-3-content { width: 28vw; color: #3A3A3A; font-size: 1.2rem; line-height: 1.8em; position: absolute; top: 50%; transform: translateY(-50%); right: calc(50% - 700PX); z-index: 2;}
  .hp-sec-3-content span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500;}


  /************ section #hp-sec-4 ************/

  section#hp-sec-4 { clear: both; width: 100%; padding: 0 0 4vw 0; box-sizing: border-box; background-color: #fff; background-image: url("../images/hp_sec_4_bg_illu.png"); background-repeat: no-repeat; background-position: right bottom;}

  .hp-sec-4-title { clear: both; width: 100%; padding: 4vw 0 0 0; color: #D52E5D; font-size: 2vw; font-weight: 600; text-align: center;}

  .hp-sec-4-choose-list { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .hp-sec-4-choose-list .choose-box { width: 22vw; margin: 0 1vw;}
  .hp-sec-4-choose-list .choose-box .pic-1 { width: 22vw; height: 22vw; border-radius: 100%; border: 0.5vw #fff solid; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-2 { width: 22vw; height: 22vw; margin: 6vw 0 0 0; border-radius: 100%; border: 0.5vw #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-3 { width: 22vw; height: 22vw; border-radius: 100%; border: 0.5vw #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-1 img, 
  .hp-sec-4-choose-list .choose-box .pic-2 img, 
  .hp-sec-4-choose-list .choose-box .pic-3 img { width: auto; height: 100%;}
  .hp-sec-4-choose-list .choose-box .text { clear: both; width: 80%; margin: 1vw auto 0 auto; color: #707070; font-size: 1.1rem;}
  .hp-sec-4-choose-list .choose-box .text span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500; line-height: 2em;}
  /** 20251112更新==(結束) **/


  /************ section#index ************/

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 0; margin: 120px 0 0 0; box-sizing: border-box; position: relative;}

  .index-title-1 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .index-title-2 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.6em; font-weight: 600; text-align: center; box-sizing: border-box;}
  .img-index-1 { width: 100%; height: auto; margin: 50px 0 20px 0; overflow: hidden;}
  .img-index-1 img.img-index-1 { width: 1800px; height: auto; margin: 0 calc(50% - 900px); display: block;}
  .img-index-1 img.img-index-1-mo { display: none;}
  .index-title-3 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.2em; text-align: center; box-sizing: border-box;}
  
  .more-bt { width: 160px; margin: 40px auto 0 auto;}
  .more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.4em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-2 { clear: both; width: 100%; padding: 85px 0 55px 0; background-image: url("../images/index_2_bg.png"); background-repeat: no-repeat; background-position: center top; background-color: #FBE5EA;}

  .index-news-list { clear: both; width: 730px; padding: 20px 0; margin: 0 auto; font-size: 1.2em; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-news-list .date { width: 120px; color: #54C2F0;}
  .index-news-list .title { width: calc(100% - 200px);}
  .index-news-list .title a { color: #3E3A39; text-decoration: none;}
  .index-news-list .more { width: 100px; margin: 0 0 0 10px;}
  .index-news-list .more a { width: 70px; padding: 2px 0; color: #fff; font-size: 0.8em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-3 { clear: both; width: 100%; position: relative;}
  
  img.img-index-3-bg { width: 100%; height: auto; display: block; position: relative; z-index: 1;}
  img.img-index-3-text { width: 220px; height: auto; position: absolute; bottom: 3vw; left: 19vw; z-index: 1;}

  section#index-4 { clear: both; width: 100%; padding: 25px 0; position: relative; z-index: 2;}

  .index-serv-intro { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .index-serv-intro .serv-intro { width: 400px; margin: 0 30px; position: relative; cursor: pointer;}
  .index-serv-intro .serv-intro a { width: 100%; height: 100%; color: #3E3A39; text-decoration: none; display: block;}
  .index-serv-intro .serv-intro .mask-cr { width: 370px; height: 370px; border-radius: 100%; background-color: rgba(239,145,167,0.5); position: absolute; top: 15px; left: 15px; display: none; justify-content: center; align-items: center;}
  .index-serv-intro .serv-intro .mask-cr img.plus { width: 40px; height: auto;}
  .index-serv-intro .serv-intro .photo { width: 400px; height: 400px;}
  .index-serv-intro .serv-intro .photo img { width: 100%; height: auto;}
  .index-serv-intro .serv-intro .arrow { width: 100%; margin: 7px 0; text-align: center;}
  .index-serv-intro .serv-intro .arrow img { width: 33px; height: auto; border: 1px #EF91A7 solid; border-radius: 100%; box-sizing: border-box;}
  .index-serv-intro .serv-intro a .text { width: 100%; margin: 5px 0; line-height: 1.8em; text-align: center;}
  .index-serv-intro .serv-intro a .text font.big { color: #604C3F; font-size: 1.4em; font-weight: 600;}
  .index-serv-intro .serv-intro a .text font.small { color: #3E3A39; font-size: 1.1em;}

  img.img-index4-bg { width: 420px; height: auto; position: absolute; bottom: -30px; right: 40px;}


  /************ section#about ************/

  .about-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .about-top-banner { clear: both; width: 100%; margin: 120px 0 0 0; position: relative; z-index: 8;}
  img.about-banner { width: 100%; height: auto;}
  img.about-banner-text { width: 260px; height: auto; position: absolute; top: 4vw; right: 30vw;}

  section#about-2 { clear: both; width: 100%; padding: 0 calc(50% - 680px); box-sizing: border-box; background-color: #F9D3DC; display: flex; justify-content: flex-start; align-items: flex-start;}

  .about-2-pic { width: 55%;}
  .about-2-pic img { width: 100%; height: auto; display: block;}
  .about-2-text { width: 45%; padding: 80px; box-sizing: border-box;}

  .about-2-t1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600;}
  .about-2-t2 { width: 100%; font-size: 1.6em; font-weight: 600;}
  .about-2-t3 { width: 100%; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em;}

  section#about-3 { clear: both; width: 100%; padding: 70px calc(50% - 680px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}

  .about-3-text { width: 35%; padding: 30px; box-sizing: border-box;}
  .about-3-pic { width: 65%;}
  .about-3-pic img { width: 100%; height: auto; display: block;}


  /************ section#service ************/

  .service-title-3 { clear: both; width: 700px; margin: 10px auto; font-size: 1.2em; text-align: center;}

  .service-top-banner { clear: both; width: 100%; margin: 120px 0 0 0; position: relative; z-index: 8;}
  img.service-banner { width: 100%; height: auto; display: block;}
  img.service-banner-text { width: 260px; height: auto; position: absolute; top: 1.5vw; right: 17vw;}

  section#service-1 { clear: both; width: 100%; padding: 0 0 110px 0; position: relative; overflow: hidden;}

  .servict-infor-list { clear: both; width: 100%; padding: 0 calc(50% - 550px); margin: 0 0 55px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 2;}
  .servict-infor-list .serv-pic, .servict-infor-list .serv-pic-p { width: 40%; padding: 0 20px; box-sizing: border-box;}
  .servict-infor-list .serv-pic img, .servict-infor-list .serv-pic-p img { width: 100%; height: auto;}
  .servict-infor-list .serv-pic-m { display: none;}
  .servict-infor-list .serv-infor { width: 60%; padding: 20px; background-color: rgba(255, 255, 255, 0.4); box-sizing: border-box;}
  .servict-infor-list .serv-infor span.title { padding: 5px 10px; margin: 0 0 10px 0; color: #fff; font-size: 1.8em; font-weight: 600; background-color: #EF91A7; border-radius: 10px;}
  .servict-infor-list .serv-infor .text { clear: both; width: 100%; margin: 20px 0; font-size: 1.4em; font-weight: 600; line-height: 1.8em;}
  .servict-infor-list .serv-infor .serv-bt { clear: both; width: 100px;}
  .servict-infor-list .serv-infor .serv-bt a { width: 100%; padding: 5px 0; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  img.serv-1-lf-bg { width: 22vw; height: auto; position: absolute; top: 0; left: -2vw; z-index: 1;}
  img.serv-1-rt-bg { width: 44vw; height: auto; position: absolute; top: 0; right: 0; z-index: 1;}

  font.red-s { color: #ff0000; font-size: 0.8em;}


  /************ section#service_1 ************/

  section#service-1-title { clear: both; width: 100%; padding: 70px 0 50px 0; margin: 120px 0 0 0; background-color: #F7F8F8; position: relative;}

  .serv-title-1 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-title-2 { width: 100%; padding: 0 calc(50% - 680px); color: #54C2F0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}
  .serv-title-3 { width: 700px; margin: 20px auto; font-size: 1.2em; text-align: center;}

  .serv-1-price-time { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start}
  .serv-1-price-time .price-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .price-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #EF91A7;}
  .serv-1-price-time .price-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}
  .serv-1-price-time .time-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .time-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #54C2F0;}
  .serv-1-price-time .time-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}

  img.serv-1-flower { width: 12vw; height: auto; position: absolute; top: 5vw; left: 7vw;}
  img.serv-1-arrow { width: 32px; height: auto; position: absolute; bottom: -16px; left: calc(50% - 16px); border: 1px #EF91A7 solid; border-radius: 100%;}

  section#service-video { clear: both; width: 100%; padding: 80px calc(50% - 550px); box-sizing: border-box;}
  section#service-video .video-box { width: 100%; margin: 0 auto;}

  section#service-detail { clear: both; width: 100%; padding: 55px calc(50% - 680px); background-image: url("../images/service_1_detail_bg.jpg"); background-repeat: no-repeat; background-size: 96%; background-position: top left; box-sizing: border-box;}

  .serv-detail-title-1 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-detail-title-2 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 60px 0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}

  .service-detail-infor { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .service-detail-infor .pic-m { display: none;}
  .service-detail-infor .pic, .service-detail-infor .pic-p { width: 50%;}
  .service-detail-infor .pic img, .service-detail-infor .pic-p img { width: 100%; height: auto; display: block;}
  .service-detail-infor .infor { width: 50%; padding: 0 50px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .service-detail-infor .infor .icon { width: 100px; margin: 0 10px 0 0;}
  .service-detail-infor .infor .icon img { width: 100%; height: auto;}
  .service-detail-infor .infor .text { width: calc(100% - 110px);}
  .service-detail-infor .infor .text .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600;}
  .service-detail-infor .infor .text .title2 { width: 100%; margin: 0 0 10px 0;}
  .service-detail-infor .infor .text .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service-detail-infor .infor .text .infor-text { width: 100%; font-size: 1.1em; font-weight: 600; line-height: 1.8em; letter-spacing: 0.1em;}

  section#service-infor-query { clear: both; width: 100%; padding: 40px 0;}

  img.service-beauty-banner { width: 100%; height: auto; margin: 0 0 60px 0;}

  .service5-class-query { clear: both; width: 100%; padding: 0 calc(50% - 550px); margin: 0 0 60px 0; box-sizing: border-box;}
  .service5-class-query .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .service5-class-query .title2 { width: 100%; margin: 0 0 10px 0; text-align: center;}
  .service5-class-query .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-query ul.class-list { clear: both; width: 90%; padding: 0; margin: 40px auto; list-style: none; display: block;}
  .service5-class-query ul.class-list li { width: 100%; padding: 15px 60px; margin: 0; font-size: 1.6em; border-bottom: 1px #EF91A7 solid; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .service5-class-query ul.class-list li .class { width: calc(100% - 140px);}
  .service5-class-query ul.class-list li .time { width: 140px;}

  .service5-class-price { clear: both; width: 100%; position: relative;}
  .service5-class-price .class-scheme { width: 620px; padding: 40px 140px; margin: 0 auto; border: 3px #EF91A7 solid; box-sizing: border-box;}
  .service5-class-price img.service-5-flower { width: 340px; height: auto; position: absolute; top: -5px; left: calc(50% - 530px);}
  .service5-class-price img.service-5-stone { width: 80px; height: auto; position: absolute; bottom: -20px; right: calc(50% - 340px);}
  .service5-class-price .title { width: 100%; margin: -55px 0 0 0; text-align: center;}
  .service5-class-price .title span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-price .list { width: 100%; margin: 20px 0 0 0; color: #a60000; font-size: 2.6em; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .service5-class-price .list .column-1 { width: 150px;}
  .service5-class-price .list .column-2 { width: calc(100% - 150px);}


  /************ section#rockbath ************/

  .rockbath-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .rockbath-top-banner { clear: both; width: 100%; margin: 120px 0 0 0; position: relative; z-index: 8;}
  img.rockbath-banner { width: 100%; height: auto;}
  img.rockbath-banner-text { width: 260px; height: auto; position: absolute; top: 2.5vw; left: 20vw;}
  
  img.rockbath-top-title { clear: both; width: 546px; height: auto; margin: 0 auto; display: block; position: relative; z-index: 4;}

  .rockbath-top-title-s { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center; position: relative; z-index: 4;}
  .rockbath-top-title-s span { padding: 8px 25px; color: #fff; font-size: 2.8em; line-height: 1em; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 12px;}

  .rockbath-top-text { clear: both; width: 58%; padding: 40px 0; margin: 0 auto; font-size: 1.2em; line-height: 1.6em; box-sizing: border-box; position: relative; z-index: 4;}

  img.rockbath-bg-lf { width: 290px; height: auto; position: absolute; top: 350px; right: 79%; z-index: 1;}
  img.rockbath-bg-rt { width: 390px; height: auto; position: absolute; top: 150px; left: 71%; z-index: 1;}

  section#rockbath-spa { clear: both; width: 100%; height: 450px; background-image: url("../images/rockbath_banner_spa.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 9; overflow: hidden;}

  .rockbath-spa-text { width: 480px; position: absolute; top: 50px; left: 55%;}
  .rockbath-spa-text .title1 { width: 100%; margin: 0 0 10px 0; color: #B4B4B5; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .rockbath-spa-text .title2 { width: 100%; margin: 0 0 30px 0; text-align: center;}
  .rockbath-spa-text .title2 span { padding: 3px 10px; color: #fff; font-size: 2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-spa-text .list-text { width: 100%; color: #fff; font-size: 1.8em; line-height: 2.6em; text-align: center;}
  .rockbath-spa-text .list-text font.big { font-size: 2.2rem; font-weight: 600;}

  section#rockbath-trilogy { clear: both; width: 100%; padding: 40px calc(50% - 550px) 180px calc(50% - 550px); box-sizing: border-box; background-color: #272929; position: relative;}

  .rockbath-trilogy-title { width: 100%;}
  .rockbath-trilogy-title .title1 { width: 100%; margin: 0 0 20px 0; color: #906225; font-size: 1.8em; font-family: "新細明體"; text-align: center;}
  .rockbath-trilogy-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-trilogy-title .title2 span { padding: 3px 10px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-trilogy-title .title3 { width: 100%; color: #fff; font-size: 1.2em; text-align: center;}

  .rockbath-trilogy-main { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; position: relative; z-index: 2;}
  .rockbath-trilogy-main .trilogy-infor { width: calc(100% / 3); padding: 0 30px; box-sizing: border-box;}
  .rockbath-trilogy-main .trilogy-infor .photo { width: 100%; margin: 0 0 10px 0;}
  .rockbath-trilogy-main .trilogy-infor .photo img { width: 100%; height: auto;}
  .rockbath-trilogy-main .trilogy-infor .infor { width: 100%;}
  .rockbath-trilogy-main .trilogy-infor .infor .title { width: 130px; padding: 5px 0; margin: 20px auto 30px auto; color: #fff; font-size: 1.4em; font-weight: 600; text-align: center; background-color: #54C1EF; border-radius: 18px;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-big { width: 100%; margin: 0 0 30px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-small { width: 100%; color: #fff; line-height: 1.8em;}

  img.rockbath-tri-bg-lf { width: 280px; height: auto; position: absolute; top: 80px; right: 76%; z-index: 1;}
  img.rockbath-tri-bg-rt { width: 240px; height: auto; position: absolute; top: 40px; left: 80%; z-index: 1;}

  section#rockbath-stone-bio { clear: both; width: 100%;}

  .rockbath-stone-pic { width: 100%; height: 270px; background-color: #666698; display: block; position: relative;}
  .rockbath-stone-pic img.rockbath-stone { width: 1024px; height: auto; display: block; position: absolute; top: -170px; left: calc(50% - 512px); z-index: 3;}

  section#rockbath-certification { clear: both; width: 100%; padding: 0 calc(50% - 550px) 40px calc(50% - 550px); box-sizing: border-box;}

  .rockbath-certifi-title { width: 100%; margin: -70px 0 0 0; position: relative; z-index: 4;}
  .rockbath-certifi-title .title1 { width: 100%; margin: 0 0 5px 0; color: #B4B4B5; font-size: 2.2em; font-family: "新粗明體"; text-align: center;}
  .rockbath-certifi-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-certifi-title .title2 span { padding: 3px 15px; color: #fff; font-size: 2.2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certifi-title .text { width: 100%; text-align: center; line-height: 1.6em;}
  .rockbath-certifi-title .text font.big { color: #666698; font-size: 1.4em; line-height: 2em;}

  .rockbath-certificates { clear: both; width: 100%; margin: 50px 0 0 0;}
  .rockbath-certificates .title { width: 100%; text-align: center;}
  .rockbath-certificates .title span { padding: 3px 15px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certificates img.certificate-pics { clear: both; width: 100%; height: auto; margin: 30px 0 0 0;}
  .rockbath-certificates img.certificate-pics-mo-1 { display: none;}
  .rockbath-certificates img.certificate-pics-mo-2 { display: none;}

  section#rockbath-guide { clear: both; width: 100%; padding: 0 calc(50% - 550px) 40px calc(50% - 550px); box-sizing: border-box;}

  .rockbath-guide-title { width: 100%; margin: 0 0 20px 0; position: relative;}
  .rockbath-guide-title img.rockbath-guide-banner { width: 100%; height: auto;}
  .rockbath-guide-title .title1 { width: 300px; color: #B4B4B5; font-size: 1.4em; font-family: "新細明體"; text-align: center; position: absolute; top: 20px; right: 240px;}
  .rockbath-guide-title .title2 { width: 300px; text-align: center; position: absolute; top: 50px; right: 240px;}
  .rockbath-guide-title .title2 span { padding: 3px 15px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}

  .rockbath-guide-list { clear: both; width: 100%; display: flex; justify-content: flex-start;}
  .rockbath-guide-list .list-box { width: calc(100% / 6); padding: 0 10px; box-sizing: border-box;}
  .rockbath-guide-list .list-box .photo { width: 100%; height: 150px;}
  .rockbath-guide-list .list-box .photo img { width: 100%; height: auto;}
  .rockbath-guide-list .list-box .num { clear: both; width: 36px; height: 36px; margin: 15px auto; color: #fff; font-size: 1.2em; border-radius: 100%; background-color: #54C1EF; display: flex; justify-content: center; align-items: center;}
  .rockbath-guide-list .list-box .text { clear: both; width: 100%; padding: 5px 10px; font-weight: 600; line-height: 1.6em; text-align: center; border-top: 1px #EF91A7 solid; box-sizing: border-box;}


  /************ section#news ************/

  .news-top-banner { clear: both; width: 100%; margin: 120px 0 0 0; position: relative; z-index: 8;}
  img.news-banner { width: 100%; height: auto; display: block;}
  img.news-banner-text { width: 260px; height: auto; position: absolute; top: 2vw; right: 14vw;}

  section#news-content { clear: both; width: 100%; padding: 60px calc(50% - 680px); box-sizing: border-box;}

  .news-con-title-1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .news-con-title-2 { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}

  .news-date { clear: both; width: 100%; margin: 20px 0; text-align: right;}

  .news-content-text { clear: both; width: 100%; font-size: 1.2em; line-height: 1.8em;}
  .news-content-text a { color: #3E3A39; border-bottom: 1px #3E3A39 dashed; text-decoration: none;}
  .news-content-text img { max-width: 100%; height: auto;}


  /************ section#contact ************/

  .contact-top-banner { clear: both; width: 100%; margin: 120px 0 0 0; position: relative; z-index: 8;}
  img.contact-banner { width: 100%; height: auto; display: block;}
  img.contact-banner-text { width: 260px; height: auto; position: absolute; top: 3vw; right: 26vw;}

  section#contact-infor { clear: both; width: 100%; padding: 0 calc(50% - 550px) 60px calc(50% - 550px); box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .contact-infor-table { width: calc(100% / 4 - 40px); margin: 0 20px;}
  .contact-infor-table .caption { width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; border-bottom: 2px #f2f1ed solid; box-sizing: border-box;}
  .contact-infor-table .caption span { padding: 15px 0; border-bottom: 2px #fd9830 solid;}
  .contact-infor-table .column { width: 100%; padding: 15px 0; margin: 0 0 30px 0; font-size: 0.9em; line-height: 2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .contact-infor-table .column .social-icon { width: 40px; margin: 0 5px 0 0; background-color: #eee; border-radius: 20px 20px 0 20px;}
  .contact-infor-table .column .social-icon a.icon { width: 100%; padding: 6px 0; color: #3E3A39; text-align: center; text-decoration: none; display: block;}
  .contact-infor-table .column .sitemap { width: 100%;}
  .contact-infor-table .column .sitemap a { color: #3E3A39; line-height: 3em; text-decoration: none;}
  .contact-infor-table .column .sitemap a:hover { color: #E98BA1}

  section#contact-map { clear: both; width: 100%; padding: 0 calc(50% - 550px) 100px calc(50% - 550px); box-sizing: border-box;}


  /************ section#booking ************/

  section#booking-top-banner { clear: both; width: 100%; margin: 120px 0 0 0;}

  img.booking-top-banner { width: 100%; height: auto; display: block;}

  section#booking-video { clear: both; width: 100%; padding: 80px calc(50% - 550px); background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top; box-sizing: border-box;}

  .booking-video-box { width: 70%; margin: 0 auto;}

  section#booking-course-list { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-stitle { width: 100%; padding: 15px 0; background-color: #E88AA0;}
  .booking-stitle img.stitle-1 { margin: 0 auto; display: block;}

  .booking-course { clear: both; width: 1100px; height: 500px; margin: 60px auto;}
  .booking-course ul li .course-box { width: 1100px; height: 450px; padding: 15px; background-color: #ECECE3; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .pic { width: 50%;}
  .booking-course ul li .course-box .pic img.course-pic { width: 100%; height: auto;}
  .booking-course ul li .course-box .infor { width: 50%; padding: 0 0 0 25px; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .title { width: 100%; margin: 0 0 10px 0; color: #54BCEA; font-size: 2em; font-weight: 600;}
  .booking-course ul li .course-box .infor .price-time { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .infor .price-time .price { width: 150px; padding: 10px; margin: 0 20px 0 0; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .price .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #E98BA1;}
  .booking-course ul li .course-box .infor .price-time .price .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .price-time .time { width: 150px; padding: 10px; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .time .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #54BCEA;}
  .booking-course ul li .course-box .infor .price-time .time .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .list-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-full .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-full .text { width: calc(100% - 30px); padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf { width: 50%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em; display: flex; justify-content: flex-start; flex-wrap: wrap; float: left; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-helf .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf .text { width: calc(100% - 30px); padding: 0; margin: 0;}

  section#booking-experience { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .experience-content { width: 100%; padding: 60px calc(50% - 550px); box-sizing: border-box;}
  .experience-content .top-title-text { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .experience-content .top-title-text .top-title { width: 50%; padding: 0 0 0 20px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .experience-content .top-title-text .top-title font.big { color: #54BCEA; font-size: 1.6rem; font-weight: 600;}
  .experience-content .top-title-text .text-list { width: 50%; padding: 0 0 0 150px; font-size: 1.4em; font-weight: 600; line-height: 2.2em; box-sizing: border-box;}
  .experience-content .top-title-text .text-list font.icon { color: #54BCEA;}
  .experience-content .photo-list { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .experience-content .photo-list img { width: calc(50% - 20px); height: auto; margin: 0 10px 20px 10px;}

  .experience-content hr.booking-exp-line { clear: both; width: 100%; margin: 10px 0 30px 0; border-top: 1px #E88AA0 solid;}

  section#booking-oil-use { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-oil-use-pics { clear: both; width: 100%; padding: 60px calc(50% - 550px); box-sizing: border-box;}
  .booking-oil-use-pics img { width: 100%; height: auto; display: block;}

  section#booking-oil-element { clear: both; width: 100%; background-color: #F0F0F2;}

  .booking-stitle2 { width: 100%; padding: 15px 0;}
  .booking-stitle2 img.stitle-1 { margin: 0 auto; display: block;}

  .booking-oil-element-pic { clear: both; width: 100%; padding: 60px calc(50% - 550px); box-sizing: border-box; position: relative; z-index: 4;}
  .booking-oil-element-pic img { width: 100%; height: auto; display: block;}

  .booking-oil-element-list { clear: both; width: 100%; padding: 0 calc(50% - 550px) 60px calc(50% - 550px); margin: -100px 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 5;}
  .booking-oil-element-list .column-helf { width: 50%; padding: 10px 100px; color: #455900; font-size: 1.6em; font-weight: 600; border-bottom: 2px #E88AA0 dashed; box-sizing: border-box;}
  .booking-oil-element-list .column-helf font.icon { color: #50D1DC; font-size: 2rem;}
  .booking-oil-element-list .column-helf font.big { font-size: 2rem; font-weight: 600;}

  section#booking-attention { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-attention-list { clear: both; width: 100%; padding: 60px calc(50% - 550px) 40px calc(50% - 550px); box-sizing: border-box;}
  .booking-attention-list .list-box { width: 100%; margin: 0 0 20px 0; font-size: 1.4em; font-weight: 600; display: flex; justify-content: flex-start;}
  .booking-attention-list .list-box .icon { width: 30px; color: #50D1DC;}
  .booking-attention-list .list-box .list { width: calc(100% - 30px);}


  section#booking-store { clear: both; width: 100%; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-store-pic { width: 100%; padding: 40px calc(50% - 550px); display: flex; justify-content: flex-start; box-sizing: border-box;}
  .booking-store-pic img.store-pic { width: calc(100% / 3 - 20px); height: auto; margin: 0 10px;}

  section#booking-require-table { clear: both; width: 100%; padding: 40px calc(50% - 550px); box-sizing: border-box; display: flex; justify-content: flex-start;}

  .booking-table-title { width: 35%;}
  .booking-table-title .title { width: 100%; margin: 0 0 20px 0;}
  .booking-table-title .title img { width: 100%; height: auto;}
  .booking-table-title .title-mo { display: none;}
  .booking-table-title .text { width: 100%; font-size: 1.2em; font-weight: 600; line-height: 1.8em; text-align: center;}
  .booking-table-title .text font.pink-small { color: #E88AA0; font-size: 0.9rem;}

  .booking-form-table { width: 65%; padding: 0 30px; border-left: 2px #E88AA0 solid; box-sizing: border-box;}
  .booking-form-table input, .booking-form-table select { width: 100%; padding: 10px; margin: 0 0 20px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #E88AA0 solid; background-color: #fff; box-sizing: border-box;}
  .booking-form-table .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0;}
  .booking-form-table .submit-bt img { width: 160px; height: auto;}


  /************ section#404 ************/

  section#page-404 { clear: both; width: 100%; padding: 100px calc(50% - 550px); margin: 120px 0 0 0; text-align: center; box-sizing: border-box;}

  font.big-404 { color: #916225; font-size: 4em; font-weight: 600;}
  font.small-404 { font-size: 2em; font-weight: 600;}


  /************ footer (20251112更新) ************/

  footer { clear: both; width: 100%; background-color: #FCE7EC; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .footer-contain-mo { display: none;}

  .footer-contain { clear: both; width: 100%; padding: 60px calc(50% - 700px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .footer-contain .col-left { width: 50%;}
  .footer-contain .col-left .footer-logo { width: 100%;}
  .footer-contain .col-left .footer-logo img { width: 360px; height: auto;}
  .footer-contain .col-left ul.footer-nav { width: 100%; padding: 0; margin: 40px 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contain .col-left ul.footer-nav li { padding: 0 20px; margin: 0; border-left: 1px #3A3A3A solid;}
  .footer-contain .col-left ul.footer-nav li:first-child { border-left: 0;}
  .footer-contain .col-left ul.footer-nav li a { color: #3A3A3A; font-size: 1rem; text-decoration: none;}
  .footer-contain .col-left ul.footer-nav li a:hover { color: #D52E5D;}
  .footer-contain .col-left .social-icons { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-contain .col-left .social-icons a { width: 50px; margin: 0 10px 0 0; display: block;}
  .footer-contain .col-left .social-icons a img { width: 100%; height: auto;}
  .footer-contain .col-right { width: 50%;}
  .footer-contain .col-right .office-title { width: 500px; padding: 0 0 10px 0; color: #3A3A3A; font-size: 1.6rem; font-weight: 500; border-bottom: 2px #D52E5D solid;}
  .footer-contain .col-right .info-box { width: 100%; margin: 10px 0 0 0; color: #3A3A3A; font-size: 1rem; line-height: 1.2em; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .footer-contain .col-right .info-box .icon { width: 28px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .icon img { width: 18px; height: auto;}
  .footer-contain .col-right .info-box .title { width: 80px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .info { width: calc(100% - 28px - 80px); padding: 0 0 10px 0;}

  .footer-copyright { clear: both; width: 100%; padding: 10px; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #8D6125;}


}

@media screen and (min-width: 1280px) and (max-width: 1440px) {

  /************ aside ************/

  aside#pc { width: 50px; position: fixed; top: 300px; right: 35px; z-index: 9;}
  aside#pc .icon-line { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-tel { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-line img { width: 100%; height: auto;}
  aside#pc .icon-tel img { width: 100%; height: auto;}

    
  /************ header + nav ************/

  header#main-header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 0 20px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; justify-content: flex-start; align-items: center; z-index: 1000; box-sizing: border-box; transition: transform 0.3s ease-in-out;}
  #main-header.header-hidden { transform: translateY(-100%);}

  .header-logo { width: 200px;}
  .header-logo img { width: 100%; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 200px - 120px);}
  nav#pc ul.header-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.header-nav li { padding: 0; margin: 0;}
  nav#pc ul.header-nav li a { padding: 5px 25px; color: #8D6125; font-size: 1.1rem; text-decoration: none; display: block;}
  nav#pc ul.header-nav li a:hover { color: #D52E5D;}

  .header-icons-mo { display: none;}

  .header-icons { width: 120px; display: flex; justify-content: center; align-items: center;}
  .header-icons img { width: 30px; height: auto; margin: 0 5px;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box-pc { clear: none; width: 100%; height: 28vw; overflow: hidden; position: relative; z-index: 8;}
  .banner-box-pc img.text { width: 200px; height: auto; position: absolute; top: 4vw; right: 23vw;}


  /** 20251112更新==(開始) **/
  /************ hp banner ************/

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box .banner { width: 100%; height: auto; position: relative; z-index: 1;}

  .hp-banner-box .banner-content { width: 47vw; position: absolute; top: 12vw; left: 5vw; z-index: 2;}
  .hp-banner-box .banner-content .content-1 { width: 34vw; padding: 0 0 2vw 0; text-align: center;}
  .hp-banner-box .banner-content .content-1 .logo { width: 4.2vw; height: auto; margin: 0 auto 1.5vw auto;}
  .hp-banner-box .banner-content .content-1 .title-1 { width: 24vw; margin: 0 auto; color: #D52E5D; font-size: 2.6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; background-image: url("../images/banner_title_1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative;}
  .hp-banner-box .banner-content .content-1 .title-2 { width: 100%; color: #D52E5D; font-size: 2.6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .hp-banner-box .banner-content .content-2 { width: 100%; padding: 20px; box-sizing: border-box; color: #8D6125; font-size: 1.8vw; border-radius: 50px; background-color: rgba(255,255,255,0.3);}


  /************ section #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 3vw 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}

  .hp-sec-1-text-con { display: none;}

  .hp-sec-1-col-lf { width: 70vw; padding: 0 5vw 0 0; box-sizing: border-box; border-radius: 0 12vw 12vw 0; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .pic-box { width: 25vw; height: 22.6vw; border-radius: 0 12vw 12vw 0; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-lf .pic-box img { width: auto; height: 100%;}
  .hp-sec-1-col-lf .text-con { width: calc(100% - 25vw); padding: 0 0 0 6vw; box-sizing: border-box;}
  .hp-sec-1-col-lf .text-con .text { width: 100%; font-size: 1.4vw; line-height: 2vw;}
  .hp-sec-1-col-lf .text-con .order-bt { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt { width: 12vw; padding: 0 0.5vw; margin: 0 1.5vw 0 0; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .text { width: calc(100% - 1vw); color: #fff; font-size: 1.3vw; text-align: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .icon { width: 1vw; color: #FCE7EC; font-size: 1.3vw;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .icon { color: #D52E5D;}

  .hp-sec-1-col-rt { width: 25vw; border-radius: 12vw 0 0 12vw; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-rt .pic-box { width: 100%; height: 22.6vw; border-radius: 12vw 0 0 12vw; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-rt .pic-box img { width: auto; height: 100%; margin: 0 0 0 -7vw;}


  /************ section #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; padding: 3vw 0 0 0; background-color: #FCE7EC;}

  .hp-sec-2-title { clear: both; width: 100%; padding: 0 0 4vw 0; color: #D52E5D; font-size: 2vw; font-weight: 600; text-align: center;}

  .hp-sec-2-serv-items { width: 100%; padding: 0 calc(50% - 580px) 5vw calc(50% - 580px); box-sizing: border-box; position: relative;}
  .hp-sec-2-serv-items div { position: relative; z-index: 1;}
  .hp-sec-2-serv-items img.hp-serv-items-prev { width: 40px; height: auto; position: absolute; top: 9vw; left: 4vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items img.hp-serv-items-next { width: 40px; height: auto; position: absolute; top: 9vw; right: 4vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items div .service-item { width: calc(100% / 4); padding: 0 1vw; box-sizing: border-box; position: relative; z-index: 1;}
  .hp-sec-2-serv-items div .service-item .photo-mo { display: none;}
  .hp-sec-2-serv-items div .service-item .photo { width: 100%; height: 260px; border-radius: 14px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-sec-2-serv-items div .service-item .photo img { width: auto; height: 100%;}
  .hp-sec-2-serv-items div .service-item .text { width: 100%; color: #000; font-size: 1rem;}
  .hp-sec-2-serv-items div .service-item .text .title { padding: 1vw 0 0.5vw 0; color: #3A3A3A; font-size: 1.4rem; font-weight: 500;}


  .hp-sec-2-hito-plans { clear: both; width: 100%; padding: 60px 0; background-color: #fff;}
  .hp-sec-2-hito-plans .sub-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .sub-title .word-bx { width: 54px; height: 54px; margin: 0 5px; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1em; border-radius: 100%; background-color: #D52E5D; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list { width: 94vw; padding: 1vw 5vw 1vw 10vw; margin: 3vw 0 0 calc(100% - 94vw); box-sizing: border-box; border-radius: 20vw 0 0 20vw; background-color: #F2B8C1; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list { width: calc(100% - 450px); padding: 0 3vw 0 0; box-sizing: border-box;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx { width: 100%; margin: 0 0 1vw 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon { width: 120px;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon img { width: 100%; height: auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text { width: calc(100% - 120px); padding: 0 10px 0 20px; box-sizing: border-box;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.title { color: #000; font-size: 1.4rem; font-weight: 500; line-height: 2em;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.intro { color: #000; font-size: 1rem;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt { width: 180px; padding: 10px 0 0 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a { width: 100%; padding: 5px; box-sizing: border-box; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #D52E5D solid; border-radius: 20px; background-color: #D52E5D; display: block;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a:hover { color: #D52E5D; background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo { display: none;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx { width: 450px;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx img { width: 100%; height: auto;}

  .hp-sec-2-hito-plans .more-serv-check-bt { width: 300px; margin: 5vw auto 0 auto;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt { width: 100%; padding: 0.5vw; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .text { width: calc(100% - 20px); color: #fff; font-size: 1.4rem; text-align: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .icon { width: 20px; color: #FCE7EC; font-size: 1.4rem;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .icon { color: #D52E5D;}


  /************ section #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-sec-3-bg { width: 120%; height: auto; margin: 0 0 0 0; position: relative; z-index: 1;}

  .hp-sec-3-content { width: 28vw; color: #3A3A3A; font-size: 1.2rem; line-height: 1.8em; position: absolute; top: 50%; transform: translateY(-50%); right: calc(50% - 580px); z-index: 2;}
  .hp-sec-3-content span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500;}


  /************ section #hp-sec-4 ************/

  section#hp-sec-4 { clear: both; width: 100%; padding: 0 0 4vw 0; box-sizing: border-box; background-color: #fff; background-image: url("../images/hp_sec_4_bg_illu.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: right bottom;}

  .hp-sec-4-title { clear: both; width: 100%; padding: 4vw 0 0 0; color: #D52E5D; font-size: 2vw; font-weight: 600; text-align: center;}

  .hp-sec-4-choose-list { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .hp-sec-4-choose-list .choose-box { width: 26vw; margin: 0 1vw;}
  .hp-sec-4-choose-list .choose-box .pic-1 { width: 26vw; height: 26vw; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-2 { width: 26vw; height: 26vw; margin: 6vw 0 0 0; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-3 { width: 26vw; height: 26vw; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-1 img, 
  .hp-sec-4-choose-list .choose-box .pic-2 img, 
  .hp-sec-4-choose-list .choose-box .pic-3 img { width: auto; height: 100%;}
  .hp-sec-4-choose-list .choose-box .text { clear: both; width: 80%; margin: 1vw auto 0 auto; color: #707070; font-size: 1.1rem;}
  .hp-sec-4-choose-list .choose-box .text span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500; line-height: 2em;}
  /** 20251112更新==(結束) **/


  /************ section#index ************/

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 0; margin: 100px 0 0 0; box-sizing: border-box;}

  .index-title-1 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .index-title-2 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.6em; font-weight: 600; text-align: center; box-sizing: border-box;}
  .img-index-1 { width: 100%; height: auto; margin: 50px 0 20px 0; overflow: hidden;}
  .img-index-1 img.img-index-1 { width: 1500px; height: auto; margin: 0 calc(50% - 750px); display: block;}
  .img-index-1 img.img-index-1-mo { display: none;}
  .index-title-3 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.2em; text-align: center; box-sizing: border-box;}
  
  .more-bt { width: 160px; margin: 40px auto 0 auto;}
  .more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.4em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-2 { clear: both; width: 100%; padding: 85px 0 55px 0; background-image: url("../images/index_2_bg.png"); background-repeat: no-repeat; background-size: 160%; background-position: center center; background-color: #FBE5EA;}

  .index-news-list { clear: both; width: 730px; padding: 20px 0; margin: 0 auto; font-size: 1.2em; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-news-list .date { width: 120px; color: #54C2F0;}
  .index-news-list .title { width: calc(100% - 200px);}
  .index-news-list .title a { color: #3E3A39; text-decoration: none;}
  .index-news-list .more { width: 100px; margin: 0 0 0 10px;}
  .index-news-list .more a { width: 70px; padding: 2px 0; color: #fff; font-size: 0.8em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-3 { clear: both; width: 100%; position: relative; overflow: hidden;}
  
  img.img-index-3-bg { width: 120%; height: auto; display: block; position: relative; z-index: 1;}
  img.img-index-3-text { width: 200px; height: auto; position: absolute; bottom: 3vw; left: 22vw; z-index: 1;}

  section#index-4 { clear: both; width: 100%; padding: 25px 0; position: relative; z-index: 2;}

  .index-serv-intro { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .index-serv-intro .serv-intro { width: 300px; margin: 0 15px; position: relative; cursor: pointer;}
  .index-serv-intro .serv-intro a { width: 100%; height: 100%; color: #3E3A39; text-decoration: none; display: block;}
  .index-serv-intro .serv-intro .mask-cr { width: 270px; height: 270px; border-radius: 100%; background-color: rgba(239,145,167,0.5); position: absolute; top: 15px; left: 15px; display: none; justify-content: center; align-items: center;}
  .index-serv-intro .serv-intro .mask-cr img.plus { width: 30px; height: auto;}
  .index-serv-intro .serv-intro .photo { width: 300px; height: 300px; display: block; overflow: hidden;}
  .index-serv-intro .serv-intro .photo img { width: 100%; height: auto;}
  .index-serv-intro .serv-intro .arrow { width: 100%; margin: 7px 0; text-align: center;}
  .index-serv-intro .serv-intro .arrow img { width: 33px; height: auto; border: 1px #EF91A7 solid; border-radius: 100%; box-sizing: border-box;}
  .index-serv-intro .serv-intro a .text { width: 100%; margin: 5px 0; line-height: 1.8em; text-align: center;}
  .index-serv-intro .serv-intro a .text font.big { color: #604C3F; font-size: 1.4em; font-weight: 600;}
  .index-serv-intro .serv-intro a .text font.small { color: #3E3A39; font-size: 1.1em;}

  img.img-index4-bg { width: 420px; height: auto; position: absolute; bottom: -30px; right: 40px;}


  /************ section#about ************/

  .about-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .about-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.about-banner { width: 100%; height: auto;}
  img.about-banner-text { width: 200px; height: auto; position: absolute; top: 2vw; right: 26vw;}

  section#about-2 { clear: both; width: 100%; background-color: #F9D3DC; display: flex; justify-content: flex-start; align-items: flex-start;}

  .about-2-pic { width: 50%; overflow: hidden;}
  .about-2-pic img { width: 140%; height: auto; margin: 0 0 0 -20%; display: block;}
  .about-2-text { width: 50%; padding: 40px 80px; box-sizing: border-box;}

  .about-2-t1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600;}
  .about-2-t2 { width: 100%; font-size: 1.6em; font-weight: 600;}
  .about-2-t3 { width: 100%; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em;}

  section#about-3 { clear: both; width: 100%; padding: 70px 0; display: flex; justify-content: flex-start; align-items: flex-start;}

  .about-3-text { width: 40%; padding: 0 30px; box-sizing: border-box;}
  .about-3-pic { width: 60%; overflow: hidden;}
  .about-3-pic img { width: 140%; height: auto; display: block;}


  /************ section#service ************/

  .service-title-3 { clear: both; width: 700px; margin: 10px auto; font-size: 1.2em; text-align: center;}

  .service-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.service-banner { width: 100%; height: auto; display: block;}
  img.service-banner-text { width: 200px; height: auto; position: absolute; top: 1.5vw; right: 17vw;}

  section#service-1 { clear: both; width: 100%; padding: 0 0 110px 0; position: relative; overflow: hidden;}

  .servict-infor-list { clear: both; width: 100%; padding: 0 calc(50% - 500px); margin: 0 0 55px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 2;}
  .servict-infor-list .serv-pic, .servict-infor-list .serv-pic-p { width: 40%; padding: 0 20px; box-sizing: border-box;}
  .servict-infor-list .serv-pic img, .servict-infor-list .serv-pic-p img { width: 100%; height: auto;}
  .servict-infor-list .serv-pic-m { display: none;}
  .servict-infor-list .serv-infor { width: 60%; padding: 0 20px; background-color: rgba(255, 255, 255, 0.4); box-sizing: border-box;}
  .servict-infor-list .serv-infor span.title { padding: 5px 10px; margin: 0 0 10px 0; color: #fff; font-size: 1.8em; font-weight: 600; background-color: #EF91A7; border-radius: 10px;}
  .servict-infor-list .serv-infor .text { clear: both; width: 100%; margin: 20px 0; font-size: 1.4em; font-weight: 600; line-height: 1.8em;}
  .servict-infor-list .serv-infor .serv-bt { clear: both; width: 100px;}
  .servict-infor-list .serv-infor .serv-bt a { width: 100%; padding: 5px 0; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  img.serv-1-lf-bg { width: 32vw; height: auto; position: absolute; top: 0; left: -2vw; z-index: 1;}
  img.serv-1-rt-bg { width: 54vw; height: auto; position: absolute; top: 0; right: 0; z-index: 1;}

  font.red-s { color: #ff0000; font-size: 0.8em;}


  /************ section#service_1 ************/

  section#service-1-title { clear: both; width: 100%; padding: 70px 0 50px 0; margin: 100px 0 0 0; background-color: #F7F8F8; position: relative;}

  .serv-title-1 { width: 100%; padding: 0 20%; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-title-2 { width: 100%; padding: 0 20%; color: #54C2F0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}
  .serv-title-3 { width: 700px; margin: 20px auto; font-size: 1.2em; text-align: center;}

  .serv-1-price-time { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start}
  .serv-1-price-time .price-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .price-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #EF91A7;}
  .serv-1-price-time .price-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}
  .serv-1-price-time .time-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .time-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #54C2F0;}
  .serv-1-price-time .time-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}

  img.serv-1-flower { width: 16vw; height: auto; position: absolute; top: 8vw; left: 4vw;}
  img.serv-1-arrow { width: 32px; height: auto; position: absolute; bottom: -16px; left: calc(50% - 16px); border: 1px #EF91A7 solid; border-radius: 100%;}

  section#service-video { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
  section#service-video .video-box { width: 80%; margin: 0 auto;}

  section#service-detail { clear: both; width: 100%; padding: 55px 20px; background-image: url("../images/service_1_detail_bg.jpg"); background-repeat: no-repeat; background-size: 96%; background-position: top left; box-sizing: border-box;}

  .serv-detail-title-1 { width: 100%; padding: 0 20px; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-detail-title-2 { width: 100%; padding: 0 20px; margin: 0 0 60px 0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}

  .service-detail-infor { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .service-detail-infor .pic-m { display: none;}
  .service-detail-infor .pic, .service-detail-infor .pic-p { width: 50%;}
  .service-detail-infor .pic img, .service-detail-infor .pic-p img { width: 100%; height: auto; display: block;}
  .service-detail-infor .infor { width: 50%; padding: 0 50px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .service-detail-infor .infor .icon { width: 100px; margin: 0 10px 0 0;}
  .service-detail-infor .infor .icon img { width: 100%; height: auto;}
  .service-detail-infor .infor .text { width: calc(100% - 110px);}
  .service-detail-infor .infor .text .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600;}
  .service-detail-infor .infor .text .title2 { width: 100%; margin: 0 0 10px 0;}
  .service-detail-infor .infor .text .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service-detail-infor .infor .text .infor-text { width: 100%; font-size: 1.1em; font-weight: 600; line-height: 1.8em; letter-spacing: 0.1em;}

  section#service-infor-query { clear: both; width: 100%; padding: 40px 0;}

  img.service-beauty-banner { width: 100%; height: auto; margin: 0 0 60px 0;}

  .service5-class-query { clear: both; width: 100%; padding: 0 calc(50% - 550px); margin: 0 0 60px 0; box-sizing: border-box;}
  .service5-class-query .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .service5-class-query .title2 { width: 100%; margin: 0 0 10px 0; text-align: center;}
  .service5-class-query .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-query ul.class-list { clear: both; width: 90%; padding: 0; margin: 40px auto; list-style: none; display: block;}
  .service5-class-query ul.class-list li { width: 100%; padding: 15px 60px; margin: 0; font-size: 1.6em; border-bottom: 1px #EF91A7 solid; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .service5-class-query ul.class-list li .class { width: calc(100% - 140px);}
  .service5-class-query ul.class-list li .time { width: 140px;}

  .service5-class-price { clear: both; width: 100%; position: relative;}
  .service5-class-price .class-scheme { width: 560px; padding: 40px 80px; margin: 0 auto; border: 3px #EF91A7 solid; box-sizing: border-box;}
  .service5-class-price img.service-5-flower { width: 340px; height: auto; position: absolute; top: -5px; left: calc(50% - 500px);}
  .service5-class-price img.service-5-stone { width: 80px; height: auto; position: absolute; bottom: -20px; right: calc(50% - 310px);}
  .service5-class-price .title { width: 100%; margin: -55px 0 0 0; text-align: center;}
  .service5-class-price .title span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-price .list { width: 100%; margin: 20px 0 0 0; color: #a60000; font-size: 2.6em; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .service5-class-price .list .column-1 { width: 200px; padding: 0 0 0 60px; box-sizing: border-box;}
  .service5-class-price .list .column-2 { width: calc(100% - 200px);}


  /************ section#rockbath ************/

  .rockbath-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .rockbath-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.rockbath-banner { width: 100%; height: auto;}
  img.rockbath-banner-text { width: 200px; height: auto; position: absolute; top: 2vw; left: 14vw;}
  
  img.rockbath-top-title { clear: both; width: 500px; height: auto; margin: 0 auto; display: block; position: relative; z-index: 4;}

  .rockbath-top-title-s { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center; position: relative; z-index: 4;}
  .rockbath-top-title-s span { padding: 8px 25px; color: #fff; font-size: 2.6em; line-height: 1em; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 12px;}

  .rockbath-top-text { clear: both; width: 58%; padding: 40px 0; margin: 0 auto; font-size: 1.2em; line-height: 1.6em; box-sizing: border-box; position: relative; z-index: 4;}

  img.rockbath-bg-lf { width: 200px; height: auto; position: absolute; top: 70vw; left: 0; z-index: 1;}
  img.rockbath-bg-rt { width: 300px; height: auto; position: absolute; top: 60vw; right: 0; z-index: 1;}

  section#rockbath-spa { clear: both; width: 100%; height: 450px; background-image: url("../images/rockbath_banner_spa.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 9; overflow: hidden;}

  .rockbath-spa-text { width: 480px; position: absolute; top: 50px; right: 10vw;}
  .rockbath-spa-text .title1 { width: 100%; margin: 0 0 10px 0; color: #B4B4B5; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .rockbath-spa-text .title2 { width: 100%; margin: 0 0 30px 0; text-align: center;}
  .rockbath-spa-text .title2 span { padding: 3px 10px; color: #fff; font-size: 2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-spa-text .list-text { width: 100%; color: #fff; font-size: 1.8em; line-height: 2.6em; text-align: center;}
  .rockbath-spa-text .list-text font.big { font-size: 2.2rem; font-weight: 600;}

  section#rockbath-trilogy { clear: both; width: 100%; padding: 40px 40px 180px 40px; box-sizing: border-box; background-color: #272929; position: relative;}

  .rockbath-trilogy-title { width: 100%;}
  .rockbath-trilogy-title .title1 { width: 100%; margin: 0 0 20px 0; color: #906225; font-size: 1.8em; font-family: "新細明體"; text-align: center;}
  .rockbath-trilogy-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-trilogy-title .title2 span { padding: 3px 10px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-trilogy-title .title3 { width: 100%; color: #fff; font-size: 1.2em; text-align: center;}

  .rockbath-trilogy-main { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-start; position: relative; z-index: 2;}
  .rockbath-trilogy-main .trilogy-infor { width: calc(100% / 3); padding: 0 20px; box-sizing: border-box;}
  .rockbath-trilogy-main .trilogy-infor .photo { width: 100%; margin: 0 0 10px 0;}
  .rockbath-trilogy-main .trilogy-infor .photo img { width: 100%; height: auto;}
  .rockbath-trilogy-main .trilogy-infor .infor { width: 100%;}
  .rockbath-trilogy-main .trilogy-infor .infor .title { width: 130px; padding: 5px 0; margin: 20px auto 30px auto; color: #fff; font-size: 1.4em; font-weight: 600; text-align: center; background-color: #54C1EF; border-radius: 18px;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-big { width: 100%; margin: 0 0 30px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-small { width: 100%; color: #fff; line-height: 1.8em;}

  img.rockbath-tri-bg-lf { width: 200px; height: auto; position: absolute; top: 10vw; left: 0; z-index: 1;}
  img.rockbath-tri-bg-rt { width: 180px; height: auto; position: absolute; top: 5vw; right: 0; z-index: 1;}

  section#rockbath-stone-bio { clear: both; width: 100%;}

  .rockbath-stone-pic { width: 100%; height: 24vw; background-color: #666698; display: block; position: relative;}
  .rockbath-stone-pic img.rockbath-stone { width: 90%; height: auto; display: block; position: absolute; top: -170px; left: 5%; z-index: 3;}

  section#rockbath-certification { clear: both; width: 100%; padding: 0 40px 40px 40px; box-sizing: border-box;}

  .rockbath-certifi-title { width: 100%; margin: -70px 0 0 0; position: relative; z-index: 4;}
  .rockbath-certifi-title .title1 { width: 100%; margin: 0 0 5px 0; color: #B4B4B5; font-size: 2.2em; font-family: "新粗明體"; text-align: center;}
  .rockbath-certifi-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-certifi-title .title2 span { padding: 3px 15px; color: #fff; font-size: 2.2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certifi-title .text { width: 100%; text-align: center; line-height: 1.6em;}
  .rockbath-certifi-title .text font.big { color: #666698; font-size: 1.4em; line-height: 2em;}

  .rockbath-certificates { clear: both; width: 100%; margin: 50px 0 0 0;}
  .rockbath-certificates .title { width: 100%; text-align: center;}
  .rockbath-certificates .title span { padding: 3px 15px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certificates img.certificate-pics { clear: both; width: 100%; height: auto; margin: 30px 0 0 0;}
  .rockbath-certificates img.certificate-pics-mo-1 { display: none;}
  .rockbath-certificates img.certificate-pics-mo-2 { display: none;}

  section#rockbath-guide { clear: both; width: 100%; padding: 0 40px 40px 40px; box-sizing: border-box;}

  .rockbath-guide-title { width: 100%; margin: 0 0 20px 0; position: relative;}
  .rockbath-guide-title img.rockbath-guide-banner { width: 100%; height: auto;}
  .rockbath-guide-title .title1 { width: 300px; color: #B4B4B5; font-size: 1.4em; font-family: "新細明體"; text-align: center; position: absolute; top: 20px; right: 240px;}
  .rockbath-guide-title .title2 { width: 300px; text-align: center; position: absolute; top: 50px; right: 240px;}
  .rockbath-guide-title .title2 span { padding: 3px 15px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}

  .rockbath-guide-list { clear: both; width: 100%; display: flex; justify-content: flex-start;}
  .rockbath-guide-list .list-box { width: calc(100% / 6); padding: 0 10px; box-sizing: border-box;}
  .rockbath-guide-list .list-box .photo { width: 100%; height: 12vw;}
  .rockbath-guide-list .list-box .photo img { width: 100%; height: auto;}
  .rockbath-guide-list .list-box .num { clear: both; width: 36px; height: 36px; margin: 15px auto; color: #fff; font-size: 1.2em; border-radius: 100%; background-color: #54C1EF; display: flex; justify-content: center; align-items: center;}
  .rockbath-guide-list .list-box .text { clear: both; width: 100%; padding: 5px 10px; font-weight: 600; line-height: 1.6em; text-align: center; border-top: 1px #EF91A7 solid; box-sizing: border-box;}


  /************ section#news ************/

  .news-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.news-banner { width: 100%; height: auto; display: block;}
  img.news-banner-text { width: 200px; height: auto; position: absolute; top: 2vw; right: 14vw;}

  section#news-content { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}

  .news-con-title-1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .news-con-title-2 { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}

  .news-date { clear: both; width: 100%; margin: 20px 0; text-align: right;}

  .news-content-text { clear: both; width: 100%; font-size: 1.2em; line-height: 1.8em;}
  .news-content-text a { color: #3E3A39; border-bottom: 1px #3E3A39 dashed; text-decoration: none;}
  .news-content-text img { max-width: 100%; height: auto;}


  /************ section#contact ************/

  .contact-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.contact-banner { width: 100%; height: auto; display: block;}
  img.contact-banner-text { width: 200px; height: auto; position: absolute; top: 3vw; right: 22vw;}

  section#contact-infor { clear: both; width: 100%; padding: 0 40px 60px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .contact-infor-table { width: calc(100% / 4 - 40px); margin: 0 20px;}
  .contact-infor-table .caption { width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; border-bottom: 2px #f2f1ed solid; box-sizing: border-box;}
  .contact-infor-table .caption span { padding: 15px 0; border-bottom: 2px #fd9830 solid;}
  .contact-infor-table .column { width: 100%; padding: 15px 0; margin: 0 0 30px 0; font-size: 0.9em; line-height: 2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .contact-infor-table .column .social-icon { width: 40px; margin: 0 5px 0 0; background-color: #eee; border-radius: 20px 20px 0 20px;}
  .contact-infor-table .column .social-icon a.icon { width: 100%; padding: 6px 0; color: #3E3A39; text-align: center; text-decoration: none; display: block;}
  .contact-infor-table .column .sitemap { width: 100%;}
  .contact-infor-table .column .sitemap a { color: #3E3A39; line-height: 3em; text-decoration: none;}
  .contact-infor-table .column .sitemap a:hover { color: #E98BA1}

  section#contact-map { clear: both; width: 100%; padding: 0 40px 100px 40px; box-sizing: border-box;}


  /************ section#booking ************/

  section#booking-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; overflow: hidden;}

  img.booking-top-banner { width: 110%; height: auto; margin: 0 0 0 -5%; display: block;}

  section#booking-video { clear: both; width: 100%; padding: 80px 40px; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top; box-sizing: border-box;}

  .booking-video-box { width: 70%; margin: 0 auto;}

  section#booking-course-list { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-stitle { width: 100%; padding: 15px 0; background-color: #E88AA0;}
  .booking-stitle img.stitle-1 { margin: 0 auto; display: block;}

  .booking-course { clear: both; width: 900px; height: 450px; margin: 60px auto;}
  .booking-course ul li .course-box { width: 900px; height: 400px; padding: 15px; background-color: #ECECE3; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .pic { width: 50%;}
  .booking-course ul li .course-box .pic img.course-pic { width: 100%; height: auto;}
  .booking-course ul li .course-box .infor { width: 50%; padding: 0 0 0 25px; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .title { width: 100%; margin: 0 0 10px 0; color: #54BCEA; font-size: 2em; font-weight: 600;}
  .booking-course ul li .course-box .infor .price-time { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .infor .price-time .price { width: 150px; padding: 10px; margin: 0 20px 0 0; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .price .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #E98BA1;}
  .booking-course ul li .course-box .infor .price-time .price .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .price-time .time { width: 150px; padding: 10px; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .time .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #54BCEA;}
  .booking-course ul li .course-box .infor .price-time .time .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .list-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-full .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-full .text { width: calc(100% - 30px); padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf { width: 50%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; float: left; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-helf .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf .text { width: calc(100% - 30px); padding: 0; margin: 0;}

  section#booking-experience { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .experience-content { width: 100%; padding: 60px 40px; box-sizing: border-box;}
  .experience-content .top-title-text { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .experience-content .top-title-text .top-title { width: 50%; padding: 0 0 0 20px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .experience-content .top-title-text .top-title font.big { color: #54BCEA; font-size: 1.6rem; font-weight: 600;}
  .experience-content .top-title-text .text-list { width: 50%; padding: 0 0 0 150px; font-size: 1.4em; font-weight: 600; line-height: 2.2em; box-sizing: border-box;}
  .experience-content .top-title-text .text-list font.icon { color: #54BCEA;}
  .experience-content .photo-list { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .experience-content .photo-list img { width: calc(50% - 20px); height: auto; margin: 0 10px 20px 10px;}

  .experience-content hr.booking-exp-line { clear: both; width: 100%; margin: 10px 0 30px 0; border-top: 1px #E88AA0 solid;}

  section#booking-oil-use { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-oil-use-pics { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}
  .booking-oil-use-pics img { width: 100%; height: auto; display: block;}

  section#booking-oil-element { clear: both; width: 100%; background-color: #F0F0F2;}

  .booking-stitle2 { width: 100%; padding: 15px 0;}
  .booking-stitle2 img.stitle-1 { margin: 0 auto; display: block;}

  .booking-oil-element-pic { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; position: relative; z-index: 4;}
  .booking-oil-element-pic img { width: 100%; height: auto; display: block;}

  .booking-oil-element-list { clear: both; width: 100%; padding: 0 40px 60px 40px; margin: -100px 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 5;}
  .booking-oil-element-list .column-helf { width: 50%; padding: 10px 80px; color: #455900; font-size: 1.6em; font-weight: 600; border-bottom: 2px #E88AA0 dashed; box-sizing: border-box;}
  .booking-oil-element-list .column-helf font.icon { color: #50D1DC; font-size: 2rem;}
  .booking-oil-element-list .column-helf font.big { font-size: 2rem; font-weight: 600;}

  section#booking-attention { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-attention-list { clear: both; width: 100%; padding: 60px 40px 40px 40px; box-sizing: border-box;}
  .booking-attention-list .list-box { width: 100%; margin: 0 0 20px 0; font-size: 1.4em; font-weight: 600; display: flex; justify-content: flex-start;}
  .booking-attention-list .list-box .icon { width: 30px; color: #50D1DC;}
  .booking-attention-list .list-box .list { width: calc(100% - 30px);}


  section#booking-store { clear: both; width: 100%; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-store-pic { width: 100%; padding: 40px 40px; display: flex; justify-content: flex-start; box-sizing: border-box;}
  .booking-store-pic img.store-pic { width: calc(100% / 3 - 20px); height: auto; margin: 0 10px;}

  section#booking-require-table { clear: both; width: 100%; padding: 40px 40px; box-sizing: border-box; display: flex; justify-content: flex-start;}

  .booking-table-title { width: 35%;}
  .booking-table-title .title { width: 100%; margin: 0 0 20px 0;}
  .booking-table-title .title img { width: 100%; height: auto;}
  .booking-table-title .title-mo { display: none;}
  .booking-table-title .text { width: 100%; font-size: 1.2em; font-weight: 600; line-height: 1.8em; text-align: center;}
  .booking-table-title .text font.pink-small { color: #E88AA0; font-size: 0.9rem;}

  .booking-form-table { width: 65%; padding: 0 30px; border-left: 2px #E88AA0 solid; box-sizing: border-box;}
  .booking-form-table input, .booking-form-table select { width: 100%; padding: 10px; margin: 0 0 20px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #E88AA0 solid; background-color: #fff; box-sizing: border-box;}
  .booking-form-table .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0;}
  .booking-form-table .submit-bt img { width: 160px; height: auto;}


  /************ section#404 ************/

  section#page-404 { clear: both; width: 100%; padding: 100px 40px; margin: 100px 0 0 0; text-align: center; box-sizing: border-box;}

  font.big-404 { color: #916225; font-size: 4em; font-weight: 600;}
  font.small-404 { font-size: 2em; font-weight: 600;}


  /************ footer (20251112更新) ************/

  footer { clear: both; width: 100%; background-color: #FCE7EC; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .footer-contain-mo { display: none;}

  .footer-contain { clear: both; width: 100%; padding: 60px calc(50% - 580px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .footer-contain .col-left { width: 55%;}
  .footer-contain .col-left .footer-logo { width: 100%;}
  .footer-contain .col-left .footer-logo img { width: 360px; height: auto;}
  .footer-contain .col-left ul.footer-nav { width: 100%; padding: 0; margin: 40px 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contain .col-left ul.footer-nav li { padding: 0 15px; margin: 10px 0; border-left: 1px #3A3A3A solid;}
  .footer-contain .col-left ul.footer-nav li:first-child { border-left: 0;}
  .footer-contain .col-left ul.footer-nav li a { color: #3A3A3A; font-size: 1rem; text-decoration: none;}
  .footer-contain .col-left ul.footer-nav li a:hover { color: #D52E5D;}
  .footer-contain .col-left .social-icons { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-contain .col-left .social-icons a { width: 50px; margin: 0 10px 0 0; display: block;}
  .footer-contain .col-left .social-icons a img { width: 100%; height: auto;}
  .footer-contain .col-right { width: 45%;}
  .footer-contain .col-right .office-title { width: 500px; padding: 0 0 10px 0; color: #3A3A3A; font-size: 1.6rem; font-weight: 500; border-bottom: 2px #D52E5D solid;}
  .footer-contain .col-right .info-box { width: 100%; margin: 10px 0 0 0; color: #3A3A3A; font-size: 1rem; line-height: 1.2em; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .footer-contain .col-right .info-box .icon { width: 28px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .icon img { width: 18px; height: auto;}
  .footer-contain .col-right .info-box .title { width: 80px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .info { width: calc(100% - 28px - 80px); padding: 0 0 10px 0;}

  .footer-copyright { clear: both; width: 100%; padding: 10px; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #8D6125;}


}

@media screen and (min-width: 767px) and (max-width: 1280px) {

  /************ aside ************/

  aside#pc { width: 50px; position: fixed; top: 300px; right: 35px; z-index: 9;}
  aside#pc .icon-line { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-tel { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-line img { width: 100%; height: auto;}
  aside#pc .icon-tel img { width: 100%; height: auto;}

    
  /************ header + nav ************/

  header#main-header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 0 40px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; justify-content: flex-start; align-items: center; z-index: 1000; box-sizing: border-box; transition: transform 0.3s ease-in-out;}
  #main-header.header-hidden { transform: translateY(-100%);}

  .header-logo { width: 200px;}
  .header-logo img { width: 100%; height: auto;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 200px); display: flex; justify-content: flex-end; align-items: center;}
  nav#mo .mo-nav-icon { width: 60px; font-size: 2rem; text-align: right; float: right; cursor: pointer;}
  nav#mo ul.header-nav { width: 100%; padding: 60px 100px; margin: 0; background-color: #fff; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 999;}
  nav#mo ul.header-nav .close-icon { width: 40px; color: #D52E5D; font-size: 2rem; text-align: center; position: absolute; top: 20px; left: 20px; z-index: 9; cursor: pointer;}
  nav#mo ul.header-nav li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.header-nav li a { width: 100%; padding: 15px; color: #8D6125; font-size: 1.4rem; text-decoration: none; display: block;}
  nav#mo ul.header-nav li a:hover { color: #D52E5D;}

  .header-icons { display: none;}

  .header-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-icons-mo img { width: 30px; height: auto; margin: 0 5px;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box-pc { clear: none; width: 100%; height: 28vw; overflow: hidden; position: relative; z-index: 8;}
  .banner-box-pc img.text { width: 180px; height: auto; position: absolute; top: 3vw; right: 23vw;}


  /** 20251112更新==(開始) **/
  /************ hp banner ************/

  .hp-banner-box { clear: both; width: 100%; position: relative; overflow: hidden;}
  .hp-banner-box .banner { width: 160%; height: auto; margin: 0 0 0 -25%; position: relative; z-index: 1;}

  .hp-banner-box .banner-content { width: 66vw; position: absolute; top: 20vw; left: 2vw; z-index: 2;}
  .hp-banner-box .banner-content .content-1 { width: 50vw; padding: 0 0 2vw 0; text-align: center;}
  .hp-banner-box .banner-content .content-1 .logo { width: 10vw; height: auto; margin: 0 auto 1.5vw auto;}
  .hp-banner-box .banner-content .content-1 .title-1 { width: 40vw; margin: 0 auto; color: #D52E5D; font-size: 4vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; background-image: url("../images/banner_title_1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative;}
  .hp-banner-box .banner-content .content-1 .title-2 { width: 100%; color: #D52E5D; font-size: 4vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .hp-banner-box .banner-content .content-2 { width: 100%; padding: 2vw; box-sizing: border-box; color: #8D6125; font-size: 2.4vw; border-radius: 50px; background-color: rgba(255,255,255,0.3);}


  /************ section #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 3vw 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}

  .hp-sec-1-text-con { display: none;}

  .hp-sec-1-col-lf { width: 70vw; padding: 0 5vw 0 0; box-sizing: border-box; border-radius: 0 12vw 12vw 0; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .pic-box { width: 25vw; height: 22.6vw; border-radius: 0 12vw 12vw 0; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-lf .pic-box img { width: auto; height: 100%;}
  .hp-sec-1-col-lf .text-con { width: calc(100% - 25vw); padding: 0 0 0 4vw; box-sizing: border-box;}
  .hp-sec-1-col-lf .text-con .text { width: 100%; font-size: 2vw; line-height: 3vw;}
  .hp-sec-1-col-lf .text-con .order-bt { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt { width: 16vw; padding: 0 0.5vw; margin: 0 1.5vw 0 0; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .text { width: calc(100% - 1.5vw); color: #fff; font-size: 2vw; text-align: center;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt .icon { width: 1.5vw; color: #FCE7EC; font-size: 2vw;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-1-col-lf .text-con .order-bt a.bt:hover .icon { color: #D52E5D;}

  .hp-sec-1-col-rt { width: 25vw; border-radius: 12vw 0 0 12vw; background-color: #EAEAEA; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-rt .pic-box { width: 100%; height: 22.6vw; border-radius: 12vw 0 0 12vw; border-right: 1px #D52E5D solid; overflow: hidden;}
  .hp-sec-1-col-rt .pic-box img { width: auto; height: 100%; margin: 0 0 0 -7vw;}


  /************ section #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; padding: 6vw 0 0 0; background-color: #FCE7EC;}

  .hp-sec-2-title { clear: both; width: 100%; padding: 0 0 4vw 0; color: #D52E5D; font-size: 3vw; font-weight: 600; text-align: center;}

  .hp-sec-2-serv-items { width: 100%; padding: 0 6vw 5vw 6vw; box-sizing: border-box; position: relative;}
  .hp-sec-2-serv-items div { position: relative; z-index: 1;}
  .hp-sec-2-serv-items img.hp-serv-items-prev { width: 40px; height: auto; position: absolute; top: 9vw; left: 4vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items img.hp-serv-items-next { width: 40px; height: auto; position: absolute; top: 9vw; right: 4vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items div .service-item { width: calc(100% / 4); padding: 0 1vw; box-sizing: border-box; position: relative; z-index: 1;}
  .hp-sec-2-serv-items div .service-item .photo-mo { display: none;}
  .hp-sec-2-serv-items div .service-item .photo { width: 100%; height: 260px; border-radius: 14px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-sec-2-serv-items div .service-item .photo img { width: auto; height: 100%;}
  .hp-sec-2-serv-items div .service-item .text { width: 100%; color: #000; font-size: 1.6vw;}
  .hp-sec-2-serv-items div .service-item .text .title { padding: 1vw 0 0.5vw 0; color: #000; font-size: 2.2vw; font-weight: 500;}


  .hp-sec-2-hito-plans { clear: both; width: 100%; padding: 40px; box-sizing: border-box; background-color: #fff;}
  .hp-sec-2-hito-plans .sub-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .sub-title .word-bx { width: 54px; height: 54px; margin: 0 5px; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1em; border-radius: 100%; background-color: #D52E5D; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list { width: 100%; padding: 40px; margin: 60px 0 0 0; box-sizing: border-box; border-radius: 44vw 44vw 10vw 10vw; background-color: #F2B8C1;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list { clear: both; width: 100%; margin: 40px 0 0 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon { width: 120px;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon img { width: 100%; height: auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text { width: calc(100% - 120px); padding: 0 0 0 20px; box-sizing: border-box;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.title { color: #000; font-size: 1.4rem; font-weight: 500; line-height: 2em;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.intro { color: #000; font-size: 1rem;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt { width: 180px; padding: 10px 0 0 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a { width: 100%; padding: 5px; box-sizing: border-box; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #D52E5D solid; border-radius: 20px; background-color: #D52E5D; display: block;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a:hover { color: #D52E5D; background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx { display: none;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo { width: 90%; margin: 0 auto;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo img { width: 100%; height: auto;}

  .hp-sec-2-hito-plans .more-serv-check-bt { width: 300px; margin: 5vw auto 0 auto;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt { width: 100%; padding: 0.5vw; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .text { width: calc(100% - 20px); color: #fff; font-size: 1.4rem; text-align: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .icon { width: 20px; color: #FCE7EC; font-size: 1.4rem;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .icon { color: #D52E5D;}


  /************ section #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-sec-3-bg { width: 140%; height: auto; margin: 0 0 0 -15%; position: relative; z-index: 1;}

  .hp-sec-3-content { width: 36vw; color: #3A3A3A; font-size: 1.8vw; line-height: 2.6vw; position: absolute; top: 8vw; right: 4vw; z-index: 2;}
  .hp-sec-3-content span.title { color: #3A3A3A; font-size: 3vw; font-weight: 500;}


  /************ section #hp-sec-4 ************/

  section#hp-sec-4 { clear: both; width: 100%; padding: 0 0 4vw 0; box-sizing: border-box; background-color: #fff; background-image: url("../images/hp_sec_4_bg_illu.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: right bottom;}

  .hp-sec-4-title { clear: both; width: 100%; padding: 4vw 0 0 0; color: #D52E5D; font-size: 3vw; font-weight: 600; text-align: center;}

  .hp-sec-4-choose-list { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .hp-sec-4-choose-list .choose-box { width: 30vw; margin: 0 1vw;}
  .hp-sec-4-choose-list .choose-box .pic-1 { width: 30vw; height: 30vw; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-2 { width: 30vw; height: 30vw; margin: 6vw 0 0 0; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-3 { width: 30vw; height: 30vw; border-radius: 100%; border: 8px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-1 img, 
  .hp-sec-4-choose-list .choose-box .pic-2 img, 
  .hp-sec-4-choose-list .choose-box .pic-3 img { width: auto; height: 100%;}
  .hp-sec-4-choose-list .choose-box .text { clear: both; width: 90%; margin: 2vw auto 0 auto; color: #707070; font-size: 1.4vw;}
  .hp-sec-4-choose-list .choose-box .text span.title { color: #3A3A3A; font-size: 2vw; font-weight: 500;}
  /** 20251112更新==(結束) **/


  /************ section#index ************/

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 0; margin: 100px 0 0 0; box-sizing: border-box;}

  .index-title-1 { width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .index-title-2 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.6em; font-weight: 600; text-align: center; box-sizing: border-box;}
  .img-index-1 { width: 100%; height: auto; margin: 50px 0 20px 0; overflow: hidden;}
  .img-index-1 img.img-index-1 { width: 1200px; height: auto; margin: 0 calc(50% - 600px); display: block;}
  .img-index-1 img.img-index-1-mo { display: none;}
  .index-title-3 { width: 100%; padding: 0 calc(50% - 680px); font-size: 1.2em; text-align: center; box-sizing: border-box;}
  
  .more-bt { width: 160px; margin: 40px auto 0 auto;}
  .more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.4em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-2 { clear: both; width: 100%; padding: 85px 0 55px 0; background-image: url("../images/index_2_bg.png"); background-repeat: no-repeat; background-size: 160%; background-position: center center; background-color: #FBE5EA;}

  .index-news-list { clear: both; width: 730px; padding: 20px 0; margin: 0 auto; font-size: 1.2em; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-news-list .date { width: 120px; color: #54C2F0;}
  .index-news-list .title { width: calc(100% - 200px);}
  .index-news-list .title a { color: #3E3A39; text-decoration: none;}
  .index-news-list .more { width: 100px; margin: 0 0 0 10px;}
  .index-news-list .more a { width: 70px; padding: 2px 0; color: #fff; font-size: 0.8em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-3 { clear: both; width: 100%; position: relative; overflow: hidden;}
  
  img.img-index-3-bg { width: 120%; height: auto; display: block; position: relative; z-index: 1;}
  img.img-index-3-text { width: 200px; height: auto; position: absolute; bottom: 3vw; left: 22vw; z-index: 1;}

  section#index-4 { clear: both; width: 100%; padding: 25px 0; overflow: hidden; position: relative; z-index: 2;}

  .index-serv-intro { clear: both; width: 100%; margin: 30px 0 0 0;}
  .index-serv-intro .serv-intro { width: 400px; margin: 0 auto 20px auto; position: relative; cursor: pointer;}
  .index-serv-intro .serv-intro .mask-cr { width: 370px; height: 370px; border-radius: 100%; background-color: rgba(239,145,167,0.5); position: absolute; top: 15px; left: 15px; display: none; justify-content: center; align-items: center;}
  .index-serv-intro .serv-intro .mask-cr img.plus { width: 40px; height: auto;}
  .index-serv-intro .serv-intro a { width: 100%; height: 100%; color: #3E3A39; text-decoration: none; display: block;}
  .index-serv-intro .serv-intro .mask img.plus { width: 24px; height: auto;}
  .index-serv-intro .serv-intro .photo { width: 400px; height: 400px; display: block; overflow: hidden;}
  .index-serv-intro .serv-intro .photo img { width: 100%; height: auto;}
  .index-serv-intro .serv-intro .arrow { width: 100%; margin: 7px 0; text-align: center;}
  .index-serv-intro .serv-intro .arrow img { width: 33px; height: auto; border: 1px #EF91A7 solid; border-radius: 100%; box-sizing: border-box;}
  .index-serv-intro .serv-intro a .text { width: 100%; margin: 5px 0; line-height: 1.8em; text-align: center;}
  .index-serv-intro .serv-intro a .text font.big { color: #604C3F; font-size: 1.4em; font-weight: 600;}
  .index-serv-intro .serv-intro a .text font.small { color: #3E3A39; font-size: 1.1em;}

  img.img-index4-bg { width: 420px; height: auto; position: absolute; bottom: 260px; right: -40px;}


  /************ section#about ************/

  .about-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .about-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; overflow: hidden; position: relative; z-index: 8;}
  img.about-banner { width: 110%; height: auto; margin: 0 0 0 -5%;}
  img.about-banner-text { width: 180px; height: auto; position: absolute; top: 2vw; right: 20vw;}

  section#about-2 { clear: both; width: 100%; background-color: #F9D3DC;}

  .about-2-pic { width: 100%;}
  .about-2-pic img { width: 100%; height: auto; display: block;}
  .about-2-text { width: 100%; padding: 40px 80px; box-sizing: border-box;}

  .about-2-t1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600;}
  .about-2-t2 { width: 100%; font-size: 1.6em; font-weight: 600;}
  .about-2-t3 { width: 100%; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em;}

  section#about-3 { clear: both; width: 100%; padding: 70px 0;}

  .about-3-text { width: 100%; padding: 0 30px 30px 30px; box-sizing: border-box;}
  .about-3-pic { width: 100%;}
  .about-3-pic img { width: 100%; height: auto; display: block;}


  /************ section#service ************/

  .service-title-3 { clear: both; width: 700px; margin: 10px auto; font-size: 1.2em; text-align: center;}

  .service-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8; overflow: hidden;}
  img.service-banner { width: 110%; height: auto; margin: 0 0 0 -5%; display: block;}
  img.service-banner-text { width: 180px; height: auto; position: absolute; top: 1.5vw; right: 15vw;}

  section#service-1 { clear: both; width: 100%; padding: 0 0 110px 0; position: relative; overflow: hidden;}

  .servict-infor-list { clear: both; width: 100%; padding: 0 20px; margin: 0 0 55px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 2;}
  .servict-infor-list .serv-pic, .servict-infor-list .serv-pic-p { width: 40%;}
  .servict-infor-list .serv-pic img, .servict-infor-list .serv-pic-p img { width: 100%; height: auto;}
  .servict-infor-list .serv-pic-m { display: none;}
  .servict-infor-list .serv-infor { width: 60%; padding: 0 20px; background-color: rgba(255, 255, 255, 0.4); box-sizing: border-box;}
  .servict-infor-list .serv-infor span.title { padding: 5px 10px; margin: 0 0 10px 0; color: #fff; font-size: 1.8em; font-weight: 600; background-color: #EF91A7; border-radius: 10px;}
  .servict-infor-list .serv-infor .text { clear: both; width: 100%; margin: 20px 0; font-size: 1.4em; font-weight: 600; line-height: 1.8em;}
  .servict-infor-list .serv-infor .serv-bt { clear: both; width: 100px;}
  .servict-infor-list .serv-infor .serv-bt a { width: 100%; padding: 5px 0; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  img.serv-1-lf-bg { width: 40vw; height: auto; position: absolute; top: 0; left: -2vw; z-index: 1;}
  img.serv-1-rt-bg { width: 60vw; height: auto; position: absolute; top: 0; right: 0; z-index: 1;}

  font.red-s { color: #ff0000; font-size: 0.8em;}


  /************ section#service_1 ************/

  section#service-1-title { clear: both; width: 100%; padding: 70px 0 50px 0; margin: 100px 0 0 0; background-color: #F7F8F8; position: relative;}

  .serv-title-1 { width: 100%; padding: 0 20%; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-title-2 { width: 100%; padding: 0 20%; color: #54C2F0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}
  .serv-title-3 { width: 700px; margin: 20px auto; font-size: 1.2em; text-align: center; position: relative; z-index: 2;}

  .serv-1-price-time { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start}
  .serv-1-price-time .price-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .price-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #EF91A7;}
  .serv-1-price-time .price-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}
  .serv-1-price-time .time-box { width: 180px; padding: 10px 15px; margin: 0 25px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .time-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #54C2F0;}
  .serv-1-price-time .time-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}

  img.serv-1-flower { width: 16vw; height: auto; position: absolute; top: 8vw; left: 4vw; z-index: 1;}
  img.serv-1-arrow { width: 32px; height: auto; position: absolute; bottom: -16px; left: calc(50% - 16px); border: 1px #EF91A7 solid; border-radius: 100%;}

  section#service-video { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
  section#service-video .video-box { width: 90%; margin: 0 auto;}

  section#service-detail { clear: both; width: 100%; padding: 55px 20px; background-image: url("../images/service_1_detail_bg.jpg"); background-repeat: no-repeat; background-size: 200%; background-position: top left; box-sizing: border-box;}

  .serv-detail-title-1 { width: 100%; padding: 0 20px; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-detail-title-2 { width: 100%; padding: 0 20px; margin: 0 0 60px 0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}

  .service-detail-infor { clear: both; width: 100%;}
  .service-detail-infor .pic-p { display: none;}
  .service-detail-infor .pic, .service-detail-infor .pic-m { width: 100%; padding: 0 50px; box-sizing: border-box;}
  .service-detail-infor .pic img, .service-detail-infor .pic-m img { width: 100%; height: auto; display: block;}
  .service-detail-infor .infor { width: 100%; padding: 20px 50px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .service-detail-infor .infor .icon { width: 100px; margin: 0 10px 0 0;}
  .service-detail-infor .infor .icon img { width: 100%; height: auto;}
  .service-detail-infor .infor .text { width: calc(100% - 110px);}
  .service-detail-infor .infor .text .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600;}
  .service-detail-infor .infor .text .title2 { width: 100%; margin: 0 0 10px 0;}
  .service-detail-infor .infor .text .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service-detail-infor .infor .text .infor-text { width: 100%; font-size: 1.1em; font-weight: 600; line-height: 1.8em; letter-spacing: 0.1em;}

  section#service-infor-query { clear: both; width: 100%; padding: 40px 0;}

  img.service-beauty-banner { width: 110%; height: auto; margin: 0 0 60px -5%;}

  .service5-class-query { clear: both; width: 100%; padding: 0 20px; margin: 0 0 60px 0; box-sizing: border-box;}
  .service5-class-query .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .service5-class-query .title2 { width: 100%; margin: 0 0 10px 0; text-align: center;}
  .service5-class-query .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-query ul.class-list { clear: both; width: 100%; padding: 0; margin: 40px auto; list-style: none; display: block;}
  .service5-class-query ul.class-list li { width: 100%; padding: 15px 20px; margin: 0; font-size: 1.6em; border-bottom: 1px #EF91A7 solid; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .service5-class-query ul.class-list li .class { width: calc(100% - 140px);}
  .service5-class-query ul.class-list li .time { width: 140px;}

  .service5-class-price { clear: both; width: 100%; position: relative;}
  .service5-class-price .class-scheme { width: 460px; padding: 30px 50px; margin: 0 auto; border: 3px #EF91A7 solid; box-sizing: border-box;}
  .service5-class-price img.service-5-flower { width: 280px; height: auto; position: absolute; top: -5px; left: calc(50% - 420px);}
  .service5-class-price img.service-5-stone { width: 70px; height: auto; position: absolute; bottom: -15px; right: calc(50% - 260px);}
  .service5-class-price .title { width: 100%; margin: -55px 0 0 0; text-align: center;}
  .service5-class-price .title span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-price .list { width: 100%; margin: 20px 0 0 0; color: #a60000; font-size: 2em; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .service5-class-price .list .column-1 { width: 170px; padding: 0 0 0 60px; box-sizing: border-box;}
  .service5-class-price .list .column-2 { width: calc(100% - 170px);}


  /************ section#rockbath ************/

  .rockbath-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .rockbath-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.rockbath-banner { width: 110%; height: auto; margin: 0 0 0 -5%;}
  img.rockbath-banner-text { width: 180px; height: auto; position: absolute; top: 2vw; left: 10vw;}
  
  img.rockbath-top-title { clear: both; width: 500px; height: auto; margin: 0 auto; display: block; position: relative; z-index: 4;}

  .rockbath-top-title-s { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center; position: relative; z-index: 4;}
  .rockbath-top-title-s span { padding: 8px 25px; color: #fff; font-size: 2.6em; line-height: 1em; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 12px;}

  .rockbath-top-text { clear: both; width: 70%; padding: 40px 0; margin: 0 auto; font-size: 1.2em; line-height: 1.6em; box-sizing: border-box; position: relative; z-index: 4;}

  img.rockbath-bg-lf { width: 200px; height: auto; position: absolute; top: 70vw; left: 0; z-index: 1;}
  img.rockbath-bg-rt { width: 300px; height: auto; position: absolute; top: 60vw; right: 0; z-index: 1;}

  section#rockbath-spa { clear: both; width: 100%; height: 450px; background-image: url("../images/rockbath_banner_spa.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 9; overflow: hidden;}

  .rockbath-spa-text { width: 480px; position: absolute; top: 50px; right: 5vw;}
  .rockbath-spa-text .title1 { width: 100%; margin: 0 0 10px 0; color: #B4B4B5; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .rockbath-spa-text .title2 { width: 100%; margin: 0 0 30px 0; text-align: center;}
  .rockbath-spa-text .title2 span { padding: 3px 10px; color: #fff; font-size: 2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-spa-text .list-text { width: 100%; color: #fff; font-size: 1.8em; line-height: 2.6em; text-align: center;}
  .rockbath-spa-text .list-text font.big { font-size: 2.2rem; font-weight: 600;}

  section#rockbath-trilogy { clear: both; width: 100%; padding: 40px 20px 180px 20px; box-sizing: border-box; background-color: #272929; position: relative;}

  .rockbath-trilogy-title { width: 100%;}
  .rockbath-trilogy-title .title1 { width: 100%; margin: 0 0 20px 0; color: #906225; font-size: 1.8em; font-family: "新細明體"; text-align: center;}
  .rockbath-trilogy-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-trilogy-title .title2 span { padding: 3px 10px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-trilogy-title .title3 { width: 100%; color: #fff; font-size: 1.2em; text-align: center;}

  .rockbath-trilogy-main { clear: both; width: 100%; margin: 20px 0 0 0; position: relative; z-index: 2;}
  .rockbath-trilogy-main .trilogy-infor { width: 60%; padding: 0 20px; margin: 0 auto 30px auto; box-sizing: border-box;}
  .rockbath-trilogy-main .trilogy-infor .photo { width: 100%; margin: 0 0 10px 0;}
  .rockbath-trilogy-main .trilogy-infor .photo img { width: 100%; height: auto;}
  .rockbath-trilogy-main .trilogy-infor .infor { width: 100%;}
  .rockbath-trilogy-main .trilogy-infor .infor .title { width: 130px; padding: 5px 0; margin: 20px auto 30px auto; color: #fff; font-size: 1.4em; font-weight: 600; text-align: center; background-color: #54C1EF; border-radius: 18px;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-big { width: 100%; margin: 0 0 30px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-small { width: 100%; color: #fff; line-height: 1.8em;}

  img.rockbath-tri-bg-lf { width: 200px; height: auto; position: absolute; top: 10vw; left: 0; z-index: 1;}
  img.rockbath-tri-bg-rt { width: 180px; height: auto; position: absolute; top: 5vw; right: 0; z-index: 1;}

  section#rockbath-stone-bio { clear: both; width: 100%;}

  .rockbath-stone-pic { width: 100%; height: 24vw; background-color: #666698; display: block; position: relative;}
  .rockbath-stone-pic img.rockbath-stone { width: 96%; height: auto; display: block; position: absolute; top: -20vw; left: 2%; z-index: 3;}

  section#rockbath-certification { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .rockbath-certifi-title { width: 100%; margin: -70px 0 0 0; position: relative; z-index: 4;}
  .rockbath-certifi-title .title1 { width: 100%; margin: 0 0 5px 0; color: #B4B4B5; font-size: 2.2em; font-family: "新粗明體"; text-align: center;}
  .rockbath-certifi-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-certifi-title .title2 span { padding: 3px 15px; color: #fff; font-size: 2.2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certifi-title .text { width: 100%; text-align: center; line-height: 1.6em;}
  .rockbath-certifi-title .text font.big { color: #666698; font-size: 1.4em; line-height: 2em;}

  .rockbath-certificates { clear: both; width: 100%; margin: 50px 0 0 0;}
  .rockbath-certificates .title { width: 100%; text-align: center;}
  .rockbath-certificates .title span { padding: 3px 15px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certificates img.certificate-pics { display: none;}
  .rockbath-certificates img.certificate-pics-mo-1 { clear: both; width: 90%; height: auto; margin: 30px auto 0 auto; display: block;}
  .rockbath-certificates img.certificate-pics-mo-2 { clear: both; width: 90%; height: auto; margin: 10px auto 0 auto; display: block;}

  section#rockbath-guide { clear: both; width: 100%; padding: 0 0 40px 0;}

  .rockbath-guide-title { width: 100%; margin: 0 0 20px 0; position: relative; overflow: hidden;}
  .rockbath-guide-title img.rockbath-guide-banner { width: 110%; height: auto; margin: 0 0 0 -5%;}
  .rockbath-guide-title .title1 { width: 300px; color: #B4B4B5; font-size: 1.4em; font-family: "新細明體"; text-align: center; position: absolute; top: 20px; right: 10vw;}
  .rockbath-guide-title .title2 { width: 300px; text-align: center; position: absolute; top: 50px; right: 10vw;}
  .rockbath-guide-title .title2 span { padding: 3px 15px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}

  .rockbath-guide-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .rockbath-guide-list .list-box { width: calc(100% / 3); padding: 0 20px; margin: 0 0 20px 0; box-sizing: border-box;}
  .rockbath-guide-list .list-box .photo { width: 100%; height: 25vw;}
  .rockbath-guide-list .list-box .photo img { width: 100%; height: auto;}
  .rockbath-guide-list .list-box .num { clear: both; width: 36px; height: 36px; margin: 15px auto; color: #fff; font-size: 1.2em; border-radius: 100%; background-color: #54C1EF; display: flex; justify-content: center; align-items: center;}
  .rockbath-guide-list .list-box .text { clear: both; width: 100%; padding: 5px 10px; font-weight: 600; line-height: 1.6em; text-align: center; border-top: 1px #EF91A7 solid; box-sizing: border-box;}


  /************ section#news ************/

  .news-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.news-banner { width: 110%; height: auto; margin: 0 0 0 -5%; display: block;}
  img.news-banner-text { width: 180px; height: auto; position: absolute; top: 2vw; right: 6vw;}

  section#news-content { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}

  .news-con-title-1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .news-con-title-2 { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}

  .news-date { clear: both; width: 100%; margin: 20px 0; text-align: right;}

  .news-content-text { clear: both; width: 100%; font-size: 1.2em; line-height: 1.8em;}
  .news-content-text a { color: #3E3A39; border-bottom: 1px #3E3A39 dashed; text-decoration: none;}
  .news-content-text img { max-width: 100%; height: auto;}


  /************ section#contact ************/

  .contact-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.contact-banner { width: 110%; height: auto; margin: 0 0 0 -5%; display: block;}
  img.contact-banner-text { width: 180px; height: auto; position: absolute; top: 3vw; right: 20vw;}

  section#contact-infor { clear: both; width: 100%; padding: 0 40px 60px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .contact-infor-table { width: calc(100% / 2 - 40px); margin: 0 20px 20px 20px;}
  .contact-infor-table .caption { width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; border-bottom: 2px #f2f1ed solid; box-sizing: border-box;}
  .contact-infor-table .caption span { padding: 15px 0; border-bottom: 2px #fd9830 solid;}
  .contact-infor-table .column { width: 100%; padding: 15px 0; margin: 0 0 30px 0; font-size: 0.9em; line-height: 2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .contact-infor-table .column .social-icon { width: 40px; margin: 0 5px 0 0; background-color: #eee; border-radius: 20px 20px 0 20px;}
  .contact-infor-table .column .social-icon a.icon { width: 100%; padding: 6px 0; color: #3E3A39; text-align: center; text-decoration: none; display: block;}
  .contact-infor-table .column .sitemap { width: 100%;}
  .contact-infor-table .column .sitemap a { color: #3E3A39; line-height: 3em; text-decoration: none;}
  .contact-infor-table .column .sitemap a:hover { color: #E98BA1}

  section#contact-map { clear: both; width: 100%; padding: 0 40px 100px 40px; box-sizing: border-box;}


  /************ section#booking ************/

  section#booking-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; overflow: hidden;}

  img.booking-top-banner { width: 160%; height: auto; margin: 0 0 0 -30%; display: block;}

  section#booking-video { clear: both; width: 100%; padding: 80px 20px; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top; box-sizing: border-box;}

  .booking-video-box { width: 80%; margin: 0 auto;}

  section#booking-course-list { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-stitle { width: 100%; padding: 15px 0; background-color: #E88AA0;}
  .booking-stitle img.stitle-1 { max-width: 100%; height: auto; margin: 0 auto; display: block;}

  .booking-course { clear: both; width: 700px; height: 1000px; margin: 60px auto;}
  .booking-course ul li .course-box { width: 700px; height: 1000px; padding: 30px; background-color: #ECECE3; box-sizing: border-box;}
  .booking-course ul li .course-box .pic { width: 100%; margin: 0 0 30px 0;}
  .booking-course ul li .course-box .pic img.course-pic { width: 100%; height: auto;}
  .booking-course ul li .course-box .infor { width: 100%; padding: 0 0 0 25px; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .title { width: 100%; margin: 0 0 10px 0; color: #54BCEA; font-size: 2em; font-weight: 600;}
  .booking-course ul li .course-box .infor .price-time { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .infor .price-time .price { width: 150px; padding: 10px; margin: 0 20px 0 0; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .price .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #E98BA1;}
  .booking-course ul li .course-box .infor .price-time .price .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .price-time .time { width: 150px; padding: 10px; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .time .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #54BCEA;}
  .booking-course ul li .course-box .infor .price-time .time .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .list-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-full .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-full .text { width: calc(100% - 30px); padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf { width: 50%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; float: left; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-helf .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf .text { width: calc(100% - 30px); padding: 0; margin: 0;}

  section#booking-experience { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .experience-content { width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .experience-content .top-title-text { width: 100%; margin: 0 0 30px 0;}
  .experience-content .top-title-text .top-title { width: 100%; padding: 0 0 0 20px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .experience-content .top-title-text .top-title font.big { color: #54BCEA; font-size: 1.6rem; font-weight: 600;}
  .experience-content .top-title-text .text-list { width: 100%; padding: 0 0 0 20px; font-size: 1.4em; font-weight: 600; line-height: 2.2em; box-sizing: border-box;}
  .experience-content .top-title-text .text-list font.icon { color: #54BCEA;}
  .experience-content .photo-list { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .experience-content .photo-list img { width: calc(50% - 20px); height: auto; margin: 0 10px 20px 10px;}

  .experience-content hr.booking-exp-line { clear: both; width: 100%; margin: 10px 0 30px 0; border-top: 1px #E88AA0 solid;}

  section#booking-oil-use { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-oil-use-pics { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .booking-oil-use-pics img { width: 100%; height: auto; display: block;}

  section#booking-oil-element { clear: both; width: 100%; background-color: #F0F0F2;}

  .booking-stitle2 { width: 100%; padding: 15px 0;}
  .booking-stitle2 img.stitle-1 { max-width: 100%; height: auto; margin: 0 auto; display: block;}

  .booking-oil-element-pic { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; position: relative; z-index: 4;}
  .booking-oil-element-pic img { width: 100%; height: auto; display: block;}

  .booking-oil-element-list { clear: both; width: 100%; padding: 0 20px 60px 20px; margin: -100px 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 5;}
  .booking-oil-element-list .column-helf { width: 50%; padding: 10px 20px; color: #455900; font-size: 1.6em; font-weight: 600; border-bottom: 2px #E88AA0 dashed; box-sizing: border-box;}
  .booking-oil-element-list .column-helf font.icon { color: #50D1DC; font-size: 2rem;}
  .booking-oil-element-list .column-helf font.big { font-size: 2rem; font-weight: 600;}

  section#booking-attention { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-attention-list { clear: both; width: 100%; padding: 60px 40px 40px 40px; box-sizing: border-box;}
  .booking-attention-list .list-box { width: 100%; margin: 0 0 20px 0; font-size: 1.4em; font-weight: 600; display: flex; justify-content: flex-start;}
  .booking-attention-list .list-box .icon { width: 30px; color: #50D1DC;}
  .booking-attention-list .list-box .list { width: calc(100% - 30px);}


  section#booking-store { clear: both; width: 100%; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-store-pic { width: 100%; padding: 40px 20px; display: flex; justify-content: flex-start; box-sizing: border-box;}
  .booking-store-pic img.store-pic { width: calc(100% / 3 - 20px); height: auto; margin: 0 10px;}

  section#booking-require-table { clear: both; width: 100%; padding: 40px 40px; box-sizing: border-box;}

  .booking-table-title { width: 100%; margin: 0 0 30px 0;}
  .booking-table-title .title { display: none;}
  .booking-table-title .title-mo { width: 100%; margin: 0 0 20px 0;}
  .booking-table-title .title-mo img { width: 100%; height: auto;}
  .booking-table-title .text { width: 100%; font-size: 1.2em; font-weight: 600; line-height: 1.8em; text-align: center;}
  .booking-table-title .text font.pink-small { color: #E88AA0; font-size: 0.9rem;}

  .booking-form-table { width: 100%; padding: 30px 30px 0 30px; border-top: 2px #E88AA0 solid; box-sizing: border-box;}
  .booking-form-table input, .booking-form-table select { width: 100%; padding: 10px; margin: 0 0 20px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #E88AA0 solid; background-color: #fff; box-sizing: border-box;}
  .booking-form-table .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0;}
  .booking-form-table .submit-bt img { width: 160px; height: auto; margin: 0 auto; display: block;}


  /************ section#404 ************/

  section#page-404 { clear: both; width: 100%; padding: 100px 20px; margin: 100px 0 0 0; text-align: center; box-sizing: border-box;}

  font.big-404 { color: #916225; font-size: 4em; font-weight: 600;}
  font.small-404 { font-size: 2em; font-weight: 600;}


  /************ footer (20251112更新) ************/

  footer { clear: both; width: 100%; background-color: #FCE7EC; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .footer-contain-mo { display: none;}

  .footer-contain { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}
  .footer-contain .col-left { width: 100%;}
  .footer-contain .col-left .footer-logo { width: 100%; text-align: center;}
  .footer-contain .col-left .footer-logo img { width: 360px; height: auto; margin: 0 auto;}
  .footer-contain .col-left ul.footer-nav { width: 100%; padding: 0; margin: 40px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .footer-contain .col-left ul.footer-nav li { padding: 0 20px; margin: 0; border-left: 1px #3A3A3A solid;}
  .footer-contain .col-left ul.footer-nav li:first-child { border-left: 0;}
  .footer-contain .col-left ul.footer-nav li a { color: #3A3A3A; font-size: 1rem; text-decoration: none;}
  .footer-contain .col-left ul.footer-nav li a:hover { color: #D52E5D;}
  .footer-contain .col-left .social-icons { width: 100%; display: flex; justify-content: center; align-items: center;}
  .footer-contain .col-left .social-icons a { width: 50px; margin: 0 10px 0 0; display: block;}
  .footer-contain .col-left .social-icons a img { width: 100%; height: auto;}
  .footer-contain .col-right { width: 100%; margin: 40px 0 0 0;}
  .footer-contain .col-right .office-title { width: 500px; padding: 0 0 10px 0; margin: 0 auto; color: #3A3A3A; font-size: 1.6rem; font-weight: 500; text-align: center; border-bottom: 2px #D52E5D solid;}
  .footer-contain .col-right .info-box { width: 500px; margin: 20px auto 0 auto; color: #3A3A3A; font-size: 1rem; line-height: 1.2em; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-contain .col-right .info-box .icon { width: 28px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .icon img { width: 18px; height: auto;}
  .footer-contain .col-right .info-box .title { width: 80px; padding: 0 0 10px 0;}
  .footer-contain .col-right .info-box .info { width: calc(100% - 28px - 80px); padding: 0 0 10px 0;}

  .footer-copyright { clear: both; width: 100%; padding: 10px; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #8D6125;}


}

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

  /************ aside ************/

  aside#pc { width: 50px; position: fixed; top: 300px; right: 0; z-index: 9;}
  aside#pc .icon-line { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-tel { width: 100%; margin: 0 0 5px 0;}
  aside#pc .icon-line img { width: 100%; height: auto;}
  aside#pc .icon-tel img { width: 100%; height: auto;}


  /************ header + nav ************/

  header#main-header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; padding: 0 20px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); display: flex; justify-content: flex-start; align-items: center; z-index: 1000; box-sizing: border-box; transition: transform 0.3s ease-in-out;}
  #main-header.header-hidden { transform: translateY(-100%);}

  .header-logo { width: 160px;}
  .header-logo img { width: 100%; height: auto;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 160px); display: flex; justify-content: flex-end; align-items: center;}
  nav#mo .mo-nav-icon { width: 40px; font-size: 2rem; text-align: right; float: right; cursor: pointer;}
  nav#mo ul.header-nav { width: 100%; padding: 60px 100px; margin: 0; background-color: #fff; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 999;}
  nav#mo ul.header-nav .close-icon { width: 40px; color: #D52E5D; font-size: 2rem; text-align: center; position: absolute; top: 20px; left: 20px; z-index: 9; cursor: pointer; display: none;}
  nav#mo ul.header-nav li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.header-nav li a { width: 100%; padding: 15px; color: #8D6125; font-size: 1.4rem; text-decoration: none; display: block;}
  nav#mo ul.header-nav li a:hover { color: #D52E5D;}

  .header-icons { display: none;}

  .header-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-icons-mo img { width: 30px; height: auto; margin: 0 5px;}


  /************ banner ************/

  .banner-box-pc { display: none;}

  .banner-box-mo { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 8;}
  .banner-box-mo img.text { width: 140px; height: auto; position: absolute; top: 3vw; right: 15vw;}


  /** 20251112更新==(開始) **/
  /************ hp banner ************/

  .hp-banner-box { clear: both; width: 100%; padding: 90vw 20px 10vw 20px; box-sizing: border-box; background-image: url("../images/hp_banner_1_mo.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; &.supports { @supports (background-image: url("../images/hp_banner_1_mo.webp")) { background-image: url("../images/hp_banner_1_mo.webp");}}}
  .hp-banner-box picture { display: none;}
  .hp-banner-box .banner { display: none;}

  .hp-banner-box .banner-content { width: 100%;}
  .hp-banner-box .banner-content .content-1 { width: 100%; padding: 0 0 2vw 0; text-align: center;}
  .hp-banner-box .banner-content .content-1 .logo { width: 15vw; height: auto; margin: 0 auto 4vw auto;}
  .hp-banner-box .banner-content .content-1 .title-1 { width: 60vw; margin: 0 auto; color: #D52E5D; font-size: 6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; background-image: url("../images/banner_title_1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative;}
  .hp-banner-box .banner-content .content-1 .title-2 { width: 100%; color: #D52E5D; font-size: 6vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .hp-banner-box .banner-content .content-2 { width: 100%; padding: 4vw; box-sizing: border-box; color: #8D6125; font-size: 4vw; text-align: center; border-radius: 50px; background-color: rgba(255,255,255,0.4);}


  /************ section #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 60px 0;}

  .hp-sec-1-col-lf { width: 100%; margin: 40px 0 0 0; padding: 0 10px 0 0; box-sizing: border-box; border-radius: 0 200px 200px 0; border-right: 1px #D52E5D solid; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-col-lf .pic-box { width: 100%; height: 330px; border-radius: 0 200px 200px 0; background-image: url("../images/hp_sec_1_pic_1.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; display: block;}
  .hp-sec-1-col-lf .pic-box img { display: none;}
  .hp-sec-1-col-lf .text-con { display: none;}

  .hp-sec-1-text-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 100px; background-color: #EAEAEA;}
  .hp-sec-1-text-con .text { width: 100%; font-size: 1.1rem; line-height: 1.6em;}
  .hp-sec-1-text-con .order-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .hp-sec-1-text-con .order-bt a.bt { width: 40%; padding: 0 5px; margin: 0 10px; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-1-text-con .order-bt a.bt .text { width: calc(100% - 20px); color: #fff; font-size: 1rem; text-align: center;}
  .hp-sec-1-text-con .order-bt a.bt .icon { width: 20px; color: #FCE7EC; font-size: 1rem;}
  .hp-sec-1-text-con .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-1-text-con .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-1-text-con .order-bt a.bt:hover .icon { color: #D52E5D;}

  .hp-sec-1-col-rt { width: 100%; margin: 40px 0 60px 0; padding: 0 0 0 10px; box-sizing: border-box; border-radius: 200px 0 0 200px; border-left: 1px #D52E5D solid; display: flex; justify-content: flex-start; align-items: center; float: right;}
  .hp-sec-1-col-rt .pic-box { width: 100%; height: 330px; border-radius: 200px 0 0 200px;  background-image: url("../images/hp_sec_1_pic_2.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: block;}
  .hp-sec-1-col-rt .pic-box img { display: none;}
  

  /************ section #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; padding: 80px 0 0 0; background-color: #FCE7EC;}

  .hp-sec-2-title { clear: both; width: 100%; padding: 0 0 6vw 0; color: #C11546; font-size: 5.4vw; font-weight: 600; text-align: center;}

  .hp-sec-2-serv-items { width: 100%; padding: 0 6vw 5vw 6vw; box-sizing: border-box; position: relative;}
  .hp-sec-2-serv-items div { position: relative; z-index: 1;}
  .hp-sec-2-serv-items img.hp-serv-items-prev { width: 6vw; height: auto; position: absolute; top: 20vw; left: 1vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items img.hp-serv-items-next { width: 6vw; height: auto; position: absolute; top: 20vw; right: 1vw; z-index: 2; cursor: pointer;}
  .hp-sec-2-serv-items div .service-item { width: calc(100% / 4); padding: 0 1vw; box-sizing: border-box; position: relative; z-index: 1;}
  .hp-sec-2-serv-items div .service-item .photo { display: none;}
  .hp-sec-2-serv-items div .service-item .photo-mo { width: 100%; height: 260px; border-radius: 14px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-sec-2-serv-items div .service-item .photo-mo img { width: auto; height: 100%;}
  .hp-sec-2-serv-items div .service-item .text { width: 100%; color: #000; font-size: 0.8rem;}
  .hp-sec-2-serv-items div .service-item .text .title { padding: 20px 0 10px 0; color: #000; font-size: 1.1rem; font-weight: 500;}


  .hp-sec-2-hito-plans { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: #fff;}
  .hp-sec-2-hito-plans .sub-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .hp-sec-2-hito-plans .sub-title .word-bx { width: 54px; height: 54px; margin: 0 5px; color: #fff; font-size: 2em; font-weight: 600; line-height: 1em; border-radius: 100%; background-color: #D52E5D; display: flex; justify-content: center; align-items: center;}
  
  .hp-sec-2-hito-plans .push-plans-list { clear: both; width: 100%; padding: 40px 20px; margin: 40px 0 0 0; box-sizing: border-box; border-radius: 70vw 70vw 20vw 20vw; background-color: #f1c7ce;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list { width: 100%; margin: 40px 0 0 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx { width: 100%; margin: 0 0 20px 0;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon { width: 120px; margin: 0 auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .icon img { width: 100%; height: auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text { width: 100%; text-align: center;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.title { color: #000; font-size: 1.4rem; font-weight: 500; line-height: 2em;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text span.intro { color: #000; font-size: 1rem;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt { width: 200px; padding: 10px 0 0 0; margin: 0 auto;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a { width: 100%; padding: 5px; box-sizing: border-box; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #D52E5D solid; border-radius: 20px; background-color: #D52E5D; display: block;}
  .hp-sec-2-hito-plans .push-plans-list .plan-list .list-bx .text .order-bt a:hover { color: #D52E5D; background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx { display: none;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo { width: 100%;}
  .hp-sec-2-hito-plans .push-plans-list .photo-bx-mo .photo-illu { width: 100%; height: auto;}

  .hp-sec-2-hito-plans .more-serv-check-bt { width: 260px; margin: 60px auto 0 auto;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt { width: 100%; padding: 5px 10px; box-sizing: border-box; text-decoration: none; border: 1px #D52E5D solid; border-radius: 30px; background-color: #D52E5D; display: flex; justify-content: flex-start; align-items: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .text { width: calc(100% - 24px); color: #fff; font-size: 1.1rem; text-align: center;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt .icon { width: 24px; color: #FCE7EC; font-size: 1.4rem;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover { background-color: #FCE7EC;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .text { color: #D52E5D;}
  .hp-sec-2-hito-plans .more-serv-check-bt .order-bt a.bt:hover .icon { color: #D52E5D;}


  /************ section #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; padding: 80vw 20px 40px 20px; box-sizing: border-box; background-image: url("../images/hp_sec_3_bg_mo.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  img.hp-sec-3-bg { display: none;}

  .hp-sec-3-content { width: 100%; color: #3A3A3A; font-size: 1rem; line-height: 1.8em;}
  .hp-sec-3-content span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500;}


  /************ section #hp-sec-4 ************/

  section#hp-sec-4 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; background-color: #fff; background-image: url("../images/hp_sec_4_bg_illu.png"); background-repeat: no-repeat; background-size: 160% auto; background-position: right bottom;}

  .hp-sec-4-title { clear: both; width: 100%; padding: 6vw 0 0 0; color: #D52E5D; font-size: 5.4vw; font-weight: 600; text-align: center;}

  .hp-sec-4-choose-list { clear: both; width: 100%; margin: 40px 0 0 0;}
  .hp-sec-4-choose-list .choose-box { width: 100%;}
  .hp-sec-4-choose-list .choose-box .pic-1 { width: 80vw; height: 80vw; margin: 0 auto; border-radius: 100%; border: 10px #fff solid; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-2 { width: 80vw; height: 80vw; margin: 0 auto; border-radius: 100%; border: 10px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-3 { width: 80vw; height: 80vw; margin: 0 auto; border-radius: 100%; border: 10px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-sec-4-choose-list .choose-box .pic-1 img, 
  .hp-sec-4-choose-list .choose-box .pic-2 img, 
  .hp-sec-4-choose-list .choose-box .pic-3 img { width: auto; height: 100%;}
  .hp-sec-4-choose-list .choose-box .text { clear: both; width: 90%; margin: 20px auto 40px auto; color: #707070; font-size: 1rem;}
  .hp-sec-4-choose-list .choose-box .text span.title { color: #3A3A3A; font-size: 1.6rem; font-weight: 500;}
  /** 20251112更新==(結束) **/


  /************ section#index ************/

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 0; margin: 100px 0 0 0; box-sizing: border-box;}

  .index-title-1 { width: 100%; padding: 0 20px; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .index-title-2 { width: 100%; padding: 0 20px; font-size: 1.6em; font-weight: 600; text-align: center; box-sizing: border-box;}
  .img-index-1 { width: 100%; height: auto; margin: 50px 0 20px 0; display: flex; justify-content: center;}
  .img-index-1 img.img-index-1 { display: none;}
  .img-index-1 img.img-index-1-mo { width: 260px; height: auto;}
  .index-title-3 { width: 100%; padding: 0 20px; font-size: 1.2em; text-align: center; box-sizing: border-box;}
  
  .more-bt { width: 160px; margin: 40px auto 0 auto;}
  .more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.4em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-2 { clear: both; width: 100%; padding: 85px 20px 55px 20px; background-image: url("../images/index_2_bg.png"); background-repeat: no-repeat; background-size: 160%; background-position: center center; background-color: #FBE5EA; box-sizing: border-box;}

  .index-news-list { clear: both; width: 100%; padding: 20px 0; margin: 0 auto; font-size: 1.2em; border-bottom: 1px #fff solid;}
  .index-news-list .date { width: 100%; color: #54C2F0;}
  .index-news-list .title { width: 100%;}
  .index-news-list .title a { color: #3E3A39; text-decoration: none;}
  .index-news-list .more { clear: both; width: 70px; float: right;}
  .index-news-list .more a { width: 70px; padding: 2px 0; color: #fff; font-size: 0.8em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  section#index-3 { clear: both; width: 100%; position: relative; overflow: hidden;}
  
  img.img-index-3-bg { width: 160%; height: auto; display: block; position: relative; z-index: 1;}
  img.img-index-3-text { width: 160px; height: auto; position: absolute; bottom: 3vw; left: 30vw; z-index: 1;}

  section#index-4 { clear: both; width: 100%; padding: 25px 0; overflow: hidden; position: relative; z-index: 2;}

  .index-serv-intro { clear: both; width: 100%; margin: 30px 0 0 0;}
  .index-serv-intro .serv-intro { width: 300px; margin: 0 auto 20px auto; position: relative; cursor: pointer;}
  .index-serv-intro .serv-intro .mask-cr { width: 270px; height: 270px; border-radius: 100%; background-color: rgba(239,145,167,0.5); position: absolute; top: 15px; left: 15px; display: none; justify-content: center; align-items: center;}
  .index-serv-intro .serv-intro .mask-cr img.plus { width: 30px; height: auto;}
  .index-serv-intro .serv-intro a { width: 100%; height: 100%; color: #3E3A39; text-decoration: none; display: block;}
  .index-serv-intro .serv-intro .mask img.plus { width: 24px; height: auto;}
  .index-serv-intro .serv-intro .photo { width: 300px; height: 300px; display: block; overflow: hidden;}
  .index-serv-intro .serv-intro .photo img { width: 100%; height: auto;}
  .index-serv-intro .serv-intro .arrow { width: 100%; margin: 7px 0; text-align: center;}
  .index-serv-intro .serv-intro .arrow img { width: 33px; height: auto; border: 1px #EF91A7 solid; border-radius: 100%; box-sizing: border-box;}
  .index-serv-intro .serv-intro a .text { width: 100%; margin: 5px 0; line-height: 1.8em; text-align: center;}
  .index-serv-intro .serv-intro a .text font.big { color: #604C3F; font-size: 1.4em; font-weight: 600;}
  .index-serv-intro .serv-intro a .text font.small { color: #3E3A39; font-size: 1.1em;}

  img.img-index4-bg { width: 420px; height: auto; position: absolute; bottom: 260px; right: -40px;}


  /************ section#about ************/

  .about-title-3 { clear: both; width: 90%; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .about-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; overflow: hidden; position: relative; z-index: 8;}
  img.about-banner { width: 180%; height: auto; margin: 0 0 0 -40%;}
  img.about-banner-text { width: 140px; height: auto; position: absolute; top: 2vw; right: 20vw;}

  section#about-2 { clear: both; width: 100%; background-color: #F9D3DC;}

  .about-2-pic { width: 100%;}
  .about-2-pic img { width: 100%; height: auto; display: block;}
  .about-2-text { width: 100%; padding: 30px; box-sizing: border-box;}

  .about-2-t1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600;}
  .about-2-t2 { width: 100%; font-size: 1.6em; font-weight: 600;}
  .about-2-t3 { width: 100%; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.8em;}

  section#about-3 { clear: both; width: 100%; padding: 30px 0;}

  .about-3-text { width: 100%; padding: 0 30px 30px 30px; box-sizing: border-box;}
  .about-3-pic { width: 100%;}
  .about-3-pic img { width: 100%; height: auto; display: block;}


  /************ section#service ************/

  .service-title-3 { clear: both; width: 90%; margin: 10px auto; font-size: 1.2em; text-align: center;}

  .service-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8; overflow: hidden;}
  img.service-banner { width: 180%; height: auto; margin: 0 0 0 -30%; display: block;}
  img.service-banner-text { width: 140px; height: auto; position: absolute; top: 1.5vw; right: 8vw;}

  section#service-1 { clear: both; width: 100%; padding: 0 0 110px 0; position: relative; overflow: hidden;}

  .servict-infor-list { clear: both; width: 100%; padding: 0 20px; margin: 0 0 55px 0; box-sizing: border-box; position: relative; z-index: 2;}
  .servict-infor-list .serv-pic, .servict-infor-list .serv-pic-m { width: 100%; margin: 0 0 20px 0; text-align: center;}
  .servict-infor-list .serv-pic img, .servict-infor-list .serv-pic-m img { width: 80%; height: auto;}
  .servict-infor-list .serv-pic-p { display: none;}
  .servict-infor-list .serv-infor { width: 100%; padding: 0 20px; background-color: rgba(255, 255, 255, 0.4); box-sizing: border-box;}
  .servict-infor-list .serv-infor span.title { padding: 5px 10px; margin: 0 0 10px 0; color: #fff; font-size: 1.8em; font-weight: 600; background-color: #EF91A7; border-radius: 10px;}
  .servict-infor-list .serv-infor .text { clear: both; width: 100%; margin: 20px 0; font-size: 1.4em; font-weight: 600; line-height: 1.8em;}
  .servict-infor-list .serv-infor .serv-bt { clear: both; width: 100px;}
  .servict-infor-list .serv-infor .serv-bt a { width: 100%; padding: 5px 0; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; background-color: #54C2F0; display: block;}

  img.serv-1-lf-bg { width: 110vw; height: auto; position: absolute; top: 0; left: -20vw; z-index: 1;}
  img.serv-1-rt-bg { display: none;}

  font.red-s { color: #ff0000; font-size: 0.8em;}


  /************ section#service_1 ************/

  section#service-1-title { clear: both; width: 100%; padding: 70px 0 50px 0; margin: 100px 0 0 0; background-color: #F7F8F8; position: relative;}

  .serv-title-1 { width: 100%; padding: 0 20%; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-title-2 { width: 100%; padding: 0 20%; color: #54C2F0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}
  .serv-title-3 { width: 90%; margin: 20px auto; font-size: 1.2em; text-align: center; position: relative; z-index: 2;}

  .serv-1-price-time { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start}
  .serv-1-price-time .price-box { width: 180px; padding: 10px 15px; margin: 0 15px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .price-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #EF91A7;}
  .serv-1-price-time .price-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}
  .serv-1-price-time .time-box { width: 180px; padding: 10px 15px; margin: 0 15px; border: 1px #E6B0AB solid; background-color: #fff; box-sizing: border-box;;}
  .serv-1-price-time .time-box .title { width: 100%; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center; border-radius: 8px; background-color: #54C2F0;}
  .serv-1-price-time .time-box .infor { width: 100%; padding: 5px 0; font-size: 1.8em; font-weight: 600; text-align: center;}

  img.serv-1-flower { width: 20vw; height: auto; position: absolute; top: 8vw; left: 0; z-index: 1;}
  img.serv-1-arrow { width: 32px; height: auto; position: absolute; bottom: -16px; left: calc(50% - 16px); border: 1px #EF91A7 solid; border-radius: 100%;}

  section#service-video { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
  section#service-video .video-box { width: 100%; margin: 0 auto;}

  section#service-detail { clear: both; width: 100%; padding: 55px 20px; background-image: url("../images/service_1_detail_bg.jpg"); background-repeat: no-repeat; background-size: 300%; background-position: top left; box-sizing: border-box;}

  .serv-detail-title-1 { width: 100%; padding: 0 20px; margin: 0 0 5px 0; color: #E6B0AB; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center; box-sizing: border-box;}
  .serv-detail-title-2 { width: 100%; padding: 0 20px; margin: 0 0 60px 0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; text-align: center; box-sizing: border-box;}

  .service-detail-infor { clear: both; width: 100%;}
  .service-detail-infor .pic-p { display: none;}
  .service-detail-infor .pic, .service-detail-infor .pic-m { width: 100%; }
  .service-detail-infor .pic img, .service-detail-infor .pic-m img { width: 100%; height: auto; display: block;}
  .service-detail-infor .infor { width: 100%; padding: 20px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .service-detail-infor .infor .icon { width: 80px; margin: 0 10px 0 0;}
  .service-detail-infor .infor .icon img { width: 100%; height: auto;}
  .service-detail-infor .infor .text { width: calc(100% - 90px);}
  .service-detail-infor .infor .text .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600;}
  .service-detail-infor .infor .text .title2 { width: 100%; margin: 0 0 10px 0;}
  .service-detail-infor .infor .text .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service-detail-infor .infor .text .infor-text { width: 100%; font-size: 1.1em; font-weight: 600; line-height: 1.8em; letter-spacing: 0.1em;}

  section#service-infor-query { clear: both; width: 100%; padding: 40px 0;}

  img.service-beauty-banner { width: 180%; height: auto; margin: 0 0 60px -40%;}

  .service5-class-query { clear: both; width: 100%; padding: 0 20px; margin: 0 0 60px 0; box-sizing: border-box;}
  .service5-class-query .title1 { width: 100%; color: #916225; font-size: 1.8em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .service5-class-query .title2 { width: 100%; margin: 0 0 10px 0; text-align: center;}
  .service5-class-query .title2 span { padding: 3px 10px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-query ul.class-list { clear: both; width: 100%; padding: 0; margin: 40px auto; list-style: none; display: block;}
  .service5-class-query ul.class-list li { width: 100%; padding: 15px 20px; margin: 0; font-size: 1.4em; border-bottom: 1px #EF91A7 solid; box-sizing: border-box;}
  .service5-class-query ul.class-list li .class { width: 100%;}
  .service5-class-query ul.class-list li .time { width: 100%; padding: 5px 0 5px 24px; background-color: #eee; box-sizing: border-box;}

  .service5-class-price { clear: both; width: 100%; position: relative;}
  .service5-class-price .class-scheme { width: 280px; padding: 30px 60px; margin: 0 auto; border: 3px #EF91A7 solid; box-sizing: border-box;}
  .service5-class-price img.service-5-flower { width: 200px; height: auto; position: absolute; top: -5px; left: calc(50% - 280px);}
  .service5-class-price img.service-5-stone { width: 70px; height: auto; position: absolute; bottom: -20px; right: calc(50% - 170px);}
  .service5-class-price .title { width: 100%; margin: -55px 0 0 0; text-align: center;}
  .service5-class-price .title span { padding: 3px 10px; color: #fff; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .service5-class-price .list { width: 100%; margin: 20px 0 0 0; color: #a60000; font-size: 1.2em; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .service5-class-price .list .column-1 { width: 70px;}
  .service5-class-price .list .column-2 { width: calc(100% - 70px);}


  /************ section#rockbath ************/

  .rockbath-title-3 { clear: both; width: 700px; margin: 0 auto; font-size: 1.2em; text-align: center;}

  .rockbath-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.rockbath-banner { width: 180%; height: auto; margin: 0 0 0 -40%;}
  img.rockbath-banner-text { width: 140px; height: auto; position: absolute; top: 4vw; left: 5vw;}
  
  img.rockbath-top-title { clear: both; width: 500px; max-width: 96%; height: auto; margin: 0 auto; display: block; position: relative; z-index: 4;}

  .rockbath-top-title-s { clear: both; width: 100%; margin: 30px 0 0 0; text-align: center; position: relative; z-index: 4;}
  .rockbath-top-title-s span { padding: 8px 15px; color: #fff; font-size: 1.4em; line-height: 1em; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 12px;}

  .rockbath-top-text { clear: both; width: 90%; padding: 40px 0; margin: 0 auto; font-size: 1.2em; line-height: 1.6em; box-sizing: border-box; position: relative; z-index: 4;}

  img.rockbath-bg-lf { display: none;}
  img.rockbath-bg-rt { display: none;}

  section#rockbath-spa { clear: both; width: 100%; height: 450px; background-image: url("../images/rockbath_banner_spa.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 9; overflow: hidden;}

  .rockbath-spa-text { width: 100%; position: absolute; top: 80px; right: 0;}
  .rockbath-spa-text .title1 { width: 100%; margin: 0 0 10px 0; color: #B4B4B5; font-size: 1.6em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .rockbath-spa-text .title2 { width: 100%; margin: 0 0 30px 0; text-align: center;}
  .rockbath-spa-text .title2 span { padding: 3px 10px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-spa-text .list-text { width: 100%; color: #fff; font-size: 1.4em; line-height: 2.6em; text-align: center;}
  .rockbath-spa-text .list-text font.big { font-size: 1.8rem; font-weight: 600;}

  section#rockbath-trilogy { clear: both; width: 100%; padding: 40px 20px 100px 20px; box-sizing: border-box; background-color: #272929; position: relative;}

  .rockbath-trilogy-title { width: 100%;}
  .rockbath-trilogy-title .title1 { width: 100%; margin: 0 0 20px 0; color: #906225; font-size: 1.8em; font-family: "新細明體"; text-align: center;}
  .rockbath-trilogy-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-trilogy-title .title2 span { padding: 3px 10px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-trilogy-title .title3 { width: 100%; color: #fff; font-size: 1.2em; text-align: center;}

  .rockbath-trilogy-main { clear: both; width: 100%; margin: 20px 0 0 0; position: relative; z-index: 2;}
  .rockbath-trilogy-main .trilogy-infor { width: 80%; padding: 0 20px; margin: 0 auto 30px auto; box-sizing: border-box;}
  .rockbath-trilogy-main .trilogy-infor .photo { width: 100%; margin: 0 0 10px 0;}
  .rockbath-trilogy-main .trilogy-infor .photo img { width: 100%; height: auto;}
  .rockbath-trilogy-main .trilogy-infor .infor { width: 100%;}
  .rockbath-trilogy-main .trilogy-infor .infor .title { width: 130px; padding: 5px 0; margin: 20px auto 30px auto; color: #fff; font-size: 1.4em; font-weight: 600; text-align: center; background-color: #54C1EF; border-radius: 18px;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-big { width: 100%; margin: 0 0 30px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .rockbath-trilogy-main .trilogy-infor .infor .text-small { width: 100%; color: #fff; line-height: 1.8em;}

  img.rockbath-tri-bg-lf { display: none;}
  img.rockbath-tri-bg-rt { display: none;}

  section#rockbath-stone-bio { clear: both; width: 100%;}

  .rockbath-stone-pic { width: 100%; height: 30vw; background-color: #666698; display: block; position: relative;}
  .rockbath-stone-pic img.rockbath-stone { width: 96%; height: auto; display: block; position: absolute; top: -20vw; left: 2%; z-index: 3;}

  section#rockbath-certification { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .rockbath-certifi-title { width: 100%; margin: -12vw 0 0 0; position: relative; z-index: 4;}
  .rockbath-certifi-title .title1 { width: 100%; margin: 0 0 5px 0; color: #B4B4B5; font-size: 1.8em; font-family: "新粗明體"; text-align: center;}
  .rockbath-certifi-title .title2 { width: 100%; margin: 0 0 5px 0; text-align: center;}
  .rockbath-certifi-title .title2 span { padding: 3px 15px; color: #fff; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certifi-title .text { width: 100%; text-align: center; line-height: 1.6em;}
  .rockbath-certifi-title .text font.big { color: #666698; font-size: 1.4em; line-height: 2em;}

  .rockbath-certificates { clear: both; width: 100%; margin: 50px 0 0 0;}
  .rockbath-certificates .title { width: 100%; text-align: center;}
  .rockbath-certificates .title span { padding: 3px 15px; color: #fff; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}
  .rockbath-certificates img.certificate-pics { display: none;}
  .rockbath-certificates img.certificate-pics-mo-1 { clear: both; width: 100%; height: auto; margin: 30px auto 0 auto; display: block;}
  .rockbath-certificates img.certificate-pics-mo-2 { clear: both; width: 100%; height: auto; margin: 10px auto 0 auto; display: block;}

  section#rockbath-guide { clear: both; width: 100%; padding: 0 0 40px 0;}

  .rockbath-guide-title { width: 100%; margin: 0 0 20px 0; position: relative; overflow: hidden;}
  .rockbath-guide-title img.rockbath-guide-banner { width: 180%; height: auto; margin: 0 0 0 -40%;}
  .rockbath-guide-title .title1 { width: 280px; color: #B4B4B5; font-size: 1.4em; font-family: "新細明體"; text-align: center; position: absolute; top: 20px; right: 0;}
  .rockbath-guide-title .title2 { width: 280px; text-align: center; position: absolute; top: 50px; right: 0;}
  .rockbath-guide-title .title2 span { padding: 3px 15px; color: #fff; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; background-color: #EF91A7; border-radius: 8px;}

  .rockbath-guide-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .rockbath-guide-list .list-box { width: calc(100% / 2); padding: 0 10px; margin: 0 0 20px 0; box-sizing: border-box;}
  .rockbath-guide-list .list-box .photo { width: 100%; height: 40vw;}
  .rockbath-guide-list .list-box .photo img { width: 100%; height: auto;}
  .rockbath-guide-list .list-box .num { clear: both; width: 36px; height: 36px; margin: 15px auto; color: #fff; font-size: 1.2em; border-radius: 100%; background-color: #54C1EF; display: flex; justify-content: center; align-items: center;}
  .rockbath-guide-list .list-box .text { clear: both; width: 100%; padding: 5px 10px; font-weight: 600; line-height: 1.6em; text-align: center; border-top: 1px #EF91A7 solid; box-sizing: border-box;}


  /************ section#news ************/

  .news-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.news-banner { width: 180%; height: auto; margin: 0 0 0 -40%; display: block;}
  img.news-banner-text { width: 140px; height: auto; position: absolute; top: 2vw; right: 4vw;}

  section#news-content { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}

  .news-con-title-1 { width: 100%; margin: 0 0 5px 0; color: #916225; font-size: 2em; font-family: "新細明體"; font-weight: 600; text-align: center;}
  .news-con-title-2 { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}

  .news-date { clear: both; width: 100%; margin: 20px 0; text-align: right;}

  .news-content-text { clear: both; width: 100%; font-size: 1.2em; line-height: 1.8em;}
  .news-content-text a { color: #3E3A39; border-bottom: 1px #3E3A39 dashed; text-decoration: none;}
  .news-content-text img { max-width: 100%; height: auto;}


  /************ section#contact ************/

  .contact-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; position: relative; z-index: 8;}
  img.contact-banner { width: 180%; height: auto; margin: 0 0 0 -40%; display: block;}
  img.contact-banner-text { width: 140px; height: auto; position: absolute; top: 3vw; right: 14vw;}

  section#contact-infor { clear: both; width: 100%; padding: 0 20px 60px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .contact-infor-table { width: 100%; margin: 0 0 20px 0;}
  .contact-infor-table .caption { width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600; border-bottom: 2px #f2f1ed solid; box-sizing: border-box;}
  .contact-infor-table .caption span { padding: 15px 0; border-bottom: 2px #fd9830 solid;}
  .contact-infor-table .column { width: 100%; padding: 15px 0; margin: 0 0 30px 0; font-size: 0.9em; line-height: 2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .contact-infor-table .column .social-icon { width: 40px; margin: 0 5px 0 0; background-color: #eee; border-radius: 20px 20px 0 20px;}
  .contact-infor-table .column .social-icon a.icon { width: 100%; padding: 6px 0; color: #3E3A39; text-align: center; text-decoration: none; display: block;}
  .contact-infor-table .column .sitemap { width: 100%;}
  .contact-infor-table .column .sitemap a { color: #3E3A39; line-height: 3em; text-decoration: none;}
  .contact-infor-table .column .sitemap a:hover { color: #E98BA1}

  section#contact-map { clear: both; width: 100%; padding: 0 20px 100px 20px; box-sizing: border-box;}


  /************ section#booking ************/

  section#booking-top-banner { clear: both; width: 100%; margin: 100px 0 0 0; overflow: hidden;}

  img.booking-top-banner { width: 180%; height: auto; margin: 0 0 0 -40%; display: block;}

  section#booking-video { clear: both; width: 100%; padding: 80px 20px; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top; box-sizing: border-box;}

  .booking-video-box { width: 100%; margin: 0 auto;}

  section#booking-course-list { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-stitle { width: 100%; padding: 15px 0; background-color: #E88AA0;}
  .booking-stitle img.stitle-1 { max-width: 100%; height: auto; margin: 0 auto; display: block;}

  .booking-course { clear: both; width: 330px; height: 750px; margin: 60px auto;}
  .booking-course ul li .course-box { width: 330px; height: 750px; padding: 15px; background-color: #ECECE3; box-sizing: border-box;}
  .booking-course ul li .course-box .pic { width: 100%; margin: 0 0 30px 0;}
  .booking-course ul li .course-box .pic img.course-pic { width: 100%; height: auto;}
  .booking-course ul li .course-box .infor { width: 100%; padding: 0 0 0 25px; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .title { width: 100%; margin: 0 0 10px 0; color: #54BCEA; font-size: 2em; font-weight: 600;}
  .booking-course ul li .course-box .infor .price-time { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .booking-course ul li .course-box .infor .price-time .price { width: 150px; padding: 10px; margin: 0 20px 0 0; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .price .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #E98BA1;}
  .booking-course ul li .course-box .infor .price-time .price .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .price-time .time { width: 150px; padding: 10px; background-color: #fff; border: 1px #E0AAA5 solid;}
  .booking-course ul li .course-box .infor .price-time .time .title { width: 100%; padding: 3px 0; color: #fff; font-size: 1.4em; text-align: center; border-radius: 10px; background-color: #54BCEA;}
  .booking-course ul li .course-box .infor .price-time .time .text { width: 100%; font-size: 1.6em; font-weight: 600; text-align: center;}
  .booking-course ul li .course-box .infor .list-full { clear: both; width: 100%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-full .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-full .text { width: calc(100% - 30px); padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf { width: 50%; padding: 0 10px; margin: 20px 0 0 0; font-size: 1.2em; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap; float: left; box-sizing: border-box;}
  .booking-course ul li .course-box .infor .list-helf .num { width: 30px; padding: 0; margin: 0;}
  .booking-course ul li .course-box .infor .list-helf .text { width: calc(100% - 30px); padding: 0; margin: 0;}

  section#booking-experience { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .experience-content { width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .experience-content .top-title-text { width: 100%; margin: 0 0 30px 0;}
  .experience-content .top-title-text .top-title { width: 100%; padding: 0 0 0 20px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .experience-content .top-title-text .top-title font.big { color: #54BCEA; font-size: 1.6rem; font-weight: 600;}
  .experience-content .top-title-text .text-list { width: 100%; padding: 0 0 0 20px; font-size: 1.4em; font-weight: 600; line-height: 2.2em; box-sizing: border-box;}
  .experience-content .top-title-text .text-list font.icon { color: #54BCEA;}
  .experience-content .photo-list { clear: both; width: 100%;}
  .experience-content .photo-list img { width: 100%; height: auto; margin: 0 0 20px 0;}

  .experience-content hr.booking-exp-line { clear: both; width: 100%; margin: 10px 0 30px 0; border-top: 1px #E88AA0 solid;}

  section#booking-oil-use { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-oil-use-pics { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .booking-oil-use-pics img { width: 100%; height: auto; display: block;}

  section#booking-oil-element { clear: both; width: 100%; background-color: #F0F0F2;}

  .booking-stitle2 { width: 100%; padding: 15px 0;}
  .booking-stitle2 img.stitle-1 { max-width: 100%; height: auto; margin: 0 auto; display: block;}

  .booking-oil-element-pic { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; position: relative; z-index: 4;}
  .booking-oil-element-pic img { width: 100%; height: auto; display: block;}

  .booking-oil-element-list { clear: both; width: 100%; padding: 0 20px 60px 20px; margin: -100px 0 0 0; box-sizing: border-box; position: relative; z-index: 5;}
  .booking-oil-element-list .column-helf { width: 100%; padding: 10px 20px; color: #455900; font-size: 1.6em; font-weight: 600; border-bottom: 2px #E88AA0 dashed; box-sizing: border-box;}
  .booking-oil-element-list .column-helf font.icon { color: #50D1DC; font-size: 2rem;}
  .booking-oil-element-list .column-helf font.big { font-size: 2rem; font-weight: 600;}

  section#booking-attention { clear: both; width: 100%; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-attention-list { clear: both; width: 100%; padding: 60px 20px 40px 20px; box-sizing: border-box;}
  .booking-attention-list .list-box { width: 100%; margin: 0 0 20px 0; font-size: 1.4em; font-weight: 600; display: flex; justify-content: flex-start;}
  .booking-attention-list .list-box .icon { width: 30px; color: #50D1DC;}
  .booking-attention-list .list-box .list { width: calc(100% - 30px);}


  section#booking-store { clear: both; width: 100%; background-color: #ECECE3; background-image: url("../images/booking_video_bg.png"); background-repeat: repeat-y; background-size: 100%; background-position: left top;}

  .booking-store-pic { width: 100%; padding: 40px 20px; box-sizing: border-box;}
  .booking-store-pic img.store-pic { width: 100%; height: auto; margin: 0 0 10px 0;}

  section#booking-require-table { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}

  .booking-table-title { width: 100%; margin: 0 0 30px 0;}
  .booking-table-title .title { display: none;}
  .booking-table-title .title-mo { width: 100%; margin: 0 0 20px 0;}
  .booking-table-title .title-mo img { width: 100%; height: auto;}
  .booking-table-title .text { width: 100%; font-size: 1.2em; font-weight: 600; line-height: 1.8em; text-align: center;}
  .booking-table-title .text font.pink-small { color: #E88AA0; font-size: 0.9rem;}

  .booking-form-table { width: 100%; padding: 30px 0 0 0; border-top: 2px #E88AA0 solid; box-sizing: border-box;}
  .booking-form-table input, .booking-form-table select { width: 100%; padding: 10px; margin: 0 0 20px 0; color: #414141; font:1em "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #E88AA0 solid; background-color: #fff; box-sizing: border-box;}
  .booking-form-table .submit-bt { clear: both; width: 100%; margin: 30px 0 0 0;}
  .booking-form-table .submit-bt img { width: 160px; height: auto; margin: 0 auto; display: block;}


  /************ section#404 ************/

  section#page-404 { clear: both; width: 100%; padding: 100px 20px; margin: 100px 0 0 0; text-align: center; box-sizing: border-box;}

  font.big-404 { color: #916225; font-size: 4em; font-weight: 600;}
  font.small-404 { font-size: 2em; font-weight: 600;}


  /************ footer (20251112更新) ************/

  footer { clear: both; width: 100%; background-color: #FCE7EC; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .footer-contain { display: none;}

  .footer-contain-mo { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .footer-contain-mo .footer-logo { width: 100%; text-align: center;}
  .footer-contain-mo .footer-logo img { width: 260px; height: auto; margin: 0 auto;}
  .footer-contain-mo .office-title { width: 100%; padding: 30px 0; margin: 0 auto; color: #3A3A3A; font-size: 1.4rem; font-weight: 500; text-align: center;}
  .footer-contain-mo .social-icons { width: 100%; display: flex; justify-content: center; align-items: center;}
  .footer-contain-mo .social-icons a { width: 36px; margin: 0 5px; display: block;}
  .footer-contain-mo .social-icons a img { width: 100%; height: auto;}
  .footer-contain-mo .col-left { width: 100px; margin: 40px 0 0 0; border-right: 2px #D52E5D solid; box-sizing: border-box;}  
  .footer-contain-mo .col-left ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .footer-contain-mo .col-left ul.footer-nav li { padding: 10px 0; margin: 0;}
  .footer-contain-mo .col-left ul.footer-nav li a { color: #3A3A3A; font-size: 1rem; text-decoration: none;}
  .footer-contain-mo .col-left ul.footer-nav li a:hover { color: #D52E5D;}  
  .footer-contain-mo .col-right { width: calc(100% - 100px); margin: 40px 0 0 0;}  
  .footer-contain-mo .col-right .info-box { width: 100%; padding: 10px 0 0 15px; box-sizing: border-box; color: #3A3A3A; font-size: 0.9rem; line-height: 1.4em; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-contain-mo .col-right .info-box .icon { width: 25px;}
  .footer-contain-mo .col-right .info-box .icon img { width: 18px; height: auto;}
  .footer-contain-mo .col-right .info-box .info { width: calc(100% - 25px); margin: 0 0 20px 0;}
  .footer-contain-mo .col-right .info-box .info span.title { font-size: 1rem; font-weight: 500;}

  .footer-copyright { clear: both; width: 100%; padding: 10px; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #8D6125;}

    
}