/*----popup----*/
.popup { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, .7); 
  top: 0; 
  left: 0; 
  z-index: 999; 
  display: none; 
}
.popup .content { 
  width: auto; 
  height: auto; 
  min-height: 240px; 
  display: inline-block; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%); 
  position: relative; 
  max-width: 100%; 
  color: white; 
  font-size: 24px; 
  overflow: inherit; 
  border: 1px solid #555; 
  background: black; 
  padding: 0; 
}
.popup .btnClose { 
  height: 100%; 
  display: inline-block; 
  position: absolute; 
  width: 68px; 
  top: 12px; 
  right: 12px; 
  opacity: .5; 
  text-align: center; 
  height: 68px; 
}
.popup .btnClose:after,
.popup .btnClose:before { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: -5px; 
  height: 2px; 
  background-color: #fff; 
  width: 80px; 
  right: 0; 
  transition: all .3s ease-in; 
}
.popup .btnClose:before { 
  transform: rotate(45deg); 
  top: 50%; 
}
.popup .btnClose:after { 
  transform: rotate(-45deg); 
  bottom: 50%; 
}
.popup .btnClose span { 
  display: inline-block; 
  line-height: 65px; 
  color: #fff; 
  opacity: 0; 
  font-size: 22.4px; 
  font-size: 30.799px; 
  font-size: 1.2rem; 
  margin-left: -10px; 
  width: 100%; 
}
.popup .btnClose:hover { 
  opacity: .8; 
}
.popup .btnClose:hover span { 
  opacity: 1; 
}
.popup .btnClose:hover:before { 
  top: 0; 
  transform: rotate(0); width: 68px; 
}
.popup .btnClose:hover:after { 
  bottom: 0; 
  transform: rotate(0); 
  width: 68px; 
}
.popup .content .btnClose { 
  width: 68px; 
  height: 68px; 
  display: inline-block; 
  position: absolute; 
  top: -88px; 
  right: 0; 
}
.popup .container { 
  display: inline-block; 
  width: 100%; 
}
#darkPop{ 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 9999; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.9); 
  display: none; 
}
#darkPop .contents, #eventPop .contents{ 
  position: relative; 
  color: #c8c8c8; 
  height: 980px;
  max-width: 826px; 
  margin: 0 auto; 
}
#darkPop .contents .classSection, #eventPop .contents .classSection{ 
  position: absolute; 
  top: 50%; 
  left: 0; 
  right: 0; 
  transform: translate(0, -50%); 
}
#darkPop .btnClose, #eventPop .btnClose{ 
  width: 33px; 
  height: 33px; 
  top: 0; 
  right: 0; 
}
#darkPop .btnClose:after, #darkPop .btnClose:before, #eventPop .btnClose:after, #eventPop .btnClose:before{ 
  width: 33px;
}
#darkPop .btnClose:after, #eventPop .btnClose:after{ 
  top: 50%; 
}
#darkPop .btnClose:before, #eventPop .btnClose:before{ 
  bottom: 0; 
}
#darkPop .btnClose span, #eventPop .btnClose span{ 
  line-height: 33px; 
}
#darkPop .popBtn, #eventPop .popBtn{ 
  position: absolute; 
  top: 0; 
  right: -8px; 
  width: 33px; 
  height: 33px; 
  margin-top: -40px; 
}
#darkPop .contents .classSection .detailInfo{ 
  font-size: 15px; 
  line-height: 25px; 
  text-align: center; 
  position: relative;
  padding: 30px; 
  /*word-break: keep-all;*/ 
  word-wrap: break-word; 
}
#eventPop .contents .detailInfo{
  padding-top: 25px;
  width: 826px;
  height: 623px;
  background: url(../images/box.png) no-repeat center top;
  text-align: left;
}
#eventPop .detailInfo .title{
  margin-bottom: 30px;
  color: #f1bf50;
  font-size: 48px;
  font-weight: bold;
}
#eventPop .detailInfo input{
  border: none;
  margin-bottom: 20px;
  padding: 15px 0;
  width: 80%;
  color: #f1bf50;
  font-size: 22px;
  background: #222;
  text-align: center;
}
#darkPop .contents .classSection .detailInfo:before { 
  content: ''; 
  display: inline-block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  height: 1px; 
  background-color: #9b9b9b; 
}
#darkPop .contents .classSection .detailInfo:after { 
  content: ''; 
  display: inline-block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  height: 1px; 
  background-color: #9b9b9b; 
}
#darkPop .contents ol { 
  list-style: decimal; 
  text-align: justify; 
  margin: 0 auto; 
  padding-left: 22px;
}
#darkPop .btnClose:hover:before, #eventPop .btnClose:hover:before{ 
  -webkit-transform: rotate(45deg); 
  moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
  top: 50%; 
  width: 33px; 
}
#darkPop .btnClose:hover:before, #darkPop .btnClose:hover:after, #eventPop .btnClose:hover:before, #receivePop .btnClose:hover:after{ 
  transform:; 
}
#darkPop .btnClose:hover:after, #eventPop .btnClose:hover:after{ 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  bottom: 50%; 
  width: 33px; 
}
#darkPop .btnClose:hover span, #eventPop .btnClose:hover span{ 
  opacity: 0; 
}
#eventPop a img{
  margin: 0 5px;
  transition: .2s;
  cursor: pointer;
}
#eventPop a img:hover{
  filter: brightness(1.1);
}