﻿@charset "utf-8";
/*=======================================首頁=======================================*/
.Default .Header { margin-bottom:0;}
.DefBanner { width:100%; height:auto; overflow:hidden; margin:0 auto; margin-bottom:0; padding:0; position:relative;}
.DefBanner .swiper-button-next,
.DefBanner .swiper-button-prev{ 
box-shadow:         0px 5px 10px 0px rgba(0, 0, 0, 0.25);}
.DefBanner .swiper-button-next.swiper-button-disabled,
.DefBanner .swiper-button-prev.swiper-button-disabled { display:none;}
.DefBanner .swiper-button-next i,
.DefBanner .swiper-button-prev i { display:block; width:56px; height:56px; line-height:56px; font-size:40px; color:#fff; text-align:center;
transition:all .5s, transform .5s;}
.DefBanner .swiper-button-next { right:-60px; opacity:0;}
.DefBanner .swiper-button-prev { left:-60px; opacity:0;}
.DefBanner:hover .swiper-button-next { right:20px; opacity:1; background:rgba(0,0,0,0.2);}
.DefBanner:hover .swiper-button-prev { left:20px; opacity:1; background:rgba(0,0,0,0.2);}
.DefBanner:hover .swiper-button-next:hover { background:rgba(0,0,0,0.4); margin-right:-10px;
box-shadow:         0 0 0 0 rgba(0, 0, 0, 0);}
.DefBanner:hover .swiper-button-prev:hover { background:rgba(0,0,0,0.4); margin-left:-10px;
box-shadow:         0 0 0 0 rgba(0, 0, 0, 0);}
.DefBanner:hover .swiper-button-next:hover i { padding-left:10px;}
.DefBanner:hover .swiper-button-prev:hover i { padding-right:10px;}
.DefContent .max-w-box { max-width:none; }
.DefContent .max-w-box * { margin:0; padding:0; text-decoration:none;}
.DefContent .DefAD .max-w-box ul {
display: flex;
align-items:stretch;
justify-content:flex-start;
flex-wrap:wrap;}
.DefContent .DefAD .max-w-box li { width:100%; height:auto; overflow:hidden; padding:0; float:left; list-style:none; position:relative;
display: flex; background:black; width:calc( 50% - 0.5rem); width:25%; margin-top:0.5rem; margin-top:0;
align-items:center;
justify-content:center;}
.DefContent .DefAD .max-w-box li iframe { position:absolute; width:100%; height:100%; top:0; left:0;}
.DefContent .DefAD .max-w-box li:nth-child(odd) { margin-right:1rem; margin-right:0;}
.DefContent .DefAD .max-w-box li a { display:block; width:100%; height:auto; overflow:hidden;}
.DefContent .DefAD .max-w-box li .Text { width:100%; position:absolute; bottom:0; z-index:1; color:#fff; text-align:center; padding:0.75rem 0; background:rgba(0,0,0,0.6);}
.DefContent .DefAD .max-w-box li .Text .Title { font-size:1.1rem; font-weight:bold;}
.DefContent .DefAD .max-w-box li .Text .SubTitle { font-size:0.75rem; line-height:0.75rem;}
.DefContent .DefAD .max-w-box li img { width:100%; transition:transform 0.2s; transform-origin:center center; display:block;}
.DefContent .DefAD .max-w-box li:hover img { transform:scale(1.2,1.2);}

.DefContent .DefProduct { margin:10px 0 2rem 0; background:#eee; background:rgba(0,0,0,0.8); margin:0;}
.DefContent .DefProduct .max-w-box .swiper-container2 { padding:2rem 0.5rem;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide { background:white; padding:0; position:relative; width:100%; overflow:hidden;
box-shadow:         0px 5px 10px 0px rgba(0, 0, 0, 0.25);}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a { color:#fff; display:block; overflow:hidden; word-wrap:break-word; word-break:break-all;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Type { border-radius:50%; font-size:0.6rem; height:2rem; line-height:2rem; left:1rem; position:absolute; text-align:center; top:1rem; width:2rem; z-index:1; background:#eba82c;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Text { position:absolute; bottom:0; width:100%; z-index:1; padding:0.5rem; line-height:1rem; background:rgba(0,0,0,0.6); bottom:-20%;
transition:all .5s, transform .5s;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a:hover .Text { bottom:0;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Text .Name { font-size:0.7rem; font-weight:bold; display:block; width:100%; height:auto; max-height:1rem; overflow:hidden; margin-bottom:0.25rem;
/*超出範圍顯示"..."*/
white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Text .Info { font-size:0.65rem; display:block; width:100%; height:auto; max-height:1rem; overflow:hidden; margin-bottom:0.25rem;
/*超出範圍顯示"..."*/
white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Text .Price { display:inline-block; background:#eba82c; float:right; font-size:0.6rem; line-height:0.8rem; padding:0 0.2rem;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Img { width:100%; opacity:0;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-slide a .Text > *:only-child { margin-bottom:0;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-prev2 { width:2.5rem; height:2.5rem; background:url(../../Images/Home/Default07/Default07_DefProduct_swiper-button-prev.png) center center no-repeat; background-size:10px; border:2px solid #d4d4d4; transition:all 0.5s; margin-top:-1.25rem;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-prev2:hover { background:url(../../Images/Home/Default07/Default07_DefProduct_swiper-button-prev_o.png) center center no-repeat,#eba82c; background-size:10px; border:2px solid #eba82c;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-next2 { width:2.5rem; height:2.5rem; background:url(../../Images/Home/Default07/Default07_DefProduct_swiper-button-next.png) center center no-repeat, rgba(255,255,255,0.2); background-size:10px; border:2px solid rgba(0,0,0,0.15); transition:all 0.5s; margin-top:-1.25rem;}
.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-next2:hover { background:url(../../Images/Home/Default07/Default07_DefProduct_swiper-button-next_o.png) center center no-repeat,#eba82c; background-size:10px; border:2px solid #eba82c;}

.DefContent .DefLink .max-w-box ul { text-align:center; padding:0; width:100%; height:auto; overflow:hidden; border-top:0.05rem solid rgba(0,0,0,0.3); border-left:0.05rem solid rgba(0,0,0,0.3);}
.DefContent .DefLink .max-w-box ul li { width:25%; height:auto; overflow:hidden; float:left; margin:0; border-right:0.05rem solid rgba(0,0,0,0.3); border-bottom:0.05rem solid rgba(0,0,0,0.3);}
.DefContent .DefLink .max-w-box ul li a { display:block; width:100%; height:auto; overflow:hidden; position:relative;}
.DefContent .DefLink .max-w-box ul li a:before {content: attr(title); position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.8); overflow:hidden; color:white; z-index:1; opacity:0; padding:1rem;
display: flex;
align-items:center;
justify-content:center;
transition:all .5s, transform .5s;}
.DefContent .DefLink .max-w-box ul li a img { display:block; max-width:100%; height:auto; margin:0 auto;
transition:all .5s, transform .5s;}
.DefContent .DefLink .max-w-box ul li a:hover img {
transform: scale(1.1);}
.DefContent .DefLink .max-w-box ul li a:hover:before { opacity:1;}

.DefContent .DefLink2 .max-w-box ul { text-align:center; padding:0; width:100%; height:auto; overflow:hidden;}
.DefContent .DefLink2 .max-w-box ul li { width:25%; height:auto; overflow:hidden; float:left; margin:0;}
.DefContent .DefLink2 .max-w-box ul li a { display:block; width:100%; height:auto; overflow:hidden; position:relative;}
.DefContent .DefLink2 .max-w-box ul li a:before {content: attr(title); position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.8); overflow:hidden; color:white; z-index:1; opacity:0; padding:1rem;
display: flex;
align-items:center;
justify-content:center;
transition:all .5s, transform .5s;}
.DefContent .DefLink2 .max-w-box ul li a img { display:block; max-width:100%; height:auto; margin:0 auto;
transition:all .5s, transform .5s;}
.DefContent .DefLink2 .max-w-box ul li a:hover img {
transform: scale(1.1);}
.DefContent .DefLink2 .max-w-box ul li a:hover:before { opacity:1;}
.header .top-menu li.shop-cart.cart-fixed { display:none;}
.footer .gotop a { display:none;}
.fb_customer_chat_icon { margin-right:-2px!important;}

.cami-slide.cami-lu.cami-15 { height:0; width:0;}
.slicknav_menu { z-index:99999999999;}

@media only screen and (min-width:0px) and (max-width:1024px) {
.DefBanner .swiper-button-next,
.DefBanner .swiper-button-prev{ 
box-shadow:none;}
.DefBanner .swiper-button-next { right:10px; opacity:1;background:rgba(0,0,0,0.2);}
.DefBanner .swiper-button-prev { left:10px; opacity:1;background:rgba(0,0,0,0.2);}
.DefBanner:hover .swiper-button-next { right:10px;}
.DefBanner:hover .swiper-button-prev { left:10px;}
.DefBanner:hover .swiper-button-next:hover { background:rgba(0,0,0,0.2); margin-right:0;}
.DefBanner:hover .swiper-button-prev:hover { background:rgba(0,0,0,0.2); margin-left:0;}
.DefBanner:hover .swiper-button-next:hover i { padding-left:0;}
.DefBanner:hover .swiper-button-prev:hover i { padding-right:0;}
}
@media only screen and (min-width:0px) and (max-width:768px) {
.DefBanner .swiper-container1 .swiper-slide a .Text .Content .Title { margin:0;}
.DefBanner .swiper-container1 .swiper-slide a .Text .Content .SubTitle { border:none; padding:0;}
.DefBanner .swiper-container1 .swiper-slide a .Text .Content .SubTitle:hover { background:none; border:none;}
.DefContent .DefAD .max-w-box ul { padding:10px;}
.DefContent .DefLink .max-w-box ul li { width:50%;}
.DefContent .DefLink2 .max-w-box ul li { width:50%;}
}
@media only screen and (min-width:0px) and (max-width:620px) {
.DefBanner .swiper-container1 .swiper-slide a .Text .Content .Title { font-size:1.2rem; line-height:1.2rem;}
.DefBanner .swiper-container1 .swiper-button-prev1,.DefBanner .swiper-container1 .swiper-button-next1,.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-prev2,.DefContent .DefProduct .max-w-box .swiper-container2 .swiper-button-next2 { width:1.5rem; height:1.5rem; margin-top:-0.75rem;}
}
@media only screen and (min-width:0px) and (max-width:512px) {
.DefContent .DefAD .max-w-box li,
.DefContent .DefAD .max-w-box li:nth-child(odd) { width:100%; margin:0; margin-bottom:0.5rem;}
}
@media only screen and (min-width:0px) and (max-width:480px) {
.DefContent .DefAD .max-w-box li:nth-child(2),.DefContent .DefAD .max-w-box li:nth-child(3),.DefContent .DefAD .max-w-box li:nth-child(4),.DefContent .DefAD .max-w-box li:nth-child(5),.DefContent .DefAD .max-w-box li:nth-child(6) { width:100%; margin-right:0;}
}

/*===============================================外掛線上客服===============================================*/
#cami_patrol_tool { width:220px; margin-top:200px!important;}
@media only screen and (min-width:0px) and (max-width:640px) {
.cami_system_elem { margin-top:120px!important;}
}
@media only screen and (min-width:0px) and (max-width:500px) {
.cami_system_elem { height:0;}
}