@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=latin-ext');

/*******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://www.firstmall.kr
Creation Date : 2016-06-01
Modify Date : 2017-07-31
*******************************************/

/* layout_topBar */
#layout_topBar {border-top:1px solid #656d83; border-bottom:1px solid #656d83; background:#656d83; background:rgba(83, 92, 117, 0.9);}
#layout_topBar .category_wrap .categoryDepth .categoryAllBtn {background:#515769;}
#layout_topBar .category_wrap .categoryDepth1 > a {color:#fff;}

/* 아이콘 - 회원가입 시 혜택  */
#layout_header .nav_wrap .nav .benefit {background:#316cd3;}
#layout_header .nav_wrap .nav .benefit .arrow {color:#316cd3;}

/* 카테고리 - 상단 메뉴 */
.category_wrap .categoryDepth1 .categorySub {border:1px solid #888; background:#fff; background:rgba(255,255,255,0.9);}
.category_wrap .categoryDepth1 .categorySub:after {top:-6px; left:70px; background:url('../images/common/ico_top_arrow.png') no-repeat; width:8px; height:6px;}
.category_wrap .categoryDepth1 .categorySub .categorySubItems li.categorySubDepth {background:url("../images/common/bullet_dot.gif") no-repeat left center;}
.category_wrap .categoryDepth1 .categorySub li.categorySubBar {border-left:1px solid #eee;}
.category_wrap .categoryDepth1 .categorySub2 > li {background:url("../images/common/bullet_dot.gif") no-repeat left center;}
#layout_topBar .categorySub2_bg {height:150px; border-bottom:1px solid #ddd; background:#fff; background:rgba(255,255,255,0.9);}

/* 카테고리 - 사이드 메뉴 */
.category_left .categoryDepth1 .categorySub {border:1px solid #888; background:#fff; background:rgba(255,255,255,0.9);}
.category_left .categoryDepth1 .categorySub:after {top:18px; left:-6px; background:url('../images/common/ico_left_arrow.png') no-repeat; width:6px; height:8px;}
.category_left .categoryDepth1 .categorySub .categorySubItems li.categorySubDepth {background:url("../images/common/bullet_dot.gif") no-repeat left center;}
.category_left .categoryDepth1 .categorySub li.categorySubBar {border-left:1px solid #eee;}

/* 전체 카테고리 닫기 버튼 */
.categoryAllClose {background:#555;}

/* 퀵메뉴 */
.rightQuickMenuWrap .rightQuickTitle, .rightQuickMenuWrap2 .rightQuickTitle {border-bottom:1px solid #656d83; background:#656d83; padding:7px 0 8px;}
.rightQuickMenuWrap2 {width:220px;}
.rightQuickMenuWrap2 .rightQuick_close, .rightQuickMenuWrap2 .rightQuick_open {right:220px;}
.rightQuickMenuWrap2 .rightQuickMenuBottom {right:20px;}

/* 회원가입 - 스텝 */
.join_step li.active {border-color:#555; color:#333;}

/* 주문/결제 - 스텝 */
.order2_step li.active {border-color:#555; color:#333;}

/* 결제정보 */
#payment_type > li > div.active > label {background-color:#555;}

/* 카테고리 썸네일 */
.goods_list_top .goods_list_style li.lattice_a_on a, .goods_list_top .goods_list_style li.lattice_b_on a, .goods_list_top .goods_list_style li.list_on a {background-color:#555;}

/* 버튼 */
.btn_chg {border:1px solid #333; background:#333; color:#fff;}
.btn_sch, .bbs_btn.btn_sch {border:1px solid #555; background:#555; color:#fff;}
.btn_gray {border:1px solid #aaa; background:#aaa; color:#fff;}
.btn_move, .bbs_btn {border:1px solid #ccc; background:#fff; color:#666;}

.btn_chg:hover {background:#000;}
.btn_sch:hover, .bbs_btn.btn_sch:hover {background:#333;}
.btn_gray:hover {background:#999;}
.btn_move:hover, .bbs_btn:hover {border:1px solid #999;}

.btn_chg.icon, .btn_chg.icon:hover {border:1px solid #333; background:#333;}
.btn_sch.icon, .btn_sch.icon:hover {border:1px solid #555; background:#555;}
.btn_gray.icon, .btn_gray.icon:hover {border:1px solid #aaa; background:#aaa;}
.btn_move.icon, .btn_move.icon:hover {border:1px solid #ddd; background:#fff; color:#888;}
.btn_chg, .btn_sch, .bbs_btn.btn_sch, .btn_gray, .btn_move {font-weight:normal !important; letter-spacing:0;}

/* 포인트 컬러 */
.bgcolor {background-color:#f7f7f7 !important;}
.pointcolor {color:#000 !important;}
.price {color:#fd454d !important;}

/* 큰 레이어 */
.ui-widget-header.ui-dialog-titlebar {background:#555 !important;}

/* 디스플레이 상품정보 */
.goodsDisplayTextWrap .brand_title {/* 브랜드명 font-size:11px !important; */}
.goodsDisplayTextWrap .goods_name {/* 상품명 font-size:13px !important; font-weight:600 !important; color:#555 !important; */}
.goodsDisplayTextWrap .summary {/* 짧은 설명 font-size:11px !important; color:#888 !important; */}
.goodsDisplayTextWrap .consumer_price {/* 정가 display:inline-block; margin-left:54px; font-size:12px !important; color:#888 !important; text-decoration:line-through !important; */}
.goodsDisplayTextWrap .price_txt {/* 판매가 타이틀 display:inline-block; vertical-align:middle; width:50px; font-size:11px; color:#666; */}
.goodsDisplayTextWrap .sale_per {/* 할인율 height:40px; line-height:50px; */}
.goodsDisplayTextWrap .sale_price {/* 판매가/(혜택적용)판매가 display:inline-block; vertical-align:middle; font-family:'tahoma', sans-serif !important; font-size:15px !important; font-weight:600 !important; color:#ff3528 !important; line-height:1.0; */}
.goodsDisplayTextWrap .provider_name {/* 판매자명 font-size:11px !important; color:#09aa9c !important; */}
.goodsDisplayTextWrap .bigdata {/* 빅데이터 큐레이션 font-size:12px; color:#2c8ff0 !important; text-decoration:underline !important; */}

/* 디스플레이 상품정보 - 할인율 제거 */
.goodsDisplayTextWrap .sale_per, .goodsDisplayTextWrap .sale_per2, .goodsDisplayTextWrap .price_txt {display:none;}
.goodsDisplayTextWrap .consumer_price {margin-left:0;}

/* 디스플레이 상품정보(이미지확대)
.goodsDisplayImageWrap .goodsDisplayImage {-webkit-transform:scale(1); transform:scale(1); -webkit-transition:0.5s ease-in-out; transition:0.5s ease-in-out;}
.goodsDisplayImageWrap:hover .goodsDisplayImage {-webkit-transform:scale(1.05); transform:scale(1.05);} */


/******************************************* 스킨용 CSS *******************************************/
html, body, div, span, strong, a, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, samp, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0;}
body, input, textarea, select, button, table {font-size:12px; color:#333;}
h1, h2, h3, h4, h5, h6 {font-family:'Ubuntu', sans-serif !important;}

/* 헤더 */
#layout_header .nav_wrap {height:46px; line-height:46px; border-bottom:1px solid #e0e0e0; background:#fff;}
#layout_header .nav_wrap .language {top:10px; left:0;}
#layout_header .language {border:1px solid #f1f1f1;}
#layout_header .language .select_list {height:25px; line-height:25px;}
#layout_header .sns_wrap {position:absolute; top:0; left:120px;}
#layout_header .sns_wrap .sns {*zoom:1;}
#layout_header .sns_wrap .sns:after {clear:both; display:block; content:'';}
#layout_header .sns_wrap .sns h4 {margin:0 10px 0 20px; font-size:13px; font-weight:400; color:#666;}
#layout_header .sns_wrap .sns li {float:left; margin:0 3px;}
#layout_header .sns_wrap .sns li img {width:20px; margin:13px 0; vertical-align:middle; opacity:0.3; transition:0.5s ease-in-out;}
#layout_header .sns_wrap .sns li img:hover {opacity:1;}
#layout_header .nav_wrap form {margin-left:20px; padding:0 3px;}
#layout_header .nav_wrap form input[name="search_text"] {border:0; border-bottom:1px solid #aaa; background:#fff; width:120px; height:20px; line-height:20px; text-indent:5px; font-size:11px; color:#999;}
#layout_header .logo_wrap h1 {padding:40px 0 35px; text-align:left;}
#layout_header .logo_wrap .showCategoryNavigation {position:absolute; top:32px; left:250px; width:78%;}
#layout_header .logo_wrap .showCategoryNavigation .category_wrap .categoryDepth {display:none;}
#layout_header .logo_wrap .showCategoryNavigation .category_wrap .categoryDepth1 > a {font-size:16px;}
#layout_header .logo_wrap .cart {position:absolute; top:35px; right:10px;}
#layout_header .logo_wrap .cart .count {position:absolute; top:-7px; right:-7px; display:block; width:20px; height:20px; line-height:20px; border-radius:50%; background:#316cd3; text-align:center; font-size:11px; color:#fff;}
#layout_header .logo_wrap.flying {position:fixed; width:100%; top:0; border-bottom:1px solid #e0e0e0; background:#fff; background:rgba(255, 255, 255, 0.9); z-index:100;}
#layout_header .logo_wrap.flying h1 {padding:18px 0;}
#layout_header .logo_wrap.flying .showCategoryNavigation {top:10px;}
#layout_header .logo_wrap.flying .cart {top:15px;}

/* 풋터 */
#layout_footer .nav_wrap {border-top:2px solid #000;}
#layout_footer .nav_wrap .nav {height:46px; line-height:46px;}
#layout_footer .cs_wrap {border-top:1px solid #dedede; background:#fff; padding:0;}
#layout_footer .cs_center > ul, #layout_footer .cs_wrap .wrap_inner > ul > li:first-child > ul, #layout_footer .cs_bank > ul, #layout_footer .cs_link > ul, #layout_footer .cs_board > ul {/*border-left:1px solid #dedede;*/ height:160px;}
#layout_footer .cs_board > ul {/*border-right:1px solid #dedede;*/}
#layout_footer .cs_center, #layout_footer .cs_bank, #layout_footer .cs_board {width:33.3%;}
#layout_footer .cs_center, #layout_footer .cs_bank {position:relative;}
#layout_footer .cs_center h4, #layout_footer .cs_bank h4 {position:absolute; top:40px; left:0; font-size:24px; font-weight:400; line-height:30px;}
#layout_footer .cs_center h4 .line, #layout_footer .cs_bank h4 .line {width:18px; border-top:2px solid #000; padding-top:10px;}
#layout_footer .cs_bank h4 {left:30px;}
#layout_footer .cs_center li {margin-left:130px;}
#layout_footer .cs_center li:first-child {padding-top:40px;}
#layout_footer .cs_center .phone {font-size:24px; margin-bottom:5px;}
#layout_footer .cs_bank li {margin-left:100px; font-size:13px;}
#layout_footer .cs_bank li:first-child {padding-top:40px;}
#layout_footer .lastest_wrap {padding-top:20px;}
#layout_footer .lastest_wrap h4 {display:inline-block; border-radius:5px; background:#aaa; padding:5px 20px; color:#fff;}
#layout_footer .lastest_wrap a.more {top:27px;}
#layout_footer .lastest_wrap .bbslist {border-top:none; margin:0; padding:0;}
#layout_footer .lastest_wrap .bbslist > li li {background:url("../images/common/bullet_dot.gif") no-repeat left center; padding-left:10px;}
#layout_footer .copy_wrap .copy {padding:30px 0;}
#layout_footer .copy_wrap .sns {position:absolute; top:30px; right:0; *zoom:1;}
#layout_footer .copy_wrap .sns {clear:both; display:block; content:'';}
#layout_footer .copy_wrap .sns h4 {margin:3px 10px; font-size:16px; font-weight:400; color:#888;}
#layout_footer .copy_wrap .sns li {float:left; margin:0 3px;}
#layout_footer .copy_wrap .sns li img {opacity:0.3; transition:0.5s ease-in-out;}
#layout_footer .copy_wrap .sns li img:hover {opacity:1;}

/* 좌측 퀵메뉴 */
.leftQuickMenuWrap2 {padding:30px 10px;}	
.leftQuickMenuWrap2 .leftQuick_close, .leftQuickMenuWrap2 .leftQuick_open {left:220px;}

/* 우측 퀵메뉴 */
.rightQuickMenuWrap2 .right_wrap {padding:30px;}
.rightQuickMenuWrap2 .right_wrap h3 {position:relative; margin-bottom:10px;border-bottom:1px solid #d1d1d1; background:url('../images/design/ico_right.png') no-repeat 3px 5px; padding:0 0 7px 20px; font-size:14px; font-weight:500; color:#555;}
.rightQuickMenuWrap2 .right_wrap ul.quick {padding:5px 0 0 5px; *zoom:1;}
.rightQuickMenuWrap2 .right_wrap ul.quick:after {clear:both; display:block; content:'';}
.rightQuickMenuWrap2 .right_wrap ul.quick > li {float:left; padding:0; margin:5px 10px; text-align:center;}
.rightQuickMenuWrap2 .right_wrap ul.quick span {display:block; width:50px; margin-bottom:3px; border-radius:5px; background:#f5f5f5; padding:10px 0; text-align:center;}
.rightQuickMenuWrap2 .right_wrap ul.quick span:hover {background:#f1f1f1;}
.rightQuickMenuWrap2 .right_wrap ul.quick img {opacity:0.3; transition:0.3s ease-in-out;}
.rightQuickMenuWrap2 .right_wrap ul.quick > li:hover img {opacity:1;}
.rightQuickMenuWrap2 .right_wrap ul {margin-bottom:40px;}
.rightQuickMenuWrap2 .right_wrap ul > li {padding-left:15px; color:#555; line-height:1.8;}
.rightQuickMenuWrap2 .right_wrap ul > li .phone {margin-right:-10px; font-size:20px; line-height:1.6;}
.rightQuickMenuWrap2 .rightTitleMenu, .rightQuickMenuWrap2 .rightQuickTitle, .rightQuickMenuWrap2 .rightBookMark {display:none;}
.rightQuickMenuWrap2 .rightQuickMenu, .rightQuickMenuWrap2 .rightBorderTop, .rightQuickMenuWrap2 .rightBookMark, .rightQuickMenuWrap2 .rightBoxBorder {border:0; margin:0;}
.rightQuickMenuWrap2, .rightQuickMenuWrap2 .rightQuick_close, .rightQuickMenuWrap2 .rightQuick_open {border-color:#d0d0d0;}
.rightQuickMenuWrap2 .rightQuickitemLi {padding-left:0 !important;}
.rightQuickMenuWrap2 .right_itemList ul {margin:5px 0;}
.rightQuickMenuWrap2 .right_quick_paging {width:100px; margin:0 auto;}
.rightQuickMenuWrap2 .right_recent_total {position:absolute; top:-2px; right:0; display:block; width:20px; height:20px; line-height:20px; border-radius:50%; background:#316cd3; text-align:center; font-size:11px; color:#fff;}
.rightQuickMenuWrap2 .rightQuickMenuBottom {bottom:20px; right:30px;}
.rightQuickMenuWrap2 .rightQuickMenuBottom a.rightTop, .rightQuickMenuWrap2 .rightQuickMenuBottom a.rightBottom {display:block; width:30px; height:30px; margin:5px 0; border-radius:0; border:1px solid #dedede; background:#fff; background:rgba(255,255,255,0.9); padding:5px; text-align:center; vertical-align:middle; color:#333; text-decoration:none; transition:all linear 0.5s;}
.rightQuickMenuWrap2 .rightQuickMenuBottom a.rightTop:hover, .rightQuickMenuWrap2 .rightQuickMenuBottom a.rightBottom:hover {background:rgba(0,0,0,0.05);}
.rightQuickMenuWrap2 .rightQuickMenuBottom a.rightTop img {margin-top:10px;}
.rightQuickMenuWrap2 .rightQuickMenuBottom a.rightBottom img {margin-top:10px;}

/* 서브 타이틀 */
.h3_wrap > h3 {position:relative; padding-top:10px; transition:all 0.3s ease;}
.h3_wrap > h3:before {display:inline-block; content:''; position:absolute; top:0; left:50%; margin-left:-25px; width:50px; height:2px; background:#000;}
.h3_wrap:hover > h3:before {}

/* 메인영역 */
.main_display h3 {margin:80px 0 40px; text-align:center; font-size:30px; font-weight:400; color:#000; letter-spacing:0;}
.main_display h3 .main_top {width:45px; margin:0 auto; border-top:2px solid #000; padding-top:10px; transition:all 0.3s ease;}
.main_display h3:hover .main_top {width:145px;}
.main_display h3 p {margin-top:5px; font-size:14px; font-weight:400; color:#666;}
.main_banner {margin-top:45px;}
.main_banner li {margin-left:19px;}
.main_banner li:hover {box-shadow:0px 2px 10px rgba(0,0,0,0.2)}
.main_banner img {opacity:1;}
.main_banner img:hover {opacity:0.8;}
.main_banner2 {position:relative; height:210px; margin-top:80px;}
.main_banner2 img {position:absolute; top:0; left:50%; margin-left:-960px; opacity:1;}
.main_banner2 img:hover {opacity:0.8;}

/* 메인 - 탭메뉴 */
ul.displayTabType1 {*zoom:1; border-bottom:none; border-left:1px solid #e0e0e0;}
ul.displayTabType1:after {content:""; display:block; clear:both;}
ul.displayTabType1 li {float:left; width:16.58%; height:38px; line-height:38px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;  border-bottom:1px solid #777; background-color:#f6f6f6; padding:0; text-align:center; font-weight:600; color:#858585; cursor:default;}
ul.displayTabType1 li.current {height:42px; line-height:46px; margin-left:-1px; margin-top:-4px; border:1px solid #777; border-bottom:1px solid #fff; background-color:#fff; color:#333; }
.displayTabContentsContainerBox {border:0; padding:0;}

/* 메인영역 - 슬라이드 배너 */
.main_slider ul.anibanner_navigation_paging_style_3 li {width:30px; height:3px; margin:0 3px; background-color:#fff; overflow:hidden; text-indent:-1000px;}
.main_slider ul.anibanner_navigation_paging_style_3 li.current {background-color:#333;}
.rightQuickMenuWrap2 .rBanner ul.anibanner_navigation_paging_style_3 li {width:10px; height:3px; margin:0 2px; background-color:#aaa; overflow:hidden; text-indent:-1000px;}
.rightQuickMenuWrap2 .rBanner ul.anibanner_navigation_paging_style_3 li.current {width:17px;  background-color:#333;}

/* 메인영역 - 상품디스플레이 */
.showDesignDisplay1 .displayTabContentsA > ul {width:105%; margin-left:-12px;}
.showDesignDisplay1 .displayTabContentsA > ul > li {float:left;}
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap {margin:0 0 12px 12px;}
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap,
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap .goodsDisplayImageWrap {width:250px !important; max-width:250px !important; height:250px !important; max-height:250px !important;}
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap .goodsDisplayImageWrap > a > img {width:250px !important; max-width:250px !important; height:250px !important; max-height:250px !important;}
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap:first-child,
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap:first-child .goodsDisplayImageWrap, 
.showDesignDisplay1 .displayTabContentsA > ul > li.goodsDisplayWrap:first-child .goodsDisplayImageWrap > a > img {width:465px !important; max-width:465px !important; height:512px !important; max-height:512px !important;}
.showDesignDisplay1 .goodsDisplayImageOverayPlus2Text .overay_txt_line_0,
.showDesignDisplay1 .goodsDisplayImageOverayPlus2Text .overay_txt_line_1,
.showDesignDisplay1 .goodsDisplayImageOverayPlus2Text .overay_txt_line_2 {margin-bottom:10px;}
.showDesignDisplay2 .displayTabContentsA > ul {width:100%;}
.showDesignDisplay2 .displayTabContentsA > ul > li {float:left;}
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap {margin:50px 0 0 62px;}
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap,
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap .goodsDisplayImageWrap > a > img {width:200px !important; max-width:200px !important; height:200px !important; max-height:200px !important;}
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap:first-child,
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap:first-child .goodsDisplayImageWrap > a > img {width:400px !important; max-width:400px !important; height:450px !important; max-height:450px !important;}
.showDesignDisplay2 .displayTabContentsA > ul > li.goodsDisplayWrap .goodsDisplayImageWrap {overflow:visible !important;}
.showDesignDisplay2 .goodsDisplayImageIcon {left:-45px !important; border-bottom:1px solid #333; padding-bottom:5px;}
.displayTabContentsA .goodsDisplayImageOverayPlus2Text .overay_txt_line_0,
.displayTabContentsA .goodsDisplayImageOverayPlus2Text .overay_txt_line_1,
.displayTabContentsA .goodsDisplayImageOverayPlus2Text .overay_txt_line_2 {margin-bottom:10px;}
.goodsDisplayTextWrap > li {line-height:1.8;}
.goodsDisplayTextWrap .color {width:20px; height:3px; overflow:hidden;}
.goodsDisplayTextWrap .goods_name {display:block; border-bottom:1px solid #ddd; margin-bottom:10px; padding-bottom:10px;}
.goodsDisplayTextWrap .summary {display:block; margin-bottom:5px;}
.goodsDisplayTextWrap .sale_price {/*font-family:"verdana" !important;*/}
.goodsDisplayTextWrap .shipping {display:block; margin-top:5px;}
.goodsDisplayTextWrap .shipping li {display:inline-block; margin-right:5px; border:1px solid #bbb; background:#fafafa; padding:0 5px; font-size:11px; color:#666;}

/* 메인영역 - 아이콘 이동 */
.goodsDisplayImageWrap .goodsDisplayImageIcon {transition:transform .3s;}
.goodsDisplayImageWrap:hover .goodsDisplayImageIcon {transform:translate(10px, 10px);}
.showDesignDisplay2 .goodsDisplayImageWrap:hover .goodsDisplayImageIcon {transform:translate(0, 10px);}