.wid {max-width:1920px; width:100%; margin:0 auto; padding:0 60px;}
@media screen and (min-width:1920px) {
	.wid {max-width:100%;}
}

.rules {padding:60px 90px 90px 90px;  }
.rules:after {content:''; clear:both; display: table;}

.rules h3 {font-size:14px; color:#d7d7d7; }
.rules h2 {font-size:25px; margin-top:12px; color:#111; font-weight:500;}

.rules .tab {position: absolute; width:380px; right:90px; top:75px;}
.rules .tab li {float:left; width:calc((100% - 20px) / 3); margin-right:10px;}
.rules .tab li:last-child {margin-right:0;}
.rules .tab li a {display: inline-block; width:100%; font-size:15px; text-align: center; padding:10px 0; color:#777; background:#f6f6f6; border-radius:50px;}
.rules .tab li.on a {background:#111; color:#fff; }
.rules .tab:after {content:''; clear:both; display: table;}

.rules .type {margin-top:35px; }
.rules .type:after {content:''; clear:both ;display: table;}
.rules .type li {float:left; width:50%; height:56px; line-height:54px; border-top:2px solid #eee; border-bottom:2px solid #eee; font-size:19px; color:#888; font-weight:500; text-align: center; cursor: pointer;}
.rules .type li.on {border-top:2px solid #111; border-bottom:2px solid #111; color:#111; font-weight:600;}

.rules h4 {margin-top:30px; font-size:18px; color:#111; font-weight:800;}
.rules h4:before {content:url('../img/list_icon.svg'); margin:0 7px 0 0; position: relative; top:3px;}

.rules .box1 {margin-top:20px;}
.rules .box1 li:after {content:''; clear:both; display: table;}
.rules .box1 li {border-bottom:1px solid #e4e4e4; padding:12px 0;}
.rules .box1 li:first-child {border-top:1px solid #111;}
.rules .box1 li:last-child {border-bottom:1px solid #111;}

.rules .box1 li .tit {float:left; width:260px; font-size:16px; color:#111; font-weight:300; padding-top:10px;}
.rules .box1 li .tit b {font-weight:700;}
.rules .box1 li .img {float:left; width:256px; height:181px; background:url('../img/ru_img1.jpg')no-repeat center; background-size:cover; aspect-ratio: 256 / 181}
.rules .box1 li .txt {float:left; width:calc(100% - 516px); padding-left:30px;}
.rules .box1 li .txt p {font-size:15px ;color:#333; font-weight:300; padding-left:17px; margin-top:10px; position: relative;}
.rules .box1 li .txt p b {position: absolute; left:0; top:0; font-weight:300;}
.rules .box1 li .txt .col_box {background:#f8f8f8; padding:15px 20px; font-size:14px; color:#777; margin-top:15px; border-radius:10px;  margin-left:-3px; width:calc(100% + 3px);}
.rules .box1 li .txt .col_box strong {color:#333; font-weight:600; display: inline-block; width:100%; margin-bottom:5px;}

.rules .box1 li:nth-child(2) .img {background:url('../img/ru_img2.jpg')no-repeat center; background-size:cover;}

.rules .box1 li:nth-child(3) .img {background:url('../img/ru_img3.jpg')no-repeat center; background-size:cover;}
.rules .box1 li:last-child .txt p {padding-left:0; margin-top:35px;}
.rules .box1 li:last-child .txt .col_box {margin-top:30px;}

.rules .box2 {margin-top:40px; margin-bottom:50px;}
.rules .box2:after {content:''; clear:both; display: table;}
.rules .box2 div {float:left; width:Calc((100% - 35px) / 2); }
.rules .box2 div:last-child {float:right;}
.rules .box2 div {border:1px solid #ddd; border-radius:15px; padding:70px 25px 25px 25px; position: relative; height:165px;}
.rules .box2 div p {font-size:17px; color:#fff; background:#111; padding:8px 20px 8px 23px; border-radius:0 5px 5px 0; position: absolute; left:0; top:18px; font-weight:600;}
.rules .box2 div span {display: inline-block; width:100%; font-size:15px; color:#333; line-height:1.5em;}

.rules h5 {font-size:15px; color:#333;  font-weight:400; margin-top:10px; padding-left:24px; line-height:1.4em;}
.rules h5 b {color:#111;}
.rules .box3 {margin-top:20px; padding-left:24px;}
.rules .box3:after {content:''; clear:both; display: table;}
.rules .box3 li {position: relative; padding:15px 20px 15px 102px; background:#f8f8f8 ;border-radius:10px; width:calc((100% - 40px) / 3); margin-right:20px; height:92px; float:left;}
.rules .box3 li:last-child {margin-right:0;}
.rules .box3 li:after {content:''; clear:both; display: table;}
.rules .box3 li img {position: absolute; left:20px ; top:15px;}
.rules .box3 li p {font-size:15px; color:#111; font-weight:500; margin-top:10px;}
.rules .box3 li span {display: inline-block; width:100%; margin-top:5px; font-size:15px; color:#777; font-weight:400;}

.rules .p_txt {padding-left:104px; position: relative; font-size:15px; color:#333; line-height:1.5em; margin-top:20px; font-weight:300;}
.rules .p_txt b {position: absolute; left:24px; top:0px; font-size:15px ;color:#111; font-weight:600;}
.rules .p_txt b:after {content:''; position: absolute; right:-19px; top:4px; height:15px; width:1px; background:#d3d3d3;}

.rules .pro_cont {border:1px solid #ddd; border-radius:15px; position: relative; padding:15px 0 15px 130px; margin-top:20px; margin-left:24px;}
.rules .pro_cont b {position: absolute; left:0; top:15px; font-size:16px; color:#fff; font-weight:600; padding:8px 15px; border-radius:0 5px 5px 0; background:#111;}
.rules .pro_cont .pro_box:after {content:''; clear:both; display: table;}
.rules .pro_cont .p_box {float:left; width:127px; height:127px; background:url('../img/rules2_img1.png')no-repeat center; background-size:cover; border:7px solid #eee; display: flex; position: relative; border-radius:50%; justify-content: center; align-items: center; margin:10px 42px 10px 0;}
.rules .pro_cont .p_box:before {content:url('../img/rules2_img2.svg'); position: absolute; right:-42px; top:50%; transform: translate(0,-50%);}
.rules .pro_cont .p_box:last-child {margin-right:0; border-color:#111; background:#FFF;	}
.rules .pro_cont .p_box:last-child p {color:#111;}
.rules .pro_cont .p_box:last-child:after {border-color:#111;}
.rules .pro_cont .p_box:last-child:before {content:none;}
.rules .pro_cont .p_box p {text-align: center; font-size:16px; color:#333; line-height:1.3em; font-weight:500;}
.rules .pro_cont .p_box:after {content:''; position: absolute; left:-11px; top:-11px; width:calc(100% + 22px); height:calc(100% + 22px); border:1px solid #ebebeb; border-radius:50%;}


@media screen and (max-width:1600px) {
	.rules .pro_cont {padding:36px 0 10px 20px}
	.rules .pro_cont b {top:-1px; left:-1px; border-radius:5px 5px 5px 0;}
}


@media screen and (max-width:1500px) {
	.rules {padding:50px 60px;}
	.rules .tab {right:60px;}
	.rules .box1 li .tit {width:140px;}
	.rules .box1 li .img {width:235px;}
	.rules .box1 li .txt {width:calc(100% - 375px)}

	.rules .box2 div span br {display: none;}

	.rules .pro_cont .p_box {width:110px; height:110px; margin-right:32px;}
	.rules .pro_cont .p_box p {font-size:15px; }
	.rules .pro_cont .p_box:before {transform: scale(0.8); right:-36px; top:36%;}
}


@media screen and (max-width:1200px) {
	.wid {padding:0 25px;}
	.rules {padding:40px 40px;}
	.rules .tab {right:40px;}
	.rules .box1 li .img {display: none;}
	.rules .box1 li .txt {width:calc(100% - 140px)}
	.rules .box2 div {height:185px;}

	.rules .box3 li {padding:15px 15px 15px 98px;}
	.rules .box3 li span {font-size:14px;}
}

@media screen and (max-width:1024px) {
	.rules .tab {position: relative; right:0; top:0; width:100%; margin-top:25px;}

	.rules .box2 div {width:100%; height:auto; margin-top:20px;}
	.rules .box2 {margin-top:20px;}

	.rules .box3 li {width:100%; margin-bottom:10px;}
	.rules .p_txt {margin-top:10px;}
}



@media screen and (max-width:767px) {
	.wid {padding:0 0px;}
	.rules h2 {margin-top:0px; position: fixed; z-index: -1; top:127px; left:0; width:100%; color:#fff; text-align: center; }
	.rules h3 { margin-top:0px; position: fixed; z-index: -1; top:106px; left:0; width:100%; color:#fff; text-align: center; font-weight:500; color:rgba(255,255,255,.8)}
	.rules .tab {margin-top:0;}
	.rules .tab li a {font-size:14px;}
	.rules {padding:30px 25px 60px 25px;}

	.rules .box1 li {padding:10px 0;}
	.rules .box1 li .tit {width:100%; font-size:17px; }
	.rules .box1 li .img {width:100%; display: block; margin-top:15px; height:150px; border-radius:10px;}
	.rules .box1 li .txt {width:100%; padding-left:0; margin-top:10px;}
	.rules .box1 li .txt p {font-size:14px; line-height:1.4em;}
	.rules .box1 li .txt .col_box {line-height:1.4em;}

	.rules .box2 div {padding:60px 20px 18px 20px; margin-top:12px;}
	.rules .box2 div p {font-size:15px; top:12px;}
	.rules .box2 div span {font-size:14px;}

	.rules h5 {font-size:14px; line-height:1.5em;}

	.rules .p_txt {font-size:14px; }
	.rules .p_txt br {display: none;}

	.rules .box3 {margin-top:15px;}
	.rules .box3 li {height:80px; padding:11px 15px 15px 86px;}
	.rules .box3 li img {width:50px;}

	.rules .type li {font-size:14px; height:45px; line-height:43px;}
	.rules .pro_cont .p_box {width:calc((100% - 64px) / 2); padding-top:calc((100% - 92px) / 2); height:auto; margin:10px 32px 5px 0;}
	.rules .pro_cont .p_box p {position: absolute; left:0; top:0; width:100%; height:100%; display: flex; justify-content: center; align-items: center; font-size:3.7vw;}
}