/*미션*/
.missionCover{
    max-width: 1300px;
    font-size: 1.3em;
  }

  .missionParent{
    position: relative;
    border-bottom: 7px solid #2560b5;
    width:100%;
    max-height: 350px;
    background-color: #f8fdff;

    overflow: hidden;
  }

  .missionBgChange{
    margin-left: 15%;
    margin-top: -7px;
    display:block;
    max-height: 350px;
    height: 100%;
  }

  #missionBgChange1,#missionBgChange4,#missionBgChange5,#missionBgChange2,#missionBgChange3{display:none;}


  .missionBgChange2{

  }
  .missionParent2{
    position: relative;
    border-bottom: 7px solid #dd5858;
    width:100%;
    max-height: 350px;
    background-color: #fff8f8;

    overflow: hidden;
  }

  .missionParent.puzzle{max-height: 400px;}
  .missionParent.puzzle>img{max-height: 400px;}

  .missionTit,.missionTit2{
    position: absolute;
    bottom: 3%;
    right: 20%;
    text-align: right;
    font-size: 1.2em;
    letter-spacing: -1px;
  }
.missionTit2{
  font-size: 1em;
  letter-spacing: -1.5px;
}
.missionTit.missionTit2 span.pt1{display:block;font-size:2.5em;}
.missionTit.missionTit2 span.pt2{display:none;}

.missionTit1 p,.missionTit2 p{margin-top: 20px;}

.missionTit3{font-size: 1.68em;}
.missionTit3 .miTitPoint{display: block;margin-top: 10px;}

.m-txt1{display: block;}
.m-txt2{display:none;}
.m-txt1{font-size: 18px;width:600px;line-height: 1.4em;}

  span.miTitPoint{
    font-family: 'WandohopeB';
    font-size:3.2em;
    line-height: 1em;

  }

  span.miTitPoint.miTitPoint2{
    font-size: 2em;
  }

  span.miTitPoint3{font-size: 2em;font-family: 'WandohopeB';
line-height: 1em;}

.misTit1,.misTit2{padding-bottom: 30px;}
  .misTit1::after{
    display: block;
    content: '';width:50px;height: 3px;background-color: #2560b5;
    margin: 0 auto;margin-top:10px;

  }

  .misTit2::after{
    display: block;
    content: '';width:50px;height: 4px;background-color: #dd5858;
    margin: 0 auto;margin-top:10px;
  }

  .puzCover{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
      }

  .puzCover img{margin:0 auto;}
  .puzCover::after{display: block;content: '';clear: both;}
  .puzCover li{width: 50%;height: 50%;float:left;}


  .puz1{padding-top:90px;}
  .puz2{padding-top:90px;}
  .puz3{padding-top:30px;}
  .puz4{padding-top:30px;}

  .puz1 div{text-align: right;margin-left: auto;padding-right:200px;}
  .puz2 div{text-align: left;margin-right: auto;padding-left:200px;}
  .puz3 div{text-align: right;margin-left: auto;padding-right:200px;}
  .puz4 div{text-align: left;margin-right: auto;padding-left:200px;}

  .puzCover li > img{float: left;width:110px;display: none;}

  .puzCover li div p{font-family: 'WandohopeB';font-size: 2em;margin-bottom: 0;margin-top:7px;}
  .puzCover li div span{font-size: 1em;margin-top: -7px;
      display: block;font-weight: 500;color:#576d8b;}

      .missionParent.puzzle {
          margin-bottom: 6em;
      }

      .missionBgChange.puzImg{display: block;margin: 0 auto;}

.puzCover li div img{padding-right: 5px;margin-bottom: 3px;}

      .tit-puz1{color:#89c8f7;}
      .tit-puz2{color:#6db0f2;}
      .tit-puz3{color:#76a8e5;}
      .tit-puz4{color:#4c85d8;}


  @media (max-width: 1750px){
    .missionBgChange{margin-left: 12%;}
    .missionTit{right: 15%;}
  }
  @media (max-width: 1500px){
    .missionBgChange{margin-left: 10%;width: 600px;}
    .missionTit{right: 13%;}
    span.miTitPoint{font-size: 2.2em;}
    span.miTitPoint.miTitPoint2{font-size: 1.8em;}
    .missionCover{max-width: 1100px;font-size: 1.1em;}

    .m-txt1{font-size: 16px;width:470px;margin-left: auto;}


    .puz1{padding-top:85px;}
    .puz2{padding-top:85px;}
    .puz3{padding-top:25px;}
    .puz4{padding-top:25px;}



  }

  @media (max-width: 1200px){
    .missionCover{max-width: 900px;}
    span.miTitPoint{font-size: 1.9em;}
    span.miTitPoint.miTitPoint2{font-size: 1.5em;}
    .missionBgChange{margin-left: 8%;width: 500px;}
    .missionTit{right: 12%;}

    .missionParent.puzzle{height: 400px;}
    .missionParent.puzzle .missionBgChange{width: 600px;}

    .m-txt1{width:450px;}

    .missionTit.missionTit2 span.pt2{display:block;}
    .missionTit.missionTit2 span.pt1{display:none;}


    .puz1 div{padding-right:170px;}
    .puz2 div{padding-left:170px;}
    .puz3 div{padding-right:170px;}
    .puz4 div{padding-left:170px;}


  }
  @media (max-width: 991px){
    .missionCover{max-width: 90%;}
    .missionTit{font-size: 1.4em;}
    .missionTit.missionTit2{font-size:0.9em;}
    span.miTitPoint{font-size: 2em;}
    span.miTitPoint.miTitPoint2{font-size: 1.8em;}
    .missionBgChange{margin-left: 3%;width: 60%;}
    .missionTit{right: 7%;}
    .missionCover{font-size: 1em;}

    .missionParent.puzzle .missionBgChange{width: 550px;margin-top:25px;}

    .puz1{padding-top:105px;}
    .puz2{padding-top:105px;}
    .puz3{padding-top:35px;}
    .puz4{padding-top:35px;}

    .puzCover li div p{font-size: 1.7em;}
      .puzCover li div span{font-size: 0.9em;}

      .m-txt1{width:400px;line-height: 1.4em;font-size: 15px;}

  }

  @media (max-width: 900px){
    .missionParent.puzzle {
      max-height: 550px;
  height: 550px;

}

.puzImg{display: none;}
.missionBgChange.puzImg{display:none;}
.puzCover li div img{display: none;}
#missionBgChange5{display:block;width: 50%;height: auto;margin:0 auto;}
.puzCover{
  max-width: 80%;
 bottom: 2%;left: 10%;
 height: fit-content;
    }

    .misTit1, .misTit2{font-size: 1.7em;}

    .puzCover li > img{width:80px;display: block;}
    .puzCover li div{width:100%;text-align: left;}


    .puz1{padding-top:0;}
    .puz2{padding-top:0;}
    .puz3{padding-top:0;}
    .puz4{padding-top:0;}

    .puz1 div,.puz2 div,.puz3 div,.puz4 div{float: none;margin: 0;padding:0;}


.puzCover::after{display: block;content: '';clear: both;}
    .puzCover li{float:left;width: 50%;margin-top: 5px;height: 90px;}

    .puzCover li div p{font-size: 1.2em;}
    .puzCover li div span{font-size: 0.85em;}

    span.miTitPoint3{font-size: 1.5em;}
  }

    @media (max-width: 796px){
      span.miTitPoint{font-size: 1.7em;}
      .missionParent.puzzle {
    max-height: 500px;
    height: 500px;
}
.misTit1, .misTit2{padding-bottom:15px;}
.puzCover{
  max-width: 85%;
 bottom: 3%;left: 7.5%;
 height: fit-content;
    }

.puzCover li div span{font-size: 0.8em;}

.m-txt1{display: none;}
.m-txt2{display:block;}

    }

    @media (max-width: 644px){
      .missionParent.puzzle {
    max-height: 650px;
    height: 650px;
}
      .puzCover{bottom:4%;}
      .puzCover li{
        max-width: 320px;
        float: none;
        width: 100%;
        margin: 0 auto;
        height: 75px;

      }

      .missionBgChange.puzImg{display: none;}
      #missionBgChange5{display: block;width: 400px;margin: 0 auto;}





      .missionTit3{font-size: 1.3em;}

    }

  @media (max-width: 625px){

    span.miTitPoint{font-size: 1.6em;}
    .missionTit.missionTit2 span.pt2{font-size: 1.8em;}
    .missionCover{font-size: 0.8em;}
    .missionCover{font-size: 0.9em;}
    span.miTitPoint3{font-size: 1.3em;}
  }

  @media (max-width: 500px){
    .missionBgChange{
      display:none;
    }

    #missionBgChange1,#missionBgChange2,#missionBgChange3{display:block;width: 100%;margin:0 auto;}
    .missionTit{font-size: 1.4em;}
    .missionTit1,.missionTit2,.missionTit3{top:8%;right: 50%;width: 100%;transform: translate(50%, 0%)!important;text-align: center;}

    .missionTit3{font-size: 1.6em;}

    .missionTit.missionTit2 span.pt1{display:block;font-size: 1.7em;}
    .missionTit.missionTit2 span.pt2{display:none;}
    .missionTit3{font-size: 1em;letter-spacing: -1px;}
    .missionTit3 .miTitPoint{font-size: 2.2em;}

    .puzCover li{letter-spacing: -0.5px;}


    .missionParent,.missionParent2{max-height: fit-content;}
    span.miTitPoint3{font-size: 2.4em;}

    .misTit1, .misTit2{font-size: 1.3em;}

  }
  @media (max-width: 400px){

#missionBgChange5{width:320px;}

.missionParent.puzzle {
    max-height: 580px;
    height: 580px;
}

.missionTit.missionTit2 span.pt1{display:block;font-size: 1.4em;}

span.miTitPoint3{font-size: 2.1em;}
  }

  @media (max-width: 320px){
    .missionTit{font-size: 1em;}
    .missionTit1{text-align: center;}
    .missionTit2{text-align: center;}
    .missionTit3{text-align: center;}
  }
