/*modal*/
.modal { align-items: center; background-color: rgba(52, 73, 94, .9); display: flex; justify-content: center; height: 100%; left: 0; position: fixed; opacity: 0; overflow: hidden; top: 0; transform: translateY(-100%); transition: all .8s; width: 100%; z-index: -1}
.modal.on { opacity: 1; transform: translateY(0); z-index:99999;}
.modal.on .modal-content{ height: auto; margin-top: none; opacity: 1;}
/*.modal:not(:target) .modal-content { height: 0px; margin-top: -200%; opacity: 0;}*/
.modal-content { box-shadow:0 5px 30px rgba(0,0,0,.5); -moz-box-shadow:0 5px 30px rgba(0,0,0,.5); -o-box-shadow:0 5px 30px rgba(0,0,0,.5); -webkit-box-shadow:0 5px 30px rgba(0,0,0,.5) ; display: block; height: 0px; margin: 10px; opacity: 0; position: relative; transition: all .6s; width:350px;}

.pop00{ background-color: #6B76F0; }
.pop01{ background-color: #00688f; }
.pop02{ background-color: #01a4ca; }
.pop03{ background-color: #58c4c4; }
.modal-header { align-items: center; color: #444; height: 100%; justify-content: space-between; padding:1.5rem;}
.header-btn-close { position: fixed; top:200px; right:50px; color: #fff; background:transparent; border:0px; font-size: 35px; font-weight: bold; text-decoration: none;}
div.day_close{ position: fixed; top:65px; right:90px; color: #fff; font-size: 21px; font-weight: bold; text-decoration: none;}

.modal-header-title { font-size: 20px; letter-spacing: 1px;}
.modal-header-title span.pop_bar{display: inline-block; width:30%; height:5px; background:#f8f8f8; }
.modal-header-title span.pop_num{display: inline-block; float:right; font-size:24px; }
.modal-header-title h2{font-size:20px; width:100%; float:right; border-bottom: 1px solid #f8f8f8; padding:30px 0px; margin-bottom: 20px; line-height: 1.5em;}
.modal-header-title span.cont{ width:100%; font-size: 12px; opacity: 0.7; display:inline-block;}
.modal-header-title span.cont img{ width:50%; margin-left:25%; height:auto;}
.modal-header-title span.more{display: inline-block; opacity: 0.5; margin-top:1.8rem; font-size: 1rem; border: 2px solid #fff; padding:10px 15px;}
.modal-header-title span.more a{ color:#fff; display: block; width:100%; height:100%; }

.modal-header-title span.choice{ float:left; display:block;  width:100%; height:auto; }
.modal-header-title span.choice a{ color:#fff; display: inline-block; width:100%; height:100%; opacity: 0.5; margin-top:1rem; font-size: 1rem; border: 2px solid #fff; padding:0.8rem 1rem;transition:all 0.3s;}
.modal-header-title span.choice:hover a{opacity: 1;}

.modal-header:hover .modal-header-title span.more{opacity: 1;}
.header-success { color: #fff }
.modal-body { height: 75%; width: 100%;}

.close_btn { position: absolute; right:35px; bottom:35px; width: 50px; height: 50px; /*background:rgba(255, 255, 255, 0.25);*/  border-radius: 100px; color: #fff; cursor: pointer;  line-height: 25px; margin-left: -50px; transition: all 0.25s ease-in-out;}
.close_btn:hover { background: white; border-color: white; color: #555;}
.close_btn:before { position: absolute; display: inline-block; content: ""; width: 30px; height: 30px; top: 43%; left: 81%;}
.close_btn:before { margin-left: -20.5px; margin-top: -0.25px; border-left: 2px solid; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);}
.close_btn:after { position: absolute; display: inline-block; content: ""; width: 30px; height: 30px; top: 43%; left: 81%;}
.close_btn:after { margin-left: -21px; margin-top: -22px;  border-left: 2px solid; -webkit-transform: rotateZ(315deg); transform: rotateZ(315deg);}


@media all and (max-width:1024px){
.modal-header-title span.cont{ font-size: 12px; }
.header-btn-close{ right:0px; }
.header-btn-close{ top:100px;}
.header-btn-close .close_btn{ right:0px;}
.modal-header-title h2{font-size:18px; width:100%; float:right; border-bottom: 1px solid #f8f8f8; padding:30px 0px; margin-bottom: 20px; line-height: 1.5em;}
.modal-header-title span.cont{font-size: 11px; opacity: 0.7;}
}

@media screen and (max-width: 768px) {
.modal.on .modal-content{ height:400px; }
div.day_close{ position: fixed; top:15px; right:60px; color: #fff; font-size: 21px; font-weight: bold; text-decoration: none;}
.modal-header{ padding:12px; }
.modal-header-title{ font-size: 11px; }
.modal-header-title h2{ font-size: 18px; }
.modal-header-title span.cont{ font-size: 11px;}
.modal-header-title span.cont img{ display:none;}

.modal-header-title span.choice a { margin-top: 0.5rem;}

}

@media all and (max-width:600px){
.modal{ display: inline-block; padding-top: 50px; height:100%; overflow:auto;  position:absolute;}
.modal.on .modal-content{ width:90%; height:auto;margin:0 auto;margin-top:1rem; /*overflow:scroll;*/ }
/*.modal-header-title span.cont{ display:none;}*/
.modal-header-title h2{ font-size:12px; padding:10px 0px; margin-bottom:10px; }
.header-btn-close{ top:90px;}
.header-btn-close .close_btn{ right:0px;}
.modal.on .modal-content{ padding-bottom:1rem;}
}

@media screen and (max-width: 425px) {
.modal-header-title span.choice a{ color:#fff; display: inline-block; width:100%; height:100%; opacity: 0.5; margin-top:0.5rem; font-size: 1rem; border: 2px solid #fff; padding:0.4rem 0.6rem;}
}

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

}

@media all and (max-width:320px){
.modal-header-title span.cont{ font-size:9px;}
}


/*input */

.control {
  display:inline-block;
  position: relative;
  padding-left: 30px;

  cursor: pointer;
  font-size: 0.9rem;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #6B76F0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #6B76F0;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}

div.day_close label{ font-size:1.1rem;}