@charset "utf-8";
/* 홈 */

/* 배너 */
#main-content-wrap .main-view-wrap .main-banner-list-wrap { height: 400px; position: relative; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list { height: 100%; width: 100%; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner { display: block; width: 100%; height: 400px; color: #fff; padding: 85px 70px; cursor: default; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner h2 { font-size: 3.5rem; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 5px; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner p { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.5px; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner .go-btn { font-size: 1.3rem; color: #fff; display: block; background: #363e4e; width: 160px; text-align: center; height: 50px; line-height: 50px; letter-spacing: -0.5px; font-weight: 400; margin-top: 30px; transition: background .2s ease; position: relative; border-radius: 3px; overflow: hidden; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner .go-btn:hover { background: #2F3749; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list>ul>.main-banner .go-btn:after { position: absolute; z-index: 1; content: ''; width: 100%; height: 3px; bottom: 0; left: 0; background: #181E29;  }

#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi { height: 45px; width: 40%; display: block; position: absolute; z-index: 2; bottom: 70px; left: 70px; border-radius: 3px; position: 0 50px; overflow: hidden; background: rgba(255,255,255,1); box-shadow: 0 3px 0 0 rgba(0,0,0,0.1); }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li { height: 100%; font-size: 1.2rem; color: #2F6ED5; line-height: 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; transition: background 0.2s ease; width: 100%; text-align: center; display: none; font-weight: bold; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.select { display: block; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi { position: absolute; z-index: 2; width: 100%; height: 100%; display: block; right: 0; bottom: 0; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul { display: block; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul li { display: block; width: 45px; height: 50px; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul li.pre { float: left; border-right: 1px solid #eee; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul li.post { float: right; border-left: 1px solid #eee; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul li a { display: block; color: #999; cursor: pointer; font-size: 1.4rem; line-height: 45px; transition: color .2s ease; background: #f8f8f8; color: #999; }
#main-content-wrap .main-view-wrap .main-banner-list-wrap .main-banner-list .main-banner-navi>li.navi ul li a:hover { color: #666; }

/* 퀵메뉴 */
#main-content-wrap .quick-menu-wrap { height: 130px; margin-top: 20px; }
#main-content-wrap .quick-menu-wrap .quick-menu { height: 100%; width: 1200px; margin: 0 auto; }
#main-content-wrap .quick-menu-wrap .quick-menu ul { height: 100%; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li { height: 100%; width: 16.66666%; float: left; text-align: center; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li a { width: 100%; height: 100%; display: block; font-size: 1.4rem; letter-spacing: -0.5px; font-weight: 500; border: 1px solid #E5E5E5; border-right: none; padding-top: 75px; transition: background .2s ease, border-color 0.2s ease, color .2s ease; position: relative; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li a:hover { background: #2f6ed5; border-color: #2f6ed5; color: #fff; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li:last-child a { border-right: 1px solid #E5E5E5; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#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: 34px 27px; width: 34px; height: 27px; top: 36px; left: 50%; margin-left: -17px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.order a:hover:after { background: url(../../img/home/quick_menu_ico_order_w.png); background-size: 34px 27px; width: 34px; height: 27px; top: 36px; left: 50%; margin-left: -17px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.inquiry a:after { background: url(../../img/home/quick_menu_ico_inquiry.png); background-size: 24px 32px; width: 24px; height: 32px; top: 34px; left: 50%; margin-left: -12px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.inquiry a:hover:after { background: url(../../img/home/quick_menu_ico_inquiry_w.png); background-size: 24px 32px; width: 24px; height: 32px; top: 34px; left: 50%; margin-left: -12px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.check a:after { background: url(../../img/home/quick_menu_ico_check.png); background-size: 37px 23.5px; width: 37px; height: 23.5px; top: 39px; left: 50%; margin-left: -18.5px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.check a:hover:after { background: url(../../img/home/quick_menu_ico_check_w.png); background-size: 37px 23.5px; width: 37px; height: 23.5px; top: 39px; left: 50%; margin-left: -18.5px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.notice a:after { background: url(../../img/home/quick_menu_ico_notice.png); background-size: 26px 23px; width: 26px; height: 23px; top: 38px; left: 50%; margin-left: -13px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.notice a:hover:after { background: url(../../img/home/quick_menu_ico_notice_w.png); background-size: 26px 23px; width: 26px; height: 23px; top: 38px; left: 50%; margin-left: -13px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.service a:after { background: url(../../img/home/quick_menu_ico_service.png); background-size: 32px 30px; width: 32px; height: 30px; top: 35px; left: 50%; margin-left: -16px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.service a:hover:after { background: url(../../img/home/quick_menu_ico_service_w.png); background-size: 32px 30px; width: 32px; height: 30px; top: 35px; left: 50%; margin-left: -16px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.partner a:after { background: url(../../img/home/quick_menu_ico_partner.png); background-size: 29px 26px; width: 29px; height: 26px; top: 35px; left: 50%; margin-left: -16px; }
#main-content-wrap .quick-menu-wrap .quick-menu ul li.partner a:hover:after { background: url(../../img/home/quick_menu_ico_partner_w.png); background-size: 29px 26px; width: 29px; height: 26px; top: 35px; left: 50%; margin-left: -16px; }

/* 추천 상품 */
#main-content-wrap .recommend-list-wrap .recommend-list { width: 1200px; margin: 0 auto; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap { height: 250px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box { width: 386.5px; height: 250px; margin-right: 20px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box:nth-child(3n) { margin-right: 0; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area { width: 145px; float: left; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area .img-box { width: 145px; height: 145px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .img-area .product-name { text-align: center; display: block; font-size: 1.4rem; font-weight: 700; color: #2f6ed5; margin-top: 10px; }
#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: 190px; float: right; height: 100%; padding: 20px; }
#main-content-wrap .recommend-list-wrap .recommend-list .box-wrap .product-box a .txt-area .property { display: block; margin-bottom: 10px; }
#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; }

/* 베스트 */
#main-content-wrap .best-list-wrap { background: url(../../img/home/pttn_bg.png); }
#main-content-wrap .best-list-wrap .best-list { width: 1200px; margin: 0 auto; }
#main-content-wrap .best-list-wrap .best-list .box-wrap { height: 514px; }
#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: 281px; margin-right: 25px; }
#main-content-wrap .best-list-wrap .best-list .box-wrap .product-box:nth-child(4n),
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box:nth-child(4n) { 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 .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: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: 290px; }
#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: 30px; margin-top: 15px; }
#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .price { float: left; }
#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: 7px; margin-right: 8px; }
#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.8rem; 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; }

#main-content-wrap .promotion-list-wrap .promotion-list .box-wrap .product-box a .txt-area .promotion-content .label { height: 30px; border-radius: 5px; font-size: 12px; font-weight: 500; width: 70px; float: right; line-height: 30px; color: #fff; text-align: center; }
#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; }