@import "navigation.css";
/*G-position*/
#g-header{
background:url("/images/ezdupe/webpage/Category/all_hard_drive_duplicator.png")center bottom no-repeat;
background-color:#ebebeb;
background-size: cover, contain;
/*filter: drop-shadow(0 6px 10px rgba(48, 57, 115, 0.5));*/
}
#g-intro{background:#ebebeb;padding:6% 9% 5%;}
#g-expanded{
background:url("/images/ezdupe/webpage/Category/EZ-Dupe_All-HDD-Duplicator_Tower-HDD-Duplicator_Small-size-HDD-Duplicator_03_02.png") center center no-repeat;
padding:19vw 5%;
text-align:center;
background-size:cover;
position:relative;
left:-1px;
}
#g-expanded a {
font-size: 20px;
color: #fff;
padding: 9px 16px;
border: 2px #06ffff solid;
border-radius: 56px;
margin-top:32px;
display:inline-block
}
#g-expanded a:hover {
color: #3e3a39;
background-color: #06ffff;
text-decoration:none;
}
/*simpleportfolio*/
.sp-simpleportfolio{max-width:1290px; margin:auto}
.sp-simpleportfolio-item::before{
bottom: 10rem;
}
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info {
position:relative;
height:250px;
padding:18px;
}
.sp-simpleportfolio-info::before {
position: absolute;
width: 70px;
height: 6px;
/*background-color: #f9ec00;*/
top: 0;
left: 15px;
content: "";
}
.sp-simpleportfolio-tags a:hover{text-decoration:none}
.sp-simpleportfolio-tags span>a, .sp-simpleportfolio-tags>p a{color:#373737 !important;display:block}
/*header*/
.category{
	padding:6vw 0 13vw;/*5% 0 20% ... 5% 8%or 7rem 0 10rem*/
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
	justify-content:center;
}
.category .pic{
float:right;
text-align:center;
padding:0 2%;
}
.category .pic>img{
width:100%;
/*max-width:max-content; 100%*/
}
.category .content{
color:#fff;
padding:5%;
}
.content p{
font-size:18px;
line-height:26px;
}
/*改完刪*/
.d-lg-block{
padding-top:8%
}
.d-block{
padding-top:9rem}
/*到這*/
.d-xl-block{padding:2rem 0}
/*base*/
.content h1, #g-expanded h1{
color:#fff;
font-weight:bold !important;
font-size:36px;
padding-bottom:6px;
line-height:1.4 !important
}
li{
font-size:1rem;
}
/*.comparison .col-xl-9{background:#fff}*/

@media screen and (max-width:768px){
#g-features{padding:2% 12% 21vw}
.category{padding:16vw 2% 18vw;}
}
/*mobile*/
@media screen and (max-width:576px){
.row h3{
padding-bottom:0}
.content h1, #g-expanded h1{font-size:32px}
.category{padding:16vw 9% 18vw;}
.category .pic{padding:0 10%}
.content p{text-align:left;font-size:15px;margin-top:0px}
#g-features{padding:2% 12% 21vw}/*for comparison modified*/
#g-expanded{padding:19vw 0}
#g-expanded h1{font-size:18px;line-height:26px}
#g-expanded a{font-size:12px;padding:6px 16px;margin-top:17px}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul{display:flex;justify-content:space-between}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{font-size:10px;padding:6px 9px;border-width:2px}
.sp-simpleportfolio-info h3{font-size:15px}
.sp-simpleportfolio-tags{font-size:12px}
}
@media screen and (max-width:360px){
	.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{padding:6px;}
}
@media screen and (max-width:992px){
#g-header{background-position:left}
}
@media screen and (min-width:1480px){
.category{max-width:1300px;margin:auto !important}
.content h1, #g-expanded h1{font-size:42px}
}
@media only screen and (max-width: 1093px) and (min-width: 1025px), screen and (max-width: 694px) and (min-width: 577px), screen and (max-width: 1459px) and (min-width: 1401px), screen and (max-width: 360px){
	.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{height:290px}
	
}
@media screen and (max-width:757px) and (min-width:487px){
.sp-simpleportfolio-info .mobile{display:flex}
.sp-simpleportfolio-info .desktop{display:none}
}
.sp-simpleportfolio-info .mobile{display:none}
.sp-simpleportfolio-info .desktop{display:flex}
/*read more section*/
	#g-utility{background:#ebebeb}
	.readmore-sec {
		max-width: 1140px;
		margin:0 auto 3vw;display:flex;flex-direction:column;
	}
	.readmore-sec a:hover{text-decoration: none !important;}
	.rmarticle {
		margin: 2% auto !important;
		box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);
		padding: 0!important;
		color:#3e3a39
	}
	.rmarticle .pic{padding:0}
	.rmarticle .pic, .rmarticle .content{
		display:flex;
		flex-direction:column;
		justify-content: center;
		font-size:15px;
	}
	.rmarticle .content {
		padding: 2% 5%;background:#fff;
	}
	@media screen and (max-width: 576px){
		.rmarticle .content{padding:9% 5%}

	}