@charset "utf-8";
@import url("ugc_season.css");
@import url("ugc_ui.css");
@import url("ugc_content.css");
@import url("ugC_popup-menu.css");
:root {
  --maincolor-light:#2f3382; 
  --maincolor:#2f3382;
  --maincolor-deep:#2f3382; 
}
/*英文字體預設-粗*/
@font-face {
  font-family:'Lato';
  font-weight:normal;
  font-style:normal;
  src:url('lato-light.eot'); /* For IE6-8 */
  src:local('lato-light'),
       local('lato-light'),
       url('lato-light.ttf') format('truetype');
}
body {
	--max-width:1280px;
	--basic-unit:20px;
	--basic-font-size:20px;
	--linkcolor:black;
	
	--header-height:calc( var(--basic-unit) * 6 );
	
	/*--btn-bg-1:linear-gradient(#0075af, #52c0ec);
	--btn-bg-1-o:linear-gradient(#52c0ec, #0075af);*/
	
	--btn-bg-1:linear-gradient(var(--maincolor), var(--maincolor-light));
	--btn-bg-1-o:linear-gradient(var(--maincolor-light), var(--maincolor));
	
	--btn-bg-main:linear-gradient(var(--maincolor-deep), var(--maincolor));
	--btn-bg-main-o:linear-gradient(var(--maincolor), var(--maincolor-deep));
}
/*------------------------------------------------html5 標籤元素設定------------------------------------------------*/
header, nav, section, article, aside, time, footer { display:block;}

/*------------------------------------------------全域基本設定------------------------------------------------*/
/*寬高計算模式*/
*, *:before, *:after { box-sizing:border-box;}
/*根元素*/
html, body { padding:0; margin:0; background:var(--maincolor);}
html { height:100vh;
/*針對 Safiri Mobile 旋轉時自動放大做的調整*/
-webkit-text-size-adjust:100%;
font-size:var(--basic-font-size);
/*背景尺寸*/
background-size:contain;}
body { font-family:'Lato', '微軟正黑體', sans-serif; font-size:calc( var(--basic-font-size) * 1 ); line-height:1.5;}

div { display:block; width:100%; height:auto; /*背景設為透明*/background:transparent;}
div.Content-B.DefBanner { overflow:hidden;}
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);
/*基礎動畫設定*/
transition:all .5s, transform .5s;}
a:link,
a:visited { color:var(--linkcolor);}
a:hover,
a:active { color:var(--maincolor);}

/*圖片*/
img { max-width:100%; height:auto; border:none;}
a img { border:0;}
/*針對產品放大鏡做修正*/
.jqZoomWindow img { max-width:none;}

/*=======================================全域設定=======================================*/
.u-wrapper { overflow:hidden; position:relative; background:white; padding-top:var(--header-height);}

/*共用元件設定------------------------*/
.max-w-box { display:block; width:100%; max-width:calc( var(--max-width) + 20px ); padding:0 calc( var(--basic-unit) * 0.5 ); margin:0 auto;}

/*字級大小設定*/
/*小*/
.fontsize1 { font-size:calc( var(--basic-font-size) * 0.8 );}
/*中*/
.fontsize2 { font-size:calc( var(--basic-font-size) * 1 );}
/*大*/
.fontsize3 { font-size:calc( var(--basic-font-size) * 1.2 );}
/*巨*/
.fontsize4 { font-size:calc( var(--basic-font-size) * 1.4 );}

/*=======================================上方設定=======================================*/
/*header設定------------------------*/
.header {width:100%; height:var(--header-height); background:#2f3382; float:left; position:relative; z-index:3; position:fixed; top:0; left:0;/*基礎動畫設定*/
transition:height .5s, top .5s;}
.header:before { content:''; display:block; width:300px; height:100%; position:absolute; top:0; left:0; z-index:0;}
.header:after { content:''; display:block; width:400px; height:100%; position:absolute; top:0; right:0; z-index:0;}
.header > .max-w-box { position:relative; z-index:1;}

/*top-menu設定------------------------*/
.header .top-menu { height:calc( var(--basic-unit) * 1.5 ); width:auto; float:right; margin-top:calc( var(--basic-unit) * 1 );}
.header .top-menu * { padding:0; margin:0; list-style:none; text-decoration:none;}
.header .top-menu ul { height:calc( var(--basic-unit) * 1.5 ); overflow:hidden; margin:0 auto; text-align:right; padding:0 10px; padding:0 5px;
/*圓角*/
border-radius:10px;}
.header .top-menu li { display:inline-block; width:auto; height:calc( var(--basic-unit) * 1.5 ); overflow:hidden; text-align:center; font-size:calc( var(--basic-font-size) * 0.7 ); line-height:calc( var(--basic-font-size) * 1.5 ); padding:0; float:left;}
.header .top-menu li a { display:block; padding:0 5px; position:relative;}
.header .top-menu li a img { display:block; max-width:100%; height:auto; max-height:20px; margin:5px 0;}
.header .top-menu li.global a { position:relative; padding-right:0;}
.header .top-menu li.global a:before { content:'EN'; display:block; width:20px; height:20px; line-height:20px; font-size:12px; position:absolute; top:0; left:5px; z-index:1; background:white; color:var(--maincolor); opacity:1; transition:opacity .5s; font-weight:bold; font-family:Arial, Helvetica, sans-serif;
/*圓角*/
border-radius:100%;}
.header .top-menu li.global a:hover:before {opacity:1;background:yellow;}
.header .top-menu li a:after { content:''; display:block; width:1px; height:60%; position:absolute; top:20%; right:0; background:rgba(255,255,255,0.4);}
.header .top-menu li:last-child a:after { display:none;}
.header .top-menu li a:link,
.header .top-menu li a:visited { color:white; opacity:0.8;}
.header .top-menu li a:hover,
.header .top-menu li a:active { color:yellow; opacity:1;}
.header .top-menu li.shop-cart a { text-align:right; position:relative; padding-left:20px;}
.header .top-menu li.shop-cart a i { content:''; display:block; width:20px; height:20px; line-height:20px; font-size:1rem; overflow:hidden; position:absolute; top:5px; left:0; text-align:center;}
.header .top-menu li.shop-cart a i:hover { color:rgba(255,255,255,0.8);}
/*fixed button*/
.header .top-menu li.shop-cart.cart-fixed a { width:60px; height:60px; line-height:60px; background:Crimson; text-align:center; position:fixed; right:10px; bottom:80px; padding:0; z-index:3;
/*圓角*/
border-radius:100%;
display: flex;
align-items:center;
justify-content:center;}
.header .top-menu li.shop-cart.cart-fixed a:link,
.header .top-menu li.shop-cart.cart-fixed a:visited { color:white;}
.header .top-menu li.shop-cart.cart-fixed a i { margin:0 auto; position:static; top:auto; left:auto;}
.header .top-menu li.shop-cart.cart-fixed a i ~ span { position:absolute; top:10px; right:10px; display:block; width:auto; height:20px; line-height:20px; text-align:center; display:block;}

/*header設定------------------------*/
.header > .max-w-box {}

/*logo設定------------------------*/
.header .logo { width:auto; max-width:calc( 25% - 10px ); height:var(--header-height); float:left; margin:0;
transition:height .5s, margin-top .5s, width .5s, max-width .5s;}
.header .logo a { display:block; width:100%; height:var(--header-height); overflow:hidden;
transition:height .5s, padding .5s;
display: flex;
align-items:center;
flex-wrap:wrap;}
.header .logo a img { display:block; height:auto; max-height:var(--header-height); float:left;
transition:max-height .5s;}

.tvl-home .header .logo {transform: scale(1.15);}

.header .logo.corp-sub-logo { max-width:420px;}

/*search設定------------------------*/
.header .search { max-width:200px; overflow:hidden; float:right; position:relative; padding-right:30px;}
.header .search input[type="text"] { width:100%; height:30px; line-height:28px; outline:none; padding:0 5px; color:rgba(0,0,0,0.4); float:left;}
.header .search a.SearchBtn { display:block; width:30px; height:30px; line-height:30px; text-align:center; overflow:hidden; position:absolute; top:0; right:0;}
.header .search a.SearchBtn:link,
.header .search a.SearchBtn:visited,
.header .search a.SearchBtn:hover,
.header .search a.SearchBtn:active { color:black;}

/*nav設定------------------------*/
.header .nav { width:calc( 75% - 10px ); float:right; height:calc( var(--basic-unit) * 2.5 );
/*基礎動畫設定*/
transition:margin .5s, width .5s;}

.header .logo.corp-sub-logo ~ .nav  {width:calc( 100% - 390px );}

.header .nav * { padding:0; margin:0; list-style:none; text-decoration:none;}
.header .nav ul.menu { width:100%; height:auto; background:none;
display: flex;
justify-content:flex-end;
flex-wrap:wrap;}
.header .nav ul.menu li.menu-li { flex-shrink:0; width:auto; height:auto; text-align:center; float:left; position:relative;}
.header .nav ul.menu li.menu-li a { display:block; width:100%; height:auto; overflow:hidden; position:relative; z-index:1; float:left; font-size:calc( var(--basic-font-size) * 0.9 ); height:calc( var(--basic-unit) * 2.5 ); line-height:calc( var(--basic-unit) * 2.5 ); padding:0 10px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
/*不斷行*/
white-space:nowrap;
/*顯示大寫字母*/
text-transform:uppercase;
/*超出範圍顯示"..."*/
white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
.header .nav ul.menu li.menu-li > a:after { content:''; display:block; width:0; height:3px; position:absolute; left:0; bottom:0; background:var(--maincolor-deep); opacity:0;
/*基礎動畫設定*/
transition:all .5s;}
.header .nav ul.menu li.menu-li:hover > a:after { width:100%; opacity:.6;}
.header .nav ul.menu li.menu-li a:link,
.header .nav ul.menu li.menu-li a:visited { color:#f1f5f9; background:none;}
.header .nav ul.menu li.menu-li a:hover,
.header .nav ul.menu li.menu-li a:active { color:white;font-weight:bold; background:none;}

.header .nav ul.menu li.menu-li a.active:link,
.header .nav ul.menu li.menu-li a.active:visited,
.header .nav ul.menu li.menu-li a.active:hover,
.header .nav ul.menu li.menu-li a.active:active { font-weight:bold; background:none;}
.header .nav ul.menu li.menu-li > a.active:after { width:100%; opacity:1;}
.header .nav ul.menu li.menu-li ul.sub-menu { width:auto; height:0; overflow:hidden; left:0; top:calc( var(--basic-unit) * 1.25 ); position:absolute; z-index:9999; display:inline-block;opacity:0; min-width:100%; background:var(--maincolor);
box-shadow:0 0 4px rgba(0, 0, 0, 0.1);}
.header .nav ul.menu li.menu-li ul.sub-menu li { width:100%; height:auto; overflow:hidden; position:relative;}
.header .nav ul.menu li.menu-li ul.sub-menu li a { display:block; width:100%; height:auto; overflow:hidden; padding:10px; line-height:1.5; text-align:left; font-size:calc( var(--basic-font-size) * 0.8 ); position:relative; z-index:1;
/*不斷行*/
white-space:nowrap;}
.header .nav ul.menu li.menu-li ul.sub-menu li:before { content:''; display:block; width:0; height:100%; position:absolute; top:0; left:0;background:var(--maincolor-light); z-index:0; opacity:0;
/*基礎動畫設定*/
transition:opacity .5s, width .5s;}
.header .nav ul.menu li.menu-li ul.sub-menu li:hover:before { width:100%; opacity:1;}
.header .nav ul.menu li.menu-li:hover ul.sub-menu { height:auto; top:calc( var(--basic-unit) * 2.5 ); opacity:1;}

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

.DefBanner .swiper-button-next,
.DefBanner .swiper-button-prev,
.SubBanner .swiper-button-next,
.SubBanner .swiper-button-prev{ opacity:0.4; background:rgba(0,0,0,0.4);
/*基礎動畫設定*/
transition:opacity .5s;}
.DefBanner .swiper-button-next:hover,
.DefBanner .swiper-button-prev:hover,
.SubBanner .swiper-button-next:hover,
.SubBanner .swiper-button-prev:hover{ opacity:1;}
.DefBanner .swiper-button-next i,
.DefBanner .swiper-button-prev i,
.SubBanner .swiper-button-next i,
.SubBanner .swiper-button-prev i{ display:block; width:56px; height:56px; line-height:56px; overflow:hidden; text-align:center; font-size:30px; color:white;}

/*=======================================下方設定=======================================*/
/*sitemap 設定------------------------*/
.sitemap { padding:0; background:#e2e8f0; position:relative; overflow:hidden;}
.sitemap:before { content:''; display:block; width:30%; height:100%; position:absolute; top:0; left:0; z-index:0; opacity:0.8;}
.sitemap:after { content:''; display:block; width:30%; height:100%; position:absolute; top:0; right:0; z-index:0; opacity:0.8;}
.sitemap * { padding:0; margin:0; list-style:none; text-decoration:none;}
.sitemap .max-w-box { overflow:hidden; margin:0 auto; padding:calc( var(--basic-font-size) * 1.2 ) 10px; position:relative; z-index:1;
background: rgb(250, 250, 250);
background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250,1 ) 10%, rgba(250, 250, 250,1 ) 90%, rgba(250, 250, 250,0 ) 100%);
background:none;
}
.sitemap .max-w-box > div { height:auto; overflow:hidden; float:left; max-height:calc( var(--basic-font-size) * 18 ); position:relative; z-index:1;}
.sitemap .max-w-box > div.footer-sitemap { width:75%; border-right:1px solid #ccc; float:left; max-height:calc( var(--basic-font-size) * 21 );
display: flex;
flex-wrap:wrap;
flex-direction:row;}
.sitemap .max-w-box > div.footer-sitemap:before { content:''; display:block; width:1px; height:100%; background:#ccc; position:absolute; top:0; left:calc( 33.33% - var(--basic-font-size) ); z-index:0;}
.sitemap .max-w-box > div.footer-sitemap:after { content:''; display:block; width:1px; height:100%; background:#ccc; position:absolute; top:0; left:calc( 66.66% - var(--basic-font-size) ); z-index:0;}
.sitemap .max-w-box > div.footer-sitemap dl { flex-shrink:0; width:calc( 33.33% - var(--basic-font-size) ) ; height:auto; overflow:hidden; float:left; margin-right:var(--basic-font-size); margin-bottom:calc( var(--basic-font-size) * 1.2 ); float:left;}
.sitemap .max-w-box > div.footer-sitemap dl > * { width:100%; height:auto; overflow:hidden;}
.sitemap .max-w-box > div.footer-sitemap a { display:block; width:100%; height:auto; overflow:hidden; padding:0; line-height:calc( var(--basic-font-size) * 1.2 );
/*基礎動畫設定*/
transition:opacity .5s, color .5s;}
.sitemap .max-w-box > div.footer-sitemap a:link,
.sitemap .max-w-box > div.footer-sitemap a:visited { color:var(--linkcolor); opacity:0.7;}
.sitemap .max-w-box > div.footer-sitemap a:hover,
.sitemap .max-w-box > div.footer-sitemap a:active { color:var(--maincolor-deep); opacity:1;}
.sitemap .max-w-box > div.footer-sitemap dt { font-size:calc( var(--basic-font-size) * 0.9 ); padding:0; font-weight:bold;}
.sitemap .max-w-box > div.footer-sitemap dt a:link,
.sitemap .max-w-box > div.footer-sitemap dt a:visited,
.sitemap .max-w-box > div.footer-sitemap dt a:hover,
.sitemap .max-w-box > div.footer-sitemap dt a:active { color:var(--maincolor-deep); opacity:1;}
.sitemap .max-w-box > div.footer-sitemap dd { font-size:calc( var(--basic-font-size) * 0.8 );}
.sitemap .max-w-box > div.footer-descr { width:25%; padding-left:var(--basic-font-size); line-height:calc( var(--basic-font-size) * 1.2 );}
.sitemap .max-w-box > div.footer-descr .title { color:var(--maincolor-deep); font-size:calc( var(--basic-font-size) * 0.9 ); font-weight:bold;}
.sitemap .max-w-box > div.footer-descr .title ~ * { font-size:calc( var(--basic-font-size) * 0.75 ); opacity:0.7;}
.sitemap .max-w-box > div.footer-descr .title ~ a.btn { padding:5px; line-height:20px; color:white; opacity:1; margin-top:5px; padding-left:30px;}
.sitemap .max-w-box > div.footer-descr .title ~ a.btn:link,
.sitemap .max-w-box > div.footer-descr .title ~ a.btn:visited { background:url(/tw/Images/Layout/UI/phone.png) 5px center no-repeat, #2f3382; border:1px solid #2f3382; background-size:20px 20px;}
.sitemap .max-w-box > div.footer-descr .title ~ a.btn:hover,
.sitemap .max-w-box > div.footer-descr .title ~ a.btn:active { background:url(/tw/Images/Layout/UI/phone.png) 5px center no-repeat, var(--maincolor); border:1px solid var(--maincolor); background-size:20px 20px;}
.sitemap .max-w-box > div.footer-descr .title ~ img { clear:both; display:block; max-width:100%; height:auto; opacity:1;}

.sitemap-corp .max-w-box {max-width: calc( ( var(--max-width) *0.75 ) + 20px );}
.sitemap-corp .max-w-box > div.footer-sitemap { max-height:calc( var(--basic-font-size) * 13 ); width:65%;}
.sitemap-corp .max-w-box > div.footer-sitemap:before { left:calc( 50% - var(--basic-font-size) );}
.sitemap-corp .max-w-box > div.footer-sitemap:after { display:none;}
.sitemap-corp .max-w-box > div.footer-sitemap dl { width:calc( 50% - var(--basic-font-size) ) ;}
.sitemap-corp .max-w-box > div.footer-descr { width:35%;}

/*Footer設定------------------------*/
.footer { padding:15px 0; text-align:center; padding-bottom:70px; margin:0 auto; position:relative; font-size:calc( var(--basic-font-size) * 0.8 ); color:white; background:#2f3382; color:#f1f5f9;}
.footer p { padding:0; margin:0;}
.footer small { font-size:calc( var(--basic-font-size) * 0.6 ); opacity:0.8;}
.footer span { display:inline-block;}
/*gotop*/
.footer .gotop { width:60px; height:60px; overflow:hidden; position:fixed; right:10px; bottom:-60px; z-index:1; opacity:0;} 
.footer .gotop a { display:block; width:60px; height:60px; line-height:60px; text-align:center; background:black; color:white;
/*圓角*/
border-radius:100%;}
.footer .gotop a:hover,
.footer .gotop a:active { background:var(--maincolor);}
.footer .gotop:hover { bottom:20px;}
.footer .gotop:hover a i{
transform: translate(0, -5px);}
/*下拉時顯示*/
.wrapper-fixed .footer .gotop { bottom:10px; opacity:1; display:none;}
/*calendar*/
.footer .calendar { text-align:left; font-size:0.8rem;}
/*descr*/
.footer .descr * { margin:0; padding:0; list-style:none; text-decoration:none;}
.footer .descr .footer-info { overflow:hidden; font-size:0.8rem;
display: flex;
flex-wrap:wrap;}
.footer .descr .footer-info > li { flex-shrink:0; width:33.3%; padding-right:10px;}
.footer .descr .footer-info > li p { font-size:0.6rem; margin-top:20px;}
.footer .descr .footer-info > li p.footer-info-title { margin-bottom:10px; font-weight:bold;}
.footer .descr .footer-info > li a { color:#666;}
.footer .descr .footer-info > li a:hover { color:#eba82c;}
.footer .descr .footer-info > li ul li { margin-bottom:10px; font-size:0.6rem;}
.footer .descr .footer-info ~ p { position:relative; padding-right:150px; min-height:150px;}
.footer .descr .footer-info ~ p img { width:150px; position:absolute; top:0; right:0;}

.privacy-policy { display:block; width:100%; height:auto; overflow:hidden; text-align:center;}
.privacy-policy a,
.privacy-policy a:link,
.privacy-policy a:visited,
.privacy-policy a:hover,
.privacy-policy a:active { color:white; font-size:12px; text-decoration:none;}

/*優吉兒網站連結*/
.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(../Images/Layout/uGear/truste_Ugear.png) left top no-repeat;}
.uGear:hover:before {background:url(../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:white; text-decoration:none; float:left; padding-right:5px;}
.uGear a:last-child { padding-right:0;}

.privacy-agree { position:fixed; width:100%; height:auto; left:0; bottom:0; background:white; padding:10px; font-size:14px; z-index:99999; border-top:1px solid #ccc;
display: flex;
flex-wrap:wrap;
justify-content:space-between;}
.privacy-agree > div { width:auto; height:auto; overflow:hidden; float:left;
flex-wrap:wrap;
display:inline-flex;
align-items:center;}
.privacy-agree > div > span { display:inline-block; width:auto; height:auto; overflow:hidden; float:left;}
.privacy-agree > div > span a,
.privacy-agree > div > span a:link,
.privacy-agree > div > span a:visited {  color:#666;}
.privacy-agree > div > span a:hover,
.privacy-agree > div > span a:active {  color:var(--maincolor-deep);}
.privacy-agree > div > span:last-child { margin-left:20px; background:var(--maincolor-deep); padding:10px; color:white; font-size:16px;
border-radius: 5px; cursor:pointer;}
.privacy-agree > div > span:last-child:hover { background:var(--maincolor);}

@media only screen and (min-width:1081px) and (max-width:9999px) {
/*
.header .nav-fixed { background:none;}
.header .nav-fixed > ul.menu { position:fixed; max-width:100%; top:0; left:0; z-index:9; background:var(--maincolor); justify-content:space-between; overflow:hidden;
box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.5);}
.header .nav-fixed > ul.menu:hover { overflow:visible;}
.header .nav-fixed > ul.menu li.menu-li a { font-size:calc( var(--basic-font-size) * 1 );}
.header .nav-fixed > ul.menu li.menu-li:hover > a { background:var(--maincolor-deep);}
.header .nav-fixed > ul.menu li.menu-li[style="max-width: 33.3333%;"] { width:33.33%;}
.header .nav-fixed > ul.menu li.menu-li[style="max-width: 12.5%;"] { width:12.5%;}*/
.u-wrapper.wrapper-fixed { padding-top:70px;}
.u-wrapper.wrapper-fixed .header { top:-50px;
box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.5);}
.u-wrapper.wrapper-fixed .header .logo { width: calc( 25% - 10px ); height:70px; margin-top:50px;}
.u-wrapper.wrapper-fixed .header .logo a { height:70px; padding:7.5px 0;}
.u-wrapper.wrapper-fixed .header .logo a img { max-height:55px;}
.u-wrapper.wrapper-fixed .header .nav { margin-top:10px;}

.u-wrapper.wrapper-fixed .header .logo.corp-sub-logo { width:auto; max-width:320px;}
.u-wrapper.wrapper-fixed .header .logo.corp-sub-logo ~ .nav {width: calc( 100% - 320px );}

	}
	
@media only screen and (min-width:0px) and (max-width:1320px) {
	.tvl-home .header .logo {transform: scale(1);}
	}

@media only screen and (min-width:0px) and (max-width:1300px) {
	.header .nav ul.menu li.menu-li a { font-size:15px; padding:0 5px;}
	.sitemap .max-w-box { padding:calc( var(--basic-font-size) * 1.2 ) 10vw;}
	.sitemap .max-w-box > div.footer-sitemap dd { font-size:calc( var(--basic-font-size) * 0.7 );}
	}

@media only screen and (min-width:0px) and (max-width:1100px) {
	.header .nav ul.menu li.menu-li a { font-size:14px;}
	}

@media only screen and (min-width:0px) and (max-width:1080px) {
html, body {
/*解決手機溢位隱藏的問題*/
position:relative;}
body  {
	--header-height:calc( var(--basic-unit) * 4 ); 
}
/*header設定------------------------*/
.u-wrapper { padding-top:var(--header-height);}
.header { position:fixed; top:0; left:0;
box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.5);}
.header .logo { max-width:none;}
.header .logo a { padding:calc( var(--basic-unit) * 0.5 ) 0;}
.header .logo a img { max-height:calc( var(--header-height) - var(--basic-unit) );}
.header .search { margin-right:10px;}
.header .nav { display:none;}
.header .top-menu { margin-right:calc( var(--basic-unit) * 3 ); margin-top:calc( var(--basic-unit) * 1.25 );}

/*Footer設定------------------------*/
.footer { padding:10px; padding-bottom:60px;}

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

}

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

/*SiteMap設定------------------------*/
.sitemap { padding-right:15vw; background:#eee; padding-right:0;}
.sitemap:before { display:none;}
.sitemap:after { display:none;}
.sitemap .max-w-box { padding:calc( var(--basic-font-size) * 0.5 ) 10px; background:none;}
.sitemap .max-w-box > div.footer-sitemap { width:100%; border:0; max-height:none; flex-direction:row;}
.sitemap .max-w-box > div.footer-sitemap dl { width:calc( 50% - 10px ); float:left; margin-right:20px; margin-bottom:10px; background:white; border:1px solid rgba(0,0,0,0.05);}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(odd) { margin-right:0;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(1) { order:1; width:100%; margin-right:0;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(2) { order:2;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(3) { order:3;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(4) { order:4;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(5) { order:5; margin-right:0;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(6) { order:6; margin-right:20px;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(7) { order:8; margin-right:20px;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(8) { order:9; margin-right:0;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(9) { order:7;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(10) { order:10;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(11) { order:11;}
.sitemap .max-w-box > div.footer-sitemap:before { display:none;}
.sitemap .max-w-box > div.footer-sitemap:after { display:none;}
.sitemap .max-w-box > div.footer-sitemap dt a:link,
.sitemap .max-w-box > div.footer-sitemap dt a:visited,
.sitemap .max-w-box > div.footer-sitemap dt a:hover,
.sitemap .max-w-box > div.footer-sitemap dt a:active { background:var(--maincolor-deep); padding:10px; color:white;}
.sitemap .max-w-box > div.footer-sitemap dd { border-bottom:1px solid rgba(0,0,0,0.05);}
.sitemap .max-w-box > div.footer-sitemap dd a { padding:10px;}



/*SiteMap設定 原620------------------------*/
.sitemap { padding-right:0; }
.sitemap .max-w-box > div.footer-sitemap dl { width:100%;}
.sitemap .max-w-box > div.footer-sitemap dl:nth-child(1) { width:100%;}

.sitemap .max-w-box > div.footer-sitemap .dl-group dt { position:relative;}
.sitemap .max-w-box > div.footer-sitemap .dl-group dt:before { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:url(/tw/Images/Layout/UI/down.png) right center no-repeat;}
.sitemap .max-w-box > div.footer-sitemap .dl-group.active dt:before { background:url(/tw/Images/Layout/UI/up.png) right center no-repeat;}
.sitemap .max-w-box > div.footer-sitemap .dl-group dd { display:none;}


.sitemap .max-w-box > div.footer-descr { width:100%; padding-left:0;}

.footer { text-align:left;}
.uGear { right:auto; left:10px;}
/*優吉兒網站連結(有網頁空間資訊時)*/
.uGear { right:auto; margin-right:0; width:100%; background:none; position:static; height:30px; text-align:left; margin:0 auto;}
.uGear:before { display:none;}
.uGear:hover { background:none;}
.uGear span { margin-top:5px;}
.uGear a { height:30px; line-height:30px;}

.privacy-policy { text-align:left;}
}

@media only screen and (min-width:0px) and (max-width:768px) {
/*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;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box dl { width:33.33%;}
.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;}

.footer { padding-bottom:0;}

.footer {  overflow:hidden; padding-right:33vw; font-size:14px;}
.footer .TopCalendar { text-align:center;}
.footer .max-w-box .FooterInfo > li { width:49%; margin:0 0 1.5rem 1%;}
.footer .max-w-box .FooterInfo > li:nth-child(1) { width:100%; margin:0; clear:both; margin-bottom:1rem;}
.footer .max-w-box .max-w-box ~ p { position:static; padding-right:0; min-height:0;}
.footer .max-w-box .max-w-box ~ p img { width:150px; position:static; top:auto; right:auto; margin:0 auto;}
}

@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:590px) {
.header .top-menu { margin-right:55px;}
.header .top-menu li a { font-size:12px;}
}

@media only screen and (min-width:0px) and (max-width:560px) {
:root {
	--header-height:calc( var(--basic-unit) * 3 ); 
}
.u-wrapper { padding-top:calc( var(--header-height) + var(--basic-unit) ) ;}
/*header設定------------------------*/
.header { top:calc( var(--basic-unit) * 1 );}
.header .logo a { padding:calc( var(--basic-unit) * 0.5 ) 0;}
.header .logo a img { max-height:calc( var(--header-height) - ( var(--basic-unit) * 1 ) ); max-width:260px;}
.header .search { display:none;}
.header .top-menu { position:fixed; width:100%; top:0; left:0; margin:0;height:var(--basic-unit); background:#2f3382;}
.header .top-menu ul {height:var(--basic-unit);
display: flex;
flex-wrap:wrap;
justify-content:space-between;
/*圓角*/
border-radius:0;}
.header .top-menu li { height:var(--basic-unit); line-height:var(--basic-unit); float:left;}
.header .top-menu li:nth-child(2n+1),
.header .top-menu li:nth-child(2n+2) { width:50%;}
.header .top-menu li:nth-child(4n+4) a:after { display:none;}
.header .top-menu li:only-child { width:100%;}

.header .top-menu li.global { position:fixed; top:43px; right:65px; height:34px; width:34px; border:2px solid var(--maincolor); background:var(--maincolor);border-radius: 100%;}
.header .top-menu li.global a { padding:0; width:30px; height:30px; float:left;}
.header .top-menu li.global a:before { /*display:none;*/ width:30px; height:30px; line-height:30px; left:0;}
.header .top-menu li a img { max-height:30px; margin:0;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box dl { width:100%;}
.sitemap .max-w-box dl { width:50%;}
.sitemap .max-w-box dl:nth-of-type(3n+1) { clear:none; float:left;}
.sitemap .max-w-box dl:nth-of-type(2n+1) { clear:both;}
}

@media only screen and (min-width:0px) and (max-width:480px) {
:root {
	--basic-unit:16px;
	--basic-font-size:16px;
}
.footer .max-w-box .FooterInfo > li { width:100%; margin:0 0 1.5rem 0;}
.footer .max-w-box .FooterInfo > li:nth-child(2) { border-bottom:0.05rem solid lightgray; padding-bottom:1rem;}
.footer .max-w-box .FooterInfo > li br { display:none;}
}
@media only screen and (min-width:0px) and (max-width:370px) {
.header .logo a { padding:calc( var(--basic-unit) * 0.75 ) 0;}
.header .logo a img { max-height:calc( var(--header-height) - ( var(--basic-unit) * 1.5 ) ); max-width:220px;}
}
@media only screen and (min-width:0px) and (max-width:340px) {
/*TopCalendar設定------------------------*/
.footer .TopCalendar { letter-spacing:-.020px;}
}