/*引入-Mweb錯誤繼承修正檔*/

@import url(fix.css);

/*引入-客製化編輯器專區*/

@import url(editor.css);

/*被選取文字的背景顏色*/

*::selection {
    background: #99D9EA;
}


/*----------------------------------------------------------------------------------------------------*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 頁首 */
.hair{
	;
	background: #fff;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	position: relative;
	z-index: 10;
}
.hair .range{
	padding-top: 25px;
	padding-bottom: 10px;
	position: relative;
}
.hair .range:before{
	content: '';
	display: block;
	background: url('../images/img01.png');
	width: 400px;
	height: 70px;
	position: absolute;
	bottom: -70px;
	left: -100px;
	/* background: #fff; */


}

.top{
	background: #585858;
	position: relative;
}

.top .left{
	width: 30%;
}
.top .right{
	width: 70%;
}

.logo{
	position: absolute;
	top: 10px;
	z-index: 10;
}
/* 主選單 */
#navMenu{
	background: none;
	color: #ffffff;
}
#navMenu > li:hover > a{
	background: #F00;
	color: #fff;
	box-shadow: none;
	position: relative;
}

#navMenu > li:hover > a:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 100;
	transform: translateX(-50%);
	border-width: 6px 6px 0;
	border-color: #fff transparent;
	border-style: solid;
}
#navMenu > li + li:before{
	display: none;
}

#navMenu > li + li > a{
	margin-left: 0;
}
/* 主選單 */
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 頁首 */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 左半邊 */
.colSide .title{
	background-image: url('../images/img02.png');
	background-position: 50% 50%;
	position: relative;
}

.colSide .title:before{
	content: '';
	display: block;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}

.colSide .title h4{
	position: relative;
	z-index: 10;
	text-align: center;
}
.sideCate {
	margin-top: 10px;
}
.sideCate > li{
	margin-bottom: 10px;
	transition: all 0.5s;
}
.sideCate > li.active{
	margin-bottom: 0px;
}

.sideCate > li+li{
	border-top: none;
}

.sideCate > li > span{
	border: solid 1px #ccc;
}

.sideCate li ul li a{
	padding-top: 10px;
	padding-bottom: 10px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 左半邊 */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 右半邊 */
h2.menuTitle{
	background: url('../images/img03.png');
	border-bottom: none;
}

h2.menuTitle:before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 15px;
	background: #A82E2E;
	padding: 0;
	margin-left: 20px;
	margin-right: 10px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 右半邊 */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 產品列表 */
.productList .proList .img, .productGrid .proList .img{
	border-width: 5px;
}

.productGrid .proList .txt{
	margin-top: 15px;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 產品列表 */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 頁尾 */
.bottom{
	border-top: solid 8px #A82E2E;
	background: #fff;

}
.shoes{
	background: #000;
	color: #fff;
	text-align: center;
	padding: 5px 0;
}
.bottom .area01{
	width: 20%;
}
.bottom .area02{
	width: 60%;
}
.bottom .area03{
	width: 20%;
	text-align: right;
}

.info{
	margin-top: 6px;
}

.info li{
	margin-bottom: 0;
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 頁尾 */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 首頁 */
.index{
	position: relative;
}
/* 情境圖 */

.index .banner .flex-direction-nav{
	display: none;
}

.index .banner .flex-control-nav{
	z-index: 100;
}
.index .banner .flex-control-paging li a{
	width: 18px;
	height: 18px;
}

.index .slides{
	opacity: 0;
	transition: opacity 3s;
}
/* 情境圖 */
/* 語系 */

.idxNav .range{
	position: relative;
}
.idxNav .webFunction{
	position: absolute;
	right: 0;
	font-weight: 400;
	z-index: 10;
}
/* 語系 */
/* 首頁下方共用 */
.idxSection01{
	background: url('../images/img05.png');
	padding: 25px 0;
}

.idxSection02{
	background: url('../images/img06.png');
	padding: 20px 0;
	color: #fff;
}

.idxSection .title{
	padding-bottom: 6px;
	border-bottom: solid 1px #ccc;
}

.idxSection .title a{
	display: block;
	position: relative;
}


.idxSection .title h3{
	display: inline-block;
	font-size: 1.2em;
}


.idxSection .title span{
	display: inline-block;
	padding: 2px 12px;
	background: #FC971E;
	color: #fff;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
}

.idxSection .contain{
	margin-top: 15px;
}
/* 首頁下方共用 */
/* 認證 */
.idxCertification{
	text-align: center;
}

.idxCertification img + img{
	margin-left: 30px;
}
/* 認證 */
/* 最新消息 */
.idxSection .idxNews li + li{
	margin-top: 10px;
}

.idxSection .idxNews li a{
	display: block;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* 最新消息 */
/* 選單 */
.idxNav{
	position: absolute;
	top: 0;
	z-index: 10;
	width: 100%;
	opacity: 0;
	transition: opacity 2s;
}
.idxNav .vertical{
	display: block;
	width: 33.3%;
	height: 100%;
	float: left;
}

.idxNav .v02{
	box-sizing: border-box;
	padding: 0 10px;
}

.idxNav .vertical li+li{
	box-sizing: border-box;
	padding-top: 10px;
}
.idxNav .vertical li a{
	background: rgba(255, 255, 255, 0.3);
	display: block;
	height: 100%;
	position: relative;
	transition: background 0.3s;
}

.idxNav .vertical li a:hover{
	opacity: 1;
}
.idxNav .vertical li h3{
	position: absolute;
	left: 30px;
	bottom: 20px;
	font-size: 22px;
	text-shadow:
	1px 1px 1px #fff,
	1px -1px 1px #fff,
	-1px 1px 1px #fff,
	-1px -1px 1px #fff;
}

.idxNav .vertical a img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: opacity 0.3s;
	max-width: 85%;
	max-height: 85%;
}

.idxNav .vertical a:hover img{
	opacity: 1;
}

.idxNav .v01 .a01,
.idxNav .v01 .a02{
	height: 50%;
}

.idxNav .v02 .a01,
.idxNav .v02 .a02,
.idxNav .v02 .a03{
	height: 33.33%;
}

.idxNav .v03 .a01{
	height: 40%;
}
.idxNav .v03 .a02{
	height: 30%;
}
.idxNav .v03 .a03{
	height: 30%;
}

.idxNav .v02 .a02 a{
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.75);
}
.idxNav .v02 .a02 img{
	opacity: 1;
}

.idxNav .v01 .a01 a:hover{
	background: rgba(255,218,143,0.75)
}
.idxNav .v01 .a02 a:hover{
	background: rgba(111,199,255,0.75)
}
.idxNav .v02 .a01 a:hover{
	background: rgba(238,98,136,0.75)
}
.idxNav .v02 .a03 a:hover{
	background: rgba(125,210,158,0.75)
}
.idxNav .v03 .a01 a:hover{
	background: rgba(97,164,10,0.75)
}
.idxNav .v03 .a02 a:hover{
	background: rgba(151,112,196,0.75)
}
.idxNav .v03 .a03 a:hover{
	background: rgba(255,147,81,0.75)
}


.idxNav .v01 .a01 a{
	animation: v01a01 3s 1s;
}
.idxNav .v01 .a02 a{
	animation: v01a02 3s 2s;
}
.idxNav .v02 .a01 a{
	animation: v02a01 3s 2s;
}
.idxNav .v02 .a03 a{
	animation: v02a03 3s 2.5s;
}
.idxNav .v03 .a01 a{
	animation: v03a01 3s 2.5s;
}
.idxNav .v03 .a02 a{
	animation: v03a02 3s 3s;
}
.idxNav .v03 .a03 a{
	animation: v03a03 3s 3s;
}

.idxNav .v01 .a01 a img{
	animation: fade 3s 1s;
}
.idxNav .v01 .a02 a img{
	animation: fade 3s 2s;
}
.idxNav .v02 .a01 a img{
	animation: fade 3s 2s;
}
.idxNav .v02 .a03 a img{
	animation: fade 3s 2.5s;
}
.idxNav .v03 .a01 a img{
	animation: fade 3s 2.5s;
}
.idxNav .v03 .a02 a img{
	animation: fade 3s 3s;
}
.idxNav .v03 .a03 a img{
	animation: fade 3s 3s;
}

@keyframes fade{
	0%{opacity: 0}
	25%{opacity: 1}
	75%{opacity:15}
	100%{opacity: 0}
}

@keyframes v01a01{
	0%{background: rgba(255,218,143,0)}
	25%{background: rgba(255,218,143,1)}
	75%{background: rgba(255,218,143,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v01a02{
	0%{background: rgba(111,199,255,0)}
	25%{background: rgba(111,199,255,1)}
	75%{background: rgba(111,199,255,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v02a01{
	0%{background: rgba(238,98,136,0)}
	25%{background: rgba(238,98,136,1)}
	75%{background: rgba(238,98,136,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v02a03{
	0%{background: rgba(125,210,158,0)}
	25%{background: rgba(125,210,158,1)}
	75%{background: rgba(125,210,158,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v03a01{
	0%{background: rgba(97,164,10,0)}
	25%{background: rgba(97,164,10,1)}
	75%{background: rgba(97,164,10,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v03a02{
	0%{background: rgba(151,112,196,0)}
	25%{background: rgba(151,112,196,1)}
	75%{background: rgba(151,112,196,1)}
	100%{background: rgba(255,255,255,0.3)}
}
@keyframes v03a03{
	0%{background: rgba(255,147,81,0)}
	25%{background: rgba(255,147,81,1)}
	75%{background: rgba(255,147,81,1)}
	100%{background: rgba(255,255,255,0.3)}
}


/* 選單 */
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 首頁 */