@import url('/css/animate.css');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
#other_area { display: none; }
.wow { animation: fadeIn 1.5s both; -webkit-animation: fadeIn 1.5s both; animation-duration: 1s; -webkit-animation-duration: 1s; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#describe *,.tab_content * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-width: initial; }
.bannerArea { clear: both; overflow: hidden; z-index: 3; position: relative; overflow: hidden; background-color: #fff; background-position: 0 -63%; background-repeat: no-repeat; }
.bannerArea .Txt { position: absolute; bottom: 0px; left: 0; right: 0; margin: 0 auto; z-index: 11; display: block; padding: 0px 0px 0; letter-spacing: 2px; width: 100%; display: flex; align-items: baseline; justify-content: space-between; }
.bannerArea .Img {
  position:relative;overflow:hidden;width:100%;
  .bannerArea .Img { padding-left: 115px; }
  ;
}
.bannerArea .c-circleSvg { position: absolute; right: calc(-1600px/2 + 200px); bottom: calc(-1500px/2); width: 700px; height: 700px; z-index: 10; animation: circleAnime_1 20s linear 0s infinite; display: none; }
@keyframes circleAnime_1 {
  0% { transform: translate(-50%,-50%) rotate(0deg) }
  100% { transform: translate(-50%,-50%) rotate(360deg) }
}
.bannerArea .c-circleSvg svg { width: 100%; height: 100% }
.bannerArea .c-circleSvg svg path { fill: none; stroke: #eee; stroke-miterlimit: 10; stroke-width: 1 }
.bannerArea .bannerBox .Img { max-height: 670px }
.bannerText { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.bannerText .pag_tit { color: var(--primary); position: relative; line-height: 1.31; letter-spacing: 0px; text-align: center; font-size: 2.6rem; font-weight: 700; background-color: #FEFEFEE6; padding: 30px 90px; border-radius: 0px 60px 0px 0px; }
.bannerText em { color: var(--secondary); font-style: inherit; position: relative; font-weight: 700; font-size: 68px; letter-spacing: 1px; line-height: 110%; font-family: "Sora",sans-serif; text-transform: uppercase; text-align: center; display: none; }
.bread { margin: 0 auto }
footer { padding: 60px 0 30px 0; margin-top: 0 }
/* sub_banner */
#sub_banner { width: 100%; height: 570px; }
#sub_banner:before { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 40%; background-image: radial-gradient(var(--soft-blue) 2px,transparent 2px); background-size: 30px 30px; opacity: 0.5; }
#sub_banner a { height: 100%; background: no-repeat 50%/cover; background-size: cover; background-position: 40% 50%; }
/* wrap */
#wrap { z-index: 12; }
/* top_title */
#top_title .pag_tit { line-height: 120%; font-weight: 400; letter-spacing: 5px }
#top_title .pag_tit::first-letter { color: var(--primary) }
#top_title .newsDate { padding: 8px 0; font-size: 12px; color: #818181; letter-spacing: 1px; text-transform: uppercase; max-width: 1000px; margin: 0 auto; }
#top_title .newsDate b { font-size: 14px; font-weight: 400 }
#top_title .newsDate .date { display: inline-block; font-size: 14px; font-weight: 400; color: #888; font-family: 'Sora',sans-serif; }
#top_title .classTitle { position: relative; display: inline-block; padding: 3px 5px; margin-left: 20px; margin-right: 5px; font-weight: 500; font-size: 14px; background-color: #e4e4e4; color: #000000; font-family: 'Sora',sans-serif; }
#top_title .classTitle::before { content: ""; position: absolute; top: 50%; left: -15px; width: 9px; height: 2px; background-color: #ccc }
#top_title .articleTitle { border-bottom: 1px solid #d6d6d6; color: #232323; font-weight: 600; font-size: 22px; margin-bottom: 20px; padding: 10px 0; letter-spacing: 0 }
/* waylink */
.waylink {   }
.waylink ol { padding: 0 30px 0 0; }
.waylink ol li,.waylink ol li a { letter-spacing: .5px; font-weight: 300; font-size: .8rem; position: relative; color: #fff; font-family: 'Sora',sans-serif; display: inline-flex; align-items: center; }
.waylink ol li:after { content: "-"; z-index: 1; display: block; margin: 0 10px; }
.waylink ol li:last-child:after { display: none; }
/* aside 
aside{position: relative; }aside ul ul.subUL{background-color: #fff; -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.1)}aside #sidebtn{padding: 10px 20px; width: calc(100% - 0px); z-index: 2; background: var(--white); padding: 10px 25px; border: 1px solid #d2d2d2; }aside #sidebtn:before{position: absolute; width: 100%; height: 100%; background: rgba(var(--white-rgb),.1); top: 0; left: 0; transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }aside #sidebtn font{color: var(--triadic2); }aside #sidebtn i{top: calc((100% - 16px)/2); right: 20px; color: var(--triadic2); }aside >ul >li b[data-action="sideOpen"]{position: absolute; padding: 5px 20px; display: block; top: calc((100% - 42px)/2); right: 0; cursor: pointer; }aside >ul >li b[data-action="sideOpen"] i:before{content: "\f067"; }aside >ul >li[data-type="2"] b[data-action="sideOpen"] i:before{content: "\f068"; }aside >ul >li .btnBox a{padding: 20px; font-weight: 400; font-size: 1rem; }aside >ul >li.action .btnBox a{color: var(--info); }aside >ul >li ul.subUL{position: absolute; width: 190px; background: rgba(var(--black-rgb),.85); left: calc(50% - 95px); z-index: 5; opacity: 0; }aside >ul >li ul.sub2UL{margin-left: 10px; }aside >ul >li ul.subUL li >div{position: relative; }aside >ul >li ul.subUL li{background-color: #eee}aside >ul >li ul.subUL li a{padding: 10px 10px; display: block; background-color: #ffffff; text-align: center; }aside >ul >li ul.subUL li [data-action="sideOpen"]{display: none; }aside >ul >li ul.sub2UL li a{color: #888; }aside >ul >li ul.subUL li:hover a{background-color: var(--secondary); color: #fff; }
 *//* content_wrap */
#wrap .workframe #content_wrap * { vertical-align: initial; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#content_wrap { padding: 70px 0px; }
#content_wrap .page_subject { position: relative; margin-bottom: 50px; padding-top: 30px; display: flex; justify-content: flex-end; flex-wrap: wrap; display: none; }
#content_wrap .page_subject .pag_tit { line-height: 170%; letter-spacing: 1px; position: relative; font-size: 1.8rem; font-weight: 600; display: none; }
#wrap .workframe { width: min(1280px,90%); }
/* list_box */
.list_box li { position: relative; width: 100%; }
.list_box li h3 {
  height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;margin-bottom:12px;/* border-bottom:1px solid #c2c2c2;*/
  font-size:24px;font-weight:400;letter-spacing:1px;color:#202020;
}
/* describe */
#describe { margin: 6vw 0; }
/* article_list */
#article_list { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px 20px }
#article_list img { height: 280px }
#article_list .info_box { padding: 40px 30px; background: #f3f3f3 }
#article_list .info_box h2 { font-size: 18px; letter-spacing: .5px; height: auto; font-family: 'Sora',sans-serif; }
#article_list .info_box p { font-weight: 300; }
#article_list .info_box .more { height: 60px; width: 170px; margin: auto; display: block; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; background-color: #ffffff; color: var(--primary); display: flex; align-items: center; justify-content: center; position: relative; padding: 25px 30px 25px 10px; margin-top: 20px; font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 600; }
#article_list .info_box .more:before { position: absolute; content: ""; width: 8px; height: 8px; background-color: var(--complement); border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 15px; }
/* product_list */
#product_list .info_box { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 5px; margin-top: 8px; width: 100%; }
#product_list .info_box .h3 { font-size: 18px; letter-spacing: .1px; height: 61px; color: var(--info); font-family: 'Sora',sans-serif; font-weight: 500; -webkit-line-clamp: 2; }
#product_list li:hover .info_box .h3 { color: var(--primary) }
#product_list .info_box p { font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 300; color: var(--triadic1); }
#product_list .info_box .more { height: 60px; width: 170px; margin: 0; display: block; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; background-color: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; position: relative; padding: 25px 30px 25px 10px; font-family: "Poppins",sans-serif; }
#product_list li:hover .info_box .more { background: var(--secondary) }
#product_list .info_box .more:before { position: absolute; content: ""; width: 8px; height: 8px; background-color: var(--white); border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; }
/* news_list */
#news_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 20px }
#news_list li { background-color: #f8f8f8; }
#news_list li img { height: 250px; }
#news_list .newsTxt { background-color: #f8f8f8; padding: 10px 20px; }
#news_list .newsInfoBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #c2c2c2; }
#news_list .newsInfoBox .tagBox { padding: 0 }
#news_list .newsInfoBox .dateBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
#news_list .newsInfoBox .dateBox .classTitle { font-size: 15px; color: #888888; -ms-flex-item-align: end; align-self: flex-end; margin-bottom: 9px; letter-spacing: 1.2px; font-family: 'Sora',sans-serif; margin-left: 20px; }
#news_list .newsInfoBox .dateBox .day { font-size: 40px; color: #555555; line-height: 56px; font-weight: bold; margin-right: 13px; font-family: 'Sora',sans-serif; }
#news_list .newsInfoBox .dateBox .month,.newsInfoBox .dateBox .year { line-height: 1.2; font-size: 15px; font-weight: 600; color: #555555; white-space: nowrap }
#news_list .newsInfoBox .dateBox .month .slash,.newsInfoBox .dateBox .year .slash { margin-left: 5px; margin-right: 5px }
#news_list .newsInfoBox .dateBox .year { font-size: 14px; letter-spacing: 1px; font-family: 'Sora',sans-serif; }
#news_list .newsInfoBox .tagBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
#news_list .newsInfoBox .tagBox .tagList { display: -webkit-box; display: -ms-flexbox; display: flex }
#news_list .newsInfoBox .tagBox .sdgImgBox { border-radius: 99px; overflow: hidden; margin: 0 2px; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex }
#news_list .newsInfoBox .tagBox .sdgImg { width: 56px; height: 56px }
#news_list li .info_box { padding: 15px; width: calc(100% - 90px); left: 20px; bottom: 0 }
#news_list li .info_box p * { font-weight: 100; font-size: 14px }
#news_list li .info_box p a { margin-right: 10px; padding: 0 2px; max-width: calc(100% - 82px); height: 23px; z-index: 2 }
#news_list li .newsDate { padding: 8px 0; font-size: 12px; color: #818181; letter-spacing: 1px; text-transform: uppercase }
#news_list li .newsDate b { font-size: 14px; font-weight: 400 }
#news_list li .newsDate .date { display: inline-block; font-size: 14px; font-weight: 400; color: #888 }
#news_list li .newsDate .classTitle { position: relative; display: inline-block; padding: 3px 5px; margin-left: 20px; margin-right: 5px; font-weight: 400; font-size: 14px; background-color: #00a0e9; color: #fff }
#news_list li .newsDate .classTitle::before { content: ""; position: absolute; top: 50%; left: -15px; width: 9px; height: 2px; background-color: #ccc }
#news_list li h3 { color: #343434; -webkit-line-clamp: 2; height: auto; line-height: 36px; letter-spacing: .5px; font-weight: 600; font-size: 20px; margin-bottom: 20px; }
#news_list li .text { -webkit-line-clamp: 3; height: 83px }
#news_list li .plus { position: absolute; bottom: 50px; right: 10px; pointer-events: none; width: 30px; height: 30px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease }
#news_list li .plus::before,#news_list li .plus::after { content: ""; position: absolute; top: 50%; left: 0; margin-top: -1px; width: 100%; height: 2px; background-color: #616161; -webkit-transition: all 0.4s ease; transition: all 0.4s ease }
#news_list li .plus::after { -webkit-transform: rotate(90deg); transform: rotate(90deg) }
#news_list li .time { font-weight: 300; line-height: 120%; margin: 10px 0 }
#news_list li .more { margin: 10px 0; padding-top: 10px; display: flex; align-items: center; }
#news_list li .more font { font-size: 12px; position: relative; writing-mode: inherit; color: #737373; font-weight: 600; letter-spacing: 1px; text-align: center; font-family: 'Sora',sans-serif; }
#news_list li .more svg { margin-left: 10px; width: 13px; height: 12px; fill: #b0b0b0; }
/* product_list */
#product_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px 30px; align-items: start; }
#product_list li { width: auto }
#product_list li .img_cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid #ededed; }
#product_list li:hover .img_cover { border-color: var(--primary) }
#product_list li a.txt_clamp { width: 100%; height: 100%; left: 0; top: 0; z-index: 10 }
#product_list .info_box h2 { height: auto; -webkit-line-clamp: 1; font-size: 18px; font-weight: 400; letter-spacing: 0; }
#product_list .info_box .number { margin: 20px 0; color: #65686e; font-size: 14px }
#product_list .textBox { display: grid; grid-template-columns: 1fr 60px; gap: 20px 20px; align-items: center }
#product_list .info_box .classTitle { color: var(--primary) }
#product_list .info_box .btn { padding: 0 }
#product_list .info_box .btn a { position: relative; overflow: hidden; width: 90px; padding: 12px 40px; display: inline-block; border-radius: 100px; text-align: center; }
#product_list .info_box .btn span { font-size: 14px; position: relative; writing-mode: inherit; color: #fff; font-weight: 400; letter-spacing: 1px; text-align: center; width: 15px; height: 15px; background-color: var(--secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 150px; padding: 15px; }
#product_list .info_box .btn span::after { content: ""; position: absolute; top: calc(50% - 5px); right: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid  #fff; transform: rotate(45deg) }
#product_list .info_box .btnn a:before { content: ""; height: 100%; width: 100%; display: block; position: absolute; bottom: 0; left: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--triadic2); }
.producbox table { margin: 15px 0; width: 100%; border-collapse: collapse }
.producbox td,.producbox th { padding: 10px; border: 1px solid #d2d3d5; }
/* book_list */
#book_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
#book_list li .bookItem .img_scale img { width: 100%; aspect-ratio: 4/3.5; object-fit: cover }
#book_list li .bookItem .info_box { width: 100% }
#book_list li .bookItem .info_box .h3title { font-size: 20px; height: auto; margin: 20px 0 10px 0; border-bottom: 1px solid #b9b9b9; padding-bottom: 8px; font-weight: 600; line-height: 190% }
#book_list li .bookItem .info_box .text { -webkit-line-clamp: 2; height: auto }
/* album_list */
#album_list { margin-bottom: 2vw; -moz-column-count: 4; -moz-column-gap: 15px; -webkit-column-count: 4; -webkit-column-gap: 15px; column-count: 4; column-gap: 15px; grid-gap: 15px; display: grid; grid-template-columns: repeat(4,1fr); }
#album_list >div .d_block { width: 100%; height: 350px; overflow: hidden; display: flex; flex-direction: column }
#album_list >div .d_block img { width: 100%; height: 250px; object-fit: contain; object-position: revert; background: #fff; }
#album_list >div .d_block .imgTxt { font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 500; padding: 15px 15px; background-image: url(/images/39/img-s-t-bg.png); height: 50px; }
/* pagenav */
#pagenav { padding: 50px 0 20px; }
#pagenav a,#pagenav strong { margin: 0 10px; display: inline-block; font-weight: 400; vertical-align: middle; }
#pagenav a:first-child,#pagenav a:last-child { line-height: 9px; }
#pagenav strong { color: var(--primary); }
#pagenav a[class^="page-"] { float: left; width: calc(50% - 20px); display: flex; align-items: center; }
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; vertical-align: text-top; font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 600; }
#pagenav a[class^="page-"] i { margin: 0 10px 0 0; display: inline-block; }
#pagenav a.page-next { float: right; text-align: right; }
#pagenav a.page-next font { text-align: right; }
#pagenav a.page-next i { margin: 0 0 0 10px; }
.bookinfo { position: relative }
.bookinfo .back { margin-top: 0px; text-align: center; display: flex; align-items: center; justify-content: center; position: relative }
.bookinfo a.atag_item { position: absolute; top: 0; right: 0; width: 100%; height: 100% }
.bookinfo .back a { position: relative; overflow: hidden; width: 180px; padding: 10px 30px; display: inline-block; display: flex; align-items: center; justify-content: center; }
.bookinfo .back font { text-align: left; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: #4f3c30 }
.bookinfo .back font { letter-spacing: 1px; font-size: 12px; position: relative; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; color: #fff; margin-left: 30px; }
.bookinfo .back a:before { content: ""; height: 100%; width: 0; display: block; position: absolute; bottom: 0; left: -22px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background-color: var(--primary); -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg) }
.bookinfo .back a::after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #6d6d6d; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); z-index: -1; transform-origin: top left; transition: all 1.1s ease-in-out; -webkit-transition: all 1.1s ease-in-out }
.bookinfo .back a:hover font { color: #eefaff }
.bookinfo:hover a:before { width: 100% }
.bookinfo .back a svg { display: block; text-align: center; color: #ffffff; width: 18px; height: 18px; fill: #fff; z-index: 10; }
/* form_box */
.form_box { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse }
.form_box .description_box { width: 40% }
#form1 { width: 55% }
.form_box p.note { display: flex; align-items: flex-end; border-bottom: 1px solid #dad4d4; position: relative; margin-bottom: 27px; padding-bottom: 20px }
.form_box p.note:after { content: ''; position: absolute; left: 0; bottom: -2px; width: 30px; height: 2px; background: #172a88 }
.form_box p.note b { font-size: 20px; margin-right: 10px; color: var(--primary) }
.form_box p.note b { font-weight: 600; font-size: 20px; color: var(--complement); position: relative; margin-right: 10px }
.form_box p.note b::first-letter { color: var(--primary) }
.form_box p.note .red,.form_box p label span { color: #e82929 }
.form_box p label { color: #000; margin-bottom: 5px }
.form_box p { margin-bottom: 30px; width: calc((100%/1) - 0px); margin-right: 30px }
.form_box p select { background: url(/images/39/arrow3.png) no-repeat scroll 100% center #f6f8fa; background-repeat: no-repeat; background-position: 98% 50%; padding: 15px 10px; }
.form_box input#Checknum { margin-right: 10px; width: 100px; }
.form_box #btnOK { padding: 5px 10px; width: 250px; color: #fff; }
input,textarea { padding: 10px 10px; background-color: #f6f8fa; width: calc(100% - 20px) }
/* lodbg */
[data-action="loader"] { width: 100vw; height: 100vh; background: rgba(var(--black-rgb),.3); line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1; }
[data-action="loader"] .loader_circle { border: 2px rgba(var(--black-rgb),.6) solid; border-left-color: rgba(var(--white-rgb),.4); }
#lodbg { opacity: 1; z-index: 99999; }
#reservation_area { background-color: var(--bg-cream); color: var(--info); font-family: var(--font-family); line-height: 1.6; position: relative; padding-bottom: 60px; }
/* 背景裝飾 */
#reservation_area .deco-item { position: absolute; z-index: 1; pointer-events: none; display: none; }
#reservation_area .left { top: 10%; left: 0%; }
#reservation_area .left-top { top: 30%; left: 0; }
#reservation_area .left-bottom { left: 0; bottom: 20%; }
#reservation_area .right { top: 2%; right: 0; }
#reservation_area .right-top { top: 14%; right: 5%; }
#reservation_area .right-bottom { right: 0; bottom: 28%; }
@media screen and (min-width:961px) {
  #reservation_area .deco-item { display: block; }
}
/* 表單主視覺區 */
#reservation_area #reservation-hero { padding: 70px 8% 20px; text-align: center; position: relative; z-index: 2; }
#reservation_area #reservation-hero .hero-tag { display: inline-block; padding: 0.5rem 2rem; background: var(--primary); color: var(--white); border-radius: 50px; font-weight: 700; margin-bottom: 2rem; }
#reservation_area #reservation-hero .main-title { font-size: clamp(2.4rem,4vw,3rem); color: var(--info); font-weight: 700; line-height: 1.15; margin-bottom: 30px; text-align: center; }
#reservation_area #reservation-hero .main-title .c-primary { font-size: clamp(2.4rem,4vw,3rem); color: var(--primary); font-weight: 700; line-height: 1.15; vertical-align: initial; }
#reservation_area #reservation-hero .sub-title { font-size: 1.25rem; max-width: 600px; margin: 0 auto; text-align: center; }
/* 表單容器區 */
#reservation_area #reservation-form-section { padding: 40px 8%; max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
/* 參考圖片風格的手繪感表單卡片 */
#reservation_area #reservation-form-box { background: var(--white); border: var(--border-sketch); border-radius: 25px 50px 20px 45px; overflow: hidden; box-shadow: 12px 12px 0px rgba(0,0,0,0.05); position: relative; }
/* 表單標題裝飾區 */
#reservation_area .form-header { background: #FFF5CC; padding: 2rem; text-align: center; border-bottom: var(--border-sketch); }
#reservation_area .form-header h2 { font-size: 1.8rem; color: var(--primary); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 15px; }
/* 表單內容區 */
#reservation_area .form-body { padding: 3rem 4rem; }
#reservation_area .form-group { margin-bottom: 2rem; }
#reservation_area .form-row { display: flex; gap: 20px; margin: 0; }
#reservation_area .form-col { flex: 1; }
#reservation_area .form-group .nowrap_box { display: flex; align-items: center; gap: 40px; }
#reservation_area .form-label { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 0.8rem; padding-left: 5px; }
#reservation_area .form-input,#reservation_area .form-textarea,#reservation_area .form-group input { width: calc(100% - 2.2rem); padding: 1rem; border: 2px solid #ddd; border-radius: 15px; font-family: var(--font-family); font-size: 1rem; transition: all 0.3s ease; background: var(--bg-cream); }
#reservation_area .form-input:focus,#reservation_area .form-textarea:focus { outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 10px rgba(29,92,183,0.1); }
#reservation_area .form-textarea { height: 150px; resize: none; }
/* 提交按鈕 */
#reservation_area .form-submit-btn { width: 200px; padding: 1.5rem; background: var(--primary); color: var(--white); border: var(--primary); border-radius: 50px; font-size: 1.4rem; font-weight: 900; cursor: pointer; transition: all 0.3s var(--ease-bounce); display: flex; align-items: center; justify-content: center; gap: 10px; margin: 1rem auto 0; }
#reservation_area .form-submit-btn:hover { background: var(--secondary); color: var(--primary); transform: scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
/* 品牌裝飾小熊 */
#reservation_area #bear-companion { position: absolute; top: 10px; right: -70px; width: 210px; animation: float-bear 6s infinite ease-in-out; }



@keyframes float-bear {
  0%,100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-15px) rotate(-5deg); }
}
/* 響應式優化 */
@media (max-width:992px) {
  #reservation_area .form-body { padding: 2.5rem 2rem; }
  #reservation_area #bear-companion { right: -70px; width: 190px; }
}
@media (max-width:600px) {
  #reservation_area #reservation-hero .main-title { font-size: 2.5rem; }
  #reservation_area .form-header h2 { font-size: 1.5rem; }
  #reservation_area .form-submit-btn { font-size: 1.2rem; padding: 1.2rem; }
}

@media screen and (min-width:1281px) {
  #product_list li:hover .info_box .line { width: 100% }
  #news_list li:hover .info_box { bottom: 30px }
  #news_list li:hover::before { -webkit-transform: translate(-20px,20px); transform: translate(-20px,20px); opacity: 1 }
  #news_list li:hover .plus { right: 40px }
}
@media screen and (min-width:981px) {
      aside{
    width: 100%;
}
  #sidebtn { display: none; }
  aside .btnBox { margin-top: 0 }
  aside >ul {gap: 0 7px;display: flex;align-items: center;justify-content: flex-start;width: 100%;}
  aside >ul >li { position: relative; display: block; overflow: hidden; width: 100%; padding: 16px 0; }
  aside >ul >li a { padding: 11px 20px; display: block; border: 0; }
  aside >ul >li .btnBox a { border-radius: 99px; -webkit-box-pack: center; -webkit-box-align: center; padding: 16px 10px; color: var(--info); letter-spacing: 1px; text-align: center; line-height: 32px; font-size: 24px; font-weight: 500; }
  aside >ul li b[data-action="sideOpen"] { display: none; }
  aside >ul { overflow: visible; }
  aside >ul >li:hover { overflow: visible; position: relative }
  aside >ul >li.action .btnBox a { color: var(--primary); font-weight: 700; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #1D5CB7; border-radius: 12px; }
  aside >ul >li:hover ul.subUL { opacity: 1 }
  aside >ul >li ul.sub2UL li:hover a { color: var(--primary) }
}
@media screen and (max-width:1280px) {
  .bannerArea .Img { margin-top: 0; transform: unset; width: 100%; }
  .bannerArea:after,.bannerArea .Img:after { display: none; }
  .newscategory_nav aside >ul { gap: 10px; display: flex; align-items: center; justify-content: center; height: auto; background: rgb(255 255 255/0%); position: relative; padding: 20px 0 10px; }
  .newscategory_nav aside >ul >li { position: relative; display: inline-block; }
  .newscategory_nav aside >ul >li:not(:first-child) { border-top: 0px solid #ccc; }
  .newscategory_nav aside >ul >li .btnBox a { border-radius: 99px; -webkit-box-pack: center; -webkit-box-align: center; padding: 10px 15px; background-color: #f0f0f0; letter-spacing: 1px; color: var(--primary); text-align: center; font-size: 15px; }
  .newscategory_nav aside >ul li b[data-action="sideOpen"] { display: none }
  .newscategory_nav aside >ul >li:hover { overflow: visible; position: relative }
  .newscategory_nav aside >ul >li:hover .h4 a,aside >ul >li.action .btnBox a { color: var(--white); background-color: var(--primary); }
  .workframe { width: 75%; }
  .bannerText .pag_tit { font-size: 1.2rem; padding: 20px 50px 10px 20px; }
  .bannerText em { font-size: 3rem; }
  .bannerText .pag_tit:after { margin-top: 10px; }
  .bread { top: 45% }
  #sub_banner { height: 340px; transform: unset; }
  #album_list,#article_list { grid-template-columns: repeat(2,1fr) }
  #content_wrap .page_subject { padding-bottom: 10px; margin-bottom: 2rem; display: flex; flex-direction: column-reverse; gap: 20px; padding-top: 0; }
  #content_wrap .page_subject .pag_tit { font-size: 22px; }
}
@media (max-width:1180px) {
  #news_list li .plus { display: none }
  #news_list li .info_box { width: calc(100% - 20px) }
  #news_list li img { height: 220px; }
  #news_list,#book_list { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width:1024px) {
  .form_box { display: flex; flex-direction: column }
  .form_box .description_box,#form1 { width: 100% }
  #article_list img { height: 35vw }
  #product_list { display: flex; flex-wrap: wrap }
  #product_list li { width: calc((100%/2 ) - 30px); display: flex; flex-direction: column; align-items: flex-start }
}
@media screen and (max-width:980px) {
  #content_wrap { padding: 40px 0px; }
  aside { position: relative; }
  aside { width: 100%; border: 1px solid #bdbdbd; }
  aside .btnBox { margin-top: 0; }
  aside #sidebtn { display: flex; padding: 12px; width: 100%; background: #fff; align-items: center; justify-content: center; }
  aside #sidebtn i { right: 20px; }
  aside >ul { position: absolute; overflow: hidden; margin-top: 1px; width: 100%; height: 0; top: 0; left: 0; z-index: 1; background-color: var(--white); }
  aside >ul.open { height: auto; border-width: 1px; top: 50px; background-color: #fff; -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10 }
  aside >ul >li { position: relative }
  aside >ul >li a { padding: 10px 20px; display: block; }
  aside >ul >li b { display: none; }
  aside >ul >li .btnBox a { padding: 10px 15px; }
  aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1 }
}
@media screen and (max-width:761px) {
  #product_list { margin: auto; }
  #product_list .info_box article { height: 50px; -webkit-line-clamp: 2; }
}
@media screen and (max-width:640px) {
  .bannerText em { font-size: 32px; }
  .bannerArea .Img { padding-left: 0; }
  .bannerArea .c-circleSvg { display: none; }
  .form_box input#Checknum { width: calc(100% - 90px) }
  #album_list { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin-bottom: 8vw; }
  #news_list,#article_list { grid-template-columns: 1fr }
  #news_list li { margin-top: 0; margin-bottom: 0 }
  #sub_banner { height: 230px; }
  #about_area .img_item { width: 80vw; height: 50vw }
  #product_list li { width: calc((100%/1 ) - 20px); }
  #wrap:before { width: 3.5vw }
  #pagenav { padding: 20px 0 20px; }
}
@media screen and (max-width:540px) {
  #product_list .info_box { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
  .waylink ol { padding: 0 20px 0 0; }
  #product_list { width: 100%; }
  #product_list li { width: 100%; }
  #album_list { grid-template-columns: repeat(1,1fr) }
  #album_list >div .d_block { height: 300px }
  #album_list >div .d_block img { height: 200px }
}