@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap');
/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 animate 的 js */
@import url('/webeip/HT00100/Peggy/js/wow.js');

/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

/* 設備介紹 */
	.products_main{
		width: 100%;
		padding-bottom: 100px;
		padding-top: 20px;
		box-sizing: border-box;
		position: relative;
	}
	.products_main:before{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		content: '';
		clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 50%);
		background: #ececec; /* Old browsers */
		background: -moz-linear-gradient(45deg, #ececec 0%, #ffffff 12%, #ffffff 12%, #ececec 25%, #ececec 42%, #dbdbdb 57%, #ececec 65%, #ececec 82%, #ffffff 92%, #ececec 99%); /* FF3.6-15 */
		background: -webkit-linear-gradient(45deg, #ececec 0%,#ffffff 12%,#ffffff 12%,#ececec 25%,#ececec 42%,#dbdbdb 57%,#ececec 65%,#ececec 82%,#ffffff 92%,#ececec 99%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(45deg, #ececec 0%,#ffffff 12%,#ffffff 12%,#ececec 25%,#ececec 42%,#dbdbdb 57%,#ececec 65%,#ececec 82%,#ffffff 92%,#ececec 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		z-index: -1;
	}
	.products_box{
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		position: relative;
	}
	.products_title{
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		text-align: center;
	}
	.products_title > h1{
		font-family: 'Lora', serif;
		color: #87CDE2;
		font-size: 3.75rem;
		position: relative;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}
	.products_title  > h1:before{
		position: absolute;
		content: '';
		width: 50%;
		bottom: 0;
		left: 0;
		height: 10px;
		background-color: #102649;
	}
	.products_title  > h1:after{
		position: absolute;
		content: '';
		width: 50%;
		bottom: 0;
		right: 0;
		height: 10px;
		background-color: #87CDE2;;
	}
	.products_title > h2{
		color: #666;
		font-size: 2rem;
		font-weight: normal;
	}

	/* 圖示站內 */

	.ShowImgUrlLink_main{
		width: 100%;
		margin: 50px 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.ShowImgUrlLink_box{
		width: 45%;
	    transition: all .5s;
	    margin: 10px 2.5%;
	    padding: 10px;
	    box-sizing: border-box;
	}
	.ShowImgUrlLink_Txt{
		display: block;
		transition: all .5s;
		position: relative;
	}
	.ShowImgUrlLink_Txt:after{
		position: absolute;
		content: '';
		width: 0;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #535099;
		transition: all .5s;
	}
	.ShowImgUrlLink_img{
		display: block;
		position: relative;
		transition: all .5s;
		overflow: hidden;
		background-color: #fff;
	}
	.ShowImgUrlLink_img > div{
		width: 100%;
		height: 300px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
	.ShowImgUrlLink_img > .ShowImgUrlLink_icon{
		position: absolute;
		width: 100%;
		height: 100%;
		top: -100%;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2.5rem;
		color: #fff;
		transition: all .5s;
		background-color: rgba(0,0,0,.5);
	}
	.ShowImgUrlLink_img:hover .ShowImgUrlLink_icon{
		top: 0;
	}
	.ShowImgUrlLink_title{
		display: block;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
		background-color: #ffffff;
		border-bottom: 5px solid #535099;
		color: #102649;
		font-size: 1.15rem;
		position: relative;
		z-index: 99;
	}
	.ShowImgUrlLink_Txt:hover:after{
		width: 100%;
	}
	.ShowImgUrlLink_Txt:hover .ShowImgUrlLink_title{
		background-color: transparent;
		color: #fff;
	}

@media all and (max-width: 768px){

	.products_title > h1{ font-size: 3.5rem; }

	.ShowImgUrlLink_box{
		width: 95%;
		margin: 0 2.5%;
	}
	.ShowImgUrlLink_img > div{ height: 40vw; }

}