@charset "utf-8";
body{font:17px/28px tahoma, Arial, sans-serif!important;color: #262626;}
img{max-width: 100%;height: auto;}

.detail{width: 1170px;margin: 0 auto;padding: 1px;}
a{color: #3ca3f2;text-decoration: none;}
.green{color:#21ac21;}
.grey{color: #809eb3;}

.line{border-bottom: 1px solid #e8e8e8; padding: 15px 0 0; }
.red{color:#f00;}
.blue{color:#0fb4ff;}

.banner-content{background: url(../images/products-comparison/banm.jpg) no-repeat center #ebf1f6;height: 436px;}
.banner-content .detail{display: flex;justify-content: space-between;padding: 90px 0 0;}
.banner-content .banner-left{width: 54%;}
.banner-content h2{font-size: 30px;font-weight: bold;color: #000;padding: 0 0 15px;}
.banner-left p{color: #999;padding: 4px 0;}
.banner-left .btn{padding: 25px 0 0;font-size: 19px;font-weight: bold;}
.banner-left .btn a{display: inline-block;color: #fff;transition: background 0.5s;padding: 0 77px 0 0; background:url(../images/products-comparison/icon-system.png) no-repeat right 20px center #0f9bff;background-origin: border-box;line-height: 60px;border-radius: 8px;width: 185px;text-align: center;}
.banner-left .btn a b{font-size: 19px;}
.banner-left .btn a:hover{background:url(../images/products-comparison/icon-system.png) no-repeat right 20px center #12bcff;}
.banner-right img{cursor: pointer;}
/*---------------*/
header{background-color:#fbfbfb;}
.crumb{padding: 18px 0;}
h1{font-size: 48px;padding: 20px 0 5px;line-height: 51px;text-align: center;color: #000;font-weight: bold;}
h1 span{font-size: 30px;color: #000;font-weight: normal;}
.prodsBox{display: grid;grid-template-columns:19% 13.5% 13.5% 13.5% 13.5% 13.5% 13.5%;padding: 48px 0 5px;}
.prodsBox div{text-align: center;}
/*---------------*/
.fixProducts{position: sticky;top:0;height: 197px;z-index: 3;background: #fbfbfb;}
.fixProducts.fix{background:url(../images/products-comparison/bgm2.jpg) no-repeat center #f4f9fd;top:81px;}
/*---------------*/
.horBar{border-bottom: 1px solid #e8e8e8;background: #fff;position: sticky;z-index: 3;}
.horBar .detail{display: flex;justify-content: space-between;padding: 0;}
.horBar span{display: inline-block;flex-grow: 1;text-align: center;padding: 0 20px;line-height: 80px;color: #262626;font-size: 21px;cursor: pointer;}
.horBar span:hover,.horBar span.focus{background: #dbf0ff;color: #0f9bff;}
.horBar a{display: none;}
.horBar.fix{top: 0;}
.horBar.fix a{display: inline-block;color: #fff;background: url(../images/products-comparison/icon-system.png) no-repeat right 18px center #0f9bff;width: 170px;text-align: center;padding:6px 67px 0 0;height: 54px;border-radius: 5px;margin: 10px 0 0;line-height: 24px;}
.horBar.fix a b{font-size: 19px;}

/*---------------*/
.comparContent{background: #fbfbfb;padding-bottom: 50px;}
.comparContent h3{font-size: 21px;color: #000;font-weight: bold;line-height: 77px;border-top: 3px solid #0f9bff;margin: 40px 0 0;padding: 0 30px;cursor: pointer;}
.comparContent h3:after{content: "";display: inline-block;width: 30px;height: 17px;background: url(../images/products-comparison/up.png) no-repeat;float: right; margin: 30px 0 0;transition: all .5s;}
.comparContent h3.hide:after{transform: rotate(-180deg);}
.comparContent section{background: #fff;border-radius: 0 0 15px 15px;}
.comparContent .comparBox{border-top:1px solid #e8e8e8;}
.comparContent .comparBox.boderNo{border-top:none;}
.comparContent .comparBox table{width: 100%;border-collapse: collapse;border-bottom: 1px solid #e8e8e8;}
.comparContent .comparBox table:last-child{border-bottom:none;}
.comparContent .comparBox table:last-child tr:last-child td{padding-bottom: 15px;}
.comparContent .comparBox table th{text-align: left;font-size: 19px;border-right: 1px solid #e8e8e8;padding: 20px 0 10px;}
.comparContent .comparBox table th:first-child{padding-left: 30px;}
.comparContent .comparBox table th:last-child{border-right: none;}
.comparContent .comparBox table tr td{width: 13.5%;box-sizing: border-box;border-right: 1px solid #e8e8e8;text-align: center;padding: 9px 0;}
.comparContent .comparBox table tr td:first-child{width: 19%;text-align: left;padding-left: 30px;}
.comparContent .comparBox table tr td:last-child{border-right: none;}
.comparContent .comparBox table tr td b{font-size: 19px;}
.comparContent .comparBox table tr:hover td{background-color: #f0fbff;}
.comparContent .comparBox table tr td a{cursor: pointer;}
.comparContent .comparBox table tr td sup{color: #999;font-size: 13px;}
.comparContent h4{font-size: 19px;color: #0f9bff;font-weight: bold;line-height: 60px;padding: 0 30px;cursor: pointer;background: #f2f6f9;}
.comparContent h4:after{content: "";display: inline-block;width: 0;height: 0;float: right;margin: 30px 0 0;border-right: 10px solid transparent;border-left: 10px solid transparent;border-bottom: 13px solid #0f9bff;transition: all .5s;}
.comparContent h4.hide{border-bottom: 1px solid #addbfb;}
.comparContent h4.hide:after{transform: rotate(-180deg);}
.comparBox .org{position: relative;}
.comparBox .org var {position: relative;font-style: normal;z-index: 2;}
.comparBox .org:after{content: "";display: inline-block;border-bottom: 7px solid #ffb27f;position: absolute;left: 0;bottom: 0px;width: 100%;height: 0;z-index: 1;}
.comparBottom{color: #666;}
.comparBottom h6{color: #666;font-size: 21px;font-weight: bold;padding: 30px 0 10px;}
.comparBottom ul{display: grid;grid-template-columns:235px auto;}
.comparBottom ul li{font-size: 18px;padding: 8px 0;}
.comparBottom .note{color: #999;}
.comparBottom .note ol{margin-left: 20px;}
.comparBottom .note ol li{padding: 5px 0;list-style-type: decimal;}
/*---------------*/
.popularComp{background: #fff;padding: 70px 0 60px;}
.popularComp h2{font-size: 27px;color: #000;text-align: center;font-weight: bold;padding: 0 0 10px;}
.popularComp .detail{display: flex;justify-content: space-around;}
.popularComp ul{width: 42%;}
.popularComp ul li{line-height: 65px;border-bottom: 1px solid #e8e8e8;}
.popularComp ul li a{color: #262626;}
.popularComp ul li a:hover{text-decoration: underline;}
.popularComp ul li img{padding-left: 30px;}
/*---------------*/
.Top {width: 90px;height: 90px;position: fixed;bottom:10%;right: 5%;display: none;}
/*---------------*/
.popImg{display: inline-block;padding: 20px;background: #fff;position: relative;}
.popImg .close{position: absolute;right: -20px;top: -20px; background: #c1bfbd;width: 40px;height: 40px;line-height: 32px; color: #fff;cursor: pointer; border-radius: 50%;font-size: 40px; text-align: center;}
/*---------------*/
.popVideo{display: inline-block;padding: 20px;background: #fff;position: relative;}
.popVideo .close{position: absolute;right: -20px;top: -20px; background: #c1bfbd;width: 40px;height: 40px;line-height: 32px; color: #fff;cursor: pointer; border-radius: 50%;font-size: 40px; text-align: center;}
.popVideo .pop-btn{display: flex;justify-content: space-between;padding: 20px 0 30px;}
.popVideo .pop-btn a{display: inline-block;color: #fff;transition: background 0.5s;padding: 0 77px 0 0;background:url(../images/products-comparison/icon-system.png) no-repeat right 20px center #0f9bff;background-origin: border-box;line-height: 60px;border-radius: 8px;width: 270px;text-align: center;}
.popVideo .pop-btn a b{font-size: 19px;}
.popVideo .pop-btn a:hover{background:url(../images/products-comparison/icon-system.png) no-repeat right 20px center #12bcff;}
.popVideo .pop-btn a.watch{border:2px solid #0f9bff;background: transparent;line-height: 56px;color: #0f9bff;width: 353px;text-align: center;padding: 0;}



@media (max-width: 1170px) {
	.detail{width: auto;}

	.banner-content .detail{padding: 80px 2% 0;}

	.horBar .detail{flex-wrap: wrap;}
	.horBar span{padding: 0 10px;}

	.comparBottom{padding: 0 2%;}
	
}

@media (max-width: 979px) {
	.banner-content{height: auto;}
	.banner-content .detail{display: block;}
	.banner-content .banner-left{width:auto; }
	.banner-content .banner-right{padding: 20px 0;}

	.comparContent h3{padding: 0 30px 0 10px;}
	.comparContent .comparBox table th:first-child,.comparContent .comparBox table tr td:first-child{padding-left: 10px;}

	.popularComp ul{width: 48%;}
	
}

@media (max-width: 767px) {

	/*-----------*/
	h1{font-size: 33px;}
	h1 span{font-size: 27px;}
	header{height: auto;}
	
	.prodsBox{font-size: 15px;}
	.prodsBox img{width: 75%;}
	.horBar{position: relative;}
	.horBar span{font-size: 19px;padding: 0 10px;}
	.fixProducts{height: auto;}
	.prodsBox{padding: 20px 0 5px;}
	/*-----------*/
	main{font-size: 15px;}
	.comparContent .comparBox table tr td b,.comparContent .comparBox table th{font-size: 17px;}
	
	/*.comparBox table td,.comparBox table th{word-wrap:break-word;}*/
	.comparContent .comparBox table tr td:first-child{width: 19%;}
	.comparContent .comparBox .comparOne >div:nth-child(2){}
	.comparOne h5{padding: 0 15px;font-weight: bold;font-size: 15px;color: #809eb3;text-align: left;display: block;}
	.comparBottom ul{grid-template-columns:190px auto;}
	/*-----------*/
	.popularComp .detail{display: block;}
	.popularComp ul{width: 95%; margin:0 auto;}
}

@media (max-width: 600px) {

	h1{font-size: 25px;}
	h1 span{font-size: 21px;}
	.prodBox >div{width: 100%;}
	.prodBox .prodTit h2{font-size: 21px;}
	.prodBox .prodTit img{width: 18%;padding: 0 10px;}
	.prodBox .btn a{line-height: 53px;}
	.prodBox .btn a.other{line-height: 49px;}
	
	.comparContent h3,.comparContent h4{padding: 0 15px;}
	.comparBottom ul{display: block;}
	.comparBox table{table-layout:fixed;}

	/*-----------*/
	.popularComp .detail{display: block;}
	.popularComp ul{width: 95%; margin: 0 auto;}
	/*-----------*/
	

}