@media screen and (max-width:1300px) {

  .container {



    padding: 12px;

    width: 100%;

    box-sizing: border-box;



  }

  .selection9 .list .index {
    height: 50px;
    line-height: 50px;
    width: 50px;
    font-size: 32px;
  }



  .selection4 .more {



    padding: 10px;



    flex-direction: column;



  }



  .selection4 .more img {



    width: 100%;



  }



  .class1,



  .class2 {



    padding: 30px 10px;



    background-color: #d7c8b0;



  }



  .grid3 {



    flex-direction: column;



    gap: 40px;



  }



  .grid3 .item {



    display: flex;



    /* flex-direction: column; */



    align-items: center;



    justify-content: center;



  }



  .grid3 .item .n {



    width: 60vw;



    height: 60vw;



    border-radius: 50%;



    background-color: #ffffff;



    border: solid 4px #ccbca2
  }



  .grid3 .item .n img {



    width: 60%;



    height: unset;



  }



  .grid5 img {



    max-width: 80%;



  }



  .selection9 .list {



    padding: 20px;



  }



  .selection9 .list .item {



    flex-direction: column;



    justify-content: center;



    align-items: center;



  }



  .selection9 .list .t5 {



    font-size: 24px;



  }



  .selection9 .list .t7 {



    font-size: 18px;



  }



  .users {



    padding: 20px 10px;



  }



  .users .avatar .photo img {



    width: 50px;



  }



  .users .avatar {



    font-size: 16px;



  }



  .users .avatar>img {



    height: 40px;



  }



  .users .text2 {



    font-size: 16px;



    line-height: 24px;





  }



  .module .title {



    padding: 15px;



    font-size: 28px;



    line-height: 40px;



  }



  .module {



    margin: 10px 0;



  }



  .grid11 {



    padding: 10px;



  }



  .grid11 .item .q {



    padding: 10px;



    font-size: 18px;



  }



  .users .item {



    padding: 15px 0;



  }



  .users .avatar {



    padding-bottom: 10px;



  }



  .grid11 .item .anser {



    padding: 15px;



  }



  .grid11 .item .anser {



    font-size: 16px;



    line-height: 24px;



  }



  .grid8 {



    gap: 15px;



    padding: 15px;



    grid-template-columns: repeat(1, 1fr);



  }



  .grid8 .tx {



    font-size: 20px;



    padding: 15px;



  }



  .grid8 .tx .d4 {



    font-size: 16px;



    line-height: 24px;



  }



  .grid7 .item {



    flex-direction: column;



    align-items: center;



  }



  .grid7 .item .img3 {



    width: 50%;



    padding-right: 0;



    margin-right: 0;



    border-right: unset;



    padding: 20px 0;



    border-right: unset;



  }



  .grid7 .item .t3 {



    font-size: 24px;



    text-align: center;



  }



  .grid7 .item .d3 {



    font-size: 16px;



    text-align: center;



    line-height: 36px;



  }



  .grid7 .item .img3 img {



    width: 100%;



    height: unset;



  }



  .grid7 .item {



    padding: 20px;



    margin-bottom: 15px;



  }



  .title2 .des2 {



    padding-top: 20px;



    font-size: 18px;



    line-height: 40px;



  }



  .title2 .t2 {



    padding: 10px;



    font-size: 20px;



    line-height: 30px;



  }



  .grid6 {



    flex-direction: column;



    padding: 20px 0;



    margin-top: 0;



  }



  .grid6 img {



    display: none;



    width: 20%;



    margin-right: -20%;



    align-items: center;



    transform: rotate(90deg);



  }



  .grid5 {



    display: none;



  }



  .grid6 .item::after {



    content: '⇣';



    font-size: 28px;



    color: #fff;



    padding: 0;



  }



  .grid6 .item .t {



    font-size: 24px;



    line-height: 50px;



  }



  .grid6 .item .dec {



    font-size: 20px;



    line-height: 30px;



  }

  .grid3 {



    line-height: 30px;



  }

  .grid2 {



    flex-direction: column;



  }



  .grid2 .item .n {



    height: unset;



    font-size: 28px;



    line-height: 65px;



  }



  .grid2 .item {



    width: 100%;

    border-radius: 10px;

  }



  .grid2 .item .d {



    padding: 15px;



    font-size: 16px;



  }



  .grid2 .item .n,



  .images p {



    font-size: 20px;



    line-height: 30px;



  }



  .images img {



    padding: 30px 0;



    width: 90%;



  }



  .grid4 .item .n {



    padding: 20px;



  }



  .class1 .grid2 .item .n {



    line-height: 48px;



  }



  .step_text {



    padding: 20px;



    font-size: 20px;



    line-height: 30px;



  }



  .selection4 .more_dec {



    padding-left: 20px;



    padding-bottom: 20px;



  }



  .selection4 .more_dec .t_t {



    font-size: 20px;



    padding-bottom: 10px;



  }



  .selection4 .more_dec .text {



    font-size: 16px;



    line-height: 24px;



  }



  .star_name {



    padding: 20px;



  }



  .star_name .t {



    font-size: 24px;



    line-height: 30px;



  }



  .star_name .en {



    font-size: 30px;



    line-height: 56px;



  }



  .star_name .desc {



    font-size: 20px;



    line-height: 30px;



  }



  .selection4 .students .item {



    padding: 20px;



    flex-direction: column;



    gap: 15px;



  }



  .selection4 .students {



    padding: 20px;



  }



  .selection4 .students .item .imgs {



    width: 50%;



  }

  .selection4 .students .item .imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



  .selection4 .students .item {



    font-size: 20px;



    line-height: 28px;



  }



  .selection4 .students .item span {



    padding-top: 10px;



    font-size: 16px;



    line-height: 24px;



  }



  .selection4 p {



    padding: 20px;



    font-size: 17px;



    line-height: 26px;



  }



  .selection4 .grid {



    padding: 20px;



    flex-direction: column;



    gap: 30px;



  }



  .selection4 .grid .item {



    width: 100%;



  }



  .selection4 .grid .label {



    font-size: 24px;



    line-height: 36px;



  }



  .selection4 .grid .icon {



    padding: 20px;



  }



  .selection3.an-start .seak>div {



    position: unset;



    padding-bottom: 20px;



  }



  .selection3 .seak {



    display: flex;



    flex-direction: column;



    align-items: start;



  }



  .selection3 .seak img {



    width: 100%;



    display: block;



    margin-bottom: 120px;



  }



  .selection3 .seak {



    padding: 40px 20px;



  }



  .selection3 .seak .index {



    font-size: 36px;



    line-height: 36px;



  }



  .selection3 .seak .label {



    font-size: 16px;



    line-height: 24px;



  }



  .selection3 li {



    font-size: 18px;



    line-height: 36px;



  }





  .selection3 p {



    padding: 0 20px;



    font-size: 18px;



    line-height: 24px;



  }



  .selection3 h6 {



    font-size: 26px;



    margin: 10px 20px;



  }



  .selection2 .footer {



    padding: 20px;



  }



  .selection2 .footer p {



    font-size: 20px;



    line-height: 28px;



  }



  .selection2 .grid {



    padding: 20px;



    gap: 40px;



  }



  .selection2 .grid .img {



    /* width: 60vw;



    height: 60vw; */

    width: 24vw;



    height: 24vw;

  }

  .selection2 .grid .desc {
    padding-left: 12px;
  }


  .selection2 .grid .item {



    display: flex;



    /* flex-direction: column; */
    flex-direction: row;


    align-items: center;



  }



  .selection2 p {



    /* font-size: 20px; */
    font-size: 16px;
    /* display: inline; */



    /* line-height: 30px; */
    line-height: 22px;



  }



  .selection2 .tag {



    height: unset;



    /* line-height: 24px; */
    line-height: 18px;



    padding: 10px;



    /* font-size: 24px; */
    font-size: 18px;



    /* margin: 20px 0 10px; */
    margin: 0 0 6px;

    width: auto;

  }



  .selection1 p {



    margin-top: 0;



    padding: 20px 0;



    line-height: 26px;



    font-size: 16px;



  }



  .selection1 .grid {



    gap: 15px;



  }



  .selection1 .grid {



    font-size: 18px;

    grid-template-columns: repeat(1, 1fr);

  }



  .selection1 .title {



    font-size: 20px;

    line-height: 60px;

    gap: 8px;



  }



  .selection1 .title .icon {



    height: 16px;



    width: 16px;



  }



  .selection1 .icon {



    width: 24px;



    height: 24px;



  }



  .top {



    display: flex;



    align-items: center;



    height: 350px;



  }



  .top .bg {



    height: 350px;



    object-fit: cover;



  }



  .top .content {



    padding: 20px;



    padding-top: 80px;



    box-sizing: border-box;



  }



  .top .logo {



    top: 10px;



    left: 10px;



    height: 20px;



    width: unset;



  }



  .top .content h4 {



    font-size: 20px;



    margin-bottom: 10px;



  }



  .top .content h3 {



    font-size: 24px;



    line-height: 30px;



  }



  .top .content p {



    font-size: 18px;



    line-height: 24px;



  }







  .position {



    display: none;



    position: absolute;



    right: 10px;



    /* top: 40vh; */



    top: 0;



    width: 180px;



    background-color: #ffffff;



    border-radius: 10px;



    box-sizing: border-box;



    padding: 15px;



    z-index: 100;



    font-size: 12px;



    line-height: 16px;



  }



  .position .tr {



    width: 100%;



    font-size: 16px;



    line-height: 30px;



    border: 10px;



  }



  .position p {



    padding: 20px 0;



  }



  .position .moneny {



    padding: 20px 0;



  }



  .position .moneny span {



    font-size: 14px;



    line-height: 18px;



  }



  .position .btn {



    font-size: 14px;



    line-height: 30px;



  }



  .selection2 .grid .item {



    width: 100%;



  }



  .selection2 .grid {



    padding: 50px 20px;



    gap: 60px;



  }



  .selection4 .grid .label span {



    font-size: 20px;



  }



  .copyright {



    padding: 60px 50px;



    font-size: 14px;



  }

  .mobile-btn {
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    font-family: OPPOSans-B;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0px;
    color: #fdf0d5;
    background-image: url(./imgs/btn.png);
    background-repeat: round;
    background-size: 100% 100%;
    z-index: 10;
    box-shadow: 0 0 10px #000;
  }
}

/* -------------------------------------------------------- */

@media screen and (max-width:900px) {
  .container{
    padding: 12px;
  }
  .selection4 .more{
    padding: 10px;
   flex-direction: column;
  }
  .selection4 .more img{
    width: 100%;
  }
  .class1,
  .class2 {
    padding: 30px 10px;
    background-color: #d7c8b0;
  }
  .grid3{
    flex-direction: column;
    gap: 40px;
  }
  /* .grid3 .item {
    display: flex;
    flex-direction: row;
    align-items: normal;
    background-color: #fff;
  } */
  /* .grid3 .item:nth-child(2n) .d{
    order: -1;
  } */
  /* .grid3 .item .n{
    width: 100px;
    height: auto;
    border-radius: 0;
    background-color: #e6dbca;
    border: none;
  } */
  .grid3 .item .n img{
    width: 60%;
    height: unset;
  }
  /* .grid3 .item .d{
    padding: 25px 15px;
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 16px;
  } */
  .class2 .grid2 .item {
    display: block;
  }
  .grid5 img{
    max-width: 80%;
  }
  .selection9 .list{
    padding: 20px ;
  }
  .selection9 .list .item{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .selection9 .list .t5{
    font-size: 36px;
  }
  .selection9 .list .t7{
    font-size: 20px;
  }
  .users{
    padding: 20px 10px;
  }
  .users .avatar .photo img{
    width: 30%;
  }
  .users .avatar{
    font-size: 18px;
  }
  .users .avatar>img{
    height: 40px;
  }
  .users .text2{
    font-size: 16px;
  }
  .module .title{
    padding: 15px;
    font-size: 30px;
    line-height: 40px;
  }
  .module{
    margin: 10px 0;
  }
  .grid11{
    padding: 10px;
  }
  .grid11 .item .q{
    padding: 10px;
    font-size: 24px;
  }
  .users .item{
    padding: 15px 0;
  }
  .users .avatar{
    padding-bottom: 10px;
  }
  .grid11 .item .anser{
    padding: 15px;
  }
  .grid11 .item .anser {
    font-size: 20px;
  }
  .grid8{
    gap: 15px;
    padding: 15px;
    grid-template-columns: repeat(1,1fr);
  }
  .grid8 .tx{
    font-size: 22px;
    padding: 15px;
  }
  .grid8 .tx .d4{
    font-size: 18px;
    line-height: 28px;
  }
  .grid7 .item{
    flex-direction: column;
    align-items: center;
  }
  .grid7 .item .img3 {
    width: 50%;
    padding-right: 0;
    margin-right: 0;
    border-right: unset;
    padding: 20px 0;
    border-right: unset;
  }
  .grid7 .item .t3{
    font-size: 30px;
    text-align: center;
  }
  .grid7 .item .d3{
    font-size: 24px;
    text-align: center;
    line-height: 36px;
  }
  .grid7 .item .img3  img{
    width: 100%;
    height: unset;
  }
  .grid7 .item{
    padding: 20px;
    margin-bottom: 15px;
  }
  .title2 .des2 {
    padding-top: 20px;
    font-size: 24px;
    line-height: 40px;
  }
  .title2 .t2{
    padding: 10px;
    font-size: 24px;
    line-height: 40px;
  }
  .grid6{
    flex-direction: column;
    padding: 20px 0;
    margin-top: 0;
  }
  .grid6 img{
    display: none;
    width: 20%;
    margin-right: -20%;
    align-items: center;
    transform: rotate(90deg);
  }
  .grid5{
    display: none;
  }
  .grid6 .item::after{
    content: '⇣';
    font-size: 36px;
    color: #fff;
    padding: 20px 0;
  }
  .grid6 .item .t {
    font-size: 28px;
  }
  .grid6 .item .dec{
    font-size: 20px;
  }
  .grid2{
    flex-direction: column;
  }
  .grid2 .item .n{
        height: unset;
        font-size: 28px;
        line-height: 65px;
  }
  /* .grid2 .item {
    display: flex;
    width: 100%;
  }
  .grid2 .item:nth-child(2n) .n{
    order: -1;
  } */
  /* .grid2 .item .d{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-size: 0;
  }
  .grid2 .item .d img{
    height: 50px;
  }
  .class1 .grid2 .item .n{
    line-height: 1.8;
  } */
  /* .grid2 .item .n{
    padding: 25px 15px;
    font-size: 16px;
    text-align: left;
    flex: 1;
    min-width: 0;
  } */
  .grid2 .item .n,
  .images p{
    font-size: 24px;
    line-height: 36px;
  }
  .images img{
    padding: 30px 0;
    width: 90%;
  }
  .grid4 .item .n{
    padding: 20px;
  }
  .grid2 .item .n{
    line-height: 60px;
  }
  .step_text{
    padding: 20px;
    font-size: 24px;
    line-height: 36px;
  }
  .selection4 .more_dec{
    padding-left: 20px;
  }
  .selection4 .more_dec .t_t{
    padding-bottom: 10px;
  }
  .star_name{
    padding: 30px 20px;
  }
  .star_name .t{
    font-size: 30px;
    line-height: 40px;
  }
  .star_name .en{
    font-size: 36px;
    line-height: 60px;
  }
  .star_name .desc{
    font-size: 24px;
    line-height: 30px;
  }
  .selection4 .students .item{
    padding: 20px;
    flex-direction: column;
    gap: 15px;
  }
  .selection4 .students{
    padding: 20px;
  }
  .selection4 .students .item img{
    width: 60%;
  }
  .selection4 .students .item{
    font-size: 24px;
    line-height: 36px;
  }
  .selection4 .students .item span{
    padding-top: 10px;
    font-size: 20px;
    line-height: 30px;
  }
  .selection4 p{
    padding: 20px;
    font-size: 24px;
    line-height: 36px;
  }

/*point2 ------------------------------ */

.selection4 .grid3{
  padding: 20px;
  flex-direction: column;
  gap: 30px;
}

.selection4 .grid3 .item{
  width: 100%;
  height: 50px;
    display: flex;
}

.selection4 .grid3 .item .n{
  padding: 0;
  width:60px;
  height: 60px;
}

.selection4 .grid3 .item .n img{
  padding: 0;
  width:40px;
  height: 40px;
}

.selection4 .grid3 .item .d{
  width: 100%;
  padding: 0;
  height: 50px;
  min-width: 0px;
  flex:1;
  text-align: left;
  padding-left: 5px;
  font-size: 16px;
}

.selection4 .grid3 .item:nth-child(2n) .d{
  order: -1;
}

/*point3 ------------------------------ */

.selection4 .grid4{
  padding: 20px;
  flex-direction: column;
  gap: 30px;
}

.selection4 .grid4 .item{
  width: 100%;
  height: 50px;
    display: flex;
    border-radius: 0;
}

.selection4 .grid4 .item .d{
  padding: 0;
  width:80px;
  height: 100px;
}

.selection4 .grid4 .item .d img{
  /* width:80px; */
  height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
}

.selection4 .grid4 .item .n{
  width: 100%;
  padding: 0;
  height: 100px;
  font-size: 14px;
  min-width: 0px;
  flex:1;
  text-align: left;
  padding-left: 10px;
  line-height: 50px;
}

.selection4 .grid4 .item:nth-child(2n) .n{
  order: -1;
}

/*------------------------------ */

  .selection4 .grid{
    padding: 20px;
    flex-direction: column;
    gap: 30px;
  }
  .selection4 .grid .item{
    width: 100%;
    display: flex;
    border-radius: 0;
  }
  .selection4 .grid .item:nth-child(2n) .label{
    order: -1;
  }
  .selection4 .grid .label{
    padding: 25px 15px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    flex: 1;
    min-width: 0;
  }
  .selection4 .grid .label .name{
    position: relative;
  }
  .selection4 .grid .label .name::after{
    content: '';
    margin: 10px 0;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fdf0d5;
  }
  .selection4 .grid .label span{
    font-size: 14px;
    line-height: 22px;
  }
  .selection4 .grid .icon{
    padding: 0;
    width:100px;
  }
  .selection4 .grid .icon img{
    height: 50px;
  }

  /*------------------------------ */

  .selection3.an-start .seak>div{
    position: unset;
    padding-bottom: 20px;
  }
  .selection3 .seak{
    display: flex;
    flex-direction: column;
  }
  .selection3 .seak img{
    width: 100%;
    display: block;
    margin-bottom: 120px;
  }
  .selection3 .seak{
    padding:40px 20px;
  }
  .selection3 .seak .index{
    font-size: 40px;
  }
  .selection3 p{
    padding: 0 20px;
    font-size: 24px;
    line-height: 36px;
  }
  .selection3 h6{
    font-size: 30px;
    margin: 10px 0;
  }
  .selection2 .footer{
    padding: 20px;
  }
  .selection2 .footer p{
    font-size: 24px;
    line-height: 36px;
  }
  .selection2 .grid{
    padding: 20px;
    gap: 40px;
  }
  .selection2 .grid .img{
    width: 60vw;
    height: 60vw;
  }
  .selection2 .grid .item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .selection2 p{
    font-size: 20px;
    line-height: 30px;
  }
  .selection2 .tag{
    height: unset;
    line-height: 24px;
    padding: 10px;
    font-size: 24px;
    margin: 20px 0 10px;
  }
  /* 900以下的像跨入美股适配左右样式--------------------------------------------- */
  .selection2 .grid {
    padding: 20px;
    gap: 40px;
  }

  .selection2 .grid .img {



    /* width: 60vw;



    height: 60vw; */

    width: 24vw;



    height: 24vw;

  }

  .selection2 .grid .desc {
    padding-left: 12px;
  }


  .selection2 .grid .item {



    display: flex;



    /* flex-direction: column; */
    flex-direction: row;


    align-items: center;



  }
  /* --------------------------------------------- */
  .selection1 p{
    margin-top: 0;
    padding: 20px 0; 
    line-height: 26px;
    font-size: 18px;
  }
  .selection1 .grid{
    gap: 15px;
  }
  .selection1 .grid{
    font-size: 20px;
    grid-template-columns: repeat(1,1fr);
  }
  .selection1 .title{
    font-size: 24px;
  }
  .selection1 .title .icon{
    height: 20px;
    width: 20px;
  }
  .selection1 .icon{
    width: 30px;
    height: 30px;
  }
  .top{
    display: flex;
    align-items: center;
    height: 350px;
  }
  .top .bg{
    height: 350px;
    object-fit: cover;
  }
  .top .content{
    padding: 20px;
    padding-top: 80px;
    box-sizing: border-box;
  }
  .top .logo{
    top: 10px;
    left: 10px;
    height: 20px;
    width: unset;
  }
  .top .content h4{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .top .content h3{
    font-size: 24px;
    line-height: 30px;
  }
  .top .content p{
    font-size: 18px;
    line-height: 24px;
  }
  .position{
    display: none !important;
    position: absolute;
    right: 0;
    top: 40vh;
    bottom:  0;
    width: 180px;
    background-color: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    z-index: 100;
    font-size: 12px;
    line-height: 16px;
  }
  .position .tr{
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    border: 10px;
  }
  .position p{
    padding: 20px 0 ;
  }
  .position .moneny{
    padding: 20px 0 ;
  }
  .position .moneny span{
    font-size: 14px;
    line-height:18px;
  }
  .position  .btn{
    font-size: 14px;
    line-height:30px;
  }
  .selection2 .grid .item{
    width: 100%;
  }
  .selection2 .grid{
    padding: 50px 20px;
    gap: 60px;
  }
  .mobile-btn{
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    font-family: OPPOSans-B;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0px;
    color: #fdf0d5;
    background-image: url(./imgs/btn.png);
    background-repeat: round;
    background-size: 100% 100%;
    z-index: 10;
    box-shadow:0 0 10px #000;
    text-decoration: none;
  }
}