@charset "utf-8";

/* ########## 단일 브랜드 C 추가 (GRANIT) : S ########## */
.wrap.inshop.granit {min-width:1390px;}
.wrap.inshop.granit .contents {margin-top:0; margin-left:auto; margin-right:auto; width:1180px;}
.wrap.inshop.granit .contents.search {margin-top:120px;}
.wrap.inshop.granit.fixed .contents {margin-top:0;}
.wrap.inshop.granit.fixed .contents .flow {margin-left:-110px}

.wrap.inshop.granit nav {margin-left:-590px; left:50%; width:1180px; text-align:left;}
.wrap.inshop.granit nav .bi {position:absolute; margin:30px 0 0 -50px; width:22px;}
.wrap.inshop.granit nav .bi img {width:auto; max-height:100% !important;}
.wrap.inshop.granit nav > ul {margin:17px 0 0 0;}
.wrap.inshop.granit nav > ul > li a {font-size:13px;}
.wrap.inshop.granit nav > ul > li:hover > a {color:#111; border-bottom:1px solid #111;}
.wrap.inshop.granit nav > ul > li + li {margin-left:40px;}
.wrap.inshop.granit nav > ul > li .snb {margin-top:17px; padding:46px 60px; text-align:left; border:1px solid #111; box-sizing:border-box;}
.wrap.inshop.granit nav > ul > li .snb .category_wrap {display:inline-block; width:580px;}
.wrap.inshop.granit nav > ul > li .snb .category_wrap + .category {margin-left:68px;}
.wrap.inshop.granit nav > ul > li .snb .category {width:144px;}
.wrap.inshop.granit nav > ul > li .snb .category + .category {margin-left:68px;}
.wrap.inshop.granit nav > ul > li .snb .category:nth-child(3n+4) {margin-left:0;}
.wrap.inshop.granit nav > ul > li .snb .category:nth-child(1n+4) {margin-top:50px;}
.wrap.inshop.granit nav > ul > li .snb .category ul li {line-height:14px;}
.wrap.inshop.granit nav > ul > li .snb .category ul li a {font-size:12px;}
.wrap.inshop.granit nav > ul > li .snb .category .mid a {color:#111 !important; font-size:14px;} 
.wrap.inshop.granit nav > ul > li .snb .banner {margin:auto; max-width:486px}
.wrap.inshop.granit nav > ul > li .snb .banner ul {margin:auto;}
.wrap.inshop.granit nav > ul > li .snb .banner img {width:238px; height:238px;}
.wrap.inshop.granit nav > ul > li .snb .banner span {display:block; margin-top:10px; width:238px; color:#111; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

.wrap.inshop.granit main {margin:55px auto 0; width:1180px;}
.wrap.inshop.granit main section {margin:auto -10px;}
.wrap.inshop.granit main section > ul:after {display:block; clear:both; content:"";}
.wrap.inshop.granit main section > ul > li {margin:10px; float:left; width:380px; height:520px;}
.wrap.inshop.granit main section > ul > li > ul {margin:-10px;}
.wrap.inshop.granit main section > ul > li > ul > li {margin:10px; float:left; width:180px; height:250px;}
.wrap.inshop.granit main section > ul > li > ul > li .thumb {display:block; position:relative; width:180px; height:180px; overflow:hidden;}
.wrap.inshop.granit main section > ul > li > ul > li .thumb img {margin-top:-29px;}
.wrap.inshop.granit main section > ul > li > ul > li .thumb .hover {display:block; position:absolute; top:0; opacity:0; width:180px; filter:Alpha(Opacity=0); /* support:IE8 */}
.wrap.inshop.granit main section > ul > li > ul > li .thumb:hover .hover {opacity:1; filter:Alpha(Opacity=100); /* support:IE8 */}
.wrap.inshop.granit main section > ul > li > ul > li .thumb .hover {overflow:hidden; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.wrap.inshop.granit main section > ul > li > ul > li .info {margin-top:12px;}
.wrap.inshop.granit main section > ul > li > ul > li .info span {display:block; line-height:24px; text-align:center; font-size:12px;}
.wrap.inshop.granit main section > ul > li > ul > li .info .name {width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.wrap.inshop.granit main section > ul > li > ul > li .info .price del {margin-left:6px; color:#8e8e8e;}
.wrap.inshop.granit main section > ul > li > ul > li .info .price .sale {margin-left:10px; color:#5b1eaa;}
.wrap.inshop.granit main section > ul > li > a > img,
.wrap.inshop.granit main section > ul > li > img,
.wrap.inshop.granit main section > ul > li > ul > li > a > img,
.wrap.inshop.granit main section > ul > li > ul > li > img {transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.wrap.inshop.granit main section > ul > li > a > img:hover,
.wrap.inshop.granit main section > ul > li > img:hover,
.wrap.inshop.granit main section > ul > li > ul > li > a > img:hover,
.wrap.inshop.granit main section > ul > li > ul > li > img:hover {opacity:0.7; filter:Alpha(Opacity=0.7); /* support:IE8 */}
.wrap.inshop.granit main section.item > ul {margin-top:28px;}
.wrap.inshop.granit main section.item > ul > li {height:auto;}
.wrap.inshop.granit main section.item > ul span {display:block; margin:15px 0 44px; width:100%; line-height:18px; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
/* html 코너 추가 */
.wrap.inshop.granit main section > ul > li.html {width:1180px !important; height:auto !important;}
.wrap.inshop.granit main section > ul > li.html img {width:auto;}

.wrap.inshop.granit .greet {margin:0;}
.wrap.inshop.granit .greet h2 {height:50px; line-height:50px; font-size:28px;}
.wrap.inshop.granit .greet img + h2 {margin-top:22px;}
.wrap.inshop.granit .greet p {line-height:20px; font-size:12px;}

/* Granit list 속성 */
.wrap.inshop.granit .list_goods > ul {margin:0 -8.5px !important;}
.wrap.inshop.granit .list_goods > ul > li {width:calc(25% - 17px) !important; margin:0 8.5px !important;}
.wrap.inshop.granit .list_goods > ul > li.banner {display:none !important;}

/* ########## 단일 브랜드 C 추가 (GRANIT) : E ########## */





/* ########## #71306 상품평 개선 프로젝트 : S ########## */

i.offline {display:inline-block; margin:0; padding:0 10px; height:20px; line-height:17px; color:#8e8e8e; font-size:11px; background:#fff; font-family:"SSF_Bold", "NotoSans_kr_Regular"; border:1px solid #8e8e8e; box-sizing:border-box;}
i.offline:after {content:"오프라인" !important;}
i.best {display:inline-block; margin:0; padding:0 10px; height:20px; line-height:17px; color:#fff; font-size:11px; background:#5b1eaa; font-family:"SSF_Bold", "NotoSans_kr_Regular"; border:1px solid #5b1eaa; box-sizing:border-box;}
i.best:after {content:"BEST";}
i.review {display:inline-block; margin:0; padding:0 10px; height:20px; line-height:17px; color:#fff; font-size:11px; background:#959595; font-family:"SSF_Bold", "NotoSans_kr_Regular"; border:1px solid #959595; box-sizing:border-box;}
i.review:after {content:"첫리뷰";}

.review_info {margin-top:50px;}
.review_info h4 {color:#444; font-size:14px;}
.review_info strong {display:block; margin-top:18px; color:#777; font-size:12px;}
.review_info strong + .list_wrap {margin-top:2px; color:#8e8e8e; font-size:12px;}

section.mypage .tabs .grid_wrap .info i.offline {position:absolute; margin:0 0 0 5px !important;}

section.mypage .tabs .myReview .info {max-width:800px !important;}
section.mypage .tabs .myReview .info i.best,
section.mypage .tabs .myReview .info i.review {margin:0 5px !important;}
section.mypage .tabs .myReview .info i.best + i.review {margin-left:0 !important;}
section.mypage .tabs .myReview .info .first-review {position:absolute; margin-top:-2px; color:#5b1eaa;}
section.mypage .tabs .myReview .info p {width:100%; background:url("../images/base/bg_base.png") right -302px no-repeat;}
section.mypage .tabs .myReview .on .info p {background-position:right -352px;}
section.mypage .tabs .myReview .info .title .txt {display:inline-block; max-width:400px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
section.mypage .tabs .myReview .info .title .txt.photo {padding-right:26px; box-sizing:border-box; background:url("../images/ui/bg_photo.png") no-repeat 100% 50%;}
section.mypage .tabs .myReview .on td {padding-bottom:10px !important; border-bottom:0 !important;}

section.mypage .tabs .myReview .detail td {position:relative; padding-top:0; border-top:0 !important;}
section.mypage .tabs .myReview .detail td > p {width:640px;}
section.mypage .tabs .myReview .detail td .date {position:absolute; top:0; right:20px;}
section.mypage .tabs .myReview .detail td .img img {margin:0 8px 0 0 !important; width:auto; height:160px;}
section.mypage .tabs .myReview .detail .review_info dt,
section.mypage .tabs .myReview .detail .review_info dd {float:left; padding:0; line-height:24px;}
section.mypage .tabs .myReview .detail .review_info dt {color:#999 !important;}
section.mypage .tabs .myReview .detail .review_info dd {width:90px !important;}
section.mypage .tabs .myReview .detail .review_info dd .star {margin:-4px 0 0 !important;}
section.mypage .tabs .myReview .detail .btn_wrap {display:block !important; margin:0 !important; text-align:right;}

/* ########## #71306 상품평 개선 프로젝트 : E ########## */














/* ########## 웹접근성 : S ########## */

/* :focus {box-shadow:0 0 0 2px #f00 !important;}  */

.wa_hidden {position:absolute !important; width:0 !important; height:0 !important; font-size:0 !important;}
#wa_navigation {display:block; position:absolute; top:-18px; height:18px; line-height:18px;}
.wrap header .bi_ssf {font-size:0;}

/*p19*/
.billboard .lSAction a,
.slider .lSAction a,
.lookbook .lSAction a {font-size:0 !important;}

.billboard.themeB .lSAction a {background:url("../images/base/bg_lSAction_light.png") no-repeat;}
.billboard .lSPager .btnAuto {position:absolute; display:inline-block;  margin-left:15px; width:12px; height:12px; background:url("../images/base/bg_base.png") left -600px no-repeat;}
.billboard .lSPager .btnAuto.pause {background-position:left -650px;}

/*p22*/
.promotion .benefits > ul > li em {color:#8b8b8b;}

a.close {position:absolute; top:13px; right:13px; margin:0; padding:0; width:30px; height:30px; font-size:0; background:url("../images/ui/bg_pop_close.png") no-repeat center center; cursor:pointer; z-index:1;}
#snb a.close {top:30px; right:40px;}

/* ########## 웹접근성 : E ########## */


/* ########## 웹접근성 2차: S ########## */

.picker input[type=checkbox]:focus + label,
.picker input[type=radio]:focus + label {margin:-1px; border:1px dashed #808080; box-sizing:border-box;}

.filter .layer .sort .list_sort ul li.on > a,
.filter .layer #detail .list_sort .picker .category input:checked + label,
.filter .layer #detail .list_sort .picker .brand input:checked + label,
.filter .layer #detail .list_sort .picker .size input:checked + label,
.filter .layer #detail .list_sort .picker .material input:checked + label {padding-left:13px; background:url("../images/base/bg_filter_check.png") no-repeat left;}
.filter .layer #detail .list_sort .picker .size p em {display:inline-block;}

.share.on .sns {display:inline-block; background:#fff; right:-50px;}

/* ########## 웹접근성 2차 : E ########## */


/* ########## 수트서플라이 : S ########## */

.billboard.h720 ul,
.billboard.h720 ul > li,
.billboard.h720 ul > li > img,
.billboard.h720 ul > li > a:not(.play) > img,
.billboard.h720 .lSSlideWrapper .lightSlider > li {height:720px;}

.suitsupply_nav .lSSlideOuter {position:relative;}
.suitsupply_nav .lSSlideWrapper {position:relative; overflow:hidden; z-index:1;}
.suitsupply_nav .lSSlideWrapper .lSSlide > li {position:relative; float:left;}
.suitsupply_nav .lSSlideWrapper .lSSlide > li > a > span {position:absolute; display:block; top:50%; margin-top:-21px; width:100%; height:42px; text-align:center; line-height:42px; color:#fff; font-size:38px; z-index:2;}
/* .suitsupply_nav .lSSlideWrapper .lSSlide > li > a:after {display:block; content:" "; position:absolute; top:0; width:100%; height:100%; background:#000; opacity:0.08; z-index:1;} */
.suitsupply_nav .lSAction a {position:absolute; top:50%; margin-top:-53px; width:45px; height:85px; background:url("../images/base/bg_lSAction.png") no-repeat; cursor:pointer; z-index:3;}
.suitsupply_nav .lSAction a.lSPrev {left:30px; font-size:0; background-position:left center !important;}
.suitsupply_nav .lSAction a.lSNext {right:30px; font-size:0; background-position:right center !important;}

/* ########## 수트서플라이 : E ########## */



/* ########## 클린뷰티 : S ########## */

.wrap.main nav ul.big > li {line-height:42px; font-size:26px;}
.wrap.main nav ul.mid > li {line-height:25px; font-size:15px;}
.wrap.main.ssf nav ul.big > li > a.snb.toggle {position:absolute; top:666px;}
.wrap.main nav ul.big > li > a.snb.toggle {position:absolute; top:576px;}
.wrap nav ul + ul {margin-top:14px;}
.wrap nav ul.mid + ul.mid {margin-top:12px;}
#snb > div > h3 {line-height:26px; font-size:26px;}

/* ########## 클린뷰티 : E ########## */



/* ########## 스마트필터 : S ########## */

.row_arrow.smart-filter {padding:0 0 0 20px; background:url(../images/ui/bg_smart-filter.png) no-repeat left -96px;}
.row_arrow.smart-filter.up {color:#5b1eaa; background-position:left 4px;}
.row_arrow.smart-filter.new:after {display:block; float:right; content:''; margin-left:6px; width:18px; height:24px; background:url(../images/ui/ico_filter_new.png) no-repeat center 4px;}

#smartFilter {width:830px; text-align:left;}
#smartFilter a {font-family:'SSF_Regular', 'NotoSans_kr_Demilight';}
#smartFilter h3 {margin:30px; color:#000; font-size:20px;}
#smartFilter h3 small {margin-left:6px; color:#959595; font-size:13px;}
#smartFilter h3 small.busy {padding-right:26px; background:url(../images/base/loading.gif) no-repeat right center; background-size:18px;}
#smartFilter .tabs {position:relative; margin:30px;}
#smartFilter .tabs .tab {width:170px; height:421px; border-right:1px solid #e5e5e5; border-bottom:0;}
#smartFilter .tabs .tab li {display:block; width:100%; height:18px; line-height:18px;}
#smartFilter .tabs .tab li + li {margin-top:12px;}
#smartFilter .tabs .tab li + hr + li {margin-top:22px;} 
#smartFilter .tabs .tab li a {text-align:left; color:#111; font-size:14px;}
#smartFilter .tabs .tab li a span {display:inline-block; float:left; max-width:128px; font-family:"SSF_Bold", 'NotoSans_kr_Demilight'; height:18px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#smartFilter .tabs .tab li a.on {border-bottom:0;}
#smartFilter .tabs .tab li a.on span {text-decoration:underline; font-weight:600; font-family:"SSF_Regular", "NotoSans_kr_Regular";}
#smartFilter .tabs .tab li a em {display:inline-block; margin-left:5px; padding:0 3px; min-width:16px; max-width:36px; height:16px; line-height:14px; text-align:center; color:#fff; font-size:11px; background:#c487fc; border:1px solid #c487fc; box-sizing:border-box; border-radius:8px; /*font-family:"SSF_Bold";*/ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

#smartFilter .tabs > div {position:absolute; top:0; left:230px; width:540px; height:421px; text-align:left; background:#fff; overflow:auto;}
#smartFilter .tabs > div.default {display:table; width:540px; height:421px;}
#smartFilter .tabs > div.default p {display:table-cell; vertical-align:middle; line-height:24px; text-align:center; color:#959595; font-size:13px;}
#smartFilter .tabs > div.multiselect:after {position:absolute; content:"복수 선택 가능"; top:-55px; right:30px; color:#999; font-size:12px;}
:lang(en) #smartFilter .tabs > div.multiselect:after {content:"Multiple selection possible";}
:lang(zh) #smartFilter .tabs > div.multiselect:after {content:"多种选择可能";}
#smartFilter .tabs > div h4 {height:18px; line-height:18px; font-size:14px;}
#smartFilter .tabs > div h4 + .check_list {margin-top:20px;}
#smartFilter .tabs > div h4 + ul + h4 {margin-top:30px;}
#smartFilter .tabs > div .check_list {display:inline-block; width:100%;}
#smartFilter .tabs > div .check_list > li {float:left; margin-right:25px; padding-bottom:18px; height:18px; line-height:18px; font-size:13px; font-family:"SSF_Bold", "NotoSans_kr_Regular";}
#smartFilter .tabs > div .check_list.col3 > li {width:150px;}
#smartFilter .tabs > div .check_list.col3 > li:nth-child(3n+3) {margin-right:0;}
#smartFilter .tabs > div .check_list.col2 > li {width:240px;}
#smartFilter .tabs > div .check_list.col2 > li:nth-child(2n+2) {margin-right:0;}
#smartFilter .tabs > div .chk-group input:checked + label,
#smartFilter .tabs > div .check_list input:checked + label {padding-right:13px; color:#5b1eaa !important; font-weight:600; font-family:"SSF_Regular", "NotoSans_kr_Regular"; background:url(../images/base/bg_filter_check.png) no-repeat right center;}
#smartFilter .tabs > div .chk-group input:disabled + label,
#smartFilter .tabs > div .check_list input:disabled + label {color:#8e8e8e !important; cursor:default;}
#smartFilter .tabs > div dl + dl {margin-top:23px;}
#smartFilter .tabs > div dl dt {display:inline-block; padding-bottom:6px; width:150px; vertical-align:top; line-height:18px; font-size:13px;}
#smartFilter .tabs > div dl dd {display:inline-block; margin-left:25px; width:330px !important; line-height:18px; vertical-align:top;}
#smartFilter .tabs > div dl dd label {display:inline-block; margin-right:20px; margin-bottom:8px; font-size:13px;}
#smartFilter .tabs > div .edit_price {color:#111; line-height:18px; font-size:13px;}

#smartFilter .tabs > div #setPrice {display:block; margin-top:8px; line-height:32px;}
#smartFilter .tabs > div #setPrice input {padding:0 10px; width:118px; height:32px; line-height:32px; text-align:right;}
#smartFilter .tabs > div #setPrice + .check_list {margin-top:46px;}

#smartFilter .tabs > div .accordion .title {display:block; padding:0 0 32px; width:150px; height:18px; line-height:18px; font-size:14px; font-family:"SSF_Bold", "NotoSans_kr_Regular"; background:url(../images/base/bg_combobox.png) no-repeat right -1px;}
#smartFilter .tabs > div .accordion .title.on {background-position:right -51px;}
#smartFilter .tabs > div .accordion .content {padding:0 0 42px;}

#smartFilter .tabs > div .color-select {margin-top:20px; width:100%;}
#smartFilter .tabs > div .color-select label {margin-right:10px; margin-bottom:10px;}
#smartFilter .tabs > div .color + h4 {margin-top:30px;}
#smartFilter .tabs > div .pattern {margin-right:10px; width:58px; height:23px; border:1px solid #e5e5e5; box-sizing:border-box;}

#smartFilter .smartFilter_brand #sorting_filter_keyword {margin-top:20px; width:500px; height:28px; line-height:28px; background:url(../images/ui/finder_gray.png) no-repeat right center; background-size:20px 20px;}
#smartFilter .smartFilter_brand .alphabetize {margin-top:32px;}
#smartFilter .smartFilter_brand .alphabetize .ko {display:block; margin-top:5px;}
#smartFilter .smartFilter_brand .alphabetize a {margin-left:0; color:#b4b4b4; font-size:17px; font-family:"SSF_Bold", "맑은 고딕";}
#smartFilter .smartFilter_brand .alphabetize a.on {color:#444;}
#smartFilter .smartFilter_brand #sorting_filter {margin-top:32px; width:500px; border-top:1px solid #e5e5e5;}
#smartFilter .smartFilter_brand #sorting_filter h3 {margin:35px 0 20px; color:#444; font-size:24px;}
#smartFilter .smartFilter_brand #sorting_filter .check_list > li {display:inline-block; margin-bottom:20px;}
#smartFilter .smartFilter_brand #sorting_filter .check_list > li label {display:inline-block; max-width:110px; color:#444; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#smartFilter .smartFilter_brand #sorting_filter .check_list > li label.trans {display:block; color:#999;}
#smartFilter .smartFilter_brand #sorting_filter .check_list > li em {position:absolute; margin-left:4px; color:#b4b4b4;}

#smartFilter .chk-group {line-height:26px; font-size:13px;}
#smartFilter .chk-group li em,
#smartFilter .chk-group li em > a {font-family:'SSF_Regular', 'NotoSans_kr_Demilight' !important;}
#smartFilter .chk-group li .toggle {cursor:pointer;}
#smartFilter .chk-group li .toggle a {display:inline-block; width:150px; background:url(../images/base/bg_combobox.png) no-repeat right 3px;}
#smartFilter .chk-group li.on > .toggle a {background-position:right -47px;}
#smartFilter .chk-group li.check > .toggle,
#smartFilter .chk-group li.check > .group_tit {font-family:"SSF_Bold", "NotoSans_kr_Medium" !important; color:#5b1eaa;}
#smartFilter .chk-group ul {display:none; margin-left:15px;}
#smartFilter .chk-group .on > ul {display:block;}
#smartFilter .chk-group ul li .toggle a {width:135px;}
#smartFilter .chk-group ul li:first-child {margin-top:5px;}
#smartFilter .chk-group ul li:last-child {margin-bottom:15px;}

#smartFilter .vip {display:block; margin-right:60px; margin-bottom:30px; text-align:right;}
#smartFilter .submit {margin-top:0; margin-bottom:30px;}
#smartFilter .submit .btn {border-color:#444;}

.goods_container {position:relative;}
.goods_container .loading {position:absolute; top:0; width:100%; height:100%; min-height:500px; background:rgba(255, 255, 255, 0.9);}
.goods_container .loading .loadGif {position:absolute; width:100%; height:100%;}
.goods_container .loading .loadGif img {position:absolute;}
.goods_container .loading .loadMsg {display:block; position:absolute;}

/* ########## 스마트필터 : E ########## */