@charset "utf-8";

/** 팝업 CSS **/

.b-modal											{ position:fixed; left:0; top:0; right:0; bottom:0; cursor:pointer; opacity:.3; z-index:9998;}
.bPopup												{ display:none; position:fixed !important; top:50% !important; width:472px; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.inner													{ position:relative; width:100%; overflow:hidden; margin:0 auto; padding:0; }
.bPopup .item										{ float:left; text-align:center;}
.bPopup .item .pop_img							{ clear:both; max-height:58vh; overflow-x:hidden; overflow-y:auto; padding:2%; background-color:#fff;}
.bPopup .item .pop_img img					{ margin:0 auto; max-width:100%}
.bPopup .slick-slide								{ padding:0}

.bPopup .controller						{ position:absolute; top:16px; right:.8em; z-index:2}
.bPopup .controller .play				{ position:relative; width:15px; height:15px; }
.bPopup .controller .play::after		{ position:absolute; left:0; top:0; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid #fff; content:""}
.bPopup .controller .stop				{ position:relative; width:15px; height:15px; }
.bPopup .controller .stop::after		{ position:absolute; left:0; top:0; width:5px; height:15px; border-width:0 2px; border-style:solid; border-color:#fff; content:""}


/* 스크롤 보이도록 설정 */
.bPopup .item .pop_img::-webkit-scrollbar { -webkit-appearance: none; width:3px;}
.bPopup .item .pop_img::-webkit-scrollbar:vertical { width:8px; }
.bPopup .item .pop_img::-webkit-scrollbar:horizontal { height:8px; }
.bPopup .item .pop_img::-webkit-scrollbar-thumb { background-color:rgba(0, 0, 0, .5); border-radius:10px; border:2px solid #fff; }
.bPopup .item .pop_img::-webkit-scrollbar-track { border-radius:10px; background-color:#fff; }

.bPopup .item .pop_tit						{ position: relative;  overflow:hidden; color:#fff; background:#000; margin-top:-1px; padding:.7em 7em .7em 1em; text-align:left; font-size:1.2rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.bPopup .b-close								{ display:inline-block; float:left; width:50%; line-height:45px; font-size:.94rem; cursor:pointer; text-align:center; color:#000; border:1px solid rgba(0,0,0,0.2); border-left:none; background:#fafafa }

#pop												{ overflow:hidden; background-color: #fff;}
#pop .slick-dots 								{ position:absolute; right:3.7em; top:16px; }
#pop .slick-dots li							{ display:inline-block; margin:0 2px}
#pop .slick-dots li button					{ width:16px; height:16px; overflow:hidden; padding:0; font-size:1px; text-indent:-40px; background:#000; border:2px solid #fff; border-radius:50%; vertical-align:top;}
#pop .slick-dots li.slick-active button	{ background:#fff }


@media all and (max-width:668px){
    .bPopup							{ width:94%; left:3% !important; padding:0 1em}
    .bPopup .b-close				{ line-height:40px}
}
@media all and (max-width:468px){
    .bPopup .item .pop_tit		{ padding:.9em 7em .9em 1em; font-size:1.1rem; }
    .bPopup .controller			{ top:16px; right:.8em;}
    #pop .slick-dots 				{ right:3.7em; top:16px; }

    .bPopup .b-close				{ line-height:36px;}
}