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

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

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

html, body { height: 100%; 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: 1360px) {

  /************ 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 { width: 100%; height: 150px; padding: 0 calc(50% - 680px); background-color: #fff; -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); box-sizing: border-box; position: relative; z-index: 9;}

  header .header-box { width: 100%; padding: 0 45px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  
  header .header-box .logo-box { width: 300px; margin: 42px 0 0 0;}
  header .header-box .logo-box img { width: 100%; height: auto;}

  header .header-box .nav-icon { display: none;}

  header .header-box nav#pc { width: calc(100% - 410px);}
  header .header-box nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  header .header-box nav#pc ul.nav-menu li { padding: 0; margin: 0 15px;}
  header .header-box nav#pc ul.nav-menu li a { padding: 58px 5px 5px 5px; color: #727171; font-size: 1.4em; text-decoration: none; display: block;}
  header .header-box nav#pc ul.nav-menu li a:hover { color: #fff; font-weight: 600;}

  header .header-box nav#mo { display: none;}

  header .header-box .social-box { width: 110px; margin: 58px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  header .header-box .social-box img { width: 30px; height: auto; margin: 0 0 0 6px;}


  /************ 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: 260px; height: auto; position: absolute; top: 4vw; right: 23vw;}


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

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 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%; 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%; 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; 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%; 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%; 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%; 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%;}

  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); 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 ************/

  footer { clear: both; width: 100%; background-color: #EF91A7; box-sizing: border-box; position: relative; z-index: 2;}

  footer .footer-logo { clear: both; width: 100%; padding: 30px 0 20px 0; text-align: center;}
  footer .footer-logo img { width: 296px; height: auto;}

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

  footer .footer-nav { clear: both; width: 100%; padding: 0 calc(50% - 680px); margin: 0 0 20px 0; color: #595757; font-size: 1.2em; text-align: center; box-sizing: border-box;}
  footer .footer-nav a { padding: 0 0 2px 0; color: #595757; text-decoration: none;}
  footer .footer-nav a:hover { border-bottom: 1px #595757 solid;}

  footer .footer-add { clear: both; width: 100%; padding: 0 calc(50% - 680px); box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  footer .footer-add .add-pic { width: 195px; margin: 10px;}
  footer .footer-add .add-pic img { width: 100%; height: auto;}
  footer .footer-add .line-v { width: 1px; height: 50px; background-color: #4e3234; display: block;}

  footer .address-infor { clear: both; width: 100%; padding: 20px calc(50% - 680px); color: #231815; font-size: 0.8em; text-align: center; line-height: 1.8em; box-sizing: border-box;}

  footer .copyright { clear: both; width: 100%; padding: 20px calc(50% - 660px); background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  footer .copyright .column-lf-mo { display: none;}
  footer .copyright .column-lf { width: 55%; color: #000; font-size: 0.8em;}
  footer .copyright .column-rt { width: 45%; color: #595757; text-align: right; font-size: 0.7em;}


}

@media screen and (min-width: 1024px) and (max-width: 1359px) {

  /************ 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 { width: 100%; height: 120px; padding: 0 20px; background-color: #fff; -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); box-sizing: border-box; position: relative; z-index: 9;}

  header .header-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  
  header .header-box .logo-box { width: 240px; margin: 36px 0 0 0;}
  header .header-box .logo-box img { width: 100%; height: auto;}

  header .header-box .nav-icon { display: none;}

  header .header-box nav#pc { width: calc(100% - 350px);}
  header .header-box nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  header .header-box nav#pc ul.nav-menu li { padding: 0; margin: 0;}
  header .header-box nav#pc ul.nav-menu li a { padding: 50px 6px 5px 6px; color: #727171; font-size: 1.3em; text-decoration: none; display: block;}
  header .header-box nav#pc ul.nav-menu li a:hover { color: #fff; font-weight: 600;}

  header .header-box nav#mo { display: none;}

  header .header-box .social-box { width: 110px; margin: 46px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  header .header-box .social-box img { width: 30px; height: auto; margin: 0 0 0 6px;}


  /************ 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;}


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

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 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%; 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%; 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; 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%; 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%; 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%; 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%; 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; 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 ************/

  footer { clear: both; width: 100%; background-color: #EF91A7; box-sizing: border-box; position: relative; z-index: 2;}

  footer .footer-logo { clear: both; width: 100%; padding: 30px 0 20px 0; text-align: center;}
  footer .footer-logo img { width: 296px; height: auto;}

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

  footer .footer-nav { clear: both; width: 100%; padding: 0 20px; margin: 0 0 20px 0; color: #595757; font-size: 1.2em; text-align: center; box-sizing: border-box;}
  footer .footer-nav a { padding: 0 0 2px 0; color: #595757; text-decoration: none;}
  footer .footer-nav a:hover { border-bottom: 1px #595757 solid;}

  footer .footer-add { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  footer .footer-add .add-pic { width: 195px; margin: 10px;}
  footer .footer-add .add-pic img { width: 100%; height: auto;}
  footer .footer-add .line-v { width: 1px; height: 50px; background-color: #4e3234; display: block;}

  footer .address-infor { clear: both; width: 100%; padding: 20px 20px; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.8em; box-sizing: border-box;}

  footer .copyright { clear: both; width: 100%; padding: 20px 20px; background-color: #fff; box-sizing: border-box;}
  footer .copyright .column-lf-mo { display: none;}
  footer .copyright .column-lf { width: 100%; margin: 0 0 10px 0; color: #000; font-size: 0.8em; text-align: center;}
  footer .copyright .column-rt { width: 100%; color: #595757; text-align: right; font-size: 0.7em; text-align: center;}


}

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

  /************ 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 { width: 100%; height: 80px; padding: 0 20px; background-color: #fff; -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); box-sizing: border-box; position: relative; z-index: 9;}

  header .header-box { width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
  
  header .header-box .logo-box { width: 240px; margin: 15px 0 0 0;}
  header .header-box .logo-box img { width: 100%; height: auto;}

  header .header-box .nav-icon { width: 50px; margin: 17px 0 0 0; font-size: 2.6em; text-align: right;}

  header .header-box nav#mo { width: 400px; padding: 20px; box-sizing: border-box; background-color: #EF91A7; position: absolute; top: 0; right: -400px; z-index: 999; display: none;}
  header .header-box nav#mo .nav-close-icon { width: 50px; font-size: 2.6em; text-align: right; float: right;}
  header .header-box nav#mo ul.nav-menu { clear: both; width: 100%; padding: 20px 0 0 0; margin: 0; list-style: none; box-sizing: border-box; display: block;}
  header .header-box nav#mo ul.nav-menu li { padding: 0; margin: 0 10px;}
  header .header-box nav#mo ul.nav-menu li a { padding: 15px 0; color: #727171; font-size: 1.3em; font-weight: 600; text-align: center; text-decoration: none; display: block;}
  header .header-box nav#mo ul.nav-menu li a:active { color: #EF91A7; font-weight: 600; background-color: #fff;}

  header .header-box nav#pc { display: none;}
  header .header-box .social-box { display: none;}

  header .header-box nav#mo .social-box-mo { clear: both; width: 100%; margin: 46px 0 0 0; display: flex; justify-content: center; align-items: center;}
  header .header-box nav#mo .social-box-mo img { width: 31px; height: auto; margin: 0 10px;}


  /************ 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;}


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

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 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%; 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%; 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; 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%; 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%; 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%; 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%; 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; 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 ************/

  footer { clear: both; width: 100%; background-color: #EF91A7; box-sizing: border-box; position: relative; z-index: 2;}

  footer .footer-logo { clear: both; width: 100%; padding: 30px 0 20px 0; text-align: center;}
  footer .footer-logo img { width: 296px; height: auto;}

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

  footer .footer-nav { clear: both; width: 100%; padding: 0 20px; margin: 0 0 20px 0; color: #595757; font-size: 1.2em; text-align: center; box-sizing: border-box;}
  footer .footer-nav a { padding: 0 0 2px 0; color: #595757; text-decoration: none;}
  footer .footer-nav a:hover { border-bottom: 1px #595757 solid;}

  footer .footer-add { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  footer .footer-add .add-pic { width: 195px; margin: 10px;}
  footer .footer-add .add-pic img { width: 100%; height: auto;}
  footer .footer-add .line-v { width: 1px; height: 50px; background-color: #4e3234; display: block;}

  footer .address-infor { clear: both; width: 100%; padding: 20px 20px; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.8em; box-sizing: border-box;}

  footer .copyright { clear: both; width: 100%; padding: 20px 20px; background-color: #fff; box-sizing: border-box;}
  footer .copyright .column-lf-mo { display: none;}
  footer .copyright .column-lf { width: 100%; margin: 0 0 10px 0; color: #000; font-size: 0.8em; text-align: center;}
  footer .copyright .column-rt { width: 100%; color: #595757; text-align: right; font-size: 0.7em; text-align: center;}


}

@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 { width: 100%; height: 80px; padding: 0 20px; background-color: #fff; -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); box-sizing: border-box; position: relative; z-index: 9;}

  header .header-box { width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
  
  header .header-box .logo-box { width: 240px; margin: 15px 0 0 0;}
  header .header-box .logo-box img { width: 100%; height: auto;}

  header .header-box .nav-icon { width: 50px; margin: 17px 0 0 0; font-size: 2.6em; text-align: right;}

  header .header-box nav#mo { max-width: 100%; width: 400px; padding: 20px; box-sizing: border-box; background-color: #EF91A7; position: absolute; top: 0; right: -400px; z-index: 999; display: none;}
  header .header-box nav#mo .nav-close-icon { width: 50px; font-size: 2.6em; text-align: right; float: right;}
  header .header-box nav#mo ul.nav-menu { clear: both; width: 100%; padding: 20px 0 0 0; margin: 0; list-style: none; box-sizing: border-box; display: block;}
  header .header-box nav#mo ul.nav-menu li { padding: 0; margin: 0 10px;}
  header .header-box nav#mo ul.nav-menu li a { padding: 10px 0; color: #727171; font-size: 1.3em; font-weight: 600; text-align: center; text-decoration: none; display: block;}
  header .header-box nav#mo ul.nav-menu li a:active { color: #EF91A7; font-weight: 600; background-color: #fff;}

  header .header-box nav#pc { display: none;}
  header .header-box .social-box { display: none;}

  header .header-box nav#mo .social-box-mo { clear: both; width: 100%; margin: 46px 0 0 0; display: flex; justify-content: center; align-items: center;}
  header .header-box nav#mo .social-box-mo img { width: 31px; height: auto; margin: 0 10px;}


  /************ 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;}


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

  section#index-1 { clear: both; width: 100%; padding: 100px 0 55px 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%; 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%; 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; 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%; 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%; 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%; 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%; 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; 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 ************/

  footer { clear: both; width: 100%; background-color: #EF91A7; box-sizing: border-box; position: relative; z-index: 2;}

  footer .footer-logo { clear: both; width: 100%; padding: 30px 0 20px 0; text-align: center;}
  footer .footer-logo img { width: 296px; height: auto;}

  footer .footer-nav { display: none;}

  footer .footer-nav-mo { clear: both; width: 100%; padding: 0 20px; margin: 0 0 20px 0; color: #595757; font-size: 1em; line-height: 2em; text-align: center; box-sizing: border-box;}
  footer .footer-nav-mo a { padding: 0 0 2px 0; color: #595757; text-decoration: none;}
  footer .footer-nav-mo a:hover { border-bottom: 1px #595757 solid;}

  footer .footer-add { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  footer .footer-add .add-pic { width: 195px; margin: 10px;}
  footer .footer-add .add-pic img { width: 100%; height: auto;}
  footer .footer-add .line-v { width: 1px; height: 50px; background-color: #4e3234; display: block;}

  footer .address-infor { clear: both; width: 100%; padding: 20px 20px; color: #231815; font-size: 0.8em; text-align: center; line-height: 1.8em; box-sizing: border-box;}

  footer .copyright { clear: both; width: 100%; padding: 20px 20px; background-color: #fff; box-sizing: border-box;}
  footer .copyright .column-lf { display: none;}
  footer .copyright .column-lf-mo { width: 100%; margin: 0 0 10px 0; color: #000; font-size: 0.8em; text-align: center;}
  footer .copyright .column-rt { width: 100%; color: #595757; text-align: right; font-size: 0.7em; text-align: center;}

    
}