.cover{
	background-color: #999; 
	background:url('images/web_1920x350_2025.jpg'); 
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center; 
	width:100%; 
	max-width: 100%;
	height:140px; 
	padding-top: 10px;
	margin: 0 auto;
}
.cover .cover_title {
	text-align: center; max-width: 1024px;margin-left: auto; margin-right: auto;
}
.cover .cover_title .align_middle_table {
	display: table; vertical-align: middle; text-align: center; width: 100%; height: 225px;
}
.cover .cover_title .align_middle_table_cell {
	display: table-cell; vertical-align: middle; text-align: center; height: 225px;
}
.cover .cover_title .title_img {
	max-width: 100%; max-height: 220px;
}


.headtext{
	text-align:center;
	max-width:1180px;
	margin: 0 auto;
	padding: 50px 10px 20px 10px;
	color: #0F83BD;
	font-size:28px;
}
.headsubtext{
	text-align:center;
	max-width:920px;
	margin: 0 auto;
	padding: 10px 10px;
	color: #333;
	margin-bottom: 50px;
	line-height: 1.5em;
}
.blueback{
	background-color:#ECF0F1;
}
.whiteback{
	background-color:#FFFFFF;
}
.survey_question {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 0px;
}
.survey_question .question_title {
	font-size: 20px;
	margin-bottom: 30px;
	text-align: left;
}
.survey_question .question_title .question_sequence {
	float: left; 
	background-color: #0F83BD; 
	line-height: 2em; color: #fff; 
	font-size: 15px; border-radius: 50%; 
	width: 2em; height: 2em; 
	text-align: center; margin-right: 15px;
}
.survey_question .question_answer {
	margin-bottom: 30px;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .model_no {	
	font-size: 13px !important;
}
.votebutton_wrap {
	margin-top: 15px;
}
.votebutton_wrap img {
	cursor: pointer;
}
.votebutton_wrap .votebutton, .votebutton_wrap .votedbutton {
	margin-top: 3px; width: 26px !important;
}
.ajax_vote_status {
	color: green;
	font-size: 13px;
	font-weight: normal;
	margin-top: 5px;
	font-family: "sans-serif", "Helvetica Neue",Helvetica,"微軟正黑體","Microsoft Sans Serif",Helvetica,Geneva,arial;
	text-align: center;
	display: none;
}
.bottom_remark {
	max-width:800px; text-align: left; font-size: 14px; color: #999;
	margin: 0 auto;
	padding-bottom: 40px;
}
.bottom_remark ol {
	line-height: 1.8em;
}
.gadget_wrap {
	margin-left: -15px;
}
.gadget_wrap .gadget_inner_wrap {
	margin-bottom: 2.5em;
	width: 100%;
}
.gadget_wrap .gadget_inner_wrap .gadget_div {
	width: 50%;
	float: left;
	padding-left: 15px;
	position: relative;
	min-height: 1px;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget {
	width: 100%;
	height: 270px;
	background-color: #fff;
	border: solid 1px #eee;
	padding: 15px;
	text-align: center;
	margin-bottom: 15px;
	font-family: "proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova","Segoe UI",Helvetica,Arial,sans-serif;
	font-weight: 600;
	color: #444;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget.extralong {
	height: 300px;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget img {
	width: 120px;
	max-width: 100%;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .model_no {
	font-size: 15px;
	margin-top: 1em;
	margin-bottom: 0.2em;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .gadget_rating {
	margin-bottom: 0.2em;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .gadget_rating_counter {
	font-size: 12px;
	color: #aaa;
	margin-bottom: 0.2em;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .gadget_writereview_btn {
	margin-top: 5px;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .gadget_writereview_btn a {
	display: inline-block; background-color: #ff9900;border-radius: 3px; font-size: 12px;padding: 5px 20px;
	color: #fff;
}
.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .gadget_writereview_btn a:hover {
	background-color: #ff6600;
}

.gadget_wrap .gadget_inner_wrap .gadget_div_samples {
	width: 50%;
	float: left;
	padding-left: 15px;
	position: relative;
	min-height: 1px;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget {
	width: 100%;
	height: 270px;
	background-color: #fff;
	border: solid 1px #eee;
	padding: 15px;
	text-align: center;
	margin-bottom: 15px;
	font-family: "proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova","Segoe UI",Helvetica,Arial,sans-serif;
	font-weight: 600;
	color: #444;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget img {
	max-width: 100%;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget .model_no {
	font-size: 15px;
	margin-top: 1em;
	margin-bottom: 0.2em;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget .model_no a {
	color: #3498db;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget .model_no a:hover {
	color: #ff6600;
}

.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget .gadget_rating {
	margin-bottom: 0.2em;
}
.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget .gadget_rating_counter {
	font-size: 12px;
	color: #aaa;
	margin-bottom: 0.2em;
}
@media (min-width: 768px) {
	.cover {
		background-color: #999; 
		background:url('images/web_1920x350.jpg'); 
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: center; 
		width:100%; 
		height:350px; 
		padding-top: 10px;
		margin: 0 auto;
	}
	.cover .cover_title .title_img {
		max-width: 100%; max-height: 330px;
	}


	.headtext {
		font-size:40px;
	}
	.survey_question {
		padding: 30px;		
	}
	.question_title {
		text-align: left;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div .gadget .model_no {	
		font-size: 13px !important;
	}
	.gadget_wrap .gadget_inner_wrap {
		margin-bottom: 1em;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div {
		width: 20%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div.onefifth {
		width: 20%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div.onefourth {
		width: 25%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div.onethird {
		width: 33.3%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div.halfhalf {
		width: 50%;
	}

	.gadget_wrap .gadget_inner_wrap .gadget_div .gadget {
		height: 260px;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div .gadget.long {
		height: 270px;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div .gadget.extralong {
		height: 300px;
	}

	.gadget_wrap .gadget_inner_wrap .gadget_div_samples {
		width: 20%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div_samples.onefifth {
		width: 20%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div_samples.onefourth {
		width: 25%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div_samples.onethird {
		width: 33.3%;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div_samples.halfhalf {
		width: 50%;
	}

	.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget {
		height: 260px;
	}
	.gadget_wrap .gadget_inner_wrap .gadget_div_samples .gadget.long {
		height: 270px;
	}
}

/* Section Title Styling */
.section-title {
	text-align: center;
	margin: 60px 0 50px 0;
}
.section-title h2 {
	font-size: 36px;
	font-weight: 700;
	color: #333;
	margin: 15px 0;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.section-title h3 {
	font-size: 18px;
	font-weight: 300;
	color: #999;
	margin: 10px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.st-separator {
	width: 60px;
	height: 3px;
	background: #01BFFF;
	margin: 20px auto;
}

/* Section Background */
.section-wrapper {
	background-color: #fff;
	padding: 40px 0;
	margin: auto -10px;
}
.section-wrapper:nth-child(even) {
	background-color: #f9f9f9;
}

/* Category Title */
.category-header {
	font-size: 24px;
	font-weight: 600;
	color: #333;
	margin-bottom: 30px;
	padding-left: 15px;
	border-left: solid 8px #01BFFF;
}

/* Product Grid */
.product-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	max-width: 1200px;
	margin: 0 auto;
}
.product-item {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	width: calc(20% - 16px);
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.product-item:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transform: translateY(-3px);
}
.product-item.voted {
	border-color: #28a745;
	box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}
.product-image {
	background: #fff;
	padding: 20px;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-image img {
	max-width: 100%;
	max-height: 90px;
	object-fit: contain;
}
.product-title {
	padding: 12px 15px;
	font-size: 13px;
	color: #333;
	min-height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.4;
	border-top: 1px solid #f0f0f0;
}
.product-title a {
	color: #333;
	text-decoration: none;
}
.product-title a:hover {
	color: #01BFFF;
}
.vote-btn-wrapper {
	padding: 0 15px 15px;
	position: relative;
}
.vote-btn {
	width: 100%;
	padding: 8px 12px;
	background: #dcf0f7;
	color: #008abd;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s;
}
.vote-btn:hover {
	background: #4cbce6;
	color: #fff;
}
.vote-btn.voted {
	background: #28a745;
	color: #fff;
}
.vote-success {
	display: none;
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	background: #28a745;
	color: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	white-space: nowrap;
}

/* Remarks Section */
.remarks-section {
	background-color: #f9f9f9;
	padding: 60px 20px;
}
.remarks-list {
	max-width: 900px;
	margin: 0 auto;
}
.remarks-list ol {
	counter-reset: item;
	list-style-type: none;
	padding: 0;
}
.remarks-list li {
	counter-increment: item;
	margin-bottom: 18px;
	padding-left: 45px;
	position: relative;
	font-size: 14px;
	line-height: 1.7;
	color: #555;
}
.remarks-list li:before {
	content: counter(item);
	position: absolute;
	left: 0;
	top: 0;
	background: #01BFFF;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
}

@media (max-width: 992px) {
	.product-grid { gap: 18px; }
	.product-item { width: calc(33.333% - 14px); }
}
@media (max-width: 768px) {
	.product-grid { gap: 15px; }
	.product-item { width: calc(50% - 10px); }
	.section-title h2 { font-size: 28px; }
	.category-header { font-size: 20px; }
}
@media (max-width: 480px) {
	.product-grid { gap: 10px; }
	.product-item { width: calc(50% - 5px); }
}