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

.main01{background:url(../images/reviews/bg1.jpg) no-repeat center top #1b1b1d; height:737px;}
.main01 h1{font-size: 37px;color: #fff;padding: 65px 0 0;text-align: center;}
.main01 h2{font-size:21px;  color:#888; padding:20px 0 0 0;text-align: center;}
.main01 .t{font-size: 27px;color: #0089eb;text-align: center;margin: 50px 0 0;}
.main01 .t span{display: inline-block;padding: 0 60px 0 20px; background: url(../images/reviews/icon.png) -50px center no-repeat #323236; border-radius: 50px;line-height: 58px;}
.main01 .t img.icon{ margin: 0 -5px 0 0; }
.main01 .mess{font-size: 15px;color: #bbb;text-align: center;padding: 8px 0 0;}
.main01 .words_content{margin: 30px 160px 50px; position: relative;color: #fff;height: 320px;}
.main01 .words_content>div{position: absolute;font-size: 15px;padding: 5px 15px;border-radius: 20px;cursor: pointer;}
.main01 .words_content>div span{ display: inline-block;background: url(../images/reviews/h1.png) no-repeat;vertical-align: middle; width: 16px;height: 16px;}
.main01 .words_content>div i{font-style: normal;}
.main01 .words_content>div.s1 span{ display: inline-block;background: url(../images/reviews/h1s.png) no-repeat;vertical-align: middle; width: 14px;height: 14px;}
.main01 .words_content>div.like span{background: url(../images/reviews/h2.png) no-repeat;}
.main01 .words_content>div.like.s1 span{background: url(../images/reviews/h2s.png) no-repeat;}

.main01 .words_content .purple{border:4px solid #403c55;background: -webkit-linear-gradient(left,#b3a2fc, #74b8fc);background: -moz-linear-gradient(left,#b3a2fc, #74b8fc);background: linear-gradient(left,#b3a2fc, #74b8fc);}
.main01 .words_content .purple::before{background:url(../images/reviews/purple.png) center bottom; content: "";display: inline-block;width: 9px;height: 11px;position: absolute;bottom:-11px;left: calc(50% - 4px);}
.main01 .words_content .yellow{border:4px solid #5f3d34;background: -webkit-linear-gradient(left,#f5bc4e, #fe8260); background: -moz-linear-gradient(left,#f5bc4e, #fe8260);background: linear-gradient(left,#f5bc4e, #fe8260);}
.main01 .words_content .yellow::before{background:url(../images/reviews/yellow.png) center bottom; content: "";display: inline-block;width: 9px;height: 11px;position: absolute;bottom:-11px;left: calc(50% - 4px);}
.main01 .words_content .green{border:4px solid #3b4b61;background: -webkit-linear-gradient(left,#00d5c3, #74b8fc); background: -moz-linear-gradient(left,#00d5c3, #74b8fc);background: linear-gradient(left,#00d5c3, #74b8fc);}
.main01 .words_content .green::before{background:url(../images/reviews/green.png) center bottom; content: "";display: inline-block;width: 9px;height: 11px;position: absolute;bottom:-11px;left: calc(50% - 4px);}

.main01 .words_content .words1{left: 100px; top: 20px;}
.main01 .words_content .words2{left: 280px; top: 70px;}
.main01 .words_content .words3{left: 180px; top: 130px;}
.main01 .words_content .words4{left: 0; bottom: 50px;}
.main01 .words_content .words5{left: 370px;top: 0;}
.main01 .words_content .words6{left: 420px;top: 130px;}
.main01 .words_content .words7{left: 310px;bottom: 85px;}
.main01 .words_content .words8{left: 330px;bottom: 20px;}
.main01 .words_content .words9{right: 80px;top:75px;}
.main01 .words_content .words10{right: 150px;top: 140px;}
.main01 .words_content .words11{right: 40px;bottom: 90px;}
.main01 .words_content .words12{right: 90px;bottom: 25px;}
.main01 .words_content .s1{font-size: 15px;border-radius: 20px;padding: 5px 12px;line-height: 22px;}
.main01 .words_content .s2{font-size: 17px;border-radius: 20px;padding: 5px 15px ;}
.main01 .words_content .s3{font-size: 19px;border-radius: 20px;padding: 6px 15px;}
.main01 .words_content .s4{font-size: 21px;border-radius: 20px;padding: 6px 15px 8px;}
.main01 .words_content .s5{font-size: 23px;border-radius: 20px;padding: 7px 15px;}
.main01 .words_content .s6{font-size: 25px;border-radius: 20px;padding: 7px 15px;line-height: 25px;border-radius: 25px;}
.main01 .words_content .s7{font-size: 27px;border-radius: 20px;padding: 10px 15px; line-height: 27px;border-radius: 30px;}
.main01 .words_content .txt{display: none;z-index: 999; background:#fff0d1;line-height: 20px; position: absolute;left: -50px;top: -85px; color: #333;font-size: 15px;padding:8px 15px;border-radius: 8px; width: 240px; }
.main01 .words_content .txt var{color: #fc5e32; font-style: normal; text-decoration: underline;}
.main01 .words_content >div.focus .txt{display: block;}
.main01 .words_content >div.focus {color: #ffe75e;}
.main01 .words_content .words2 .txt{left: -100px;}
.main01 .words_content .words3 .txt{left: -90px;}
.main01 .words_content .words4 .txt{left: 0;}
.main01 .words_content .words6 .txt{left: -90px;}
.main01 .words_content .words7 .txt{left: 10px;}
.main01 .words_content .words12 .txt{left: -20px;}
.twinkle{animation: twinkleEffect 3s infinite;}

@keyframes twinkleEffect {
    0% {transform:scale(1);}
    50% {transform:scale(0.7);}
    0% {transform:scale(1);}
}

.main01 .no{text-align: center;color: #888;}
.main01 .no a{color: #0062c6;}

.Put { text-align: center;padding: 20px 0 0; }
.Put .Down { width: 190px; height: 53px; text-align: left; font-size:21px;  line-height: 25px; 
	padding: 7px 45px 0 30px; display: inline-block; cursor: pointer;  color: #fff; border-radius: 3px; }
.Put .Down em { font-size: 13px; font-weight:400; display: block; font-style: normal; }
.Put .forwin { background:url(../images/ratings/win-nineteen.png) 210px center no-repeat #78c443; margin: 0 35px 0 0;  }
.Put .forwin:hover { background:url(../images/ratings/win-nineteen.png) 210px center no-repeat #5db81d; }
.Put .formac {background:url(../images/ratings/mac-nineteen.png) 210px center no-repeat #78c443; }
.Put .formac:hover { background:url(../images/ratings/mac-nineteen.png) 210px center no-repeat #5db81d; }
/*----------*/
.main02{background: url(../images/reviews/bg2.jpg) no-repeat center bottom #e8eeef;height: 195px;text-align: center;}
.main02 h3{font-size: 23px;padding: 50px 0 30px;}
.main02 .btn{font-size: 20px;font-weight: bold;}
.main02 .btn a{display: inline-block;color: #fff;padding: 18px 40px 18px 80px;border-radius: 5px; text-decoration: none;background: url(../images/ratings/win-nineteen.png) 35px center #0fb4ff no-repeat;}
.main02 .btn a.mac{background: url(../images/ratings/mac-nineteen.png) 35px center #78c443 no-repeat;margin-left: 20px;}
.main02 .btn a:hover{background: url(../images/ratings/win-nineteen.png) 35px center #0eadf6 no-repeat;}
.main02 .btn a.mac:hover{background: url(../images/ratings/mac-nineteen.png) 35px center #73bc40 no-repeat;}
/*----------*/
.main03{background: #f9f9f9;}
.main03 h2{font-size: 37px;text-align: center;padding:60px 0 20px;}
.main03 .t{font-size: 17px;text-align: center;}
.main03 .write_btn{text-align: center;padding:5px 0 40px 0;}
.main03 .write_btn span{display: inline-block;font-size: 17px;color: #fff;padding:10px 45px 10px 60px;cursor: pointer; border-radius: 5px;  background: url(../images/reviews/w.png) no-repeat 35px center #0089eb;}
.main03 .comment_box{background: #fff;border:1px solid #eee;border-radius: 1px;color: #666; padding: 15px 0;}
.comment_box .line{width: 40%;border-top:1px solid #e6e6e6; height:0;margin:0 5%; float: left;}
.comment_box .com_line{position: relative;display: none;}
.comment_box .com_line .com_one:nth-child(3),.comment_box .com_line .com_one:nth-child(4){background:#fffcf7;}
.comment_box .com_one{display: table-cell; width: 40%;padding: 30px 5%;box-sizing: border-box;font-size: 17px;}
.comment_box .com_one:nth-child(2n){border-left: 1px dashed #e6e6e6;}
.comment_box .com_one .com_time span{color: #393737;}
.comment_box .com_one ul{padding: 10px 0;font-size: 15px;}
.comment_box .com_one ul li span{font-size: 10px;color: #d0d0d0;}
.comment_box .com_one .ques{font-size: 21px;color: #000;padding: 10px 0 10px;}
.comment_box .com_one .answer span{}
.comment_box .com_one .answer span var{color: #1795ed;cursor: pointer;font-style: normal;}
.comment_box .com_one .answer .as_more{display: none;}

.bg_grey{border-top: 1px solid #e6e6e6;}
.main03 .btn_more{text-align: center;padding: 30px 0 40px;font-size: 17px;}
.main03 .btn_more span{display: inline-block;cursor: pointer; background: url(../images/reviews/i4.png) no-repeat; width: 120px;height: 43px;padding: 12px 0 0 0;}
.main03 .btn_more .disable{color: #c6c4c4;cursor: auto;}

/*----------*/
.main04{padding-bottom: 30px;}
.main04 h1{font-size: 27px;text-align: center;padding: 40px 0 40px;}
.main04 .re_one{border:1px solid #e6e6e6;border-radius: 10px;padding: 20px 7%;font-size: 17px;margin: 0 0 20px;}
.re_one .re_pic{color: #007deb;padding: 0 0 10px;}
.re_one .re_pic >img{padding-right: 10px;}
.re_one .re_pic a{color:currentColor; text-decoration:none;}
.re_one p{font-size: 15px;color: #666;padding: 5px 0 0;}
.main04 h2{font-size:17px;}

/*----------*/
/*----------*/
/*----------*/
.main07{padding-bottom: 70px;}
.main07 .qes_one{border-bottom: 1px solid #e6e6e6;padding: 18px 7% 8px; }
.main07 .qes_one h3{font-size: 18px; background: url(../images/ratings/add.png) no-repeat right 3px;cursor: pointer; padding-bottom: 10px;}
.main07 .qes_one .qes_ans{color: #737480;display: none;}
.main07 .qes_one.focus h3{background: url(../images/ratings/min.png) no-repeat right center;}
.main07 .qes_one.focus h3 a{color:#000;}
.main07 .qes_one.focus .qes_ans{display: block;}
/*----------*/
.main08{ color:#565c63; padding-bottom:80px;}
.main08 .main08_one{width:20%; padding:0 4%; float:left; text-align:center;}
.main08 .main08_one:nth-child(2){padding:0 9%;}
.main08_one h4{font-size:15px; padding:15px 0 10px; color:#1f2833;font-weight: bold;}
/*----------*/
.phone_pop{width:90%;margin:0 auto; padding: 30px 0; background:#fbfcfe;border-radius: 10px;position: relative; }
.phone_pop .close{float: right; width: 40px; height: 40px; position: absolute;top: -20px; right: -20px; cursor:pointer;}

.phone_pop .t{font-size: 15px; font-weight: bold;text-align: center;color: #80807d;}
.phone_pop .t2{text-align: center;color: #494949;}
.phone_pop .mess{font-size: 13px;text-align: center;color: #245ccd;padding: 25px 15px;}
.phone_pop input{width:70%; margin:0 auto; display:block;   border:1px solid #c8cdd0;background: #fff; padding: 10px;}
.phone_pop .sub_email{text-align:center; padding: 15px 0 0 0;color: #fff; }
.phone_pop .sub_email span{height:38px;line-height:38px; width: 41%; cursor:pointer;font-size: 20px;display: inline-block;	background:#0fb4ff;;border-radius: 25px;}

.survey_content{background: #fff;border-radius: 8px; position: relative;width: 640px;}
.survey_content .close{position: absolute; right: -10px; top: -10px;cursor: pointer;}
.survey_content .title{background: #e3f3fa;border-radius: 8px 8px 0 0;line-height: 66px;font-size: 21px;color: #007aeb; text-align: center;}
.step1{padding: 25px 7%;}
.step1 .input_con {display: flex;justify-content:space-between; padding-bottom: 20px;}
.step1 .input_con .input_box{font-size: 17px;width: 47%;}
.step1 .input_con .input_box input{border:1px solid #e2e2e2;line-height: 32px;background: #fff;border-radius: 2px;margin: 3px 0 0; width: 100%;}
.btn{text-align: center;}
.btn span{display: inline-block;color: #fff;font-size: 17px;line-height: 42px;background: #0089eb;border-radius: 3px;width: 36%;cursor: pointer;}

.step2{padding: 0 7% 30px;color: #333;display: none;}
.step2 .t{font-size: 17px;padding: 25px 0 10px;color: #000;}
.step2 .from_box{}
.step2 input{display: none;}
.step2 input + label::before{ background: url(../images/reviews/icon3.png) no-repeat left center;content: "";display: inline-block;width: 20px;height: 20px;padding: 0 5px 0 0; vertical-align: middle; }
.step2 input:checked + label::before{background: url(../images/reviews/icon2.png) no-repeat left center;}
.step2 .from_box input + label{margin: 0 25px 0 0;}
.step2 .function_box input + label{display: inline-block;width: 100%; padding: 6px 0;}

.step3{padding: 20px 7% 30px;color: #333;display: none;}
.step3 .title_box{font-size: 17px;}
.step3 .title_box input{border:1px solid #e2e2e2;line-height: 32px;background: #fff;border-radius: 2px; margin: 5px 0 20px; width: 80%;}
.step3 .review_box{font-size: 17px;}
.step3 .review_box textarea{border:1px solid #e2e2e2;background: #fff;border-radius: 2px;margin: 5px 0 0; width: 100%;height: 100px; resize: none;}

.step4{padding: 20px 0 30px;color: #333;display: none;font-size: 17px;text-align: center;}
.step4 >img{padding-right: 10px;}
.step4 span{color: #008ff5;}


@media (max-width: 1200px) {
	.detail,.Details{width: auto; padding: 0 2%;}
	.main01 .words_content{margin:30px 20px 30px 0;}
}
@media (max-width: 979px) {
	.detail{width: auto;}
	.mobileNo{display:none;}
	/*----------*/
	.main01{height: auto;padding-bottom: 20px;}
	.main01 h1{font-size: 33px; line-height: 35px;}
	.main01 .words_content{margin:30px 0;}
	/*----------*/
	.main03 h2{font-size: 31px;padding-top: 50px;}
	/*----------*/
	.main08 .main08_one{width:30%; padding:0 2%;}
	.main08 .main08_one:nth-child(2){padding:0 ;}
	
	
	
}
@media (max-width: 880px) {
	
	.main01 .words_content .words1{left: 5%; top: 6%;}
	.main01 .words_content .words2{left: 20%; top: 80px;}
	.main01 .words_content .words3{left: 13%; top: 150px;}
	.main01 .words_content .words4{left: 0; bottom: 50px;}
	.main01 .words_content .words5{left: 35%;top: 0;}
	.main01 .words_content .words6{left: 40%;top: 90px;}
	.main01 .words_content .words7{left: 30%;bottom: 105px;}
	.main01 .words_content .words8{left: 40%;bottom: 20px;}
	.main01 .words_content .words9{right: 9%;top: 15px;}
	.main01 .words_content .words10{right: 10%;top: 90px;}
	.main01 .words_content .words11{right: 5%;bottom: 110px;}
	.main01 .words_content .words12{right: 0;bottom: 25px;}

}

@media (max-width: 767px) {
	.Put .forwin{margin: 0 0 10px;}

	.main01 h1{font-size: 30px;padding: 40px 0 0;}
	.main01 h2{font-size: 19px;}
	.main01 .t{font-size:21px;}
	.main01 .t span{padding: 0 10px; }
	.main01 .words_content{height: auto; text-align: center;}
	.main01 .words_content > div{position: relative;display: inline-block; margin: 10px 0;}
	.main01 .words_content .words1,.main01 .words_content .words2,.main01 .words_content .words3,.main01 .words_content .words4,.main01 .words_content .words5,.main01 .words_content .words6,.main01 .words_content .words7,.main01 .words_content .words8,.main01 .words_content .words9,.main01 .words_content .words10,.main01 .words_content .words11,.main01 .words_content .words12{left: auto;top: auto;bottom: auto;right: auto;}
	
	/*----------*/
	.main02 {height: auto;padding-bottom: 20px;}
	.main02 h3{font-size: 21px;}
	.main02 .btn a.mac{margin: 10px 0 0;}
	/*----------*/
	.main03 h2{font-size: 29px;padding-top: 50px;}
	.comment_box .com_one{display: block;width: auto; border-bottom: 1px dashed #e6e6e6;}
	/*----------*/
	.main04 h2{font-size: 25px;padding: 40px 0;}
	/*----------*/
	.main07,.main08{padding-bottom:40px;}
	/*----------*/
	.main08 .main08_one{width:90%; margin:0 auto; float:none; padding:10px 0;}
}
@media (max-width: 640px) {
	.survey_content{width: 96%; margin: 0 auto;}
	.step2{padding: 0 3% 20px;}
	.step2 .function_box input + label{width: auto;}
	.function_box label span{display: none;}
	.step3{padding: 20px 3%;}
}
@media (max-width: 479px) {
	.main01 h1{font-size: 23px;padding: 40px 0 0;}
	.main01 .t{font-size:17px;margin: 20px 0 0;}
	.main01 .t span{padding: 0 5px; }
	.main01 .t img{width: 30px;}
	.main01 .t img.icon{width: 10px;}
	
	/*----------*/
	.main03 h2{font-size: 25px;padding-top: 50px;}
	/*----------*/
	.main04 h2{font-size: 23px;}
	.main04 .re_one{padding: 20px 3%;}
	/*----------*/
	.main07 .qes_one{padding:18px 3% 8px;}

	.step1 .input_con{display: block;}
	.step1 .input_con .input_box{width: auto;padding-bottom: 10px;}
	.step2 .from_box input + label{width:45%;display: inline-block; margin: 0 0 10px;}
	.step2 .function_box input + label{width: 30%;}
	.step4{font-size: 14px;}
	.step4 img{width: 20px;padding-right: 0;}
	
}