/* BASIC css start */
.torch_relay { background-color: #fff; overflow-x:hidden; }
.torch_relay img { width: 100%; }
.event_date { font-size: 1.5em; line-height: 2em; color: #2581c4; text-align: center; font-weight: 600; }
.imgper { width: 80% !important; margin: 0 10%; }

.Dday_count { background-image:url("https://mothersall.img6.kr/event_notice/torch_titback.jpg"); background-size:cover; }
#countdown { width: 90%; font-family: 'DungGeunMo'; background-color: #000; color: #fff;
    text-align: center;
    font-size: 3em; line-height: 1em;
    margin: 10% auto 5%; padding: 5% 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
}
#countdown p { margin: 5px 0; flex: 1; }
#countdown span { font-size: 20px; }
.Dday_count .inbtn { display: flex; margin: 0 5%; background-color: #54ab66; }
.Dday_count .inbtn a { color: #fff; background-color: #2581c4; border-radius: 5px; width:100%; font-size: 1.25em; line-height: 3em; text-align: center; font-weight: 600;}
.Dday_count .inbtn a:first-child { margin-right: 2%; }

.invite_event { background-color: #54ab66; padding: 10% 0 15%; }
.invite_event p { color: #fff; text-align: center; font-size: 1.25em; line-height: 1.5em; margin: 5% auto; }
.invite_event > img { }

    .swaying_torch {
      position: absolute;
      z-index: 2;
      transform: translate( -15%, -79%);
    }
    .torch_greenback { width: 20%; position: absolute; transform: translate( 380%, -79%); z-index: 1;}
    
    #bar-container {
      position: relative;
      width: 110%;
      height: 20px;
      background-color: #fff;
      border: 1.5px solid #000;
      margin: 40% 5% 15% 5%;
    }

    #current-value {
      position: absolute;
      bottom: 70%;
      transform: translateX(-25%);
      animation: moveCurrentValue 2s ease-out forwards; /* Animation duration: 2s */
    }
    #current-value img { width: 50%; }

    .bar {
      width: 0;
      height: 100%;
      background-color: #e94f55;
      border-right: 1.5px solid #000;
      animation: fillAnimation 2s forwards; /* Animation duration: 2s */
    }

    @keyframes fillAnimation {
      to {
        width: calc((750 / 800) * 100%);
      }
    }

    @keyframes moveCurrentValue {
      to {
        left: calc((750 / 800) * 100%);
      }
    }

    .marker { text-align: center; margin-top: 1%;
      /*width: 1.5px;
      height: 10px;
      background-color: #333;*/
      position: absolute;
      top: 100%;
      /*transform: translateY(-50%);*/
    }
    .marker > span { width: 1.5px; height: 10px; background-color: #333; display: inline-block; }
    
    /*.marker:nth-child(10n) {
      height: 20px;
    }*/
    
#speakealli { display: flex; margin: 10% 7%; }
#speakealli > li { color: #fff; font-size: 1.25em; line-height: 1.5em; margin-top: auto; margin-bottom: auto; }
#speakealli > li > img { width: 80%; }
#speakealli > li:first-child { width: 15%; }

.pick_the_prd { text-align: center; margin: 15% auto; }
.invite_guide p { font-size: 1.25em; line-height: 1.5em; margin: 7% auto 5%; }
.blueback { background-color: #c4e5f2; margin: 5%; padding-bottom: 2%; }
.invite_guide > .blueback > .tit { color: #fff; background-color: #2581c4; width:100%; font-size: 1.25em; line-height: 3em; margin-bottom: 5%; text-align: center; }
.invite_guide > .blueback > .tit > span { color:#f3d70a !important; }

.btn_pick { color: #fff; background-color: #2581c4; border-radius: 5px; font-size: 1.25em; text-align: center; font-weight: 600; padding: 5%; display:inline-block; }
#copyButton { border: 0; background-color: #ffeb55; border-radius: 5px; font-size: 1.25em; text-align: center; font-weight: 500; padding: 5%; display:inline-block; }
.torch_prd > { text-align: center; margin: 0 10%; }
.torch_prd > .choice { display: flex; flex-wrap: wrap; text-align: center; }
.torch_prd > .choice li { width: 26.5%; margin: 5% auto; }
.torch_prd > .choice li:nth-child(5) { width: 46%; }
.torch_prd > .choice li .addinfo_inputs { margin-top: 5%; }
.torch_prd > .choice > span { }

#review-board-write {}
#review-board-write .reviewInfo {width:100%; border-bottom:1px solid #bebebe; display: table; padding:10px 0;}
#review-board-write .reviewInfo figure a {width:145px; display:table-cell; padding:0 10px;}
#review-board-write .reviewInfo figure a img {width:100%;}
#review-board-write .reviewInfo figcaption {display:table-cell; vertical-align: middle; font-weight:bold; word-break: break-all;}
#review-board-write .form-wrap { background-color:#fff; padding:10px;}
#review-board-write table {width:100%;}
#review-board-write table th {text-align:left;}
#review-board-write table th, #review-board-write table td {padding:8px 0;}
#review-board-write table .fixButtonR .btn_Grey {width: 115px; display: inline-block; position: absolute; top:0; right:0;}
#review-board-write table .textArea textarea {height:110px;}
#review-board-write table .agree a {position: absolute; right: 0; border: 1px solid #c4c4c4; padding: 2px 5px; margin-right: 10px; background-color: #fff;}
#review-board-write .pd10 {margin-top:20px;}
#review-board-write .pd10 .btn_Red {margin-bottom:10px;}
#review-board-write .myorder { position: relative; }
#review-board-write .myorder .input-group { position: relative; }
#review-board-write .myorder .input-group input[type=text]:-ms-clear { display: none; }
#review-board-write .myorder .input-group #ordernumclear { position: absolute; right: 0; top: 0; bottom: 0; width: 23px; height: 16px; margin: auto; font-size: 12px; cursor: pointer; color: #000; text-align: center; }

.minigame_guide { background-color: #9cd4ea; padding: 10% 0 20%; text-align: center; }
.minigame_highjump { width: 80% !important; margin: 5% 10%;}
.minigame_guide a { font-size: 1.25em; line-height: 1.5em; margin: 5% auto; }
.minigame_guide p { font-size: 1.25em; line-height: 1.5em; margin: 5% auto; }

.guide_imgs { width: 90% !important; margin: 5%; }

.livechat { background-color: #15639c; margin: 5%; border-radius: 10px; padding: 5%; }
 
 
 
 
 
 .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 65%;
  max-height: 80vh;
  /* background-color: white; */
  padding: 5%;
  text-align: left;
}
.modal-content > p:first-child { text-align: center !important; font-weight: 500; }
.modal-content > p {font-size: 1.15em; line-height: 1.5em; margin: 5% auto; }
.prd_escription {margin-bottom: 20px; }
.prd_escription dt::after {content:"\2714"; float:left; margin: 2px 5px 0 0; }
.prd_escription dd {margin: 3px 0; margin-left: 23px !important; font-size: 1.15em; line-height: 1.5em; margin: 5% auto; }

.backcol1 { background-color: #f2f7f9; }
.backcol2 { background-color: #f3f9f2; }
.backcol3 { background-color: #fffff6; }
.backcol4 { background-color: #f1ebe8; }
.backcol5 { background-color: #f9f2f2; }

.close {
  margin: 5% auto;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}


/* BASIC css end */