@charset "utf-8";
/* CSS Document */

.logoDiv{
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
}
.logoDiv .logo,
.stickMenuLogo{
	float: left;
	display: table;
	background: url(../images/header/logo.svg) no-repeat left center;
	width: 230px;
	height: 40px;
}
.logoDiv .slogn{
	float: right;
}
.allMenu{
	position: relative;
	z-index: 2;
	background: #FFF;
	border-bottom: 1px solid #D8D8D8;
	border-top: 1px solid #D8D8D8;
	box-sizing: border-box;
}
.allMenuDiv{
	position: absolute;
	z-index: -1;
}
.allMenu,
.allMenuDiv{
	height: 66px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
.stickMenuLogo{
	display: none;
	width: 180px;
	margin-top: 10px;
}
.stickMenuLogo a{
	display: block;
	height: 40px;
}
div.nav{
	width: 100%;
	/*height: 61px;*/
	height: 63px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
div.nav a{
	text-decoration:none;
	color:#000;
 	font-size:16px;
 	line-height: 1.8;
 	display: block;
 	transition: all .3s;
}
div.nav a,
ul.navigation li ul.openDivMenu .leftDiv a,
ul.navigation li ul.openDivMenu .leftDiv div.item .secondLink{
 	font-weight: bolder;
}
ul.navigation li ul.openDivMenu .leftDiv a,
ul.navigation li ul.openDivMenu .leftDiv div.item .secondLink{
 	color: #4A4A4A;
 	transition: all .3s;
}

/******************************下拉選單css******************************/
	/* 第一層選單：保戶服務.商品資訊...等等 */	
		ul.navigation{
			display:table;
			float: left;
		}
		ul.navigation li{
			float: left;
			padding: 0 1.5vw;
		}	
		ul.navigation li a.mainMenuItem{
			display: block;
			/*margin: 0 3vw;*/
			line-height: 60px;
			box-sizing: border-box;
			border-bottom: 3px solid #FFF;
			transition: all .3s;
		}
		ul.navigation li:hover a.mainMenuItem{
			border-bottom: 3px solid #fe000c;
			transition: all .3s;
		}

	/* 第二層選單：商品資訊🡢熱銷商品推薦.保障型保險商品...等等 */
		ul.navigation li ul.openDivMenu{
			position: absolute;
			z-index:1;
			width: 100%;
			left: 0;
			top: 63px;
			/*top: 64px;*/
			box-sizing: border-box;
			background: url(../images/header/openDivMenuBorder.png) repeat-x top left #F7F6F2;
		}

		ul.navigation li ul.openDivMenu li.hoverDiv{
			display:none;
			width: 100%;
			max-width: 1240px;
			float: none;
		    margin: 0 auto;
		    overflow: hidden;
		    padding: 20px;
		    box-sizing: border-box;
		}
		ul.navigation li:hover > ul.openDivMenu li.hoverDiv{
			display: block;
		} 
		ul.navigation li ul.openDivMenu .rightDiv{
			float: right;
			width: 610px;
			display: table;
			text-align: right;
			font-size: 0;
		}

		ul.navigation li ul.openDivMenu .rightDiv a{
			display: inline-block;
			width: 200px;
			height: 150px;
		    margin-left: 3px;
		    overflow: hidden;
		}
		ul.navigation li ul.openDivMenu .rightDiv div{
			overflow: hidden;
		}
		ul.navigation li ul.openDivMenu .rightDiv a img,
		ul.navigation li ul.openDivMenu .rightDiv div img{
			width: 200px;
			height: 150px;
			display: block;
			transform:scale(1,1);
			transition: all 1s ease-out;
		}
		ul.navigation li ul.openDivMenu .rightDiv a img:hover,
		ul.navigation li ul.openDivMenu .rightDiv div img:hover{
			transform:scale(1.05,1.05);
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .secondLink.active{
			color: #fe000c;
		}

			/*針對保戶服務＋關於遠雄_額外設定*/
			ul.navigation li ul.openDivMenu .Policyholder .rightDiv,
			ul.navigation li ul.openDivMenu .Policyholder .rightDiv div img,
			ul.navigation li ul.openDivMenu .about .rightDiv,
			ul.navigation li ul.openDivMenu .about .rightDiv div img{
				width: 300px;
				height: 170px;
				display: block;
			}
			ul.navigation li ul.openDivMenu .Policyholder .rightDiv div,
			ul.navigation li ul.openDivMenu .about .rightDiv div{
				display: inline-block;
				width: 300px;
				height: 170px;
			}
			/*ul.navigation li ul.openDivMenu .about .rightDiv,
			ul.navigation li ul.openDivMenu .about .rightDiv a img{
				width: 200px;
				height: 150px;
				display: block;
			}*/


			/*均分3列及6列共用css*/
				ul.navigation li ul.openDivMenu .leftDiv{
					font-size: 0;
				}
				ul.navigation li ul.openDivMenu .leftDiv div.item{
					display: inline-block;
					vertical-align: top;
					box-sizing: border-box;
					font-size: 16px;
					line-height: 1.8;
					cursor: pointer;
				}
			/*均分3列*/
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv{
					width:  auto;
					margin: 0 610px 0 0;
				}
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item{
					width: 33.33%;
				}
					/*針對保戶服務＋關於遠雄_額外設定*/
					/*ul.navigation li ul.openDivMenu li.split3Div.about .leftDiv div.item{
						width: 25%;
					}*/
					ul.navigation li ul.openDivMenu .Policyholder.split3Div .leftDiv,
					ul.navigation li ul.openDivMenu .about.split3Div .leftDiv{
						width:  auto;
						margin: 0 300px 0 0;
					}
					/*ul.navigation li ul.openDivMenu .about.split3Div .leftDiv{
						width:  auto;
						margin: 0 200px 0 0;
					}*/
			/*均分6列*/
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv{
					width: 100%;
				}
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item{
					width: 16.66%;
				}
		ul.navigation li ul.openDivMenu .item{
			background: url(../images/all/toggleButtonBg.png) no-repeat left top;
			padding: 0 6px;
			margin: 7.5px 0;
			background-size: 6px 6px;
		}
		ul.navigation li ul.openDivMenu .item{
			background: url(../images/all/toggleButtonBg.png) no-repeat left top;
			padding: 0 6px;
			margin: 7.5px 0;
			background-size: 6px 6px;
		}

	/* 第三層選單 */
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh{
			width:100%;
			display:none;
			background: #e6e5e1;
			color: #4A4A4A;
			position: absolute;
			width: 100%;
			left: 0;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh div{
			width: 100%;
			max-width: 1240px;
			margin: 0 auto;
			padding: 20px;
			font-size: 0;
			box-sizing: border-box;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh div a{
			display: inline-block;
			width: 16.66%;
			margin: 7.5px 0;
			font-weight: normal;
			padding-right: 8px;
			box-sizing: border-box;
			vertical-align: top;
		}
		ul.navigation li ul.openDivMenu .about .leftDiv div.item .hh div a,
		ul.navigation li ul.openDivMenu .Policyholder .leftDiv div.item .hh div a{
			width: 12.5%;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.productInfoToggle-content{
			top: 210px;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.PolicyholderToggle-content{
			top: 250px;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.aboutToggle-content{
			top: 210px;
		}

	ul.navigation li ul.openDivMenu .leftDiv div.item:hover,
	ul.navigation li ul.openDivMenu .leftDiv div.item .hh div a:hover,
	ul.navigation li ul.openDivMenu .leftDiv div.item .secondLink:hover,
	ul.navigation li ul.openDivMenu a:hover{
		color: #fe000c;
	}
	.remove-border{
		background: #fe000c;
	}

/******************************下拉選單_end******************************/

/*	menu線的動態效果  */
	/*.bz-buttonAnimat{
		position:relative;
	}
	.bz-buttonAnimat:nth-of-type(1):after{
		border-bottom: 3px solid #fe000c;
		-webkit-transition:-webkit-transform 0.3s;
		transition:-webkit-transform 0.3s;
		transition:transform 0.3s;
		transition:transform 0.3s,
		-webkit-transform 0.3s;
	}
	.bz-buttonAnimat:before,
	.bz-buttonAnimat:after{
		position:absolute;
		content:"";
		display:block;
		-webkit-transition:-webkit-transform 0.3s;
		transition:-webkit-transform 0.3s;
		transition:transform 0.3s;
		transition:transform 0.3s,-webkit-transform 0.3s;
	}
	.bz-buttonAnimat.horizontal:before,
	.bz-buttonAnimat.horizontal:after{
		left:0;
		width:100%;
		height:3px;
		-webkit-transform:scaleX(0);
		transform:scaleX(0);
	}
	.bz-buttonAnimat.horizontal:before{
		top:0;
	}
	.bz-buttonAnimat.horizontal:after{
		bottom:-3px;
	}
	.bz-buttonAnimat.horizontal:hover:before,
	.bz-buttonAnimat.horizontal:hover:after{
		-webkit-transform:scaleX(1);
		transform:scaleX(1);
	}*/

/*搜尋bar*/
	.searchButton,
	.searchCloseButton,
	.EraserButton,
	.searchTextButton{
		float: right;
		background: #3F3F3F;
		color: #FFF;
		font-size: 13px;
		padding: 8px 5px;
		box-sizing: border-box;
		width: 62px;
		text-align: center;
		cursor: pointer;
		transition: all .3s;
	}
	.searchCloseButton,
	.EraserButton,
	.searchTextButton{
		background: none;
		float: none;
		width: 63px;
	    height: 63px;
	    float: right;
	    transition: all .3s;
	}
	.ButtonItem{
		float: right;
	}
	.searchButton img,
	.searchCloseButton img{
		width: 50%;
	}
	.EraserButton,
	.searchTextButton{
		height: auto;
		margin-top: 13px;
		border: 1px solid #FFF;
		margin-right: 3px;
		transition: all .3s;
	}
	.searchButton:hover{
		background: #000000;
		transition: all .3s;
	}
	.EraserButton:hover,
	.searchTextButton:hover{
		background: #fe000c;
		border: 1px solid #fe000c;
		transition: all .3s;
	}
	.EraserButton{
		margin-right: 25px;
	}
	.EraserButton img,
	.searchTextButton img{
		width: 35%;
	}
	.EraserButton img,
	.EraserButton p,
	.searchTextButton img,
	.searchTextButton p{
		display: inline-block;
		vertical-align: middle;
	}
	.searchBar{
		position: absolute;
		z-index: 2;
		background: #000;
		width: 100%;
		height: 66px;
		left: 0;
		display: none;
	}
	.searchBar .centerContent{
		width: 100%;
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.searchBar input{
		width: 65%;
		background: none;
		border: 0;
		font-size: 26px;
		color: #898989;
	    height: 63px;
	    margin: 0 63px 0 0;
	    font-family:Arial, "微軟正黑體";
	}


@media screen and (max-width: 1150px){
	.logoDiv{
		padding: 10px;
		display: table;
		float: left;
	}
	.logoDiv .slogn{
		display: none;
	}
	div.nav{
		border: 0;
		padding: 8px 0 0 0;
		background: #000;
	}
	div.nav a{
		color: #FFF;
	}
	.stickMenuLogo{
		display: none !important;
	}
	.navigation{
		margin-left: 0 !important;
	}


	/*第一層選單：保戶服務.商品資訊...等等*/		
		.searchButton,
		ul.navigation{
			padding: 0;
			float: none;
			width: 100%;
		}
		.searchCloseButton{
			display: none;
		}
		ul.navigation li{
			float: none;
			border-bottom: 1px solid #FFF;
			padding: 0;
		}
		ul.navigation li a.mainMenuItem,
		ul.navigation li a.mainMenuItem:first-child{
			padding: 10px;
			line-height: 1.8;
			font-family:Arial, "微軟正黑體";
			background: #fe000c;
			margin: 0;
			border: 0;
		}

	/* 第二層選單：商品資訊🡢熱銷商品推薦.保障型保險商品...等等 */
		ul.navigation li ul.openDivMenu{
			position: relative;
			top: 1px;
		}
		ul.navigation li ul.openDivMenu li.hoverDiv{
			padding: 0;
		}
		ul.navigation li ul.openDivMenu .rightDiv{
			display: none;
		}

			/*針對保戶服務＋關於遠雄_額外設定*/
				ul.navigation li ul.openDivMenu .Policyholder .rightDiv,
				ul.navigation li ul.openDivMenu .Policyholder .rightDiv a,
				ul.navigation li ul.openDivMenu .Policyholder .rightDiv a img,
				ul.navigation li ul.openDivMenu .about .rightDiv,
				ul.navigation li ul.openDivMenu .about .rightDiv a,
				ul.navigation li ul.openDivMenu .about .rightDiv a img{
					display: none;
				}
			/*均分3列及6列共用css*/
				ul.navigation li ul.openDivMenu .leftDiv a,
				ul.navigation li ul.openDivMenu .leftDiv div.item,
				ul.navigation li ul.openDivMenu .leftDiv div.item .secondLink{
					color: #FFF;
					font-family:Arial, "微軟正黑體";
					font-weight: normal;
				}
				ul.navigation li ul.openDivMenu .leftDiv div.item{
					display: block;
					background: #333333;
					margin: 0;
					cursor: default;
				}
			/*均分3列及均分6列*/
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv,
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv,
				ul.navigation li ul.openDivMenu li.split3Div.Policyholder .leftDiv,
				ul.navigation li ul.openDivMenu li.split3Div.about .leftDiv{
					float: none;
					width: 100%;
					margin: 0;
				}
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item,
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item,
				ul.navigation li ul.openDivMenu li.split3Div.about .leftDiv div.item{
					width: 100%;
					background: #333333;
					padding: 0;
				}
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item div,
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item div,
				ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.secondLink a,
				ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.secondLink a{
					width: 100%;
					background: url(../images/header/rightArrow.svg) 11px 50% no-repeat;
					background-size: 4px;
					padding: 10px 0 10px 27px;
					box-sizing: border-box;
				}

		ul.navigation li ul.openDivMenu .item{
			background: url(../images/all/toggleButtonBg.png) no-repeat left top;
		}

	/*第三層*/
		ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item div.hh,
		ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item div.hh{
			background: #666666;
			padding: 0;
		}
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.PolicyholderToggle-content,
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.productInfoToggle-content,
		ul.navigation li ul.openDivMenu .leftDiv div.item .hh.aboutToggle-content{
			position: relative;
			z-index: 9999;
			top: 0;
		}
		ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item div.hh div,
		ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item div.hh div{
			background: none;
			padding: 0;
		}
		ul.navigation li ul.openDivMenu li.split3Div .leftDiv div.item div.hh div a,
		ul.navigation li ul.openDivMenu li.split6Div .leftDiv div.item div.hh div a{
			display: block;
			width: 100%;
			color: #FFF;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #333333;
			padding: 10px 27px;
		}

	/*搜尋bar*/
		.searchButton/*,
		.searchCloseButton*/{
			display: none;
		}
		.searchBar{
			display: block;
			position: relative;
		}
		.searchBar input{
			width: 60%;
			margin-right: 0;
		}
		.EraserButton {
		    margin-right: 55px;
		}
}
@media screen and (max-width: 570px){
	/*搜尋bar*/
		.searchBar{
			height: auto;
			overflow: hidden;
		}
		.EraserButton {
			margin-right: 0;
		}
}
@media screen and (max-width: 370px){
	/*搜尋bar*/
		.searchBar input{
			width: 100%;
			border-bottom: 1px solid #FFF;
			height: 40px;
		}
		.EraserButton {
			margin-right: 0;
		}
		.ButtonItem{
			float: none;
			display: table;
			width: 100%;
			text-align: center;
			margin-bottom: 15px;
		}
		.EraserButton,
		.searchTextButton{
			float: none;
			display: inline-block;
			margin: 10px 2px;
		}
}