@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --MC01:#778f9e;
    --MC02:#d3dde3;
    --MC03:#f8f9fa;
    --Cw:#fff;
    --Cb:#333;
    --Cb7:#777;
    --Cbc:#ccc;
    --Cr:#e0471c;
    --font01:"Noto Serif TC", sans-serif;
    --font02:微軟正黑體;
    --font03:Unna;
}

a { color: var(--Cb); text-decoration: none}
section { padding: 0 4.4271vw}
h1 { font: 500 36px var(--font01)}
h2 { font: 600 25px var(--font02)}

.Cr { color: var(--Cr)}
.Cm01 { color: var(--MC01)}
.l_t { text-decoration: line-through}

.Tit { display: flex; align-items: center}

/*btn*/
.btn {  display: block; position: relative; text-align: center; z-index: 1 }
.btn:before { background: var(--Cb); content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; transition: .3s; width: 0; z-index: -1}
.btn:hover:before { width: 100%}
.btn.btn.t2:hover { color: var(--Cw)}
.btn.B { font-size: 21px; line-height: 46px; text-align: center; width: 230px}
.btn.B.X { width: 100% }
.btn.t1 { background: var(--MC01); color: var(--Cw)}
.btn.t2 { background: var(--Cw); border: 1px solid; color: var(--Cb); font-size: 18px}
.btn.t2 i { font-size: 28px; font-weight: 500}
.btn.s { background: var(--Cw); border: 1px solid #ccc; font-size: 16px; padding: 4px 15px}
.link { color: var(--Cb); cursor: pointer; text-decoration: underline}

/*margin padding*/
.Ml { margin: 0 0 0 30px}
.P_ub30 { padding: 30px 0}
.P_r10 { padding: 0 10px 0 0}

/*imgbox*/
.imgW { height: 100%; position: relative}
.imgW:hover:after { background: #0006 url("../img/srh_04.svg") no-repeat center; content: ""; cursor: pointer; display: block; pointer-events: none; position: absolute; top:0; left: 0; right: 0; bottom: 0}
.roomC .imgW:hover:after { display: none}

.imgbox { display: block; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0}
.imgbox img { display: block; object-fit: cover; height: 0; max-height: 100%; max-width: 100%; min-height: 100%; min-width: 100%; width: 0; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0}

/*roomC*/
.roomC { height: 37.865vw; margin: 60px 0 75px; position: relative}
.roomC .p1,.roomC .p2,.roomC .p3,.roomC .p4,.roomC .imgbox { position: absolute}
.roomC .p1 { bottom: 5.5vw; height: 27.813vw; width: 62.76vw}
.roomC .p2 { height: 17.48vw; left: 67.9vw; bottom: 20.45vw; width: 27.605vw}
.roomC .p3 { height: 14.36vw; box-shadow: 0 0 0 .6vw var(--Cw); bottom: 5.5vw; left: 54vw; width: 22.6vw;}
.roomC .p4 { height: 20.07vw; top: 18vw; left: 77.3vw; width: 14.6vw}
.roomC .imgW:hover { cursor: pointer}
.roomC .imgW:hover img { transform: scale(1.04); transition: 1s}

/*search*/
.search { position: absolute; top: 33vw; width: 72.2vw}
.search ul { display: flex}
.search p { display: flex; align-items: center; margin: 7px 0}
.search p img { margin: 0 7px 0 0}
.search .p01 { border-bottom: 1px solid #eee; gap: 20px; width: 100%}
.search .p01 li { width: calc((100% - 80px)/5)}
.search .p01 .room_t ol li { display: flex; width: 100%}

.search .p01 a img { padding: 0 10px 0 0}
.Dnb { font: 600 20px var(--font01)}
.Dnb::placeholder { color: #555; font-size: 16px; opacity: 0.5}
.search .p01 input { border: none; font-size: 21px; width: 100%}
.search .p01 input:focus { background: var(--MC03)}
.search .p01 input:focus-visible { outline: none}
.search .p02 { align-items: center; display: flex; width: 100%}
.search .p02 li { padding: 10px 20px 10px 0}
.search .p02 select,.search .p2 input { font-size: 16px; padding: 10px 20px}
.search .p02 select { border: 1px solid var(--MC02)}
.search .p02 input { background:  var(--MC03); border: none; padding: 13px 15px;}
.search .p02 a { padding: 7px 25px}
.search .room_t { font: 600 20px var(--font01); padding: 0 30px 0 0; position: relative}
.search .room_t .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.room_t { cursor: pointer;}
.room_t i { font-size: 10px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%)}
.room_t ol { box-shadow: 0 5px 10px #0002; display: none; position: absolute ; width: 100%; z-index: 2}
.room_t:hover ol { background: var(--Cw);display: flex; flex-wrap: wrap;} 
.room_t.Q:hover ol { padding: 0 0 10px; min-width: 210px;}

.search a,.room_t .QB { background: var(--Cw); display: block; font: 500 16px var(--font02); padding: 10px 10px 0;}
.search a { padding: 10px; text-align: center; width: 100%}
.room_t a:hover { background: var(--MC03)}
.search .btn { display: flex; justify-content: center; align-items: center; height: 100%}

input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none}

.Q_input { border: 1px solid #eee; display: inline-flex; width: calc(100% - 50px)}
.Q_input button { -webkit-appearance: none; align-items: center; border: none; cursor: pointer; justify-content: center; height: 36px; outline:none; position: relative; width: 36px}
.Q_input button:before,
.Q_input button:after { background: #333; display: inline-block; position: absolute; content: ''; height: 1.5px; transform: translate(-50%, -50%); width: 1rem}
.Q_input button.plus:after { transform: translate(-50%, -50%) rotate(90deg)}
.Q_input input[type=number] { border: solid #ddd; border-width: 0 2px; font: 600 20px sans-serif; height: 36px; padding: .5rem; text-align: center; width: calc(100% - 80px)}
.Q_input.B { box-shadow: 0 6px 10px #0001; margin: 0 10px 0 0; width: 200px}
.Q_input.B input[type=number] { width: calc(100% - 72px)}
.Q_input.B button { height: 50px; width: 50px}
.Q_input.B input[type=number] { height: 50px; width: calc(100% - 100px)}

.QB p { padding: 0 15px 0 0; width: 50px}

.price { align-items: baseline; display: flex; justify-content: flex-end; padding: 10px 0;} 
.price .b { font: 600 24px Fixedsys} 
.price .b i { font-size: 42px; font-style: normal} 
.price .s { font: 500 24px Fixedsys; padding: 0 30px 0 0} 
.price .s i { text-decoration: line-through; font-style: normal}

/*footer*/
footer { background: var(--MC03); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 50px 4.4271vw 15px}
footer .L,footer .R { display: flex}
footer .B { padding: 10px 0 0; text-align: center; width: 100%}
footer strong { display: block; font: 600 24px var(--font02); padding: 0 0 20px}
footer .L .p1 { padding: 0 0 20px}
footer .L .p1 span { padding: 0 0 0 30px}
footer .L .p3 { padding: 0 0 0 70px}
footer .p2 p { line-height: 1.25}
footer .h4 { font-size: 18px; padding: 0 0 20px}
.OLink { padding: 0 0 20px}
.OLink img { height: 24px; width: 24px}
.OLink a { padding: 0 10px 0 0;}
.OLink a:hover img { opacity: .6}
footer a:hover { color: var(--MC01)}
footer .p5 { padding: 0 0 0 70px}
footer .R p { line-height: 2.25}
footer .B i { background: var(--Cb); border-radius:  50%; display: block; height: 4px; ; margin: 0 auto; width: 4px}
.QR { display: flex; flex-wrap: wrap; gap: 15px}
.QR img { margin: 10px 0 0 0; width: 110px}

/*splide*/
.splide__pagination__page.is-active { background: var(--MC01) !important}
.splide { margin: 0 4.0729vw} 
.splide__arrows.splide__arrows--ltr { position: absolute; top: 50%; left: -4.0729vw; width: calc(100% + 8.1458vw)}
.splide__arrow--prev { left: 0 !important}
.splide__arrow--next { right: 0 !important}

/*goto top*/
.cd-top {
    display: inline-block;
    position: fixed;
    bottom: 20px;
    right: 10px;
    opacity: 0;
    z-index: 5;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
    text-align: center
}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    background:#fff;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top i { padding: 0 0 10px}
.cd-top p { letter-spacing: 2px; transform: rotate(90deg)}
.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1; padding: 10px 0 20px;
}
.cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}
.no-touch .cd-top:hover {
    opacity: 1;
}

/*overlay*/
.overlay { background: #0006; display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100vw; z-index: 100}
.overlayC { background: var(--Cw); max-height: 80%; padding: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px}
.overlay .x { background: var(--Cw); display: inline-block; position: absolute; top: 25px; right: 25px}
.overlay h1.t1 { border-bottom: 1px solid var(--MC02); display: inline-block; ; max-width: calc(100% - 30px); margin: 0 0 20px; position: relative; padding: 0 30px 10px 0}
.overlay h1.t1:after { background: var(--Cb); content: ""; display: block; height: 1px; position: absolute; right: 0; bottom: 0; width: 30px}
.overlay h2 { margin: 0 0 15px}
.overlay .textB { border-bottom: 1px solid var(--MC02); margin: 0 0 15px; padding: 0 0 15px}
.overlay .textB:last-child { border: none; margin: 0; padding: 0}
.overlay article { margin: 25px 0 0; max-height: calc(80vh - 100px); overflow: scroll}


/*tab*/
.tab { overflow: hidden}
.tab a {
  background: var(--Cw); border: 1px solid var(--MC02); cursor: pointer; float: left; margin: 0 5px 0 0;
  padding: 7px 16px; transition: 0.3s}
.tab a:hover { background: var(--MC02); opacity: .6}
.tab a.active { background: var(--MC02)}
.tab a.active:hover { opacity: 1}

/* Style the tab content */
.tabcontent { display: none; padding: 25px 0 0; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/*icon*/
.Icon { display: inline-flex; height: 32px; width: 32px}

.HI01 { background: url(../img/icon01.svg) no-repeat 0 0}
.HI02 { background: url(../img/icon01.svg) no-repeat -32px 0}
.HI03 { background: url(../img/icon01.svg) no-repeat -64px 0}
.HI04 { background: url(../img/icon01.svg) no-repeat -96px 0}
.HI05 { background: url(../img/icon01.svg) no-repeat -128px 0}
.HI06 { background: url(../img/icon01.svg) no-repeat -160px 0}
.HI07 { background: url(../img/icon01.svg) no-repeat -192px 0}
.HI08 { background: url(../img/icon01.svg) no-repeat -224px 0}
.HI09 { background: url(../img/icon01.svg) no-repeat -256px 0}
.HI10 { background: url(../img/icon01.svg) no-repeat -288px 0}
.HI11 { background: url(../img/icon01.svg) no-repeat 0 -32px}
.HI12 { background: url(../img/icon01.svg) no-repeat -32px -32px}
.HI13 { background: url(../img/icon01.svg) no-repeat -64px -32px}
.HI14 { background: url(../img/icon01.svg) no-repeat -96px -32px}
.HI15 { background: url(../img/icon01.svg) no-repeat -128px -32px}
.HI16 { background: url(../img/icon01.svg) no-repeat -160px -32px}
.HI17 { background: url(../img/icon01.svg) no-repeat -192px -32px}
.HI18 { background: url(../img/icon01.svg) no-repeat -224px -32px}
.HI19 { background: url(../img/icon01.svg) no-repeat -256px -32px}
.HI20 { background: url(../img/icon01.svg) no-repeat -288px -32px}
.HI21 { background: url(../img/icon01.svg) no-repeat 0 -64px}
.HI22 { background: url(../img/icon01.svg) no-repeat -32px -64px}
.HI23 { background: url(../img/icon01.svg) no-repeat -64px -64px}
.HI24 { background: url(../img/icon01.svg) no-repeat -96px -64px}
.HI25 { background: url(../img/icon01.svg) no-repeat -128px -64px}
.HI26 { background: url(../img/icon01.svg) no-repeat -160px -64px}

.RI01 { background: url(../img/icon02.svg) no-repeat 0 0}
.RI02 { background: url(../img/icon02.svg) no-repeat -32px 0}
.RI03 { background: url(../img/icon02.svg) no-repeat -64px 0}
.RI04 { background: url(../img/icon02.svg) no-repeat -96px 0}
.RI05 { background: url(../img/icon02.svg) no-repeat -128px 0}
.RI06 { background: url(../img/icon02.svg) no-repeat -160px 0}
.RI07 { background: url(../img/icon02.svg) no-repeat -192px 0}
.RI08 { background: url(../img/icon02.svg) no-repeat -224px 0}
.RI09 { background: url(../img/icon02.svg) no-repeat -256px 0}
.RI10 { background: url(../img/icon02.svg) no-repeat -288px 0}
.RI11 { background: url(../img/icon02.svg) no-repeat 0 -32px}
.RI12 { background: url(../img/icon02.svg) no-repeat -32px -32px}
.RI13 { background: url(../img/icon02.svg) no-repeat -64px -32px}
.RI14 { background: url(../img/icon02.svg) no-repeat -96px -32px}
.RI15 { background: url(../img/icon02.svg) no-repeat -128px -32px}
.RI16 { background: url(../img/icon02.svg) no-repeat -160px -32px}
.RI17 { background: url(../img/icon02.svg) no-repeat -192px -32px}
.RI18 { background: url(../img/icon02.svg) no-repeat -224px -32px}
.RI19 { background: url(../img/icon02.svg) no-repeat -256px -32px}

.noBn { padding: 190px 4.4271vw 50px}

/*頁碼*/
.pgB { height: 30px; margin: 30px 0; position: relative}
.pgB button { -webkit-appearance: none; background: transparent; border: 0; outline: 0}
.paginate { position: relative; width: 30px; height: 30px; cursor: pointer; transform: translate3d(0, 0, 0); position: absolute; ßß-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2))}
.paginate i { position: absolute; top: 40%; left: 0; width: 24px; height: 2px; border-radius: 2.5px;
  background: var(--MC01); transition: all 0.15s ease}
.paginate.left { right: 58%}
.paginate.left i { transform-origin: 0% 50%}
.paginate.left i:first-child { transform: translate(0, -1px) rotate(40deg)}
.paginate.left i:last-child { transform: translate(0, 1px) rotate(-40deg)}
.paginate.left:hover i:first-child { transform: translate(0, -1px) rotate(30deg)}
.paginate.left:hover i:last-child { transform: translate(0, 1px) rotate(-30deg)}
.paginate.left:active i:first-child { transform: translate(1px, -1px) rotate(25deg)}
.paginate.left:active i:last-child { transform: translate(1px, 1px) rotate(-25deg)}
.paginate.left[data-state=disabled] i:first-child { transform: translate(-5px, 0) rotate(0deg)}
.paginate.left[data-state=disabled] i:last-child { transform: translate(-5px, 0) rotate(0deg)}
.paginate.left[data-state=disabled]:hover i:first-child { transform: translate(-5px, 0) rotate(0deg)}
.paginate.left[data-state=disabled]:hover i:last-child { transform: translate(-5px, 0) rotate(0deg)}
.paginate.right { left: 58%}
.paginate.right i { transform-origin: 100% 50%}
.paginate.right i:first-child { transform: translate(0, 1px) rotate(40deg)}
.paginate.right i:last-child { transform: translate(0, -1px) rotate(-40deg)}
.paginate.right:hover i:first-child { transform: translate(0, 1px) rotate(30deg)}
.paginate.right:hover i:last-child { transform: translate(0, -1px) rotate(-30deg)}
.paginate.right:active i:first-child { transform: translate(1px, 1px) rotate(25deg)}
.paginate.right:active i:last-child { transform: translate(1px, -1px) rotate(-25deg)}
.paginate.right[data-state=disabled] i:first-child { transform: translate(5px, 0) rotate(0deg)}
.paginate.right[data-state=disabled] i:last-child { transform: translate(5px, 0) rotate(0deg)}
.paginate.right[data-state=disabled]:hover i:first-child { transform: translate(5px, 0) rotate(0deg)}
.paginate.right[data-state=disabled]:hover i:last-child { transform: translate(5px, 0) rotate(0deg)}
.paginate[data-state=disabled] { opacity: 0.5; cursor: default}

.counter { text-align: center; position: absolute; width: 100%; font-size: 24px; font-family: Helvetica, sans-serif; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2); color: var(--MC01)}


@media screen and (max-width: 1300px){
    .roomC { margin: 5vw 0 20px; height: calc(31.5vw + 134px)}
    .roomC .p1 { top: 0; bottom: unset; height: 30.6vw}
    .roomC .p2 { height: 15vw; top: 0; bottom: unset}
    .roomC .p3 { box-shadow: none; height: 15vw; top: 15.6vw; left: 67.9vw; right: 0; bottom: 0; width: 27.605vw;}
    .roomC .p4 { display: none}   
    .search { position: relative; top: 31.5vw; width: 100%}
    .QR img { margin: 50px 0 0 0; width: 70px}
    
    .noBn { padding: 120px 4.4271vw 50px}
}
@media screen and (max-width: 991px){
    h1 {font-size: 28px}
    h2 { font-size: 21px}
    .btn.t2 { font-size: 16px}
    .btn.t2 i { font-size: 23px}
    footer .L { justify-content: space-between; width: 100%}
    footer .R { margin: 30px 0 0}
    .splide { margin: 0 40px} 
    .splide__arrows.splide__arrows--ltr { left: -40px; width: calc(100% + 80px)}
    
    .overlayC { max-height: calc(100% - 40px); padding: 20px; width: calc(100% - 40px)}
    .overlay .x { top: 15px; right: 15px}
    .overlay article { margin: 45px 0 0; max-height: calc(100vh - 125px)}
}
@media screen and (max-width: 768px){
    header { background: #fffe}  
    .roomC { margin: 60px 0 10px; height: calc(31.5vw + 564px)}
    .search ul { flex-wrap: wrap}
    .search .p01 { gap: 10px 30px}
    .search .p01 li {width: calc((100% - 30px)/2)}
    .search .p01 a { height: 46px}
    .search .p02 { flex-wrap: wrap; padding: 20px 0 10px}
    .search .p02 li { padding: 0 0 15px; width: 100%}
    .search .p02 a { padding: 11px 25px}
    input,select { width: 100%}
    .btn.t2 { font-size: 15px}
    .QR img { margin: 0}
    .Dnb { padding: 0 15px}
    .search .p01 input { background: var(--MC03)}
    .search .p01 .M { margin: 0 0 10px; width: 100%}
    .search .room_t { background: var(--MC03); padding: 5px 30px 5px 15px}
    .search .p02 select, .search .p2 input { padding: 10px 15px}
    .search .p01 .room_t ol li { margin: 0 0  0 -15px}
    
    .noBn { padding: 100px 4.4271vw 50px}
    
    .paginate.right { left: 70%}
    .paginate.left { right: 70%}
}