/*----popup----*/
.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    background-image: url(../images/content_bg.jpg);
    background-repeat: no-repeat;
}
.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 { 
  display: inline-block;
    position: absolute;
    opacity: .5;
    text-align: center;
    padding: 5px 5px 5px 5px;
    border: 3px solid rgb(0 0 0);
    z-index: 99;
    background-color: rgb(89 0 187);
    cursor: pointer;
    border-radius: 50px;
}
.popup .btnClose:after,
.popup .btnClose:before { 
     content: '';
    display: block;
    position: absolute;
    left: 10px;
    height: 4px;
    background-color: #fff;
    width: 80px;
    right: 0;
    transition: all .3s ease-in;
	    margin-top: -2px;
}
.popup .btnClose:before { 
  transform: rotate(45deg); 
  top: 50%; 
}
.popup .btnClose:after { 
  transform: rotate(-45deg); 
  bottom: 50%; 
}
.popup .btnClose span { 
  display: inline-block; 
  color: #fff; 
  opacity: 0; 
  font-size: 22.4px; 
  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: 1920px;
    margin: 0 auto;
}
#darkPop .contents .classSection, #eventPop .contents .classSection{ 
  position: absolute; 
  top: 50%; 
  transform: translate(0, -50%); 
	    margin: 0 auto;
}
#darkPop .btnClose, #eventPop .btnClose{ 
        width: 60px;
    height: 60px;
    top: 0;
    right: 0;
}
#darkPop .btnClose:after, #darkPop .btnClose:before, #eventPop .btnClose:after, #eventPop .btnClose:before{ 
  width: 50px;
}
#darkPop .btnClose:after, #eventPop .btnClose:after{ 
  top: 50%; 
    background-color:  #ffffff;
}
#darkPop .btnClose:before, #eventPop .btnClose:before{ 
  bottom: 0; 
    background-color:  #ffffff;
}
#darkPop .btnClose span, #eventPop .btnClose span{ 
  line-height: 33px; 
}
#darkPop .popBtn, #eventPop .popBtn{ 
        position: absolute;
    top: 0;
    right: 57px;
    width: 60px;
    height: 60px;
    margin-top: -62px;
}
#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: 1920px;
    height: 735px;
    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%; 

}

#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%; 

}
#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);
}