﻿/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); */

.snackbe-modal-body{padding:10px 30px 30px}

.item.xans-record- {position:relative;}
.snackbe-quickview-pc-item {position: absolute;right: 0;bottom: 0;width: 100%;height:30px; background-color: rgba(255,255,255,0.5);color:black;font-weight: bold;font-size: 0.8rem;line-height: 30px;text-align: center; font-family: 'Noto Sans KR' ;cursor: pointer;}
.snackbe-quickview-mobile-item {position: absolute;bottom: 0;right: 0;width: 100%;height:30px; background-color: rgba(255,255,255,0.5);color:black;font-weight: bold;font-size: 0.8rem;line-height: 30px;text-align: center; font-family: 'Noto Sans KR' ;}

.snackbe-quickview-pc-item .snackbe-quickview-icon,.snackbe-quickview-mobile-item .snackbe-quickview-icon{
	vertical-align: middle;
	line-height: 30px;
	display: inline;
	width: 10px;
}

.snackbe-quickview-pc-item.use-quickview-image .snackbe-quickview-icon,.snackbe-quickview-mobile-item.use-quickview-image .snackbe-quickview-icon{
	vertical-align: middle;
	line-height: 30px;
	display: none;
	width: 10px;
}

.snackbe-quickview-pc-item.use-quickview-image{
	color:rgba(0,0,0,0) !important;
	background-color: rgba(0,0,0,0) !important;
	height: inherit;
	font-size: 0px;
  line-height: 0px;
}
.snackbe-quickview-mobile-item.use-quickview-image{
	color:rgba(0,0,0,0) !important;
	background-color: rgba(0,0,0,0) !important;
	height: inherit;
	font-size: 0px;
  line-height: 0px;
}
/*
.snackbe-quickview-pc-item::before,.snackbe-quickview-mobile-item::before{
	background: url('http://dev.snackbe.com/image/icon/quick_play_icon.png');
	width: 30px;
	height: 30px;
	display: inline-block;
}
.snackbe-quickview-pc-item.use-quickview-image::before,.snackbe-quickview-mobile-item.use-quickview-image::before{
	background: none;
	width: 0px;
	height: 0px;
	display: none;
}
*/
.snackbe-append-img{display: none;}

.use-quickview-image .snackbe-append-img{
	display: block !important;
}


#snackbe-draggable{position: fixed; cursor: n-resize; right: 10px; bottom: 150px; width: 60px; height: auto; border: 0 !important;background: transparent !important;}

#snackbe_main .snackbe-modal{padding-top:40px;}
#snackbe_main .snackbe-modal-container .snackbe-modal-dialog#quickwrap{	/*width: 710px;min-width: 710px;*/width:707px;min-width:707px;overflow:hidden !important;border-radius: 9px;}
#quickwrap{padding:20px 0px 28px !important;width:100%; background:url(http://dev.snackbe.com/image/bg_block.png) repeat; margin: 0 auto !important;border:1px solid #f5f5f5;margin-top:290px;}
#quickwrap .quickview {padding:0px;}
#quickwrap .quickview .quickClose{position:absolute; top:25px; right:23px;}
#quickwrap .quickview .quickList{position:absolute;left:0;top:81px;width:80px;margin-left:20px;}
#quickwrap .quickview .quickList ul{overflow:hidden;padding-left:0;}
#quickwrap .quickview .quickList ul li{width:72px;position:relative;margin-bottom:20px;}
#quickwrap .quickview .quickList ul li img{width: 100%;height: 72px;border:1px solid #c9c9c9;border-radius:9px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
#quickwrap .quickview .quickList ul li.active a {/*background:url(http://dev.snackbe.com/image/icon/play_btn.png) no-repeat 95% 50%; */}
#quickwrap .quickview .quickList ul li a{display:block;}
#quickwrap .quickview .quickList ul li.active[data-type='video'] a::before {
	display:block;
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5) url('http://dev.snackbe.com/image/icon/play_btn.png') no-repeat center center;
	border-radius:9px;
}

#quickwrap .quickview .quickList ul li.active a::before {
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5);
	display:block;border:2px solid #fccd5d;
	border-radius:9px;
	webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;box-sizing: border-box;
}


#quickwrap .quickview .quickPrdname{width:350px;word-break:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center; color:#000; font-size:24px; margin:1px auto 10px;padding:10px 0;}
#quickwrap .quickview .quickThumb{float:right;margin-left:80px;margin-bottom:20px;}
#quickwrap .quickview .quickThumb .quickPlay{width:550px;height:550px;}
#quickwrap .quickview .quickThumb .quickPlay img{/*width:100%;*/height:100%;margin:0 auto;text-align:center; object-fit: cover;border:1px solid #c9c9c9;border-radius:6px;}
#quickwrap .quickview .quickThumb .quickPlay iframe{width:100%;height:100%;border:1px solid #c9c9c9;border-radius:6px;background-color: black;}

#quickwrap  .quickSubmit{width:40%; line-height:55px;  margin:0 auto; clear:both;}
#quickwrap  .quickSubmit a{color:#000; height: 55px; line-height: 55px; display:block; box-sizing:border-box; border-radius:50px;border:1px solid #f2c355;background-color:#faca5b; font-size:18px; font-weight:bold;text-align:center; font-weight:bold; font-family: noto sans kr;}

#quickwrap_mb{width:100%; height:100%; background:#fff;}
#quickwrap_mb .quickview{position:relative; background:#000; width:100%; height: 100%;overflow:hidden;z-index: 10000000000;}
#quickwrap_mb .quickview .quickClose{position:absolute; top:30px; right:20px; width:45px; font-size:15px; font-weight:600; color:#fff;}
#quickwrap_mb .quickview .quickList{float:left;}
#quickwrap_mb .quickview .quickList ul{overflow:hidden; margin-right:10px;}
#quickwrap_mb .quickview .quickList ul li{margin-bottom:10px;}
#quickwrap_mb .quickview .quickPrdname{width:200px;word-break:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center; color:#fff; font-size:1.5em;font-weight:bold; padding:30px 0; margin: 0 auto;}
#quickwrap_mb .quickview .quickThumb{width:100%;/*height:calc(100% - 160px);*/height:calc(100% - 260px);background:black;overflow: hidden;}
#quickwrap_mb .quickview .quickThumb .quickPlay{}
#quickwrap_mb .quickview .quickThumb .quickPlay{float: left;}
#quickwrap_mb .quickview .quickThumb #quick_image {width:100%; height:100%;}

#quickwrap_mb .quickview .quickThumb .quickviewTab{position: absolute; bottom: 100px; width:100%; height: 49px; border-top:1px solid #2d2d2d;}
#quickwrap_mb .quickview .quickThumb .quickviewTab ul {overflow:hidden; margin: 0;padding: 0;}
#quickwrap_mb .quickview .quickThumb .quickviewTab ul li{width:100%; float:left; position:relative; text-align:center; font-size:1.3em; font-weight:600;font-family:'Arial'; color:#8a8a8a; cursor:pointer;line-height: 70px;}
#quickwrap_mb .quickview .quickThumb .quickviewTab ul li.active , #quickwrap_mb .quickview .quickThumb .quickviewTab ul li:hover{color:#fff;}
#quickwrap_mb .quickview .quickThumb .quickviewTab ul li.double{width: 50% !important;}
#quickwrap_mb .quickview .quickThumb .quickviewTab ul li.double:first-child:after{height:41px;content:'|'; color:#8a8a8a;position:absolute;right:0;top:0;}
#quickwrap_mb .quickview .quickThumb .player .controls{bottom:-10px;}
#quickwrap_mb .quickview .quickSubmit{position:fixed; bottom: 20px; width:100%; line-height:50px;border-top: 1px solid #2d2d2d;}
#quickwrap_mb .quickview .quickSubmit a{color:#8a8a8a; display:block; font-size:1.3em; text-align:center; font-weight:600; }
#quickwrap_mb .quickview .quickSubmit a img{width:auto; vertical-align:middle; margin-top:-3px; margin-left:5px;}
#quickwrap_footer{position:absolute;bottom:0;left:0;width:100%;text-align:center;padding:0;}
#snackbe_main  .copy{width:100%;padding:0;margin-top:28px !important;border-top:1px solid #ccc !important;text-align:center !important;}
#snackbe_main  .copy p{margin:0;height:39px !important;line-height:39px !important;font-size:14px !important;color:#999 !important;}
#snackbe_main .flex-control-paging li a.flex-active{ background: rgba(233, 237, 241, 1) !important;}
#snackbe_main .flex-control-paging li a{border:0 !important;}


#snackbe_main .clearfix {zoom:1;}
#snackbe_main .clearfix:before, .clearfix:after {content:"";display:table;}
#snackbe_main .clearfix:after {clear:both;}


#snackbe_main .snackbe-modal-mark-mobile{
	display: none;
}

@media (max-width: 960px) {
  #snackbe_main .snackbe-modal-mark-mobile{
    display: block;
  }
  #snackbe_main .snackbe-modal-mark-mobile, #snackbe_main .snackbe-modal-mark-mobile a,#snackbe_main .snackbe-modal-mark-mobile a:hover{
    color: rgba(255,255,255,0.2) !important;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9999999999;
  }
}
