/*---------------- body-size ----------------*/



.modal-body-rg{
    height: 5vh;
    line-height: 5vh;
}

  
  .courseclearModal-image {
    width: 23vw;
    height: 30vh;
  }

  
  .modal-area {
    width: 100vw;
  }
  
  .modal-xl {
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 2vw;
    padding-right: 2vw;
    margin: 0vh !important;
  }
  


/*---------------- explain-modal ----------------*/

.explainModal-header {
  height: 8vh;
  line-height: 8vh;
  margin-left: 10vw;
  margin-right: 10vw;
}
.explainModal-body {
    height: 83vh;
}
.explainModal-footer {
    height: 5vh;
 }


  .explainModal-text-area {
    height: 30vh;
  }
  
  .explainModal-img-area {
    height: 42vh;
    width: 96vw;
    padding-left: 9vw;
    padding-right: 9vw;
    text-align: center;
  }
  
  .explainModal-img1 {
    width: 100%;
    height: 42vh;
    margin-left: auto;
  }
  
  .explainModal-img2 {
    width: 100%;
    height: 42vh;
    margin: auto;
  }
  
  .explainModal-path {
    margin-left: 3vw;
  }
  
  .explainModal-title {
    float: left;
    margin-left: 1vw;
    margin-top: 1vh;
    font-size: 2.3vw;
    color: rgb(54,73,95);
    font-weight: bold;
  }
  
  .explainModal-title-last {
    float: center;
    margin-left: 1vw;
    margin-top: 20vh;
    font-size: 2.3vw;
    color: rgb(54,73,95);
    font-weight: bold;
  }
  

  
  .explainModal-text {
    float: left;
    margin-left: 1vw;
    line-height: 4.0vh;
  }
  .explainModal-explain-last {
    float: center;
    margin-left: 1vw;
    font-size: 1.2vw;
    color: rgb(65,86,111);
    line-height: 4.0vh;
  }

  /*courseclearModal*/
.courseclearModal--body{
  position: relative
}

.courseclearModal--body *{
  user-select: none;
}

.courseclearModal--body .courseclearModal--title{
  position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.courseclearModal--body .courseclearModal--maintext{
  position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.courseclearModal--body .courseclearModal--subtext{
  position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.courseclearModal--body .btn-twitter{
  position: absolute;
    top: 68%;
    left:43%;
    transform: translate(-50%, -50%);
}

.courseclearModal--body .btn-facebook{
  position: absolute;
    top: 68%;
    left: 57%;
    transform: translate(-50%, -50%);
}

.courseclearModal--body .btn-back{
  position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
}