@charset "utf-8";

/** 文字icon **/
@import "font-awesome.min.css";
body{background:url("../images/body-bg.jpg") repeat-x top; font-family: "Microsoft JhengHei"}
header>.container{position:relative; background:url("../images/header-bg.png") no-repeat right bottom;}
.logo{position:relative;display:inline-block;max-width:calc(100% - 60px);}
.logo small{position:absolute;left: 20%;/* bottom: -10px; */color:#333;font-size:15px;}
footer{background-color:#2d2c2d; font-size:15px; line-height:20px;}
footer span{display:inline-block;}
.edm{padding:0; border:2px solid #fff; border-radius:15px; overflow:hidden;}
@media (max-width:575px){
	.edm{margin:0 15px;}
}
.banner-title{background-color:#343a40;}
.banner-title h1{margin-bottom:0; padding:16px 0; color:#f8f9fa;}
aside, .page-main{padding-top:24px; padding-bottom:24px;}
aside{width:215px;}
@media (max-width:768px){
	aside{display:none;}
}
aside ul.list-group{list-style:none; margin-bottom:45px; padding:0 6px;}
aside .list-group-item{border:0; border-radius:0;}
aside .list-group-item:last-child{border:0; border-radius:0;}
aside ul li a.list-group-item{padding:0; font-weight:bold;  font-size:15px; line-height:40px;
	color:#222; text-align:center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d5d6d8+0,f7f7f9+100 */
background: #d5d6d8; /* Old browsers */
background: -moz-linear-gradient(top,  #d5d6d8 0%, #f7f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d5d6d8 0%,#f7f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d5d6d8 0%,#f7f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d6d8', endColorstr='#f7f7f9',GradientType=0 ); /* IE6-9 */
}
aside ul li a.list-group-item:hover{color:#c22d1a;}
.m_classLink{display:none;}

@media screen and (max-width:575px){
	img.edm{width:calc(100% - 30px);}
	aside .menu-title{display:none;}
	aside{width:calc(100% - 30px); margin:0 15px;}
	aside ul.list-group{padding:0;}
	.classBox{padding:0 0 20px 0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative; background-color:#eeeeee; border:1px solid #61a9f5;}
	.m_classLink a.main{display:block; background:none; font-size:15px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
	.m_classLink a.main i{display:block; font-size:15px; background:#61a9f5; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
	.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #d1d1d1; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #d1d1d1; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:15px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:#efeded;}
	.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none; width:calc(100% - 20px); background:#FFF; border:1px solid #d1d1d1; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
}

.serviceline{background-color:#ccc; padding:10px 10px 25px; border:3px solid #b8b8b8; border-radius:15px;}
.serviceline .sl-head{padding:0 0 5px 15px; font-weight:bold; font-size:18px; text-shadow:0 0 1px #fff;}
.serviceline .sl-info{background-color:#fff; Margin-top:-20px; padding-bottom:15px; font-weight:bold; text-align:center;}
.serviceline .phoneno{padding:25px 5px 5px;}
.mobile.serviceline{display:none;}
@media (max-width:575px){
	.serviceline{display:none;}
	.mobile.serviceline{display:block; width:100%; margin:0 15px 45px;}
}
.phoneno{display:block; font:bold 24px/30px "Times New Roman", Times, serif; color:#d12908; text-align:center; padding-top:80px;}

.mobile-nav{display:none;}
@media (max-width:768px){
	.mobile-nav{position:fixed; top:0; right:20px; display:block; z-index:9999;}
}



/** 左側拉出購物車LIST模組 **/
#sidr-left{font:15px/1.6 Arial, "Microsoft JhengHei"; display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-x:none; overflow-y:auto; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; font-size:15px; background:#333; color:#fff; -webkit-box-shadow:inset 0 0 5px 5px #222; -moz-box-shadow:inset 0 0 5px 5px #222; box-shadow:inset 0 0 5px 5px #222;}
#sidr-left *{font:15px/1.6 Arial, "Microsoft JhengHei"; color:#fff;}
#sidr-left .cart-header{padding:15px; text-align:center; position:relative;}
#sidr-left .cart-header .cross{position:absolute; top:5px; right:10px;}
#sidr-left .cart-header .fa{font:20px FontAwesome;}
#sidr-left .ng-hide{padding:15px; text-align:center;}
#sidr-left .cart-items{padding:15px;}
#sidr-left .cart-item{margin:10px 0; display:flex;}
#sidr-left .cart-item .product-link{width:45px;}
#sidr-left .cart-item .product-link img{width:100%;}
#sidr-left .cart-item .cart-item-content{flex:1; margin:0 10px;}
#sidr-left .cart-item .cart-item-content .title{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-scope{font-size:13px;}
#sidr-left .cart-item .cart-item-content .price-details{font-size:13px;}
#sidr-left .cart-item .cart-item-content .ng-binding{font-size:13px;}
#sidr-left .cart-item a.remove{width:30px; font-size:14px; color:#ddd; font-family:Arial, "Microsoft JhengHei";}
#sidr-left .cart-item a.remove:hover{color:#c0392b;}
#sidr-left .cart-chkt-btn{width:100%; display:block; padding:15px;}
#sidr-left .cart-chkt-btn button{width:100%; font-size:14px; line-height:1.4em; padding:6px 12px; border:1px solid #888; text-align:center; background-color:transparent; border-radius:4px;}
#sidr-left .cart-chkt-btn button:hover{background-color:#1f2429;}
.modal-backdrop{background-color:rgba(0,0,0,.5); position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1;}

/* 產品明細頁 */
.addcart-box .modal-title{}
.addcart-box .price.member{color:#9e0c36; font-weight:bold;}
.addcart-box .spec-title{padding:10px 0;}
.addcart-box ul.specs li{display:inline-block; width:auto; margin:0 5px 20px 0; padding:5px; border:2px solid #333; border-radius:5px; cursor:pointer;}
.addcart-box ul.specs li[disable],.addcart-box ul.specs li.current[disable]{background-color:#fff; color:#ccc; border-color:#ccc;}
.addcart-box ul.specs li.current{background-color:#d63b68; color:#fff;}
             ul.specs {margin-left:0; padding-left:0;}

/* RWD表格 */
.stacktable { width: 100%; }
.st-head-row { padding-top: 1em; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-key { /* width: 49%; */ text-align: right; padding-right: 1%; }
.st-val { /* width: 49%; */ padding-left: 1%; }
/* RESPONSIVE EXAMPLE */
.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 800px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
}


/* 首頁-產品列表 */
.i-prod-title{position:relative; background: url(../images/title-1.jpg) repeat-x left bottom; height:43px;}
.i-prod-title:before{content:""; position:absolute; left:0; bottom:0; width:20px; height:43px; background-image:url("../images/title-0.jpg");}
.i-prod-title:after{content:""; position:absolute; right:0; bottom:0; width:150px; height:43px; background-image:url("../images/title-2.jpg");}
.i-prod-title-txt{display: inline-block;
    font: 15px/24px "微軟正黑體";
    color: #fff;
    border: solid 1px #c22d1a;
    min-width: 136px;
    padding: 0 10px;
    margin: 17px 0 0 25px;    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ee6656+0,d23927+100 */
background: #ee6656; /* Old browsers */
background: -moz-linear-gradient(top,  #ee6656 0%, #d23927 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ee6656 0%,#d23927 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ee6656 0%,#d23927 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee6656', endColorstr='#d23927',GradientType=0 ); /* IE6-9 */
}
.i-prod .row{margin-bottom:30px;}
.i-prod .card-title{font:16px/18px "微軟正黑體";
    color: #666;
    text-align: center;}
.i-prod .card{border:0;}
.i-prod .card img{    border: solid 1px #ccc;
    margin-bottom: 5px;
    border-radius: 8px;
    background-color: #fff;}
@-webkit-keyframes fadeout{
			0%{opacity:1.0;}
			20%{opacity:.5;}
			100%{opacity:1.0;}
		}
		@keyframes fadeout{
			0%{opacity:1.0;}
			20%{opacity:.5;}
			100%{opacity:1.0;}
		}
.i-prod .card img:hover{-webkit-animation: fadeout .6s;
    -o-animation: fadeout .6s;
    animation: fadeout .6s;}




/* 內頁 */
h1{font:normal 24px/2 "微軟正黑體"; color:#0a3a9b; text-align:center;}
h2{font:normal 18px/24px "微軟正黑體"; color:#333; text-align:center; margin-bottom:0;}
h3{font:normal 18px/52px "微軟正黑體"; color:#ff2100; border-bottom:solid 1px #ff2100; text-align:left; margin:0 30px;}
.content p{font: 18px/1.5 "微軟正黑體";color:#666;/* margin:20px 30px 40px 30px; */}
.contactinfo{background:url(../images/contacttxt-bg.png) no-repeat;}
  .contacttxt{padding:12px 20px; font:15px "微軟正黑體"; color:#000; border:1px solid #1786b9; border-radius:10px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e4f1fb+0,69aede+100 */
background: #e4f1fb; /* Old browsers */
background: -moz-linear-gradient(top,  #e4f1fb 0%, #69aede 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e4f1fb 0%,#69aede 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e4f1fb 0%,#69aede 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1fb', endColorstr='#69aede',GradientType=0 ); /* IE6-9 */

}
    .telno{font:24px "微軟正黑體"; color:#067db4;}
@media (max-width:576px){
	.about-footer, .service-footer, .product-footer, .case-footer{display:none;}
}	
/* 公司簡介 */
.about-footer{position:relative; background:url(../images/about-pic02.jpg) no-repeat right center; height:288px;}
@media (max-width:1006px){
	.about-footer{background:none; height:auto;}
}
  .about-footer .about{left:30px; top:95px;}
  
/* 服務項目 */
.service-footer{position:relative; background:url(../images/service-pic02.jpg) no-repeat 530px center; height:180px;}
  .service-footer .service{left:50px; top:0;}
  
/* 產品介紹 */
.brandtable{font:15px "微軟正黑體"; color:#000;}
    .title{width:765px; height:43px; background:url(../images/title-bg.jpg); margin:30px 0 0 0;}
      .title-text{display:inline-block; font:15px/24px "微軟正黑體"; color:#fff; background:url(../images/title-text-bg.jpg) repeat-x; border:solid 1px #c22d1a; min-width:136px; padding:0 10px; margin:17px 0 0 25px; }
    .list{margin:0 20px;}
	  .list ul{margin:15px 0 0; padding:0; list-style:none;}
	  .list li{margin:0 8px 0 0; padding:0; float:left;}
	  .list a{display:block; width:172px;}

		@-webkit-keyframes fadeout{
			0%{opacity:1.0;}
			20%{opacity:.5;}
			100%{opacity:1.0;}
		}
		@keyframes fadeout{
			0%{opacity:1.0;}
			20%{opacity:.5;}
			100%{opacity:1.0;}
		}
	  .list a img{border:solid 1px #ccc; margin-bottom:5px; border-radius:8px; background-color:#fff;}
    .list a img:hover{-webkit-animation:fadeout .6s; -o-animation:fadeout .6s; animation:fadeout .6s;}

		.list a .prodname{display:block; width:172px; height:36px; overflow:hidden; font:16px/18px "微軟正黑體"; color:#666; text-align:center;}
		



/* 實績案例 */
.special-event ol{font-family:"Microsoft JhengHei"; color:#067db4;}

/* 聯絡我們 */
.contact-footer{position:relative;background:url(../images/contact-pic01.jpg) no-repeat right center;height:288px;}
@media (max-width:1006px){
	.contact-footer{background:none;height:auto;}
}

p.information{padding: 10px;}
  p.information strong{font-weight:normal; color:#000;}


.tag{margin:15px; padding:15px 5px; border-radius:10px; border:3px solid rgba(255,255,255,.8); box-shadow:0 0 10px 0 #7ea2e2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+51,207cca+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 51%, #207cca 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 51%,#207cca 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 51%,#207cca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
}
.tag h1{position:relative; margin-bottom:10px; padding:0 0 8px 0; font-weight:bold; font-size:24px; line-height:1.5; color:#fff; border-bottom:1px solid rgba(255,255,255,.2);}
.tag span{display:inline-block;}
.tag p{margin:0; padding:0;}
.tag p span{font-size:18px; line-height:1.5; color:#fff;}