nav a.active {
	border-bottom:5px solid #84C1FF;
}
@media screen and (max-width:840px) {
	nav a.active {
			border-bottom:5px solid transparent;
	}
	.toggle + a {
		display:none;		
	}  
	.toggle {
		display:block;
		font-size:16px;
		line-height:50px;
	}
}

.forh1{
	font-size:30px;
	color:#0066CC;
	text-align:center;
	margin:40px auto;
}
.theh1{
	font-size:30px;
	color:#0066CC;
	text-align:center;
	margin:auto;
	background:#ECF5FF;
	clip-path: polygon(0 0, 100% 0%, 100% 65%, 50% 100%, 0 65%);
	padding:100px 0 50px 0;
}
section{
	padding-top:50px;
}
/* 首頁輪播 */
#frontpage{
	padding-top:80px;
}
.container{
	width:900px;
	margin:0 auto;
	border-radius:15px;
}
.container img{
	margin:0 auto;
	border-radius:15px;
}
/* 輪播箭頭 */
.slick-prev,
.slick-next {
	width:100px;
   	height:100px;
	background:transparent;
	border:none;
	cursor:pointer;
	display:block;
	line-height:0;
	font-size:0;
   	position:absolute;
   	top:50%;
    -webkit-transform:translate(0, -50%);
    	-ms-transform:translate(0, -50%);
    		transform:translate(0, -50%);
}
.slick-prev:before,
.slick-prev:after,
.slick-next:before,
.slick-next:after {
	width:25px;
	height:5px;
	background:#AAA;
	content:'';
	display:block;
	position:absolute;
	top:2px;
	left:50px;
	   -moz-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
		 -o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
			transform:rotate(135deg);
}
.slick-prev:before,
.slick-prev:after{
	left:-50px;
}
.slick-prev {
    left:20px;
}
.slick-next {
    right:20px;
}
.slick-prev:after,
.slick-next:before {
	   -moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
		 -o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
}
.slick-prev:after,
.slick-next:after {
	top:17px;
}
.slick-prev:hover:before,
.slick-prev:hover:after,
.slick-next:hover:before,
.slick-next:hover:after {
	background:#3E3E3E;
}

/* 關於巨昌 */
#about{
	padding:110px 0;
}
.forabout{
	padding:20px 10px;
	background:#ECF5FF;
	clip-path: ellipse(39% 50% at 50% 50%);
}
.aboutforemost{
	color:#97CBFF;
}
.aboutword{
	margin:20 40px;
	text-align:center;
	font-size:18px;
	line-height:32px;
	color:#003D79;
}
.moreabout{
	display:flex;
	justify-content:center;
	margin:60px 0 0 0;
}
.moreabout a{
	text-align:center;
	text-decoration:none;
	background:none;
	color:#0066CC;
	border-style:solid;
	border-width:0.5;
	border-color:#0066CC;
	border-radius:7px;
	padding:10px;
	transition: all 0.30s ease-in-out;
}
.moreabout a:hover{
	background:#0066CC;
	color:#FFFFFF;
   transform:scale(1.2);
}
/* 企業概述about_us1 */
/* 網站導覽列 */
ul.breadcrumb {
	padding:10px 30px 10px 30px;
	margin:0;
	list-style: none;
}
ul.breadcrumb li {
	display: inline;
	font-size: 16px;
 }
ul.breadcrumb li+li:before {
	padding: 8px;
	color: black;
	content: "/\00a0";
}
ul.breadcrumb li a {
	color: #0275d8;
	text-decoration: none;
}
ul.breadcrumb li a:hover {
	color: #01447e;
	text-decoration: underline;
}
/* 關於巨昌內文 */
.word{
	text-align:left;
	margin:50px 30px;
	font-size:20px;
	letter-spacing:1px;
	line-height:32px;
}
  /* 圖片 */
.pic{
	display:block;
	margin: 50px auto;
	width:50%;
}

/* 相關認證about_us2 */
.certification{
	margin:50px 0;
	text-align:center;
}
.card1 {
	font-size:20px;
	line-height:35px;
	text-align:center;
	display:inline-block;
	width:40%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: all 0.3s;
	border-radius: 5px;
	margin:20px;
	padding:15px;
}
.container4 img{
	width:80%;
}

/* 最新消息 */
#hotnews{
	padding:40px 0 100px 0;
	background:rgb(248, 248, 252);
	transform: skewY(-4deg);
}
.hotnews{
	transform: skewY(4deg);
	margin:0 80px;
	background:rgba(255,255,255,0.6);
}
.hotnews ul{
	list-style-type:none;
	padding:0;
}
.fornews{
	cursor:pointer;
	height:55px;
	padding:10px 20px;
}
.fornews:hover{
	background:#F0F0F0;
}
.newscontent{
	float:left;
	text-align:left;
	color:#333333;
	font-size:18px;
}
.newsdate{
	float:right;
	text-align:right;
	color:#9D9D9D;
	font-size:13px;
}
.moreabout2{
	display:flex;
	justify-content:right;
	margin:20px 80px;
	transform: skewY(4deg);
}
.moreabout2 a{
	text-align:center;
	text-decoration:none;
	background:none;
	color:#0066CC;
	border-style:solid;
	border-width:0.5;
	border-color:#0066CC;
	border-radius:7px;
	padding:10px;
	transition: all 0.30s ease-in-out;
}
.moreabout2 a:hover{
	background:#0066CC;
	color:#FFFFFF;
   transform:scale(1.2);
}

/* 產品資訊 */
.forproduct{
	width:100%;
	margin:50px 0;
	text-align:center;
}
.card {
	cursor:pointer;
	font-size:18px;
	display:inline-block;
	width:calc(25% - 45px);
	transition: all 0.3s;
	border-radius: 5px;
	height:220px;
	line-height:30px;
	margin:20px;
}
.card:hover {
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.5);
   	transform:scale(1.1);
}
.card a{
	text-decoration:none;
	color:#333333;
	font-size:20px;
}
.container1{
	padding: 2px 16px;
	text-align:center;
}
/* product1 ~ product4 */
.forproduct2{
	width:90%;
	margin:60px;
   	display:grid;
   	grid-gap:30px;
   	grid-template-columns:repeat(3,1fr);
}
.card2 {
	cursor:pointer;
	font-size:20px;
	display:grid;
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
	transition: all 0.3s;
	border-radius: 15px;
	height:350px;
}
.card2 a{
	text-decoration:none;
	color:#333333;
}
.container5{
	padding: 2px 16px;
	text-align:center;
	position: relative;
}
.downtext{
	margin-top:70px;
}
.card2:hover{
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.9);
}
.text {
  	color: white;
  	font-size: 24px;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	line-height:45px;
  	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	text-align: center;
}

/* 客戶服務 */
#service{
	font-size:20px;
	line-height:30px;
	background:#F5FAFF;
	padding:40px 10px;
	clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}
.serviceword{
	text-align:center;
   	margin:0 20px;
}
.mail{
	text-decoration:none;
	color:#2894FF;
}
.mail:hover{
	color:#84C1FF;
}
/* 聯絡我們service1 */
.serviceword2{
	text-align:center;
	font-size:20px;
   	margin:100px 20px;
	line-height:30px;
}
.mail2{
	text-decoration:none;
	color:#2894FF;
}
.mail2:hover{
	color:#84C1FF;
}
/* 服務據點service2 */
.content1{
	width:100%;
	text-align:center;
	margin:100px 0 50px 0;
}
.content1 img{
	width:50%;
}

/* 網頁地圖 */
#webmap1{
	display:block;
	background:#F5FAFF;
}
#webmap{
	display:block;
}
/* 箭頭按鈕 */
#panelA, #flipA {
	padding: 5px;
}
#flipA{
	width:5%;
	height:60px;
	margin:0 auto;
}
#panelA {
	width:100%;
	margin:0;
	padding: 0 50px;
	display: block;
	background:#F5FAFF;
}
.arrow-icon {
	height: 2.8em;
	width: 2.8em;
	display: block;
	padding: 0.5em;
	margin: 1em auto;
	position: relative;
	cursor: pointer;
	border-radius: 4px;
}  
.left-bar1 {
	position: absolute;
	background-color: transparent;
	top: 32px;
	left: 1;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(-35deg);
	float: right;
	border-radius: 2px;
  }
.left-bar1:after {
	content: "";
	background-color:#0066CC;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 6px 10px 10px 6px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}  
.right-bar1 {
	position: absolute;
	background-color: transparent;
	top: 32px;
	left: 31px;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(35deg);
	float: right;
	border-radius: 2px;
}
.right-bar1:after {
	content: "";
	background-color:#0066CC;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 10px 6px 6px 10px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}
.open .left-bar1:after {
	transform-origin: center center;
	transform: rotate(70deg);
}
.open .right-bar1:after {
	transform-origin: center center;
	transform: rotate(-70deg);
}
.left-bar {
	position: absolute;
	background-color: transparent;
	top: 32px;
	left: 5;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(-35deg);
	float: right;
	border-radius: 2px;
  }
.left-bar:after {
	content: "";
	background-color:#0066CC;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 6px 10px 10px 6px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}  
.right-bar {
	position: absolute;
	background-color: transparent;
	top: 32px;
	left: 31px;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(35deg);
	float: right;
	border-radius: 2px;
}
.right-bar:after {
	content: "";
	background-color:#0066CC;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 10px 6px 6px 10px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}
.open .left-bar:after {
	transform-origin: center center;
	transform: rotate(70deg);
}
.open .right-bar:after {
	transform-origin: center center;
	transform: rotate(-70deg);
}
/* 內容_panel */
.container3{
	display:inline-block;
	text-align:middle;
	width:90%;
	margin:0;
	padding:0;
}
.forwebmap{
	display:inline-block;
	width:15%;
	height:270px;
	vertical-align:middle;
	text-align:left;
	padding:0 0 20px 60px;
	margin:0;
}
.webmaptop{
	color:#ff7d41;
	font-size:22px;
	padding:5px;
}
.webmapword{
	font-size:17px;
	padding-left:5px;
}
.webmapword a{
	text-decoration:none;
	color:#0066CC;
}
.webmapword a:hover{
	color:#12398e;	
	text-decoration:underline;
}
/* TOP按鈕 */
.back-top {
  	z-index: 99999;
	position: fixed;
  	bottom: 10px;
 	right: 10px;
 	cursor: pointer;
  	opacity: 1;
  	filter: Alpha(opacity=50);
  	width: 50px;
  	height: 50px;
 	background:#84C1FF;
  	background-size: 24px 24px;
  	color:#FFFFFF;
  	border-radius:50%;
  	transform: translateY(0%);
  	transition: all 0.2s linear;
  	text-align:center;
  	line-height:50px;
}
.back-top:hover {
	background-color:#D9B3B3;
   	transform:scale(1.2);
}
.back-top.hide {
  	opacity: 0;
  	transform: translateY(150%);
}
/* 公司資訊 */
.bottom{
	background:#003D79;
	width:100%;
	text-align:center;
	padding:30px 0;
}
.thetop{
	color:#FFAD86;
	font-size:16px;
}
.theword{
	font-size:14px;
}
.bottomword{
	display:inline-block;
	width:80%;
	height:120px;
	text-align:left;
	vertical-align:middle;
	color:#FCFCFC;
	padding-top: 20px;
}

/* 最下方CopyRignt */
footer{
	background-color:#003060;
	padding:5px;
}
.copyRight{
	font-size:12px;
	color:#FCFCFC;
	text-align:center;
	width:100%;
	height: 1.5rem; 
	line-height:1.5rem;	
}
@media screen and (max-width:1120px) { 
	.card1 {
		width:75%;
	}
}
@media screen and (max-width:1115px) { 
	.contentword{
		width:90%;
	}
}
@media screen and (max-width:1110px) { 
	.pic{
		width:70%;
	}
	.forproduct2{
		grid-template-columns:repeat(2,1fr);
	}
}
@media screen and (max-width:1050px){
	.forabout{
		clip-path: polygon(20% 0%, 80% 0%, 97% 20%, 97% 80%, 80% 100%, 20% 100%, 3% 80%, 3% 20%);	
	}
}
@media screen and (max-width:950px){
	.bottom{
		display:none;
	}
	#slide {
	  width:100%;
	  left:0;
	}
	.container{
		width:600px;
	}
	#webmap1{
		display:none;
	}
	#webmap{
		display:none;
	}
	.slick-prev:before,
	.slick-prev:after{
		left:-5px;
	}
	.slick-prev:before,
	.slick-prev:after{
		left:0px;
	}
	.slick-prev:before,
	.slick-prev:after,
	.slick-next:before,
	.slick-next:after {
		left:0px;
	}
}
@media screen and (max-width:910px){
	.aboutword{
		padding:20px;
	}
}
@media screen and (max-width:840px){ 
	#hammenu{
		display:block;
	}
	.formenu{
		display:none;
	}
	#slideshow{ 
		padding-top:12px;
	}
	.card {
		width:40%;
	}
	.forproduct2{
		width:80%;
		grid-template-columns:repeat(1,1fr);
	}
	.thetop1{
		font-size:19px;
	}
	.theword1{
		font-size:15px;
	}
	.content1 img{
		width:90%;
	}
}
@media screen and (max-width:650px){
	.container{
		width:480px;
	}
}
@media screen and (max-width:600px){ 
	.card {
		width:90%;
	}
	.copyRight{
		font-size:1px;
		height: 3rem; 
	}
	.hotnews{
		margin:0 40px;
	}
   	.topic1{
      font-size:60px;
   }
   	.topic2{
      font-size:30px;
   }
	.moreabout2{
		margin:20px 40px;
	}
	#slide .prev:after, #slide .next:after {
		width: 10px;
		height: 10px;
	}
}