.popup {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  -o-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  -moz-transition: opacity .4s cubic-bezier(.23, 1, .32, 1) 0s;
  will-change: opacity, transform; z-index: 99999999999999999999
}
/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.popup__container {
  text-align: left;
  font-size: 12px;
  background-color: #fff;
  padding: 35px;
  margin: 30px auto;
  box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -moz-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  border-radius: 3px;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  transform: scale(.8);
  -webkit-transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  will-change: transform, opacity
}}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.popup__container {
  text-align: left;
  font-size: 12px;
  background-color: #fff;
  padding: 10px;
  margin: 0px auto;
  box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  -moz-box-shadow: rgba(0, 0, 0, .25) 0 14px 45px, rgba(0, 0, 0, .22) 0 10px 18px;
  border-radius: 3px;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  transform: scale(.8);
  -webkit-transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, -webkit-transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  transition: opacity .2s ease, visibility 0s .1s, transform 450ms cubic-bezier(.23, 1, .32, 1) 0s;
  will-change: transform, opacity
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

.popup__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding-top: 8px; 	transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 

}
.popup__close:before{
  position: absolute;
  top: 0px;
  right: 0px; content: "\e9b3";   font-family: unicons-line;
  width: 30px;
  height: 30px; display: flex;  justify-content: center;  align-items: center; font-size: 30px; color: #333
}

.popup__close span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #2f2c2c; 
}

.popup__close:hover{ 
transform:rotate(90deg)  



}
.popup__close span:first-of-type {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}
.popup__close span:last-of-type {
  -webkit-transform: rotate(-45deg) translateY(0px);
  -moz-transform: rotate(-45deg) translateY(0px);
  -ms-transform: rotate(-45deg) translateY(0px);
  -o-transform: rotate(-45deg) translateY(0px);
  transform: rotate(-45deg) translateY(0px)
}
@media (max-width:767px) {
  .popup__container {
    width: 100%;
    margin: 10px auto;
 
  }
  .popup__close {
    top: 10px;
    right: 10px
  }
}
.popup.opened .popup__container {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1)
}