@import "navigation.css";
.pre-description--info>div {
    background: #f5f5f5;
    padding: 4px;
    width: calc((100% - 14px) / 3);/*30%*/
    text-align: center;
	border: 1px solid #b7b7b7;border-radius:3px;min-height:54px;
	display:flex;align-items:center;justify-content:center;
}

.pre-description--info {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.simplified tr:first-child td, .simplified tr>td:first-child {
    font-weight: bold;
}
.positive {
    font-size: 14px;
    color: #757575;
}

/*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;
}
#g-intro{background:#ebebeb;padding:6% 8% 140px;}
#g-features, #g-utility{
padding:2% 9% 5%;
background:#ebebeb
}
@media screen and (max-width:1640px){
	#g-features{padding:2% 8% 5%}
}

#g-utility{padding-top:0}
#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:1370px; margin:auto}/*1290*/
.sp-simpleportfolio-item::before{
bottom: 10rem;
}
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info {
position:relative;
height:160px;/*200*/
padding:18px 24px;
}
.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, .pre-description--info>div 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, #g-expanded h2, h2.special{
color:#fff;
font-weight:bold !important;
font-size:36px;
padding-bottom:6px;
line-height:1.4 !important
}
h1.special{background-color: #3e3a39;padding: 8px;font-weight: bold;font-size:80% !important;display:inline-block}
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, #g-expanded h2{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% 5% 21vw}/*2% 12% ... for comparison modified*/
#g-expanded{padding:19vw 0}
#g-expanded h1, #g-expanded h2{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 18px;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, #g-expanded h2{font-size:42px}
}

/*for compare form*/
#outer,.choose span{font-size:12px}
.tableTitle, .simplified, #itemN, #swiftOff{font-size:14px}
.comparison table{line-height: 17px;}
.comparison{position:relative;max-width:1335px;margin:auto !important}
.comparison td{padding:5px;border:4px solid #ebebeb;background:#fff;text-align:center}
/*.tableTitle td{background:#504CF5}*/
.col-3.col-xl-2, .col-xl-2.col-4{padding-right:32px;padding-left:0;color:#fff}
.col-9.col-xl-10, .col-xl-10.col-8{position:relative;overflow:hidden;margin-left:-38px}
.ProductGroup div, #itemN>tr{/*max-width:300px;*/height:124px}
.choose{transition:.5s;/*padding:0 5%;*/align-items: center;display:flex;flex-wrap:nowrap;width: max-content;position: relative;padding-top: 29px;}
.choose>div{height:134px;background:#fff;margin:0 4px 20px;border:1px solid #4250a5; cursor:pointer;display:none;text-align: center;/*padding: 7px;*/border-radius:5px;min-width:140px}
.choose img{width:100px}
.choose p{margin:0}
.choose span{
	background:#504cf5;
	display:none;
	position: absolute;
    border-radius: 15px 15px 0 0;
    padding: 4px 20px;
    color: #fff;
    left: 7px;
	width:137px;
	margin-bottom: 5px;
	text-align:center;
    top: 0;}
#outer img{height:84px;margin-bottom:8px}
#outer p{margin:0;    font-size: 14px;
    font-family: 'Roboto', Arial;}
#outer{
	position: absolute;
    top: 0px;
    left: 0px;
    transition: all 0.5s ease 0s;
}
#outer td{
	width:145px !important;
	position:relative;
	padding:0;
	height: 40px !important;
}
#outer td>div{text-align:center;padding:5px}
#itemN td>div{height:134px;padding:0;width:138px;padding:12px 0}
#next i, #prev i{font-size:14px;color:rgba(0,0,0,.87)}
#right, #left{display:none;color:#fff;background:gray;	width:30px;height:30px;}
#right{right:0}
#left{left:15px}
#left>i, #right>i{top:50%;left:50%;position:absolute;transform:translateX(-50%) translateY(-50%)}
#next, #prev, #left, #right{
	position:absolute;
	top:-53px;
	transform:translateX(-50%);
	cursor:pointer;
	z-index:10;
	border-radius: 50%;
    text-align: center;padding: 0px 12.5px 5px;
	border:2px solid #06ffff;font-weight:normal;font-size:20px
}
#next:hover, #prev:hover{background:#06ffff}
#next{right:20px}
#prev{right:68px;display:none;}
/*.tag{position:absolute;top:-36px;left:6px; background:#504CF5;color:#fff;padding:2px 13px; border-radius:17px 17px 0 0;font-size:18px}*/
.tag a{color: rgba(0,0,0,.87);display: flex;align-items: center;}
.tag a i{margin-right:5px;font-size:24px}
#swiftOn, #swiftOff{display: inline-table;margin-left:4px;position:absolute;bottom:-30px;cursor:pointer; left:0;border-radius:5px; padding:2px 10px;color:#fff;background:#504CF5;}
.cancel{font-family: monospace;position:absolute;top:8px;right:9px;color:#b1b0b0;font-size:20px;cursor:pointer}
#outer>table{width:max-content}
.tableTitle tr:not(.ProductGroup){height:40px}
.simplified{text-align:center;position:relative;max-width:1335px;margin:auto !important}
.simplified tr>td:nth-of-type(1) {/*background: #504cf5;color:#fff*/}
.simplified td{border:4px solid #ebebeb}
.simplified table{width:100%;background:#fff}
.simplified, .comparison.row, .choose{display: none;padding-right:0;padding-left:0;padding-bottom:10%}
.simplified.show{display: block;animation:fadeIn .5s linear;margin-top:190px !important}
.comparison.row.show, .choose.show{display:flex; animation:swiftIn .5s linear;}
.comparison{
    display: flex;margin-top:190px !important
}
.comparison-mobile{
	border-radius: 25px;
    background: url(/images/ezdupe/webpage/Category/1672570193509.jpg);
    text-align: center;
    padding: 15% 3%;
    max-width: 98%;
    margin: auto !important;
    color: #fff;
    font-weight: bold;
    background-size: cover;
    font-size: 1.5em;
	margin-top:10vw !important;
}
@keyframes swiftIn{
    from{opacity:0; transform:translateX(100px)}
    to{opacity:100; transform:translateX(0);}
}
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:100}
}

@media screen and (min-width:1025px) and (max-width:1280px){
	#outer td{min-width:145px;}
}
@media screen and (max-width:1024px){
	.choose{overflow:scroll;width:auto}
	.choose>div{min-width:130px;height:144px;width:130px}
	#prev, #next, #left, #right{display:none !important}
	.comparison .col-xl-10.col-9{overflow:scroll !important;margin:0;margin-left: -37px;}
	.comparison .col-xl-10.col-8{overflow:scroll !important;margin:0;margin-left: -37px;}
	.col-xl-2.col-3{width:78px}
	#outer td{min-width:150px !important;padding: initial;height:64px !important}
	.tableTitle td{height:64px; overflow:hidden}
	#g-intro, #g-features{padding:6% 2% 8%}
	#g-utility{padding:6% 3.5% 8%}
	.tableTitle span{display:none}
	/*.tableTitle td, #outer td, .simplified td{min-width:95px !important}*/
}
@media screen and (max-width:476px){
    /*.tableTitle .row-text{width:78px}*/
    .comparison{padding-bottom:8%}
	.comparison .col-xl-10.col-9{margin-left:-5px}
	.comparison .col-xl-10.col-8{margin-left:-4.3%}
	.col-xl-2.col-4{font-size:14px}
	.simplified, .comparison .col.xl-10.col-8{overflow:scroll !important;padding-bottom:8%}
	.tableTitle td{text-align:left}
	.tag{display:none}
	#swiftOn, #swiftOff{bottom:5px}
	.choose span{width:125px}
	/*.tableTitle td, #outer td, .simplified td{height:43px !important;min-width:95px !important}*/
}
/*for hdd color tag*/
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a{background:#ebebeb}

/*for simple portfolio*/
.sp-simpleportfolio-item::before{bottom:12rem}.category .content{padding-top:2%}
@media only screen and (max-width:756px){
	/*.sp-simpleportfolio .sp-simpleportfolio-items .sp-simpleportfolio-item{width:100%}*/
	/*.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-img{height:auto}*/
}
@media only screen and (min-width:757px) and (max-width : 1070px){
	.sp-simpleportfolio .sp-simpleportfolio-items .sp-simpleportfolio-item{width:50%}
}
@media only screen and (min-width:1071px) and (max-width:1498px){
	.sp-simpleportfolio .sp-simpleportfolio-items .sp-simpleportfolio-item{width:33.3%}
}
/*.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{height:235px}285*/
/*@media only screen and (max-width: 1116px) and (min-width: 1071px),screen and (max-width: 768px) and (min-width: 757px),screen and (min-width:577px) and (max-width:605px),screen and (max-width: 360px){
	.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{height:235px}320
}*/
/*content padding*/
@media only screen and (min-width:393px) and (max-width:756px),screen and (min-width:816px) and (max-width:1070px),screen and (max-width:1498px) and (min-width:1401px){
	.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{padding:25px}.sp-simpleportfolio-info::before{left:25px}
}
/*@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}	
}*/
											
											
/*read more section*/
#g-utility{background:#ebebeb}
.readmore-sec {
	max-width: 1320px;
	margin:0 auto 3vw;display:flex;flex-direction:column;
}
@media screen and (max-width:1600px){
.readmore-sec{padding:0 10px}
}
.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 !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%}
	.comparison{display:none !important}
.comparison-mobile{display:block !important;}
}
@media screen and (min-width: 577px){
	.comparison{display:flex !important}
.comparison-mobile{display:none !important;}
}