/* == 通用 功能設定===========================================================*/







/*區塊內圖文區內 - 圖片區 */

.imgtxt {padding:10px;}             /*每個圖之間的肉*/

.imgtxt a.img{padding-bottom:50%;}  /* 50%=寬2:高1  66.67%=6:4  或直接圖片 底/高*100 */

.imgtxt a.img{background:#eee;}      /* 暫時以底色標示位置 */

.imgtxt a.img{display:inline-block;width:100%;height:100%;position:relative;overflow:hidden;}

.imgtxt a.img img{position:absolute;width: 100%;height:auto;}

.imgtxt a:hover{opacity:0.7}



/*圓形遮罩*/

.imgtxt a.mask-circle {background:none;}

.imgtxt a.mask-circle > div {display: inline-block;width:100%;height: 100%;position: absolute;overflow: hidden;border-radius: 100%;}

.imgtxt a.mask-circle:before {content:' ';position:absolute;border:1px solid #aaa;width:85%;height:85%;left:6%;top:7%;z-index:0;border-radius:100%}

.imgtxt a.mask-circle:after {content:' ';position:absolute;border:1px solid #ccc;width:85%;height:85%;right:6%;bottom:7%;z-index:0;border-radius:100%}







/*區塊內圖文區內 - 文字區*/

.imgtxt a.txt p{display:table;width:100%;vertical-align:middle;}

.imgtxt a.txt p span{display:table-cell;vertical-align:middle;padding:0 5px;}

.imgtxt a.txt p span:first-child{text-align:left;padding-left:0;width:70%;}

.imgtxt a.txt p span:last-child{text-align:right;padding-right:0;width:30%;}

/*分2行*/

.imgtxt.tworow a.txt p {display:block;}

.imgtxt.tworow a.txt p span {display:inline-block;text-align:center;width:100%;padding:0;}







/* 一般輪播slick */

.slidblock {padding:0 !important;}

.slidblock *{outline:0 !important;}

.slick-next,.slick-prev {cursor: pointer;}





/* banner 輪播slick */



[class*="banner_"] {position:relative;background:#eee;}

[class*="banner_"] .slick-next,[class*="banner_"] .slick-prev {font-size:2em;color:#000;}

[class*="banner_"] .slick-next:before ,[class*="banner_"] .slick-prev:before {content:' ';}

[class*="banner_"] .slidcontrol .slick-prev{position:absolute;z-index:100;left:5%;text-align:center;color:#fff;top:50%;margin-top:-1em;}

[class*="banner_"] .slidcontrol .slick-next{position:absolute;z-index:100;right:5%;text-align:center;color:#fff;top:50%;margin-top:-1em;}

[class*="banner_"] .slidblock  div {text-align:center;}	

[class*="banner_"] .slidblock  div img{width:100%}	

[class*="banner_"] .slidblock  div img.banner_sm{display:none}	

[class*="banner_"] .slick-dots {position:absolute; bottom:0;width:100%;text-align: center;padding:0;}

[class*="banner_"] .slick-dots li{list-style: none;display: inline-block;}

[class*="banner_"] .slick-dots button{font-size: 0;border:0;border-radius: 100%;padding:5px;margin:5px; background:#000}

[class*="banner_"] .slick-dots button:hover{background:#fff}

[class*="banner_"] .slick-dots .slick-active button{background:#fff}

[class*="banner_"] .slick-dots button:before{font-size:30px;}

@media (max-width:768px) {

	[class*="banner_"] .slidblock img.banner_lg {display:none}

	[class*="banner_"] .slidblock img.banner_sm {display:block !important;}

}





/* footer */

footer .copyright  {font-size: 10px;}











/* == 通用 class =========================================================================*/





/*箭頭*/

.arrow_l,.arrow_r {display:inline-block;border-style: solid;width: 1em;height: 1em;line-height:1em;}

.arrow_r {border-width: 0.5em 0 0.5em 0.87em;border-color: transparent transparent transparent #aaa ;}

.arrow_l {border-width: 0.5em 0.87em 0.5em 0;border-color: transparent #aaa transparent transparent ;}



/*r角*/

.r100 {border-radius:100%;overflow:hidden}



/*字元垂直置中*/

.text-vcenter ,.text-vcenter *{ vertical-align: middle;	}



/*單行文字(若該層無寬，父層寬需為block或設定寬)*/

.oneline {-o-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}







* {outline: 0}

input:focus::-webkit-input-placeholder { color:transparent; }

input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */

input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */

input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */











/* == section01 ===========================================================*/



.section01{}

.section01 > div > div:nth-child(2) > p{	

	max-width:70%;

	width:auto;

	display:inline-block;

	padding-right:40px;

	position: relative;

}



.section01  .more {position:absolute;right:0;}







/* == section02 ===========================================================*/

.section02 {}

.section02 .imgtxt a.img{padding-bottom:43.85%;}













/* == section03 ===========================================================*/

.section03{}

.section03 .title-group a i {font-size:2em;vertical-align: middle;}

.section03 .title-group a:hover i {color:red;}

.section03 .title-group span {font-size:1.5em !important;vertical-align: middle;padding:0 20px;}

.section03 .imgtxt a.img{padding-bottom:100%;}









/* == section04 ===========================================================*/

.section04{padding-top:30px;padding-bottom: 30px}

.section04 .title-group a i {font-size:2em;vertical-align: middle;}

.section04 .title-group a:hover i {color:red;}

.section04 .title-group span {font-size:2.5em !important;vertical-align: middle;padding:0 20px;}

.section04 .imgtxt a.img{padding-bottom:60%;}





/* == section05 ===========================================================*/

.section05{padding-top:30px;padding-bottom: 30px}

.section05 .listitem li {border-bottom:1px solid #eee;padding:15px 0;}

.section05 .listitem span {padding:10px;text-align:center}

.section05 .listitem a {padding-left:20px;}

@media (max-width:1200px) {.section05 h3 {text-align:center}}



@media (max-width:1200px) {.section05 .rwd-padding{padding:0 20%;}}

@media (max-width:768px) {.section05 .rwd-padding{padding:0 30%;}}

@media (max-width:660px) {.section05 .rwd-padding{padding:0 25%;}}

@media (max-width:480px) {.section05 .rwd-padding{padding:0;}}





/* == section06 ===========================================================*/

.section06{}

.section06 img {max-width: 100%;}

.section06 .imgtxt a.img{padding-bottom:100%;}

.section06 .imgtxt a.mask-circle > div {top:10%;left:10%;width: 80%;height:80%;}

.section06 .img-circle {padding:10%;}





/*以下設定，將影響圓大小*/

@media (min-width:1200px) {.section06 .rwd-padding{padding:0 10%;}} 

@media (max-width:1200px) {.section06 .rwd-padding{padding:0 10%;}}

@media (max-width:990px) {.section06 .rwd-padding{padding:0;}}

@media (max-width:768px) {.section06 .rwd-padding{padding:0 30%;}}

@media (max-width:660px) {.section06 .rwd-padding{padding:0 25%;}}

@media (max-width:480px) {.section06 .rwd-padding{padding:0;}}







/* == section07 ===========================================================*/

.section07 {position:relative;}

.section07 .imgtxt {padding:3px;}

.section07 .slidcontrol {position:absolute;	z-index:100;width: 50%;}

.section07 .slidcontrol a{width:30px;height:30px;text-align:center;line-height:2.1em;color:#000;background:#fff; vertical-align:middle}

.section07 .slidcontrol a.slick-prev {margin-left: -1em;}

.section07 .slidcontrol a.slick-next {margin-right: -1em;}







/* == navmenu01 ===========================================================*/

.navmenu01 {border:0;}

.navmenu01 ul {height:60px;}

.navmenu01 ul li {width: 100px}



.navmenu01 ul {display: table; margin:0 auto; padding:0;float: none;}

.navmenu01 ul li {display: table-cell;vertical-align: middle;text-align:center;float:none;}

.navmenu01 ul li span:nth-child(2){display: none}



.navmenu01 ul li:hover {border-bottom:2px solid #000;}

.navmenu01 ul li:hover span:nth-child(1){display:none}

.navmenu01 ul li:hover span:nth-child(2){display:block;}



.navmenu01 a.btn.dropdown{display: none}



@media (max-width: 768px) {	

	.navmenu01 div{padding: 0}

	.navmenu01 ul {width: 100%}

	.navmenu01 ul li {display:block;width: 100%;padding:10px 0;}

	.navmenu01 ul li:hover {background: #eee;border:0;}

	.navmenu01 a.btn.dropdown{display: block}

}







/* == toplink01 =============================================================*/

.toplink01 {position:absolute;top:0;z-index:100}

.toplink01 {display: inline-block;width: 100%;padding:10px 50px;}

.toplink01 .logo{float:left}

.toplink01 .links{float:right}

.toplink01 .links{padding-left:20px;}

.toplink01 .links li{display: inline-block;}

.toplink01 .links li a{vertical-align: middle;}

.toplink01 .links li:after{content:'|';display: inline-block;padding:0 10px;vertical-align: middle;}

.toplink01 .links li:last-child:after{content:'';}

@media (max-width: 768px) {

	.toplink01 {position: static;}

	.toplink01 .logo,

	.toplink01 .links{float:none;text-align: center;padding:10px 0;}

}











/* == footer01 ===========================================================*/

.footer_01 {background: #eee}

.footer_01 {padding:20px 40px;}

.footer_01 input{border:1px solid #aaa;border-radius: 0;padding-left: 10px;margin-right: 10px}

.footer_01 button{border-radius: 0}

.footer_01 .copyright{margin:10px 0;}





/* == footer02 ===========================================================*/

.footer_02 section {margin:0;background: #ddd}

.footer_02 section span{display:inline-block;padding:10px 0}

.footer_02 .copyright {color:#eee;background:#333;margin:0;padding:5px 0;}





/* == footer03 ===========================================================*/

.footer_03 {background: #eee}

.footer_03 section {padding:50px;}

.footer_03 section .logo img{max-width: 100%}

.footer_03 section p{margin:0;}

.footer_03 section [class*="Bbox_in"] .logo {padding-left:0 !important;padding-right:0 !important;}

.footer_03 section [class*="Bbox_in"] > div > div {padding-left:40px !important;padding-right:40px !important;}

.footer_03 .copyright {color:#eee;background:#333;margin:0;padding:5px 0;}

@media (max-width: 920px){	

	.footer_03 section [class*="Bbox_in"] > div > div {width: 50%;text-align: center;}

	.footer_03 section [class*="Bbox_in"] .logo {width: 100%;text-align: center;padding:10px 0;margin-bottom:10px;border-bottom:1px solid #eee;}

}




.indexPro ul{
	width: 100%;
	padding: 60px 75px 50px;
	list-style: none;
	display:inline-flex;
    flex-wrap:wrap;
    vertical-align: top;
}

.indexPro li{
	width: 16.666%;
	align-content:flex-start;
	padding: 0 15px 60px;
	box-sizing: border-box;
}

.indexPro li:hover p{
	color: #008cd6;
}

.indexPro li .itemImg{
	width: 100%;
  	height: 0;
  	padding-bottom: 100%;
  	position: relative;
  	overflow: hidden;
}

.indexPro li .itemImg img{
	position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.Bbox_full {
	position: relative;
}

.Bbox_full .topMenu{
	max-width: 670px;
	width: 95%;
	position: absolute;
	z-index: 101;
	top: 40px;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
.Bbox_full .navmenu01{
	max-width: 580px;
	margin: 0 auto;
    background: rgba(0, 0, 0, .3);
    box-shadow: inherit;
}

.Bbox_full .navmenu01 a{
	color: #fff;
	font-size: 1.2em;
}

.indexPro li p{
	text-align: center;
	line-height: 1.8;
	padding-top: 15px;
}


/*-------news--------*/

.list-unstyled.onelinenews li{
	width: 100%;
	display: inline-flex;
	padding-bottom: 3%;
}

.onelinenews .pic{
	margin-right: 10px;
}

.onelinenews .pic img{
	max-width: 100px;
	height: auto;
}

.onelinenews .right a{
	display: block;
}




.proBrand ul{
	padding: 0;
	margin: 0;
	list-style: none;
} 

.proBrand ul li{
	display: inline-block;
}

.proBrand ul li a{
	color: #fff;
	background: #008cd6;
	padding: 5px;
	border-radius: 3px;
}


/*-----Product Select-----*/

.proSelect .select {
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    z-index: 9;
    border: 1px solid #e3e3e3;
}

.proSelect .list{
	display: inline-block;
	margin: 0 -4px;
	padding-right: 30px;
	box-sizing: border-box;
	vertical-align: top;
}

.proSelect .list:first-child{
	width: 30%;
}
.proSelect .list:nth-child(2){
	width: 40%;
}
.proSelect .list:nth-child(3){
	width: 15%;
}
.proSelect .list:nth-child(4){
	width: 15%;
	padding-right: 0;
}

/*transform(缩放、旋转、平移)，显示的是最终效果，没有动画过程*/
/*transition是对元素本身的属性(比如：width、height)设置动画效果*/          
.proSelect .select:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #767676;
    position: absolute;
    top: 11px;
    right: 8px;
    transform: rotate(0deg);
    transition: transform .3 ease-out,top .3s ease-out;
}           
.proSelect .select p {
	width: calc(100% - 30px);
	max-height: 30px;
	overflow: hidden;
    padding: 0 15px;
    line-height: 30px;
    cursor: pointer;
    color: #939393;
    border-right: 1px solid #e3e3e3;
    margin: 0;
}
/*设置下拉框收起时的高度过渡动画*/         
.proSelect .select ul {
    list-style-type: none;
    padding: 0;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    left: 0;
    max-height: 0;
    transition: max-height .3s ease-out;
}           
.proSelect .select ul li {
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
    color: #939393;
}           
.proSelect .select ul li:hover {
    background-color: #e0e0e0;
}           
.proSelect .select ul li.selected {
    background-color: #39f;
    color: #fff;
}
/*下拉框展开时调用动画slide-down*/
/*transform-origin设置缩放下拉框的基点位置*/

.proSelect .select.open{
	z-index: 10;
}

.proSelect .select.open ul {
    max-height: 250px;
    -webkit-animation: slide-down .5s ease-in;
    transition: max-height .3s ease-in;
    transform-origin: 50% 0;
    padding: 0;
}
/*下拉箭頭旋轉*/          
.proSelect .select.open:after {
    transform: rotate(-180deg);
    transition: all .3s ease-in-out;
}




@media (min-width: 769px) {
	
	.proSelect{
		margin-bottom: 50px;
	}

	[class*="Bbox_sin_1c_2cL3"] > div > div.pro-align{
		height: 100%;
		position: absolute;
		right: 0;
	}	

	.proBrand{
		position: absolute;
		bottom: 20px;
		display: inline-flex;
	}
}

@media (max-width: 992px) {
	
	.Bbox_in_2c_L3 > div > div:nth-of-type(2){
		width: 100%;
	}

}

@media (max-width: 1024px) {

	.proSelect .list{
		width: 25% !important;
	}

	/* .prodlist nav{
		display: none;
	} */

}



@media (max-width: 1200px) {

	.indexPro li{
		width: 25%;
	}

	.headSearch{
		margin-bottom: 0;
	}

}


@media (max-width: 768px) {

	.proBrand ul li{
		margin-bottom: 10px;
	}

	.indexPro ul{
		margin: 10px;
		padding: 0;
	}

	.indexPro li{
		width: 50%;
		padding: 0 10px 20px;

	}

	.headSearch{
		margin-bottom: 20px;
	}

	.proSelect .list, .proSelect .list:nth-child(4){
		width: 50% !important;
		padding: 0 15px 20px;
		margin: 0 -4px;
		box-sizing: border-box;
	}

}


@media (max-width: 480px) {

	.indexPro li{
		width: 100%;
	}

	.proSelect .select p{
		padding: 0 5px; 
	}

	.proSelect .list, .proSelect .list:nth-child(4){
		width: 100% !important;
	}

}