.sub_contents button { display:block; width:100%; height:100%; cursor: pointer; border: 0; outline: 0; background-color:transparent;}

/* 팝업 */
.popCmmn {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
    z-index: 999;
}

.popBg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
}

.popInnerBox {
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  position:absolute;
  width:90%; height:100%; overflow-y:scroll;
  text-align:center;
  background:#fff;
  border-radius:20px;         
    top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popHead {width: 100%; height:auto;
  padding:30px;  background-color: #0d1c4b; background-image: url("/images/sub/pop_tit_bg.png"); background-repeat:repeat-x; background-position: center center; background-size:cover;
}

.popHead ul {width: 100%; display: block; text-align: left; margin: 0 auto;}
.popHead ul li {width: 100%; display: block;color: #fff; }
 .popHead ul li span {display: block; margin-top: 5px;}
.popHead ul li em {display:none;}
.popHead ul li:last-child {font-size:16px;font-weight: 600; margin-top: 5px;}

.popBody {height:100%;
  box-sizing:border-box;
}
.popBody .pop_con_area {width: 100%; display: block;}
.popBody .pop_con_area:after {content: " ";display: table; clear:both;}

/* 포스터 */
.pop_thumb_bg {width:100%; height:auto;background-image: url("/images/sub/pop_thumb_bg.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; overflow: hidden;}
.pop_thumb_bg .pop_thumb {width: 300px; height: 360px; border-radius: 20px; overflow: hidden; margin:30px auto;}
.pop_thumb img {max-width: 100%; height: auto;}

/* 버튼 */
.pop_btn_area {width: 100%; margin: 30px auto;}
.pop_btn_area a {width:90%; display: block; text-align: center; color: #fff; padding: 10px;vertical-align: middle; border-radius: 30px;overflow: hidden; margin:10px auto;}
.pop_btn_area a i {color: #fff; font-size: 20px; vertical-align: middle; margin-right: 20px;}
.pop_btn_area a.pop_btn_link {background-color: #28377b;}
.pop_btn_area a.pop_btn_down  {background-color: #0c1c4c;}

/* 내용 */
.pop_list_area_short {width:100%; background-color: #f8f8f8; padding: 40px 30px 30px;}
.pop_list_area {width:100%;background-color: #f8f8f8; padding: 40px 30px 30px;}
dl.pop_con_list {width:100%; height:100%;display: block; text-align: left; }
dl.pop_con_list dt {width:100%; display: block;font-weight: 600; background-color: #ededed; text-align: center;padding: 5px; margin-bottom:15px; }
dl.pop_con_list dt:before {content: '';display: inline-block;width: 5px; height: 5px; border-radius: 30px; overflow: hidden;background-color: #28387b; vertical-align: middle; margin-right: 10px;}

dl.pop_con_list dd {width:100%;display: block;margin-bottom:15px; vertical-align: middle;}
dl.pop_con_list dd span {display: block;}

dl.pop_con_list dd ul {width: 100%; display: block;  list-style-position: inside;
  text-indent: -6px;
  padding-left: 6px;}
dl.pop_con_list dd ul li {display: block; list-style-position: inside;margin-bottom: 5px;}
dl.pop_con_list dd ul li:before {content: '-';font-weight: 700;color: #28387b; display: inline-block; vertical-align: middle; margin-right:5px;}
dl.pop_con_list dd ul li.pop_ul_li_pd {padding-bottom: 50px;}

.popCloseBtnCmmn {
  width:90%;
  margin:10px auto;
  padding:5px;
 overflow: hidden;
    border: 0;
  cursor: pointer;
  transition:all 0.3s;
}
.popCloseBtnCmmn a {display:block; width:100%; height: 100%; font-size:14px; color: #fff;}

.popFoot {position: fixed; z-index: 9999; right:10px;}

.popFoot button { cursor: pointer; border: 0; outline: 0;background-color:transparent;}
.popFoot button i {display: block; font-size: 28px; color: #fff;}

@media screen and (min-width:768px)  {
    
    .popHead {height:120px;}
    .popHead ul li span {display: inline-block; margin-top: 0;}
    .popHead ul li em {display: inline-block; width: 1px;height: 12px; background-color: #fff; vertical-align: middle; margin-left: 15px; margin-right: 15px;}
    
    dl.pop_con_list dt {float: left; width:160px;margin-bottom:22px; background-color:transparent; text-align:left;padding: 0px; }
    dl.pop_con_list dd {width:70%; margin-left: 30%;margin-bottom:22px;}

}
@media screen and (min-width:1024px)  {
    .popInnerBox {width: 100%; height:auto; overflow-y:hidden; overflow: hidden;}
    
    .popHead ul li:last-child {font-size: 18px;}
    
    .pop_thumb_bg {float: left;width:40%;}
    .pop_thumb_bg .pop_thumb {margin: 40px auto 0;}
    
    .pop_list_area_short {width:60%; height:650px;padding: 40px 30px 30px;margin-left: 40%;}
 .pop_list_area {width:60%;height:600px;padding: 40px 30px 30px;margin-left: 40%;overflow-y: auto;}
    .popCloseBtnCmmn {width:50px; height: 50px;
  margin:20px;padding:10px; }
    
    .pop_btn_area a {width: 70%;}
    
    .popFoot { right: 0;}
    .popFoot button i {font-size: 36px;}
    
}
@media screen and (min-width:1200px)  {
    .popInnerBox {
  width:1100px;
}
    .popHead ul li:last-child {font-size: 24px;}
    
    .pop_list_area {height:700px;}
    dl.pop_con_list dt {font-size: 18px;}
    dl.pop_con_list dd {font-size: 18px;}
    dl.pop_con_list dd ul li {font-size: 18px;}
    
}
@media screen and (min-width:1440px)  {
   
    .pop_list_area {height:780px;}
}
@media screen and (min-width:1920px)  {


}

/* 팝업 썸네일리스트 */
ul.event_area {width: 100%; display: block; margin:0 auto; }
ul.event_area li { display: block;width: 100%;}
ul.event_area li button {position:relative;width:350px;height:420px;border-radius: 20px; overflow: hidden;margin: 0 auto 20px;}

ul.event_area li button .image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;width: 100%; height: 100%; object-fit: contain;
}

ul.event_area li .event_list_area {width:350px;margin: 0 auto 30px;}
ul.event_area li .event_list_area span {width: 100%; display: block; font-size:13px;text-align: left; color: #757983; }
ul.event_area li .event_list_area span.event_tit {width: 100%;font-size:16px; font-weight: 600; color: #28377b!important; margin-top:5px;}

/* 워크샵 */
ul.workshop_area {display:flex;align-items:center;justify-content:center; flex-wrap: wrap; width: 100%;  margin:0 auto;}
ul.workshop_area li {width: 100%;display: block;}
ul.workshop_area li button {position:relative;width:350px;height:420px;border-radius: 20px; overflow: hidden;margin: 0 auto 20px;}

ul.workshop_area li button .image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;width: 100%; height: 100%; object-fit: contain;
}

ul.workshop_area li .event_list_area {width:350px;margin: 0 auto 30px;}
ul.workshop_area li .event_list_area span {width: 100%; display: block; font-size:13px;text-align: left; color: #757983; }
ul.workshop_area li .event_list_area span.event_tit {width: 100%;font-size:16px; font-weight: 600; color: #28377b!important; margin-top:5px;}

@media screen and (min-width:768px)  {
   

}
@media screen and (min-width:1024px)  {
    ul.event_area li {float: left;width:30%;margin-right:45px; margin-bottom:20px;}
    ul.event_area li button {width:250px;height:300px;}
    ul.event_area li:nth-child(3n) {margin-right: 0px;}
    ul.event_area li .event_list_area {width:250px;}
    
    /* 워크샵 */
    ul.workshop_area {justify-content:space-around;}
    ul.workshop_area li {width:30%; margin-bottom:20px;}
    ul.workshop_area li button {width:250px;height:300px;}
    ul.workshop_area li .event_list_area {width:250px;}
    
    .middle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.imghover:hover .image {
  background-blend-mode: multiply;
}

.imghover:hover .middle {
  opacity: 1;
}

.text {border-radius: 50%; width:50px; height: 50px; background-color: #28387b;
  color:#fff;
  font-size:30px; font-weight:400;  line-height:47px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
}
@media screen and (min-width:1200px)  {
    ul.event_area li {margin-right:50px; margin-bottom: 30px;}
    ul.event_area li button {width:350px;height:420px;}
    ul.event_area li .event_list_area {width:350px;}
    ul.event_area li .event_list_area span {font-size:16px;}
    ul.event_area li .event_list_area span.event_tit {height: 90px; font-size:20px;}
    
    /*워크샵*/
    ul.workshop_area li {margin-bottom: 30px;}
    ul.workshop_area li button {width:350px;height:420px;}
    ul.workshop_area li .event_list_area {width:350px;}
    ul.workshop_area li .event_list_area span {font-size:16px;}
    ul.workshop_area li .event_list_area span.event_tit {height:90px;font-size:20px;}
}
@media screen and (min-width:1440px)  {
  
}
@media screen and (min-width:1920px)  {
    
}