@charset "utf-8";
/* CSS Document */
html, body {scroll-behavior: smooth;}
.detail{width: 1200px; margin: 0 auto;}
a{color: #30a6ec;}
a:hover{text-decoration: underline;}
img{max-width: 100%;}

h2{font-size: 40px;line-height: 1;text-align: center; padding: 40px 0 30px;}

.review-banner{background: url(../images/reviews/bg-icon.jpg) no-repeat 70% top,radial-gradient(1200px 220px at bottom 220px left 50%, #ebf1f5 99.85%, transparent 100%), linear-gradient(#ebf1f5 80%,transparent 80%);text-align: center;padding-bottom: 50px;}
h1{font-size: 40px;line-height: 1;padding: 60px 0 20px;}
h1+p{font-size: 21px;}
.btn-banner {padding: 30px 0 15px;}
.btn-banner a{display: inline-flex;align-items: center;border-radius: 28px;color: #fff;font-size: 18px;text-decoration: none;line-height: 56px;position: relative;padding: 0 10px 0 50px;width: 438px;box-sizing: border-box;justify-content: center;}
.btn-banner a span{color: #d4ecfd; padding-right: 10px;padding-left: 8px;}
.btn-banner a.downv span{color: #f6ffe6;}
.btn-banner a.downc{background: #179bfd;}
.btn-banner a.downv{background: #9ad23e;}
.btn-banner a var{font-style: normal; width: 66px;height: 66px;border-radius: 34px;background: #fff;border:2px solid #179bfd;position:absolute;top: -7px;left: 0; display: inline-flex;align-items: center;justify-content: center;}
.btn-banner a.downv var{border-color: #9ad23e;}
.btn-banner a:nth-child(2){margin-left: 25px;}
.banner-mess{font-size: 21px;color: #7f929e;padding: 20px 0 30px;}
.banner-company{display: flex;gap: 25px;align-items: center;justify-content: center;flex-wrap: wrap;}
/*----------*/
.review-comment{background: linear-gradient(#fff,#eef3f6);border-radius: 0 0 280px 280px;}
.comment-box{padding: 20px 0 40px;}
.product-box{display: flex;justify-content: space-between;align-items: center;}
.product-title{display: flex;align-items: center;gap: 15px;}
.product-title h3{font-size: 24px;}
.product-title p{font-size: 19px;color: #666;padding-top: 5px;}
.comment-border{padding: 40px 0 0;overflow: hidden;}
.comment-change{display: flex;transition: all 0.5s ease-in-out;width: 300%;}
.comment-change > div{display: flex; gap: 30px;}
.comment-one{width: 380px;box-sizing: border-box;padding: 20px;background: #fff;box-shadow: -4px 4px 27px 0px rgba(180, 180, 180, 0.19);border-radius: 6px;/* flex-shrink: 0; */}
.comment-one .t{font-size: 17px;display: flex;justify-content: space-between;padding-bottom: 10px;}
.comment-one p{font-size: 15px;color: #666;}
.comment-one .time{color: #4b4b4b;display: flex;justify-content: space-between;align-items: center;padding-top: 20px;}
.comment-spot{padding: 35px 0 0;text-align: center;}
.comment-spot span{background: #c9e4f4;width: 16px;height: 16px;border-radius: 8px; margin: 0 9px;display: inline-block;cursor: pointer;}
.comment-spot span.focus{background: #6eb9e6;}
.share-box{text-align: center;padding: 30px 0 20px;}
.share-box a{display: inline-block; line-height: 57px;background: #ff9f00;border-radius: 5px;text-decoration: none;padding: 0 40px;color: #fff;font-size: 18px;}
/*----------*/
.review-sites{padding: 10px 0 50px;}
.review-sites h2{}
.sites-product{text-align: center;padding-bottom: 60px;}
.sites-product span{font-size: 21px;display: inline-block;border: 1px solid #179bfd;line-height: 50px;width: 297px;cursor: pointer;color: #5faff4;}
.sites-product span.focus{background: #179bfd;color: #fff;position: relative;}
.sites-product span.focus::after{content: "";display: inline-block;border-top: 16px solid #179bfd;border-left: 13px solid transparent;border-right: 13px solid transparent;position: absolute; left: 50%;bottom: -16px;}
.sites-product span:nth-child(1){border-radius:25px 0 0 25px;}
.sites-product span:nth-child(2){border-radius:0 25px 25px 0;}

.review-sites .re_one{border-radius: 6px;padding: 20px 7% 20px 30px;font-size: 17px;margin: 0 0 20px;box-shadow: -4px 4px 27px 0px rgba(180, 180, 180, 0.19);position: relative;}
.re_one .re_pic{color: #007deb;padding: 0 0 10px;}
.re_one .re_pic >img{padding-right: 10px;}
.re_one .re_pic a{color:#007deb;font-size: 21px; text-decoration:none;}
.re_one .re_pic span{background: #ff9f00;display: inline-block;position: absolute;right: 0;top: 0; border-radius: 0 0 0 10px;color: #fff;font-size: 22px;padding: 6px 13px;}
.re_one h3{font-size: 17px;color: #000;}
.re_one p{font-size: 15px;color: #666;padding: 5px 0 0;}
.review-sites {font-size:17px;}
.more-content{display: none;}
.more-btn{text-align: center;cursor: pointer;}
.more-btn span{font-size: 17px;color: #5097ef;}
.more-btn span::after{content:"";background: url(../images/reviews/icon5.png) no-repeat center;width: 12px;height: 11px;  margin-left: 5px;display: inline-block;}
.more-btn span.hide::after{transform: rotate(180deg);}
.more-btn span.hide{display: none;}
.more-btn.active span{display: none;}
.more-btn.active span.hide{display: inline-block;}
/*----------*/
.side-nav {
	position: fixed;
	top: 0;
	width: 250px;
	height: 0;
	left: calc(50% - 900px);
	display: none;
}
.side-nav .wrap {
	padding-top: 70px;
}
.side-nav .side-title {
	font-size: 17px;
	margin-bottom: 20px;
	color: #1c1c1c;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: 0 10px;
}
.side-nav .side-title i {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #060606;
	border-radius: 50%;
	vertical-align: middle;
	position: relative;
}
.side-nav .side-title i::before {
	display: inline-block;
	content: '';
	width: 6px;
	height: 6px;
	border: 1.5px solid #060606;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, 0) rotate(45deg);
	border-bottom: none;
	border-right: none;
}
.side-nav .side-title i.on-off {
	transform: rotate(180deg);
}
.side-nav .nav-list {
	font-size: 15px;
	line-height: 1.4;
	color: #1c1c1c;
}
.side-nav .nav-list li a {
	width: 100%;
	display: flex;
	align-items: center;
	border-top: 1px solid #e5e5e5;
	position: relative;
	height: 50px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
	white-space: nowrap;
	text-decoration: none;
	color: #333;
}
.side-nav .nav-list li a span {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.side-nav .nav-list li:first-of-type a {
	border-top: 1px solid transparent;
}
.side-nav .nav-list li a::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background: #b7bbc2;
	border-radius: 50%;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 10px;
}

.side-nav .nav-list li.focus a {
	color: #ffffff;
	border-top-color: transparent;
}
.side-nav .nav-list li.focus a::before {
	background: #ffffff;
}
.side-nav .nav-list li.focus a::after {
	content: '';
	display: inline-block;
	border: 5px solid transparent;
	border-left-color: #ffffff;
	border-left-width: 8px;
	border-right-width: 0;
}
.side-nav .nav-list li.focus a {
	width: 100%;
	border-radius: 25px;
	background: #fdc96e;
}
.side-nav .nav-list li.focus + li a {
	border-top-color: transparent;
}


@media (max-width: 1700px) {
	.side-nav{display: none;}
	
}
@media (max-width: 1200px) {
	.detail{width: auto; padding: 0 2%;}

	.comment-change > div{flex-wrap: wrap;}
	
}
@media (max-width: 979px) {
	
	
}
@media (max-width: 880px) {
	.comment-change > div{gap: 10px;}

}

@media (max-width: 802px) {
	h1,h2{font-size: 35px;}

	.btn-banner a:nth-child(2){margin-left: 0; margin-top:20px;}

	.comment-change > div{justify-content: center;}
	
}
@media (max-width: 622px) {
	.sites-product span{width: 49%;}
	
}
@media (max-width: 479px) {
	h1,h2{font-size: 28px;}

	.btn-banner a{width: 95%;font-size: 16px;}

	.sites-product span{font-size: 17px;}
	.product-box{flex-wrap: wrap;}
	.product-title h3{font-size: 21px;}
	.product-title p{font-size: 17px;}
		
	
}