@charset "utf-8";

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; }
html { -webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 62.5%; scroll-behavior: smooth; }
html, body { width:100%; height:100%; min-width: 300px; background: #f6f7fb; scroll-behavior: smooth; }

/*웹 폰트*/
body { font-family: 'Noto Sans KR','맑은 고딕', 'Malgun Gothic','dotum', 'Helvetica', 'Arial', sans-serif; font-size:1.2rem; color:#222; letter-spacing: 0; }
a { text-decoration:none; color:#222; }
::selection {background:#2f6ed5; color:#FFF; text-shadow:none;}
::-moz-selection {background:#2f6ed5; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#2f6ed5; color:#FFF; text-shadow:none;}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','맑은 고딕', 'Malgun Gothic','dotum', 'Helvetica', 'Arial', sans-serif; font-size:1.2rem; color:#222; letter-spacing: 0; outline: 0; }
input[type=file] { cursor: pointer; }
select { font-family:  'Noto Sans KR','dotum', 'Helvetica', 'Arial', sans-serif; font-size:1.2rem; color:#222; width: 150px; height: 24px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-color: #e7e7e7; margin-left: 1.2px; outline: 0; }
input[type=text],input[type=password],textarea { transition: border-color 0.25s ease; border: 1px solid #dcdcdc; background: #fff; resize: none; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; }
input[type=text]:active,input[type=password]:active,textarea:active,
input[type=text]:focus,input[type=password]:focus,textarea:focus { border-color: #80B0FF!important; }
input[type=text]:disabled { background: #EDEDED!important; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearFix { display:block; clear:both; font-size:0; height:0; }
.clearfix:after { display: block; height: 0; clear: both; content: ''; }

/* 가맹점 로고 */
.brand-logo-wrap { position: relative; border-top: 1px solid #e5e5e5; padding: 15px 0;  background: #fff;}
.brand-logo-area { position: relative; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px;}
.brand-logo-wrap .brand-logo {  display: flex;  flex-direction: column; align-items: center;  justify-content: flex-start; overflow: hidden;}
.brand-logo-wrap .brand-logo .logo-text { padding-top: 3px; font-size: 1.2rem; font-weight: 500; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.brand-logo-wrap .brand-logo .logo-img { position: relative; width: 60px; height: 60px; background: #F2F4F6; border-radius: 50%;}
.brand-logo-wrap .brand-logo .logo-img img { max-width: 90%; max-height: 90%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.brand-logo-area .slick-list { padding: 0 15px !important;}
.brand-logo-area .slick-slide {  padding: 0 5px;   display: flex !important; justify-content: center; align-items: center; }
.brand-logo-area .slick-track { display: flex; align-items: center;}
.brand-logo-control { display: none;}
.brand-logo-control button { pointer-events: auto; background: #fff; border: 1px solid #ddd; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #555; cursor: pointer; transition: all 0.2s;}
.brand-logo-control button:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5;}

@media (max-width: 576px) {
	.brand-logo-wrap { padding: 10px 0; }
	.brand-logo-wrap .brand-logo .logo-img { width: 45px; height: 45px; }
	.brand-logo-wrap .brand-logo .logo-text { font-size: 1rem; }
	.brand-logo-area .slick-slide { padding: 0 2px; }
}

@media (max-width: 500px) {
	.brand-logo-wrap .brand-logo .logo-text { font-size: 0.9rem; }
	.brand-logo-area .slick-slide { padding: 0 1px; }
}

/* 탭 메뉴 */
.tab-area { margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.tab-area.center ul { justify-content: center; }
.tab-area ul { display: flex; flex-wrap: nowrap; justify-content: flex-start;  gap: 8px; width: max-content;  min-width: 100%; padding-bottom: 5px;}
.tab-area ul li { border: 1px solid #E8ECEF; border-radius: 100px; overflow: hidden; transition: all 0.2s ease;}
.tab-area ul li a { display: block; padding: 3px 10px; background: #fff; color: #3F454B; font-size: 1.1rem; }
.tab-area ul li:hover,
.tab-area ul li.active { border-color: #02132F; background: #02132F; }
.tab-area ul li:hover a,
.tab-area ul li.active a { color: #fff; background: #02132F;}

/* 신규게시물 */
.libary-list { padding: 0 0 12px 0;}
.libary-list .item { display: flex; align-items: flex-start; gap: 10px; background: #fff; padding: 15px; border: 1px solid #E5E5E5; margin-top: 10px;}
.libary-list .item:first-child { margin-top: 15px;}
.libary-list .item .thumbnail { position: relative; width: 120px; height: 90px;  flex-shrink: 0; overflow: hidden;  border-radius: 5px; border: 1px solid #C3CCD3;}
.libary-list .item .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: 0.3s ease;}
.libary-list .item .thumbnail.no-image { background: #F2F4F6; }
.libary-list .item .thumbnail.no-image img { width: 110px; opacity: 0.4; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.libary-list .item .info-area { flex: 1; min-width: 0; }
.libary-list .item .info-area .label { font-size: 0.9rem; font-weight: 500; color: #FF373A; background: #F6E5EC; border: 1px solid #EFD1D1; border-radius: 100px; padding: 2px 6px; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
.libary-list .item .info-area .title { font-size: 1.3rem; font-weight: 500; height: 43px; padding-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.4; letter-spacing: -0.5px;}
.libary-list .item .info-area .text { font-size: 1.4rem; color: #797979; padding-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.4; margin-bottom: 10px; letter-spacing: -0.5px;}
.libary-list .item .info-area .date { font-size: 1.1rem; color: #797979; padding-top: 10px; }


.search-box-wrap.empty .tab-area { display: none;}
.search-box-wrap.empty .search-box { display: none;}

.library-wrap .empty-box { display: none;}
.library-wrap.empty .tab-area { display: none;}
.library-wrap.empty .empty-box { position: relative; width: 100%; display: block; background: #fff; border: 1px solid #E5E5E5;padding: 20px; height: 100%; min-height: 120px; text-align: center; }
.library-wrap.empty .empty-box .empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.library-wrap.empty .empty-box .img-area { width: 33px; height: auto; margin: 0 auto;}
.library-wrap.empty .empty-box .img-area img { width: 100%; height: 100%;}
.library-wrap.empty .empty-box p { font-size: 1.3rem;  margin-top: 7px;}
.library-wrap.empty .item { display: none;}
.library-wrap.empty .add-btn-area { display: none;}


/* 게시물 상세 관련상품 */
.related-products-wrap { padding-top: 10px; margin-top: 10px; border-top: 1px solid #c3ccd3;}
.related-products-wrap .tit { font-size: 1.2rem; font-weight: 500; text-align: left; margin-bottom: 10px;}
.related-products-wrap .related-list { border: 1px solid #c3ccd3;}
.related-products-wrap .related-item { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; background: #fff; padding: 15px; border-bottom: 1px solid #dbdbdb;}
.related-products-wrap .related-item:hover .info .title { text-decoration: underline; }
.related-products-wrap .related-item:last-child { border-bottom: none;}
.related-products-wrap .related-item .thumb { position: relative; overflow: hidden; width: 100%; height: 120px; background: #F2F4F6; border-radius: 4px; border: 1px solid #C3CCD3;}
.related-products-wrap .related-item .thumb.no-image { background: #F2F4F6; }
.related-products-wrap .related-item .thumb.no-image img { position: absolute; width: 50%; opacity: 0.4; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.related-products-wrap .related-item .thumb img { border-radius: 4px; width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease;}
.related-products-wrap .related-item .info { width: 100%; text-align: left;}
.related-products-wrap .related-item .info .category { display: inline-block; font-size: 0.9rem; font-weight: 500; color: #376FFF; background: #EAF0FF; border: 1px solid #d1d9ef; border-radius: 100px; padding: 2px 6px; white-space: normal; word-break: keep-all; line-height: 1.3;  text-align: center; }
.related-products-wrap .related-item .info .category.type02 { background: #FFF0DA; border: 1px solid #f3ddbd; color: #E78A00;}
.related-products-wrap .related-item .info .title { font-size: 1.2rem; font-weight: 500; padding-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.4; margin-bottom: 10px; letter-spacing: -0.5px;}
.related-products-wrap .libary-list .item .info-area .text { font-size: 1.4rem; color: #797979; padding-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.4; margin-bottom: 10px; letter-spacing: -0.5px;}
.related-products-wrap .related-item .info .price .discount { font-size: 1.2rem; color: #797979; text-decoration: line-through; padding-right: 6px;}
.related-products-wrap .related-item .info .price { font-size: 1.3rem;}

/* 헤더 */
#ebric_mobile_wrap #header_wrap { height: 55px; padding: 0 10px; background: #fff; }
#ebric_mobile_wrap #header_wrap .header { width: 100%; margin: 0 auto; height: 100%; position: relative; }
#ebric_mobile_wrap #header_wrap .header .logo-area { width: 100px; position: absolute; top: 17px; left: 0; z-index: 2; }
#ebric_mobile_wrap #header_wrap .header .logo-area .header-logo { width: 100px; height: 27px; }
#ebric_mobile_wrap #header_wrap .header .logo-area .header-logo a { display: block; height: 100%; }
#ebric_mobile_wrap #header_wrap .header .logo-area .header-logo a img { width: 100%; }
#ebric_mobile_wrap #header_wrap .header .logo-area .header-logo a img.beta-label { width: 15px; height: 7px; position: absolute; z-index: 2; bottom: 1px; right: 0; }

#ebric_mobile_wrap #header_wrap .header .search-box-wrap { width: 100%; float: left; height: 100%; padding-top: 10px; padding-left: 110px; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box { height: 35px; width: 100%; position: relative; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text] { width: 100%; height: 35px; border: 1px solid transparent; background: #f8f8f8; border-radius: 2px; padding-left: 10px; padding-right: 35px; font-size: 1.3rem; transition: border-color 0.25s ease; padding-top: 2px; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]:active,
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]:focus { border-color: #80B0FF; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]::-webkit-input-placeholder { color: #666; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]::-moz-placeholder { color: #666; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]:-ms-input-placeholder { color: #666; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box input[type=text]:-moz-placeholder{ color: #666; }
#ebric_mobile_wrap #header_wrap .header .search-box-wrap .search-box .search-btn { width: 35px; text-align: center; height: 100%; display: block; position: absolute; top: 0; right: 0; background: transparent; color: #2f6ed5; font-size: 1.4rem; border-top-right-radius: 2px; border-bottom-right-radius: 2px; cursor: pointer; line-height: 35px; z-index: 2; }

#ebric_mobile_wrap #main-content-wrap { padding: 0 10px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap { height: 50px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category { height: 100%; width: 280px; float: left; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category #all_category_toggle { display: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-btn { display: block; height: 100%; background: #2f6ed5; padding: 18px; padding-left: 30px; border-top-left-radius: 5px; transition: background .3s ease; color: #fff; font-size: 1.3rem; line-height: 14px; cursor: pointer; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); font-weight: 500; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-btn:hover { background: #1E5CC3; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-btn img { width: 18px; height: 14px; margin-right: 10px; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer { height: 400px; border-left: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; border-bottom-left-radius: 5px; background: #fff; display: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list { position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>a { font-size: 1.3rem; font-weight: bold; display: block; padding: 18.5px 30px; padding-right: 10px; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>a:hover { color: #2f6ed5; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu { height: 40px; width: 280px; float: right; border-radius: 5px; background: #f7f7f7; text-align: center; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a { cursor: pointer; font-weight: 500; color: #666; letter-spacing: -0.5px; transition: color .25s ease; padding: 11px 0; display: inline-block; float: left; height: 40px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a:last-of-type { margin-right: 0; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a:hover { color: #2d2d2d; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a i { margin-right: 3px; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a.chat-bot-btn { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a.chat-bot-btn.on { background: #2f6ed5; color: #fff; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a.chat-bot-btn,
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a.shopping-cart { width: 27%; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu a.user-btn { width: 46%; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu.login a.chat-bot-btn { display: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu.login a.shopping-cart,
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu.login a.user-btn { width: 50%; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap { position: absolute; z-index: 2; top: 50px; width: 100%; left: 0; height: 0; background: #fff; border-radius: 4px; box-shadow: 0 0 8px 2px rgba(0,0,0,0.2); overflow: hidden; transition: height 0.3s ease; overflow-x: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap.on { height: 450px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .head { height: 32px; background: #2f6ed5; text-align: left; padding-left: 13px; color: #fff; line-height: 32px; font-size: 1.2rem; position: absolute; width: 100%; z-index: 2; box-shadow: 0 1px 2px 2px rgba(0,0,0,0.1); }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .head .close-btn { color: #fff; float: right; line-height: 32px; height: 32px; padding: 0; text-align: center; width: 33px; transition: background .2s ease; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .head .close-btn:hover { background: #1758C3; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .head .close-btn i { margin-right: 0; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer { height: 100%; width: 100%; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area { position: absolute; height: 40px; background: #f8f8f8; left: 0; width: 100%; bottom: 0; padding: 5px; border-top: 1px solid #e5e5e5; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area .chat-box { width: 100%; position: relative; height: 100%; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area .chat-box .chat-btn { position: absolute; background: #2f6ed5; top: 0; right: 0; height: 27px; color: #fff; transition: background .2s ease; z-index: 2; padding: 0; text-align: center; border-top-right-radius: 3px; border-bottom-right-radius: 3px; margin-top: 1px; font-weight: 300; width: 28px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area .chat-box .chat-btn:hover { background: #1758C3; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area .chat-box .chat-btn i { line-height: 26px; margin-right: 0; font-size: 1.1rem; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .input-area .chat-box input[type=text] { width: 100%; height: 100%; background: #fff; border-radius: 3px; padding-left: 10px; padding-right: 45px; font-size: 1.2rem; letter-spacing: -0.5px; font-weight: 400; color: #222; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area { height: 100%; padding: 45px 12px 50px 12px; text-align: left; overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area::-webkit-scrollbar { display:none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap { min-height: 30px; margin-bottom: 10px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap.ebric { padding-left: 40px; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap.ebric .ebric-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; text-align: center; position: absolute; left: 0; top: 0; border: 1px solid #ddd; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap.ebric .ebric-logo img { width: 20px; height: 20px; margin-top: 5px; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap .talk-box { border: 1px solid #ddd; border-radius: 3px; padding: 5px 10px; font-size: 1.2rem; letter-spacing: -0.5px; position: relative; box-shadow: 0 1px 8px 0px rgba(0,0,0,0.05); white-space: pre-wrap; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap .talk-box .imp { font-weight: 600; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap .talk-box .command { color: #1758C3; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap.ebric .talk-box:after { width: 5px; height: 8px; background: url(../../img/common/chat_box_ebric_tail.png); background-size: 5px 8px; position: absolute; content: ''; left: -5px; top: 9px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap.user .talk-box { background: #EFF5FF; border-color: #CBD8F0; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .user-menu .chat-room-layer-wrap .chat-room-layer .content-area .talk-box-wrap .talk-box span.imp { color: #2F6ED5; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap { float: left; display: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap { width: 600px; float: left; margin-left: 20px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box { height: 40px; width: 100%; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text] { width: 100%; height: 100%; border: 1px solid #dcdcdc; border-radius: 5px; padding-left: 15px; padding-right: 70px; font-size: 1.3rem; line-height: 38px; transition: border-color 0.25s ease; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]::-webkit-input-placeholder { color: #666; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]::-moz-placeholder { color: #666; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]:-ms-input-placeholder { color: #666; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]:-moz-placeholder{ color: #666; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]:focus,
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box input[type=text]:active { border-color: #80B0FF; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box .search-btn { width: 60px; text-align: center; height: 100%; display: block; position: absolute; top: 0; right: 0; background: #2f6ed5; color: #fff; font-size: 1.6rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; cursor: pointer; padding: 6px 0; z-index: 2; transition: background .3s ease; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box .search-btn:hover { background: #1E5CC3; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .search-box-wrap .search-box .search-btn i { text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }

/* all categories 펼침 */
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap { display: none; position: absolute; top: 0; background: #fff; width: auto; height: 400px; left: 279px; border: 3px solid #2f6ed5; z-index: 2; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>a:hover + .detail-wrap { display: block; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap:hover { display: block; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap.ad-on { width: 920px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .ad-wrap { display: none; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap.ad-on .ad-wrap { display: block; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap { height: 100%; width: 519px; position: relative; float: left; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap:before { position: absolute; content: ''; height: 0; width: 0; border-right: 10px solid #2f6ed5; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; left: -13px; z-index: 2; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap:after { width: 1px; height: 100%; content: ''; position: absolute; z-index: 2; top: 0; left: 50%; margin-left: -10px; background: #ddd; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(1)>.detail-wrap .sub-category-wrap:before { top: 20px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(2)>.detail-wrap .sub-category-wrap:before { top: 75px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(3)>.detail-wrap .sub-category-wrap:before { top: 130px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(4)>.detail-wrap .sub-category-wrap:before { top: 186px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(5)>.detail-wrap .sub-category-wrap:before { top: 242px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(6)>.detail-wrap .sub-category-wrap:before { top: 300px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(7)>.detail-wrap .sub-category-wrap:before { top: 355px; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list { height: 100%; overflow-y: auto; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(1)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(2)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(3)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(4)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(5)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(6)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li:nth-child(7)>.detail-wrap .sub-category-wrap .sub-category-list>ul  { height: 750px; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul>li { padding: 25px 25px 0 25px; width: 50%; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul>li .sub-category-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; display: inline-block; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul>li>ul>li { line-height: 18px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul>li>ul>li>a { word-break: break-all; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .sub-category-wrap .sub-category-list>ul>li>ul>li>a:hover { text-decoration: underline; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .ad-wrap { width: 395px; height: 395px; float: right; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .ad-wrap a { transition: opacity .3s ease; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .user-menu-wrap .all-category .all-category-layer .category-list>li>.detail-wrap .ad-wrap a:hover { opacity: 0.85; }

/* 연관 */
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword { position: absolute; z-index: 4; top: 40px; left: 0; border: 1px solid #ddd; width: 100%; border-radius: 4px; background: #fff; padding: 10px 0; box-shadow: 0 5px 20px 0px rgba(0,0,0,0.1); max-height: 307px; overflow: hidden; }
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword ul li a { display: block; line-height: 22px; padding: 0 15px; transition: background 0.2s ease; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.3rem; }
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword ul li a:hover { background: #EBEBEB; }
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword ul li.view-all-btn { margin-top: 5px; }
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword ul li.view-all-btn a { font-size: 1.2rem; font-weight: 700; color: #2f6ed5; }
#ebric_mobile_wrap .search-box-wrap .search-box .relation-keyword ul li.view-all-btn a i { margin-right: 3px; font-size: 1rem; }


/* 제품 박스 공통 */
#main-content-wrap .product-list { margin: 0 auto; width: 100%; padding-top: 15px; padding-bottom: 10px; }
#main-content-wrap .product-list .title-area { height: auto; margin-bottom: 5px; position: relative; min-height: 25px; }
#main-content-wrap .product-list .title-area:after { height: 0; content: ''; clear: both; display: block; }
#main-content-wrap .product-list .title-area .subject-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -1px; float: left; cursor: default; max-width: calc(100% - 60px); }
#main-content-wrap .product-list .title-area .product-list-navi { float: right; display: inline-block; }
#main-content-wrap .product-list .title-area .product-list-navi a { height: 25px; width: 25px; border: 1px solid #eee; display: inline-block; border-radius: 3px; text-align: center; font-size: 1.2rem; cursor: pointer; float: left; margin-left: 2px; color: #999; line-height: 25px; transition: border-color .2s ease,color .2s ease; background: #fff; }
#main-content-wrap .product-list .title-area .product-list-navi a:hover { color: #666; border-color: #dcdcdc; }

#main-content-wrap .product-list .box-wrap { overflow: hidden; }
#main-content-wrap .product-list .box-wrap .product-box { background: #fff; border-radius: 3px; transition: box-shadow 0.2s ease,border-color .2s ease; float: left; box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.1); }
#main-content-wrap .product-list .box-wrap .product-box:hover { box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.15); border-color: #e3e3e3; }
#main-content-wrap .product-list .box-wrap .product-box a { display: block; height: 100%; padding: 10px; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .img-box { border: 1px solid #eee; background: #fff; position: relative; overflow: hidden; height: 145px;     border-radius: 4px; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .img-box .img-block { height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.01) inset; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; transition: background .45s ease; overflow: hidden; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .img-box .img-block .ico-layer { position: relative; width: 100%; height: 100%; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .img-box .img-block .ico-layer .ico { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: #2f6ed5; text-align: center; line-height: 36px; font-size: 1.4rem; color: #fff; top: 125%; margin-top: -18px; left: 50%; margin-left: -18px; }
#main-content-wrap .product-list .box-wrap .product-box a:hover .img-area .img-box .img-block { background: rgba(0, 0, 0, 0.2); }
#main-content-wrap .product-list .box-wrap .product-box a:hover .img-area .img-box .img-block .ico-layer .ico { top: 50%; transition: top .45s ease; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .img-box .img-block .ico-layer .label { font-size: 1.1rem; color: #fff; background: #2f6ed5; display: inline-block; height: 20px; border-radius: 12.5px; line-height: 22px; padding: 0 10px; text-align: center; min-width: 50px; position: absolute; z-index: 3; bottom: 10px; right: 10px; }

#main-content-wrap .product-list .box-wrap .product-box a .img-area .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
#main-content-wrap .product-list .box-wrap .product-box a .img-area .thumbnail img { position: absolute; top: 0; left: 0; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.3s ease-out; max-height: 100%; max-width: 100%; }

/* 푸터 */
#footer-wrap { background: #363e4e; padding-bottom: 60px; }
#footer-wrap .footer { width: 100%; margin: 0 auto; }
#footer-wrap .footer .foot-gnb { height: 51px; border-bottom: 1px solid #454d5f; }
#footer-wrap .footer .foot-gnb .gnb { display: block; text-align: center; padding-top: 10px; }
#footer-wrap .footer .foot-gnb .gnb li { display: inline-block; margin: 0 2px; }
#footer-wrap .footer .foot-gnb .gnb li a { display: block; width: 80px; border: 1px solid #6a747c; border-radius: 3px; height: 30px; line-height: 30px; color: #fffefe; padding: 0 10px; letter-spacing: -0.5px; text-align: center; }
#footer-wrap .footer .foot-content { padding: 10px; overflow: hidden; cursor: default; }
#footer-wrap .footer .foot-content .corp-info { width: 100%; margin-top: 20px; }
#footer-wrap .footer .foot-content .corp-info .corp .ebric { margin-bottom: 10px; color: #999; }
#footer-wrap .footer .foot-content .corp-info .corp .haenasoft { padding-bottom: 20px; border-bottom: 1px solid #454d5f; margin-bottom: 20px; color: #999; }
#footer-wrap .footer .foot-content .corp-info .corp .corp-name { display: block; letter-spacing: -0.5px; font-size: 1.1rem; }
#footer-wrap .footer .foot-content .corp-info .corp span { font-size: 1.1rem; color: #999; display: inline-block; font-weight: 300; margin-right: 20px; position: relative; letter-spacing: -0.5px; }
#footer-wrap .footer .foot-content .corp-info .corp span:after { width: 1px; height: 10px; background: #454d5f; content: ''; position: absolute; right: -12px; top: 5px; }
#footer-wrap .footer .foot-content .corp-info .corp span:last-child:after { display: none; }
#footer-wrap .footer .foot-content .corp-info .corp span a { color: #999; }

#footer-wrap .footer .foot-content .copyright { color: #999; letter-spacing: -0.5px; line-height: 16px; }
#footer-wrap .footer .foot-content .copyright p { font-weight: 300; font-size: 1.1rem; }
#footer-wrap .footer .foot-content .copyright span { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; display: block; margin-top: 10px; }
#footer-wrap .footer .foot-content .copyright span .imp { color: #e92023; display: inline-block; }

#footer-wrap .footer .foot-content .service-info { width: 100%; border: 1px solid #6a747c; border-radius: 3px; padding: 20px; }
#footer-wrap .footer .foot-content .service-info>div { padding-left: 45px; color: #ffffff; margin-bottom: 20px; position: relative;  }
#footer-wrap .footer .foot-content .service-info>div .title { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.5px; display: block; margin-bottom: 5px; }
#footer-wrap .footer .foot-content .service-info>div .number { font-size: 2rem; font-weight: 700; line-height: 1.8rem; }
#footer-wrap .footer .foot-content .service-info>div .number .detail { font-size: 1.1rem; font-weight: 300; display: block; }
#footer-wrap .footer .foot-content .service-info>div.account { margin-bottom: 0; }
#footer-wrap .footer .foot-content .service-info>div.call-center .ico { width: 25px; position: absolute; left: 0; top: 2px; }
#footer-wrap .footer .foot-content .service-info>div.account .ico { width: 25px; position: absolute; left: 0; top: 2px; }

/*글자수 줄임*/
.ellipsis { width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_50 { width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_80 { width:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_100 { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_150 { width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_180 { width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_200 { width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_220 { width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_250 { width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_270 { width:270px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_300 { width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_350 { width:350px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_370 { width:370px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_400 { width:400px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_450 { width:450px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_500 { width:500px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_650 { width:650px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 셀렉트박스 커스텀 */
.selectbox { position: relative; z-index: 1; display: inline-block; border: 1px solid #ddd; height: 32px; min-width: 80px; transition: border-color .2s ease, box-shadow .2s ease; vertical-align: top; cursor: pointer; border-radius: 3px; }
.selectbox:before { content: "";  position: absolute; top: 50%; right: 5px; margin-top: -7px; transition: opacity .25s ease; background: url(../../img/common/select_box_arrow_ico.svg); width: 20px; height: 15px; background-size: 20px 15px; opacity: 0.3; }
.selectbox:hover:before { opacity: 0.7; }
.selectbox label { position: absolute; top: 0; left: 0; color: #2d2d2d;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 1.3rem; line-height: 30px; text-align: left; width: 80%; padding-left: 10px; font-weight: 500; letter-spacing: -0.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.selectbox select { width: 100%; line-height: 32px;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 30px; cursor: pointer; padding-left: 8px; }
.selectbox select option { font-size: 1.3rem; }

.paging { text-align: center; margin-top: 20px; }
.paging ul { overflow: hidden; display: inline-block; }
.paging ul li { float: left; height: 35px; }
.paging ul li a { font-size: 1.2rem; background: #fff; display: block; height: 100%; line-height: 33px; border: 1px solid #ddd; border-right: none; padding: 0 13px; color: #666; font-weight: 300; }
.paging ul li:last-child a { border-right: 1px solid #ddd; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.paging ul li:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.paging ul li.pre-btn a,
.paging ul li.post-btn a { background: #f6f7fb; font-size: 1.1rem; color: #999; }
.paging ul li.select a { background: #4A5777; border-color: #4A5777; color: #fff; }

/*별*/
.fas.fa-star.on { color: #FDCE0A; }
.fas.fa-star.off { color: #e5e5e5; }

/*버튼*/
.normal-btn { border: 1px solid #ddd; display: inline-block; height: 30px; border-radius: 3px; line-height: 28px; font-size: 1.2rem; font-weight: 400; text-align: center; padding-right: 3px; background: #fff; letter-spacing: -0.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; padding: 0 15px; }
.normal-btn:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5; font-weight: 300; }
.wh-btn { border: 1px solid #ddd; display: inline-block; height: 50px; margin-bottom: 5px; border-radius: 3px; line-height: 48px; font-size: 1.3rem; text-align: center; background: #F5F7F9; letter-spacing: -0.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; color: #777; padding: 0 20px; vertical-align: top; }
.wh-btn:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5; }
.bl-btn { vertical-align: top; display: inline-block; height: 50px; margin-bottom: 5px; border-radius: 3px; line-height: 48px; font-size: 1.3rem; text-align: center; background: #2f6ed5; letter-spacing: -0.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; color: #fff; padding: 0 20px;  }
.bl-btn:hover { background: #1E5CC3; }
.bk-btn { display: inline-block; height: 28px; border-radius: 3px; line-height: 28px; font-size: 1.2rem; font-weight: 400; text-align: center; padding-right: 3px; letter-spacing: -0.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; padding: 0 10px; min-width: 65px; margin-left: 5px; background: #363e4e; color: #fff; margin-top: 1px; }
.bk-btn:hover { background: #485266; }

span.imp { color: #e92023; display: inline-block; margin-left: 3px; }

/* 하단 모바일 전용 메뉴 */
.mobile-user-menu-wrap { height: 60px; width: 100%; position: fixed; bottom: 0; left: 0; background: #192B4A; z-index: 99; }
.mobile-user-menu-wrap .mobile-user-menu { width: 100%; height: 100%; }
.mobile-user-menu-wrap .mobile-user-menu ul { width: 100%; height: 100%; overflow: hidden; }
.mobile-user-menu-wrap .mobile-user-menu ul li { float: left; width: 20%; height: 100%; }
.mobile-user-menu-wrap .mobile-user-menu ul li button {  width: 100%; height: 100%; border-style: none; background: transparent; color: #fff; }
.mobile-user-menu-wrap .mobile-user-menu ul li.select button { background: #2f6ed5; }
.mobile-user-menu-wrap .mobile-user-menu ul li button i.ico { width: 20px; height: 20px; background-size: 20px 20px; display: inline-block; background-position: center; }
.mobile-user-menu-wrap .mobile-user-menu ul li button .txt { display: block; font-size: 1.1rem; }
.mobile-user-menu-wrap .mobile-user-menu ul li.home button { padding-right: 2px; }
.mobile-user-menu-wrap .mobile-user-menu ul li button:focus,
.mobile-user-menu-wrap .mobile-user-menu ul li button:active,
.mobile-user-menu-wrap .mobile-user-menu ul li button:hover { background: #2f6ed5; }

/* 페이지 업 */
#ebric_mobile_wrap .mobile-user-menu-wrap .page-up-btn { position: fixed; opacity: 0; bottom: -100px; right: 10px; width: 50px; height: 50px; background: #2F6ED5; border-radius: 50%; color: #fff; line-height: 50px; text-align: center; box-shadow: 0 6px 6px 3px rgba(0,0,0,0.1); transition: bottom 0.5s ease,opacity 0.35s ease; }
#ebric_mobile_wrap.scrolled .mobile-user-menu-wrap .page-up-btn { bottom: 80px; opacity: 1; }

/* 미결제 배너 */
.outstanding-payment-banner {position: fixed; width: calc(100% - 80px); bottom: 80px; background: #fff;box-shadow: 0 6px 6px 3px rgba(0,0,0,0.1); padding:10px 15px; height: 50px; left: 10px; border-radius: 20px; border: 1px solid #498efe;}
.outstanding-payment-banner .alarm-wrap {float: left}
.outstanding-payment-banner .alarm-wrap > img {width: 21px; height: 24px;}
.outstanding-payment-banner h5 {display: inline-block; font-size: 1.5rem; margin-left: 5px; color: #498efe; font-weight: 500; line-height: 24px}
.outstanding-payment-banner p .mo-arrow {display: none}
.outstanding-payment-banner p {float: left; line-height: 24px; font-size: 1.5rem; margin-left: 20px; font-weight: 300;}
.outstanding-payment-banner p a span {font-weight: 500; color: #498efe; text-decoration: underline}
.outstanding-payment-banner .btn-wrap {position: absolute; right: 15px; top: 10px}
.outstanding-payment-banner .btn-wrap a {display: block; color: #fff; background: #498efe; padding: 3px 15px; font-size: 1.3rem; border-radius: 10px; transition: color .3s ease, background .3s ease}
.outstanding-payment-banner .btn-wrap a:hover {color: #fff; background:#192B4A}

@media(max-width: 530px) {
	.outstanding-payment-banner {padding: 15px 10px}
	.outstanding-payment-banner .alarm-wrap > img {width: 16px; height: 18px;}
	.outstanding-payment-banner h5 {font-size: 1.3rem; line-height: 18px}
	.outstanding-payment-banner p {line-height: 18px; font-size: 1.2rem; margin-left: 10px}
	.outstanding-payment-banner .btn-wrap {top: 13px;}
	.outstanding-payment-banner .btn-wrap a {font-size: 1.1rem;padding: 2px 10px}
}

@media(max-width: 400px) {
	.outstanding-payment-banner .alarm-wrap > img {width: 13px}
	.outstanding-payment-banner h5 {margin-left: 3px}
	.outstanding-payment-banner p {margin-left: 5px}
	.outstanding-payment-banner p .mo-arrow {display:inline-block; width: 19px; height: 19px}
	.outstanding-payment-banner .btn-wrap { display: none}
}

/* 모달 */
.modal-layer { position: fixed; z-index: 98; background: rgba(0,0,0,0.30); left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.modal-layer .modal { position: fixed; width: 85%; background: #fff; left: 7.5%; top: 20%; box-shadow: 0 10px 30px 5px rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; }
.modal-layer .modal .head { padding: 15px 17px; font-size: 1.4rem; font-weight: bold; background: #f8f8f8; position: relative; color: #222; border-bottom: 1px solid #eee; }
.modal-layer .modal .head .close-btn { position: absolute; width: 15px; height: 15px; right: 15px; top: 17px; opacity: 0.4; }
.modal-layer .modal .head .close-btn img { width: 100%; height: 100%; }
.modal-layer .modal .content { padding: 25px 15px 20PX; font-size: 1.2rem; text-align: center; }
.modal-layer .modal .btn-wrap { padding: 0 15px 25px 15px; text-align: center; }
.modal-layer .modal .btn-wrap a { height: 32px; line-height: 32px; margin: 0 3px; font-size: 1.2rem; }
.modal-layer .modal .btn-wrap a.wh-btn { line-height: 30px; }

/* 팝업 */
#ebric_mobile_wrap #mobile_popup { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #fff; }

/* disabled */
.disabled { opacity: 0.4; pointer-events: none; }
/* dchain */
.dchain-info { display: block; position: relative; display: inline-block; line-height: 21px; margin-right: 5px; }
.dchain-info .dchain-ico { cursor: pointer; width: 21px; }
.dchain-info .code { display: inline-block; color: #fff; padding: 2px 5px; font-size: 1.1rem; letter-spacing: 0; font-family: 'Arial','dotum'; margin-right: 3px; line-height: 13px; }
.dchain-info.dchain-01 .code { background: #F40000; }
.dchain-info.dchain-02 .code { background: #8900D0; }
.dchain-info.dchain-01 .description { color: #F40000; }
.dchain-info.dchain-02 .description { color: #8900D0; }
.dchain-pop { position: absolute; width: 200px; top: -5px; left: 25px; background: #fff; border: 1px solid #dee3eb; padding: 5px 8px; border-radius: 3px; line-height: 15px; box-shadow: 0 3px 7px -5px rgba(0,0,0,0.3); opacity: 0; z-index: -1; transition: opacity .25s ease, z-index .25s ease; }

.dchain-info:hover .dchain-pop { z-index: 2; opacity: 1; }

/* 댓글 UI */
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap { margin-top: 20px; margin-bottom: 20px; border: 1px solid #e5e5e5; border-radius: 3px; background: #fff; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap { padding: 15px; border-bottom: 1px solid #e5e5e5; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-user-name { font-size: 1.3rem; font-weight: 500; margin-bottom: 12px; color: #333; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-warning { font-size: 1.1rem; color: #666; line-height: 1.5; margin-bottom: 12px; padding: 10px; background: #f8f8f8; border-radius: 3px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area { position: relative; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #dcdcdc; border-radius: 3px; font-size: 1.2rem; line-height: 1.5; resize: vertical; font-family: inherit; transition: border-color 0.25s ease; height: auto;}
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-textarea:focus { outline: none; border-color: #80B0FF; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-footer .comment-count { font-size: 1.1rem; color: #999; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-footer .comment-submit-btn { height: 28px; line-height: 26px; padding: 0 18px; background: #F5F7F9; color: #777; border: 1px solid #ddd; border-radius: 3px; font-size: 1.2rem; font-weight: 500; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; letter-spacing: -0.5px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-footer .comment-submit-btn:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-write-wrap .comment-input-area .comment-footer .comment-submit-btn:active { background: #1E5CC3; border-color: #1E5CC3; }

/* 댓글 목록 */
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap { }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item { border-bottom: 1px solid #e5e5e5; padding: 15px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item:last-child { border-bottom: none; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-info { flex: 1; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-info .comment-item-user-name { font-size: 1.3rem; font-weight: 700; color: #333; margin-bottom: 4px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-info .comment-item-date { font-size: 1.1rem; color: #999; font-weight: 300; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions { display: flex; gap: 6px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-edit-btn,
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-delete-btn { height: 28px; line-height: 26px; padding: 0 12px; background: #F5F7F9; color: #777; border: 1px solid #ddd; border-radius: 3px; font-size: 1.1rem; font-weight: 400; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; letter-spacing: -0.5px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-edit-btn:hover,
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-delete-btn:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-edit-btn:active,
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-header .comment-item-actions .comment-delete-btn:active { background: #1E5CC3; border-color: #1E5CC3; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-item-content { font-size: 1.2rem; color: #222; line-height: 1.5; word-break: break-word; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item.editing .comment-item-content { display: none; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item.editing .comment-item-actions { display: none; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item.editing .comment-edit-area { display: block !important; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area { margin-top: 12px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid #dcdcdc; border-radius: 3px; font-size: 1.2rem; line-height: 1.5; resize: vertical; font-family: inherit; transition: border-color 0.25s ease; height: auto;}
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-textarea:focus { outline: none; border-color: #80B0FF; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-count { font-size: 1.1rem; color: #999; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions { display: flex; gap: 6px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-cancel-btn,
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-save-btn { height: 28px; line-height: 26px; padding: 0 12px; background: #F5F7F9; color: #777; border: 1px solid #ddd; border-radius: 3px; font-size: 1.1rem; font-weight: 400; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; letter-spacing: -0.5px; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-save-btn { background: #2f6ed5; color: #fff; border-color: #2f6ed5; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-save-btn:hover { background: #1E5CC3; border-color: #1E5CC3; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-cancel-btn:hover { background: #2f6ed5; color: #fff; border-color: #2f6ed5; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-save-btn:active { background: #1E5CC3; border-color: #1E5CC3; }
#ebric_mobile_wrap #main-content-wrap .sub-view-wrap .comment-wrap .comment-list-wrap .comment-item .comment-edit-area .comment-edit-footer .comment-edit-actions .comment-cancel-btn:active { background: #1E5CC3; border-color: #1E5CC3; }