/* jquery.scrollbar.css 시작 */
/*************** SCROLLBAR BASE CSS ***************/
.popup.basic .btn-area.inline a {
	display: inline-block;
	margin: 0px 2.5px;
	width: 105px;
	font-size: 12px;
	height: 35px;
	line-height: 33px;
}

/* 찜하기,장바구니 팝업 */

.popup.basic .get-box {
	padding: 27px 0px;
}

.popup.basic .get-box p.first {
	font-size: 13px;
	color: #222;
	margin-bottom: 10px;
}

.popup.basic .get-box p.last {
	font-size: 12px;
	color: #979797;
}

.popup.basic .get-box p:last-child {
	margin: 0;
}

li.list .description {
	margin-top: 12px;
}
li.list .prd-brand {
	font-size: 14px;
	color: #3e3e3e;
	font-weight: bold;
	line-height: 1;
	margin-top: 15px;
	margin-bottom: 10px;
}

li.list .prd-name {
	display: block;
	font-size: 12px;
	color: #343434;
	line-height: 1.3;
	margin-bottom: 7px;
}

li.list .prd-price {
	font-size: 16px;
	color: #222;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 3px;
	position: relative;
}

li.list .prd-price span {
	font-size: 16px;
}

li.list .prd-custom {
	font-size: 12px;
	color: #666;
	text-decoration: line-through;
}

li.list span.discount-rate {
	position: absolute;
	right: 0;
	font-size: 14px;
	color: #ee3124;
	font-weight: bold;
}
li.list .prd-name  { height:2em; line-height:2em; }
.inline .list .description .line_t { border-bottom:1px dotted #ddd; width:100%; height:1px; display:inline-block; margin:5px 0; }
li.list .prd-price { margin-top: 7px; }
li.list .prd-name {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	/*display: -webkit-box;*/
	display:block;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	line-height: 1.3em;
	height: 2.6em;
	word-break: break-all;
}

.line-item .line { position:relative; text-align:center; }
.line-item .line h3 {
    font-size: 20px;
    color: #3e3e3e;
    font-weight: 700;
    position: relative;
    z-index: 5;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px;
}
.line-item .line::after { content:""; width:100%; height:1px; background:#d4d4d4; position:absolute; top:50%; left:0; margin-top:-0.5px; }


.line-item .no-line-item { position:relative; text-align:center; margin-top:5px; }
.line-item .no-line-item h4 {
    font-size: 13px;
    color: #3e3e3e;
    font-weight: 700;
    position: relative;
    z-index: 5;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px;
	margin-top:5px;
}
.line-item .no-line-item h3 {
    font-size: 16px;
    color: #3e3e3e;
    font-weight: bold;
    position: relative;
    z-index: 5;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px;
	margin-top:5px;
}
.line-item .no-line-item::after { content:""; width:100%; height:1px; position:absolute; top:50%; left:0; margin-top:-0.5px; }

.line-item ul { overflow:hidden; padding:0 2.5%; }
.line-item ul li { float:left; width:30%; }
.line-item ul li:nth-child(3n+2) { margin:0 5%; }
.line-item ul li .thumbnail { width:100%; }
.line-item ul li .thumbnail img { width:100%; }

.best_item { padding:30px 0; }


.list_cart {
	display: inline-block;
	width: 20px;
	height: 20px;
	float: right;
	background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-cart-b.png) no-repeat center;
    background-size: 20px auto;
	cursor: pointer;
}
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}

.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;7
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}

.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}

/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

/*************** SIMPLE OUTER SCROLLBAR ***************/

.scrollbar-outer > .scroll-element,
.scrollbar-outer > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-outer > .scroll-element {
    background-color: #ffffff;
}

.scrollbar-outer > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-outer > .scroll-element.scroll-x {
    bottom: 0;
    height: 12px;
    left: 0;
    width: 100%;
}

.scrollbar-outer > .scroll-element.scroll-y {
    height: 100%;
    right: 0;
    top: 0;
    width: 12px;
}

.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer { height: 8px; top: 2px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { left: 2px; width: 8px; }

.scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; }
.scrollbar-outer > .scroll-element .scroll-element_track { background-color: #eeeeee; }

.scrollbar-outer > .scroll-element .scroll-element_outer,
.scrollbar-outer > .scroll-element .scroll-element_track,
.scrollbar-outer > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-outer > .scroll-element .scroll-bar { background-color: #d9d9d9; }
.scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: #c2c2c2; }
.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


/* scrollbar height/width & offset from container borders */

.scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; }
.scrollbar-outer > .scroll-content.scroll-scrollx_visible { top:  -12px; margin-top:  12px; }

.scrollbar-outer > .scroll-element.scroll-x .scroll-bar { min-width: 10px; }
.scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -14px; }

.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -14px; }
.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -14px; }

/*************** SCROLLBAR MAC OS X ***************/

.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-macosx > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar {
    background-color: #6C6E71;
    display: block;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}


.scrollbar-macosx > .scroll-element.scroll-x {
    bottom: 0px;
    height: 0px;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}

.scrollbar-macosx > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0px;
    top: 0;
    width: 0px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }

.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }

/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }

/*************** SCROLLBAR LIGHT ***************/

.scrollbar-light > .scroll-element,
.scrollbar-light > .scroll-element div {
    border: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-light > .scroll-element {
    background-color: #ffffff;
}

.scrollbar-light > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-light > .scroll-element .scroll-element_outer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.scrollbar-light > .scroll-element .scroll-element_size {
    background: #dbdbdb;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
    background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
    background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
    background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
    background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
    background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.scrollbar-light > .scroll-element.scroll-x {
    bottom: 0;
    height: 17px;
    left: 0;
    min-width: 100%;
    width: 100%;
}

.scrollbar-light > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0;
    top: 0;
    width: 17px;
}

.scrollbar-light > .scroll-element .scroll-bar {
    background: #fefefe;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
    background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
    background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
    background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
    background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
    background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);

    border: 1px solid #dbdbdb;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* scrollbar height/width & offset from container borders */

.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
.scrollbar-light > .scroll-content.scroll-scrollx_visible { top:  -17px; margin-top:  17px; }

.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }

.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }

.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }

/* update scrollbar offset if both scrolls are visible */

.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }

.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }

/*************** SCROLLBAR RAIL ***************/

.scrollbar-rail > .scroll-element,
.scrollbar-rail > .scroll-element div
{
    border: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-rail > .scroll-element {
    background-color: #ffffff;
}

.scrollbar-rail > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-rail > .scroll-element .scroll-element_size {
    background-color: #999;
    background-color: rgba(0, 0, 0, 0.3);
}

.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
    background-color: #666;
    background-color: rgba(0, 0, 0, 0.5);
}

.scrollbar-rail > .scroll-element.scroll-x {
    bottom: 0;
    height: 12px;
    left: 0;
    min-width: 100%;
    padding: 3px 0 2px;
    width: 100%;
}

.scrollbar-rail > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    padding: 0 2px 0 3px;
    right: 0;
    top: 0;
    width: 12px;
}

.scrollbar-rail > .scroll-element .scroll-bar {
    background-color: #d0b9a0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* scrollbar height/width & offset from container borders */

.scrollbar-rail > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
.scrollbar-rail > .scroll-content.scroll-scrollx_visible { margin-top: 17px; top: -17px; }

.scrollbar-rail > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 1px; }
.scrollbar-rail > .scroll-element.scroll-y .scroll-bar { left: 1px; min-height: 10px; width: 10px; }

.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer { height: 15px; left: 5px; }
.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size { height: 2px; left: -10px; top: 5px; }

.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer { top: 5px; width: 15px; }
.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size { left: 5px; top: -10px; width: 2px; }

/* update scrollbar offset if both scrolls are visible */

.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -25px; }
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -25px; }

.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -25px; }
.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -25px; }

/*************** SCROLLBAR DYNAMIC ***************/

.scrollbar-dynamic > .scroll-element,
.scrollbar-dynamic > .scroll-element div
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-dynamic > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-dynamic > .scroll-element.scroll-x {
    bottom: 2px;
    height: 7px;
    left: 0;
    min-width: 100%;
    width: 100%;
}

.scrollbar-dynamic > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 2px;
    top: 0;
    width: 7px;
}

.scrollbar-dynamic > .scroll-element .scroll-element_outer {
    opacity: 0.3;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_size {
    background-color: #cccccc;
    opacity: 0;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.scrollbar-dynamic > .scroll-element .scroll-bar {
    background-color: #6c6e71;

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

/* scrollbar height/width & offset from container borders */

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
    bottom: 0;
    height: 7px;
    min-width: 24px;
    top: auto;
}
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
    left: auto;
    min-height: 24px;
    right: 0;
    width: 7px;
}

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
    bottom: 0;
    top: auto;
    left: 2px;

    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    -o-transition: height 0.2s;
    -ms-transition: height 0.2s;
    transition: height 0.2s;
}

.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
    left: auto;
    right: 0;
    top: 2px;

    -webkit-transition: width 0.2s;
    -moz-transition: width 0.2s;
    -o-transition: width 0.2s;
    -ms-transition: width 0.2s;
    transition: width 0.2s;
}

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size { top: -4px; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }


/* hover & drag */

.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
    overflow: hidden;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
    opacity: 1;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
    height: 100%;
    width: 100%;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
    height: 20px;
    min-height: 7px;
}
.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
    min-width: 7px;
    width: 20px;
}

/*************** SCROLLBAR GOOGLE CHROME ***************/

.scrollbar-chrome > .scroll-element,
.scrollbar-chrome > .scroll-element div
{
    border: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-chrome > .scroll-element {
    background-color: #ffffff;
}

.scrollbar-chrome > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-chrome > .scroll-element .scroll-element_outer {}

.scrollbar-chrome > .scroll-element .scroll-element_track {
    background: #f1f1f1;
    border: 1px solid #dbdbdb;
}

.scrollbar-chrome > .scroll-element.scroll-x {
    bottom: 0;
    height: 16px;
    left: 0;
    min-width: 100%;
    width: 100%;
}

.scrollbar-chrome > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0;
    top: 0;
    width: 16px;
}

.scrollbar-chrome > .scroll-element .scroll-bar {
    background-color: #d9d9d9;
    border: 1px solid #bdbdbd;
    cursor: default;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.scrollbar-chrome > .scroll-element .scroll-bar:hover {
    background-color: #c2c2c2;
    border-color: #a9a9a9;
}

.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
    background-color: #919191;
    border-color: #7e7e7e;
}

/* scrollbar height/width & offset from container borders */

.scrollbar-chrome > .scroll-content.scroll-scrolly_visible { left: -16px; margin-left: 16px; }
.scrollbar-chrome > .scroll-content.scroll-scrollx_visible { top:  -16px; margin-top:  16px; }

.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar { height: 8px; min-width: 10px; top: 3px; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar { left: 3px; min-height: 10px; width: 8px; }

.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer { border-left: 1px solid #dbdbdb; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track { height: 14px; left: -3px; }
.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size { height: 14px; left: -4px; }

.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer { border-top: 1px solid #dbdbdb; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track { top: -3px; width: 14px; }
.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size { top: -4px; width: 14px; }

/* update scrollbar offset if both scrolls are visible */

.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }

.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }

/* jquery.scrollbar.css 끝 */

/* swiper.min.css 시작 */
/**
 * Swiper 4.3.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 5, 2018
 */
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}
/* swiper.min.css 시작 */

/* common.css 시작 */
/* 공통 클래스 */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    color: #343434;
}

a,
a:hover {
    text-decoration: none;
    color: #343434;
}

h1,
h2,
h3,
h4,
h5,
h6,
h7,
p {
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

ul,
li {
    margin: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

li:focus,
a:focus,
button:focus,
input:focus {
    outline: none;
}

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
    border-radius: 0px;
    box-shadow: none;
    /* -webkit-appearance: none; */
}

input::-webkit-input-placeholder {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
}

input::-moz-placeholder {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
}

input:-ms-input-placeholder {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
}

input:-moz-placeholder {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
}

.inner {
    padding: 0 10px;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.margin-b {
    border-bottom: 10px solid #fff;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.inline {
    font-size: 0;
}

.inline > * {
    display: inline-block;
    vertical-align: top;
}

.relative {
    position: relative;

}

.text-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-one-line-m {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-two-line-m {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: block;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	word-break: break-all;
}

.vertical-c {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.horizon-c {
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.vert-hori-c {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.easing-one {
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.easing-two {
    -khtml-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.easing-three {
    -khtml-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.symbol {
    font-size: 13px;
    color: #ee3124;
    position: relative;
    top: 2px;
}

/* 상단 띠배너 영역 */

.top-line-banner-wrap .banner-box {
    font-size: 0;
}

.top-line-banner-wrap .banner-box img {
    width: 100%;
    height: auto;
}

.top-line-banner-wrap .caption-box {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.top-line-banner-wrap .caption-box p {
    color: #fff;
    font-size: 15px;
}

.top-line-banner-wrap .caption-box p span {
    margin: 0px 1px;
    letter-spacing: 2px;
}

.top-line-banner-wrap .caption-box p span:last-child {
    color: #cae5ff;
}

.top-line-banner-wrap a.btn-close {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -6.5px;
}

.top-line-banner-wrap a.btn-close img {
    width: 14px;
    height: auto;
}

#header .header-top {
    height: 41px;
}

#header .header-top a.btn-side {
    display: block;
    position: absolute;
    top: 0;
    left: 12px;
    width: 19px;
    height: 41px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-bar-b.png) no-repeat center;
    background-size: 19px auto;
    font-size: 0;
}

#header .header-top .top-logo {
    width: 117px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#header .header-top .top-logo img {
    width: 100%;
    height: auto;
}

#header .header-top ul.right-menu {
    position: absolute;
    top: 0;
    right: 20px;
    width: ;
    height: 41px;
}

#header .header-top ul.right-menu li.search a {
    display: block;
    width: 31px;
    height: 41px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-search-m.png) no-repeat center;
    background-size: 19px auto;
}

#header .header-top ul.right-menu li.cart a {
    display: block;
    width: 20px;
    height: 41px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-cart-b.png) no-repeat center;
    background-size: 20px auto;
    position: relative;
}

#header .header-top ul.right-menu li.cart a span.cart-count {
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    border-radius: 50%;
    background: #ff0007;
    position: absolute;
    top: 6px;
    right: -8px;
}

#header .header-category {
    position: relative;
	top: -3px;
}

#header .header-category:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    position: absolute;
    bottom: 0px;
    left: 0;
}

#header .header-category li {
    width: auto;
}

#header .header-category li a {
    display: block;
    line-height: 36px;
    font-size: 14px;
    color: #3c3c3c;
    padding: 0px 12px;
    position: relative;
}

#header .header-category li .gnb_spot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ee3124;
    font-size: 0px;
    position: absolute;
    color: #ee3124;
    left: 6px;
    top: 3px;
}

#header .header-category li.on a {
    color: #ee3124;
}

#header .header-category li.on a:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #ee3124;
    position: absolute;
    bottom: 0px;
    left: 0;
}

/* 서브 상단 영역 */

#sub-header {
    width: 100%;
    height: 47px;
}

#sub-header .header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #ededed;
    z-index: 50;
}

#sub-header .header-wrap .wrap-inner {
    height: 100%;
}

#sub-header .header-wrap a.btn-prev {
    display: block;
    width: 27px;
    height: 46px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-prev.png)no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 10px;
}

#sub-header .header-wrap h1.header-title {
    line-height: 46px;
    color: #000;
    font-size: 16px;
}

#sub-header .header-wrap ul.right-menu {
    position: absolute;
    top: 0;
    right: 10px;
    height: 46px;
}

#sub-header .header-wrap ul.right-menu li.search a {
    display: block;
    width: 31px;
    height: 46px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-search-m.png) no-repeat center;
    background-size: 19px auto;
}

#sub-header .header-wrap ul.right-menu li.cart a {
    display: block;
    width: 32px;
    height: 46px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-cart-b.png) no-repeat center;
    background-size: 20px auto;
    position: relative;
}

#sub-header .header-wrap ul.right-menu li.cart a span.cart-count {
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    border-radius: 50%;
    background: #ff0007;
    position: absolute;
    top: 8px;
    right: 0;
}

.search-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    background: #fff;
    box-shadow: 1px 1px 5px #d9d9d9;
}

.search-popup.on {
    top: 56px;
    opacity: 1;
    visibility: visible;
}

.search-popup legend {
    display: none;
}

.search-popup fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

.search-popup a.btn-close {
    display: block;
    width: 27px;
    height: 24px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-prev.png)no-repeat;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -12px;
}

/*.search-popup a.btn-close:after {
    content: "";
    display: block;
    width: 25px;
    height: 26px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-symbol.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    right: -35px;
    margin-top: -13px;
}*/

.search-popup a.btn_search_home {
    display: block;
	width: 27px;
	height: 24px;
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 47px;
	margin-top: -13px;
}

.search-popup a.btn_search_home img {
	width: 25px;
	height: 26px;
}

.search-popup .search-inner {
    width: calc(100% - 67px);
    border-bottom: 2px solid #000;
    margin: 10px 0px 14px 52px;
}

.search-popup input.search-input {
    border: none;
    padding: 0;
    margin: 0;
    width: calc(100% - 27px);
    height: 36px;
    font-size: 12px;
    color: #888;
}

.search-popup input.search-input::-webkit-input-placeholder {
    font-size: 12px;
    color: #888;
}

.search-popup input.search-input::-moz-placeholder {
    font-size: 12px;
    color: #888;
}

.search-popup input.search-input:-ms-input-placeholder {
    font-size: 12px;
    color: #888;
}

.search-popup input.search-input:-moz-placeholder {
    font-size: 12px;
    color: #888;
}

.search-popup .submit-search {
    border: none;
    background: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -10px;
    padding: 0;
}

.search-popup .submit-search img {
    width: 100%;
    height: auto;
}

.search-popup .tab-menu ul {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.search-popup .tab-menu li {
    width: 50%;
    position: relative;
}

.search-popup .tab-menu li.on:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #ee3124;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.search-popup .tab-menu li a {
    font-size: 14px;
    color: #222;
    display: block;
    text-align: center;
    line-height: 44px;
}

.search-popup .tab-menu li.on a {
    color: #ee3124;
    font-weight: bold;
}

.search-popup .tab-content {
    height: calc(100% - 104px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.search-popup .content-box {
    display: none;
}

.search-popup .content-box.on {
    display: block;
}

.search-popup .content-box li {
    position: relative;
    padding: 10.5px 0px;
    text-indent: 10px;
    border-bottom: 1px solid #e4e4e4;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search-popup .content-box li:hover {
    opacity: .6;
}

.search-popup .content-box li a {
    font-size: 0;
}

.search-popup .content-box li a span {
    display: inline-block;
    vertical-align: top;
}

.search-popup .content-box li a span.num {
    font-size: 14px;
    color: #ee3124;
    font-family: 'Roboto', sans-serif;
    width: 17px;
    font-weight: 500;
    margin-right: 10px;
    text-align: center;
}

.search-popup .content-box li a span.keyword {
    font-size: 13px;
    color: #414141;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-popup .content-box li a span.date {
    font-size: 13px;
    color: #686868;
    font-family: 'Roboto', sans-serif;
    padding-right: 20px;
}

.search-popup .content-box.hot-keyword li a span.keyword {
    width: 223px;
}

.search-popup .content-box.recent-keyword li a span.keyword {
    width: calc(100% - 102px);
}

.search-popup .content-box li button.btn-del {
    border: none;
    background: #fff url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-x-g.png) no-repeat;
    background-size: 100%;
    display: block;
    width: 15px;
    height: 14px;
    font-size: 0;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 10px;
}

.search-popup .content-box .close-box a {
    font-size: 14px;
    color: #777;
    display: block;
    line-height: 48px;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/* 검색 박스 */
.search-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #fff;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    visibility: hidden;
}

.search-box.on {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    visibility: visible;
}

.search-clear {
    border-radius: 50%;
    background: #b1b1b1;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 20px;
    right: 55px;
    padding: 0;
    text-align: center;
    line-height: 14px;
    color: #fff;    
}

.search-clear:hover {
    color: #fff;    
}

.search-clear img {
    width: 100%;
    height: auto;
}

.search-box legend {
    display: none;
}

.search-box fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

.search-box a.btn-close {
    display: block;
    width: 27px;
    height: 24px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-prev.png)no-repeat;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -12px;
}

/*.search-box a.btn-close:after {
    content: "";
    display: block;
    width: 25px;
    height: 26px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-symbol.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    right: -35px;
    margin-top: -13px;
}*/

.search-box a.btn_search_home {
    display: block;
	width: 27px;
	height: 24px;
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 47px;
	margin-top: -13px;
}

.search-box a.btn_search_home img {
	width: 25px;
	height: 26px;
}

.search-box .search-inner {
    width: calc(100% - 67px);
    border-bottom: 2px solid #000;
    margin: 10px 0px 14px 52px;
}

.search-box input.search-input {
    border: none;
    padding: 0;
    margin: 0;
    width: calc(100% - 27px);
    height: 36px;
    font-size: 12px;
    color: #888;
}

.search-box input.search-input::-webkit-input-placeholder {
    font-size: 12px;
    color: #888;
}

.search-box input.search-input::-moz-placeholder {
    font-size: 12px;
    color: #888;
}

.search-box input.search-input:-ms-input-placeholder {
    font-size: 12px;
    color: #888;
}

.search-box input.search-input:-moz-placeholder {
    font-size: 12px;
    color: #888;
}

.search-box .submit-search {
    border: none;
    background: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -10px;
    padding: 0;
}

.search-box .submit-search img {
    width: 100%;
    height: auto;
}

.search-box .tab-menu ul {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

.search-box .tab-menu li {
    width: 50%;
    position: relative;
}

.search-box .tab-menu li.on:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #ee3124;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.search-box .tab-menu li a {
    font-size: 14px;
    color: #222;
    display: block;
    text-align: center;
    line-height: 44px;
}

.search-box .tab-menu li.on a {
    color: #ee3124;
    font-weight: bold;
}

.search-box .tab-content {
    height: calc(100% - 104px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.search-box .content-box {
    display: none;
}

.search-box .content-box.on {
    display: block;
}

.search-box .content-box li {
    position: relative;
    padding: 10.5px 0px;
    text-indent: 10px;
    border-bottom: 1px solid #e4e4e4;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search-box .content-box li:hover {
    opacity: .6;
}

.search-box .content-box li a {
    font-size: 0;
}

.search-box .content-box li a span {
    display: inline-block;
    vertical-align: top;
}

.search-box .content-box li a span.num {
    font-size: 14px;
    color: #ee3124;
    font-family: 'Roboto', sans-serif;
    width: 17px;
    font-weight: 500;
    margin-right: 10px;
    text-align: center;
}

.search-box .content-box li a span.keyword {
    font-size: 13px;
    color: #414141;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box .content-box li a span.date {
    font-size: 13px;
    color: #686868;
    font-family: 'Roboto', sans-serif;
    padding-right: 20px;
}

.search-box .content-box.hot-keyword li a span.keyword {
    width: 223px;
}

.search-box .content-box.recent-keyword li a span.keyword {
    width: calc(100% - 102px);
}

.search-box .content-box li button.btn-del {
    border: none;
    background: #fff url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-x-g.png) no-repeat;
    background-size: 100%;
    display: block;
    width: 15px;
    height: 14px;
    font-size: 0;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 10px;
}

.search-box .content-box .close-box a {
    font-size: 14px;
    color: #777;
    display: block;
    line-height: 48px;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/* 검색어 입력 시 */

.keyword-typing {
    border-top: 1px solid #ededed;
    display: none;
}

.keyword-typing li {
    border-bottom: 1px solid #ededed;
	background: #fff url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-diagonal.png) no-repeat calc(100% - 10px);
    background-size: 15px auto;
}

.keyword-typing li a {
    display: block;
    font-size: 14px;
    color: #4f4f4f;
    line-height: 38px;
    text-indent: 10px;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 30px);
}

.keyword-typing li a span,
.keyword-typing p.not-content span {
    color: #ee3124;
}

.keyword-typing p.not-content {
    font-size: 16px;
    color: #888;
    margin: 15px 0px;
    line-height: 1.5;
}

/* 하단 영역 */

#footer {
    margin-top: 0px;
}

#footer .footer-notice-list {
    border-top: 1px solid #dfdfdf;
    height: 44px;
}

#footer .footer-notice-list ul {
    width: calc(100% - 10px);
}

#footer .footer-notice-list li a {
    display: block;
    width: calc(100% - 10px);
    line-height: 44px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-right-m.png) no-repeat right center;
    background-size: 7px auto;
}

#footer .footer-notice-list li span.icon {
    display: block;
    width: 38px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    font-size: 11px;
    color: #626262;
    margin: 10px 10px 10px 0px;
}

#footer .footer-notice-list li p.subject {
    width: calc(100% - 60px);
    font-size: 12px;
    color: #222;
}

#footer .footer-bottom {
    background: #efefef;
    padding: 15px 0px 51px 0;
}

#footer .footer-bottom .company-info h4.company-name {
    font-size: 13px;
    color: #222;
    line-height: 1;
    margin-bottom: 10px;
}

#footer .footer-bottom .company-info p {
    font-size: 13px;
    color: #6f6f6f;
    line-height: 1.6;
}

#footer .footer-bottom .company-info p.notice {
    margin-top: 10px;
}

#footer .footer-bottom .company-info p span {
    margin-right: 15px;
}

#footer .footer-bottom .footer-menu {
    margin: 15px 0px;
}

#footer .footer-bottom .footer-menu li:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #d0d0d0;
    margin: 0px 9px;
    position: relative;
    top: 1px;
}

#footer .footer-bottom .footer-menu li:last-child:after {
    display: none;
}

#footer .footer-bottom .footer-menu li a {
    display: inline-block;
    vertical-align: top;
    line-height: 14px;
    color: #464646;
    font-size: 12px;
    font-family: 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
}

#footer .footer-bottom .copyright p {
    font-size: 11px;
    color: #575757;
    line-height: 1.5;
}

#footer .footer-bottom .copyright p span.wib {
    color: #58abf8;
}

/* 픽스 하단 */

.fix-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #e1e1e1;
    background: #fff;
    z-index: 16;
}

.fix-footer.down {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

.fix-footer ul li.alarm {
        display: none;
}

.fix-footer ul li {
    width: 20%;
}

.fix-footer ul li a {
    display: block;
    padding: 33px 0px 5px;
    font-size: 12px;
    color: #222;
    line-height: 1;
}

/* 흑백아이콘 */
.fix-footer ul li.squareweek a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-sweek.png) no-repeat center 8px;
    background-size: 17px auto;
}

.fix-footer ul li.home a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-home.png) no-repeat center 7px;
    background-size: 17px auto;
}

.fix-footer ul li.mypage a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-user.png) no-repeat center 7px;
    background-size: 17px auto;
}

.fix-footer ul li.category a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-bar-b.png) no-repeat center 8px;
    background-size: 20px auto;
}

.fix-footer ul li.today a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-time.png) no-repeat center 7px;
    background-size: 18px auto;
}

.fix-footer ul li.alarm a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-bell.png) no-repeat center 7px;
    background-size: 19px auto;
}

/* 컬러아이콘 */
.fix-footer ul li.squareweek.on a {
    color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-sweek_on.png) no-repeat center 8px;
    background-size: 17px auto;
}

.fix-footer ul li.home.on a {
    color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-home_on.png) no-repeat center 7px;
    background-size: 17px auto;
}

.fix-footer ul li.mypage.on a {
	color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-user_on.png) no-repeat center 7px;
    background-size: 17px auto;
}

.fix-footer ul li.category.on a {
	color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-bar-b_on.png) no-repeat center 8px;
    background-size: 20px auto;
}

.fix-footer ul li.today.on a {
	color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-time_on.png) no-repeat center 7px;
    background-size: 18px auto;
}

.fix-footer ul li.alarm.on a {
	color: #ee3124;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-bell_on.png) no-repeat center 7px;
    background-size: 19px auto;
}

/* lnb */

.lnb-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #fff;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.lnb-wrap.on {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.lnb-wrap .content-wrap {
    height: calc(100% - 102px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.lnb-wrap .top {
    line-height: 54px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 0 0 10px;
    background: #fff;
}

.lnb-wrap .top a.btn-login {
    font-size: 15px;
    color: #222;
    display: inline-block;
}

.lnb-wrap .top a.btn-close {
    position: absolute;
    right: 10px;
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-x-b.png) no-repeat center;
    background-size: 16px auto;
}

.lnb-wrap .top a.btn-heart {
    position: absolute;
    right: 50px;
    display: block;
    width: 20px;
    height: 19px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-h-b.png) no-repeat center;
    background-size: 19px auto;
}

.lnb-wrap .top a.btn-alarm {
    position: absolute;
    right: 43px;
    display: block;
    width: 18px;
    height: 18px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-a-b.png) no-repeat center;
    background-size: 18px auto;
}

.lnb-wrap .top .user {
    font-size: 0;
}

.lnb-wrap .top .user span {
    font-size: 15px;
    color: #222;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.lnb-wrap .top img {
    width: 36px;
    vertical-align: middle;
}

.lnb-wrap .lnb-title p,
.lnb-wrap .lnb-title a {
    font-size: 14px;
    color: #222;
    line-height: 46px;
    text-indent: 10px;
    display: inline-block;
}

.lnb-wrap .lnb-title a {
    padding-right: 15px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-right-m-b.png) no-repeat right center;
    background-size: 6px auto;
}

.lnb-wrap .top-menu {
    border-bottom: 1px solid #f0f0f0;
	padding: 0;
    background: #fff;
}

.lnb-wrap .top-menu li {
    width: 33.333%;
}

.lnb-wrap .top-menu li a {
    display: block;
    border-right: 1px solid #f0f0f0;
    line-height: 46px;
}

.lnb-wrap .top-menu li a span {
    font-size: 0;
    vertical-align: middle;
    display: inline-block;
}

.lnb-wrap .top-menu li a span.icon {
    margin-right: 10px;
}

.lnb-wrap .top-menu li a span.icon img {
    vertical-align: middle;
}

.lnb-wrap .top-menu li:nth-of-type(1) a span.icon img {
    width: 21px;
    height: auto;
}

.lnb-wrap .top-menu li:nth-of-type(2) a span.icon img {
    width: 24px;
    height: auto;
}

.lnb-wrap .top-menu li:nth-of-type(3) a span.icon img {
    width: 22px;
    height: auto;
}

.lnb-wrap .top-menu li a span.text {
    color: #222;
    font-size: 12.8px;
}

.lnb-wrap .top-menu li a span.cart-count {
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    border-radius: 50%;
    background: #ff0007;
    position: absolute;
    top: 9px;
    right: -6px;
}

.lnb-wrap .category-wrap .lnb-title {
    border-bottom: 1px solid #f0f0f0;
}

.lnb-wrap .category-wrap .category-list {
    padding-top: 20px;
}

.lnb-wrap .category-wrap li {
    width: 25%;
    margin: 0px 0px 23px;
    text-align: center;
}

.lnb-wrap .category-wrap li span.thumbnail {
    display: inline-block;
    width: 63px;
    font-size: 0;
    margin-bottom: 10px;
}

.lnb-wrap .category-wrap li span.thumbnail img {
    width: 100%;
    height: auto;
}

.lnb-wrap .category-wrap li p {
    font-size: 12px;
    color: #393939;
    text-align: center;
}

.lnb-wrap .category-wrap li.current p {
    color: #ee3124; 
}

.lnb-wrap .brand-search {
    padding-bottom: 10px;
}

.lnb-wrap .brand-search a {
    display: block;
    background: #f2f2f2;
    line-height: 47px;
    font-size: 15px;
    color: #383838;
    border: 1px solid #e2e2e2;
}

.lnb-wrap .brand-search a img {
    vertical-align: middle;
    margin-right: 7px;
    width: 20px;
    height: auto;
}

.lnb-wrap .today-view-wrap {
    margin-bottom: 10px;
}

.lnb-wrap .today-view-wrap li {
    width: 25%;
    margin-right: 2.77777777777778%;
}

.lnb-wrap .today-view-wrap li:first-child {
    margin-left: 2.77777777777778%;
}

.lnb-wrap .today-view-wrap li .thumbnail {
    font-size: 0;
}

.lnb-wrap .today-view-wrap li .thumbnail img {
    width: 100%;
    height: auto;
}

.lnb-wrap .bottom-menu {
    background: #f2f2f2;
}

.lnb-wrap .bottom-menu li {
    width: 50%;
    position: relative;
}



.lnb-wrap .bottom-menu li a {
    display: block;
    line-height: 45px;
    font-size: 12.8px;
    color: #222;
}

.lnb-wrap .bottom-menu li:nth-of-type(1) a img {
    vertical-align: middle;
    width: 28px;
    height: auto;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
}

.lnb-wrap .bottom-menu li:nth-of-type(2) a img {
    vertical-align: middle;
    width: 19px;
    height: auto;
    position: relative;
    bottom: 1px;
    margin-right: 10px;
}

/* 스크롤 상단 이동 버튼 */

a.btn-scroll-top {
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 20;
    font-size: 0;
    display: block;
    width: 44px;
    opacity: 0;
    visibility: hidden;
}

a.btn-scroll-top.on {
    opacity: 1;
    visibility: visible;
}

a.btn-scroll-top img {
    width: 100%;
    height: auto;
}


/* 공통 슬라이드 페이저 */

.slide-pager span {
    width: 8px;
    height: 8px;
    background: #fff;
    opacity: .5;
    vertical-align: middle;
    border-radius: 5px;
}

.slide-pager span.swiper-pagination-bullet-active {
    width: 30px;
    background: #fff;
    opacity: 0.7;
}

.slide-pager2 span {
    width: 8px;
    height: 8px;
    background: #000;
    opacity: .4;
    vertical-align: middle;
    border-radius: 5px;
}

.slide-pager2 span.swiper-pagination-bullet-active {
    width: 30px;
    background: #ee3124;
    opacity: 1;
}

.slide-pager3 span {
    width: 10px;
    height: 10px;
    background: #000;
    opacity: .1;
    vertical-align: middle;
    border-radius: 5px;
}

.slide-pager3 span.swiper-pagination-bullet-active {
    background: #000;
    opacity: 1;
}

/* 공통 상품 */

.product-list-wrap {
    padding: 0px 5px;
    font-size: 0;
}

.product-list-wrap.basic li.list {
    width: calc(50% - 10px);
    margin: 0px 5px 24px 5px;
}

.product-list-wrap.basic li.list a{
    display: block;
    position: relative;

}

.product-list-wrap.basic li.list .thumbnail {
    position: relative;
    display: block;
    padding-top: 100%;
    overflow: hidden;
}


.product-list-wrap.basic li.list .thumbnail:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.03);
    z-index: 10;
}


.product-list-wrap.basic li.list .thumbnail img {
    /*width: 100%;
    height: auto;*/
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.product-list-wrap.basic li.list .description {
    margin-top: 10px;
}

.product-list-wrap.basic li.list .prd-brand {
    font-size: 13px;
    color: #000;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}

.product-list-wrap.basic li.list .prd-name {
    font-size: 13px;
    color: #343434;
    line-height: 1.5;
    margin-bottom: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.product-list-wrap.basic li.list .prd-price {
    font-size: 16px;
    color: #222;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2px;
    position: relative;
}

.product-list-wrap.basic li.list .prd-price span {
    font-size: 11px;
}

.product-list-wrap.basic li.list .prd-custom {
    font-size: 11px;
    color: #666;
    text-decoration: line-through;
}

.product-list-wrap.basic li.list span.discount-rate {
    position: absolute;
    right: 0;
    font-size: 16px;
    color: #ee3124;
    font-weight: bold;
}


/* 2줄 공통 상품 */

.product-list-wrap2 {
    padding: 0px 4px;
    font-size: 0;
}

.product-list-wrap2.basic div.list {
    width: calc(25% - 10px) !important;
    margin: 0px 5px 24px 5px;
}

.product-list-wrap2.basic li.list a{
    display: block;
    position: relative;

}

.product-list-wrap2.basic div.list .thumbnail {
    position: relative;
    display: block;
    padding-top: 100%;
    overflow: hidden;
}

.product-list-wrap2.basic div.list .thumbnail:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.03);
    z-index: 10;
}

.product-list-wrap2.basic div.list .thumbnail img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.product-list-wrap2.basic div.list .description {
    margin-top: 10px;
}

.product-list-wrap2.basic div.list .prd-brand {
    font-size: 13px;
    color: #000;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}

.product-list-wrap2.basic div.list .prd-name {
    font-size: 13px;
    color: #343434;
    line-height: 1.5;
    margin-bottom: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.product-list-wrap2.basic div.list .prd-price {
    font-size: 16px;
    color: #222;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2px;
    position: relative;
}

.product-list-wrap2.basic div.list .prd-price span {
    font-size: 11px;
}

.product-list-wrap2.basic div.list .prd-custom {
    font-size: 11px;
    color: #666;
    text-decoration: line-through;
}

.product-list-wrap2.basic div.list span.discount-rate {
    position: absolute;
    right: 0;
    font-size: 16px;
    color: #ee3124;
    font-weight: bold;
}


/* 더보기 버튼 공통 */

.more {
    margin: 18px 0px 28px;
}

a.btn-more {
    display: inline-block;
    border: 1px solid #626262;
    font-size: 14px;
    color: #353535;
    text-align: center;
    line-height: 41px;
    padding: 0px 30px;
}

a.btn-more img {
    width: 14px;
    height: auto;
    vertical-align: middle;
    margin-right: 7px;
}

@media (max-width: 320px) {
    
    .top-line-banner-wrap .caption-box p {
        color: #fff;
        font-size: 12px;
    }

}

/* 공통 체크박스 */

.check-box input[type="checkbox"]{
    display: none;
}

.check-box span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 6px;
}

.check-box span {
    width: 17px;
    height: 18px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-check-off.jpg) no-repeat;  
    background-size: 100% auto;
}

.check-box input[type="checkbox"] + label {
    font-size: 14px;
    color: #222;
}

.check-box input[type="checkbox"]:checked + label span {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-check-on.jpg) no-repeat;    
    background-size: 100%;
}

/* 공통 셀렉트박스 */

ul.basic-select {
    border: 1px solid #e1e1e1;
    width: 100%;
    height: 39px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-down-m.png) no-repeat calc(100% - 10px) center;
    background-size: 14px auto;
    display: inline-block;
}

ul.basic-select.on {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-up-m.png) no-repeat calc(100% - 10px) center;
    background-size: 14px auto;
}

ul.basic-select>li>a {
    display: block;
    line-height: 39px;
    font-size: 13px;
    color: #3c3c3c;
    text-indent: 10px;    
}

ul.basic-select ul.option {
    position: absolute;
    top: 38px;
    left: -1px;
    width: 100%;
    border: 1px solid #e1e1e1;
    background: #fff;
    border-top: 0;
/*    padding: 5px 0px;*/
    z-index: 20;
    display: none;
}

ul.basic-select ul.option li a {
    display: block;
    line-height: 39px;
    font-size: 13px;
    color: #3c3c3c;
    text-indent: 10px;        
}

ul.basic-select ul.option li.soldout a {
    color: #979797;
}

/* 공통 라디오 버튼 */

.radio-btn input[type="radio"] {
    display: none;
}

.radio-btn span {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-radio-off.png) no-repeat;    
    background-size: 100%;
    width: 18px;
    height: 18px;
    margin-right: 7px;
}

.radio-btn input[type="radio"] + label {
    color: #383838;
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    line-height: 19px;
}

.radio-btn input[type="radio"]:checked + label span {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-radio-on.png) no-repeat; 
    background-size: 18px auto;
}

.radio-btn input[type="radio"]:disabled + label {
    color: #979797;    
}

.radio-btn input[type="radio"]:disabled + label span {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-radio-disabled.png) no-repeat;    
    background-size: 18px auto;
}

/* 공통 입력단 */

input.basic-input {
    padding: 0;
    margin: 0;
    height: 39px;
    border: 1px solid #e1e1e1;
    font-size: 13px;
    color: #222;
    vertical-align: top;
    text-indent: 10px;
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
    box-sizing: border-box;
}

input.basic-input:disabled {
    background: #f9f9f9;
    color: #9e9e9e;
}

textarea.basic-textarea {
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

input.file-name-input {
    display: inline-block;
    height: 39px;
    line-height: 39px;
    border: 1px solid #e1e1e1;
    background-color: #fff;
    vertical-align: top;
    box-sizing: border-box;
}

label.btn-file {
    display: inline-block;
    border: 1px solid #acacac;
    width: 81px;
    height: 39px;
    font-size: 13px;
    line-height: 39px;
    text-align: center;
    background: #fff;
    color: #353535;
    vertical-align: top;
    box-sizing: border-box;
}

input.btn-upload {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.file-box span.des {
    font-size: 12px;
    color: #979797;
    display: inline-block;
    margin-top: 5px;
}

/* 공통 버튼 */

a.btn-basic {
    border: 1px solid #5c5c5c;
    font-size: 12px;
    color: #313131;
    text-align: center;
    padding: 7px 12px;
    display: inline-block;
}

a.btn-basic.white {
    text-align: center;
    display: inline-block;
    width: calc(50% - 2.5px);
    height: 35px;
    line-height: 33px;
    border: 1px solid #aaa;
    color: #222;
    background: #fff;
    font-size: 13px;
    box-sizing: border-box;
    padding: 0;
}

a.btn-basic.black {
    text-align: center;
    display: inline-block;
    width: calc(50% - 2.5px);
    height: 35px;
    line-height: 33px;
    border: 1px solid #313131;
    font-size: 13px;    
    background: #313131;
    color: #fff;
    box-sizing: border-box;
    padding: 0;
}

/* 공통 팝업 */

.popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;        
    display:none;
}

.popup-bg.on {
    opacity: 1;
    visibility: visible;
    display:block;
}

.popup.basic {
    position: fixed;
    width: calc(100% - 20px);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;    
}

.popup.basic.on {
    opacity: 1;
    visibility: visible;
}

.popup.basic .popup-box {
    background: #fff;
}

.popup.basic .popup-box .inner {
    padding: 0px 18px 18px;
}

.popup.basic .title-area {
    border-bottom: 1px solid #393939;
}

.popup.basic .title-area h2 {
    line-height: 1;
    font-size: 18px;
    color: #222;
    padding: 17px 0px;
}

.popup.basic .title-area a.btn-close {
    display: block;
    width: 16px;
    height: 15px;
    font-size: 0;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-x-g.png) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0;
}

.popup.basic .btn-area a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    width: 100%;
    height: 43px;
    line-height: 43px;
    color: #353535;
    font-size: 14px;
    text-align: center;
    border: 1px solid #5f5f5f;
    background: #fff;
}

.popup.basic .btn-area a.black {
    background: #313131;
    border: #313131;
    color: #fff;
}

.popup.basic .btn-area.clearfix a {
    width: calc(50% - 2.5px);
}

/* 공통 전면 팝업 */

.popup.basic.front {
    width: 100%;
    height: 100%;
    top: 50px;
    left: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    display: block;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;    
}

.popup.basic.front.on {
    top: 0;
    opacity: 1;
    visibility: visible;
	z-index: 100;
}

.popup.basic.front .popup-box {
    height: calc(100% - 56px);
}

.popup.basic.front .title-area a.btn-close {
    right: 10px;
}

.popup.basic.front .title-area {
    border-bottom-color: #ededed;
}

.popup.basic.front .title-area h2 {
    font-size: 16.4px;
}

.popup.basic.front .inner {
    padding: 0px 10px;
}

/* 개인정보처리방침 팝업 */

.popup.basic.privacy-policy .content-box {
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.popup.basic.privacy-policy .content-box:last-child {
    border-bottom: 0;
}

.popup.basic.privacy-policy .content-box p {
    padding: 10px 0px 7px;
    color: #222;
}

.popup.basic.privacy-policy .content-box ul li {
    line-height: 1.5;
    display: table;
    width: 100%;
    color: #979797;
    font-size: 12px;    
}

.popup.basic.privacy-policy .content-box ul li span.dot {
    display: table-cell;
    vertical-align: top;
    width: 7px;
}

.popup.basic.privacy-policy .content-box ul li span.text {
    display: table-cell;
    vertical-align: top;
    width: calc(100% - 7px);
}

.popup.basic.privacy-policy .btn-area {
    margin: 5px 0px 0px;
}

.popup.basic.privacy-policy .btn-area a.black {
    display: inline-block;
    width: 105px;
    margin: 0;
}

/* 공유하기 팝업 */

.popup.basic.share .share-list {
    margin-top: 16px;
}

.popup.basic.share .share-list li {
    width: 22.047022%;
    margin: 0 3.269592% 6.26959247648903%;
}

.popup.basic.share .share-list li .icon {
    display: block;
    font-size: 0;
}

.popup.basic.share .share-list li .icon img {
    width: 68.24968007962463%;
    height: auto;
}

.popup.basic.share .share-list li .text {
    display: block;
    font-size: 13px;
    color: #222;
    margin-top: 8px;
}

.popup.basic.share .btn-area a.submit {
    width: 105px;
    height: 35px;
    line-height: 35px;
    margin: 10px auto 0;
}

/* 비밀번호 변경 팝업 */

.popup.basic.password-modify .inner {
    height: calc(100% - 10px);
	overflow: auto;
	-webkit-overflow-scrolling:touch;	
}

.popup.basic.password-modify .notice-box {
    margin-bottom: 20px;
}

.popup.basic.password-modify .notice-box .icon {
    padding: 27px 0px;
}

.popup.basic.password-modify .notice-box .icon img {
    width: 24.26666666666667%;
}

.popup.basic.password-modify .notice-box h3 {
    font-size: 19.5px;
    color: #2d2d2d;
    line-height: 1;
    margin-bottom: 5px;
}

.popup.basic.password-modify .notice-box h3 span {
    color: #ee3124;
}

.popup.basic.password-modify .notice-box p {
    font-size: 13px;
    color: #676767;
}

.popup.basic.password-modify input.basic-input {
    width: 100%;
    height: 40px;
    margin-bottom: 5px;
}

.popup.basic.password-modify p.notice-caption {
    font-size: 12px;
    color: #979797;
    line-height: 1.5;
    margin: 3px 0px 18px;
}

/* 필터 & 정렬 */

.filter-sort-wrap {
    padding: 10px;
}

.filter-sort-wrap a.btn {
    display: inline-block;
    vertical-align: top;
    width: 63px;
    height: 33px;
    line-height: 31px;
    font-size: 13px;
    color: #3c3c3c;
    background: #fff;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    text-align: center;
}

.filter-sort-wrap a.btn.sort-box {
    width: auto;
    padding: 0px 9px 0px 29px;
    text-align: left;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow.png) no-repeat 8px center;
    background-size: 15px auto;
}

.filter-sort-wrap .filter-btn a {
    margin-left: -1px;
}

/* 상세검색필터 팝업 */

.popup.basic.detail-filter .inner {
    padding: 0;
    height: calc(100% - 51px);
}

.popup.basic.detail-filter .popup-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100% - 10px);
}

.popup.basic.detail-filter .btn-area {
    position: relative;
    padding: 10px;
    border-top: 1px solid #ededed;
}

.popup.basic.detail-filter .section {
    padding: 0px 10px;
    border-top: 1px solid #ededed;
}

.popup.basic.detail-filter .section:first-child {
    border-top: 0px;
}

.popup.basic.detail-filter .section:last-child {
    border-bottom: 1px solid #ededed;
}

.popup.basic.detail-filter .section .top {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-down-m.png) no-repeat right center;
    background-size: 14px auto;
    line-height: 46px;
}

.popup.basic.detail-filter .section .top.on {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-up-m-r.png) no-repeat right center;
    background-size: 14px auto;
}

.popup.basic.detail-filter .section .top a {
    height: 46px;
    padding-left: 25px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    color: #888;
    line-height: 46px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.popup.basic.detail-filter .category.section .top a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-category.png) no-repeat left center;
    background-size: 15px auto;
}

.popup.basic.detail-filter .brand.section .top a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-krw.png) no-repeat left center;
    background-size: 15px auto;
}

.popup.basic.detail-filter .price.section .top a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-tag.png) no-repeat left center;
    background-size: 16px auto;
}

.popup.basic.detail-filter .section .top span:first-child {
    font-size: 13px;
    color: #383838;
    margin-right: 13px;
}

.popup.basic.detail-filter .section .top span {
    font-size: 13px;
    color: #979797;
    line-height: 46px;
}

.popup.basic.detail-filter .section .list {
    padding-bottom: 12px;
    display: none;
}


.popup.basic.detail-filter .section .top ~ div {
    display: none;
}

.popup.basic.detail-filter .section .list ul.depth-one>li>a>span:after,
.popup.basic.detail-filter .section .top span:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 46px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-right-s-g.png) no-repeat center;
    background-size: 5px auto;
}

.popup.basic.detail-filter .section .list ul.depth-one>li>a>span:after {
    height: 36px;
}

.popup.basic.detail-filter .section .list ul.depth-one>li>a>span:last-child:after,
.popup.basic.detail-filter .section .top span:first-child:after,
.popup.basic.detail-filter .section .top span:last-child:after {
    display: none;
}

.popup.basic.detail-filter .section .list ul.depth-one>li {
    margin-bottom: 5px;
    border: 1px solid #dadada;
}

.popup.basic.detail-filter .section .list ul.depth-one>li>a,
.popup.basic.detail-filter .section .list ul.depth-two>li.child>a {
    height: 36px;
    padding: 0px 10px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 36px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.popup.basic.detail-filter .category.section .list ul.depth-one>li>a,
.popup.basic.detail-filter .category.section .list ul.depth-two>li.child>a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-down-m.png) no-repeat calc(100% - 10px) center;
    background-size: 14px auto;        
}

.popup.basic.detail-filter .category.section .list ul.depth-one>li.on>a,
.popup.basic.detail-filter .category.section .list ul.depth-two>li.child.on>a {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-arrow-up-m-r.png) no-repeat calc(100% - 10px) center;
    background-size: 14px auto;
}

.popup.basic.detail-filter .category.section .list ul.depth-two>li.child>a,
.popup.basic.detail-filter .category.section .list ul.depth-two>li.child.on>a {
    background-position: right center;
}

.popup.basic.detail-filter .section .list ul.depth-one>li>a>span {
    color: #3c3c3c;
    font-size: 13px;
}

.popup.basic.detail-filter .section .list ul.depth-one>li.on>a>span,
.popup.basic.detail-filter .section .list ul.depth-one span.current,
.popup.basic.detail-filter .section .list ul.depth-one li.on>a,
.popup.basic.detail-filter .section .list ul.depth-one a.current>span{
    color: #ee3124;
}

.popup.basic.detail-filter .section .list ul.depth-two {
    padding: 0px 20px;
    background: #f9f9f9;
    display: none;
}

.popup.basic.detail-filter .section .list ul.depth-two>li {
    border-bottom: 1px solid #eaeaea;
}

.popup.basic.detail-filter .section .list ul.depth-two>li:last-child {
    border-bottom: 0;
}

.popup.basic.detail-filter .section .list ul.depth-two>li>a {
    display: block;
    line-height: 36px;
    font-size: 13px;
    color: #4f4f4f;
}

.popup.basic.detail-filter .section .list ul.depth-two>li.child>a,
.popup.basic.detail-filter .section .list ul.depth-two>li.child.on>a {
    padding: 0;
    background-position: right center;
}

.popup.basic.detail-filter .section .list ul.depth-three {
    margin-top: 5px;
    padding: 0px 10px;
    display: none;
}

.popup.basic.detail-filter .section .list ul.depth-three li {
    padding-bottom: 15px;
}

.popup.basic.detail-filter .section .list ul.depth-three li a {
    font-size: 13px;
    color: #979797;
}

.popup.basic.detail-filter .sort-box.section .top strong {
    margin-right: 60px;
    font-size: 13px;
    color: #383838;    
}

.popup.basic.detail-filter .sort-box.section .top a {
    padding-left: 0;
}

.popup.basic.detail-filter .sort-box.section .top span {
    color: #676767;
}

.popup.basic.detail-filter .sort-box.section ul.depth-one>li.on>a {
    color: #ee3124;
}

.popup.basic.detail-filter .brand.section .radio-btn {
    margin: 10px 25px 10px 0px;
}

.popup.basic.detail-filter .brand.section .list ul.depth-one {
    display: none;
}

.popup.basic.detail-filter .brand.section .list ul.depth-one.on {
    display: block;
}

.popup.basic.detail-filter .price.section .list {
    padding-bottom: 7px;
}

.popup.basic.detail-filter .price.section .custom-price input.basic-input {
    width: calc(50% - 8px);
    border-color: #979797;
}

.popup.basic.detail-filter .price.section .custom-price span.between {
    width: 16px;
    line-height: 39px;
    text-align: center;
    color: #4f4f4f;
    font-size: 13px;
}

.popup.basic.detail-filter .price.section a.btn-submit {
    display: block;
    border: 1px solid #979797;
    line-height: 37px;
    font-size: 14px;
    color: #353535;
    margin: 10px 0px 25px;
}

/* 회원가입 팝업 */

.popup.basic.join .btn-box {
    padding-bottom: 22px;
}

.popup.basic.join .btn-box.social {
    border-top: 1px solid #ededed;
}

.popup.basic.join .btn-box p {
    font-size: 14px;
    color: #222;
    line-height: 1;
    padding-top: 22px;
    margin-bottom: 7px;
}

.popup.basic.join .btn-box a {
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #676767;
    border: 1px solid #dadada;
}

.popup.basic.join .btn-box a.btn-join {
    background: #303030;
    border-color: #303030;
    color: #fff;
}

.popup.basic.join .btn-box a.naver-login {
    width: calc(50% - 7px);
    margin-right: 3px;
    display: inline-block;
    vertical-align: top;
}

.popup.basic.join .btn-box a.kakao-login {
    width: calc(50% - 7px);
    margin-left: 3px;
    display: inline-block;
    vertical-align: top;
}

.popup.basic.join .btn-box a img {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
}

.popup.basic.join .btn-box a.naver-login img {
    bottom: 1px;
    width: 69px;
    height: auto;
}

.popup.basic.join .btn-box a.kakao-login img {
    bottom: 3px;
    width: 55px;
    height: auto;
}

@media (max-width: 320px) {
    .popup.basic.join .btn-box a {
        font-size: 12px;
        height: 40px;
        line-height: 40px;
    }
    
    .popup.basic.join .btn-box a img {
        margin-right: 3px;
    }
    
    .popup.basic.join .btn-box a.naver-login img {
        bottom: 1px;
        width: 52px;
    }
    
    .popup.basic.join .btn-box a.kakao-login img {
        width: 44px;
    }
}

/* 출석체크 팝업 */

.popup.basic.attendance {
}

.popup.basic.attendance .popup-box .inner {
    
}

.popup.basic.attendance .title-area {
    margin-bottom: 13px;
}

.popup.basic.attendance .content {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/bg/bg-atten-check.jpg) no-repeat;
    background-size: 100% auto;
}

.popup.basic.attendance .date {
    padding: 205px 0px 15px;
}

.popup.basic.attendance .date a {
    font-size: 0;
}

.popup.basic.attendance .date a img {
    width: 12px;
    height: auto;
}

.popup.basic.attendance .date span.current {
    width: 110px;
    line-height: 12px;
    font-size: 13px;
    color: #fff;
}

.popup.basic.attendance .calendar {
    padding: 0px 16px;
}

.popup.basic.attendance .calendar table {
    background: #fff;
    border: 1px solid #cacaca;
    width: 100%;
}

.popup.basic.attendance .calendar table th {
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #cacaca;
    height: 20px;
    vertical-align: middle;
    font-size: 9px;
    color: #515151;
    background: #faf8f9;
    padding: 0;
    text-align: center;
}

.popup.basic.attendance .calendar table th.sun {
    color: #fb585d;
}

.popup.basic.attendance .calendar table th.sat {
    color: #247cff;
}

.popup.basic.attendance .calendar table th:last-child,
.popup.basic.attendance .calendar table td:last-child {
    border-right: 0;
}

.popup.basic.attendance .calendar table td {
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #cacaca;
    height: 35px;
    vertical-align: middle;
    background: #fff;
    padding: 0;
}

.popup.basic.attendance .calendar table .box {
    width: 100%;
    height: 100%;
}

.popup.basic.attendance .calendar table .box span.day {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 7px;
    color: #8e8e8e;
    line-height: 1;
    display: block;
}

.popup.basic.attendance .calendar table .box span.stamp {
    display: block;
    width: 100%;
    height: 100%;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-atten-check.png) no-repeat center;
    background-size: 18px auto;
}

.popup.basic.attendance .calendar table .box span.stamp.checked {
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-atten-checked.png) no-repeat center;
    background-size: 18px auto;
}

.popup.basic.attendance .check-btn {
     background: #fb585d;   
    padding-bottom: 17px;
}

.popup.basic.attendance .check-btn a {
    display: inline-block;
    width: 112px;
    margin-top: 17px;
    padding: 8px 0px 13px;
    font-size: 13px;
    color: #fff;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/bg/bg-btn.png) no-repeat;
    background-size: 100% auto;
    line-height: 1;
}

/* common.css 끝 */

/* 게시글 없을때  */
.not-content {
    padding: 155px 0px 70px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-not-search.jpg) no-repeat center 60px;
    background-size: 98px auto;
}

/* 페이징 */
.pagination {
   /* margin: 15px 0;*/
}

.pagination a {
    display: inline-block;
    vertical-align: top;
    width: 25px;
    height: 25px;
    line-height: 25px;
    box-sizing: border-box;
    color: #979797;
    font-size: 13px;
    border: 1px solid transparent;
	margin: 15px 0;
}

.pagination a.current {
    border-color: #393939;
    color: #222;
}

.pagination a.prev {
    font-size: 0;
    margin-right: 13px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-paging-prev.png) no-repeat center;
}

.pagination a.next {
    font-size: 0;
    margin-left: 13px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-paging-next.png) no-repeat center;
}


select, textarea {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius:0;
}

/* 장바구니 말줄임표 없애는 css 다른페이지 요청시 참고 */
.my-list .my-list-box .box-top .name.wd100 {
    width:calc(100% - 45px);
}
.my-list .my-list-box .box-top .name p.text-line-m {
    /*height: auto;*/
	word-break: break-all;
}

/* date */
input[type=date] {
	width: 39.5774647887324%;
    margin-right: 1.40845070422535%;
    background-color: #fff;
    height: 34px;
    line-height: 34px;
    text-indent: 4px;
}


/* top 스크롤 고정 */
.nav {
	position:fixed; 
	top:0; 
	/*height:98px;*/
	z-index:99; 
	background: #fff;
	width:100%;
}
.f-nav {
	position:relative;
}
.nav-container {
	/*height:98px;*/
}


/* gnb 수정 */
.nav-container {
    height: 110px;
}
.nav {
    height: 110px;
}
.header-middle {
	width: 100%;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
	height: 33px;
}
.header-middle .search {
	width: calc(100% - 30px);
    background-color: #ebebeb;
    height: 33px;
    display: inline-block;
    border-radius: 50px;
    padding: 10px;
    box-sizing: border-box;
}
.header-middle .search .search_ico {
	display: block;
    width: 23px;
    height: 31px;
    background: url(//img-coffeeban.bizhost.kr/cofeebanMo20200128/img/icon/icon-search-m.png) no-repeat center center;
    background-size: 17px auto;
    float: right;
    position: relative;
    top: -10px;
}

/*모바일전용 전체팝업 */
.only_mo_wrap {
	width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    position: fixed;
    top: 0;
    z-index: 99999999;
}
.only_mo_wrap .inwrap {
	width: 90%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.only_mo_wrap .inwrap .main_bg { 
	width:100%;
	max-width:425px;
	margin:50% auto auto auto;
	display: block;
}
.only_mo_wrap .inwrap .inwrap_btnbox {
	max-width: 425px;
    margin: auto;
    text-align: center;
}
.only_mo_wrap .inwrap .inwrap_btnbox img {
	width:100%;
}



/* rank */
span.rank-sit {
    font-family: 'Roboto', 'Nanum Barun Gothic', Malgun Gothic, "맑은 고딕", Dotum, "돋움", sans-serif;
    font-weight: 600;
    color: #ec142b;
}

span.rank-sit.down {
    color: #002aff;
}

span.rank-sit.up {
    color: #ec142b;
}

span.rank-sit.up:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    border-bottom-color: #ff4a49;
    border-width: 5px;
    position: relative;
    bottom: 3px;
    margin-right: 5px;
}

span.rank-sit.down:before {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    border-top-color: #002aff;
    border-width: 5px;
    position: relative;
    top: 1px;
    margin-right: 5px;    
}




body.over-hidden { overflow:hidden; height:100%; width:100%; position:fixed; }



/* 스크롤 */
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-track {background-color:#e1e1e1;}
::-webkit-scrollbar-thumb {background-color:#373737;border-radius: 0px;}
::-webkit-scrollbar-thumb:hover {background: #373737;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
width:2px;height:0px;background:#e1e1e1;}


/* 공통 라디오 버튼 */

.radio-btn input[type="radio"] {
    display: none;
}

.radio-btn span {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    background: url(//cdn-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-radio-off.png) no-repeat;    
    background-size: 100%;
    width: 18px;
    height: 18px;
    margin-right: 7px;
}

.radio-btn label {
    line-height: 20px;
}

.radio-btn input[type="radio"] + label {
    color: #383838;
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
}

.radio-btn input[type="radio"]:checked + label span {
    background: url(//cdn-coffeeban.bizhost.kr/cofeebanMo20200128/img/btn/btn-radio-on.png) no-repeat; 
    background-size: 18px auto;
}

.radio-btn input[type="radio"]:disabled + label {
    color: #979797;    
}

.tmp_soldout {
    font-size: 10px !important;
    background: red;
    color: #fff;
    padding: 1px;
    vertical-align: middle;
}