
/*
 *  http://qietu.com

/*reset*/
 html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/}
 body{ color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
html{zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;} 
body{overflow-x: hidden; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{/*border-collapse:collapse;border-spacing:0;*/} fieldset,a img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/} em,i{ font-style:normal;}



/*common*/
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;}
.colwrapper { overflow:hidden; zoom:1 /*for ie*/; margin:5px auto; }
.strong{ font-weight: bold;} .left{ float: left;} .right{ float: right;} .center{ margin:0 auto; text-align:center;}
.show{ display:block; visibility:visible;}.hide{ display: none; visibility:hidden;}
.block{ display:block;} .inline{ display:inline;}
.break{ word-wrap:break-word;overflow:hidden; /*word-break:break-all;*/}

.tal{ text-align:left} .tar{ text-align:right;}

/*文字两侧对齐*/
.justify {
	text-align:justify;
	text-justify:distribute-all-lines;/*ie6-8*/
	text-align-last:justify;/* ie9*/
	-moz-text-align-last:justify;/*ff*/
	-webkit-text-align-last:justify;/*chrome 20+*/
}

.toe{
	/*超出省略号*/
	 word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
	.justify:after{
		content:".";
		display: inline-block;
		width:100%;
		overflow:hidden;
		height:0;
	}
}

  a{ color:#5d5d5e; transition: all 0.3s ease-in-out 0s;}
  a:hover{ color:#3e6ed4;}
 
body{font-family: "Microsoft YaHei",sans-serif;}

.css3{
	/*transition: all 0.3s ease-in-out 0s;*/
	
	-webkit-transform:translate3d(0, -20px, 0);
	-ms-transform:translate3d(0, -20px, 0);
	transform:translate3d(0, -20px, 0);
	
	-webkit-transition-property:opacity, -webkit-transform;
	transition-property:opacity, transform;
	-webkit-transition-duration:1000ms;
	transition-duration:1000ms;
	-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98);
	transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98);
	
	-webkit-transition-delay:800ms;
	transition-delay:800ms
}
.css3.animated{
	-webkit-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
}

body,select,input,view,text,button,textarea{
    font-family:'PingFang SC','microsoft yahei',arial,'helvetica neue','hiragino sans gb',sans-serif;
}
body{
    background-color: #19009e; color: #ffffff; font-size: 26px; padding-bottom: 195px;
}
.wrapper{
    width: 1220px; margin: 0 auto;
}
a:hover{
    text-decoration: none;
}
.opc-header{
    background: url(../images/opc-banner.jpg) no-repeat center/cover; height: 750px; display: flex; justify-content: center; 
    /*align-items: center;*/
   padding-top: 180px;
}
.opc-header__title{
text-align: center;
}
.opc-header__subtitle{
	text-align: center; margin-top: 60px;
}
.opc-header__title img{
    display: inline-block;
}
.opc-header__subtitle{
    font-size:38px; color: #ffffff; margin-top: 30px;
}
.opc-header__btn{
    margin-top: 60px;text-align: center;
}
.opc-header__btn a{
    display: inline-block; font-size: 26px;color: #fff; padding: 0 65px; background-color: #ff00ff; border-radius: 35px; 
    height: 60px; line-height: 60px;
}

.opc-header__btn a:hover{
    background-color: #dd00dd;
}
.common-title{
    margin-top: 95px; text-align: center; font-size: 40px; margin-bottom: 50px; font-weight: bold;
}
.common-title::after{
    content: ""; display: block; margin: 0 auto; width: 210px;height: 10px; border-radius: 10px; background: url(../images/opc-titbg.png) no-repeat center/cover; margin-top: 25px;
}
.opc-aobut__body{
    line-height: 1.7; margin-bottom: 40px;text-align: justify;
    font-size: 24px;
}
.opc-set__body{
 display: flex; gap:15px; margin-bottom: 40px;
}
.opc-set__body .card{
background: #0040ff;
  border-radius: 22px;padding: 40px 15px; width: 398px;
}

.opc-set-title{
    font-size: 30px; color: #ffffff;margin-bottom: 20px; font-weight: bold; line-height: 1.5;
}
.opc-set__body .card:nth-child(2){
     background: #9f60ff;
}
.opc-set__body .card:nth-child(3){
     background: #ff00ff;
}
.opc-set-desc{
    font-size: 22px; line-height: 1.6;text-align: justify;
}
.opc-rule__body{
      background: #3400ec;
       border-radius: 36px;padding: 60px 40px;
     line-height: 1.6; text-align: justify; margin-bottom: 40px; 
      font-size: 24px;
}

.opc-plan__body{
   margin-bottom: 40px; padding-top: 30px;
}
.opc-plan__body ul{
 display: flex; gap: 12px; border-top: 2px solid #ffffff; padding-top: 60px;
}
.opc-plan__body li{
    background-color: #007aff; border-radius: 20px; width: 295px;padding: 0 20px ; color: #fff;display: flex;flex-wrap: wrap;   justify-content: center;  align-content: space-between; text-align: center; height: 375px; position: relative;
}
.opc-plan__body li::before{
    content: "";width: 45px; height: 45px; border-radius: 50%;  display: block;
    position: absolute ; left: 50%; top: -81.5px; margin-left: -21.5px; border: 12px solid #007aff; background: #fff;
}
.opc-plan__body li::after{
     content: ""; display: block; position: absolute; top: -24px;
       width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom:25px solid #007aff;
}
/* 1 报名 渐变：#20d8ff(顶) → #007aff(底) */
.opc-plan__body li:nth-child(1){
    background:#007aff !important;
}
.opc-plan__body li:nth-child(1)::after{
    border-bottom-color:#007aff !important ;
}
.opc-plan__body li:nth-child(1)::before{
   border-color: #007aff !important;
}

.opc-plan__body li:nth-child(2){
    background:#0000ff !important;
}
.opc-plan__body li:nth-child(2)::after{
    border-bottom-color:#0000ff !important ;
}
.opc-plan__body li:nth-child(2)::before{
   border-color: #0000ff !important;
}

.opc-plan__body li:nth-child(3){
   background:#8000ff !important;
}
.opc-plan__body li:nth-child(3)::before{
   border-color: #8000ff !important;
}
.opc-plan__body li:nth-child(3)::after{
    border-bottom-color:#8000ff !important ;
}

.opc-plan__body li:nth-child(4){
     background:#ff00ff !important;
}
.opc-plan__body li:nth-child(4)::after{
    border-bottom-color:#ff00ff !important ;
}
.opc-plan__body li:nth-child(4)::before{
   border-color: #ff00ff !important;
}

.opc-plan__body h4{
    font-size: 40px; padding-top: 70px; width: 100%;
}
.opc-plan__body h3{
    font-size:34px; font-weight: bold; padding-bottom: 115px; width: 100%;
    margin-top: 30px;
    height: 130px;
    display: flex; align-items: center; justify-content: center;	
}
.opc-plan__body p{
    margin-top: 40px;
}

.opc-award__body{
	padding: 45px 15px 65px 15px;
	border-radius: 26px;
	 background: #3400ec;
	 position: relative;
}
.opc-award__tip{
    font-size: 18px; line-height: 1.6; margin-top: 28px; 
}
.opc-award__body .tit{
	font-size: 44px; text-align: center;
}
.opc-award__body .tit strong{
	color: #00ffff;
}
.opc-award__body .subtit{
    text-align: center; font-size: 18px; margin-top: 10px;
}
.opc-award__body .item{
	margin-top: 45px; text-align: center;
}
.opc-award__body .item__hd h2{
	
	height: 65px;
	line-height: 65px;
	padding: 0 36px;
	background: #ff00ff;
	border-radius: 65px;
	color: #fff;
	font-weight: bold;
	display: inline-block;
}
.opc-award__body .item__hd p{
	margin-top: 15px; font-size: 24px;
}
.opc-award__body .item__bd{
	margin-top: 50px;
}
.opc-award__body .item__bd ul{
	display: flex; justify-content: space-around;
	flex-wrap: wrap;
}
.opc-award__body .item__bd li{
	width: 47%; 

	text-align: center;
}

.opc-award__body .item__bd li h3{
	font-size: 40px; 
}
.opc-award__body .item__bd li h3 i{
	display: inline-block;
	width: 46px; height: 46px; line-height: 46px;
	text-align: center; color: #fff;
	background: #ff00ff;
	font-size: 22px; border-radius: 46px;
	margin-left: 15px;
	vertical-align: middle;
	position: relative; top: -2px;
}
.opc-award__body .item__bd li h2{
	font-size: 58px; font-weight: bold; color: #00ffff;
}

.opc-award__body .item__bd li h4 small{
	display: block; font-size: 24px; font-weight: normal;
}
.opc-award__body .tip{
	margin-top: 65px; font-size: 24px; line-height: 1.6;
}

.opc-adv__body{
	padding: 60px 45px;
	border-radius: 22px; background: #3400ec;
	color: #fff; font-size: 24px; line-height: 1.6; 
}

.opc-adv__body blockquote{
	 /*background: rgba(255,255,255,0.1);*/
	background: linear-gradient(0deg, #4c41cc, #4451d3);
	 position: relative;
	 padding: 30px;
	 border-radius: 30px 0 30px 0;
	 margin-bottom: 30px;
	 font-size: 24px; line-height: 42px;
}
.opc-adv__body blockquote i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
    background: linear-gradient(90deg, #23d6ff, #2b4ffb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  margin-right: 16px;
  position: absolute; left: -65px;
}
.opc-cotnact__body{ 
	background: #3400ec;
	color: #fff;
	border-radius: 22px;
	padding: 70px 60px 50px;
	display: flex;
	justify-content: space-between;
	
}
.opc-cotnact__body .txt{
	font-size: 30px;
	line-height: 85px;
	margin-top: -25px;

}
.opc-cotnact__body .img img{
	width: 200px;
	border-radius: 10px;
}



/*-----*/
.opc-header{ background-color: #0a23ff;}
	.wow{visibility: hidden;}
	.opc-plan__body li::after{top: -22px;}
	.opc-plan__body li:hover::after{transition: all 0.2s; top: -24px;}


@media (max-width:1250px) {
    /* ========== 原来1250断点全部代码放这里 ========== */
    .wrapper{
        width: 90%;
    }
    body{
        padding-bottom: 50px;font-size: 20px;
    }
    .opc-header{
        height: 650px;
    }
    .opc-header__title img{

    }
    .opc-header__btn{
        margin-top: 60px;
    }
    .opc-header__btn a{
        font-size: 18px; padding: 0 40px; height: 40px; line-height: 40px;
    }
    .common-title{
        font-size: 22px;margin-top:65px;    margin-bottom: 35px;
    }
    .common-title::after{
        width: 80px; height: 4px;margin-top: 12px;
    }
    .opc-set-title{
        font-size: 18px;margin-bottom: 15px;
    }
    .opc-set-desc{
		font-size: 16px; line-height: 1.7;
    }
    .opc-plan__body ul{
        padding-top: 35px;
    }
    .opc-plan__body li{
        padding: 0 10px; height: auto;
    }
    .opc-plan__body li::after{
            border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 15px solid #fea067;    top: -14px;
    }
    .opc-plan__body li::before{
        width: 25px; height: 25px; margin-left: -12.5px;top: -48.5px;border-width: 6px;
    }
    .opc-plan__body h4{
        font-size: 18px; padding-top: 20px;
    }
    .opc-plan__body h3{
        font-size: 16px; padding-bottom: 20px; height: auto; margin-top: 10px;
    }
    .opc-plan__body li:hover::after{
        top: -15px;
    }
    .opc-set__body{
        flex-wrap: wrap;
    }
    .opc-set__body .card{
        padding: 20px 20px; border-radius: 16px; width: 49%;
    }
    .opc-rule__body{
         padding: 20px 20px; border-radius: 16px; font-size: 16px;
    }
    .opc-rule__body::before{
    	border-radius: 16px;
    transform: scale(1.001);
    }
    .opc-rule__body blockquote{
    border-radius: 20px 0 20px 0;
    font-size: 16px; line-height: 1.8; padding: 15px;
    }
    .opc-rule__body blockquote i{
    	width: 30px; height: 30px; left: -30px; font-size: 14px;
    }
    .opc-award__body .tit{
        font-size: 20px;
    }
    .opc-award__body .subtit{
        font-size: 14px; margin-top: 5px;
    }
    .opc-award__tip{
       font-size: 14px;  margin-top: 20px;
    }
    .opc-award__body{
        padding: 20px 20px; border-radius: 16px;
    }
    .opc-award__body::before{
    	
    border-radius: 16px;
    transform: scale(1.001);
    }
    .opc-award__body .item{
        margin-top: 40px;
    }
    .opc-award__body .item__hd h2{
        height: 45px; line-height: 45px;
    }
    .opc-award__body .item__hd p{
        font-size: 16px;
    }
    .opc-award__body .item__bd{
        margin-top: 35px;
    }
    .opc-award__body .item__bd li{
        padding-left:5%;
    }
    
    .opc-award__body .item__bd li h3{
        font-size: 16px;
    }
    .opc-award__body .item__bd li h3 i{
        font-size: 12px; width: 24px; height: 24px; line-height: 24px; margin-left: 5px;
    }
    .opc-award__body .item__bd li h2{
        font-size: 22px;
    }
    .opc-award__body .item__bd li h4{
        font-size: 18px; padding-left: 20px; background-size: 15px auto;
    }
    .opc-award__body .item__bd li h4 small{
        font-size: 16px;
    }
    .opc-award__body .tip{
        font-size: 18px;
    }
    .opc-adv__body{
          padding: 25px 20px; border-radius: 16px; font-size: 16px;
    }
    .opc-adv__body blockquote{
    	padding: 15px; font-size: 16px; line-height: 1.8;
    border-radius: 20px 0 20px 0;

    }
    .opc-adv__body blockquote i{
    	    width: 30px;
    height: 30px;
    left: -30px;
    font-size: 14px;
    }
    .opc-adv__body .tit{
        height: 45px; line-height: 45px;
    }
    .opc-adv__body .desc{
        font-size: 18px; margin-top: 22px;
    }
    .opc-adv__body li{
        margin-bottom: 40px;
    }
    .opc-cotnact__body{
        padding: 25px 20px; border-radius: 16px;
    }
    .opc-cotnact__body .txt{
        font-size: 22px;
    }
    .opc-cotnact__body .img img{
        width: 150px;
    }

    /* ========== 下面保留你原有780覆盖样式，自动覆盖上面重复属性 ========== */
    .opc-header__title img{
		max-height: 100px;
    }

    .opc-header{
        height: 400px;
        padding-top: 100px;
    }
    .opc-header__subtitle{
    	margin-top: 20px; font-size: 20px;
    }
    .opc-header__subtitle img{
    	height: 30px;
    }
    .opc-header__btn {
        margin-top: 20px;
    }
    .opc-header__btn a{
        font-size: 18px;
    }
    .opc-aobut__body{
        font-size: 16px; line-height: 2;
    }
    .opc-set__body{
        display: block;
    }
    .opc-set__body .card +.card{
        margin-top: 20px;
    }
    .opc-set__body .card{
        width: 100%;
    }
    .opc-plan__body{
        padding-top: 0;
    }
    .opc-plan__body ul{
        border-left: 1px solid #999999;  border-top: 0;padding-top: 0; padding-left: 20px; display: block; margin-left: 10px;
    }
    .opc-plan__body li{
        width: 100%;
    }
    .opc-plan__body li + li{
        margin-top: 15px;
    }
    .opc-plan__body li::before{
        margin-left: 0; left: -35px; top: 50%; margin-top: -15px;
    }
    .opc-plan__body li::after{
        display: none;
    }
    .opc-award__body .item__bd ul{
        display: flex; flex-wrap: wrap; gap: 3%;
    }
    .opc-award__body .item__bd li{
        width: 45%;  border-right: 0; padding-bottom: 20px;  text-align: center; padding-left: 0;
    }
    .opc-award__body .item__bd li h4{
        display: inline-block; text-align: left;
    }
    .opc-award__body .tip{
        margin-top: 30px;
    }
    .opc-cotnact__body{
        display: block;
    }
    .opc-cotnact__body .txt{
        line-height: 1.6; font-size: 18px; margin-top: 0;
    }
    .opc-cotnact__body .img img{
        width: 120px;margin: 15px auto; display: block;
    }
}

@media (max-width: 768px) {
    .opc-plan__body li {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 100px;
        padding: 24px 12px;
    }
    .opc-plan__body h4,
    .opc-plan__body h3 {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        white-space: nowrap;
    }
    .opc-plan__body h4 {
        font-size: 18px;
    }
    .opc-plan__body h3 {
        font-size: 17px;
    }
    .opc-plan__body h3 br {
        display: none;
    }
}
