@import "navigation.css";
.pre-description--info>div {
    background: #f5f5f5;
    padding: 4px;
    width: calc((100% - 14px) / 3);
	min-height:54px;text-align: center;
	border: 1px solid #b7b7b7;border-radius:3px;
	display:flex;align-items:center;justify-content:center;
}
:lang(ja-JP) .simplified+.scrollarrow{display:none}
.pre-description--info {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/*G-position*/
#g-header{
background:url("/images/ezdupe/webpage/Category/all_hard_drive_duplicator.png") right bottom no-repeat;
background-color:#ebebeb;
background-size: cover, contain;
/*filter: drop-shadow(0 6px 10px rgba(48, 57, 115, 0.5));*/
}
#g-intro{
padding:2% 9% 5%;
padding-top:6%;
background:#ebebeb;
}
#g-features, #g-utility{padding:6% 9% 5%; background:#ebebeb}
#g-features {
    padding: 6% 8% 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:200px 0;
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:1370px; margin:auto}
.sp-simpleportfolio-item::before{
bottom: 10rem;
}
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info {
position:relative;
}
/*
.sp-simpleportfolio-info::before {
position: absolute;
width: 70px;
height: 6px;
background-color: #f9ec00;
top: 0;
left: 30px;
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: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-size:42px;
padding-bottom:6px;
line-height:1.4
}
li{
font-size:1rem;
}
@media screen and (max-width:857px){
#g-header{background-position:left}
}
@media screen and (min-width:1480px){
	.category{max-width:1300px;margin:auto !important}
}
/*mobile*/
@media screen and (max-width:575px){
.content p{text-align:left;font-size:15px;margin-top:0px}
.category {padding: 16vw 9% 18vw}
.content h1{font-size:32px}
.category .pic{padding:0 10%}
#g-intro{padding:2% 12% 21vw;position:relative}
#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:center}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{font-size:10px;padding:6px 16px;border-width:2px}
.sp-simpleportfolio-info h3{font-size:15px}
.sp-simpleportfolio-tags{font-size:12px}
/*usb, sd, cf category table arror*/
.scrollarrow {filter: brightness(0.5);    position: absolute;    top: 0;    width: 8px;    right: 5%;    top: 6%;    animation: sparkle 1.5s 0.5s infinite ease-in-out;}
@keyframes sparkle{
	0%{filter:brightness(1)}
	50%{filter:brightness(0.5)}
	100%{filter:brightness(1)}
}

}

/*comparison*/
.simplified{padding:0 0 4%;text-align:center;position:relative;max-width:1370px;margin:auto !important}
.simplified tr:nth-of-type(even) td{background: #f9f9f9;}
.simplified tr:first-child td, .simplified tr>td:first-child {font-weight: bold;}
.simplified td{border:4px solid #ebebeb;font-size:14px}
.simplified table{width:100%;background:#fff;font-family: 'Roboto', Arial;}
.simplified, .comparison.row, .choose{display: none;}
.simplified.show{display: block;animation:fadeIn .5s linear;margin-top:150px !important;padding-bottom:10%}
.simplified p {font-size: 15px;}
@media screen and (max-width:476px){.simplified{overflow:scroll !important;padding-bottom:8%} .simplified td{height:43px !important;min-width:95px !important}}

@media screen and (max-width:360px){
	.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{padding:6px 10px;}
}
@media screen and (min-width:576px) and (max-width:767px){
.category{padding:6vw 7vw 13vw}
}
@media screen and (max-width:1024px){
#g-features{padding:6% 2% 5%}
#g-utility{padding:6% 3.5% 5%}
}
			
/*read more section*/
#g-utility{background:#ebebeb}
.readmore-sec {
	max-width: 1370px;
	margin:0 auto 3vw;display:flex;flex-direction:column;padding:0 4px
}
.readmore-sec h2{position:relative;font-weight:bold;font-size:34px;line-height:49px}
.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 2px !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%}
}