@charset "utf-8";
/* 홈 */
#ebric_mobile_wrap #header_wrap { height: 50px; }
#ebric_mobile_wrap #main-content-wrap { padding-top: 330px; padding-bottom: 50px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap { position: absolute; padding-bottom: 60px; left: 0; width: 100%; height: 320px; top: 50px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list { height: 200px; position: relative; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list ul .main-banner { height: 200px; padding: 45px 10px; text-align: center; color: #fff; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list ul .main-banner h2 { font-size: 2.3rem; font-weight: 800; color: #fff; margin-bottom: 5px; text-shadow: 0 0 1px 1px rgba(0,0,0,0.1); letter-spacing: -1px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list>ul>.main-banner p { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.5px; text-shadow: 0 0 1px 1px rgba(0,0,0,0.1); }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list>ul>.main-banner .go-btn { font-size: 1rem; color: #fff; display: inline-block; background: #363e4e; padding: 0 20px; text-align: center; height: 30px; line-height: 30px; letter-spacing: -0.5px; font-weight: 400; margin-top: 15px; transition: background .2s ease; position: relative; border-radius: 15px; overflow: hidden; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list>ul>.main-banner .go-btn:hover { background: #2F3749; }

#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list .main-banner-navi { position: absolute; z-index: 2; width: 100%; text-align: center; height: 15px; bottom: 25px; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list .main-banner-navi li { display: inline-block; height: 8px; width: 8px; background: transparent; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); margin: 0 1px; transition: background .25s ease; }
#ebric_mobile_wrap #main-content-wrap .main-view-wrap .main-banner-list .main-banner-navi li.on { background: #fff; }

/* 퀵메뉴 */
#main-content-wrap .quick-menu-wrap { height:120px; position: absolute; left: 0; width: 100%; top: 200px; overflow: hidden; }
#main-content-wrap .quick-menu-wrap .quick-menu { height: 100%; width: 100%; margin: 0 auto; border-bottom: 1px solid #F1F1F1; }
#main-content-wrap .quick-menu-wrap .quick-menu ul { height: 100%; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li { height: 50%; width: 33.3333%; float: left; text-align: center; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li a { width: 100%; height: 100%; display: block; font-size: 1rem; letter-spacing: -0.5px; font-weight: 500;  padding-top: 35px; transition: background .2s ease, border-color 0.2s ease, color .2s ease; position: relative; background: #fff; white-space: nowrap; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li a:after { position: absolute; content: ''; z-index: 2; transition: background .2s ease;  }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.order a:after { background: url(../../img/home/quick_menu_ico_order.png); background-size: 20px 16px; width: 20px; height: 16px; top: 13px; left: 50%; margin-left: -12px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.inquiry a:after { background: url(../../img/home/quick_menu_ico_inquiry.png); background-size: 14px 19px; width: 14px; height: 19px; top: 11px; left: 50%; margin-left: -7px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.check a:after { background: url(../../img/home/quick_menu_ico_check.png); background-size: 22px 14px; width: 22px; height: 14px; top: 14px; left: 50%; margin-left: -11px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.notice a:after { background: url(../../img/home/quick_menu_ico_notice.png); background-size: 17px 15px; width: 17px; height: 15px; top: 13px; left: 50%; margin-left: -9px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.service a:after { background: url(../../img/home/quick_menu_ico_service.png); background-size: 18px 17px; width: 18px; height: 17px; top: 12px; left: 50%; margin-left: -9px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.partner a:after { background: url(../../img/home/quick_menu_ico_notice.png); background-size: 17px 15px; width: 17px; height: 15px; top: 13px; left: 50%; margin-left: -9px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.partner a:after { background: url(../../img/home/quick_menu_ico_partner.png); background-size: 17px 15px; width: 17px; height: 15px; top: 13px; left: 50%; margin-left: -9px; }

/* 추천 상품 */
#main-content-wrap .recommend-list-wrap .recommend-list { width: 100%; margin: 0 auto; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap { height: auto; overflow: hidden; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box { width: 100%; margin-bottom: 10px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a { display: block; height: 100%; overflow: hidden; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area { width: 120px; float: left; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area .img-box { width: 120px; height: 120px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area .product-name { text-align: left; display: block; font-size: 1.4rem; font-weight: 700; color: #2f6ed5; margin-top: 10px; width: 100%; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; max-height: 40px; -webkit-box-orient: vertical; display: -webkit-box; line-height: 17px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box:hover a .img-area .product-name { text-decoration: underline; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area { border: 1px solid #eee; width: calc( 100% - 130px ); float: right; height: 100%; padding: 10px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area .property { display: block; margin-bottom: 5px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area .property:last-of-type { margin-bottom: 0; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area .property .key { display: block; font-size: 1.1rem; color: #bbbbbb; font-weight: 500; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area .property .value { display: block; font-size: 1.3rem; font-weight: 700; }

@media all and ( min-width: 760px )
{
	#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box { float: left; width: 49%; margin-right: 2%; }
	#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box:nth-child(2n) { margin-right: 0; }
	
}

/* 베스트 */
#main-content-wrap .best-list-wrap .best-list { width: 100%; margin: 0 auto; }
#main-content-wrap .best-list-wrap .best-list .box-wrap { height: auto; overflow: hidden; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box,
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box { width: 49%; margin-right: 2%; margin-bottom: 10px; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box:nth-child(2n),
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box:nth-child(2n) { margin-right: 0; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a { height: 50%; position: relative; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a:after { position: absolute; width: 90%; background: #eee; height: 1px; content: ''; bottom: 0; left: 5%; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a:last-child:after { display: none; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .img-area .product-name { display: block; font-size: 1.5rem; font-weight: 700; color: #2f6ed5; margin-top: 10px; margin-bottom: 5px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .img-area .img-box,
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .img-area .img-box { height: 100px; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a:hover .img-area .product-name { text-decoration: underline; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .txt-area .linear-formula { border: 1px solid #ccc; display: inline-block; padding: 0 10px; border-radius: 10px; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .txt-area .linear-formula .value { font-size: 1.1rem; font-weight: 500; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .txt-area .property { margin-top: 5px; font-size: 1.2rem; color: #666; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .txt-area .property .key { margin-right: 15px; position: relative; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box a .txt-area .property .key:after { width: 1px; height: 9px; background: #ddd; position: absolute; content: ''; top: 5px; right: -8px; }

/* 프로모션 */
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap { height: auto; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .product-name { font-size: 1.5rem; font-weight: 700; margin-top: 3px; margin-bottom: 5px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .linear-formula { border: 1px solid #ccc; display: inline-block; padding: 0 10px; border-radius: 10px; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .linear-formula .value { font-size: 1.1rem; font-weight: 500; }

#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content { height: auto; margin-top: 10px; overflow: hidden; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .price { margin-right: 5px; display: block; overflow: hidden; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .price .post { color: #666; text-decoration: line-through; float: left; margin-top: 3px; margin-right: 4px; letter-spacing: -0.5px; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .price p.current { float: left; font-size: 1.5rem; font-weight: 900; color: #2f6ed5; letter-spacing: -0.5px; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .price p.current .unit { font-size: 1.3rem; font-weight: 500; color: #666; margin-left: 2px; }

#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .label { height: 20px; border-radius: 3px; font-size: 1rem; font-weight: 500; width: 55px; line-height: 20px; color: #fff; text-align: center; margin: 6px 0 3px; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .label.og-bg { background: #f36523; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .label.bl-bg { background: #2f6ed5; }

@media all and ( min-width: 760px )
{
	#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box,
	#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box { width: 32%; }
	#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box:nth-child(2n),
	#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box:nth-child(2n) { margin-right: 2%; }
	#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box:nth-child(3n),
	#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box:nth-child(3n) { margin-right: 0; }
}

/* 공지사항 */
#main-content-wrap .sns-wrap {padding-top:15px; padding-bottom:10px;}
#main-content-wrap .sns-wrap .title-area {height: auto;margin-bottom: 5px;position: relative; overflow:hidden; clear:both;}
#main-content-wrap .sns-wrap .title-area .left-tit { float: left; cursor: default; max-width: calc(100% - 60px);  }
#main-content-wrap .sns-wrap .title-area .left-tit .subject-title {font-size: 1.6rem; font-weight: 700; letter-spacing: -1px; display:inline-block;  margin-right:5px}
#main-content-wrap .sns-wrap .title-area .left-tit > span {color:#5796dd}
#main-content-wrap .sns-wrap .product-list-navi { display: inline-block; position:absolute; right:0; bottom:0; }
#main-content-wrap .sns-wrap .product-list-navi a { height: 24px; border: 1px solid #2f6ed5; display: inline-block; border-radius: 2px; text-align: center; font-size: 1.1rem; cursor: pointer; float: left; margin-left: 2px; color: #0266d7; line-height: 22px; transition: border-color .2s ease,color .2s ease; background: #fff; padding:0 10px;}
#main-content-wrap .sns-wrap .title-area .product-list-navi a i.fas {margin-left:7px; font-size:0.8rem}
#main-content-wrap .sns-wrap .title-area .product-list-navi a:hover {background:#2f6ed5; color:#fff;}

#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .no-result-wrap { padding: 5px 0; background: #fff; margin-top: 10px; border-radius: 3px; box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.1); border: 1px solid #eee; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .no-result-wrap .no-result { text-align: center; color: #D4D4D4; font-size: 1.3rem; padding: 70px 0; font-weight: 500; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .no-result-wrap .no-result i.fa-exclamation-circle { margin-right: 5px; }

#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row { padding: 10px; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.1); margin-bottom: 5px;  }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row>a { padding: 0 40px 0 0;  display: block; position: relative; padding-right: 40px; text-overflow: ellipsis; white-space:nowrap; overflow:hidden;}
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row .info { margin-top: 2px; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row .info .writer { font-size: 1.1rem; letter-spacing: 0; color: #555555; display: inline-block; vertical-align: middle; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row .info .reg-date { font-size: 1.1rem; letter-spacing: 0; color: #999999; display: inline-block; vertical-align: middle; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row.siren>a { color: #2F6ED5; font-weight: bold; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row.siren>a img { margin-right: 5px; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row>a i { position: absolute; z-index: 2; right: 15px; display: inline-block; height: 10px; line-height: 10px; color: #666; top: 14px; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row>a i.fa-angle-up { display: none; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row.on>a { color: #2F6ED5; font-weight: bold; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row.on>a i.fa-angle-up { display: inline-block; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row.on>a i.fa-angle-down { display: none; }
#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row .reply { padding: 10px 10px 15px; font-size: 1.2rem; background: #f8f8f8; border-top: 1px solid #e5e5e5; display: none; }
#ebric_mobile_wrap #main-content-wrap .notice-wrap.sns-wrap .faq-list .row.on .reply { display: block; }
#main-content-wrap .sns-wrap .blog-box {width:100%; min-height:120px; padding:15px; border: 1px solid #ddd;background: #fff;margin-top:10px; position:relative;}
#main-content-wrap .sns-wrap .blog-box .box {clear:both; overflow:auto;}
#main-content-wrap .sns-wrap .blog-box .img-area {float:left; width:120px; margin-right:20px;}
#main-content-wrap .sns-wrap .blog-box .img-area .thumbnail {border:1px solid #e5e5e5;}
#main-content-wrap .sns-wrap .blog-box .img-area .thumbnail img {max-width:100%; max-height:100%;}
#main-content-wrap .sns-wrap .blog-box .txt-wrap {float:left; width:calc(100% - 165px);cursor:pointer; padding-bottom:60px;}
#main-content-wrap .sns-wrap .blog-box .txt-wrap .blog-title {font-size: 1.4rem;  padding-bottom: 15px; display: inline-block; font-weight: 700; color: #2f6ed5; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; width:100%}
#main-content-wrap .sns-wrap .blog-box .txt-wrap .txt-area {font-size: 1.2rem; line-height: 19px; letter-spacing: -0.5px;display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:77px;}
#main-content-wrap .sns-wrap .blog-box .box:hover .txt-wrap .txt-area {text-decoration: underline;}
#main-content-wrap .sns-wrap .paging {margin-top:0px; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);}

@media(max-width:500px) {
	#main-content-wrap .sns-wrap .blog-box .txt-wrap {padding-bottom:0;}	
	#ebric_mobile_wrap #main-content-wrap .sns-wrap .faq-list .row>a {padding-right:0;}
	#main-content-wrap .sns-wrap .paging {position:static; margin-top:15px; transform:translateX(0);}
}

@media(max-width:400px) {
	#main-content-wrap .sns-wrap .blog-box .img-area {width:80px; margin-right:15px}
	#main-content-wrap .sns-wrap .blog-box .txt-wrap {width: calc(100% - 95px)}
	#main-content-wrap .sns-wrap .title-area .left-tit > span{display:none;}
	#main-content-wrap .sns-wrap .blog-box .txt-wrap .txt-area {-webkit-line-clamp: 3; height:55px;}
}