html,body,h1,h2,h3,h4,h5,h6,div,p,header,ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: "PingFang SC";
  font-family: 'Microsoft YaHei'\9;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

ul,li,span,button {
  -webkit-tap-highlight-color: transparent;
}

li {
  list-style: none;
}

html,body {
  height: 100%;
  min-width: 1280px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} 

.container {
  background: 
    /* url('//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/bg_pic@2x-cc4e3f1f5a.png') 20% 70%/160px 200px no-repeat, */
    linear-gradient(44deg,rgba(49,35,174,1) 0%,rgba(6,169,255,1) 58%,rgba(0,199,212,1) 100%);
  background-color: rgba(6,169,255,1);
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

header {
  height: 649px;
  background: url('//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/banner_web-c751046caa.png') no-repeat center, right top;
  background-size: 1919px 649px;
  background-position-x: 50%;
  margin: auto;
}

footer {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  padding: 20px 0 14px;
}

.main {
  width: 1100px;
  min-height: 900px;
  border-radius: 12px;
  background: #fff;
  margin: auto;
  margin-top: -149px;
  position: relative;
}

.main::before, .main::after {
  content: '';
  background: url(//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/bg_pic@2x-cc4e3f1f5a.png) no-repeat;
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: contain;
  left: -120px;
  top: 750px;
}

.main::after {
  left: 1025px;
  right: -120px;
  top: 420px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.plan, .rule, .account {
  display: none;
}

.show {
  display: block;
}

.main .tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 100px;
  border-bottom: 1px solid #E5E9F4;
}

.main .tab li {
  width: 160px;
  height: 64px;
  line-height: 64px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-weight: normal;
}

.tab-active ,.main .tab li:hover {
  color: #00AEEF;
  font-weight: bold;
  /* border-bottom: 5px solid #00AEEF; */
}

.main .tab .tab-active::after ,.main .tab li:hover::after {
  content: '';
  width: 100%;
  height: 5px;
  background: linear-gradient(78deg,rgba(6,169,255,1) 0%,rgba(0,199,212,1) 100%);
  background-color: rgba(6,169,255,1);
  border-radius: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.main .content {
  padding: 0 98px 80px;
  color: #253545;
}

.content h3 {
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  margin: 100px 0 35px;
  text-align: center;
  position: relative;
}

.content h3::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 40px;
  background: url('//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/figure@2x-982ff8dd66.png') no-repeat;
  background-size: contain;
  top: -28px;
  left: calc(50% - 65px);
}

.content p {
  font-size: 14px;
  line-height: 25px;
}

.plan .intro p {
  margin-bottom: 14px;
  text-indent: 32px;
}
.plan .intro p.strong {
  font-size: 16px;
  font-weight: bold;
  margin-top: 25px;
}

.plan .profit{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.plan .profit-item {
  width: 289px;
  height: 215px;
  border-radius: 8px;
  background: #F3FAFE;
  margin-bottom: 40px;
  text-align: center;
}

.plan .col-2 {
  width: 440px;
}

.plan .outter .col-2  {
  width: 100%;
}


.plan .profit-item img {
  width: 100px;
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
  margin: 30px 0 15px;
}

.plan .profit-item p {
  text-align: center;
  padding: 0 15px;
  line-height: 20px;
}


/* .account .detail-item-container {
  border-bottom: 10px solid #F3FAFE;
} */
.account h4 {
  font-weight: normal;
  text-align: center;
  color: #132333;
  position: relative;
  margin-bottom: 45px;
  margin-top: 65px;
}

.account h4:first-child {
  margin-top: 30px;
}

.rule .detail{
  width: 700px;
  margin: auto;
  text-indent: 32px;
}
.rule h3 {
  margin-top: 150px;
}
.rule h4 {
  text-indent: 18px;
}
.rule h3:first-child {
  margin-top: 100px;
}


.account h4::after, 
.rule h3::after {
  content: '';
  display: inline-block;
  position: relative;
  height: 10px;
  background: #f3fafe;
  width: 1100px;
  left: -98px;
  top: -80px;
}

.rule h3::after {
  top: -120px;
}

.account h4:first-child::after,
.rule h3:first-child::after{
  display: none;
}

.user-head-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* justify-content: space-between; */
}

.user-head-container .user-head {
  width: 180px;
  max-height: 160px;
  text-align: center;
  margin-bottom: 40px;
}

.user-head img {
  width: 85px;
  height: 85px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
  /* margin-top: 25px; */
  border: 1px solid #E5E9F4;
  margin-bottom: 10px;
}

.user-head p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  vertical-align: top;
}

.rule .detail {
  line-height: 25px;
}

.rule h4 {
  font-size: 18px;
  margin: 15px 0;
}

.rule h5 {
  font-size: 14px;
  margin: 15px 0;
}

.rule p {
  font-size: 14px;
  margin: 15px 0;
}

.content .to-search-pc {
  position: absolute;
  bottom: 20px;
  font-size: 12px;
  text-align: center;
  width: 900px;
}

.to-search-pc a {
  color: #105193;
}

.to-search-mobile {
  display: none;
}
@media (max-width: 420px){
 
html,body {
  min-width: 100vw;
  height: 100vh;
}

.container {
  padding: 0;
}

header {
  height: 50vh;
  background: url('//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/banner_ph@4x-0dd92b9a84.png') no-repeat;
  background-position-x: 0;
  background-size: contain;
}

footer {
  padding: 6.5vw 0 3vw;
}

.main {
  width: 100vw;
  min-height: 73vh;
  background: transparent;
  margin-top: -27vh
}

.br-pc {
  display: none;
}

.main::before, .main::after {
  display: none;
}

.main .tab {
  padding: 0 4vw;
  border-bottom: none;
  margin-bottom: 6vw; 
}

.main .tab li {
  width: 64px;
  height: 50px;
  font-size: 16px;
  color: #fff;
  /* font-weight: lighter; */
}


.main .tab li.tab-active, .main .tab li:hover {
  /* border-color: #fff; */
  color: #fff;
  font-weight: normal;
}


.main .tab li.tab-active::after, .main .tab li:hover::after {
  background: #fff; 
}

.main .content {
  padding: 0 4vw;
  color: #105193;
}

.content h3::before {
  display: none;
}

.content h3{
  margin: 7vw 0 4vw;
  color: #FFFFFF;
  font-size: 18px;
}

.content h3 .white-dot {
  display: inline-block;
  width: 2vw;
  height: 2vw;
  background: #fff;
  border-radius: 50%;
  margin-right: 3vw;
  vertical-align: top;
  margin-top: 2.5vw;
}
.content h3 .white-dot:last-of-type {
  margin-left: 3vw;
  vertical-align: top;
  margin-top: 2.5vw;
}

.content h3::after{
  left: 65vw;
}

.content p {
  line-height: 25px; 
}

.content .detail {
  border-radius: 10px;
  background: #fff;
  padding: 2vw 5vw 4vw;
  position: relative;
}

.content .detail::before {
  content: "";
  position: absolute;
  width: 2vw;
  height: 2vw;
  background: #00AEEF;
  border-radius: 50%;
  left: 2vw;
}

.content .detail::after {
  content: "";
  position: absolute;
  width: 85vw;
  height: 10vw;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  top: -3vw;
  left: 3.5vw;
}

.plan .intro > p{
  margin-top: 3vw;
  font-size: 15px;
  line-height: 25px;
  color: #7388AA;
  text-align: justify;
  text-indent: 0;
}
.plan .intro p.strong{
  margin-top: 4vw;
  font-weight: 500;
  color: #105193;
}


.content .plan h3:first-of-type {
  display: none;
}

.content .plan .profit.detail {
  padding: 2vw 0 0;
}



.plan .profit-item {
  width: 92vw;
  height: 23vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 5vw;
  border-radius: 0;
  margin: 0;
}

.profit-item:first-child{
  border-radius: 20px 20px 0 0;
}

.profit-item:last-child{
  border-radius: 0 0 20px 20px;
}

.profit-item:nth-child(2n+1){
  background: #fff;
}

.plan .profit-item img {
  width: 15vw;
  height: 15vw;
  margin: 0;
}

.plan .profit-item p {
  width: 72vw;
  text-align: justify;
  padding: 0 0 0 4.5vw;
  font-size: 13px;
  line-height: 21px;
}

.account h4 {
  color: #105193;
  letter-spacing: 2px;
  position: relative;
  margin-top: 11vw;
  margin-bottom: 0;
}

.account h4:first-child {
  margin-top: 8vw;
  margin-bottom: 4.1vw;
}

.account h4::before {
  content: '';
  position: absolute;
  width: 20vw;
  height: 5vw;
  background: url('//staticimg.yidianzixun.com/modules/mp/images/sunnyPlan/figure2@3x-bcf82372af.png') no-repeat;
  background-size: contain;
  top: -5vw;
  left: calc(50% - 10vw);
}

.account h4::after {
  width: 92vw;
  left: -5vw;
  top: -20vw;
  height: 5px;
}

.user-head-container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.user-head-container .user-head {
  width: 20vw;
  height: 25vw;
  text-align: center;
  margin-bottom: 6.6vw;
}

.user-head img {
  width: 14.5vw;
  height: 14.5vw;
  margin-bottom: 2.4vw;
}

.user-head p {
  line-height: 15px;
  /* text-align: left; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 18vw;
  height: 30px;
  font-size: 12px;
}


.rule .detail {
  width: 92vw;
  line-height: 25px;
  text-indent: 0;
}

/* .rule h3 {
  margin: 2vw 0 2vw;
} */

.rule h3::after {
  display: none;
}

.rule h3:first-child {
  margin-top: 7vw;
}

.rule h4 {
  font-size: 17px;
  margin: 3vw 0;
  text-indent: 0;
}

.rule h5 {
  font-size: 16px;
  font-weight: normal;
  margin: 3vw 0;
}

.rule p {
  font-size: 15px;
  color: #7388AA;
  margin: 3vw 0;
}

.to-search-pc {
  display: none;
}


.btn.to-search-mobile {
  display: inline-block;
  background: #00AEEF;
  border-radius: 10px;
  height: 11.7vw;
  width: 92vw;
  line-height: 11.7vw;
  text-align: center;
  color: #fff;
  text-decoration: none;
  margin-top: 5vw;
}

.btn:active {
  background: #0198D0;
}

}

@media (max-width: 420px){
.user-head-container{
  display: block;
}
.user-head-container .user-head {
  display: inline-block;
}
.content .profit {
  display: block;
}
.plan .profit-item p {
  padding: 0 4.5vw;
}
}