@charset "utf-8";
/*=======================================首頁=======================================*/
.Default .Header { margin-bottom:0;}
.DefBanner { width:100%; height:auto; height:540px; overflow:hidden; margin:0 auto; margin-bottom:0; padding:0; position:relative;}
.DefBanner > div { position:absolute; width:1920px; height:540px; top:0; left:50%; margin-left:-960px;}
.DefBanner .swiper-button-next,
.DefBanner .swiper-button-prev{ 
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow:    0px 5px 10px 0px rgba(0, 0, 0, 0.25);
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;
-webkit-transition:all .5s, -webkit-transform .5s; 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;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow:    0 0 0 0 rgba(0, 0, 0, 0);
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;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-moz-box-shadow:    0 0 0 0 rgba(0, 0, 0, 0);
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 { width:100%; height:auto; overflow:hidden; font-size:16px;}
.DefContent * { padding:0; margin:0; list-style:none; text-decoration:none;}

.DefContent .def-about h2 { text-align:center; padding:20px 0;}
.DefContent .def-about h2 span { display:block; width:100%; height:auto; overflow:hidden; font-size:22px;}
.DefContent .def-about h2 span:last-child { color:#f29c97;}
.DefContent .def-about > ul { display:block; width:100%; height:auto; overflow:hidden; max-width:1120px; padding:0 10px; margin:0 auto;
-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;}
.DefContent .def-about > ul > li { width:25%; height:auto; overflow:hidden; float:left;}
.DefContent .def-about > ul > li a { display:block; width:100%; height:auto; overflow:hidden; padding:10px;}
.DefContent .def-about > ul > li a span { display:block; width:100%; height:auto; overflow:hidden; text-align:center;}
.DefContent .def-about > ul > li a span.list-photo { margin-bottom:10px;
/*圓角*/
-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;
-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.2);
box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.2);}
.DefContent .def-about > ul > li a span.list-photo img { display:block; max-width:100%; height:auto; float:left;}

.DefContent .def-news { width:100%; height:auto; overflow:hidden; background:url(../../Images/Layout/def-news.jpg) top center no-repeat;
/*背景尺寸*/
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
background-size:100% 100%;}
.DefContent .def-news > div { display:block; width:100%; height:auto; overflow:hidden; max-width:1120px; padding:50px 30px; margin:0 auto; background:#f19891;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.DefContent .def-news > div > h2 { width:270px; height:auto; overflow:hidden; float:left;}
.DefContent .def-news > div > h2 * { display:block; width:100%; height:auto; overflow:hidden; font-size:22px; color:#fff;}
.DefContent .def-news > div > h2 + ul { width:calc( 100% - 270px ); height:auto; overflow:hidden; float:left;}
.DefContent .def-news > div > h2 + ul > li { width:100%; height:auto; overflow:hidden; position:relative;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.DefContent .def-news > div > h2 + ul > li:before { content:''; display:block; width:0; height:1px;  background:#fff; position:absolute; left:0; bottom:0; opacity:0;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.DefContent .def-news > div > h2 + ul > li:hover:before { width:100%; opacity:1;}
.DefContent .def-news > div > h2 + ul > li a { display:block; width:calc( 100% - 75px ); height:auto; overflow:hidden; padding:5px; padding-left:0; line-height:20px; text-overflow : ellipsis; white-space : nowrap;}
.DefContent .def-news > div > h2 + ul > li a:link,
.DefContent .def-news > div > h2 + ul > li a:visited,
.DefContent .def-news > div > h2 + ul > li a:hover,
.DefContent .def-news > div > h2 + ul > li a:active { color:#fff; font-size:16px;}
.DefContent .def-news > div > h2 + ul > li a + .date { font-size:14px; color:#fff; float:right; padding:5px 0; line-height:20px;}

.DefContent .brief { width:100%; height:auto; overflow:hidden; text-align:center; padding:20px 10px; font-size:16px; color:#333; line-height:36px;}

.DefContent .def-enviroment { width:100%; height:auto; overflow:hidden;}
.DefContent .def-enviroment ul { width:100%; height:auto; overflow:hidden;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.DefContent .def-enviroment ul li { width:25%; height:auto; overflow:hidden; float:left;}
.DefContent .def-enviroment ul li a { display:block; width:100%; height:auto; overflow:hidden; position:relative;}
.DefContent .def-enviroment ul li a .list-photo { display:block; width:100%; height:auto; overflow:hidden;}
.DefContent .def-enviroment ul li a .list-photo  img { display:block; width:100%; max-width:100%; height:auto;}
.DefContent .def-enviroment ul li a .list-title { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); font-size:24px; color:#fff; text-align:center; top:0; left:0; z-index:1; opacity:0; top:100%;
-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;}
.DefContent .def-enviroment ul li a:hover .list-title { opacity:1; top:0;}
.DefContent .def-enviroment ul li a .list-title:after { content:''; position:absolute; top:20px; left:20px; width:calc( 100% - 40px ); height:calc( 100% - 40px ); border:4px solid #ef858c;}


@media only screen and (min-width:0px) and (max-width:1200px) {
.DefBanner { height:auto;}
.DefBanner > div { position:static; width:100%; height:auto; top:auto; left:auto; margin-left:0;}
	}

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

	.DefContent .def-news > div { padding:30px;}
	.DefContent .def-news > div > h2 { width:120px;}
	.DefContent .def-news > div > h2 + ul { width:calc( 100% - 120px );}
	}

@media only screen and (min-width:0px) and (max-width:1024px) {
.DefBanner .swiper-button-next,
.DefBanner .swiper-button-prev{ 
-webkit-box-shadow:none;
-moz-box-shadow:none;
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;}

.DefContent .def-enviroment ul li a .list-title,
.DefContent .def-enviroment ul li a:hover .list-title{ opacity:1; height:auto; top:auto; bottom:0; padding:10px; font-size:16px;}
.DefContent .def-enviroment ul li a .list-title:after { display:none;}
}
@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%;}

.DefContent .def-about > ul > li { width:50%;}

	.DefContent .def-news > div { padding:20px;}
	.DefContent .def-news > div > h2 { width:100%;}
	.DefContent .def-news > div > h2 * { display:inline; margin-right:10px;}
	.DefContent .def-news > div > h2 + ul { width:100%;}
	
	.DefContent .def-enviroment ul li { width:50%;}
	
		
	.swiper-slide img.m768-hide { display:none;}
	.swiper-slide img.m768-show { display:block;}

}
@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;}

.DefContent .def-news > div > h2 + ul > li { border-top:1px solid #fff;}
.DefContent .def-news > div > h2 + ul > li a { width:100%; padding-top:10px;}
.DefContent .def-news > div > h2 + ul > li a + .date { width:100%; padding-bottom:10px;}
}
@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;}
}