/*材質*/
#material a span{
	display:none;
}

#material #action span{
	display:inline;
}

#material span, #material a{
	cursor: pointer;
}

/*品牌那邊的設定(Left)*/
.plus {
	position: relative;
	width: 13px;
	height: 13px;
	display: inline-block;
	cursor: pointer;
	top: 1.5px;
}

.plus::before {
	content: '';
	width: inherit;
	border-top: 1.5px solid #000;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
}

.plus::after {
	content: '';
	width: inherit;
	border-top: 1.5px solid #000;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
}

.less {
	position: relative;
	width: 13px;
	height: 13px;
	display: inline-block;
	cursor: pointer;
	top: 1.5px;
}

.less::before {
	content: '';
	width: inherit;
	border-top: 1.5px solid #000;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0);
}

.small{
	width: 10px;
	height: 10px;
	left: 1px;
}

/*輪播*/
.carousel-inner img {
	width: 100%;
	height: 20vw;
	display:block;
	margin:auto;
}

@media screen and (max-width: 767px){
	/*關閉輪播*/
	#demo{
		display: none;
	}
	.main{
		background-color: rgba(134, 142, 150, 0.4);
	}
	.zoom{
		display: none;
	}
}

/*輪播下方顯示按鈕縮放*/
.lilen li{
	width: 2vw;
}
/*年份去底線??*/
#accordion .year{
	text-decoration: none;
	color: #000;
}
/*指定哪一個(Left)*/
#accordion #designation{
	color: #E3170D;
}

/*產品的圖片*/
#rowcard .pic{
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

#rowcard .pic img{
	transform: scale(1, 1);
	transition: transform 1s ease-out;
}

#rowcard .pic:hover img{
	transform: scale(1.2, 1.2);
	-webkit-filter:brightness(0.7);
}

#rowcard .im{
	position: absolute;
	background-image: url("large.webp");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	top: 0;
	transition: opacity 0.7s ease-in;
	opacity: 0;
}

#rowcard .pic:hover .im{
	opacity: 0.7;
}

/*詢價單的產品表設定*/
#Requesttext table td{
	vertical-align:middle;
}
/*詢價單的產品圖大小*/
#Requesttext table img{
	width: 100%;
}
/*產品圖縮放按鈕*/
.zoom{
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0.8;
	transition: opacity 0.6s ease-out;
}

/*圖片拖曳與縮放(設定)*/
#div{
	overflow:hidden;
	position:relative;
}
#img{
	position:absolute;
	height:100%;
	width:auto;
	cursor:pointer;
}

/*隨瀏覽器大小調整頁面文字大小*/
@media screen and (max-width: 1200px){
    #accordion .text, #material a, #material button, #material span, #material p{
		font-size:14px;
	}
	#project span{
		font-size:8.5px;
	}
}
@media screen and (max-width: 1000px){
    #accordion .text, #material a, #material button, #material span, #material p{
		font-size:12px;
	}
	#rowcard h5, #rowcard h4, #rowcard p{
		font-size:14px;
	}
	#project span{
		font-size:6.5px;
	}
}
/*手機大小*/
@media screen and (max-width: 767px){
    #accordion .text, #material a, #material button, #material span, #rowcard p, #material p{
		font-size:16px;
	}
	#rowcard h5{
		font-size:24px;
	}
	#rowcard h4{
		font-size:20px;
	}
	#project span{
		font-size:10.5px;
	}
	/*置中*/
	.row > .row {
		margin: 0 auto;
	}
	
	/*產品放大圖對應手機時縮小寬度*/
	#ImgModal .modal-content{
		width: 100vw;
		background: rgba(0,0,0,0);
		border: none;
	}
	#ImgModal .modal-dialog{
		margin: 0;
	}
	#ImgModal #pictext{
		padding: 0;
	}
	#ImgModal #div{
		height: 100vh;
		width: 100vw;
	}
	
	#material{
		margin-top: 10px;
	}
	/*詢價單的產品表*/
	#Requesttext table{
		display:block;
		overflow:auto;
	}
	/*詢價單的產品圖大小*/
	#Requesttext table img{
		width: 200px;
	}
	#img{
		width: 100%;
		object-fit: contain;
	}
	/*下拉式菜單高度修短*/
	.dropdown-menu{
		height:240px!important;
	}
	
	.outerframe-title{
		font-size: 20px;
	}
}
/*產品圖的關閉按鈕*/
#ImgModal .close{
    color: white;
    font-size: 80px;
    position: absolute;
	z-index: 1;
	right: 20px;
}
/*大於手機大小*/
@media screen and (min-width: 768px){
    #rowcard img{
		object-fit: cover;
		height: 13vw;
	}
	/*產品圖的關閉按鈕不顯示*/
	#ImgModal .close{
		display: none;
	}
	.padding-left-remove{
		padding-left: 0;
	}
	/*強制固定下拉式選單朝向下方*/
	.dropdown-menu{
		transform: translate3d(8px, 37px, 0px)!important;
	}
	#brand{
		display: none;
	}
	#accordion{
		display: block;
	}
}

/*產品頁打開時延遲顯示出來*/
#ImgModal{
	-webkit-animation: opacityon 0.3s;
	   -moz-animation: opacityon 0.3s;
	    -ms-animation: opacityon 0.3s;
		 -o-animation: opacityon 0.3s;
			animation: opacityon 0.3s;
}
@keyframes opacityon {
	0%   { opacity: 0; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes opacityon {
	0%   { opacity: 0; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes opacityon {
	0%   { opacity: 0; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}
@-ms-keyframes opacityon {
	0%   { opacity: 0; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}
@-o-keyframes opacityon {
	0%   { opacity: 0; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}

#demo .carousel-inner div, #brand, #pagination-content li{
	-webkit-animation: fadein 0.8s;
	   -moz-animation: fadein 0.8s;
	    -ms-animation: fadein 0.8s;
		 -o-animation: fadein 0.8s;
			animation: fadein 0.8s;
}
.fadein{
	-webkit-animation: fadein 0.5s;
	   -moz-animation: fadein 0.5s;
	    -ms-animation: fadein 0.5s;
		 -o-animation: fadein 0.5s;
			animation: fadein 0.5s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.outerframe{
	box-shadow: 1px 1px 6px #DDD;
	width: 100%;
}

.outerframe-title{
	background-color: #F0F0F0;
	box-shadow: 1px 1px 6px #C3C3C3;
	border-radius: 0 0 8px 8px;
}

#loadingImg{
	display: block;
	margin: 60px auto;
}

#pro p, #pro h1, #pro h2, #pro h3, #pro h4, #pro h5 {
	font-family: Helvetica, Arial, SimHei, Microsoft JhengHei, sans-serif;
}