@charset "utf-8";
/* CSS Document */
body { padding: 92px 0 0; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif !important; overflow-x: hidden;}
img {max-width: 100%;}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-muted { color: #777777; }
.text-primary { color: #337ab7; }
.text-underline { position: relative;}
.text-underline:after { position: absolute; z-index: -1; bottom: 4px; left: 0; right: 0; content: ""; display: block; border-bottom: 4px solid #FFBF00;}

.bg-cross { background-image: url(../../images/bg-cross.png);}
.bg-dot { background-image: url(../../images/bg-dot.png);}
.bg-star { background-image: url(../../images/bg-star.png);}
.bg-circle { background-image: url(../../images/bg-circle.png);}
.bg-caret { background-image: url(../../images/bg-caret.png);}


/* Header */
.header-top { display: flex; justify-content: space-between; align-items: center; }
.cd-right-links { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 160px; position: relative; z-index: 3; }
.header-search {display: block; position: relative; height: 40px; font-size: 32px; color: #aaa;}

.cd-right-links ul { display: table; margin: 0; padding: 0 0 0 10px;}
.cd-right-links ul li { display: table-cell; font-size: 32px;}
.cd-right-links ul li a { display: block; width: 40px; height: 40px; color: #aaa; line-height: 40px; text-align: center;}

/* Banner */
.case { margin-bottom: 6rem; padding:0;}
.case .swiper-container { width: 100%; }
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.slide-flex { display: flex; align-items: center; padding: 4vw 5vw; }
.slide-flex .slide-img { flex: 0 0 30%; position: relative; }
.slide-flex .slide-img .rotateImg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; animation: rotateA infinite 20s; }
.slide-flex .slide-content { flex: 0 0 70%; padding-left: 5vw; text-align: left; }
.slide-flex .slide-content .main { max-height: 140px; margin-bottom: 6rem; }
.slide-flex .slide-content ul { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.slide-flex .slide-content ul li { flex: 0 0 30%; display: flex; align-items: center; }
.slide-flex .slide-content ul li .icon { flex: 0 0 56px; margin-right: 20px; background-blend-mode: screen; background-size: cover; }
.slide-flex .slide-content ul li .icon img { opacity: 0; }
.slide-flex .slide-content ul li .text { max-height: 42px; }

.swiper-slide .img-responsive { width: 100%; border-radius: 0;}
.case .innerContent { padding: 180px 8.33333333% 50px; margin-top: -100px;}
.case .innerContent h4 {color:aqua; }
.case .innerContent h2 { margin-bottom: 30px; padding: 0; font-size: 40px; font-weight: bold; color: #FFF; line-height: 1.2;}
.case .innerContent p { margin-bottom: 30px; padding: 0; font-size: 20px; color: #DDD; }
.case .innerContent a { font-size: 21px;}
.case .innerContent .link-blue { color: #3AB7E7; }
.case .innerContent .link-red { color: #CF1113; }

.case .innerContent.text-center p { margin-left: auto; margin-right: auto; }
.case .title-blue span { box-shadow: inset 0 -3px 0 #33B2E3; }
.case title-red span { box-shadow: inset 0 -3px 0 #CF1113; }

.swiper-slide.slide-first{ background-image: url(/images/mobile/banner-2022index.jpg);}

@media only screen and (max-width: 992px) {
    .case .innerContent h2 { font-size: 30px; margin-bottom: 10px;}
	.case .innerContent p { font-size: 18px; }
    .swiper-slide.slide-first{ background-image: url(/images/mobile/banner-2022index-992.jpg);}
    .case .innerContent { margin-top: -250px;}

    .slide-flex .slide-img { flex: 0 0 40%; }
    .slide-flex .slide-content { flex: 0 0 60%; }
    .slide-flex .slide-content ul li { flex: 0 0 46%; }
}
@media only screen and (max-width: 650px) {
/*	.case .swiper-container { width: 100%; height:200px;}*/
	.case .swiper-container,
	.case .swiper-container .swiper-wrapper { height: unset; }
    .swiper-slide.slide-first{ background-image: url(/images/mobile/banner-2022index-650.jpg);}
	.case .innerContent { padding: 15px;}
	.case .innerContent h2 { font-size: 20px; }
	.case .innerContent p { font-size: 16px; }
	.case .innerContent a { font-size: 16px;}
	
	.slide-flex { flex-wrap: wrap; }
	.slide-flex .slide-img,
    .slide-flex .slide-content { flex: 0 0 100%; }
	.slide-flex .slide-content ul { gap: 2rem; }
	.slide-flex .slide-content ul li { flex: 0 0 100%; }
	.slide-flex .slide-content .main { margin-bottom: 2rem; }
}
/* Center */
.slide-box { padding: 0 30px;}

.rwd-title { position: absolute; left: 0; right: 0; top: 35%; text-align: center;}
.rwd-title h2 { margin: 0; font-size: 40px; line-height: 1;}
.rwd-title h3 { margin: 0 0 15px 0; font-size: 45px; line-height: 1;}
.rwd-title p { position: relative; z-index:1; font-size: 30px; font-weight: 700; line-height: 1.2;}
.rwd-title p b { font-weight: 100;}

#rwd-content { padding: 0 8.33333%;}
#rwd-content h1 { margin-top: 40px; margin-bottom: 30px;}
#rwd-content p { font-size: 16px; line-height: 1.8;}
#rwd-content ul { display: table; margin: 25px 0; padding: 0; width: 100%; border: 1px solid #f2f2f2; border-right: none; box-sizing: border-box;}
#rwd-content ul li { position:relative; display: table-cell; padding: 8px 15px; font-size: 64px; line-height: 1; color: #3f3f3f; text-align: center; border-right: 1px solid #f2f2f2;}
#rwd-content ul li:before,
#rwd-content ul li:after { position: absolute; top: 8px; display: block; font-family: 'icomoon' !important; font-size: 18px; line-height: 64px;}
#rwd-content ul li:before { right: 10px; content: "\e902"; color: #3f3f3f;}
#rwd-content ul li:after { left: 10px; content: "\e903"; color: #FFBF00;}
#rwd-content ul li:first-child:after,
#rwd-content ul li:last-child:before { display: none;}

#rwd-content .button { position: relative; display: inline-block; margin: 40px 0 0; padding: 10px 35px; font-size: 18px; font-weight: 700; line-height: 20px; color: #3f3f3f; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); -webkit-transition: all linear 0.3s; transition: all linear 0.3s;}
#rwd-content .button:hover { background-color: #fff; color: #1f1f1f;}
#rwd-content .button:after { position: absolute; left: 10px; right: -10px; top: 10px; bottom: -10px; width: 100%; height: 100%; background-image: url(../../images/bg-line-a.png); content: "";}
#rwd-content .button .icon { position: absolute; top: 0; right: -64px; font-size: 96px; line-height: 44px; -webkit-transition: all linear 0.15s; transition: all linear 0.15s;}
#rwd-content .button:hover .icon { right: -96px; color: #FFBF00;}


.serv-box { padding: 0 30px;/* border-bottom: 1px solid rgba(0,0,0,0.05);*/ position: relative;}
.serv-box .serv-item { padding: 50px 0; text-align: center; /*border-right: 1px solid rgba(0,0,0,0.05);*/}
.serv-box .serv-item:last-child { border-right: none;}

.serv-icon { position: relative; margin: 0 auto; width: 140px; height: 140px; box-sizing: border-box; border: 1px solid #9be4f7; border-radius: 100%; -webkit-transition: all linear 0.1s; transition: all linear 0.1s;}
.serv-icon .icon { position: absolute; left: 5px; top: 5px; padding: 32px; background-color: #220076; font-size: 64px; border-radius: 100%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all ease-in-out 0.6s; transition: all ease-in-out 0.6s; color:#9be4f7;}
.serv-item:focus .icon,
.serv-item:hover .icon { left: 25px; top: 25px; padding: 12px; background-image: url(../../images/bg-noise-trans.png); color: #fff; -webkit-transform: rotateY(360deg); transform: rotateY(360deg); box-shadow: inset 0 0 30px rgba(0,0,0,0.15);}
.serv-item:hover .icon-website { background-color: #3DD990;}
.serv-item:hover .icon-service { background-color: #2FA4E7;}
.serv-item:hover .icon-other { background-color: #FFDD00;}

.serv-title { margin: 0; padding: 30px 0 0; font-weight: 300!important; font-size: 20px; line-height: 30px;}
.serv-list { display: inline-block; width: auto; text-align: left; margin: 0; padding: 20px 0 0; list-style: none;}
.serv-list li { position: relative; padding: 5px 0 5px 25px; font-size: 16px; line-height: 20px; color: #717171; transition: all linear 0.2s;}
.serv-list li:before { position: absolute; left: 0; display: block; content: "+"; font-family: 'icomoon' !important; font-size: 28px; color: #220076; opacity: 0.65;}

.oz-intro { background-image: url(../../images/bg-gray.png); text-align: center;}
.oz-intro .col-md-4 { padding: 50px 0 40px; border-right: 1px solid rgba(0,0,0,0.05);}
.oz-intro .col-md-4:last-child { border-right: none;}
.oz-intro .inner { position: relative; margin: 0 auto; padding-top: 70px; width: 210px; height: 210px; background-image: url(../../images/line-circles.png); background-position: center center; background-size: 100%; color: #fff; text-align: center;}
.oz-intro .inner code { position: relative; z-index: 3; display: block; padding: 0; font-size: 48px; line-height: 1.1; font-family: "Roboto Condensed"; color: #fff; background-color: transparent;}
.oz-intro .inner code sub { bottom: 0; font-size: 30px;}
.oz-intro .inner small { position: relative; z-index: 2; display: block; font-size: 16px; font-weight: 700;}
.oz-intro .intro-top:after { display: table; clear: both; content: "";}
.oz-intro .intro-top h3 { margin: 0; padding: 0 0 30px; font-size: 20px; font-weight: normal;}
.sprit-a,
.sprit-b,
.sprit-c { position: absolute; left: 25px; top: 25px; z-index: 1; width: 160px; height: 160px; background-position: center center; background-repeat: no-repeat; background-size: auto 100%;}
.sprit-a { background-image: url(../../images/sprite-yellow.png);}
.sprit-b { background-image: url(../../images/sprite-pink.webp);}
.sprit-c { background-image: url(../../images/sprite-purple.png);}

.oz-intro .animate-ele { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background-image: url(../../images/line-circle.png); background-position: center center; background-repeat: no-repeat; background-size: 100%; -webkit-animation: rotate 14s ease-in-out 0s infinite; animation: rotate 14s ease-in-out 0s infinite;}
.oz-intro .time-a { -webkit-animation: rotateA 12s ease-in-out 0s infinite; animation: rotateA 12s ease-in-out 0s infinite;}
.oz-intro .time-b { -webkit-animation: rotateA 13s ease-in-out 0s infinite; animation: rotateA 13s ease-in-out 0s infinite;}
.oz-intro .time-c  {-webkit-animation: rotateA 14s ease-in-out 0s infinite; animation: rotateA 14s ease-in-out 0s infinite;}

.case-hot { position: relative;}
.case-hot:before { display: block; content: ""; position: absolute; z-index: 1; left: -65px; top: -65px; width: 100px; height: 100px; border-width: 30px; border-style: solid; border-color: transparent transparent #f33 transparent; box-shadow: 0 0 2px rgba(0,0,0,0.2); clip: rect(0px,100px,104px,0px);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-webkit-transition: all linear 0.2s;
	transition: all linear 0.2s;
 }
.case-hot:after { display: block; content: "HOT"; position: absolute;  z-index: 2; left: -22px; top: -22px; width: 80px; height: 80px; color: #fff; font-family: "Roboto Condensed"; font-weight: bolder; text-align:center; line-height: 60px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.case-new { position: relative;}
.case-new:before{ display: block; content: ""; position: absolute; z-index: 1; left: -65px; top: -65px; width: 100px; height: 100px; border-width: 30px; border-style: solid; border-color: transparent transparent #0C9 transparent; box-shadow: 0 0 2px rgba(0,0,0,0.2); clip: rect(0px,100px,104px,0px);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-webkit-transition: all linear 0.2s;
	transition: all linear 0.2s;
}

.case-new:after { display: block; content: "NEW"; position: absolute; z-index: 2; left: -22px; top: -22px; width: 80px; height: 80px; color: #fff; font-family: "Roboto Condensed"; font-weight: bolder; text-align:center; line-height: 60px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	}

@-webkit-keyframes rotateA {
	0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

.oz-intro .intro-bottom { position: relative; z-index: 1; padding: 45px; border-top: 1px solid rgba(0,0,0,0.05);}
.oz-intro .intro-bottom h1 { margin: 0 0 25px 0; font-size: 40px; font-weight: lighter; line-height: 1.2;}
.oz-intro .intro-bottom p { margin: 0; font-size: 16px; color: #717171; line-height: 1.8;}
.oz-intro .intro-bottom .button { position: relative; display: inline-block; margin: 40px 0 0; padding: 10px 35px; font-size: 18px; font-weight: 700; line-height: 20px; color: #3f3f3f; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); -webkit-transition: all linear 0.3s; transition: all linear 0.3s;}
.oz-intro .intro-bottom .button:hover { background-color: #fff; color: #1f1f1f;}
.oz-intro .intro-bottom .button:after { position: absolute; left: 10px; right: -10px; top: 10px; bottom: -10px; width: 100%; height: 100%; background-image: url(../../images/bg-line-a.png); content: "";}
.oz-intro .intro-bottom .button .icon { position: absolute; top: 0; right: -64px; font-size: 96px; line-height: 44px; -webkit-transition: all linear 0.15s; transition: all linear 0.15s;}
.oz-intro .intro-bottom .button:hover .icon { right: -96px; color: #FFBF00;}


/* Sitemap */
.sitemap-links { padding-bottom: 35px;}
.sitemap-links:first-child { text-align: center;}
.links-main { position: relative; display: inline-block; margin: 35px auto; padding: 21px 80px 21px 35px; border: 3px solid #3f3f3f; border-radius: 6px;}
.links-main:before,
.links-main:after { position: absolute; left: 35px; display: block; content: ""; border-width: 10px; border-style: solid;}
.links-main:before { z-index: 2; left: 38px; bottom: -16px; border-color: #fff transparent transparent #fff;}
.links-main:after { z-index: 1; bottom: -23px; border-color: #3f3f3f transparent transparent #3f3f3f;}
.links-main img { display: block; width: 65px;}
.links-main a { position: absolute; right: 5px; display: block; width: 40px; height: 40px; font-size: 24px; line-height: 40px; text-align: center; text-decoration: none; color: #fff; border-radius: 4px; transition: all linear 0.3s;}
.links-main a.home { top: 5px; background-color: #ffbf00;}
.links-main a.contact { bottom: 5px; background-color: #aaa;}
.links-main a:hover { background-color: #3f3f3f;}

.sitemap-links h3 { font-size: 18px;}
.sitemap-links h4 { font-size: 16px;}
.sitemap-links li { font-size: 14px;}

.links-one { padding: 0; line-height: 30px; border: 2px solid #3f3f3f; border-radius: 4px; overflow: hidden;}
.links-one a { display: block; color: #1f1f1f; text-decoration: none; transition: all linear 0.3s;}
.links-one h3,
.links-one h4 { margin: 0; padding: 0; text-align: center; line-height: 36px;}
.links-one h4 { float: left; width: 50%;}
.links-one h4 a { color: #fff; text-decoration: none;}
.links-one a.hot { background-color: #f33;}
.links-one a.new { background-color: #0c9;}
.links-one .fa { margin-right: 10px; opacity: 0.65;}
.links-one a:hover { background-color: #3f3f3f; color: #fff;}

.links-two h4 { margin: 0 0 25px 0; padding: 0; text-align: center; line-height: 36px; border: 1px solid #aaa; border-radius: 2px; overflow: hidden;}
.links-two a { color: #3f3f3f; text-decoration: none; transition: all linear 0.3s;}
.links-two .col-md-6:nth-child(3n+1) { clear: both;}

.link-three { margin-bottom: 35px;}
.link-three ul,
.link-three li { margin: 0; padding: 0; list-style: none;}
.link-three li { position: relative; display: inline-block; padding: 5px 0 5px 30px; width: 48%; line-height: 20px;}
.link-three li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; opacity: 0.65;}

.RelatedArtical a { position: relative; display: block; padding: 5px 0 5px 30px; line-height: 20px; color: #3f3f3f; }
.RelatedArtical a:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; opacity: 0.65;}

/* Clients */
.clients { margin-bottom: -70px; padding: 50px 30px 120px;/* background-image: url(../../images/bg-gray.png); */border-bottom: 1px solid rgba(0,0,0,0.1);}
.clients h4 { margin: 0; padding: 20px 0 10px 55px; background-color: #fff; font-size: 16px; line-height: 30px; font-family: "微軟正黑體" !important; font-weight: normal !important;  border: 1px solid rgba(0,0,0,0.1); border-bottom: none;}
.clients h4:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}

.clients-list { position: relative;}
.clients-list:before { position: absolute; left: 5px; right: 5px; bottom: -5px; height: 5px; content: ""; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none;}
.clients-list:after { position: absolute; left: 10px; right: 10px; bottom: -10px; height: 4px; content: ""; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none; clear: both;}

.clients ul,
.clients li { position: relative; margin: 0; padding: 0; list-style: none;}
.clients ul { padding: 0 30px 30px; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none;}
.clients ul:before, .clients ul:after { display: table; clear: both; content: "";}
.clients li { float: left; margin-top: -1px; padding: 8px 0 8px 35px; width: 33.3333333%; font-size: 14px; line-height: 30px; border-bottom: 1px dotted rgba(0,0,0,0.1);}
.clients li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; opacity: 0.65;}



/* PC */
@media only screen and (min-width: 1024px) {
.search-form { position: absolute; right: 0; top: 0; margin: 0; padding: 0 40px; font-size: 16px; transition: all .3s;}
.search-form .icon { line-height: 40px;}
.search-form.active { background-color: #f2f2f2;}
.search-form label { display:block; margin: 0; padding: 0;}
.search-form input[type='search'] { margin: 0; padding: 0 0 0 10px; border: none; width: 0; font-size: 16px; line-height: 40px; outline: none;
	background: transparent; transition: all linear .3s; box-sizing: border-box;}
.search-form.active input[type='search'] { width: 160px;}
.search-form .search-submit { position: absolute; right: 0; top: 0; display: block; margin: 0; padding: 0; border: none; width: 40px; height: 40px; line-height: 38px; font-size: 32px; text-align: center; -webkit-transition: all linear .3s; transition: all linear .3s;}
.search-form.active .search-submit { left:0; right: auto; background-color: #3f3f3f; color: #fff;}
.search-form .search-close { position: absolute; top: 0; right: 0px; cursor: pointer; width: 40px; height: 40px; line-height: 38px; background-color: transparent; font-size: 24px; text-align: center; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: all linear .3s; transition: all linear .3s;}
.search-form.active .search-close { -webkit-transform: scale(1,1); transform: scale(1,1);}

.rwd-box { padding: 40px 30px;}

/* Pages*/
.page-box { position: relative;}
.page-head { padding: 15px 30px 20px 30px; background-color: rgba(255,255,255,0.5); text-align: left; border-bottom: 1px solid rgba(0,0,0,0.05);}

.crumb { text-align: left;}
.crumb ul, .crumb li { margin: 0; padding: 0; list-style: none;}
.crumb li { display: inline-block; font-size: 16px; line-height: 30px;}
.crumb li:after { display: inline-block; content: "\e903"; padding: 0 10px; font-family: 'icomoon' !important; font-size: 14px; color: #3f3f3f; vertical-align: middle; opacity: 0.65;}
.crumb li:last-child:after { display: none;}
.crumb li a { display: inline-block; color: #717171; text-decoration: underline;}

/* Filter*/
.filter { text-align: right;}
.filter ul, .filter li { margin: 0; padding: 0; list-style: none;}
.filter li { display: inline-block; margin-left: 7px;}
.filter li a { display: block; position: relative; z-index: 1; padding: 5px 25px 5px 40px; font-size: 16px; color: #3f3f3f; line-height: 20px; text-decoration: none;}
.filter li a:after { position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; display: block; content: ""; border: 2px solid rgba(0,0,0,0.35); border-radius: 100px;}
.filter li a.active { color: #fff;}
.filter li a.active:after { border-color: #3f3f3f; background-color: #3f3f3f;}
.filter li a .fa{ position: absolute; left: 15px; top: 7px;  opacity: 0.35;}
.filter li a.active .fa { opacity: 0.65;}
.filter li:last-child a { padding: 5px 40px 5px 25px;}
.filter li:last-child a .fa { position: absolute; right: 15px; opacity: 0.35;}

.filter .widget-about li a { padding: 5px 25px !important;}


.filter-content { display: none; padding: 15px 30px; background-color: rgba(0,0,0,0.85); background-image: url(../../images/banner-bg.jpg); background-size: cover;}
.filter-content h4 { margin: 0; padding: 20px 0 20px 40px; font-size: 20px; line-height: 30px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.filter-content h4:after { display: block; content: ""; margin-top: 1rem; border-bottom: 2px solid #FFBF00; width: 1em;}
.filter-content h4 a { color: #fff;}

.filter-content dl, .filter-content dt, .filter-content dd { margin: 0; padding: 0; font-size: 14px; line-height: 24px;}
.filter-content dl { position: relative; padding: 20px 0; border-bottom: 1px dotted rgba(255,255,255,0.65);}
.filter-content dl:last-child { border-bottom: none;}
.filter-content dt { position: absolute; left: 0; width: 100px; padding: 5px 0; color: #fff;}
.filter-content dd { padding-left: 100px;}

.filter-content .widget-portfolios,
.filter-content .widget-portfolios li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-portfolios li { display: inline-block;}
.filter-content .widget-portfolios li a { display: block; padding: 0 10px; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-portfolios li a:hover { text-decoration: none;}

.filter-content .widget-professionals,
.filter-content .widget-professionals li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-professionals { padding-bottom: 20px;}
.filter-content .widget-professionals li { position: relative; padding: 5px 0 5px 40px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.filter-content .widget-professionals li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}

.filter-content .widget-professionals li a { display: block; padding: 0; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-professionals li a:hover { text-decoration: none;}


/* Portfolios */
.case-box { padding: 0 30px;}

.case-list { position: relative; padding-top: 15px; padding-bottom: 15px; border-right: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05);}
.case-list:nth-child(3n) { border-right: none;}
.case-item { display: block;}
.case-album { display: block; float: left; width: 50%; background-color: #fff;}
.case-album img { display: block;}
.case-meta { display: block; float: left; width: 48%; padding: 0 0 0 15px;}
.case-meta h4 { margin: 0 0 15px 0; padding: 0;}
.case-meta a { color: #3f3f3f; font-weight: normal; font-size: 14px; line-height: 1.4;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.case-meta p { margin: 0; padding: 0; font-size: 14px; line-height: 1.6; color: #969696;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


/* Articles */
.article-box { padding: 15px 30px 0;}

.article-list { padding: 15px;}
.article-item { background-color: rgba(255,255,255,0.35); border: 1px solid rgba(0,0,0,0.05); overflow: hidden;}
.article-album { padding: 30px 30px 0;}
.article-album a { display: block; position: relative; text-decoration: none;}
.article-meta { padding: 15px 30px;}
.article-meta h4 { margin: 0 0 15px 0; padding: 0;}
.article-meta a { color: #3f3f3f; font-weight: normal; font-size: 18px; line-height: 1.4; height: 2.8em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.article-meta a:hover { color: #FFBF00;}
.article-meta p { margin: 0; font-size: 14px; line-height: 1.6; color: #717171; height: 4.8em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Detail */
.article-title { margin: 0; padding: 40px 0; font-size: 32px; font-weight: normal; text-align: center;}
.article-conent { margin: 0 auto; max-width: 900px; line-height: 1.8;}
.btn-box { padding: 40px 0;}
.btn-box .button { position: relative; display: inline-block; margin: 40px 0 0; padding: 10px 35px; font-size: 18px; font-weight: 700; line-height: 20px; color: #3f3f3f; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); -webkit-transition: all linear 0.3s; transition: all linear 0.3s;}
.btn-box .button:hover { background-color: #fff; color: #1f1f1f;}
.btn-box .button:after { position: absolute; left: 10px; right: -10px; top: 10px; bottom: -10px; width: 100%; height: 100%; background-image: url(../../images/bg-line-a.png); content: "";}
.btn-box .button .icon { position: absolute; top: 0; left: -64px; font-size: 96px; line-height: 44px; -webkit-transition: all linear 0.15s; transition: all linear 0.15s; -webkit-transform:rotate(-180deg); transform:rotate(-180deg);}
.btn-box .button:hover .icon { left: -96px; color: #FFBF00;}

.article-fck p b { display: block; margin-bottom: 30px; padding: 0 0 0 20px; font-size: 24px; line-height: 1.2; color: #3f3f3f; border-left: 8px solid #ffbf00;}
.article-fck .aboutus-map-wrap { width: 100%; height: 400px;}

/* Pagination */
.pagination {  display: block; padding: 35px 30px; text-align: center;}
.pagination ul { display: block; margin: 0 auto; padding: 0; list-style: none;}
.pagination li { display: inline-block; background-color: #fff; line-height: 45px; border-radius: 0; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.pagination li:hover { background-color: #ffbf00;}
.pagination li a { display: block; color: #3f3f3f; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif; text-decoration: none; border-radius: 0; -webkit-transition: all linear 0.2s;  transition: all linear 0.2s;}
.pagination li .current { background-color: #ffbf00; border-radius: 0;}

.pagination > .page-numbers { padding-top: 30px; padding-bottom: 40px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.pagination > .page-numbers .dots { display: block; padding: 12px 0; }
.pagination li a { display: block; color: #717171;width: 45px; height:45px; text-align: center; line-height: 45px;}
.pagination li:hover { background: #f7c51e; }
.pagination li:hover a { color: #313131; }
.pagination li .current { display: block; color: #313131; background: #f7c51e; width: 45px; height:45px; text-align: center; line-height: 45px; border-radius: 2px; }

/* Related */
.related-box { margin-bottom: 20px; padding: 50px 30px; border-top: 1px solid rgba(0,0,0,0.05);}
.widget-title { font-size: 20px; font-weight: normal;}
.widget-title { margin: 0; padding: 0 0 20px 40px; font-size: 20px; line-height: 30px; color: #3f3f3f; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.widget-title:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}
.widget-content {}

.widget-article-list { margin: 0; padding: 0; list-style: none;}
.widget-article-list li { position: relative; padding: 5px 0 5px 40px; font-size: 14px; line-height: 30px; color: #717171; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; border-bottom: 1px solid rgba(0,0,0,0.05);}
.widget-article-list li:before { position: absolute; left: 0; display: block; content: "\e906"; font-family: 'icomoon' !important; font-size: 28px; color: #3f3f3f; opacity: 0.65;}
.widget-article-list li a { color: #717171; text-decoration: none; border: none;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.widget-article-list li:hover { padding-left: 30px;}

/* Contact */
.contact-top { margin: 30px 30px;}
.contact-conent { margin: 40px auto; max-width: 970px;}
.contact-conent .button { display: block; margin: 0; padding: 0 20px; width: 100%; background-color: #3f3f3f; font-size: 18px; line-height: 35px; color: #fff; font-weight: 700; border: 0; border-radius: 3px; 
 transition: all linear 0.2s;
}
.contact-conent .button:hover,
.contact-conent .button:focus { background-color: #ffbf00; color: #3f3f3f;}
.contact-conent [class*="col-"],
.contact-conent [class^="col-"] { margin-bottom: 15px;}
.contact-conent h2 { margin: 0; padding: 15px 0; font-weight: lighter;}
.contact-conent p { line-height: 40px; margin: 0;}
.contact-conent p.require:after { position: relative; display: inline-block; content: "*"; bottom: -5px; color: #f00; font-size: 18px; font-weight: bold; line-heihgt: 40px; margin-left: 10px;}
.contact-conent .form-control { background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.form-control:focus { background-color: #fff; border-color: #ffbf00; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 190, 0, 0.6); }
.contact-conent label { font-weight: normal;}
.contact-conent label input[type="checkbox"] { margin-right: 10px;}
.contact-conent .input-group-addon { padding: 0; width:  80px; height: 35px; background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.contact-conent .input-group .input-group-addon:first-child { padding: 0 10px; border-right: 0;}
.contact-conent .input-group .input-group-addon:last-child { border-left: 0;}

/* Footer */
footer { padding: 0; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif;}
.footer-top { background-color: #262626;}
.footer-top ul { display: table; margin: 0; padding: 0; list-style: none; width: 100%;}
.footer-top ul li { display: table-cell; width: 12.5%; line-height: 70px; text-align: center; padding: 10px 0;}



.footer-center { padding: 50px 0; background-color: #2C2C2C; background-image: url(../../images/bg-wave.png);}
.footer-center h4 { margin: 0; padding: 0 0 20px 40px; font-size: 20px; line-height: 30px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.footer-center h4:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}

.footer-center ul { margin: 0; padding: 0; list-style: none;}
.footer-center ul li { position: relative; padding: 5px 0 5px 40px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.footer-center ul li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}
.footer-center ul li a { color: #fff;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.footer-center ul li:hover { padding-left: 30px;}
.widget-about li { display: inline-block;}

.footer-bottom { background-color: #fff;}

}

/* Tablet */
@media only screen and (min-width: 992px) {


}
@media only screen and (min-width: 760px) and (max-width: 1020px) {
body { padding-top: 100px;}

/* Header */
.cd-auto-hide-header { padding: 0 25px !important; height: 100px !important;}
.cd-primary-nav > ul a:after { display: none;}

/* Search Form */
.search-form { position: relative; padding: 0 40px; font-size: 16px; transition: all .3s;}
.search-form .icon { line-height: 40px;}
.search-form.active { background-color: #f2f2f2;}
.search-form label { display:block; margin: 0; padding: 0;}
.search-form input[type='search'] { margin: 0; padding: 0 0 0 10px; border: none; width: 0; font-size: 16px; line-height: 40px; outline: none;
	background: transparent; transition: all linear .3s; box-sizing: border-box;}
.search-form.active input[type='search'] { width: 160px;}
.search-form .search-submit { position: absolute; right: 0; top: 0; display: block; margin: 0; padding: 0; border: none; width: 40px; height: 40px; line-height: 38px; font-size: 32px; text-align: center; -webkit-transition: all linear .3s; transition: all linear .3s;}
.search-form.active .search-submit { left:0; right: auto; background-color: #3f3f3f; color: #fff;}
.search-form .search-close { position: absolute; top: 0; right: 0px; cursor: pointer; width: 40px; height: 40px; line-height: 38px; background-color: transparent; font-size: 24px; text-align: center; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: all linear .3s; transition: all linear .3s;}
.search-form.active .search-close { -webkit-transform: scale(1,1); transform: scale(1,1);}

/* Banner */
.slide-box { padding: 0;}
#canvas-box { text-align: center;}
#rwd-content .button { margin-left: auto; margin-right: auto; margin-top:  30px; margin-bottom: 60px;}

/* Service*/
.serv-box { padding: 0;}

/* RWD */
#rwd-content { text-align: center;}

.crumb { text-align: left;}
.crumb ul, .crumb li { margin: 0; padding: 0; list-style: none;}
.crumb li { display: inline-block; font-size: 16px; line-height: 30px;}
.crumb li:after { display: inline-block; content: "\e903"; padding: 0 10px; font-family: 'icomoon' !important; font-size: 14px; color: #3f3f3f; vertical-align: middle; opacity: 0.65;}
.crumb li:last-child:after { display: none;}
.crumb li a { display: inline-block; color: #717171; text-decoration: underline;}

/* Filter*/
.filter { text-align: right;}
.filter ul, .filter li { margin: 0; padding: 0; list-style: none;}
.filter li { display: inline-block; margin-left: 7px;}
.filter li a { display: block; position: relative; z-index: 1; padding: 5px 25px 5px 40px; font-size: 16px; color: #3f3f3f; line-height: 20px; text-decoration: none;}
.filter li a:after { position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; display: block; content: ""; border: 2px solid rgba(0,0,0,0.35); border-radius: 100px;}
.filter li a.active { color: #fff;}
.filter li a.active:after { border-color: #3f3f3f; background-color: #3f3f3f;}
.filter li a .fa{ position: absolute; left: 15px; top: 7px;  opacity: 0.35;}
.filter li a.active .fa { opacity: 0.65;}
.filter li:last-child a { padding: 5px 40px 5px 25px;}
.filter li:last-child a .fa { position: absolute; right: 15px; opacity: 0.35;}

.filter .widget-about li a { padding: 5px 25px !important;}


.filter-content { display: none; padding: 15px 30px; background-color: rgba(0,0,0,0.85); background-image: url(../../images/banner-bg.jpg); background-size: cover;}
.filter-content .col-sm-12 { margin-bottom: 10px; padding: 0 0 10px 0; border-bottom: 1px dotted rgba(255,255,255,0.35);}
.filter-content .col-sm-12:last-child { margin: 0; padding: 0; border-bottom: none;}
.filter-content h4 { display: inline-block; margin: 0 1.5rem 0 0; padding: 0; font-size: 16px; line-height: 20px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.filter-content h4:after { display: none;}
.filter-content h4 a { color: #fff;}

.filter-content dl, .filter-content dt, .filter-content dd { margin: 0; padding: 0; font-size: 14px; line-height: 24px;}
.filter-content dl { position: relative; padding: 20px 0; border-bottom: 1px dotted rgba(255,255,255,0.65);}
.filter-content dl:last-child { border-bottom: none;}
.filter-content dt { position: absolute; left: 0; width: 100px; padding: 5px 0; color: #fff;}
.filter-content dd { padding-left: 100px;}

.filter-content .widget-portfolios,
.filter-content .widget-professionals { display: inline-block;}

.filter-content .widget-portfolios,
.filter-content .widget-portfolios li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-portfolios li { display: inline-block;}
.filter-content .widget-portfolios li a { display: block; padding: 0 10px; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-portfolios li a:hover { text-decoration: none;}

.filter-content .widget-professionals,
.filter-content .widget-professionals li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-professionals { padding-bottom: 0;}
.filter-content .widget-professionals li { position: relative; display: inline-block; padding: 5px 0 5px 40px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.filter-content .widget-professionals li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}

.filter-content .widget-professionals li a { display: block; padding: 0; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-professionals li a:hover { text-decoration: none;}
	
/* Pages*/
.page-box { position: relative;}
.page-head { padding: 15px; background-color: rgba(255,255,255,0.5); text-align: left; border-bottom: 1px solid rgba(0,0,0,0.05);}

.bg-cross { background-image: url(../../images/bg-cross.png);}
.bg-dot { background-image: url(../../images/bg-dot.png);}
.bg-star { background-image: url(../../images/bg-star.png);}
.bg-circle { background-image: url(../../images/bg-circle.png);}
.bg-caret { background-image: url(../../images/bg-caret.png);}

/* Case */
.case-box { padding: 0;}

.case-list { position: relative; padding-top: 15px; padding-bottom: 15px; box-shadow: inset -1px 0 0 rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.05);}
.case-list:nth-child(2n) { box-shadow: inset 0 0 0 rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.05);}

.case-meta h4 { margin: 10px 0 15px 0; padding: 0;}
.case-meta a { color: #3f3f3f; font-weight: normal; font-size: 14px; line-height: 1.4; height: 1.4em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.case-meta p { margin: 0; padding: 0; font-size: 14px; line-height: 1.6; color: #969696; height: 3.2em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Article */
.article-conent { width: 100%; padding: 40px;}

.article-list { padding: 15px;}
.article-item { background-color: rgba(255,255,255,0.35); border: 1px solid rgba(0,0,0,0.05); overflow: hidden;}
.article-album { padding: 30px 30px 0;}
.article-album a { display: block; position: relative; text-decoration: none;}
.article-meta { padding: 15px 30px;}
.article-meta h4 { margin: 0 0 15px 0; padding: 0;}
.article-meta a { color: #3f3f3f; font-weight: normal; font-size: 18px; line-height: 1.4; height: 2.8em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.article-meta a:hover { color: #FFBF00;}
.article-meta p { margin: 0; font-size: 14px; line-height: 1.6; color: #717171; height: 4.8em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Related */
.related-box { margin-bottom: 20px; padding: 50px 30px; border-top: 1px solid rgba(0,0,0,0.05);}
.widget-title { font-size: 20px; font-weight: normal;}
.widget-title { margin: 0; padding: 0 0 20px 40px; font-size: 20px; line-height: 30px; color: #3f3f3f; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.widget-title:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}
.widget-content {}

.widget-article-list { margin: 0; padding: 0; list-style: none;}
.widget-article-list li { position: relative; padding: 5px 0 5px 40px; font-size: 14px; line-height: 30px; color: #717171; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; border-bottom: 1px solid rgba(0,0,0,0.05);}
.widget-article-list li:before { position: absolute; left: 0; display: block; content: "\e906"; font-family: 'icomoon' !important; font-size: 28px; color: #3f3f3f; opacity: 0.65;}
.widget-article-list li a { color: #717171; text-decoration: none; border: none;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.widget-article-list li:hover { padding-left: 30px;}

/* Pagination */
.pagination {  display: block; padding: 35px 30px; text-align: center;}
.pagination ul { display: block; margin: 0 auto; padding: 0; list-style: none;}
.pagination li { display: inline-block; background-color: #fff; line-height: 45px; border-radius: 0; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.pagination li:hover { background-color: #ffbf00;}
.pagination li a { display: block; color: #3f3f3f; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif; text-decoration: none; border-radius: 0; -webkit-transition: all linear 0.2s;  transition: all linear 0.2s;}
.pagination li .current { background-color: #ffbf00; border-radius: 0;}

.pagination > .page-numbers { padding-top: 30px; padding-bottom: 40px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.pagination > .page-numbers .dots { display: block; padding: 12px 0; }
.pagination li a { display: block; color: #717171;width: 45px; height:45px; text-align: center; line-height: 45px;}
.pagination li:hover { background: #f7c51e; }
.pagination li:hover a { color: #313131; }
.pagination li .current { display: block; color: #313131; background: #f7c51e; width: 45px; height:45px; text-align: center; line-height: 45px; border-radius: 2px; }

/* Contact */
.contact-conent { margin: 0; padding: 0 30px; max-width: auto;}
.contact-conent .button { display: block; margin: 0; padding: 0 20px; width: 100%; background-color: #3f3f3f; font-size: 18px; line-height: 35px; color: #fff; font-weight: 700; border: 0; border-radius: 3px; 
 transition: all linear 0.2s;
}
.contact-conent .button:hover,
.contact-conent .button:focus { background-color: #ffbf00; color: #3f3f3f;}
.contact-conent [class*="col-"],
.contact-conent [class^="col-"] { margin-bottom: 15px;}
.contact-conent h2 { margin: 0; padding: 15px 0; font-weight: lighter;}
.contact-conent p { line-height: 40px; margin: 0;}
.contact-conent p.require:after { position: relative; display: inline-block; content: "*"; bottom: -5px; color: #f00; font-size: 18px; font-weight: bold; line-heihgt: 40px; margin-left: 10px;}
.contact-conent .form-control { background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.form-control:focus { background-color: #fff; border-color: #ffbf00; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 190, 0, 0.6); }
.contact-conent label { font-weight: normal;}
.contact-conent label input[type="checkbox"] { margin-right: 10px;}
.contact-conent .input-group-addon { padding: 0; width:  80px; height: 35px; background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.contact-conent .input-group .input-group-addon:first-child { padding: 0 10px; border-right: 0;}
.contact-conent .input-group .input-group-addon:last-child { border-left: 0;}

/* Sitemap */
.links-one { margin: 0 30px 30px;}
.link-three li { width: 32.333333%;}
.links-two .link-three:last-child { margin-bottom: 0;}
.links-two .col-md-6:nth-child(2n+1) { clear: both;}

	
/*Footer*/
footer { padding: 0; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif;}
.footer-top { background-color: #262626;}
.footer-top ul { display: table; margin: 0; padding: 0; list-style: none; width: 100%;}
.footer-top ul li { display: table-cell; width: 12.5%; line-height: 70px; text-align: center;}



.footer-center { padding: 20px 0; background-color: #2C2C2C; background-image: url(../../images/bg-wave.png);}
.footer-center h4 { margin: 0; padding: 30px 0 20px 40px; font-size: 18px; line-height: 30px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.footer-center h4:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}

.footer-center ul { margin: 0; padding: 0; list-style: none;}
.footer-center ul li { position: relative; padding: 5px 0 5px 40px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.footer-center ul li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}
.footer-center ul li a { color: #fff;  display: inline-block;
	overflow : hidden;
	text-overflow: ellipsis;
	/*display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;*/
}
.footer-center ul li:hover { padding-left: 30px;}
.widget-about li { display: inline-block;}

.footer-bottom { background-color: #fff;}

}

/* mobile */
@media only screen and (min-width: 280px) and (max-width: 760px) {
body { padding: 80px 0 50px 0;}
/* Header */
.header-top { padding-top: 20px;}
.cd-left-logo { float: none; display: block; width: 100%; height: auto;}
.cd-left-logo .logo-left, .cd-left-logo .logo-right { display: inline-block;}

.logo-shape { width: 200px; height: 40px; padding-right: 10px;}
.logo-name,
.service-phone{ margin: 0 ; padding: 0;}
.service-phone a { display: inline; color: #444;}
.logo-name { height: 26px;}
.logo-name img { height: 20px; width: auto;}
.service-phone{height: 14px; font-size: 12px;}
.cd-auto-hide-header { padding: 0 80px 0 20px; height: 80px;}

.nav-open .cd-primary-nav ul, .cd-primary-nav ul:target { top: 80px;}
.cd-primary-nav > ul a:after { display: none;}

/* Crumb */
.crumb { text-align: left;}
.crumb ul, .crumb li { margin: 0; padding: 0; list-style: none;}
.crumb li { display: inline-block; font-size: 12px; line-height: 20px;}
.crumb li:after { display: inline-block; content: "\e903"; padding: 0 10px; font-family: 'icomoon' !important; font-size: 12px; color: #3f3f3f; vertical-align: middle; opacity: 0.65;}
.crumb li:last-child:after { display: none;}
.crumb li a { display: inline-block; color: #717171; text-decoration: underline;}


/* Banner */
.slide-box { padding: 0;}

.oz-intro .col-md-4 { padding-bottom: 0; border: none;}
.oz-intro .col-md-4:last-child { padding-bottom: 40px;}

.oz-intro .intro-bottom h1 { color: #fff; font-size: 24px;}
.oz-intro .intro-bottom p { color: #dedede; text-align: left;}

/* RWD */
.rwd-title h2 { font-size: 22px;}
.rwd-title h3 { font-size: 24px;}
.rwd-title p { font-size: 20px;}

#canvas-box { padding-top: 30px; text-align: center;}
#canvas-box canvas { margin: 0 auto;}

#rwd-content { padding-top: 40px;}
#rwd-content h1 { margin-top: 0; text-align: center; font-size: 24px;}
#rwd-content .button { margin-bottom: 40px; margin-top: 40px; margin-left:auto; margin-right: auto;}

/* Sevice */
.serv-box { padding: 0; border: 0;}

.serv-box .serv-item { padding: 30px 0 0;}

.serv-title { padding: 20px 0 0;}
.serv-list { padding: 15px 0 0;}


/* Pages*/
.page-box { position: relative;}
.page-head { position: relative; z-index: 10; padding: 10px 0; background-color: rgba(255,255,255,0.5); text-align: left; border-bottom: 1px solid rgba(0,0,0,0.05);}
.page-head .col-sm-7,
.page-head .col-sm-9 { padding: 10px 0 0; margin-bottom: -10px;}

.page-content { position: relative; z-index: 5;}

/* Filter */
.filter { text-align: center;  margin: 0;}
.filter ul, .filter li { margin: 0; padding: 0; list-style: none;}
.filter ul { display: table; width: 100%;}
.filter ul:after { display: table; content: ""; clear: both;}
.filter li { display: table-cell;}
.filter li a { padding: 5px 0;  display: block; color: #fff; font-size: 12px; border: 1px solid rgba(0,0,0,0.05); border-bottom: none; background: #3f3f3f;}
.filter li a.active { background-color: #fff; color: #3f3f3f;}
.filter li a .fa { margin-right: 8px;}
.filter li:last-child a .fa { margin-left: 8px;}

.filter-content { display: none; padding: 15px; background-color: rgba(0,0,0,0.85); background-image: url(../../images/banner-bg.jpg); background-size: cover;}
.filter-content .col-sm-12 { margin-bottom: 10px; padding: 0 0 10px 0; border-bottom: 1px dotted rgba(255,255,255,0.35);}
.filter-content .col-sm-12:last-child { margin: 0; padding: 0; border-bottom: none;}
.filter-content h4 { display: block; margin: 0 1.5rem 0 0; padding: 0; font-size: 16px; line-height: 20px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.filter-content h4:after { display: none;}
.filter-content h4 a { color: #fff;}

.filter-content dl, .filter-content dt, .filter-content dd { display: block; margin: 0; padding: 0; font-size: 14px; line-height: 24px;}
.filter-content dl { position: relative; padding: 20px 0; border-bottom: 1px dotted rgba(255,255,255,0.65);}
.filter-content dl:last-child { border-bottom: none;}
.filter-content dt { padding-bottom: 15px; color: #fff;}
.filter-content dt:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}
.filter-content dd { }
.filter-content dd ul { margin: 0; padding: 0; list-style: none;}
.filter-content dd li { display: inline-block; width: 32%;}
.filter-content dd li a { display: block; color: #fff;  font-size: 12px;}

.filter .widget-about,
.filter .widget-about li { margin: 0; padding: 0; list-style: none;}
.filter .widget-about { margin: 0;}
.filter .widget-about:after { display: table; content: ""; clear: both;}
.filter .widget-about li { float: left; width: 25%; text-align: center;}
.filter .widget-about li a { padding: 5px 0; display: block; color: #fff; font-size: 12px; border: 1px solid rgba(0,0,0,0.05);  border-bottom: none; background: #3f3f3f;}
.filter .widget-about li a:hover, .filter .widget-about li a:focus { background-color: #fff; color: #3f3f3f;}

.filter-content .widget-portfolios,
.filter-content .widget-portfolios li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-portfolios li { display: inline-block;}
.filter-content .widget-portfolios li a { display: block; padding: 0 10px; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-portfolios li a:hover { text-decoration: none;}

.filter-content .widget-professionals,
.filter-content .widget-professionals li { margin: 0; padding: 0; list-style: none;}
.filter-content .widget-professionals { padding-bottom: 0;}
.filter-content .widget-professionals li { position: relative; display: inline-block; padding: 5px 0 5px 30px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.filter-content .widget-professionals li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}

.filter-content .widget-professionals li a { display: block; padding: 0; min-width: 5em; color: #fff; text-decoration: none;}
.filter-content .widget-professionals li a:hover { text-decoration: none;}

.filter-content .widget-portfolios,
.filter-content .widget-professionals { padding-top: 15px;}

/* Case */
.case-box { padding: 0;}

.case-list { position: relative; padding-top: 15px; padding-bottom: 15px; box-shadow: inset -1px 0 0 rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.05);}
.case-list:nth-child(2n) { box-shadow: inset 0 0 0 rgba(0,0,0,0.05), inset 0 -1px 0 rgba(0,0,0,0.05);}
.case-album img { display: block;}
.case-meta h4 { margin: 10px 0; padding: 0;}
.case-meta a { color: #3f3f3f; font-weight: normal; font-size: 16px; line-height: 18px; height: 18px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.case-meta p { margin: 0; padding: 0; font-size: 14px; line-height: 18px; color: #969696; height: 36px;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Article */
.article-conent  { padding: 0 30px;}

.article-list { padding: 15px 15px 0;}
.article-item { background-color: rgba(255,255,255,0.35); border: 1px solid rgba(0,0,0,0.05); overflow: hidden;}
.article-album { padding: 30px 30px 0;}
.article-album a { display: block; position: relative; text-decoration: none;}
.article-meta { padding: 15px 30px;}
.article-meta h4 { margin: 0 0 15px 0; padding: 0;}
.article-meta a { color: #3f3f3f; font-weight: normal; font-size: 16px; line-height: 1.4; height: 1.4em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.article-meta a:hover { color: #FFBF00;}
.article-meta p { margin: 0; font-size: 12px; line-height: 1.6; color: #717171; height: 3.2em;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.article-title { margin: 0; padding: 15px 0; font-size: 20px; font-weight: bold;}
.article-title:after { display: block; content: ""; margin-top: 15px; width: 2rem; font-size: 20px; border-top: 2px solid #ffbf00;}


.article-fck p b { font-size: 18px; font-weight: bold; color: #3f3f3f;}
.article-fck ul,
.article-fck ol { padding-left: 20px;}
.article-fck a { text-decoration: underline; color: #121212;}
.article-fck .ozchamp { margin: 20px 0 -15px 0;}


/* Pagination */
.pagination {  display: block; padding: 0 15px; text-align: center;}
.pagination ul { display: block; margin: 0 auto; padding: 0; list-style: none;}
.pagination li { display: inline; background-color: #fff; line-height: 40px; border-radius: 0; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.pagination li:hover { background-color: #ffbf00;}
.pagination li a { display: inline; color: #3f3f3f; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif; text-decoration: none; border-radius: 0; -webkit-transition: all linear 0.2s;  transition: all linear 0.2s;}
.pagination li .current { background-color: #ffbf00; border-radius: 0;}

.pagination > .page-numbers { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.pagination > .page-numbers .dots { display: inline; padding: 12px 0; }
.pagination li a { display: inline; padding: 0 10px;  width: auto; height: auto;color: #717171; text-align: center;}
.pagination li:hover { background: #f7c51e; }
.pagination li:hover a { color: #313131; }
.pagination li .current { display: inline-block; background-color: transparent; width: auto; height: auto; color: #ffbf00; }

/* Related */
.related-box { margin-bottom: 20px; padding: 10px 0 20px 0; border-top: 1px solid rgba(0,0,0,0.05);}
.widget-title { margin: 0; padding: 30px 0 0 35px; font-size: 16px; line-height: 30px; color: #3f3f3f; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.widget-title:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}
.widget-content {}

.widget-article-list { margin: 0; padding: 0; list-style: none;}
.widget-article-list li { position: relative; padding: 5px 0 5px 35px; font-size: 14px; line-height: 30px; color: #717171; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; border-bottom: 1px solid rgba(0,0,0,0.05);}
.widget-article-list li:before { position: absolute; left: 0; display: block; content: "\e906"; font-family: 'icomoon' !important; font-size: 28px; color: #3f3f3f; opacity: 0.65;}
.widget-article-list li a { color: #717171; text-decoration: none; border: none;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.widget-article-list li:hover { padding-left: 30px;}

/* Contact */
.contact-box { padding: 0 20px; font-size: 14px;}

.contact-conent { margin-bottom: 40px;}
.contact-conent h2 { font-size: 18px; font-weight: normal; line-height: 1.4;}
.contact-conent p { margin-top: 20px;}
.contact-conent p.require:after { position: relative; display: inline-block; content: "*"; bottom: -5px; color: #f00; font-weight: bold; margin-left: 10px;}
.contact-conent .form-control { background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.form-control:focus { background-color: #fff; border-color: #ffbf00; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 190, 0, 0.6); }
.contact-conent label { font-weight: normal;}
.contact-conent label input[type="checkbox"] { margin-right: 10px;}

.contact-conent .form-group { margin-top: -1px;}
.contact-conent .input-group-addon { padding: 0; width:  80px; height: 35px; background-color: #fdfdfd; border: 1px solid #898989; border-radius: 0;}
.contact-conent .input-group { width: 100%;}
.contact-conent .input-group .input-group-addon:first-child { padding: 0 10px; border-right: 0;}
.contact-conent .input-group .input-group-addon:last-child { border-left: 0; padding: 0 10px;}

.contact-conent .button { display: block; margin: 0; padding: 0 20px; width: 100%; background-color: #3f3f3f; font-size: 18px; line-height: 35px; color: #fff; font-weight: 700; border: 0; border-radius: 3px; 
 transition: all linear 0.2s;
}

.contact-conent .pull-right { float: none !important;}
.contact-conent .button:hover,
.contact-conent .button:focus { background-color: #ffbf00; color: #3f3f3f; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 190, 0, 0.6); }

/* Sitemap */
.links-one { margin: 0 30px 30px;}

/* Footer */
footer { padding: 0; font-family: "Roboto Condensed", "微軟正黑體", Verdana, Geneva, sans-serif;}
.footer-top { background-color: #262626;}
.footer-top ul { display: block; margin: 0; padding: 0; list-style: none; width: 100%;}
.footer-top ul:after { clear: both; display: table; content: "";}
.footer-top ul li { float: left; display: block; width: 50%; line-height: 50px; text-align: center; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(255,255,255,0.1);}
.footer-top ul li img { max-height: 32px;}

.footer-center { padding: 20px 0; background-color: #2C2C2C; background-image: url(../../images/bg-wave.png);}
.footer-center h4 { margin: 0; padding: 0 0 10px 35px; font-size: 16px; line-height: 30px; color: #fff; font-family: "微軟正黑體" !important; font-weight: normal !important;}
.footer-center h4:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}

.footer-center ul { margin: 0; padding: 0; list-style: none;}
.footer-center ul li { position: relative; padding: 5px 0 5px 35px; font-size: 14px; line-height: 20px; color: #fff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s;}
.footer-center ul li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; color: #fff; opacity: 0.65;}
.footer-center ul li a { color: #fff; display: inline-block;
	overflow : hidden;
	text-overflow: ellipsis;
	/*display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;*/
}
.footer-center ul li:hover { padding-left: 30px;}

.footer-center [class*="col-sm-"],
.footer-center [class^="col-sm-"] { padding: 0;}


.widget-about li { display: inline-block;}

.footer-bottom { background-color: #fff;}
.footer-copyright { padding: 0 40px;}
.footer-copyright span { display: inline-block;}

/* 2016-12-26 */
.case { margin-bottom: 3rem; padding: 10px;}
.banner { background-color: #242424; background-image: url(../../images/bg-noise-trans.png);}
.banner .oz-intro { background-image: none; color: #fff;}

.oz-intro .intro-bottom { padding: 30px 8.333333%;}
.oz-intro .intro-bottom h1 .text-underline { font-size: 28px; font-weight: 700;}
.oz-intro .intro-bottom .button { position: relative; display: inline-block; margin-top: 25px; padding: 10px 35px; font-size: 18px; line-height: 20px; color: #fff; border: 1px solid #fff; font-weight: 700;}
.oz-intro .intro-bottom .button:after { position: absolute; left: 10px; right: -10px; top: 10px; bottom: -10px; width: 100%; height: 100%; background-image: url(../../images/bg-line-b.png); content: ""; font-weight: normal;}
.oz-intro .intro-bottom .button .icon { position: absolute; top: 0; right: -64px; font-size: 96px; line-height: 44px; -webkit-transition: all linear 0.15s; transition: all linear 0.15s;}


.oz-intro .intro-top { margin-top: 15px; margin-bottom: -180px; padding: 0 20px;}
.oz-intro .intro-top h3 { padding: 30px 0; color: #fff; font-weight: 700;}
.oz-intro .intro-top .swiper-slide { height: 330px;}

.bg-yellow, .bg-pink, .bg-purple { width: 100%; height: 100%; background-image: url(../../images/bg-noise-trans.png);}
.bg-yellow { background-color: #FFD550;}
.bg-pink { background-color: #FD4A75;}
.bg-purple { background-color: #685FDC;}
.serv-box { padding-top: 150px;}
.rwd-title { margin-top: -21px;}

/* Tabs */
.serv-tabs { padding: 200px 20px 0 20px;}
.tabs-item .swiper-slide { padding-top: 15px; width: 33.333333%; font-size: 48px; line-height: 60px;}
.tabs-item { border: 1px solid rgba(0,0,0,0.1); border-bottom: none;}
.tabs-content { padding: 0 20px 20px; border: 1px solid rgba(0,0,0,0.1); border-top: none;}

/* Clients */
.clients { margin-top: 30px; padding: 30px 20px 100px; background-image: url(../../images/bg-gray.png); border-top: 1px solid rgba(0,0,0,0.1);}
.clients h4 { margin: 0; padding: 20px 0 10px 55px; background-color: #fff; font-size: 16px; line-height: 30px; font-family: "微軟正黑體" !important; font-weight: normal !important;  border: 1px solid rgba(0,0,0,0.1); border-bottom: none;}
.clients h4:after { display: inline-block; content: ""; margin-left: 0.75rem; border-bottom: 2px solid #FFBF00; width: 1em;}

.clients ul,
.clients li { position: relative; margin: 0; padding: 0; list-style: none;}
.clients ul { padding: 0 20px 20px; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none;}
.clients ul:before { position: absolute; left: 5px; right: 5px; bottom: -6px; height: 5px; content: ""; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none;}
.clients ul:after { position: absolute; left: 10px; right: 10px; bottom: -9px; height: 4px; content: ""; background-color: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: none;}
.clients li { float: none; width: 100%; margin-top: -1px; padding: 8px 0 8px 35px; font-size: 14px; line-height: 20px;}
.clients li:before { position: absolute; left: 0; display: block; content: "\e907"; font-family: 'icomoon' !important; font-size: 28px; opacity: 0.65;}
.clients li:nth-child(odd) { background-color: #fff;}
.clients li:nth-child(even) { background-color: #f9f9f9;}

.fixed-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; }
.fixed-nav ul,
.fixed-nav li { margin: 0; padding: 0; list-style: none;}
.fixed-nav ul { display: flex; width: 100%;}
.fixed-nav li { flex: 1; }
.fixed-nav li:not(:first-child) a { border-left: 1px solid #0001; }
.fixed-nav a { display: flex; justify-content: center; align-items: center; padding: 15px; height: 100%; font-size: 18px; line-height: 20px; color: #151515; background-color: #FFBF00;}
.fixed-nav .fa,
.fixed-nav img { margin-right: 15px;}
.fixed-nav a img { display: block; border: 0; outline: 0; }
}


/* 2018-1-10 */

.case-detail-box { padding: 30px;}
.case-title { margin: 0; padding: 0 0 20px 0; font-weight: normal; font-size: 24px;}
.case-img { margin: 40px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.case-img:first-child { margin-top: 0px;}
.case-img:last-child { margin-bottom: 0px;}
/*Vicky 2020-08-21*/
@media screen and (max-width:767px){
	.case .innerContent h2.vv0821-mb-h2{margin-bottom: 10px !important;}
}

/* 2022-new-index */
i { transition-duration: 0.3s;}
a:hover i { margin-left: 15px; }
.case .btn-primary{background: #002aa2; border-color:aqua; color:aqua; border-radius: 7px; padding: 10px 15px;}
section { overflow: hidden;}
.innerContent { color:#FFF;}
.index-sub { color:#220076; margin-bottom: 50px!important; font-size: 35px; font-weight: bold; text-align: center;}
.thr-service-title { margin: 0 0 50px 0; text-align: center;}
.thr-service .service-icon-box { padding: 20px; }
.thr-service .service-icon-box .icon-box-icon { margin-bottom: 20px;display: flex;}
.thr-service .service-icon-box .icon-box-icon img { background: #FFF; padding: 10px; box-shadow: 10px 10px 20px #e2def5; border-radius: 10px; width: 70px; height: 70px;}
.thr-service .service-icon-box .icon-box-icon span {color:#afd7e3; display: block; font-size: 14px; font-weight: normal; }
.thr-service .service-icon-box .icon-box-icon h4 { font-size: 25px; margin-left: 20px;}
.thr-service .service-icon-box .icon-box-info p { color:#333; line-height: 1.5;}
.thr-service .btn { color:#220076; text-shadow: 0.3em 0.3em 0.5em #e2def5; padding: 10px; }
.thr-service .btn i { font-size: 20px;}
.cav  {position: absolute;right: -5%; top: -20%; transform: scale(1.5);  z-index: -10; opacity: 0.5;}


.prod-gallery { padding: 150px 0; position: relative; overflow: hidden;}
.prod-gallery::before { position: absolute; content: "";  width: 25%; height: 80px; background-color: #06249e; box-shadow: 100px 40px 0 #afd7e3;  top: 150px; left: -10%;  z-index: -1; transform: rotate(-10deg);}
.prod-gallery::after { position: absolute; content: "";  width: 25%; height: 100px; background-color: #afd7e3; box-shadow: 60px 30px 0 #06249e;  bottom: 250px; right: -10%;  z-index: -1; transform: rotate(-10deg);}
.prod-gallery [class*="col"] { margin-bottom: 15px;}
.prod-gallery .color-back { width: 150%; height: 100%; position: absolute; transform: rotate(-10deg);  z-index: -5; bottom: 150px; left: -30%; 
background: rgb(238,238,238);
background: -moz-linear-gradient(-10deg,  rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(-10deg,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(-10deg,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=1 );}
.prod-gallery h3 { color:#220076; font-size: 18px;}

.last-more { display: flex; justify-content: center;align-items: center; }

.last-more i { margin-left: 10px;}


.new-client { padding:150px 0 100px; position: relative;}
.new-client .color-back { width: 150%; height: 100%; position: absolute; transform: rotate(-10deg);  z-index: -5; bottom: -40%; left: -30%; 
    background:rgba(16,57,164,0.8);}
.new-client h3 { font-size: 15px; color:#FFF;}
.new-client .owl-carousel .owl-nav {position: absolute; top: 30%; width: 100%; padding: 0 30px; }
.new-client .owl-carousel .owl-nav button.owl-prev,
.new-client .owl-carousel .owl-nav button.owl-next { font-size: 80px;  color:#FFF; text-shadow: 2px 2px 2px #333;}
.new-client .owl-carousel .owl-nav button.owl-prev { float: left;}
.new-client .owl-carousel .owl-nav button.owl-next { float: right;}


@media screen and (max-width:680px){
    .prod-gallery,.serv-box,.new-client { padding: 50px 0 !important;}
    .owl-item .item { padding: 40px;}
    .case .innerContent p { font-size: 13px;}
    .cav { top: 15%;transform: scale(2);}

    .index-sub { margin-bottom: 3rem !important; }
}

.fixed-line { position: fixed; z-index: 9; right: 0; top: 50%; transform: translateY(-50%); }
.fixed-line a { position: relative; display: block; padding: 1rem; transition: .3s; border-radius: 5px; border: 2px solid #fff; box-sizing: border-box; }
.fixed-line a.line { background: #00cf2e; box-shadow: 0 2rem 4rem 0 #00cf2355; }
.fixed-line a.line:hover { /*transform: translateY(.5rem);*/ box-shadow: 0 .5rem 1rem #00cf2375; }
.fixed-line a.phone { margin: 2px 0; background: #ff6d34; box-shadow: 0 2rem 4rem 0 #ff6d3455; }
.fixed-line a.phone:hover { /*transform: translateY(.5rem);*/ box-shadow: 0 .5rem 1rem #ff6d3475; }
.fixed-line a img { width: 3.2rem; transition: .3s; }
.fixed-line a:hover img { opacity: 0; transform: scale(0); }
.fixed-line a span { position: absolute; left: 0; top: 0%; display: block; width: 100%; height: 100%; font-size: 1.6rem; color: #fff; font-weight: bold; text-align: center; line-height: 5.2rem; opacity: 0; transform: scale(.5); transition: .3s; }
.fixed-line a:hover span { opacity: 1; transform: scale(1); }
.fixed-line a.svg { padding: 0; border: 0; box-shadow: 0 2rem 4rem 0 #03a9f455; }
.s0 {
    fill: #ff6d34;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-miterlimit: 10;}
.s1 {
    fill: #000094;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
.s2 {
    fill: #0458E9;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
.s3 {
    fill: #03a9f4;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
text {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 3.2rem;
    fill: white;
    stroke: none;
}


.case .swiper-wrapper { height: 70% !important; }
.case .swiper-slide { height: 100% !important; }


.banner-eve2 { background-size: cover; background-repeat: no-repeat; background-position: center; }
.banner-eve2 a { position: relative; display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.banner-eve2 a img { position: relative; max-height: 100%; opacity: 0; }
.banner-eve2 { background-image: url(/images/mobile/banner-1.png); }
.banner-eve2 a { background-image: url(/images/mobile/banner-1-t.png); }

.banner-eve3 { background-size: cover; background-repeat: no-repeat; background-position: center; }
.banner-eve3 a { position: relative; display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
.banner-eve3 a img { position: relative; max-height: 100%; opacity: 0; }
.banner-eve3 { background-image: url(/images/mobile/banner-2.png); }
.banner-eve3 a { background-image: url(/images/mobile/banner-2-t.png); }

.banner-2023 { background-image: url(/images/mobile/img-1920-800.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;  }
.banner-2023 a { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding-left: 50vw; padding-right: 15vw; text-align: left; text-decoration: none; color: #444; }
.banner-2023 a h2 { margin: 0 0 2rem; font-size: 4.2rem; color: #002c60; }
.banner-2023 a p { font-size: 2rem; line-height: 1.75; }

@media screen and (max-width:960px) {
	.banner-2023 a { padding-left: 40vw; }
}

@media screen and (max-width:480px){
	.case .swiper-wrapper { height: 100vw !important; }

	.banner-eve2 a { background-image: none; }
	.banner-eve2 a img { z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
	.banner-eve2 { background-image: url(/images/mobile/banner-1a.png); }

	.banner-eve3 a { background-image: none; }
	.banner-eve3 a img { z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
	.banner-eve3 { background-image: url(/images/mobile/banner-2a.png); }

	.banner-2023 { background-image: url(/images/mobile/img-960-960.jpg); }
	.banner-2023 a { padding: 14vw 3rem 0; justify-content: flex-start; }
	.banner-2023 a h2 { font-size: 3.4rem; }
	.banner-2023 a p { font-size: 1.8rem; }
}