@charset "utf-8";
/* 팝업레이어 */
#hd_pop {
    z-index:1000;
    /* position:relative; */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin:0 auto; 
    width:100%; 
    max-width:1280px;
    display: flex;
    flex-wrap: wrap;
}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops_con { position:relative;}
.hd_pops {
    position:absolute;
    width: 352px;
    border:1px solid #e9e9e9;background:#fff;cursor:move;}
.hd_pops_footer {
    width: 350px;
    max-width: 100vw;
    padding:10px 0;background:#33353e;color:#A39B97; text-align:right;
}
.hd_pops_footer button {margin-right:5px; font-size:12px; padding:5px 10px;border:0;background:#33353e;color:#A39B97}
.hd_pops_footer button:hover { color:#fff;}

/* 팝업 css */
.popWrap { position:absolute; width:100%; height:100%; text-align:center; /*border-width:5px; border-style:solid; box-sizing: border-box;*/}
.popWrap .popTitle { font-size:1.8em; line-height:1.8em; padding:0.6em; color:#fff; letter-spacing:0.05em; font-weight:600; }
.popWrap .popCon { position:absolute; width:100%; height:100%; overflow:hidden;}
.popWrap .popCon > div {padding:0; color:#666;}

.popType01 { border-color:#33353e;}
.popType01 .popTitle { background:#33353e;}

.popType02  { border-color:#3fa5cf;}
.popType02 .popTitle { background:#3fa5cf;}

.popType03  { border-color:#ee8100;}
.popType03 .popTitle { background:#ee8100;}

.popType04  { border-color:#e30202;}
.popType04 .popTitle { background:#e30202;}

.popType05  { border-color:#108410;}
.popType05 .popTitle { background:#108410;}

@media  (max-width: 768px){
/* .popWrap {border-width:3px;} */
.popWrap .popTitle {font-size:1.5em; line-height:1.5em; padding:0.8em; letter-spacing:0.08em; }
.hd_pops_con, .popWrap, .popWrap .popCon {
    max-width: 100vw;
    max-height: 100vw;
}
.popWrap .popCon > div { padding:0;}
.popWrap .popCon > div img {max-width: 100vw;}
.hd_pops {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    top: 60px;
    z-index: 1000;
    max-width: 350px;
}
}