@charset "utf-8";
@import url("ugc_ui.css");
@import url("ugc_content.css");
@import url("ugc_animation.css");

/*------------------------------------------------html5 標籤元素設定------------------------------------------------*/
header, nav, section, article, aside, time, footer { display:block;}

/*------------------------------------------------全域基本設定------------------------------------------------*/
:root {
  scroll-padding-top:80px;
}
/*寬高計算模式*/
*, *:before, *:after { box-sizing:border-box;}
/*根元素*/
html, body { padding:0; margin:0; }
html { height:100vh; -webkit-text-size-adjust:100%;
/*錨點切換順暢*/
scroll-behavior: smooth;
/*針對 Safiri Mobile 旋轉時自動放大做的調整*/
-webkit-text-size-adjust:100%;
font-size:125%;
/*背景尺寸*/
background-size:contain;}
body { font-family:'微軟正黑體', sans-serif; font-dispaly:swap; font-size:1rem; line-height:1.5;}

div { display:block; width:100%; height:auto; /*背景設為透明*/background:transparent;}
form { display:block; width:100%; height:auto; overflow:hidden;}

/*表格*/
td{
/*讓過長的產品名稱強制斷行*/
word-wrap:break-word; word-break:break-all;}

/*連結*/
/*解決 IE <a> 標籤內沒有元素就無法點選的問題*/
a { background:rgba(0,0,0,0);
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
a:link,
a:visited { color:black;}
a:hover,
a:active { color:#5185c5;}

/*圖片*/
img { max-width:100%; height:auto; border:none;}
a img { border:0;}
/*針對產品放大鏡做修正*/
.jqZoomWindow img { max-width:none;}
/*=======================================全域設定=======================================*/
.u-wrapper { width:100%; height:auto; overflow:hidden; position:relative; padding-top:80px; background:url(/tw/Images/Layout/RWD/body.png) 0 0 no-repeat; background-size:25vw;}

/*共用元件設定------------------------*/
.max-w-box { display:block; width:100%; margin:0 auto;}

/*字級大小設定*/
/*小*/
.fontsize1 { font-size:1rem;}
/*中*/
.fontsize2 { font-size:1.25rem;}
/*大*/
.fontsize3 { font-size:1.5rem;}
/*巨*/
.fontsize4 { font-size:1.75rem;}

/*=======================================上方設定=======================================*/

.fixed-button { width:100px; height:auto; position:fixed; right:1px; top:50%; margin-top:-90px; opacity:0; z-index:1;  transition:all .5s;}
.fixed-button.Ani_o { margin-top:-160px; opacity:1;}
.fixed-button a { display:block; width:100px; height:100px; line-height:155px; text-align:center; margin-bottom:10px; font-size:14px; text-decoration:none;
border-radius:100%;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);  transition: all 0.3s ease;}
.fixed-button a:last-child { margin-bottom:0;}
.fixed-button a:hover,
.fixed-button a:active { box-shadow: 0 10px 20px rgba(0,0,0,0.2); transform: translateY(-5px);}
.fixed-button a.fixed-btn-member { background:url(/tw/Images/Layout/RWD/fixed-button-1.png) 0 0 no-repeat,#fff; background-size:contain;}
.fixed-button a.fixed-btn-booking { background:url(/tw/Images/Layout/RWD/fixed-button-2.png) 0 0 no-repeat,#fff; background-size:contain;}
.fixed-button a.fixed-btn-inquiry { background:url(/tw/Images/Layout/RWD/fixed-button-3.png) 0 0 no-repeat,#fff; background-size:contain;}
.fixed-button a.fixed-btn-line { background:url(/tw/Images/Layout/RWD/fixed-button-4.png) 0 0 no-repeat,#fff; background-size:contain;}
.fixed-button a.fixed-btn-plans { background:url(/tw/Images/Layout/RWD/fixed-button-5.png) 0 0 no-repeat,#fff; background-size:contain;}



/*header設定------------------------*/
.header { height:auto; float:left; position:fixed; top:0; left:0; z-index:9;  transition:background .5s;}
.wrapper-fixed .header { background:white;
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);}

/*header設定------------------------*/
.header > .max-w-box { max-width:1570px; padding:0 10px; height:80px;
display: flex; align-items:center; justify-content:space-between;
flex-wrap:wrap;}
.header > .max-w-box > * { flex-shrink:0;}

/*logo設定------------------------*/
.header .logo { width:auto; height:auto; float:left; margin:0;}
.header .logo a { display:block; width:100%; height:auto; overflow:hidden;}
.header .logo a img { display:block; max-height:43px; float:left;}
.header .logo a img + span.logo-txt { display:none;}

/*nav設定------------------------*/
.header .nav { position:relative; z-index:1; width:auto;}
.header .nav * { padding:0; margin:0; list-style:none; text-decoration:none;}
.header .nav ul.menu { width:100%; max-width:1400px; margin:0 auto; height:80px; 
display: flex;
justify-content:space-between;
flex-wrap:wrap;}
.header .nav ul.menu:before {}
.header .nav ul.menu li.menu-li { flex-shrink:0; width:auto; font-size:20px; text-align:center; float:left; position:relative;}
.header .nav ul.menu li.menu-li.menu-li-mobile { display:none;}
.header .nav ul.menu li.menu-li:before { content:''; display:block; width:100%; height:4px; position:absolute; left:0; bottom:5px; background:#f1bf65; opacity:0;
border-radius:2.5px;}
.header .nav ul.menu li.menu-li a { display:block; width:100%; height:auto; line-height:80px; overflow:hidden; position:relative; z-index:1; float:left;
/*不斷行*/
white-space:nowrap;
/*顯示大寫字母*/
text-transform:uppercase;
/*超出範圍顯示"..."*/
white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
.header .nav ul.menu li.menu-li > a { padding:0 10px;}
.header .nav ul.menu li.menu-li a:link,
.header .nav ul.menu li.menu-li a:visited { color:black;}
.header .nav ul.menu li.menu-li:hover a:link,
.header .nav ul.menu li.menu-li:hover a:visited,
.header .nav ul.menu li.menu-li:hover a:hover,
.header .nav ul.menu li.menu-li:hover a:active { color:#f1bf65;}
.header .nav ul.menu li.menu-li ul.sub-menu { width:auto; min-width:100%; height:0; overflow:hidden; left:0; top:65px; position:absolute; z-index:9999; display:block;opacity:0;
 background:#7facd8; font-size:0.8em;}
.header .nav ul.menu li.menu-li ul.sub-menu.sub-menu2.mobile { display:none;}
.header .nav ul.menu li.menu-li:nth-child(4) ul.sub-menu,
.header .nav ul.menu li.menu-li:nth-child(6) ul.sub-menu { left:auto; right:0;}
.header .nav ul.menu li.menu-li:nth-child(5) ul.sub-menu { left:50%; margin-left:-109px;}
.header .nav ul.menu li.menu-li.en:before { display:none;}
.header .nav ul.menu li.menu-li.en { display: flex; align-items:center; justify-content:center;flex-wrap:wrap;}
.header .nav ul.menu li.menu-li.en a { width:50px; height:50px; text-align:center; border:1px solid #7facd8; line-height:50px;
border-radius:100%;}
.header .nav ul.menu li.menu-li.en a:link,
.header .nav ul.menu li.menu-li.en a:visited { color:#7facd8;}
.header .nav ul.menu li.menu-li.en a:hover,
.header .nav ul.menu li.menu-li.en a:active { color:white; border:1px solid #7facd8; background:#7facd8;}
.header .nav ul.menu li.menu-li ul.sub-menu li { display:block; width:100%; height:auto; overflow:hidden; float:left;}
.header .nav ul.menu li.menu-li ul.sub-menu li a { display:block; width:100%; height:50px; overflow:hidden; padding:10px; line-height:30px; text-align:center;
/*不斷行*/
white-space:nowrap;}
.header .nav ul.menu li.menu-li ul.sub-menu li a:link,
.header .nav ul.menu li.menu-li ul.sub-menu li a:visited { color:white;}
.header .nav ul.menu li.menu-li ul.sub-menu li a:hover,
.header .nav ul.menu li.menu-li ul.sub-menu li a:active { color:white; background:#f1bf65;}
.header .nav ul.menu li.menu-li:hover:before { opacity:1;}
.header .nav ul.menu li.menu-li:hover ul.sub-menu { height:auto; top:80px; opacity:1;}

/*共用banner設定------------------------*/
.swiper-slide img.m768-hide{ display:block;}
.swiper-slide img.m768-show{ display:none;}
.swiper-slide img.m768-hide { aspect-ratio: 1570/435; object-fit: cover;}
.swiper-slide img.m768-show { aspect-ratio: 768/300; object-fit: cover;}


.PageMenuTop { width:100%; height:auto; overflow:hidden; font-size:0.8em; }
.PageMenuTop * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageMenuTop .slide-menu > ul { display: flex; justify-content: center; align-items: center; gap: 20px 0; margin-bottom:10px; }
.PageMenuTop .slide-menu > ul > li { display:inline-block; width:auto; }
.PageMenuTop .slide-menu > ul > li a { display:block; width:100%; line-height:65px; font-size: 32px; font-weight: bold; color: #999; cursor: pointer; position: relative; padding: 0 10px; transition: color 0.3s;}
.PageMenuTop .slide-menu > ul > li a.Active,
.PageMenuTop .slide-menu > ul > li.active a,
.PageMenuTop .slide-menu > ul > li.Active a{ color: #5b87c4; border:1px solid #5b87c4; border-bottom:0;  border-radius:20px 20px 0 0; }
.PageMenuTop .slide-menu > ul > li a:hover,
.PageMenuTop .slide-menu > ul > li a:active{ color: #5b87c4; }
.NoResult { text-align:center; color:red;}


/*=======================================下方設定=======================================*/
/*sitemap 設定------------------------*/
.sitemap { background:url(/tw/Images/Layout/RWD/sitemap.jpg) left bottom no-repeat,#e7f2fa; font-size:20px;  padding:40px 0; background-size:contain;}
.sitemap * { padding:0; margin:0; list-style:none; text-decoration:none;}
.sitemap .max-w-box { max-width:none; overflow:hidden; margin:0 auto; width:1230px; max-width:100%; padding:0 10px; position:relative;
display: flex;
flex-wrap:wrap;
justify-content:space-between;}
.sitemap .max-w-box dl { flex-shrink:0; width:143px; max-width:calc( 100% / 6 ); height:auto; overflow:hidden; float:left;}
.sitemap .max-w-box dl:nth-child(6n+1) { clear:both;}
.sitemap .max-w-box dl:nth-child(6n+6) { margin-right:0;}
.sitemap .max-w-box dl > * { width:100%; height:auto; overflow:hidden;}
.sitemap .max-w-box a { display:block; width:100%; height:auto; overflow:hidden; font-weight:bold; text-align:center; line-height:1.4; padding:10px 0;}
.sitemap .max-w-box dt { font-size:20px; font-size:17px;}
.sitemap .max-w-box dt a { color:#5185c5; line-height:2.2; padding:0;}
.sitemap .max-w-box dd { font-size:16px; line-height:2.2; font-size:15px;}
.sitemap .max-w-box dd a:link,
.sitemap .max-w-box dd a:visited { color:#555;}
.sitemap .max-w-box dd a:hover,
.sitemap .max-w-box dd a:active { color:#5185c5;}

/*Footer設定------------------------*/
.footer.max-w-box { max-width:none; position:relative; padding-bottom:65px;}
.copyright { width:100%; height:auto; overflow:hidden; background:white;}
.copyright .max-w-box { overflow:hidden; margin:0 auto; width:1230px; max-width:100%; padding:80px 10px; position:relative;
display: flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;}
.copyright .max-w-box > div { display:inline-block; width:auto; height:auto; overflow:hidden; font-size:16px; margin:0 10px;}
.copyright .max-w-box > div.logo img { max-height:43px;}
.copyright .max-w-box > div div { display:block; width:100%; text-align:left;}
.copyright .max-w-box > div small { font-size:14px; color:#555;}
.copyright .max-w-box > div.c-info { height:72px; position:relative; top:10px;}
.copyright .max-w-box > div.icon { padding:5px 0; overflow:hidden;}
.copyright .max-w-box > div.icon a { display:block; width:40px; height:40px; border-radius:100%; padding:5px; margin:0 5px; float:left;
background-image: linear-gradient(180deg, rgba(100, 147, 203, 1) 0%, rgba(50, 85, 145, 1) 100%);}
.copyright .max-w-box > div.icon a:hover,
.copyright .max-w-box > div.icon a:active { transform: translateY(-5px);box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.copyright .max-w-box > div.icon a img { display:block; max-width:100%; height:auto; max-height:30px;}
.copyright .copyright-box { width:100%; height:auto; overflow:hidden; background:#00286c; color:white; padding:10px; font-size:16px; text-align:center;}

/*優吉兒網站連結*/
.uGear { width:165px; height:60px; position:absolute; bottom:0; right:0; text-align:left;}
.uGear:before { content:''; display:block; width:100%; height:35px; float:left; background:url(/tw/Images/Layout/uGear/truste_Ugear.png) left top no-repeat;}
.uGear:hover:before {background:url(/tw/Images/Layout/uGear/truste_Ugear_o.png); background-repeat:no-repeat;}
.uGear a { display:inline-block; width:auto; height:30px; line-height:30px; font-size:0.6rem; color:black; text-decoration:none; float:left; padding-right:5px;}
.uGear a:last-child { padding-right:0;}

@media only screen and (min-width:0px) and (max-width:1280px) {
	.u-wrapper.wrapper-fixed .header .logo-a { width:220px; height:60px; background-size:auto calc( 100% - 10px );}
	}

@media only screen and (min-width:0px) and (max-width:1080px) {
html, body {
/*解決手機溢位隱藏的問題*/
position:relative;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box dl { width:33.33%; max-width:none; margin-bottom:10px;}
.sitemap .max-w-box dl:nth-child(6n+1) { clear:none; float:left;}
.sitemap .max-w-box dl:nth-of-type(3n+1) { clear:both;}

/*優吉兒網站連結*/
.uGear { top:auto; bottom:0px; right:0px; margin-right:auto;}

}

@media only screen and (min-width:0px) and (max-width:1024px) {
	:root {
  scroll-padding-top:20px;
}
	.header .nav { display:none;}
	
	.page-header,
	.page-content-with-left,
	.page-content { font-size:0.9em;}
	
	.PageMenuTop .slide-menu > ul { justify-content:flex-start;}
	.PageMenuTop .slide-menu > ul > li a {line-height:55px; font-size:1.4rem; }
	.PageMenuTop .slide-menu > ul > li a.Active { border-radius:15px 15px 0 0;  border-radius:15px;}
	.PageMenuTop .slide-menu > ul > li a.Active,
	.PageMenuTop .slide-menu > ul > li.active a,
	.PageMenuTop .slide-menu > ul > li.Active a{ border:1px solid #5b87c4;  border-radius:15px; white-space:nowrap;}
	
	.copyright .max-w-box { justify-content:flex-start;}
	.copyright .max-w-box > div.logo { width:100%; margin:0; margin-bottom:10px;}
	.copyright .max-w-box > div.c-info { top:auto; margin:0; margin-bottom:10px;margin-right:20px;}
	.copyright .max-w-box > div.icon { width:100%; margin:0;}
	
	.fixed-button { width:100px;}
	.fixed-button a { width:100px; height:100px; line-height:160px; font-size:14px;}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.header > .max-w-box { padding:0 20px;}
	.fixed-button.Ani_o { margin-top:-130px;}
	.fixed-button { width:80px;}
	.fixed-button a { width:80px; height:80px; line-height:125px; font-size:12px;}
/*Banner設定------------------------*/
.swiper-container-DefBanner .m768-hide{ display:none;}
.swiper-container-DefBanner .m768-show{ display:block;}

/*共用Banner設定------------------------*/
.swiper-slide img.m768-hide{display:none;}
.swiper-slide img.m768-show{ display:block;}

.page-banner .m768-hide{ display:none;}
.page-banner .m768-show{ display:block;}

    .page-header,
	.page-content-with-left,
	.page-content { font-size:0.85em;}
	
	.PageMenuTop .slide-menu > ul > li a {line-height:45px; font-size:1.2rem; }
	.PageMenuTop .slide-menu > ul > li a.Active { border-radius:10px 10px 0 0; }
	
	.page-content-with-left,
	.page-content { margin:20px auto;}

/*SiteMap設定------------------------*/
	.sitemap { padding:15px 10px; padding:15px 20px;}
.sitemap .max-w-box dl { width:33.33%; text-align:center;}
.sitemap .max-w-box dl:nth-of-type(4n+1) { clear:none; float:left;}
.sitemap .max-w-box dl:nth-of-type(3n+1) { clear:both;}
	.copyright .max-w-box { padding:20px 10px; padding:20px;}
	.copyright .max-w-box > div.c-info { height:auto; width:100%;}
	.footer.max-w-box { padding-bottom:0px;}
/*優吉兒網站連結(有網頁空間資訊時)*/
.uGear { right:auto; margin-right:0; width:100%; background:none; display:flex; align-items:center; justify-content:center; position:static; height:30px; text-align:center; margin:0 auto;}
.uGear:before { display:none;}
.uGear:hover { background:none;}
.uGear span { margin-top:5px;}
.uGear a { color:black; height:30px; line-height:30px; float:none;}
.uGear a:hover { color:black;}
	.sitemap .max-w-box dt { font-size:16px;}
	.sitemap .max-w-box dd { font-size:14px;}
}

@media only screen and (min-width:0px) and (max-width:660px) {
th.m660-hide { display:none;}
td.m660-hide { display:none;}
}

@media only screen and (min-width:0px) and (max-width:540px) {
	.u-wrapper { padding-bottom:50px; padding-bottom:0;}
    .page-header,
	.page-content-with-left,
	.page-content { font-size:0.8em;}
	    
		.PageMenuTop .slide-menu > ul > li a {line-height:35px; font-size:1rem; padding:0 5px; padding:0 10px;}
		
		.page-content-with-left,
		.page-content { margin:10px auto;}
		.sitemap .max-w-box dl { width:50%;}
		.sitemap .max-w-box a { padding:2.5px 10px;}
		
		.fixed-button,
		.fixed-button.Ani_o { right:5px; margin:0; top:auto; bottom:5px;}
		/*.fixed-button,
		.fixed-button.Ani_o{ width:100%; margin-top:0; top:auto; bottom:0; right:0; opacity:1;
		box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
		.fixed-button a { width:33.33%; float:left; margin:0; box-shadow:none; border-radius:0; height:50px; line-height:50px; font-size:14px; text-align:center;  padding-left:40px;}
		.fixed-button a:nth-child(1),
		.fixed-button a:nth-child(2){ border-right:1px solid #eee;}
		.fixed-button a:hover,
		.fixed-button a:active { box-shadow:none; transform:none;}
		.fixed-button a.fixed-btn-member { background:url(/tw/Images/Layout/RWD/fixed-button-1.png) 0 0 no-repeat,#fff; background-size:auto 60px;}
		.fixed-button a.fixed-btn-booking { background:url(/tw/Images/Layout/RWD/fixed-button-2.png) 0 0 no-repeat,#fff; background-size:auto 58px; border-left:1px solid #eee; border-right:1px solid #eee;}
		.fixed-button a.fixed-btn-inquiry { background:url(/tw/Images/Layout/RWD/fixed-button-3.png) 0 0 no-repeat,#fff; background-size:auto 60px;}
		.fixed-button a.fixed-btn-line { background:url(/tw/Images/Layout/RWD/fixed-button-4.png) 0 0 no-repeat,#fff; background-size:auto 60px;}
		.fixed-button a.fixed-btn-plans { background:url(/tw/Images/Layout/RWD/fixed-button-5.png) 0 0 no-repeat,#fff; background-size:auto 60px;}*/
}

@media only screen and (min-width:0px) and (max-width:390px) {
	/*.fixed-button a { text-align:left; padding-left:50px;}*/
	.page-header,
	.page-content-with-left,
	.page-content { font-size:0.75em;}
	.page-header { margin-bottom:10px;}
	.page-content-with-left,
	.page-content { margin:0 auto;}
	.page-content > *:first-child { margin-top:10px;}
	.sitemap { padding:10px 5px;}
	.sitemap .max-w-box dt { font-size:16px;}
	.sitemap .max-w-box dd { font-size:12px;}
	.footer { font-size:12px;}
}