@charset "utf-8";
@import url("ugc_ui.css");
@import url("ugc_content.css");
/*英文字體預設-粗*/
@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');
}

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

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

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:#ef857d;}

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

/*=======================================全域設定=======================================*/
.u-wrapper { overflow:hidden; position:relative; padding-top:80px;}

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

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

/*=======================================上方設定=======================================*/
/*header設定------------------------*/
.header { height:80px; float:left; border-bottom:1px solid rgba(0,0,0,0.05); position:fixed; top:0; left:0; background:white; box-shadow:0 0 4px rgba(0, 0, 0, 0.1); z-index:4;}

/*top-menu設定------------------------*/
.header .top-menu { height:30px; float:left; background:black;}
.header .top-menu * { padding:0; margin:0; list-style:none; text-decoration:none;}
.header .top-menu ul { height:30px; overflow:hidden; margin:0 auto; text-align:right;}
.header .top-menu li { display:inline-block; width:auto; height:30px; overflow:hidden; text-align:center; font-size:0.6rem; line-height:30px; padding:0 5px;}
.header .top-menu li a { display:block;}
.header .top-menu li a:link,
.header .top-menu li a:visited { color:rgba(255,255,255,0.8);}
.header .top-menu li a:hover,
.header .top-menu li a:active { color:white;}
.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;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content: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 { padding:15px 10px;
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content:space-between; justify-content:space-between;
flex-wrap:wrap;}
.header > .max-w-box > * { flex-shrink:0;}

/*logo設定------------------------*/
.header .logo { width:180px; height:auto; float:left; margin:7px 0;}
.header .logo a { display:block; width:100%; height:auto; overflow:hidden;}
.header .logo a img { display:block; width:100%; height:auto; float:left;}

/*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 { height:auto; display:inline-block; width:auto; float:right;}
.header .nav * { padding:0; margin:0; list-style:none; text-decoration:none;}
.header .nav ul.menu { width:100%; height:50px; background:none;
-webkit-flex-display:flex; display: flex;
-webkit-justify-content:space-between; justify-content:space-between;
flex-wrap:wrap;}
.header .nav ul.menu li.menu-li { flex-shrink:0; width:auto; height:50px; line-height:50px; font-size:0.8rem; text-align:center; float:left; position:relative; margin-right:10px;}
.header .nav ul.menu li.menu-li:last-child { margin-right:0;}
.header .nav ul.menu li.menu-li a { display:block; width:100%; height:auto; overflow:hidden; position:relative; z-index:1; float:left; padding-left:5px; padding-right:5px;
/*不斷行*/
white-space:nowrap;
/*顯示大寫字母*/
text-transform:uppercase;
/*超出範圍顯示"..."*/
white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
.header .nav ul.menu li.menu-li a:before { content:''; display:block; width:3px; height:3px; position:absolute; top:50%; margin-top:-1.5px; left:0; background:#f29c97;}
.header .nav ul.menu li.menu-li a:after { content:''; display:block; width:0; height:3px; position:absolute; bottom:0; opacity:0; left:0; background:#f29c97;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.header .nav ul.menu li.menu-li a:hover:after { width:100%; opacity:1;}
.header .nav ul.menu li.menu-li a:link,
.header .nav ul.menu li.menu-li a:visited { color:#666;}
.header .nav ul.menu li.menu-li a:hover,
.header .nav ul.menu li.menu-li a:active { color:#ef857d; background:rgba(255,255,255,0.2);}
.header .nav ul.menu li.menu-li ul.sub-menu { width:auto; height:0; overflow:hidden; left:0; top:25px; position:absolute; z-index:9999; display:inline-block;opacity:0; min-width:100%; background:#ef857d;
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;}
.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:left;
/*不斷行*/
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:#fff;}
.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:#fff;}
.header .nav ul.menu li.menu-li:hover ul.sub-menu { height:auto; top:50px; opacity:1;}
/*.header .nav-fixed { background:none;}
.header .nav-fixed > ul.menu { position:fixed; max-width:100%; top:0; left:0; z-index:9; background:white;}*/

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

/*=======================================下方設定=======================================*/
/*sitemap 設定------------------------*/
.u-wrapper > .sitemap {display:none;}
.sitemap { border-top:1px solid rgba(0,0,0,0.05); padding:20px 0; background:rgba(0,0,0,0.05);}
.sitemap * { padding:0; margin:0; list-style:none; text-decoration:none;}
.sitemap .max-w-box {  overflow:hidden; margin:0 auto;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.sitemap .max-w-box dl { flex-shrink:0; width:24%; height:auto; overflow:hidden; float:left; margin-right:1.33%; margin-bottom:20px;}
.sitemap .max-w-box dl:nth-child(4n+1) { clear:both;}
.sitemap .max-w-box dl:nth-child(4n+4) { 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; padding:5px;}
.sitemap .max-w-box a:link,
.sitemap .max-w-box a:visited { color:rgba(0,0,0,0.6);}
.sitemap .max-w-box a:hover,
.sitemap .max-w-box a:active { color:#f29c97;}
.sitemap .max-w-box dt { font-size:0.8rem; line-height:24px; padding:0; margin-bottom:5px; font-weight:bold;}
.sitemap .max-w-box dt a:link,
.sitemap .max-w-box dt a:visited,
.sitemap .max-w-box dt a:hover,
.sitemap .max-w-box dt a:active { background:#f29c97; color:#fff;}
.sitemap .max-w-box dd { font-size:0.8rem; }

/*Footer設定------------------------*/
.footer { padding:0; text-align:left; padding-bottom:70px; margin:0 auto; border-top:1px solid #ccc; position:relative; font-size:0.8rem;}
.footer > .descr > div { max-width:1120px; padding:0 10px; margin:0 auto;}
.footer > .descr > div.link a { display:block; width:100%; height:auto; overflow:hidden; font-size:24px; color:#f29c97; font-weight:bold; padding:20px 0; line-height:50px;}
.footer > .descr > div.link a span.btn-order { display:inline-block; width:auto; height:50px; line-height:50px; overflow:hidden; float:right; background:#f29c97; color:#fff; padding:0 20px;
/*圓角*/
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.footer > .descr > div.copyright { background:#f29c97; color:#fff; max-width:none; padding:0;}
.footer > .descr > div.copyright > div { max-width:1120px; padding:20px 10px; margin:0 auto;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.footer > .descr > div.copyright > div > .left { width:calc( 100% - 300px ); height:auto; overflow:hidden; float:left; padding-right:10px;}
.footer > .descr > div.copyright > div > .left > img { display:block; max-width:100%; height:auto; margin-bottom:10px;
/*圓角*/
-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.footer > .descr > div.copyright > div > .left .text { width:100%; height:auto; overflow:hidden; float:left;}
.footer > .descr > div.copyright > div > .left .text p { width:100%; height:auto; overflow:hidden; float:left;}
.footer > .descr > div.copyright > div > .left .text p span { width:100%; height:auto; overflow:hidden; float:left;}
.footer > .descr > div.copyright > div > .right { width:300px; height:200px; overflow:hidden; position:relative;}
.footer > .descr > div.copyright > div > .right iframe { position:absolute; top:0; left:0; width:100%; height:100%;}
.footer p { padding:0; margin:0;}
.footer small { font-size:0.6rem; 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; display:none;} 
.footer .gotop a { display:block; width:60px; height:60px; line-height:60px; text-align:center; background:#ef857d; color:white;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
.footer .gotop a:hover,
.footer .gotop a:active { background:#ef857d;}
.footer .gotop:hover { bottom:20px;}
.footer .gotop:hover a i{
-moz-transform: translate(0, -5px);
-webkit-transform: translate(0, -5px);
-o-transform: translate(0, -5px);
-ms-transform: translate(0, -5px);
transform: translate(0, -5px);}
/*下拉時顯示*/
.wrapper-fixed .footer .gotop { bottom:10px; opacity:1;}
/*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;
-webkit-flex-display:flex; 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;}

/*優吉兒網站連結*/
.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:black; text-decoration:none; float:left; padding-right:5px;}
.uGear a:last-child { padding-right:0;}

.fixed-link { position:fixed; width:100px; height:100px; height:auto; z-index:3; right:10px; bottom:60px;}
.fixed-link a { display:block; width:100px; height:100px;  overflow:hidden; background:#e78389; padding:20px 25px; text-align:center;
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center;
-webkit-justify-content:center; justify-content:center;
flex-wrap:wrap;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
.fixed-link a:link,
.fixed-link a:visited,
.fixed-link a:hover,
.fixed-link a:active { color:#fff; text-decoration:none; font-weight:bold; font-size:24px; line-height:30px;}

.fixed-link a.fb { text-indent:-9999px; margin-top:10px; position:relative; background:#4267B2;}
.fixed-link a.fb:before { content:''; display:block; width:85%; height:100%; position:absolute; top:0; left:0; background:url(../Images/Layout/SocialNetwork/fb.svg) center center no-repeat, #4267B2;
/*背景尺寸*/
-moz-background-size:80%;
-webkit-background-size:80%;
-o-background-size:80%;
background-size:80%;}

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

/*header設定------------------------*/
.header { height:80px;}
.header .search { margin-right:10px;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box { padding:0;}
.sitemap .max-w-box dl { width:calc( 25% - 5px ); margin:0; margin-right:6.66px; margin-bottom:10px; padding:0;}
.sitemap .max-w-box dl:nth-of-type(4n+4) { margin-right:0;}

/*Footer設定------------------------*/
.footer { padding:10px 0; padding-bottom:100px;}
.footer > .descr > div.link a { padding:0; font-size:20px; margin-bottom:10px;}
/*優吉兒網站連結*/
.uGear { top:auto; bottom:20px; right:20px; margin-right:auto;}

}
@media only screen and (min-width:0px) and (max-width:1050px) {
	.header .nav ul.menu li.menu-li a { font-size:14px;}
	}
@media only screen and (min-width:0px) and (max-width:960px) {
	.header .nav { display:none;}
	}
@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:block;}
.swiper-slide img.m768-show{ display:none;}

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

.u-wrapper { padding-top:80px;}

/*header設定------------------------*/
.header { }
.header .nav { display:none; }
.header .search { right:60px;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box dl { width:calc( 33.33% - 5px ); margin-right:7.5px;}
.sitemap .max-w-box dl:nth-of-type(4n+4) { margin-right:7.5px;}
.sitemap .max-w-box dl:nth-of-type(3n+3) { margin-right:0;}

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

.footer { text-align:center;}
.footer > .descr > div.copyright > div > .left .text p { text-align:left;}
.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;}


.fixed-link { width:60px; height:60px; height:auto; right:10px; bottom:10px;}
.fixed-link a { width:60px; height:60px; padding:10px;}
.fixed-link a:link,
.fixed-link a:visited,
.fixed-link a:hover,
.fixed-link a:active { font-size:16px; line-height:20px;}

}

@media only screen and (min-width:0px) and (max-width:680px) {
	.footer > .descr > div.link a { line-height:30px;
	-webkit-flex-display:flex; display: flex;
	-webkit-align-items:center; align-items:center;
	-webkit-justify-content:center; justify-content:center;
	flex-wrap:wrap;
		}
	.footer > .descr > div.link a span:first-child { display:block; width:100%; margin-bottom:10px;}
	}

@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:600px) {
.footer > .descr > div.copyright > div > .left{ width:100%; text-align:center; padding:0; margin-bottom:10px;}
.footer > .descr > div.copyright > div > .left > img { margin:0 auto; margin-bottom:10px;}
.footer > .descr > div.copyright > div > .left .text p { text-align:center;}
.footer > .descr > div.copyright > div > .right{ width:100%; height:100px;}
}

@media only screen and (min-width:0px) and (max-width:540px) {
/*header設定------------------------*/
.header .search { display:none;}

/*SiteMap設定------------------------*/
.sitemap .max-w-box dl { width:calc( 50% - 5px ); margin-right:10px;}
.sitemap .max-w-box dl:nth-of-type(3n+3) { margin-right:10px;}
.sitemap .max-w-box dl:nth-of-type(2n+2) { margin-right:0;}
}

@media only screen and (min-width:0px) and (max-width:480px) {
.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:340px) {
/*TopCalendar設定------------------------*/
.footer .TopCalendar { letter-spacing:-.020px;}
}