@charset "utf-8"; /* Guide ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Point Color:#ff6c6c 스킨에 따라 컬러 변경할 것! */ /* Font ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* NotoSansKR - 기본 폰트 */ @font-face { font-family:'NotoSansKR'; font-style:normal; src:url('/skin/f_black/font/NotoSansKR-Regular.eot'); src:url('/skin/f_black/font/NotoSansKR-Regular.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Regular.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Regular.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:100; src:url('/skin/f_black/font/NotoSansKR-Thin.eot'); src:url('/skin/f_black/font/NotoSansKR-Thin.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Thin.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Thin.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:300; src:url('/skin/f_black/font/NotoSansKR-Light.eot'); src:url('/skin/f_black/font/NotoSansKR-Light.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Light.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Light.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:500; src:url('/skin/f_black/font/NotoSansKR-Medium.eot'); src:url('/skin/f_black/font/NotoSansKR-Medium.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Medium.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Medium.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:700; src:url('/skin/f_black/font/NotoSansKR-Bold.eot'); src:url('/skin/f_black/font/NotoSansKR-Bold.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Bold.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Bold.ttf') format('truetype'); } @font-face { font-family:'NotoSansKR'; font-style:normal; font-weight:900; src:url('/skin/f_black/font/NotoSansKR-Black.eot'); src:url('/skin/f_black/font/NotoSansKR-Black.eot?#iefix') format('eot'), url('/skin/f_black/font/NotoSansKR-Black.woff') format('woff'), url('/skin/f_black/font/NotoSansKR-Black.ttf') format('truetype'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:550; src:url('/skin/f_black/font/Raleway-SemiBold.eot'); src:url('/skin/f_black/font/Raleway-SemiBold#iefix') format('eot'), url('/skin/f_black/font/Raleway-SemiBold.woff') format('woff'), url('/skin/f_black/font/Raleway-SemiBold.ttf') format('truetype'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:600; src:url('/skin/f_black/font/Raleway-Bold.eot'); src:url('/skin/f_black/font/Raleway-Bold.eot?#iefix') format('eot'), url('/skin/f_black/font/Raleway-Bold.woff') format('woff'), url('/skin/f_black/font/Raleway-Bold.ttf') format('truetype'); } @font-face { font-family:'NanumBarunGothic'; font-style:normal; font-weight:600; src:url('/skin/f_black/font/NanumBarunGothic-Bold.eot'); src:url('/skin/f_black/font/NanumBarunGothic-Bold.eot?#iefix') format('eot'), url('/skin/f_black/font/NanumBarunGothic-Bold.woff') format('woff'), url('/skin/f_black/font/NanumBarunGothic-Bold.ttf') format('truetype'); } /* Reset ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- reset ------------- */ *, body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0; box-sizing:border-box; word-break:break-all;} fieldset,img{border:0 none;} dl,ul,ol,menu,li{list-style:none;} blockquote, q{quotes: none;} blockquote:before, blockquote:after,q:before, q:after{content:''; content:none;} input,select,textarea,button{vertical-align:middle;} table{table-layout:fixed; border-collapse:collapse; border-spacing:0;} button{display:inline-block; vertical-align:middle; padding:0; margin:0; border:0 none; background-color:transparent; cursor:pointer; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} button:focus{outline:0;} body,th,td,input,select,textarea,button{font-family:'NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-weight:400; font-size:15px; line-height:1.5; color:#555;} a{color:#555; text-decoration:none; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} a:active, a:hover{text-decoration:none;} address,caption,cite,code,dfn,em,var{font-style:normal; font-weight:normal;} img{vertical-align:middle;} caption{text-indent:-9999em; overflow:hidden; font-size:0; line-height:0;} /* Form - style ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- input ------------- */ /* reset */ input{-webkit-appearance:none; -moz-appearance:none; appearance:none;} /* IE10 - 지우기 버튼 제거 */ input::-ms-clear{display:none;} /* input type number에서 화살표 제거 */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; -moz-appearance:none;appearance:none;} /* Firefox - input type number에서 화살표 제거 */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; -moz-appearance:none; appearance:none;} input[type=number]{-moz-appearance:textfield;} /* Chrome - autofill 제거 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color:#555 !important;} /* style */ input[type="text"], input[type="password"]{display:inline-block; vertical-align:middle; padding:0 10px; height:40px; font-size:15px; font-weight:400; background:#fff; border:1px solid #ddd;} /* ------------- select ------------- */ /* reset */ select{-webkit-appearance:none; -moz-appearance:none; appearance:none;} /* IE 10,1 - 화살표 제거 */ select::-ms-expand{display:none;} /* style */ select{display:inline-block; vertical-align:middle; padding:0 27px 0 10px; height:40px; font-size:15px; font-weight:400; background:#fff url('/skin/f_black/images/common/select_arrow.png') no-repeat right 10px center; border:1px solid #ddd;} select.off{color:#555; background:#f5f5f5 url('/skin/f_black/images/common/select_arrow.png') no-repeat right 10px center;} /* style ie9 */ select{padding:0 0 0 10px \0/IE9;} /* ------------- checkbox ------------- */ input[type="checkbox"]{display:none; vertical-align:middle;} input[type="checkbox"] + label{display:inline-block; vertical-align:middle; cursor:pointer; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} input[type="checkbox"] + label:before{content:""; display:inline-block; margin:-2px 5px 0 0; width:16px; height:16px; vertical-align:middle; background:url('/skin/f_black/images/common/checkbox.png') no-repeat center center;-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} input[type="checkbox"]:checked + label:before{background:url('/skin/f_black/images/common/checkbox_on.png') no-repeat center center;} input[type="checkbox"].big + label:before{margin:0; width:25px; height:25px; background:url('/skin/f_black/images/common/checkbox_big.png') no-repeat center center;} input[type="checkbox"].big:checked + label:before{background:url('/skin/f_black/images/common/checkbox_big_on.png') no-repeat center center;} input[type="checkbox"] + label + input[type="checkbox"] + label{margin-left:15px;} /* ------------- ridio ------------- */ input[type="radio"]{display:none; vertical-align:middle;} input[type="radio"] + label{display:inline-block; vertical-align:middle; cursor:pointer; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} input[type="radio"]:checked + label{color:#000;} input[type="radio"] + label:before{content:""; display:inline-block; margin:-2px 5px 0 0; width:16px; height:16px; vertical-align:middle; background:url('/skin/f_black/images/common/radio.png') no-repeat center center;-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} input[type="radio"]:checked + label:before{background:url('/skin/f_black/images/common/radio_on.png') no-repeat center center;} input[type="radio"] + label + input[type="radio"] + label{margin-left:15px;} /* ------------- textarea ------------- */ textarea{padding:10px; max-width:100%; border:1px solid #ddd;} /* Common ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .inner{margin:0 auto; max-width:1320px; padding-left: 20px; padding-right: 20px;} .hidden{position:absolute; top:-9999px; left:-9999px; margin:0 !important; padding:0 !important; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;} .strong{color:#ff6c6c;} table .strong{font-weight:500;} .ellipsis{width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} /* 1줄용 */ @media print{ .no_print{display:none;} } /* 노이미지 no image (관리자에서 등록한 이미지 없을 때 배경처리) */ .no_image_parent{background:url('/skin/f_black/images/common/no_img.gif') no-repeat center center/cover !important;} .img_frame a.no_image_parent{display:block; width:100%; height:100%;} .no_image_parent .no_image{opacity:0 !important;} .table_col .info_box .no_image_parent{display:inline-block} /* Layout ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #wrap {position: relative; width: 100%; padding-top: 180px; overflow: hidden;} #contents {} #body_temp {position: fixed; width: 100%; margin: 0 auto; left: 0; right: 0; padding-top: 190px;} body.lock {overflow-y: scroll;} .container {width: 100%; max-width: 1480px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; position: relative;} .container:after {content: ''; display: table; clear: both;} @media (max-width:1480px) { #wrap {padding-top: 160px;} #body_temp {padding-top: 160px;} } @media (max-width:1280px) { #wrap {padding-top: 140px;} #body_temp {padding-top: 140px;} } @media (max-width:992px) { #wrap {padding-top: 56px;} #body_temp {padding-top: 56px;} } /* ------------- header ------------- */ @media (min-width:993px) { #gnb {position: fixed; left: 0; right: 0; top: 0; z-index: 100; background: #fff; transition: all .3s ease-in-out;} #gnb.scroll {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);} .gnb-inner {padding: 0 80px;} .gnb-logo {height: 100px; display: flex; justify-content: center; align-items: center;} .gnb-logo a {display: block; width: 240px; height: 64px; text-indent: -9999px; background: url('/data/images/design_file/gardennamul_title_text_240.png')no-repeat center center / 100% auto;} .gnb-wrap {position: relative;} .gnb-menu {display: flex; justify-content: center; padding: 0 80px; gap: 100px;} .gnb-menu > li.code_GD03 {display: none;} .gnb-menu > li > a {display: flex; align-items: center; height: 80px; font-size: 22px; position: relative; color: #000; font-weight: 600;} .gnb-menu > li > a:hover {color: #087A00;} .gnb-overlay {display: none;} .gnb-toggle {display: none;} .gnb-user {position: absolute; right: 0; bottom: 100%; height: 100px; display: flex; align-items: center; gap: 40px;} .gnb-other {position: absolute; right: 0; bottom: 0; display: flex; align-items: center; height: 80px;} .gnb-sch {margin-right: 30px;} .gnb-sch form {width: 230px; padding-left: 10px; padding-right: 5px; background: #f3f3f3; display: flex; align-items: center; border-radius: 50px;} .gnb-sch input[type="text"] {border: none; flex-grow: 1; width: 100%; height: 50px; padding-right: 0; background: none; appearance: none;} .gnb-sch input[type="text"]:focus {outline: none;} .gnb-sch button {width: 50px; height: 50px; flex-shrink: 0; display: block; text-indent: -9999px; appearance: none; background: url('/skin/f_black/images/common/gnb_search.png')no-repeat center 45% / 20px auto;} .gnb-shop {display: flex; align-items: center; gap: 20px;} .gnb-shop li a {display: block; text-indent: -9999px;} .gnb-shop li a.mpg {width: 26px; height: 35px; background: url('/skin/f_black/images/common/gnb_mypage.png')no-repeat center center / cover;} .gnb-shop li a.cart {width: 37px; height: 34px; background: url('/skin/f_black/images/common/gnb_cart.png')no-repeat center center / cover;} .gnb-all__mo {display: none;} .gnb-all {position: absolute; left: 0; bottom: 0; height: 80px; z-index: 1; display: flex; align-items: center;} .gnb-all__btn {display: flex; align-items: center; position: relative; padding-left: 10px; transition: all .3s ease-in-out;} .gnb-all__btn:before {content: ''; display: block; background: #fff; border: solid 1px #0c7c00; border-bottom: none; width: 550px; position: absolute; left: -20px; top: -30px; bottom: -30px; z-index: -1; opacity: 0; border-radius: 20px 10px 0 0;} .gnb-all__btn span {display: block; width: 40px; height: 40px; margin-right: 10px; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; border-radius: 50% 0 50% 50%;} .gnb-all__btn span em {display: block; width: 26px; height: 2px; background: #000; position: relative; transition: all .3s ease-in-out;} .gnb-all__btn span em:before, .gnb-all__btn span em:after {content: ''; display: block; height: 2px; background: #000; position: absolute; left: 0; top: 50%; transition: all .3s ease-in-out;} .gnb-all__btn span em:before {width: 26px; margin-top: -8px;} .gnb-all__btn span em:after {width: 14px; margin-top: 6px;} .gnb-all.active > .gnb-all__btn {} .gnb-all.active > .gnb-all__btn:before {opacity: 1;} .gnb-all.active > .gnb-all__btn span {background: #000;} .gnb-all.active > .gnb-all__btn span em {background: none;} .gnb-all.active > .gnb-all__btn span em:before, .gnb-all.active > .gnb-all__btn span em:after {background: #fff;} .gnb-all.active > .gnb-all__btn span em:before {transform:rotate(45deg); margin-top: -2px;} .gnb-all.active > .gnb-all__btn span em:after {width: 26px; transform:rotate(-45deg); margin-top: -2px;} .gnb-all.active > .gnb-all__menu {display: flex;} .gnb-all__menu {display: none; position: absolute; top: 100%; left: -20px; width: 552px; height: 320px; padding: 10px 30px 30px; background: #fff; border: solid 1px #0c7c00; border-top: none; border-radius: 0 0 20px 20px;} .gnb-all__menu > div {flex: 1; overflow-y: auto; border-right: solid 1px #e9e9e9; padding: 0 20px;} .gnb-all__menu > div.gnb-all__depth3 {border-right: none;} .gnb-all__menu > div > ul {display: none;} .gnb-all__menu > div > ul.active {display: block;} .gnb-all__menu > div.gnb-all__depth1 > ul {display: block;} .gnb-all__menu > div > ul > li {margin-bottom: 10px;} .gnb-all__menu > div > ul > li:last-child {margin-bottom: 0;} .gnb-all__menu > div > ul > li > a {height: 40px; padding: 0 20px; border-radius: 40px; display: flex; align-items: center; justify-content: space-between; transition: all .3s ease-in-out;} .gnb-all__menu > div > ul > li > a:after {content: ''; display: none; width: 5px; height: 5px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform:rotate(45deg);} .gnb-all__menu > div > ul > li > a.active {background: #0c7c00; color: #fff;} .gnb-all__menu > div > ul > li > a.active:after {display: block;} .gnb-all__menu > div.gnb-all__depth3 > ul > li > a:hover {background: #0c7c00; color: #fff;} .gnb-all__menu > div.gnb-all__depth3 > ul > li > a:hover:after {display: block;} } .gnb-inner {padding: 0 40px;} .gnb-logo {height: 80px;} .gnb-logo a {width: 245px; height: 80px;} .gnb-menu {gap: 80px;} .gnb-menu > li > a {font-size: 20px;} .gnb-user {height: 80px; gap: 30px;} .gnb-sch input[type="text"] {height: 44px; font-size: 14px;} .gnb-sch button {width: 40px; height: 44px;} .gnb-shop li a.mpg {width: 22px; height: 30px;} .gnb-shop li a.cart {width: 32px; height: 29px;} } @media all and (min-width:993px) and (max-width:1280px) { .gnb-inner {padding: 0 20px;} .gnb-logo {height: 60px;} .gnb-logo a {width: 160px; height: 43px;} .gnb-menu {gap: 60px;} .gnb-menu > li > a {font-size: 18px;} .gnb-user {height: 60px; gap: 20px;} .gnb-user li a {font-size: 14px;} .gnb-sch {margin-right: 20px;} .gnb-sch form {width: 200px;} .gnb-sch input[type="text"] {height: 40px; font-size: 13px;} .gnb-sch button {width: 40px; height: 40px; background-size: 18px auto;} .gnb-shop li a.mpg {width: 18px; height: 24px;} .gnb-shop li a.cart {width: 26px; height: 24px;} .gnb-all button {font-size: 14px;} } @media (max-width:992px) { #gnb {position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 56px; background: #fff; border-bottom: solid 1px #eaeaea;} .gnb-inner {padding-left: 20px; padding-right: 5px; display: flex; justify-content: space-between;} .gnb-logo a {display: block; width: 120px; height: 55px; text-indent: -9999px; background: url('/skin/f_black/images/common/gnb_logo.png')no-repeat center center / 100% auto;} .gnb-wrap {position: fixed; right: -100%; top: 56px; bottom: 0; width: 100%; overflow-y: auto; background: #fff; z-index: 99; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} #gnb.on .gnb-wrap {right: 0;} #gnb.on .gnb-logo a {position: relative; z-index: 100;} .gnb-toggle {display: block; width: 54px; height: 54px; background: none; text-indent: -9999px; padding: 17px 14px; position: relative; z-index: 102;} .gnb-toggle span, .gnb-toggle:before, .gnb-toggle:after {content: ''; display: block; height: 2px; background: #333; margin-bottom: 6px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} .gnb-toggle:after {margin-bottom: 0;} .gnb-toggle.on:before {margin-left:0px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);} .gnb-toggle.on span {opacity:0;} .gnb-toggle.on:after {margin-top:-16px; margin-left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);} .gnb-user {padding: 15px 0; border-bottom: solid 1px #eaeaea; background: #f5f5f5; display: flex; align-items: center;} .gnb-user li {flex: 1; display: flex; align-items: center;} .gnb-user li:after {content: ''; display: block; width: 1px; height: 12px; background: #ddd; flex-shrink: 0;} .gnb-user li:last-child:after {display: none;} .gnb-user li a {font-size: 14px; flex-grow: 1; display: flex; align-items: center; justify-content: center;} .gnb-other {display: flex; align-items: center; padding: 15px;} .gnb-sch {margin-right: 10px; flex-grow: 1;} .gnb-sch form {width: 100%; padding-left: 5px; padding-right: 5px; background: #f3f3f3; display: flex; align-items: center; border-radius: 50px;} .gnb-sch input[type="text"] {border: none; flex-grow: 1; width: 100%; height: 44px; font-size: 14px; padding-right: 0; background: none; appearance: none;} .gnb-sch input[type="text"]:focus {outline: none;} .gnb-sch button {width: 44px; height: 44px; flex-shrink: 0; display: block; text-indent: -9999px; appearance: none; background: url('/skin/f_black/images/common/gnb_search.png')no-repeat center 45% / 16px auto;} .gnb-shop {flex-shrink: 0; display: flex; align-items: center; gap: 10px;} .gnb-shop li a {display: block; font-size: 12px;} .gnb-shop li a:before {content: ''; display: block; margin: 0 auto 4px;} .gnb-shop li a.mpg:before {width: 15px; height: 20px; background: url('/skin/f_black/images/common/gnb_mypage.png')no-repeat center center / cover;} .gnb-shop li a.cart:before {width: 24px; height: 22px; background: url('/skin/f_black/images/common/gnb_cart.png')no-repeat center center / cover;} .gnb-menu {border-top: solid 1px #eaeaea;} .gnb-menu > li {border-bottom: solid 1px #eaeaea;} .gnb-menu > li > a {font-size: 16px; position: relative; color: #000; padding: 15px; display: flex; align-items: center; justify-content: space-between;} .gnb-menu > li > a:after {content: ''; display: block; width: 6px; height: 6px; margin-right: 5px; border-top: solid 1px #333; border-right: solid 1px #000; transform:rotate(45deg);} .gnb-all {display: none;} .gnb-all__mo > ul {} .gnb-all__mo > ul > li {padding: 15px; border-bottom: dotted 1px #ddd;} .gnb-all__mo > ul > li > a {color: #0c7c00; font-weight: 600; font-size: 16px;} .gnb-all__mo > ul > li > ul {margin-top: 5px; display: flex; flex-wrap: wrap;} .gnb-all__mo > ul > li > ul > li {display: flex; align-items: center;} .gnb-all__mo > ul > li > ul > li:after {content: ''; display: block; width: 1px; height: 10px; background: #ddd; margin: 0 10px;} .gnb-all__mo > ul > li > ul > li:last-child:after {display: none;} .gnb-all__mo > ul > li > ul > li > a {font-size: 14px;} .gnb-all__mo > ul > li > ul > li > ul {display: none;} /* .gnb-overlay {visibility: hidden; opacity: 0; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 98; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;} #gnb.on .gnb-overlay {visibility: visible; opacity: 1;} */ } /* ------------- Footer ------------- */ #footer {border-top: solid 1px #dadada;} .ft-top {position: relative;} .ft-top .inner {display: flex; align-items: center;} .ft-menu {flex-grow: 1; display: flex; align-items: center; gap: 60px;} .ft-menu li a strong {color: #000; font-weight: 400;} .ft-quick {width: 70px; height: 70px; font-size: 14px; background: #000; color: #fff; position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;} .ft-quick:before {content: ''; display: block; width: 2px; height: 12px; background: #fff; margin-bottom: 5px;} .ft-quick:after {content: ''; display: block; width: 6px; height: 6px; border-top: solid 2px #fff; border-left: solid 2px #fff; position: absolute; left: 50%; margin-left: -4px; top: 50%; margin-top: -20px; transform:rotate(45deg);} .ft-bot {border-top: solid 1px #dadada; padding: 30px 0;} .ft-wrap {display: flex;} .ft-logo {flex-shrink: 0; margin-right: 100px;} .ft-logo img {display: block; width: 130px;} .ft-content {flex-grow: 1;} .ft-info {display: flex; flex-wrap: wrap; gap: 10px 30px;} .ft-info li {color: rgba(0,0,0,0.5);} .ft-copy {margin-top: 30px; color: rgba(0,0,0,0.5);} .ft-copy a {color: rgba(0,0,0,0.5);} .ft-sns {padding-top: 30px; margin-left: 100px; flex-shrink: 0; display: flex; gap: 10px;} .ft-sns li a {display: block; width: 50px; height: 50px; text-indent: -9999px;} .ft-sns li a.insta {background: url('/skin/f_black/images/common/footer_sns_1.png')no-repeat center center / cover;} .ft-sns li a.blog {background: url('/skin/f_black/images/common/footer_sns_2.png')no-repeat center center / cover;} .ft-sns li a.youtube {background: url('/skin/f_black/images/common/footer_sns_3.png')no-repeat center center / cover;} .btn_go_mobile {display: none !important;} @media (max-width:1280px) { .ft-menu {gap: 30px;} .ft-logo {margin-right: 80px;} .ft-info li {font-size: 14px;} .ft-copy {font-size: 14px; margin-top: 20px;} .ft-sns {margin-left: 80px;} .ft-sns li a {width: 40px; height: 40px;} } @media (max-width:992px) { .ft-top .inner {display: block;} .ft-menu {flex-wrap: wrap; gap: 5px 15px; justify-content: center; padding: 10px 0;} .ft-menu li a {font-size: 13px;} .ft-quick {position: absolute; right: 0; top: 100%; width: 50px; height: 50px; font-size: 11px;} .ft-quick:before {height: 8px; margin-bottom: 3px;} .ft-quick:after {margin-top: -14px;} .ft-wrap {display: block;} .ft-logo {margin-right: 0;} .ft-logo img {width: 100px; margin: 0 auto;} .ft-content {margin-top: 20px;} .ft-info {gap: 5px 10px; justify-content: center;} .ft-info li {font-size: 12px;} .ft-copy {font-size: 12px; text-align: center;} .ft-sns {padding-top: 0; margin-top: 20px; margin-left: 0; justify-content: center;} .ft-sns li a {width: 34px; height: 34px;} } /* ------------- 메인 ------------- */ /* 배너 */ .main-banner {} .main-banner__item {display: block; padding-bottom: 26.6129%;} .main-prm {margin-top: 120px;} .main-prm .slick-slide img {width: 100%;} @media (max-width:1280px) { .main-prm {margin-top: 100px;} } @media (max-width:992px) { .main-banner__item {padding-bottom: 35%;} .main-prm {margin-top: 80px;} } @media (max-width:768px) { .main-prm {margin-top: 60px;} } /* 퀵메뉴 */ .main-quick {margin-top: 70px; display: flex; justify-content: space-around;} .main-quick li {} .main-quick li a {display: block; text-align: center; color: #000;} .main-quick li a:before {content: ''; display: block; width: 160px; height: 160px; border-radius: 50%; margin-bottom: 10px;} .main-quick li:nth-child(1) a:before {background: url('/skin/f_black/images/main/main_quick_1.png')no-repeat center center / cover;} .main-quick li:nth-child(2) a:before {background: url('/skin/f_black/images/main/main_quick_3.png')no-repeat center center / cover;} .main-quick li:nth-child(3) a:before {background: url('/skin/f_black/images/main/main_quick_4.png')no-repeat center center / cover;} .main-quick li:nth-child(4) a:before {background: url('/skin/f_black/images/main/main_quick_5.png')no-repeat center center / cover;} .main-quick li:nth-child(5) a:before {background: url('/skin/f_black/images/main/main_quick_2.png')no-repeat center center / cover;} @media (max-width:1280px) { .main-quick {margin-top: 60px;} .main-quick li a:before {width: 140px; height: 140px;} } @media (max-width:992px) { .main-quick {margin-top: 50px;} .main-quick li a:before {width: 120px; height: 120px;} } @media (max-width:768px) { .main-quick {margin-top: 40px; margin-left: -5px; margin-right: -5px;} .main-quick li {width: 20%; padding: 0 5px;} .main-quick li a {font-size: 12px; letter-spacing: -0.075rem;} .main-quick li a:before {width: 100%; height: auto; padding-bottom: 100%; margin-bottom: 5px;} } /* 리뷰 */ .main-rvw {padding: 100px 0; margin-top: 120px; position: relative; display: flex;} .main-rvw:before {content: ''; display: block; background: #f8f8f8; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100%; right: -100%;} .main-rvw__title {width: 330px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;} .main-rvw__title h4 {font-size: 30px; color: #000; font-weight: 700; line-height: 1.2;} .main-rvw__title p {margin: 10px 0;} .main-rvw__title a {display: flex; align-items: center;} .main-rvw__title a:after {content: ''; display: block; width: 6px; height: 6px; margin-left: 5px; border-top: solid 2px #333; border-right: solid 2px #333; transform:rotate(45deg);} .main-rvw__cont {width: calc(100% - 330px);} .main-rvw__slider {margin: 0 -15px;} .main-rvw__item {padding: 0 15px;} .main-rvw__item a {display: block; background: #fff; padding: 30px 20px;} .main-rvw__info {display: flex;} .main-rvw__info dt {order: 1; flex-shrink: 0; margin-left: 20px;} .main-rvw__info dt img {display: block; width: 70px;} .main-rvw__info dd {flex-grow: 1; min-width: 0;} .main-rvw__info dd h5 {font-size: 18px; color: #000; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .main-rvw__text {margin-top: 20px;} .main-rvw__text dt {margin-bottom: 10px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.5; height: 3.0em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .main-rvw__text dd {color: #989898; font-size: 14px;} .main-rvw__star {letter-spacing: -0.075rem; margin-top: 10px;} .main-rvw__star span {color: #d3d3d3;} .main-rvw__star span.on {color: #1cad00;} .main-rvw__progress {background: #dfdfdf; margin-top: 20px;} .main-rvw__progress span {display: block; background: #1dad00; height: 2px; width: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;} @media (max-width:1280px) { .main-rvw {padding: 80px 0; margin-top: 100px;} .main-rvw__title {width: 280px;} .main-rvw__title h4 {font-size: 26px;} .main-rvw__cont {width: calc(100% - 280px);} .main-rvw__slider {margin: 0 -10px;} .main-rvw__item {padding: 0 10px;} } @media (max-width:992px) { .main-rvw {padding: 60px 0; margin-top: 80px;} .main-rvw__title h4 {font-size: 22px;} } @media (max-width:768px) { .main-rvw {margin-top: 60px; display: block;} .main-rvw__title {width: 100%; position: relative;} .main-rvw__title h4 {font-size: 20px;} .main-rvw__title h4 br {display: none;} .main-rvw__title p {font-size: 12px; margin: 5px 0;} .main-rvw__title p br {display: none;} .main-rvw__title a {position: absolute; right: 0; top: 0; font-size: 12px;} .main-rvw__title a:after {width: 4px; height: 4px;} .main-rvw__cont {width: 100%; margin-top: 20px;} .main-rvw__slider {padding-right: 20%; margin: 0 -5px;} .main-rvw__slider .slick-list {overflow: visible;} .main-rvw__item {padding: 0 5px;} .main-rvw__item a {padding: 20px 15px;} .main-rvw__info dt {margin-left: 10px;} .main-rvw__info dt img {width: 60px;} .main-rvw__info dd h5 {font-size: 16px;} .main-rvw__text {margin-top: 10px;} .main-rvw__text dt {margin-bottom: 10px; font-size: 13px;} .main-rvw__text dd {font-size: 12px;} .main-rvw__star {margin-top: 5px; font-size: 14px;} } /* 메인하단 */ .main-bot {padding: 80px 0; display: flex; margin: 0 -25px;} .main-bot__group {width: calc(100% / 3); padding: 0 25px;} .main-bot__header {display: flex; align-items: center;} .main-bot__header h4 {flex-grow: 1; font-size: 18px; font-weight: 400; color: #000; height: 20px; line-height: 20px;} .main-bot__header a {flex-shrink: 0; display: block; width: 20px; height: 20px; background: none; position: relative; text-indent: -9999px;} .main-bot__header a:before, .main-bot__header a:after {content: ''; display: block; background: #000; position: absolute; left: 50%; top: 50%;} .main-bot__header a:before {width: 14px; height: 2px; margin-left: -7px; margin-top: -1px;} .main-bot__header a:after {width: 2px; height: 14px; margin-left: -1px; margin-top: -7px;} .main-bot__body {margin-top: 20px;} .main-bot__notice {} .main-bot__notice li {display: flex; align-items: center; margin-bottom: 10px;} .main-bot__notice li:last-child {margin-bottom: 0;} .main-bot__notice li:before {content: ''; flex-shrink: 0; display: block; background: #6d6d6d; width: 3px; height: 3px; margin-right: 4px; border-radius: 50%;} .main-bot__notice li a {color: #6d6d6d; display: inline-block; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .main-bot__notice li.nodata {} .main-bot__cs {margin-top: -10px;} .main-bot__cs dt {font-size: 30px; font-weight: 700; color: #000;} .main-bot__cs dd {display: flex;} .main-bot__cs dd p {color: #939393; flex-grow: 1; padding-top: 10px;} .main-bot__cs dd a {flex-shrink: 0; width: 110px; height: 60px; color: #000; font-weight: 500; border: solid 1px #e1e1e1; display: flex; align-items: center; justify-content: center;} .main-bot__pay dt {font-size: 20px; font-weight: 500; color: #000;} .main-bot__pay dd {color: #6d6d6d; margin-top: 10px;} @media (max-width:1280px) { .main-bot {margin: 0 -20px;} .main-bot__group {padding: 0 20px;} .main-bot__header h4 {font-size: 18px;} .main-bot__notice li a {font-size: 14px;} .main-bot__cs dt {font-size: 26px;} .main-bot__cs dd {display: block;} .main-bot__cs dd a {width: 80px; height: 36px; font-size: 13px; margin-top: 10px;} .main-bot__pay dt {font-size: 18px;} } @media (max-width:992px) { .main-bot {margin: 0 -15px;} .main-bot__group {padding: 0 15px;} .main-bot__header h4 {font-size: 16px;} .main-bot__cs dt {font-size: 20px;} .main-bot__cs dd p {font-size: 13px;} .main-bot__cs dd a {width: 70px; height: 34px;} .main-bot__pay dt {font-size: 16px;} .main-bot__pay dd {font-size: 13px;} } @media (max-width:768px) { .main-bot {padding: 60px 0; margin: 0; display: block;} .main-bot__group {padding: 0; width: 100%; padding-bottom: 30px; margin-bottom: 30px; border-bottom: dotted 1px #ddd;} .main-bot__group:last-child {padding-bottom: 0; margin-bottom: 0; border-bottom: none;} } /* 상품 가격 */ .main-gd {margin-top: 120px;} .main-gd__top {padding-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between;} .main-gd__top dt {display: flex; align-items: flex-end;} .main-gd__top dt h4 {font-size: 30px; color: #000; font-weight: 700; margin-right: 15px; line-height: 1.2;} .main-gd__top dd {flex-shrink: 0; margin-left: 10px;} .main-gd__top dd a {display: flex; align-items: center;} .main-gd__top dd a:after {content: ''; display: block; width: 6px; height: 6px; margin-left: 5px; border-top: solid 2px #333; border-right: solid 2px #333; transform:rotate(45deg);} .main-gd__list {display: flex; margin: -25px; flex-wrap: wrap;} .main-gd__list > li {width: calc(100% / 4); padding: 25px;} .main-gd__thumb {display: block; position: relative;} .main-gd__thumb img {display: block; max-width: 100% !important; height: auto !important;} .main-gd__thumb span {display: block; padding-bottom: 128.5714%;} .main-gd__thumb h5 {font-size: 18px; font-weight: 400; margin-top: 15px; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.5; height: 3.0em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .main-gd__thumb em {background: #ea7c42; color: #fff; padding: 0 10px; height: 34px; position: absolute; left: 0; top: 0; display: flex; align-items: center;} .main-gd__info {margin-top: 10px; display: flex; align-items: center; justify-content: space-between;} .main-gd__price {} .main-gd__info__cart {} .main-gd__info__cart a.cart {display: block; width: 50px; height: 50px; border: solid 1px #ddd; text-indent: -9999px; border-radius: 50%; background: url('/skin/f_black/images/main/main_goods_cart.png')no-repeat center center / 25px auto;} .main-gd__list .item_price {} .main-gd__list .item_price dt {display: none;} .main-gd__list .price_selling dd {font-size: 18px; font-weight: 700; color: #000;} .main-gd__list .price_selling dd u {font-size: 16px; color: #a0a0a0; font-weight: 400; text-decoration: line-through; margin-left: 10px;} .main-gd__list .price_buying dd {font-size: 16px; font-weight: 400; color: #555;} .main-gd__list .price_member dd {letter-spacing:-0.5px; font-size:20px; font-weight:500; color:#ff6c6c;} .main-gd__list .price_selling .unit, .main-gd__list .price_buying .unit, .main-gd__list .price_member .unit {font-size: 16px; font-weight: 400; color: #000;} /* 할인 비율 */ .main-gd__list .discount_ratio {display:inline-block; margin-left:5px; padding:0 5px; height:20px; vertical-align:middle; letter-spacing:0; font-weight:500; font-size:13px; line-height:18px; border:1px solid #ffb5b5; border-radius:2px;} .main-gd__list .discount_ratio .percent {font-size:11px;} /* 적립금 */ .item_point{margin-top:10px; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-size:12px; font-weight:400; line-height:1; color:#000;} .item_point img{margin:-2px 3px 0 0;} /* 상품 라벨 */ .main-gd__list .item_label{font-size:0; line-height:0;} .main-gd__list .sold_out{margin-top:5px;} .main-gd__list .item_label_list{font-size:0; line-height:0;} .main-gd__list .item_label_list li{display:inline-block; margin:5px 5px 0 0;} /* 상품 추가일(관심상품) */ .main-gd__list .item_date{margin-top:7px; text-align:right; font-size:12px; font-weight:300; line-height:1; color:#888;} /* 상품 선택 */ .main-gd__list .item_check{position:absolute; top:15px; left:15px; font-size:0; line-height:0;} @media (max-width:1280px) { .main-gd {margin-top: 100px;} .main-gd__top {padding-bottom: 30px;} .main-gd__top dt h4 {font-size: 26px;} .main-gd__list {gap: 30px;} .main-gd__thumb h5 {font-size: 16px; margin-top: 10px;} .main-gd__thumb em {height: 30px; font-size: 14px;} .main-gd__info__cart a.cart {width: 40px; height: 40px; background-size: 20px auto;} .main-gd__list .price_selling dd {font-size: 16px;} .main-gd__list .price_selling dd u {font-size: 14px; margin-left: 5px;} .main-gd__list .price_buying dd {font-size: 14px;} .main-gd__list .price_member dd {font-size: 16px;} .main-gd__list .price_selling .unit, .main-gd__list .price_buying .unit, .main-gd__list .price_member .unit {font-size: 14px;} } @media (max-width:992px) { .main-gd {margin-top: 80px;} .main-gd__top {padding-bottom: 20px;} .main-gd__top dt h4 {font-size: 22px;} .main-gd__top dt p {font-size: 14px;} .main-gd__list {gap: 20px;} .main-gd__thumb h5 {font-size: 14px; margin-top: 10px;} } @media (max-width:768px) { .main-gd {margin-top: 60px;} .main-gd__top {align-items: flex-start;} .main-gd__top dt {display: block;} .main-gd__top dt h4 {font-size: 20px;} .main-gd__top dt p {font-size: 12px; margin-top: 5px;} .main-gd__top dd a {font-size: 12px;} .main-gd__top dd a:after {width: 4px; height: 4px;} .main-gd__list {flex-wrap: wrap; gap: 20px 10px;} .main-gd__list > li {width: calc(50% - 5px); flex: auto;} .main-gd__thumb h5 {height: 1.5em; -webkit-line-clamp: 1;} .main-gd__info__cart a.cart {width: 30px; height: 30px; background-size: 16px auto;} } .gd-cate {display: flex; justify-content: center; gap: 10px;} .gd-cate li a {padding: 0 30px; font-size: 18px; color: #898989; border: solid 1px #cdcdcd; height: 50px; border-radius: 50px; display: flex; align-items: center; justify-content: center;} .gd-cate li a.on {background: #0F9E00; border-color: #0F9E00; color: #fff;} .gd-cate li a span {display: none;} .gd-cate2 {margin-top: 30px; display: flex; justify-content: center; gap: 10px 30px;} .gd-cate2 li a {font-size: 18px; color: #898989;} .gd-cate2 li a.on {text-decoration: underline; color: #000;} .gd-cate2 li a span {display: none;} @media (max-width:1280px) { .gd-cate li a {padding: 0 20px; font-size: 16px; height: 40px;} } @media (max-width:768px) { .gd-cate {gap: 5px;} .gd-cate li a {padding: 0 15px; font-size: 10px; height: 30px;} } /* ------------- 오늘 본 상품 ------------- */ #todayItem{z-index:999; position:fixed; top:0; right:-124px; width:124px; height:100%; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} #todayItem.active{right:0;} .today_area{position:relative; padding:30px 25px; width:124px; height:100%; text-align:center; background:#fff; border-left:4px solid #000;} .today_area h2{margin-bottom:25px; text-transform:uppercase; font-size:15px; font-weight:700; color:#000;} .today_list{margin:0 auto; width:80px;} .today_list li{position:relative; margin-top:15px; width:70px; height:70px; overflow:hidden; background:#f9f9f9;} .today_list li:first-child{margin-top:0;} .today_list li img{width:70px; height:70px;} .today_list li.no_data{position:absolute; top:50%; margin-top:-36px; height:auto; font-size:12px; line-height:2; color:#999; background:none;} /* fixed 버튼 */ .fixed_btn{z-index:999; position:absolute; bottom:81px; right:154px;} .fixed_btn button{display:block; margin-top:5px; width:45px; height:45px; line-height:0; font-size:0; background:#000; border-radius:50%;} .fixed_btn button.today_btn.active{background:#8a8d99;} @media (max-width: 768px) { #todayItem, .fixed_btn { display: none; } } /* 카카오 상담톡 */ #btn_kakaotalk{-webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} #btn_kakaotalk img{width:45px !important;} /* ------------- container ------------- */ #container{width:100%;} /* 상품 리스트 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 상품 리스트 공통 ------------- */ .item_list{overflow:hidden;} .item_list > ul{font-size:0; line-height:0;} .item_list > ul:after{content:""; display:block; clear:both;} .item_list .item{position:relative; display:inline-block; vertical-align:top; line-height:1.5; font-size:15px;} /* 상품 이미지 */ .item_list .img_frame{position:relative;} .item_list .item_img{position:relative; overflow:hidden; background:#f5f5f5;} .item_list .item_img > a{display:block; width:100%; height:100%;} .item_list .item_img img{max-width:100%; max-height:100%; min-width:100%; min-height:100%;} /* 상품 버튼 */ .item_list .item_shop_btn{z-index:55; position:absolute; bottom:15px; right:15px; font-size:0; line-height:0;} .item_list .item_shop_btn a{display:inline-block; margin-left:5px; width:21px; height:20px; text-indent:-9999em; overflow:hidden;} .item_list .item_shop_btn a:first-child{margin-left:0;} .item_list .item_shop_btn .cart{background:url('/skin/f_black/images/shop/item_cart.png') no-repeat center center;} .item_list .item_shop_btn .cart.active, .item_list .item_shop_btn .cart:hover{background:url('/skin/f_black/images/shop/item_cart_on.png') no-repeat center center;} .item_list .item_shop_btn .wish{background:url('/skin/f_black/images/shop/item_wish.png') no-repeat center bottom;} .item_list .item_shop_btn .wish.active, .item_list .item_shop_btn .wish:hover{background:url('/skin/f_black/images/shop/item_wish_on.png') no-repeat center bottom;} .item_list .item_shop_btn .wish.on{background:url('/skin/f_black/images/shop/item_wish_on.png') no-repeat center bottom;} .item_list .txt_frame > a{display:block;} /* 상품 코드 */ .item_list .item_code{margin-top:10px; font-weight:300; font-size:13px; color:#888;} /* 상품 브랜드 */ .item_list .item_brand{display:inline-block; margin-top:10px; line-height:1; font-size:12px; font-weight:500; font-style:italic; color:#000;} .item_list .item_code + .item_brand{margin-top:0;} /* 상품 타이틀 */ .item_list .item_tit{margin-top:26px; line-height:1.3; font-size:16px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:#000;} .item_list .item_code + .item_tit{margin-top:2px;} .item_list .item_brand + .item_tit{margin-top:0;} /* 상품 간략 설명 */ .item_list .item_decs{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:5px; height:36px; font-size:13px; font-weight:300; line-height:1.4; color:#555; text-overflow:ellipsis; overflow:hidden; word-wrap:break-word;} /* 가격 대체 문구 */ .item_list .item_price_no{margin-top:13px; font-size:12px; font-weight:400; line-height:1; color:#555;} .item_list .item_tit + .item_price_no{margin-top:23px;} /* 상품 가격 */ .item_list .item_price{font-size:0; line-height:0;} .item_list .item_price dt{display:inline-block; vertical-align:middle; margin-top:3px; margin-right:5px; font-size:12px; font-weight:400; line-height:1; color:#555;} .item_list .item_price dd{display:inline-block; vertical-align:middle; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; line-height:1;} /*.item_list .price_selling dd{text-decoration:line-through; font-size:14px; font-weight:400; color:#999;}*/ .item_list .price_selling dd{ font-size:14px; font-weight:400; color:#999;} .item_list .price_buying dd{font-size:14px; font-weight:400; color:#555;} .item_list .price_member dd{letter-spacing:-0.5px; font-size:20px; font-weight:500; color:#ff6c6c;} .item_list .price_selling .unit{font-size:12px; font-weight:300;} .item_list .price_buying .unit{font-size:12px; font-weight:300;} .item_list .price_member .unit{font-size:15px; font-weight:400;} .item_list .price_selling, .item_list .price_buying, .item_list .price_member{margin-top:10px;} .item_list .item_tit + .price_selling, .item_list .item_tit + .price_buying, .item_list .item_tit + .price_member{margin-top:20px;} .item_list .item_price + .item_price{margin-top:5px;} /* 할인 비율 */ .item_list .discount_ratio{display:inline-block; margin-left:5px; padding:0 5px; height:20px; vertical-align:middle; letter-spacing:0; font-weight:500; font-size:13px; line-height:18px; border:1px solid #ffb5b5; border-radius:2px;} .item_list .discount_ratio .percent{font-size:11px;} /* 적립금 */ .item_point{margin-top:10px; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-size:12px; font-weight:400; line-height:1; color:#000;} .item_point img{margin:-2px 3px 0 0;} /* 상품 라벨 */ .item_list .item_label{margin-top:10px; font-size:0; line-height:0;} .item_list .sold_out{margin-top:5px;} .item_list .item_label_list{font-size:0; line-height:0;} .item_list .item_label_list li{display:inline-block; margin:5px 5px 0 0;} /* 상품 추가일(관심상품) */ .item_list .item_date{margin-top:7px; text-align:right; font-size:12px; font-weight:300; line-height:1; color:#888;} /* 상품 선택 */ .item_list .item_check{position:absolute; top:15px; left:15px; font-size:0; line-height:0;} /* ------------- 상품 리스트 레이아웃 커스텀 ------------- */ /* 추천 상품 */ .item_list.recommend{margin-bottom:50px; padding-bottom:50px; border-bottom:1px dashed #aaa;} /* colume 6 */ .item_list .item_list_col6{margin:-25px -5px;} .item_list .item_list_col6 .item{margin:25px 5px;} .item_list .item_list_col6 .item{width:205px;} .item_list .item_list_col6 .item_img{width:205px; height:205px;} .item_list .item_list_col6 .item_img > img{width:205px; height:205px;} /* colume 5 */ .item_list .item_list_col5{margin:-25px -10px;} .item_list .item_list_col5 .item{margin:25px 10px;} .item_list .item_list_col5 .item{width:240px;} .item_list .item_list_col5 .item_img{width:240px; height:240px;} .item_list .item_list_col5 .item_img > img{width:240px; height:240px;} /* colume 4 (default) */ .item_list .item_list_col4{margin:-25px -10px;} .item_list .item_list_col4 .item{margin:25px 10px;} .item_list .item_list_col4 .item{width:305px;} .item_list .item_list_col4 .item_img{width:305px; height:305px;} .item_list .item_list_col4 .item_img > img{width:305px; height:305px;} @media (max-width:768px) { .item_list .item_list_col4 { margin: 0 !important; padding: 0 10px; /* 선택: 좌우 살짝 여백 주기 */ text-align: center; } /* 리스트 아이템 자체도 가운데 배치 */ .item_list .item_list_col4 .item { margin-left: auto; margin-right: auto; } } /* colume 3 */ .item_list .item_list_col3{margin:-25px -12.5px;} .item_list .item_list_col3 .item{margin:25px 12.5px;} .item_list .item_list_col3 .item{width:410px;} .item_list .item_list_col3 .item_img{width:410px; height:410px;} .item_list .item_list_col3 .item_img > img{width:410px; height:410px;} /* colume 3 */ .item_list .item_list_col3{margin:-25px -12.5px;} .item_list .item_list_col3 .item{margin:25px 12.5px;} .item_list .item_list_col3 .item{width:410px;} .item_list .item_list_col3 .item_img{width:410px; height:410px;} .item_list .item_list_col3 .item_img > img{width:410px; height:410px;} /* row */ .item_list .item_list_row .item{float:none; display:table;} .item_list .item_list_row .item{display:table; table-layout:fixed; margin-top:12px; padding-top:12px; width:100%; border-top:1px solid #ddd;} .item_list .item_list_row .item:first-child{margin-top:0; padding-top:0; border-top:0;} .item_list .item_list_row .img_frame{display:table-cell; width:76px; vertical-align:middle;} .item_list .item_list_row .txt_frame{display:table-cell; padding-left:25px; width:335px; min-height:auto; vertical-align:middle;} .item_list .item_list_row .item_brand{margin-top:0;} .item_list .item_list_row .item_tit{margin-top:0;} .item_list .item_list_row .item_price{display:inline-block;} .item_list .item_list_row .price_selling{margin-right:5px;} .item_list .item_list_row .price_selling{margin-top:0;} .item_list .item_list_row .price_member{margin-top:0;} .item_list .item_list_row .price_selling + .price_member{margin-top:0;} .item_list .item_list_row .item_shop_btn{position:static; display:table-cell; vertical-align:middle; width:85px; text-align:center;} /* ------------- 상품 없을 때 ------------- */ .item_list .no_data{width:100%; text-align:center; line-height:200px; font-size:15px; color:#999; background:#f9f9f9;} .item_list .item_list_col6 .no_data{margin:25px 5px;} .item_list .item_list_col5 .no_data{margin:25px 10px;} .item_list .item_list_col4 .no_data{margin:25px 10px;} .item_list .item_list_col3 .no_data{margin:25px 12.5px;} /* ------------- 검색 결과 페이지 ------------- */ /* 검색바 */ .search_result_bar{margin-bottom:80px;} .search_result_bar table{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .search_result_bar th{padding:12px 30px; font-size:15px; font-weight:500; color:#000; border-top:1px solid #ddd;} .search_result_bar td{padding:12px 30px; font-size:15px; color:#555; border-top:1px solid #ddd;} .search_result_bar tr:first-child th, .search_result_bar tr:first-child td{border-top:0;} .search_result_bar .select_frame{font-size:0; line-height:0;} .search_result_bar .select_frame select{min-width:230px; margin-left:10px;} .search_result_bar .select_frame select:first-child{margin-left:0;} .search_result_bar input[type="text"]{width:240px;} /* Main Page ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #content{margin:0 auto; width: 100%; max-width:1320px; padding-left: 20px; padding-right: 20px;} /* ------------- main content ------------- */ .main_tit{margin-bottom:50px; text-align:center;} .main_tit h2, .main_tit h2 a{font-size:35px; line-height:1; font-weight:bold; letter-spacing:-1px; color:#000;} .main_tit p{margin-top:10px; font-size:15px; line-height:1;} /* ------------- 베스트 상품 ------------- */ #mainBest{margin-top:80px;} /* ------------- 추천 상품 ------------- */ #mainRecommend{margin-top:120px;} /* ------------- 신상품 ------------- */ #mainNew{margin-top:120px;} /* ------------- 추가상품 ------------- */ #mainAdd{margin-top:120px;} /* ------------- 이벤트 상품 ------------- */ #mainEvent{margin-top:120px;} #mainEvent .main_tit{margin-bottom:75px;} #mainEvent .main_event_wrap{position:relative;} #mainEvent .banner_frame{position:absolute; top:5px; left:30px; width:700px; height:320px; overflow:hidden; background:#f9f9f9 url('/skin/f_black/images/common/no_img.gif') no-repeat center center/contain !important;} #mainEvent .banner_frame img{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; max-width:100%; max-height:100%;} #mainEvent .item_frame{padding:24px; margin-left:25px; width:1255px; min-height:328px; padding-left:725px; border:1px solid #ddd;} #mainEvent .item_frame .item_list .no_data{line-height:278px; background:none;} /* ------------- 고객센터 ------------- */ #mainCs{margin:120px 0 50px;} .cs_info{width:100%;} .cs_info:after{content:""; display:block; clear:both;} .cs_info .left_area{float:left; display:table; table-layout:fixed; width:50%; border-right:1px solid #ddd;} .cs_info .right_area{float:left; display:table; table-layout:fixed; padding-left:50px; width:50%;} .cs_info h3{display:table-cell; width:120px; vertical-align:top; line-height:1; font-size:18px; font-weight:500; color:#000;} .cs_info h3 img{margin:-2px 7px 0 0;} .cs_info .left_area h3{width:105px;} .cs_info .right_area h3{width:120px;} .cs_info .txt_frame{display:table-cell; padding-left:50px; vertical-align:top;} .cs_info .txt_frame .call{margin-bottom:15px; line-height:1; font-weight:400; font-size:16px; color:#ff6c6c;} .cs_info .txt_frame .call strong{font-weight:700;} .cs_info .txt_frame .call .num{font-size:30px; line-height:20px;} .cs_info .txt_frame dt, .cs_info .txt_frame dd, .cs_info .txt_frame p{line-height:1.3; font-size:14px; color:#777;} .cs_info .txt_frame dt, .cs_info .txt_frame .add{margin-bottom:5px; font-weight:500; color:#000;} @media screen and (max-width:1280px){ #mainEvent .banner_frame{height:300px;position:relative;top:auto;left:auto;width:100%;} #mainEvent .item_frame{padding:20px;margin-left:0px;width:100%;min-height:auto;padding-left:0px;} #mainEvent .item_frame .item_list .no_data{line-height:1.5;} } @media screen and (max-width:991px){ .main_tit, #mainEvent .main_tit{margin-bottom:40px;} .main_tit h2, .main_tit h2 a{font-size:30px;} .main_tit p{font-size:14px;} #mainBest, #mainRecommend, #mainNew, #mainAdd, #mainEvent{margin-top:100px;} #mainCs{margin:30px 0 50px;} #mainEvent .banner_frame{height:200px;} /*.cs_info{margin:-10px;}*/ .cs_info .obj{padding:20px 0;flex:0 0 100%;-ms-flex:0 0 100%;max-width:100%;width:100%;} .cs_info .left_area{border-right:none;border-bottom:1px solid #ddd;} .cs_info .right_area{padding-left:0px;} } @media screen and (max-width:767px){ #mainBest, #mainRecommend, #mainNew, #mainAdd, #mainEvent{margin-top:70px;} #mainCs{margin:20px 0 40px;} #mainEvent .banner_frame{height:250px;} #mainEvent .item_frame{padding:15px;} /*.cs_info h3{margin-bottom:10px;font-size:16px;} .cs_info h3 img{padding-right:5px;}*/ .cs_info .txt_frame .call{font-size:14px;margin-bottom:10px;} .cs_info .txt_frame .call .num{font-size:24px;} .cs_info .txt_frame dt, .cs_info .txt_frame dd, .cs_info .txt_frame p{font-size:13px;} } @media screen and (max-width:520px){ .main_tit, #mainEvent .main_tit{margin-bottom:30px;} .main_tit h2, .main_tit h2 a{font-size:24px;} .main_tit p{font-size:13px;margin-top:5px;} #mainBest, #mainRecommend, #mainNew, #mainAdd, #mainEvent{margin-top:50px;} #mainCs{margin:20px 0 30px;} /*.cs_info h3{font-size:14px;} .cs_info .txt_frame .call{font-size:13px;margin-bottom:5px;} .cs_info .txt_frame .call .num{font-size:20px;}*/ .cs_info .txt_frame .call{font-size:15px;margin-bottom:10px;} .cs_info .txt_frame .call .num{font-size:28px;line-height:1.2;} } @media screen and (max-width:480px){ .main_tit h2, .main_tit h2 a{font-size:24px;} .main_tit p{font-size:13px;margin-top:5px;} /*.cs_info .txt_frame dt, .cs_info .txt_frame dd, .cs_info .txt_frame p{font-size:12px;}*/ .cs_info .txt_frame dd{margin-top:0px;} #mainBest, #mainRecommend, #mainNew, #mainAdd, #mainEvent{margin-top:40px;} #mainCs{margin:10px 0 30px;} #mainEvent .banner_frame{height:150px;} } @media screen and (max-width:360px){ .main_tit, #mainEvent .main_tit{margin-bottom:20px;} .main_tit h2, .main_tit h2 a{font-size:20px;} .main_tit p{font-size:12px;} #mainBest, #mainRecommend, #mainNew, #mainAdd, #mainEvent{margin-top:30px;} #mainCs{margin:10px 0 20px;} #mainEvent .banner_frame{height:120px;} #mainEvent .item_frame{padding:10px;} } /* module ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 모듈 레이아웃 ------------- */ #layoutModuleBoard{margin:0 auto; margin-top:120px; width:1280px;} #layoutModuleBoard:after{content:""; display:block; clear:both;} #layoutModuleBoard > div{float:left;} #layoutModuleBoard > div{margin-left:60px; width:calc(100%/2 - 30px);} #layoutModuleBoard > div:first-child{margin-left:0;} #mainModuleBoard{margin:0 auto; margin-top:120px; width:1280px;} #mainModuleBoard:after{content:""; display:block; clear:both;} #mainModuleBoard > div{float:left;} #mainModuleBoard > div{margin-left:60px; width:calc(100%/3 - 40px);} #mainModuleBoard > div:first-child{margin-left:0;} #layoutModulePoll{margin:0 auto; margin-top:120px; width:1280px;} #mainModulePoll{margin:0 auto; margin-top:120px; width:1280px;} /* ------------- 레이아웃 모듈 디자인 ------------- */ /* 공지사항/자주묻는질문 */ .module_baord_wrap{position:relative;} .module_baord_wrap h2{margin-bottom:10px; font-size:25px; font-weight:500; letter-spacing:-1px; text-align:left; color:#000;} .module_baord_wrap .no_data{width:100%; height:215px; line-height:216px; text-align:center; color:#999;} .module_baord_wrap .baord_list{border-top:1px solid #555;} .module_baord_wrap .baord_list li{border-bottom:1px solid #e5e5e5;} .module_baord_wrap .baord_list li a{display:block; padding:10px;} .module_baord_wrap .baord_list li a:hover{background:#f9f9f9;} .module_baord_wrap .more_btn{position:absolute; top:10px; right:0;} /* 온라인 설문 */ .module_poll_wrap h2{margin-bottom:10px; font-size:25px; font-weight:500; letter-spacing:-1px; text-align:left; color:#000;} .module_poll_wrap .no_data{width:100%; height:216px; line-height:216px; text-align:center; color:#999; border:1px solid #e5e5e5;} .module_poll{padding:30px; border:1px solid #e5e5e5;} .module_poll .poll_tit{margin-bottom:15px; text-align:center; font-weight:500; font-size:16px; color:#000;} .module_poll .poll_list label{font-size:14px;} .module_poll .btn_area{margin-top:30px; text-align:center; line-height:0; font-size:0;} .module_poll .btn_area a{display:inline-block; text-align:center; vertical-align:middle; width:100px; height:40px; line-height:40px; font-size:14px;} .module_poll .btn_area .normal{color:#000; border:1px solid #000;} .module_poll .btn_area .good{margin-left:5px; color:#fff; background:#000;} /* 모듈 로그인 */ #moduleLogin{padding:30px; width:350px; border:1px solid #ddd;} #moduleLogin h2{margin-bottom:15px; font-size:20px; font-weight:400; color:#000;} #moduleLogin table{width:100%;} #moduleLogin th{padding:2px 0; text-align:left; font-weight:400; font-size:14px; color:#000;} #moduleLogin td{padding:2px 0; text-align:left; font-weight:400; font-size:14px; color:#555;} #moduleLogin input[type="text"], #moduleLogin input[type="password"]{width:100%;} #moduleLogin .login_btn_area{margin-top:10px; line-height:0; font-size:0;} #moduleLogin .login_btn_area a, #moduleLogin .login_btn_area button{display:inline-block; height:40px; text-align:center; vertical-align:middle; line-height:40px; font-size:13px; font-weight:400; color:#fff;} #moduleLogin .login_btn_area .login{background:#000; width:100%;} #moduleLogin .login_btn_area .join{background:#8a8d99; width:50%;} #moduleLogin .login_btn_area .join + .login{width:50%;} #moduleLogin .logout_btn{display:inline-block; margin-top:20px; width:100%; height:40px; text-align:center; vertical-align:middle; line-height:38px; font-size:13px; font-weight:400; color:#000; border:1px solid #000;} #moduleLogin .sns_login_area{margin-top:20px;} #moduleLogin .main_msg{font-size:20px; font-weight:300; color:#000;} #moduleLogin .main_msg strong{font-weight:500;} #moduleLogin .main_msg img{margin:-3px 7px 0 0;} #moduleLogin .user_class{font-size:14px; color:#555;} /* 배너 리스트 */ .module_banner_list{margin:0 auto; width:1280px; text-align:center; background:#f9f9f9;} .module_banner_list .no_data{display:table; width:100%; height:200px; vertical-align:middle; text-align:center; color:#999;} .module_banner_list .no_data p{display:table-cell; width:100%; height:200px;; vertical-align:middle; text-align:center; color:#999;} /* ------------- 메인페이지 모듈 디자인 ------------- */ /* 메인슬라이드배너 */ #mainSliderBanner{position:relative; margin:0 auto; width:100%; height:600px; text-align:center; background:#f9f9f9;} #mainSliderBanner .slick-list{width:100%; height:600px; overflow:hidden;} #mainSliderBanner .slick-track{width:100%; height:600px} #mainSliderBanner .slick-slide{float:left; width:100%; height:600px} #mainSliderBanner .no_data{display:table; width:100%; height:600px; vertical-align:middle; text-align:center; color:#999;} #mainSliderBanner .no_data p{display:table-cell; width:100%; height:600px;; vertical-align:middle; text-align:center; color:#999;} #mainSliderBanner .slick-arrow{z-index:55; position:relative; display:inline-block; position:absolute; top:50%; margin-top:-50px; width:100px; height:100px; border-radius:50%; text-indent:-9999em; overflow:hidden; transition-duration:1s; cursor:pointer;} #mainSliderBanner .slick-arrow:hover{background:rgba(255,255,255,0.9);} #mainSliderBanner .slick-prev{left:25px;} #mainSliderBanner .slick-next{right:25px;} #mainSliderBanner .slick-arrow:after{content:""; position:absolute; top:48px; left:0; right:0; display:inline-block; margin:auto; width:52px; height:15px;} #mainSliderBanner .slick-prev:after{background:url('/skin/f_black/images/main/rolling_prev.png') no-repeat center center;} #mainSliderBanner .slick-next:after{background:url('/skin/f_black/images/main/rolling_next.png') no-repeat center center;} #mainSliderBanner .slick-dots{z-index:55; position:absolute; bottom:30px; width:100%; text-align:center; font-size:0; line-height:0;} #mainSliderBanner .slick-dots li{display:inline-block; margin-left:10px; vertical-align:middle;} #mainSliderBanner .slick-dots li:first-child{margin-left:0;} #mainSliderBanner .slick-dots li button{display:inline-block; width:14px; height:14px; background:transparent; border:2px solid #fff; border-radius:7px; text-indent:-9999em; overflow:hidden; cursor:pointer;} #mainSliderBanner .slick-dots li.slick-active button{width:40px; border-width:0; background:#fff;} /* 메인중앙배너 */ #mainCenterBanner{margin:0 auto; width:1280px; text-align:center; background:#f9f9f9;} #mainCenterBanner .no_data{display:table; width:100%; height:200px; vertical-align:middle; text-align:center; color:#999;} #mainCenterBanner .no_data p{display:table-cell; width:100%; height:200px;; vertical-align:middle; text-align:center; color:#999;} /* 메인이미지 */ .main_image{width:100%; height:600px; background:url('/skin/f_black/images/main/main_visual01.jpg') no-repeat center center;} .main_image a{display:block; width:100%; height:100%; text-indent:-9999em; overflow:hidden;} /* Sub Page - 공통 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #subContent{margin: 0 auto; padding: 50px 20px 150px; width: 100%; max-width:1320px;} @media (max-width:1280px) { #subContent{padding: 40px 20px 120px;} } @media (max-width:992px) { #subContent{padding: 40px 20px 100px;} } @media (max-width:768px) { #subContent{padding: 20px 20px 60px;} } /* ------------- 페이지 네비 ------------- */ .page_navi {margin-top: -50px; height: 80px; position: relative; display: flex; align-items: center;} .page_navi:after {content: ''; display: block; background: #ffff; position: absolute; top: 0; bottom: 0; left: -100%; right: -100%; z-index: -1;} .page_navi:before {content: ''; width: 20px; height: 20px; text-indent: -9999px; background:url('/skin/f_black/images/shop/nav_home.png') no-repeat center center / cover;} .page_navi > img {display: none;} .page_navi > a, .page_navi > span {display: flex; align-items: center;} .page_navi > a:before, .page_navi > span:before {content: ''; display: block; width: 6px; height: 6px; margin: 0 15px; border-top: solid 1px #333; border-right: solid 1px #333; transform:rotate(45deg);} .page_navi .page_select_wrap {position: relative; display: flex; align-items: center;} .page_navi .page_select_wrap:before {content: ''; display: block; width: 6px; height: 6px; margin: 0 15px; border-top: solid 1px #333; border-right: solid 1px #333; transform:rotate(45deg);} .page_navi .page_select_wrap .selected {display: block; padding-right: 30px; background:url('/skin/f_black/images/shop/nav_arrow.png') no-repeat right center / 8px auto;} .page_navi .page_select_wrap .page_list{z-index:55; display:none; position:absolute; top:100%; margin-top: 5px; left:35px; padding:10px 15px; text-align:left; background:#fff; border:2px solid #000;} .page_navi .page_select_wrap .page_list a{font-size:13px; line-height:1.8; word-break:keep-all; white-space:nowrap; color:#000;} .page_navi .page_select_wrap .page_list a:hover{text-decoration:underline; color:#ff6c6c;} @media (max-width:1280px) { .page_navi {margin-top: -40px; height: 60px; padding-left: 10px;} } @media (max-width:992px) { .page_navi {height: 50px; padding-left: 0;} } @media (max-width:768px) { .page_navi {margin-top: -20px;} .page_navi:before {width: 16px; height: 16px;} .page_navi > a, .page_navi > span {font-size: 13px;} .page_navi > a:before, .page_navi > span:before {width: 5px; height: 5px; margin: 0 10px;} .page_navi .page_select_wrap:before {width: 5px; height: 5px; margin: 0 10px;} .page_navi .page_select_wrap .selected {font-size: 13px;} .page_navi .page_select_wrap .page_list {left: 20px;} } /* ------------- 서브페이지 타이틀 ------------- */ .sub_tit{padding-top: 50px; padding-bottom: 20px; margin-bottom: 60px; border-bottom: solid 2px #000; font-size: 35px; color: #000; font-weight: 700;} .sub_tit img{margin:-7px 7px 0 0;} .item_list_tit{margin-bottom:15px; line-height:18px; font-size:18px; font-weight:500; color:#000;} .item_list_tit span{font-weight:400;} .item_list_tit img{margin:-3px 5px 0 0;} @media (max-width:1280px) { .sub_tit {padding-top: 40px; padding-bottom: 15px; margin-bottom: 40px; font-size: 30px;} } @media (max-width:992px) { .sub_tit {padding-top: 30px; padding-bottom: 10px; margin-bottom: 30px; font-size: 26px;} } @media (max-width:768px) { .sub_tit {padding-top: 20px; padding-bottom: 5px; margin-bottom: 20px; border-bottom-width: 1px; font-size: 22px;} } /* ------------- 제품 카테고리 ------------- */ .depth_cate_list{margin:0 auto 80px; width:800px; text-align:center; font-size:0; line-height:0;} .depth_cate_list li{display:inline-block; vertical-align:middle; margin:5px 10px;} .depth_cate_list li a{display:inline-block; vertical-align:middle; padding:0 20px; height:34px; line-height:34px; font-weight:400; font-size:15px; color:#666; background:#f5f5f5; border-radius:17px;} .depth_cate_list li .num{font-weight:300; font-size:13px; color:#ff6c6c;} .depth_cate_list li a:hover{color:#000; background:#eee;} /* ------------- 상품 정렬 ------------- */ .item_array{margin-top: 30px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end;} .item_array strong{font-weight:400; color:#ff6c6c;} .item_array .total_area{float:left; font-weight:400; line-height:24px; font-size:14px; color:#000;} .item_array .select_area{float:right;} .item_array .select_area select{margin-left:15px; padding:0 17px 0 5px; width:auto; height:24px; font-weight:400; font-size:14px; color:#000; background-position:right center; border:0; border-bottom:1px solid #000;} .item_array .select_area select:first-child{margin-left:0;} .side_btn_area + .item_array{margin-top:50px;} @media (max-width:768px) { .item_array .select_area { float: none !important; text-align: center; margin-top: 6px; } .item_array .select_area select { display: inline-block; margin-left: 0; } } /* ------------- 페이징 ------------- */ div.paging{margin-top:80px;} .paging{display: flex; align-items: center; justify-content: center;} .paging a{display:block; padding:0 5px; margin: 0 2px; min-width: 20px; text-align: center; font-weight:500; line-height:20px; color:#bbb;} .paging a:hover, .paging a.on{color:#000;} .paging .pre, .paging .next, .paging .first, .paging .last{width:20px; height:20px; text-indent: -9999px; opacity:0.2;} .paging .pre:hover, .paging .next:hover, .paging .first:hover, .paging .last:hover{opacity:1;} .paging a img{display:none;} .paging .pre{background:url('/skin/f_black/images/common/btn_navi_arrL.png') no-repeat center center/ 14px auto;} .paging .next{background:url('/skin/f_black/images/common/btn_navi_arrR.png') no-repeat center center/14px auto;} .paging .first{background:url('/skin/f_black/images/common/btn_navi_arrLL.png') no-repeat center center/14px auto;} .paging .last{background:url('/skin/f_black/images/common/btn_navi_arrRR.png') no-repeat center center/14px auto;} @media (max-width:768px) { .paging a {font-size: 13px;} } /* 위치 */ .side_btn_area + div.paging{margin-top:25px;} /* ------------- 프로세스 스탭 가이드 ------------- */ .process_step{margin-bottom:50px; text-align:center; line-height:0; font-size:0;} .process_step li{position:relative; display:inline-block; padding-left:50px; margin-left:10px; text-align:center; line-height:1; font-size:13px; font-weight:500; color:#000; opacity:0.3;} .process_step li:before{position:absolute; top:50%; left:0; margin-top:-5px; content:""; display:inline-block; width:39px; height:11px; background:url('/skin/f_black/images/sub/process_arrow.png') no-repeat center center;} .process_step li:first-child{padding-left:0; margin-left:0;} .process_step li:first-child:before{display:none;} .process_step li.on{opacity:1;} .process_step li span{font-weight:900;} .process_step li img{display:block; margin:0 auto 7px;} /* ------------- 완료 ------------- */ .finish_msg_wrap{padding:60px 0 50px; text-align:center; border-top:2px solid #000; border-bottom:1px solid #000;} .finish_msg_wrap img{margin-bottom:30px;} .finish_msg_wrap .big_msg{margin-bottom:20px; line-height:1.2; font-weight:300; font-size:30px; color:#000;} .finish_msg_wrap .big_msg strong{font-weight:500; color:#ff6c6c;} .finish_msg_wrap .big_msg strong.normal{color:#000;} .finish_msg_wrap .big_msg span{font-style:italic;} .finish_msg_wrap .email_msg{display:inline-block; padding:0 50px; height:50px; line-height:48px; font-size:18px; font-weight:500; color:#000; border:1px solid #aaa; border-radius:25px;} .finish_msg_wrap .email_msg + .small_msg{margin-top:20px;} .finish_msg_wrap .small_msg{font-weight:400; font-size:15px; color:#555;} /* ------------- 에러 안내 ------------- */ .error_msg_wrap{padding:60px 0 50px; text-align:center; border-top:2px solid #000; border-bottom:1px solid #000;} .error_msg_wrap img{margin-bottom:30px;} .error_msg_wrap .big_msg{margin-bottom:20px; line-height:1.2; font-weight:300; font-size:30px; color:#000;} /* 주문 번호 링크 */ .order_code, .order_code a{display:inline-block; vertical-align:middle; text-decoration:underline; font-weight:500; color:#ff6c6c;} .order_code:hover .order_code a:hover{text-decoration:underline;} .small_btn + .order_code{margin-left:10px;} .strong + .small_btn{margin-left:10px;} .form_btn + .order_code{margin-left:10px;} /* ------------- 좌우 버튼 ------------- */ .side_btn_area{margin-top:15px;} .side_btn_area:after{content:""; display:block; clear:both;} .side_btn_area > div{font-size:0; line-height:0;} .side_btn_area .left_area{float:left;} .side_btn_area .right_area{float:right;} .side_btn_area a, .side_btn_area button{display:inline-block; text-align:center; vertical-align:middle; width:150px; height:46px; font-weight:400; line-height:46px; font-size:15px;} .side_btn_area .left_area a, .side_btn_area .left_area button{margin-left:5px;} .side_btn_area .left_area a:first-child, .side_btn_area .left_area button:first-child{margin-left:0;} .side_btn_area .right_area a, .side_btn_area .right_area button{margin-left:5px;} .side_btn_area .right_area a:first-child, .side_btn_area .right_area button:first-child{margin-left:0;} .side_btn_area .good{color:#fff; background:#000;} .side_btn_area .normal{color:#000; border:1px solid #000;} .side_btn_area .bad{color:#777; background:#eee; border:1px solid #ddd;} .side_btn_area img{margin:-6px 5px 0 0;} /* 버튼 위치 */ .depth_cate_list + .side_btn_area{margin:-45px 0 0;} .search_bar + .side_btn_area{margin:-65px 0 80px;} .search_result_bar + .side_btn_area{margin:-65px 0 80px;} .item_list.recommend + .side_btn_area{margin:-30px 0 0;} .side_btn_area.mb{margin:0 0 15px 0;}/* magin-bottom */ .side_btn_area.mbm{margin:0 0 -13px 0;}/* magin-bottom minus */ .side_btn_area + .item_list_tit{margin-top:30px;} /* ------------- 가운데 버튼 ------------- */ .middle_btn_area{margin-top:80px; text-align:center; font-size:0; line-height:0;} .middle_btn_area a, .middle_btn_area button{display:inline-block; margin:0 5px; text-align:center; vertical-align:middle; width:240px; height:70px; font-weight:500; line-height:70px; font-size:18px;} .middle_btn_area .good{color:#fff; background:#000;} .middle_btn_area .normal{color:#000; border:1px solid #000;} .middle_btn_area .bad{color:#555; background:#eee; border:1px solid #bbb;} /* 버튼 위치 */ .error_msg_wrap .middle_btn_area, .finish_msg_wrap .middle_btn_area{margin-top:50px;} .middle_other_btn_area{margin:30px auto 0; text-align:center; width:490px; border-top:2px solid #2b2f3a;} .middle_other_btn_area .naver_pay_area{margin-top:-2px;} /* ------------- 검색바 검색 버튼 ------------- */ .search_result_btn{position:relative; display:inline-block; text-align:center; vertical-align:middle; margin-left:5px; width:100px; height:40px;} .search_result_btn label{display:inline-block; width:100px; height:40px; text-indent:-21px; line-height:40px; font-weight:400; color:#fff; background:#000; cursor:pointer;} .search_result_btn input[type="image"]{position:absolute; top:12px; right:25px;} @media (max-width:1280px) { #subContent { padding: 40px 20px 120px; } .page_navi { margin-top: -40px; height: 60px; padding-left: 10px; } .sub_tit { padding-top: 40px; padding-bottom: 15px; margin-bottom: 40px; font-size: 30px; } } @media (max-width:992px) { #subContent { padding: 40px 20px 100px; } .page_navi { height: 50px; padding-left: 0; } .sub_tit { padding-top: 30px; padding-bottom: 10px; margin-bottom: 30px; font-size: 26px; } } @media (max-width:768px) { /* ---------- 검색 결과 바 전체 ---------- */ .search_result_bar { margin-bottom: 40px; } /* 테이블 → 세로(블록) 구조 */ .search_result_bar table, .search_result_bar tbody, .search_result_bar tr, .search_result_bar th, .search_result_bar td { display: block; width: 100%; box-sizing: border-box; } .search_result_bar th, .search_result_bar td { padding: 8px 15px; border-top: 0; } /* 분류 셀렉트박스 100% */ .search_result_bar .select_frame select { min-width: 0; width: 100%; margin-left: 0; margin-top: 6px; } /* ---------- 검색어 input + 검색 버튼 (한 줄, 일자) ---------- */ .search_result_bar form[name="form_good_search"] { display: flex; align-items: stretch; gap: 6px; /* input과 버튼 사이 간격 */ margin-top: 10px; width: 100%; } /* 검색어 입력창 */ .search_result_bar form[name="form_good_search"] input[type="text"] { flex: 1 1 auto !important; width: auto !important; max-width: 100%; height: 40px; line-height: 40px; margin: 0; padding: 0 10px; box-sizing: border-box; } /* 검은 검색 버튼 영역 */ .search_result_btn { position: relative; flex: 0 0 90px; /* 버튼 고정 폭 */ margin: 0; } .search_result_btn label { display: block; width: 100%; height: 40px; line-height: 40px; /* 검색창 높이와 맞춤 */ } /* input type="image" 아이콘 위치 + 크기 고정 */ .search_result_btn #search_btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; padding: 0; border: 0; } /* 혹시 a 안에 있는 아이콘 이미지가 있으면 크기 제한 */ .search_result_bar a img { width: auto !important; height: auto !important; max-width: 24px; display: inline-block; } /* ---------- 아래 버튼 3개 영역 (전체 선택 / 선택 취소 / 선택된 상품 담기) ---------- */ /* 검색 영역 밑으로 버튼 묶음 조금 내리기 */ .search_result_bar + .side_btn_area { margin-top: 24px; } /* 버튼 3개를 가로 한 줄로 */ .side_btn_area { display: flex; /* 가로 정렬 */ gap: 4px; /* 버튼 사이 간격 */ } /* wrapper div들은 그냥 flex 분배용 */ .side_btn_area .left_area, .side_btn_area .right_area { float: none; /* PC용 float 제거 */ flex: 1; /* 전체 폭을 2:1로 나눔 (왼쪽에 버튼 2개, 오른쪽에 1개) */ display: flex; gap: 4px; } /* 실제 버튼 3개 공통 스타일 */ .side_btn_area button, .side_btn_area a { flex: 1; /* 각 버튼이 자기 영역 안에서 똑같이 나눠 가짐 */ width: auto; /* PC에서 준 width:150px 무시 */ height: 40px; line-height: 40px; margin: 0; font-size: 14px; box-sizing: border-box; } } /* Sub Page - Table ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* textarea */ table textarea{width:100%; min-height:150px;} /* 달력 */ #__calendar__ table{table-layout:auto;} .table_tit{margin:80px 0 10px; line-height:18px; font-size:18px; font-weight:500; color:#000;} .table_tit:first-child, .table_tit.first{margin-top:0;} .table_tit strong{font-weight:500; color:#ff6c6c;} /* table 조건 체크 */ .table_check{float:right; margin-top: -31px;} .table_check input[type="checkbox"] + label{font-weight:400; font-size:13px; color:#000;} /* form 버튼 */ .form_btn{display:inline-block; padding:0 15px; margin-left:5px; height:40px; text-align:center; vertical-align:middle; font-weight:400; line-height:40px; font-size:15px; color:#000; border:1px solid #000;} .form_btn.good{color:#fff; background:#000;} .form_btn.normal{color:#000; border:1px solid #000;} .form_btn.bad{color:#555; background:#eee; border:1px solid #bbb;} .form_btn.first{margin-left:0;} /* 위치 */ .item_import_wrap + .form_btn{float:right;} /* ------------- table - col ------------- */ .table_col{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_col th{padding:15px 0; text-align:center; font-weight:500; font-size:15px; color:#000; border-top:1px solid #ddd;} .table_col td{padding:15px; text-align:center; font-weight:400; font-size:15px; color:#555; border-top:1px solid #ddd;} .table_col thead th, .table_col thead td{border-top:0;} /* 데이터 없음 */ .table_col .no_data{padding:50px 15px; color:#888;} /* 아이콘 버튼 */ .table_col .btn_delete img{margin:-2px 0 0 5px;} /* 툴팁 tooltip */ .tooltip img{margin:-2px 0 0 5px;} #__tooltip_place__{z-index:55 !important; padding:5px 10px !important; font-size:12px !important; color :#fff !important; background:#000 !important; border:0 !important; border-radius:5px !important;} /* 커스텀 툴팁 custom tooltip */ .tooltiptext{ visibility: hidden; position: absolute; left: -10px; z-index: 1; } .custom-tooltip{ width: 90% !important; border: 1px solid rgb(73, 81, 100); background-color: white; } .custom-tooltip tr th { padding-left: 20px !important; text-align: left; font-weight: 500; background-color: rgb(73, 81, 100); color: white !important; padding: 10px; padding-left: 20px; font-size: 16px; } .custom-tooltip tr td:first-child{ padding-left: 20px; } .custom-tooltip tr td:last-child{ text-align: right; padding: 5px 20px; } /* 테이블 작은 버튼 */ .small_btn{display:inline-block; text-align:center; vertical-align:middle; padding:0 7px; margin-left:5px; height:22px; line-height:20px; font-size:12px; font-weight:400;} .small_btn.first, .small_btn:first-child{margin-left:0;} .small_btn.good{color:#000; border:1px solid #000;} .small_btn.normal{color:#666; border:1px solid #ccc;} .small_btn.bad{color:#fff; background:#8a8d99; border:1px solid #8a8d99;} .small_btn.no{color:#999;} /* --- 상품정보 항목 --- */ .table_col .info_box{text-align:left;} /* 상품 이미지(td에 이미지만) */ .table_col .img_box .img_frame{position:relative; margin:0 auto; width:50px; height:50px; overflow:hidden;} .table_col .img_box .img_frame img{width:50px; height:50px;} /* 상품 이미지(td에 다른 정보와 함께) */ .table_col .info_box .img_area{position:relative; float:left; vertical-align:middle; width:80px; height:80px; overflow:hidden;} .table_col .info_box .img_area img{width:80px; height:80px;} /* 상품정보 */ .table_col .info_box .info_area{float:left; vertical-align:middle; padding-left:20px; width:calc(100% - 80px);} /* 제목(td에 제목만) */ .table_col .tit_box, .table_col .tit_box a{font-size:15px; color:#000;} .table_col .tit_box strong{font-weight:500; color:#ff6c6c;} /* 제목(td에 다른 정보와 함께) */ .table_col .info_box .code{font-weight:300; font-size:13px; color:#888;} .table_col .info_box .tit, .table_col .info_box .tit a{vertical-align:middle; line-height:1.5; font-size:15px; font-weight:500; color:#000;} .table_col .info_box .board_tit{color:#000; cursor:pointer;} .table_col .info_box .board_tit a{vertical-align:middle; color:#000;} .table_col .info_box .board_tit a .cmt{color:#ff6c6c;} .table_col .info_box .board_tit img{margin-right:3px; vertical-align:middle;} .table_col .info_box .board_tit img.first{margin-left:0;} /* 옵션 리스트 */ .table_col .info_box .option_list{margin-top:8px;} .table_col .info_box .option_list li{line-height:1.6; font-weight:300; font-size:13px; color:#555;} .table_col .info_box .option_list .amount:before{content:""; display:inline-block; margin:0 10px; width:1px; height:9px; background:#999;} .table_col .info_box .option_list .small_btn{margin:8px 0 0 0;} /* 구매 불가 */ .table_col .info_box .cant_buy{padding:10px 0; font-size:13px; color:#ff2121;} .table_col .info_box .soldout{padding:10px 0;} /* 게시판 공지 */ .table_col .notice{font-weight:500; color:#000;} /* 게시판 카테고리 분류 */ .table_col .cate_box{font-weight:500; color:#000;} /* 버튼 항목 */ .table_col .btn_box{font-size:0; line-height:0;} .table_col .btn_box .small_btn{display:block; margin:5px auto 0; width:62px;} .table_col .btn_box .small_btn:first-child{margin-top:0;} /* 합계 */ .table_col .total_box{font-weight:500; color:#000;} /* 배송비 rowspan */ .table_col .delivery_box{border-left:1px solid #ddd;} /* 상태 항목 */ .table_col .status_box{font-weight:400; color:#ff6c6c;} /* 강조 */ .table_col .strong_box{font-weight:400; color:#ff6c6c;} .table_col .discount_box .discount_info{font-weight:300; font-size:13px; color:#555;} /* ------------- table - row ------------- */ .table_row{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_row th{padding:15px 20px; text-align:left; vertical-align:middle; font-weight:500; font-size:15px; color:#000; border-top:1px solid #ddd;} .table_row td{padding:15px 20px; text-align:left; vertical-align:middle; font-weight:400; font-size:15px; color:#555; border-top:1px solid #ddd;} /* 필수값 */ .table_row th .th_bu{color:#ff6c6c;} /* 항목 체크 */ .table_row .th_check{margin-top:5px;} .table_row span.td_check{margin-left:10px;} .table_row div.td_check{margin-top:5px;} .table_row .th_check input[type="checkbox"] + label{font-weight:400; color:#000;} .table_row .td_check input[type="checkbox"] + label{font-weight:400; font-size:13px; color:#000;} .table_row th .sns_img{margin:-2px 10px 0 0;} /* 항목 설명 */ .table_row .desc{margin-top:5px; font-weight:300; font-size:13px; color:#8a8d99;} .table_row .desc strong{font-weight:400; color:#ff6c6c;} .table_row .desc_notice{margin-top:5px; font-weight:300; font-size:13px; color:#ff6c6c;} .table_row .desc_notice strong{font-weight:400; color:#000;} /* 할인 강조 컬러 */ .table_row .discount_num{font-weight:500; color:#ff6c6c;} #benefit_text b{color:#ff6c6c;} /* 적립금 */ .table_row .point_box .have_point{margin-bottom:10px;} .table_row .point_box .no_point{width:200px;} .table_row .point_box input[type="text"]{width:220px;} /* - , @ 여백 */ .table_row .mark{display:inline-block; padding:0 10px; vertical-align:middle; font-size:15px; line-height:40px; font-size:15px; color:#555;} /* 주소 */ .table_row .address_box > div{margin-top:10px;} .table_row .address_box > div:first-child{margin-top:0;} .table_row .address_box #user_addr_country_div + div{margin-top:0;} /* 이메일 */ .table_row .email_box input[type="text"] + select{margin-left:5px;} /* 자동등록방지 */ .table_row .capcha_box input[type="text"]{margin-left:5px; width:150px; height:50px; font-size:18px; text-transform:uppercase;} /* 생년월일, 결혼기념일 */ .ymd_box input[type="text"] + label{margin:0 15px 0 5px; vertical-align:middle; line-height:40px;} /* 배송문구 상품별 입력 */ .table_row .buy_memo_list li{margin-top:15px; padding-top:15px; border-top:1px solid #eee;} .table_row .buy_memo_list li:first-child{margin-top:0; padding-top:0; border-top:0;} .table_row .buy_memo_list li strong{display:block; margin-bottom:5px; font-weight:400; font-size:15px; color:#000;} /* input(checkbox, radio) 항목 wrap */ .table_row .input_wrap{margin-top:5px;} .table_row .input_wrap:first-child{margin-top:0;} /* 테이블 내 리스트 */ .table_row .table_info_list li{line-height:1.7;} .table_row .table_info_list li strong{display:inline-block; width:50px; font-weight:400; color:#000;} .table_row .table_info_list li:before{content:""; display:inline-block; vertical-align:middle; margin-right:5px; width:5px; height:1px; background:#555;} /* 결제/거래증빙 선택 */ .table_select_area{padding:25px; background:#f5f5f5;} .table_select_area > span{margin-left:15px;} .table_select_area > span:first-child{margin-left:0;} .table_select_area input[type="radio"] + label, .table_select_area input[type="radio"] + label + input[type="radio"] + label{margin:5px;} .pay_method_area1, .pay_method_area32, .pay_method_area64, #cash_info_area, #company_info_area{margin-top:15px;} /* 개인정보처리방침 동의 */ .table_row .priv_prov_content{padding:10px; width:100%; height:150px; font-size:13px; border:1px solid #ddd; overflow-y:scroll; overflow-x:hidden;} /* 상품 상세 페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #subContent.item_view_wrap .page_navi{text-align:left;} /* ---------------------------------------------------- 상품 스펙 ---------------------------------------------------- */ #itemSpecWrap{position:relative; margin-bottom:50px;} #itemSpecWrap:after{content:""; display:block; clear:both;} /* ------------- 상품 스펙 이미지 ------------- */ .spec_img_area{float:left; width:552px;} .spec_img_area .img_frame{position:relative; overflow:hidden; width:552px; height:552px; border:1px solid #eee; cursor:pointer;} .spec_img_area .img_frame > img{width:550px; height:550px;} .spec_img_area .thumb_list{margin:3px -3px -3px -3px;} .spec_img_area .thumb_list:after{content:""; display:block; clear:both;} .spec_img_area .thumb_list li{position:relative; float:left; overflow:hidden; margin:3px; width:87px; height:87px; border:1px solid #eee; cursor:pointer;} .spec_img_area .thumb_list li.on{border-color:#000;} .spec_img_area .thumb_list li img{width:87px; height:87px;} /* ------------- 상품 스펙 ------------- */ .spec_area{float:right; width:640px;} .spec_area .spec_head{padding-right:40px;} .spec_area .spec_head .spec_tit{letter-spacing:-2px; line-height:1.2; font-weight:500; font-size:30px; color:#000;} .spec_area .spec_head .spec_desc{margin-top:10px; line-height:1.3; font-size:15px; color:#555;} .spec_area .spec_head .spec_label_list{margin-top:10px; font-size:0; line-height:0;} .spec_area .spec_head .spec_label_list li{display:inline-block; margin:5px 5px 0 0;} /* 상품 SNS 공유 */ .item_sns_share{position:absolute; top:6px; right:0;} .item_sns_share .share_btn{margin-top:10px;} .sns_share_area{display:none; position:absolute; top:100%; right:0; margin-top:10px; padding:10px 15px; width:135px; height:30px; box-sizing:content-box; background:#fff; border:2px solid #000;} .sns_share_area:after{content:""; display:block; clear:both;} .sns_share_area h3{float:left; margin-right:15px; line-height:30px; font-size:13px; font-weight:500; color:#000;} .sns_share_area ul{float:left; font-size:0; line-height:0;} .sns_share_area li{float:left; margin-left:5px; vertical-align:middle; width:30px; height:30px;} .sns_share_area li:first-child{margin-left:0;} .sns_share_area li button{vertical-align:middle;} .spec_area .spec_body{margin-top:20px;} .spec_area .spec_body table{width:100%;} .spec_area .spec_body th, .spec_area .spec_body td{padding:7px 0; text-align:left; font-size:15px;} .spec_area .spec_body th{color:#000;} .spec_area .spec_body td{color:#555;} /* ------------- 설명 ------------- */ .spec_area .spec_body .desc{font-weight:300; font-size:12px; color:#888;} .spec_area .spec_body .desc img{margin-right:5px;} /* ------------- 가격 ------------- */ .spec_area .spec_body .spec_price{font-size:0; line-height:0;} .spec_area .spec_body .spec_price > div{display:inline-block; vertical-align:middle; line-height:1; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-weight:500;} .spec_area .spec_body .spec_price .unit{font-size:15px; font-weight:400;} /* 가격 대체 문구 */ .spec_area .spec_body .spec_price_no{color:#ff6c6c;} /* 판매가 */ .spec_area .spec_body .spec_price .price_selling{font-size:17px; color:#000;} /* 할인된 판매가 */ .spec_area .spec_body .spec_price .price_selling.discount{text-decoration:line-through; color:#888;} /* 즉시 할인가 */ .spec_area .spec_body .spec_price .price_instant{margin-left:10px; line-height:1; font-weight:500; font-size:17px; color:#000;} /* 회원가 */ .spec_area .spec_body .spec_price .price_member{font-weight:500; font-size:25px; color:#ff6c6c;} .spec_area .spec_body .spec_price .price_member .unit{font-size:20px;} /* 할인률 */ .spec_area .spec_body .discount_ratio{display:inline-block; margin-left:8px; padding:0 5px; height:22px; vertical-align:middle; letter-spacing:0; font-weight:500; font-size:15px; line-height:20px; color:#ff6c6c; border:1px solid #ffb5b5; border-radius:2px;} .spec_area .spec_body .discount_ratio .percent{font-size:13px;} /* ------------- 적립금 ------------- */ .spec_area .spec_body .spec_point{font-size:13px; color:#000;} .spec_area .spec_body .spec_point img{margin:-2px 3px 0 0;} /* ------------- 네이버 마일리지 ------------- */ .spec_area .spec_body .naver_point{font-size:13px; color:#000;} .spec_area .spec_body .naver_point span{font-weight:500; color:#3EC729;} /* ------------- 주문 옵션 ------------- */ .spec_area .spec_body.option{margin-top:20px; padding-top:20px; border-top:1px solid #eee;} .spec_area .spec_body.option th, .spec_area .spec_body.option td{vertical-align:top;} .spec_area .spec_body.option th{padding:15px 0 5px;} .spec_area .spec_body.option ul{margin-top:5px;} .spec_area .spec_body.option ul:first-child{margin-top:0;} .spec_area .spec_body.option li{margin-top:5px;} .spec_area .spec_body.option li:first-child{margin-top:0;} .spec_area .spec_body.option select{width:100%;} .spec_area .spec_body.option select.off{color:#555; background:#f5f5f5 url('/skin/f_black/images/common/select_arrow.png') no-repeat right 10px center;} .spec_area .spec_body.option input[type="text"]{width:100%;} /* ------------- 선택된 옵션 ------------- */ .option_selected_wrap{margin-top:5px; padding:20px 30px; background:#f7f7f7;} .option_selected_wrap table{width:100%;} .option_selected_wrap th, .option_selected_wrap td{padding:5px 0; text-align:right;} /* 옵션명 */ .option_selected_wrap .option_tit{text-align:left; font-size:14px; color:#000;} .option_selected_wrap .option_tit ul{font-size:0; line-height:0;} .option_selected_wrap .option_tit li{font-size:14px; line-height:1.5;} .option_selected_wrap .option_tit li.hide{display:none;} /* 추가옵션 */ .option_selected_wrap .option_tit .tit_add{display:inline-block; padding:0 7px; margin:-2px 5px 0 0; vertical-align:middle; height:17px; line-height:17px; font-weight:300; font-size:11px; background:#777; border-radius:2px; color:#fff;} /* 옵션 수량 */ .option_selected_wrap .option_amount input[type="text"]{width:50px; height:30px; font-size:13px;} .option_selected_wrap .option_amount button{width:30px; height:30px; background:#eee; border:1px solid #ddd;} .option_selected_wrap .option_amount .btn_minus{border-right:0;} .option_selected_wrap .option_amount .btn_plus{border-left:0;} /* 옵션 가격 */ .option_price{font-weight:500; line-height:30px; font-size:14px; color:#000;} .option_delete{line-height:30px;} .option_delete button{line-height:30px;} .option_delete button img{margin-top:-4px;} /* 옵션 텍스트 */ .option_txt{padding:10px 20px; margin-top:5px; text-align:left; font-size:14px; background:#eee; border:1px solid #ddd;} /* 옵션 미선택 */ .option_selected_wrap .no_data{padding:30px 0; text-align:center; color:#888;} /* 총 상품 금액 */ .total_price{margin-top:20px; padding-top:20px; text-align:right; border-top:1px solid #eee;} .total_price dt, .total_price dd{display:inline-block; vertical-align:middle;} .total_price dt{margin:5px 20px 0 0; font-weight:500; font-size:18px; color:#000;} .total_price dd{font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; line-height:1; letter-spacing:-2px; font-weight:600; font-size:35px; color:#ff6c6c;} .total_price dd .unit{font-size:25px; font-weight:400;} /* ------------- 구매 관련 버튼 ------------- */ .spec_foot{margin-top:50px;} /* 관심상품/장바구니/바로결제 */ .spec_btn_area:after{content:""; display:block; clear:both;} .spec_btn_area button{float:right; margin-right:5px; height:70px; text-align:center; line-height:70px; font-weight:500; font-size:18px;} .spec_btn_area button:first-child{margin-right:0;} .spec_btn_area button img{margin:-5px 0 0 10px;} .spec_btn_area button.btn_buy{width:320px; color:#fff; background:#000;} .spec_btn_area button.btn_buy:hover{background:#ff6c6c;} .spec_btn_area button.btn_cart{width:240px; color:#000; border:1px solid #000;} .spec_btn_area button.btn_wish{width:70px; border:1px solid #000;} .spec_btn_area button.btn_wish img{margin-left:0;} /* 품절상품 */ .spec_btn_area .soldout{float:right; width:565px; height:70px; text-align:center; line-height:70px; font-weight:500; font-size:18px; color:#fff; background:#aaa;} .spec_btn_area .soldout span{font-weight:400; font-size:15px;} /* 타사 결제 버튼 */ .spec_other_btn:after{content:""; display:block; clear:both;} .spec_other_btn .naver_pay_area{float:right; margin:20px 0 0 30px;} .spec_other_btn .naver_talk_area{float:right;} /* ------------- 상품 담기 레이어 팝업 ------------- */ .layer_cart_box{width:350px; background:#fff; border:1px solid #000;} .layer_head{padding:0 20px; width:100%; height:46px; background:#000;} .layer_head h1{line-height:46px; font-weight:500; font-size:16px; color:#fff;} .layer_body{margin:0 !important; padding:50px 30px;} .layer_body > p{margin:0; text-align:center; line-height:1.6; font-weight:400; font-size:15px; color:#000;} .layer_body > p strong{font-weight:500;} .layer_foot{width:100%; text-align:center; font-size:0; line-height:0; border-top:1px solid #ddd;} .layer_foot button{display:inline-block; text-align:center; width:50%; height:46px; line-height:46px; font-size:15px;} .layer_foot button.normal{color:#ff6c6c; font-weight:400;} .layer_foot button.good{color:#000; font-weight:500; border-left:1px solid #ddd;} /* ------------- 쿠폰 다운로드 ------------- */ .coupon_download_wrap{position:relative; padding:50px 133px; width:100%; font-size:0; line-height:0; border:1px solid #eee;} .coupon_download_wrap .slick-list{width:100%; height:147px; overflow:hidden;} .coupon_download_wrap .slick-track{width:100%; height:147px;} .coupon_download_wrap .slick-arrow{z-index:55; position:relative; display:inline-block; position:absolute; top:50%; margin-top:-7.5px; width:52px; height:15px; text-indent:-9999em; overflow:hidden; transition-duration:1s; cursor:pointer;} .coupon_download_wrap .slick-prev{left:35px; background:url('/skin/f_black/images/main/rolling_prev.png') no-repeat 0 0;} .coupon_download_wrap .slick-next{right:35px; background:url('/skin/f_black/images/main/rolling_next.png') no-repeat 0 0;} .coupon_download_wrap .coupon_item{position:relative; display:inline-block; margin:0 30px; padding:0 40px 30px 0; width:208px; text-align:center; vertical-align:middle;} .coupon_download_wrap .no_data{display:block; width:100%; height:147px; font-size:15px; line-height:147px; text-align:center; color:#999;} .coupon_download_wrap .coupon_tit{margin-bottom:5px; width:100%; line-height:1.3; font-weight:400; font-size:15px; color:#000;} .coupon_download_wrap .coupon_info{margin-bottom:10px; width:100%; font-size:12px; font-weight:300; line-height:1.3; color:#777;} .coupon_download_wrap .coupon_discount{width:168px; height:68px; padding:3px 3px 3px 35px; line-height:62px; letter-spacing:-1px; font-size:18px; font-weight:400; color:#555;} .coupon_download_wrap .coupon_discount strong{margin-right:3px; font-size:24px; font-weight:600;} .coupon_download_wrap .coupon_discount.coupon_img_box1{background: url('') !important;} .coupon_download_wrap .coupon_img > img{width:168px; height:68px;} .coupon_download_wrap .btn_coupondown{position:absolute; bottom:0; right:0; display:block; padding:16px 0; width:70px; height:70px; line-height:1.2; font-size:14px; font-weight:400; color:#fff; background:#ff6c6c; border-radius:50%;} .coupon_download_wrap .btn_coupondown img{display:block; margin:0 auto 5px;} /* ---------------------------------------------------- 상품 상세 정보 ---------------------------------------------------- */ #itemInfoWrap{} /* ------------- 상품상세 탭 ------------- */ .item_info_tab{margin:100px 0 30px;} .item_info_tab:after{content:""; display:block; clear:both;} .item_info_tab li{position:relative; float:left; width:calc(100%/5);} .item_info_tab.col6 li{width:calc(100%/6);} .item_info_tab li:after{position:absolute; top:0; left:0; content:""; display:block; width:1px; height:68px; background:#fff;} .item_info_tab li:first-child:after, .item_info_tab li.on:after{display:none;} .item_info_tab li a{display:block; width:100%; height:70px; text-align:center; line-height:70px; font-weight:400; font-size:18px; color:#777; background:#eee; border-bottom:2px solid #000;} .item_info_tab li a:hover{color:#555; background:#ddd;} .item_info_tab li.on a{font-weight:500; color:#000; background:#fff; border:2px solid #000; border-bottom:0;} .item_info_tab li a span{font-size:14px;} .item_info_tab li.on a span{color:#ff6c6c;} /* ------------- 상품상세 내용 - 공통 ------------- */ .item_info{overflow:hidden;} .item_info img{max-width:100%;} /* ------------- 상세정보 ------------- */ .item_info_detail .detail_area{margin-bottom:50px; overflow:hidden;} .item_info_detail .detail_area img{max-width:100%;} .detail_tit{margin:50px 0 10px; line-height:18px; font-size:18px; font-weight:500; color:#000;} .item_info_detail .detail_table{width:100%; border-top:1px solid #555;} .item_info_detail .detail_table th{padding:7px 20px; font-weight:400; font-size:13px; color:#000; border-bottom:1px solid #ddd; border-left:1px solid #ddd; background:#f9f9fc;} .item_info_detail .detail_table td{padding:7px 20px; font-weight:300; font-size:13px; color:#555; border-bottom:1px solid #ddd; border-left:1px solid #ddd;} .item_info_detail .detail_table tr th:first-child, .item_info_detail .detail_table tr td:first-child{border-left:0;} .delivery_tit{margin:30px 0 10px; padding-top:30px; line-height:18px; font-size:18px; font-weight:500; color:#000;} .delivery_tit:first-child{margin-top:0; padding-top:0; border-top:0;} .delivery_tit img{margin:-3px 5px 0 0;} .delivery_area{padding:30px; border:1px solid #ddd;} /* ------------- 네이버 구매후기 ------------- */ /* -------- 별점 탭 */ .naver_review_wrap .top_list{padding:30px 0; text-align:center; font-size:0; line-height:0;} .naver_review_wrap .top_list li{display:inline-block; margin-right:40px;} .naver_review_wrap .top_list li a{display:inline-block; padding-left:calc(83px + 5px); height:14px; line-height:14px; font-size:13px; color:#999;} .naver_review_wrap .top_list li:first-child a{padding-left:0;} .naver_review_wrap .top_list li a[data-review-score="5"]{background:url('/skin/f_black/images/sub/naver_review_star5_off.png') no-repeat left center;} .naver_review_wrap .top_list li a[data-review-score="4"]{background:url('/skin/f_black/images/sub/naver_review_star4_off.png') no-repeat left center;} .naver_review_wrap .top_list li a[data-review-score="3"]{background:url('/skin/f_black/images/sub/naver_review_star3_off.png') no-repeat left center;} .naver_review_wrap .top_list li a[data-review-score="2"]{background:url('/skin/f_black/images/sub/naver_review_star2_off.png') no-repeat left center;} .naver_review_wrap .top_list li a[data-review-score="1"]{background:url('/skin/f_black/images/sub/naver_review_star1_off.png') no-repeat left center;} .naver_review_wrap .top_list li.on a{font-weight:500; color:#000;} .naver_review_wrap .top_list li.on a[data-review-score="5"]{background:url('/skin/f_black/images/sub/naver_review_star5.png') no-repeat left center;} .naver_review_wrap .top_list li.on a[data-review-score="4"]{background:url('/skin/f_black/images/sub/naver_review_star4.png') no-repeat left center;} .naver_review_wrap .top_list li.on a[data-review-score="3"]{background:url('/skin/f_black/images/sub/naver_review_star3.png') no-repeat left center;} .naver_review_wrap .top_list li.on a[data-review-score="2"]{background:url('/skin/f_black/images/sub/naver_review_star2.png') no-repeat left center;} .naver_review_wrap .top_list li.on a[data-review-score="1"]{background:url('/skin/f_black/images/sub/naver_review_star1.png') no-repeat left center;} .naver_review_wrap .top_list li .disabled{display:none;} /* -------- 후기 리스트 */ .naver_review_wrap .review_area{border-top:2px solid #000; border-bottom:1px solid #000;} .naver_review_wrap .no_data{padding:80px 15px; text-align:center; color:#888;} .naver_review_wrap .lst_review .thumb_nail{position:relative; display:table; table-layout:fixed; padding:15px; width:100%; min-height:130px; border-top:1px solid #ddd;} .naver_review_wrap .lst_review .thumb_nail:first-child{border-top:0;} /* -------- 내용 기본 노출 */ .naver_review_wrap .atc_area{width:calc(100% - 120px);} .naver_review_wrap .atc_area .avg_area{margin-bottom:10px;} /* 별점 */ .naver_review_wrap .atc_area .star_avg{position:relative; display:inline-block; width:83px; height:14px; vertical-align:middle; background:url('/skin/f_black/images/sub/naver_review_star_default.png') no-repeat left center;} .naver_review_wrap .atc_area .star_avg span{position:absolute; top:0; left:0; display:inline-block; height:14px; text-indent:-9999em; overflow:hidden; background:url('/skin/f_black/images/sub/naver_review_star_colored.png') no-repeat left center;} /* 별점 숫자 */ .naver_review_wrap .atc_area .curr_avg{display:inline-block; margin-left:5px; vertical-align:middle;} .naver_review_wrap .atc_area .curr_avg strong{font-size:14px; font-weight:500; color:#03cf5d;} /* 선택된 옵션 */ .naver_review_wrap .atc_area .info{margin-left:20px;} .naver_review_wrap .atc_area .info .info_cell{display:inline-block; vertical-align:middle; font-weight:300; font-size:13px; color:#999;} .naver_review_wrap .atc_area .info .info_cell:before{content:""; display:inline-block; margin:0 10px; width:1px; height:10px; background:#ddd;} .naver_review_wrap .atc_area .info .info_cell:first-child:before{display:none;} /* 타이틀 */ .naver_review_wrap .atc_area .subjcet, .naver_review_wrap .atc_area .subjcet strong{font-size:15px; font-weight:400; color:#000;} /* 내용 */ .naver_review_wrap .atc_area .atc{margin-top:5px; width:100%; font-size:14px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:#666;} .naver_review_wrap .thumb_nail.opened .atc_area .atc{text-overflow:unset; white-space:unset; overflow:unset;} /* -------- 내용 펼침 (내용 또는 내용+이미지) */ .naver_review_wrap .thmb .review_text{display:none; padding:30px; margin:3px 0; font-size:14px; color:#666; background:#f5f5f5;} .naver_review_wrap .thumb_nail.opened .review_text{display:block;} .naver_review_wrap .thmb .review_text img{margin-top:15px; max-width:640px; max-height:640px;} /* -------- 내용 펼침 (이미지 박스) */ .naver_review_wrap .thmb{position:absolute; top:15px; right:15px; width:100px; height:100px; overflow:hidden;} .naver_review_wrap .thmb .img_box{position:absolute; top:0; left:0;} .naver_review_wrap .thmb .img_box img{width:100px; height:100px;} .naver_review_wrap .thmb .img_box .num{position:absolute; bottom:0; right:0; display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; font-weight:300; font-size:12px; color:#fff; background:rgba(0,0,0,0.5);} .naver_review_wrap .thmb .img_box .bdr{position:absolute; top:0; left:0; display:block; width:100%; height:100%;} .naver_review_wrap .thmb .mov_box{position:relative; z-index: 9; top:0; left:0;} .naver_review_wrap .thmb .mov_box img{width:100px; height:100px;} .naver_review_wrap .thmb .mov_box img .off{display: none} .naver_review_wrap .thmb .mov_box .num{position:absolute; bottom:0; right:0; display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; font-weight:300; font-size:12px; color:#fff; background:rgba(0,0,0,0.5);} .naver_review_wrap .thmb .mov_box .bdr{position:absolute; top:0; left:0; display:block; width:100%; height:100%;} .naver_review_wrap .thumb_nail.opened .thmb{position:static; display:block; margin:17px -3px 22px; width:100%; height:100%;} .naver_review_wrap .thumb_nail.opened .thmb .img_box{position:static; display:inline-block; margin:3px;} .naver_review_wrap .thumb_nail.opened .thmb .img_box img{width:287px; height:287px;} .naver_review_wrap .thumb_nail.opened .thmb .img_box .num, .naver_review_wrap .thumb_nail.opened .thmb .img_box .bdr{display:none;} /* -------- 메뉴 펼침 */ .naver_review_wrap .view_toggle{display:block; position:absolute; top:0; left:0; width:100%; height:100%;} .naver_review_wrap .view_toggle .mask{display:block; width:100%; height:100%;} .naver_review_wrap .view_toggle .view{position:absolute; bottom:10px; left:15px; font-size:12px; font-weight:300; color:#999;} /* -------- 페이징 */ .naver_review_wrap .nav-btn-container{margin-top:33px;} /* 장바구니, 주문/결제, 주문완료 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 장바구니 ------------- */ /* 총 결제 금액 */ .cart_total_wrap{margin-top:20px; padding:0 50px; border:3px solid #000;} .cart_total_wrap .calculate_area{display:table; width:100%; table-layout:fixed; border-bottom:1px dashed #bbb;} .cart_total_wrap .calculate_area > dl{position:relative; display:table-cell; vertical-align:middle; text-align:center; padding:35px 0; border-left:1px dashed #bbb;} .cart_total_wrap .calculate_area > dl:first-child{border-left:0;} .cart_total_wrap .calculate_area dt{font-weight:400; font-size:16px; color:#000;} .cart_total_wrap .calculate_area dd{font-weight:600; font-size:25px; color:#000;} .cart_total_wrap .calculate_area .discount_box dd{color:#ff6c6c;} .cart_total_wrap .calculate_area .discount_box:after{position:absolute; top:50%; left:-18px; margin-top:-18px; content:""; width:36px; height:36px; background:url('/skin/f_black/images/sub/cart_minus.png') no-repeat center center;} .cart_total_wrap .calculate_area .delivery_box:after{position:absolute; top:50%; left:-18px; margin-top:-18px; content:""; width:36px; height:36px; background:url('/skin/f_black/images/sub/cart_plus.png') no-repeat center center;} .cart_total_wrap .total_area{padding:20px 0; text-align:right; font-size:0; line-height:0;} .cart_total_wrap .total_area dt{display:inline-block; vertical-align:middle; margin-right:20px; line-height:1; font-weight:500; font-size:18px; color:#000;} .cart_total_wrap .total_area dd{display:inline-block; vertical-align:middle; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; line-height:1; font-weight:600; font-size:35px; color:#ff6c6c;} /* ------------- 주문/결제 ------------- */ #orderWrap{margin-top:80px;} #orderWrap:after{content:""; display:block; clear:both;} /* 왼쪽 입력 영역 */ .order_input_area{float:left; width:780px;} input[type="radio"][name="pay_method"]{display:inline-block; -webkit-appearance:radio; -moz-appearance:radio; appearance:radio; opacity:0; width:0;} /* 오른쪽 동의 및 submit 영역 */ .order_submit_area{position:relative; float:right; margin-top:28px; padding:40px; width:450px; border:3px solid #000; border-bottom:0; background:#fff;} .order_submit_area:after{position:absolute; bottom:-14px; left:-3px; content:""; display:block; width:100%; height:14px; background:url('/skin/f_black/images/sub/order_submit_area_line.png') repeat-x 0 0; border:3px solid #000; border-width:0 3px 0 3px;} .order_submit_area table{width:100%;} .order_submit_area th{padding:3px 0; text-align:left; color:#000;} .order_submit_area tbody tr:last-child th, .order_submit_area tbody tr:last-child td{padding-bottom:25px;} .order_submit_area tfoot th, .order_submit_area tfoot td{padding:15px 0 0; border-top:1px dashed #bbb;} .order_submit_area tfoot th{font-size:17px; font-weight:500;} .order_submit_area tfoot td{font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-size:30px; font-weight:600; color:#ff6c6c;} .order_submit_area tfoot td .unit{font-size:28px; font-weight:400;} /* 개인정보처리방침 */ .order_submit_area .privacy_agree_wrap{margin-top:50px; padding:25px; background:#f5f5f5;} .order_submit_area .privacy_agree_wrap h4{margin-bottom:5px; font-size:15px; font-weight:500; color:#000;} .order_submit_area .privacy_agree_wrap .privacy_con{padding:20px; height:100px; font-weight:300; font-size:13px; color:#555; overflow-y:scroll; overflow-x:hidden; background:#fff; border:1px solid #eee;} .order_submit_area .privacy_agree_wrap .privacy_agree{margin-top:10px; font-weight:500; font-size:13px; color:#000;} /* 동의 문구 */ .order_submit_area .agree_msg{margin-top:30px; text-align:center;} .order_submit_area .agree_msg p.q{margin-bottom:10px; color:#000;} .order_submit_area .agree_msg p.a{font-weight:500; color:#000;} /* 결제 버튼 */ .pay_btn{margin-top:40px; text-align:center; font-size:0; line-height:0;} .pay_btn button{display:inline-block; margin-top:10px; text-align:center; vertical-align:middle; width:100%; height:70px; font-weight:500; line-height:70px; font-size:18px;} .pay_btn button:first-child{margin-top:0;} .pay_btn .good{color:#fff; background:#000;} .pay_btn .good:hover{background:#ff6c6c;} .pay_btn .normal{color:#000; border:1px solid #000;} /* 회원관련 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 로그인 ------------- */ #loginWrap{margin:0 auto; width:620px;} /* 로그인 탭 */ .login_tab:after{content:""; display:block; clear:both;} .login_tab li{float:left; width:50%;} .login_tab li a{display:block; text-align:center; width:100%; height:70px; line-height:68px; font-size:18px; font-weight:400; color:#777; background:#eee; border-bottom:2px solid #000;} .login_tab li a.on{color:#000; background:#fff; border:2px solid #000; border-bottom:0;} .login_tab_con{display:none;} .login_tab_con.on{display:block;} .login_box{padding:50px 130px; background:#fff; border:2px solid #000;} .login_tab + .login_box{margin-top:-2px;} /* 로그인 table */ .login_box table{width:100%;} .login_box th{padding:5px 0; text-align:left; font-weight:400; color:#000;} .login_box td{padding:5px 0; text-align:left; font-weight:400; color:#555;} .login_box input[type="text"], .login_box input[type="password"]{width:100%;} /* 아이디 저장 */ .login_box .save_id{text-align:right;} .login_box .save_id label{font-size:13px; color:#000;} /* 로그인 버튼 */ .login_btn{display:inline-block; margin-top:15px; text-align:center; vertical-align:middle; width:100%; height:70px; font-weight:500; line-height:70px; font-size:18px; color:#fff; background:#000;} /* 로그인 외 다른 메뉴 */ .login_other_way{margin-top:20px; text-align:center; line-height:0; font-size:0;} .login_other_way li{display:inline-block; vertical-align:middle; margin-left:25px; padding-left:25px; line-height:13px; border-left:1px solid #000;} .login_other_way li:first-child{margin-left:0; padding-left:0; border-left:0;} .login_other_way li a{display:inline-block; vertical-align:middle; line-height:13px; font-size:13px; font-weight:400; color:#000;} .login_other_way li a[href*="join"]{font-weight:500; color:#ff6c6c;} /* SNS 로그인 */ .sns_login_area{margin-top:35px;} .sns_login_area li{margin-top:5px;} .sns_login_area li:first-child{margin-top:0;} .sns_login_area li a{display:block; width:100%; text-align:center; vertical-align:middle; font-family:'NanumBarunGothic'; border:1px solid #ddd;} .sns_login_area li span:first-child{display:inline-block; width:42px; vertical-align:middle; border-right:1px solid #ddd;} .sns_login_area li span:last-child{display:inline-block; width:calc(100% - 42px); vertical-align:middle; font-weight:500; font-size:14px; line-height:40px; color:#999;} /* ------------- 회원약관 동의 ------------- */ /* -------------본인인증 */ .auth_wrap{margin-bottom:80px; padding:40px 80px; text-align:center; background:#f5f5f5;} .auth_wrap .auth_radio{margin-bottom:30px; padding-bottom:30px; text-align:center; border-bottom:1px dashed #ccc;} .auth_wrap .auth_radio li{display:inline-block; margin-left:20px;} .auth_wrap .auth_radio li:first-child{margin-left:0;} .auth_wrap .auth_radio label{font-weight:500; font-size:17px;} .auth_wrap .auth_radio label:before{margin-top:-3px;} .auth_wrap .auth_form_area{margin-top:30px; padding-top:30px; font-size:0; line-height:0; border-top:1px dashed #ccc;} .auth_wrap .auth_form_area .mark{display:inline-block; padding:0 10px; vertical-align:middle; font-size:15px; line-height:40px; font-size:15px; color:#555;} .auth_wrap .auth_form_area select{margin-left:5px;} .auth_wrap .auth_link_area p{margin-bottom:30px; font-weight:300; font-size:14px; color:#000;} .auth_wrap .auth_link_area strong{display:block; margin-bottom:5px; font-weight:500; font-size:16px;} .auth_wrap .auth_link_area button{padding:0 30px; margin-left:5px; height:40px; text-align:center; vertical-align:middle; font-weight:400; line-height:40px; font-size:15px; color:#fff; background:#000;} .auth_wrap .big_msg{margin-bottom:5px; font-weight:500; font-size:16px; color:#000;} .auth_wrap .small_msg{font-weight:300; font-size:14px; color:#000;} /* 약관동의 체크 */ .agree_wrap{margin-top:80px;} .agree_wrap.first{margin-top:0;} .agree_area{padding:40px; width:100%; height:250px; border:1px solid #ddd; overflow-y:scroll; overflow-x:hidden;} .agree_check{margin-top:10px; text-align:right;} .agree_check label{font-weight:400; font-size:16px; color:#000;} /* ------------- 아이디 찾기 ------------- */ .auth_wrap .table_row{margin:0 auto; width:850px; border:0;} .auth_wrap .table_row th, .auth_wrap .table_row td{padding:5px 0; border:0;} /* ------------- 비밀번호 찾기 ------------- */ .auth_wrap .auth_link_area .input_id{margin:0 auto 30px; padding:20px; width:380px; background:#f1f1f1; border:1px solid #ddd;} .auth_wrap .auth_link_area .input_id label{display:inline-block; margin-right:20px; font-weight:400; color:#000;} .table_row.tbl_auto_form.auth_type2, .table_row.tbl_auto_form.auth_type3{margin:0 auto 30px; padding:20px; width:380px; background:#f1f1f1; border:1px solid #ddd;} .table_row.tbl_auto_form.auth_type2 .col1, .table_row.tbl_auto_form.auth_type3 .col1{width:120px;} .table_row.tbl_auto_form.auth_type2 .col2, .table_row.tbl_auto_form.auth_type3 .col2{width:auto;} .table_row.tbl_auto_form.auth_type2 #auth_id th, .table_row.tbl_auto_form.auth_type3 #auth_id th{padding:17px 0 20px 59px; font-weight:400; color:#000;} .table_row.tbl_auto_form.auth_type2 #auth_id td, .table_row.tbl_auto_form.auth_type3 #auth_id td{padding-top:20px; padding-bottom:20px;} .finish_msg_wrap + .table_row{margin-top:50px;} /* ------------- 비밀번호 재설정 / 회원인증요청 ------------- */ .user_miniform_wrap{padding:40px 80px; text-align:center; border:2px solid #000;} .user_miniform_wrap .form_btn{margin-top:30px; width:345px;} .user_miniform_wrap table{margin:0 auto; width:345px; border:0;} .user_miniform_wrap th{padding:5px 0; text-align:left; font-weight:500; color:#000;} .user_miniform_wrap td{padding:5px 0; text-align:left;} .user_miniform_wrap ul{margin-top:20px; padding-top:20px; line-height:1.7; font-size:14px; border-top:1px dashed #bbb;} .user_miniform_wrap label{margin-right:20px; font-weight:500; color:#000;} .user_miniform_wrap input{width:100%;} .user_miniform_wrap .msg_area{margin-bottom:30px; padding-bottom:30px; border-bottom:1px dashed #ccc;} .user_miniform_wrap .big_msg{margin-bottom:5px; font-weight:500; font-size:16px; color:#000;} .user_miniform_wrap .small_msg{text-align:center; font-weight:300; font-size:14px; color:#000;} /* ------------- 네이버/카카오/페이스북 아이디 회원 가입 ------------- */ .sns_join_message{margin-top:80px; text-align:center; font-size:16px; font-weight:400; color:#000;} .sns_join_message + .middle_btn_area{margin-top:30px;} /* 마이페이지 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 마이페이지 - 공통 ------------- */ /* 마이페이지 메뉴 */ .mypage_menu{margin-bottom:50px; width:100%; text-align:center; font-size:0; line-height:0; border:1px solid #e5e5e5;} .mypage_menu li:nth-child(5n){border-right:0} .mypage_menu li{text-align:left; width:20%;;box-sizing: border-box;float:left;border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5;margin-bottom:-1px;} .mypage_menu a{position:relative; display:block; padding:9px 20px; vertical-align:middle; font-size:14px; font-weight:400; color:#888;} .mypage_menu img{margin:-2px 10px 0 0; opacity:0.4; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} .mypage_menu li:hover a, .mypage_menu li.on a{font-weight:500; color:#000;} .mypage_menu li:hover img, .mypage_menu li.on img{opacity:1;} .mypage_menu li.on a:after{position:absolute; top:-1px; left:-1px; content:""; display:block; width:100%; height:100%; border:1px solid #000;} .mypage_menu::after{content: '';clear: both;display: block;} /* 탭 */ .borad_tab{margin-bottom:50px;} .borad_tab:after{content:""; display:block; clear:both;} .borad_tab li{float:left; width:50%;} .borad_tab li a{display:block; text-align:center; width:100%; height:70px; line-height:70px; font-weight:400; font-size:18px; color:#777; background:#eee; border:1px solid #eee; border-bottom:2px solid #000;} .borad_tab li a.on{color:#000; background:#fff; border:2px solid #000; border-bottom:0;} .borad_tab_con{display:none;} .borad_tab_con.on{display:block;} /* ------------- 검색바 - 공통 ------------- */ .search_bar{margin-bottom:80px; padding:30px; text-align:center; font-size:0; line-height:0; background:#f5f5f5;} .search_bar label{display:inline-block; vertical-align:middle; font-size:15px; line-height:40px; color:#000;} .search_bar .mark{display:inline-block; padding:0 10px; vertical-align:middle; font-size:15px; line-height:40px;} .search_bar .search_btn{display:inline-block; margin-left:5px; width:100px; height:40px; text-align:center; line-height:40px; font-weight:400; color:#fff; background:#000;} .search_bar .search_btn img{margin:-2px 0 0 7px;} /* 날짜 검색 */ .search_bar.date input[type="date"]{width:80px;} .search_bar.date .term_list{margin-bottom:10px;} .search_bar.date .term_list > label{margin-right:35px;} .search_bar.date .term_list > ul{display:inline-block; vertical-align:middle;} .search_bar.date .term_list li{display:inline-block; margin-left:5px;} .search_bar.date .term_list li:first-child{margin-left:0;} .search_bar.date .term_list li a{display:inline-block; text-align:center; width:90px; height:40px; line-height:40px; font-size:15px; color:#555; background:#eee; border:1px solid #bbb;} .search_bar.date .term_list li:hover a{color:#000; background:#fff; border:1px solid #000;} /* 유형 검색 */ .search_bar.kind label{margin:0 20px 0 35px;} .search_bar.kind label:first-child{margin-left:0;} .search_bar.kind select{width:230px;} /* 게시판 검색 */ .search_bar.board select{width:150px;} .search_bar.board input{margin-left:5px; width:400px;} /* ------------- 리스트 토탈 숫자 ------------- */ .list_total_num{margin:20px 0 80px; padding:20px; text-align:center; border:1px dashed #bbb;} .list_total_num dl{display:inline-block; margin-left:50px;} .list_total_num dl:first-child{margin-left:0;} .list_total_num dt, .list_total_num dd{display:inline-block; vertical-align:middle; font-size:15px;} .list_total_num dt{margin-right:10px; color:#000;} .list_total_num dd{font-weight:500; font-size:18px; color:#ff6c6c;} /* 위치 */ .search_bar + .list_total_num{margin:-60px 0 80px;} /* ------------- 답변 상태 ------------- */ .status{display:inline-block; text-align:center; vertical-align:middle; width:66px; height:22px; line-height:20px; font-size:12px; border-radius:12px;} .status.wating{color:#fff; background:#ff6c6c; border:1px solid #ff6c6c;} .status.later{color:#555; border:1px solid #bbb;} .status.reply{color:#555; background:#eee; border:1px solid #bbb;} /* ------------- 마이페이지 메인 ------------- */ /* 마이페이지 정보 */ #myInfoWrap{padding:60px; text-align:center; background:#f5f5f5;} /* 내 이름 */ .my_info_tit .my_name{font-size:30px; font-weight:300; color:#000;} .my_info_tit .my_name strong{font-weight:500;} .my_info_tit .my_name span{font-style:italic;} .my_info_tit .my_name img{margin:-5px 5px 0 0;} /* 내 등급 */ .my_info_tit .my_class{margin-top:10px; font-weight:15px; font-weight:400; color:#555;} .my_info_tit .my_class strong{font-weight:500; color:#ff6c6c;} /* 주문 진행 현황 */ .my_order_present{margin-top:60px; text-align:center; font-size:0; line-height:0;} .my_order_present li{position:relative; display:inline-block; vertical-align:middle; margin-left:40px; width:150px; height:150px;} .my_order_present li:first-child{margin-left:0;} .my_order_present li a{display:block; padding-top:30px; width:150px; height:150px; line-height:1; font-weight:400; font-size:14px; color:#000; background:#fff; border-radius:50%;} .my_order_present li:before{position:absolute; top:50%; left:-30px; display:inline-block; content:""; width:39px; height:11px; background:url('/skin/f_black/images/sub/process_arrow.png') no-repeat center center;} .my_order_present li:first-child:before{display:none;} .my_order_present li img{display:block; margin:0 auto 8px;} .my_order_present li .count{display:block; margin-top:5px; font-weight:600; font-size:18px; color:#ff6c6c;} /* 내 쇼핑몰 이용 현황 */ .my_mall_present{margin:60px auto 0; padding:30px 0; width:1000px; text-align:center; font-size:0; line-height:0; background:#fff; border:1px solid #eee; border-radius:10px;} .my_mall_present li{display:inline-block; vertical-align:middle; margin-left:40px; padding-left:40px; border-left:1px dashed #bbb;} .my_mall_present li:first-child{margin-left:0; padding-left:0; border-left:0;} .my_mall_present li a{line-height:1; font-weight:400; font-size:14px; color:#000;} .my_mall_present li a .count{display:block; margin:12px auto 0; font-weight:600; font-size:18px;} /* 상품문의/1:1상담 table */ .table_simple{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_simple td{padding:15px 20px; text-align:center; font-weight:400; color:#555; border-top:1px solid #ddd;} .table_simple tr:first-child td{border-top:0;} /* 이미지 */ .table_simple .img_box .img_frame{position:relative; margin:0 auto; width:50px; height:50px; overflow:hidden;} .table_simple .img_box .img_frame img{width:50px; height:50px;} /* 제목 */ .table_simple .info_box{text-align:left;} .table_simple .info_box a{color:#000;} /* 데이터 없음 */ .table_simple .no_data{padding:50px 15px; color:#888;} /* 관심상품 */ .item_list.wish{padding:20px 0 30px; border-top:2px solid #000; border-bottom:1px solid #000;} /* ------------- 게시판 보기(view) 페이지 ------------- */ #boardView.reply{margin-top:35px;} .board_view_head{padding:20px; border-top:2px solid #000; border-bottom:1px solid #ddd;} .board_view_head .view_title{margin-bottom:20px;} .board_view_head .view_title .cate_name{display:inline-block; margin:-4px 4px 0 0; padding:0 10px; height:22px; vertical-align:middle; line-height:20px; font-weight:500; font-size:13px; color:#000; border:1px solid #000; border-radius:11px;} .board_view_head .view_title h3{display:inline-block; vertical-align:middle; font-size:18px; font-weight:500; color:#000;} .board_view_head .view_info{font-size:0; line-height:0;} .board_view_head .view_info li{display:inline-block; margin-left:15px; padding-left:15px; font-size:14px; line-height:13px; border-left:1px solid #ccc;} .board_view_head .view_info li:first-child{margin-left:0; padding-left:0; border-left:0;} .board_view_head .view_info li strong{margin-right:5px; font-weight:500; color:#000;} .board_view_body{padding-top:20px; border-bottom:1px solid #000;} .board_view_body .view_con{padding:0 20px 50px;} .board_view_body .view_con img{max-width:100%;} /* 상품 불러오기 */ .item_import_wrap{display:inline-block; margin:0 20px 20px; padding:20px 50px 20px 20px; vertical-align:middle; border:1px solid #ddd;} .item_import_wrap .item_import{display:table;} #goods_info .item_import_wrap.off{display:none;} #goods_info .item_import_wrap.on{display:inline-block;} #find_big_goods.off{display:none;} #find_small_goods.off{display:none;} #find_big_goods.on{display:inline-block;} #find_small_goods.on{display:inline-block;} .item_import .img_area{display:table-cell; vertical-align:middle; width:50px;} .item_import .img_area .img_frame{position:relative; width:50px; height:50px; overflow:hidden;} .item_import .img_area .img_frame img{width:50px; height:50px;} .item_import .txt_area{display:table-cell; padding-left:20px; vertical-align:middle;} .item_import .item_code{font-weight:300; font-size:13px; color:#888;} .item_import .item_name{font-size:15px; color:#000;} /* 첨부된 파일 */ .board_view_body .view_file{padding:15px 20px; border-top:1px solid #ddd;} .board_view_body .view_file h4{font-size:14px; color:#000;} .board_view_body .view_file h4 img{margin:-3px 5px 0 0;} .board_view_body .view_file li{font-size:13px; line-height:1.7;} .board_view_body .view_file a{text-decoration:underline; font-size:13px; color:#ff6c6c;} .board_view_body .view_file li .num{margin-left:10px; color:#888;} .board_view_foot{border-bottom:1px solid #000;} /* 댓글 목록 */ .comment_list li{position:relative; padding:20px 52px 20px 20px; border-top:1px solid #ddd;} .comment_list li:first-child{border-top:0;} .comment_list li.no_data{padding:50px 0; text-align:center; color:#888;} .comment_list h5{margin-bottom:5px; font-weight:700; font-size:13px; color:#000;} .comment_list h5 .cmt_date{margin-left:20px; font-weight:300; color:#888;} .comment_list .cmt_con{font-size:14px; color:#555;} .comment_list .cmt_delete{position:absolute; top:20px; right:20px; width:12px; height:12px; text-indent:-9999em; overflow:hidden; background:url('/skin/f_black/images/sub/cmt_delete.png') no-repeat center center;} /* 댓글 입력 */ .comment_form_wrap{padding:20px; background:#f7f7f7;} .comment_form_wrap .user_area{margin-bottom:10px; font-size:14px;} .comment_form_wrap .user_area strong{font-weight:500; font-size:14px; color:#000;} .comment_form_wrap .user_area label{margin-left:30px; font-size:14px; color:#000;} .comment_form_wrap .user_area label:first-child{margin-left:0;} .comment_form_wrap .user_area input{margin-left:10px; width:160px; font-size:14px;} .comment_form_wrap .user_area img{margin-left:10px; width:auto; height:40px;} .comment_form_wrap .user_area img + input{margin-left:5px;} .comment_form_wrap .user_area .desc{margin-left:10px; font-weight:300; font-size:13px; color:#8a8d99;} .comment_form_wrap .con_area textarea{max-width:calc(100% - 90px); min-width:calc(100% - 90px); max-height:90px; min-height:90px; width:calc(100% - 90px); height:90px; font-size:14px;} .comment_form_wrap .con_area .cmt_btn{text-align:center; width:90px; height:90px; line-height:90px; color:#fff; background:#ff6c6c;} /* ------------- 게시판 레이어 팝업 ------------- */ .confirm_box{width:350px; background:#fff; border:1px solid #000;} .confirm_head{padding:0 20px; width:100%; height:46px; line-height:46px; font-weight:500; font-size:16px; color:#000; background:#eee;} .confirm_body{margin:0 !important; padding:50px 30px;} .confirm_body > p{margin:0; text-align:center; line-height:1.6; font-weight:400; font-size:15px; color:#000;} .confirm_body > p strong{font-weight:500;} .confirm_foot{width:100%; text-align:center; font-size:0; line-height:0; border-top:1px solid #ddd;} .confirm_foot button{display:inline-block; text-align:center; width:50%; height:46px; line-height:46px; font-size:15px;} .confirm_foot button:focus{outline:none;} .confirm_foot button.normal{color:#888; font-weight:400;} .confirm_foot button.good{color:#000; font-weight:500; border-left:1px solid #ddd;} /* ------------- 게시판 쓰기(write) 페이지 ------------- */ /* 상품 불러오기 */ .table_row .item_import_wrap{margin:0;} .table_row .item_import_wrap .small_btn{margin:8px 0 0 0;} /* 첨부된 파일 */ .upload_list{line-height:1.7; font-size:13px;} .upload_list > div:first-child{margin-top:10px;} .upload_list > div:before{content:""; display:inline-block; vertical-align:middle; margin-right:5px; width:5px; height:1px; background:#555;} .upload_list img{margin-left:5px;} .upload_db_list li{font-size:13px; line-height:1.7;} .upload_db_list li:first-child{margin-top:10px;} .upload_db_list a{text-decoration:underline; font-size:13px; color:#ff6c6c;} .upload_db_list li .num{margin-left:10px; color:#888;} .upload_db_list li label{margin-left:10px;} /* 별점 */ .review_star_wrap input[type="radio"] + label:before{display:none;} .review_star_wrap input[type="radio"] + label{display:inline-block; width:23px; height:22px; background:url('/skin/f_black/images/sub/review_star.png') no-repeat center center; cursor:pointer; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} .review_star_wrap input[type="radio"] + label + input[type="radio"] + label{margin-left:5px;} .review_star_wrap input[type="radio"]:checked + label + input + label, .review_star_wrap input[type="radio"]:checked + label + input + label + input + label, .review_star_wrap input[type="radio"]:checked + label + input + label + input + label + input + label, .review_star_wrap input[type="radio"]:checked + label + input + label + input + label + input + label + input + label{background:url('/skin/f_black/images/sub/review_star_off.png') no-repeat center center;} /* 회원정보수정 비밀번호 입력 */ .view_rock_wrap{padding:40px 80px; text-align:center; border:2px solid #000;} .view_rock_wrap table{margin:0 auto; width:345px; border:0;} .view_rock_wrap th{padding:5px 0; text-align:left; font-weight:500; color:#000;} .view_rock_wrap td{padding:5px 0; text-align:left;} .view_rock_wrap ul{margin-top:20px; padding-top:20px; line-height:1.7; font-size:14px; border-top:1px dashed #bbb;} .view_rock_wrap label{margin-right:20px; font-weight:500; color:#000;} .view_rock_wrap input{width:200px;} .view_rock_wrap .msg_area{margin-bottom:30px; padding-bottom:30px; border-bottom:1px dashed #ccc;} .view_rock_wrap .big_msg{margin-bottom:5px; font-weight:500; font-size:16px; color:#000;} .view_rock_wrap .small_msg{text-align:center; font-weight:300; font-size:14px; color:#000;} .view_rock_wrap + .middle_btn_area{margin-top:50px;} /* 고객센터 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 고객센터 - 공통 ------------- */ /* 고객센터 메뉴 */ .center_menu{margin-bottom:50px; width:100%; text-align:center; font-size:0; line-height:0;border:1px solid #e5e5e5;;box-sizing: border-box;} .center_menu li:nth-child(6n){border-right:0} .center_menu li{text-align:left; float:left;box-sizing: border-box;width: 213px;;border-bottom:1px solid #e5e5e5;border-right:1px solid #e5e5e5;margin-bottom:-1px;;} .center_menu li:hover a, .center_menu li.on a{font-weight:500; color:#000;} .center_menu li:hover img, .center_menu li.on img{opacity:1;} .center_menu li.on a:after{position:absolute; top:-1px; left:-1px; content:""; display:block; width:100%; height:100%; border:1px solid #000;} .center_menu a{position:relative; display:block; padding:9px 20px; vertical-align:middle; font-size:14px; font-weight:400; color:#888;/*border:1px solid #e5e5e5;box-sizing: border-box;;*/} .center_menu img{margin:-2px 10px 0 0; opacity:0.4; -webkit-transition:0.3s ease; -moz-transition:0.3s ease; -ms-transition:0.3s ease; -o-transition:0.3s ease; transition:0.3s ease;} .center_menu::after{content: '';clear: both;display: block;} /* ------------- 고객센터 - 메인 ------------- */ #centerWrap .cs_info{margin-bottom:50px; padding:50px; background:#f5f5f5;} /* 공지사항 */ .notice_rolling_warp{margin-bottom:80px; padding:25px 20px; font-size:0; line-height:0; border-top:2px solid #000; border-bottom:1px solid #000;} .notice_rolling_warp:after{content:""; display:block; clear:both;} .notice_rolling_warp h3{float:left; width:110px; line-height:22px; font-weight:500; font-size:18px; color:#000;} .notice_rolling_list{float:left; width:1030px; height:22px; overflow:hidden;} .notice_rolling_list ul, .notice_rolling_list li{line-height:0; font-size:0;} .notice_rolling_list li a{display:inline-block; vertical-align:middle; max-width:950px; height:22px; line-height:22px; font-size:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:#000;} .notice_rolling_list li span{display:inline-block; vertical-align:middle; margin-left:20px; width:60px; line-height:22px; font-weight:300; font-size:15px; color:#888;} .notice_rolling_list li.no_data a{color:#888;} .notice_rolling_btn{float:right; text-align:right; width:100px;} .notice_rolling_btn button{display:inline-block; vertical-align:middle; width:22px; height:22px; text-indent:-9999em; overflow:hidden;} .notice_rolling_btn button.btn_up{margin-right:5px; background:url('/skin/f_black/images/sub/arrow_up.png') no-repeat center center;} .notice_rolling_btn button.btn_down{background:url('/skin/f_black/images/sub/arrow_down.png') no-repeat center center;} /* ------------- 상품후기 ------------- */ .review_list{padding-bottom:30px; overflow:hidden; border-bottom:1px solid #ddd;} .review_list > ul{margin:-10px; overflow:hidden;} .review_list > ul:after{content:""; display:block; clear:both;} .review_list > ul > li{float:left; margin:10px; width:630px; height:302px; background:#fff; border:1px solid #e5e5e5; cursor:pointer;} .review_list > ul > li.no_data{text-align:center; width:1280px; height:200px; line-height:200px; color:#888; background:none; border:0;} .review_list > ul > li > a{display:block;} .review_list .img_area{position:relative; float:left; width:300px; height:300px; overflow:hidden; background:#f9f9f9;} .review_list .img_area img{width:300px; height:300px;} .review_list .txt_area{position:relative; float:left; padding:30px; width:328px; height:300px;} .review_list .txt_area .cate{display:inline-block; margin-bottom:8px; padding:0 10px; height:20px; vertical-align:middle; line-height:18px; font-weight:400; font-size:12px; color:#000; border:1px solid #000; border-radius:11px;} .review_list .txt_area .tit{display:block; margin-bottom:10px; line-height:1.3; font-size:17px; font-weight:500; color:#000;} .review_list .txt_area .star{margin-bottom:10px;} .review_list .txt_area .con{margin-bottom:30px; line-height:1.3; font-size:14px; color:#555;} .review_list .txt_area .info_list{position:absolute; bottom:30px; left:30px; width:266px;} .review_list .txt_area .info_list > div{margin-top:10px; line-height:0; font-size:0;} .review_list .txt_area .info_list dl{display:inline-block; vertical-align:middle; margin-left:10px; padding-left:10px; border-left:1px solid #ccc;} .review_list .txt_area .info_list dl:first-child{margin-left:0; padding-left:0; border-left:0;} .review_list .txt_area .info_list dt{display:inline-block; margin-right:5px; line-height:11px; font-size:13px; color:#555;} .review_list .txt_area .info_list dd{display:inline-block; line-height:11px; font-size:12px; color:#888;} /* ------------- 자주묻는질문(FAQ) ------------- */ .borad_cate_list{margin-bottom:40px; text-align:center; font-size:0; line-height:0;} .borad_cate_list li{display:inline-block; margin:0 12px;} .borad_cate_list li a{line-height:1; font-weight:400; font-size:17px; color:#555;} .borad_cate_list li.on a{font-weight:500; color:#000;} .borad_cate_list li.on{position:relative;} .borad_cate_list li.on:after{position:absolute; bottom:-5px; left:0; content:""; display:block; width:100%; height:3px; background:#000;} .faq_list{border-top:2px solid #000; border-bottom:1px solid #000;} .faq_list li{border-top:1px solid #ddd;} .faq_list li:first-child{border-top:0;} .faq_list li.no_data{padding:50px 0; text-align:center; color:#888;} .faq_list .faq_tit{position:relative;} .faq_list .faq_tit a{display:block; padding:18px 64px; font-weight:400; font-size:15px; color:#555;} .faq_list .faq_tit .icon_q{position:absolute; top:18px; left:20px;} .faq_list .faq_tit:after{position:absolute; top:50%; right:24px; content:""; display:inline-block; margin-top:-4px; width:14px; height:8px; background:url('/skin/f_black/images/sub/arrow_down_gray.png') no-repeat center center;} .faq_list .faq_tit.open:after{background:url('/skin/f_black/images/sub/arrow_up.png') no-repeat center center;} .faq_list .faq_tit.open a{font-weight:500; color:#000;} .faq_list .faq_con{display:none; position:relative; padding:30px 64px; background:#f5f5f5;} .faq_list .faq_con .icon_a{position:absolute; top:30px; left:20px;} .faq_list .faq_con img{max-width:100%;} /* ------------- 갤러리 ------------- */ .gallery_list{padding-bottom:30px; overflow:hidden; border-bottom:1px solid #ddd;} .gallery_list ul{margin:-30px -10px;} .gallery_list ul:after{content:""; display:block; clear:both;} .gallery_list li{float:left; margin:30px 10px; width:305px;} .gallery_list .img_frame{position:relative; margin:0 auto 15px; width:305px; height:305px; overflow:hidden; background:#f9f9f9;} .gallery_list .img_frame img{width:305px; height:305px;} .gallery_list .cate{display:inline-block; margin-bottom:3px; padding:0 10px; height:20px; vertical-align:middle; line-height:18px; font-weight:400; font-size:12px; color:#000; border:1px solid #000; border-radius:11px;} .gallery_list .tit{font-size:16px; font-weight:500; color:#000;} .gallery_list .tit .cmt{font-weight:400; font-size:14px; color:#ff6c6c;} .gallery_list .date{margin-top:7px; font-size:14px; font-weight:300; color:#888;} /* ------------- 이용안내/이용약관/개인정보 처리방침/이메일 무단 수집거부 ------------- */ .clause_area{padding:60px 50px; background:#f7f7f7;} .clause_area.email{padding:80px 50px; text-align:center; line-height:2;} .clause_area.email .date{display:block; margin-top:30px; font-weight:500; color:#000;} .clause_area.email img{display:block; margin:0 auto 30px;} .clause_area h3{position:relative; padding-left:12px; margin:40px 0 5px; line-height:18px; font-weight:500; font-size:18px; color:#000;} .clause_area h3:first-child{margin-top:0;} .clause_area h3:after{position:absolute; top:2px; left:0; content:""; display:block; width:4px; height:14px; background:#000;} .clause_area h4{margin:30px 0 5px; font-weight:500; font-size:16px; line-height:16px; color:#000;} .clause_area h3 + h4{margin-top:15px;} .clause_area li{line-height:1.7;} .clause_area strong{font-weight:500; color:#ff6c6c;} .clause_area > ul > li{position:relative; padding-left:12px;} .clause_area > ul > li:after{position:absolute; top:12px; left:0; display:inline-block; content:""; vertical-align:middle; width:5px; height:1px; background:#555;} .clause_area > ul > li > ul{padding-left:12px;} .clause_area > ol > li > ul{padding-left:15px;} .clause_area > ul > li > ul > li, .clause_area > ol > li > ul > li{position:relative; padding-left:8px;} .clause_area > ul > li > ul > li:after, .clause_area > ol > li > ul > li:after{position:absolute; top:11px; left:0; display:inline-block; content:""; vertical-align:middle; width:3px; height:3px; background:#555; border-radius:50%;} /* ------------- 회사소개 ------------- */ .company_info{} /* Sub Page - 기타 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 사이트맵 ------------- */ .sitemap_list{margin:0 -20px;} .sitemap_list:after{content:""; display:block; clear:both;} .sitemap_list > li{float:left; margin:0 20px; width:calc(25% - 40px);} .sitemap_list h3{padding:0 15px 5px; font-weight:600; font-size:18px; color:#000; border-bottom:2px solid #000;} .sitemap_list_depth2 > li{border-bottom:1px solid #eee;} .sitemap_list_depth2 > li > a{display:block; padding:0 15px; line-height:40px; font-size:15px; font-weight:400; color:#000;} .sitemap_list_depth3{padding:0 15px;} .sitemap_list_depth2 > li > a:hover{color:#ff6c6c; background:#f5f5f5;} .sitemap_list_depth3 > li:last-child{margin-bottom:15px;} .sitemap_list_depth3 > li > a{display:block; vertical-align:middle; line-height:1.7; font-size:14px; color:#555;} .sitemap_list_depth3 > li > a:before{content:""; display:inline-block; margin:-2px 5px 0 0; vertical-align:middle; width:5px; height:1px; background:#555; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;} .sitemap_list_depth3 > li > a:hover{color:#ff6c6c;} .sitemap_list_depth3 > li > a:hover:before{background:#ff6c6c;} /* ------------- 출석 체크 ------------- */ .attendance_wrap{padding:90px; background:#e2e8ec url('/skin/f_black/images/sub/attendance.jpg') no-repeat right 20px;} .attendance_head{display:table; margin-bottom:90px; width:100%; table-layout:fixed;} .attendance_head .txt_area{display:table-cell; padding-left:90px; width:50%; vertical-align:middle;} .attendance_head .txt_area h3{font-weight:300; line-height:1.2; letter-spacing:-2px; font-size:60px; color:#000;} .attendance_head .txt_area h3 strong{font-weight:500;} .attendance_head .txt_area h3 span{font-style:italic;} .attendance_head .txt_area h3 + p{margin-top:40px; font-size:16px; font-weight:300px; color:#000;} .attendance_head .txt_area .today_check_btn{display:inline-block; margin-top:30px; text-align:center; vertical-align:middle; width:320px; height:56px; font-weight:400; line-height:56px; font-size:18px; color:#fff; background:#000;} .attendance_head .benefit_area{display:table-cell; width:50%; vertical-align:middle;} .attendance_head .benefit_area .coupon{padding:40px 50px; width:456px; height:225px; text-align:center; background:url('/skin/f_black/images/sub/attendance_coupon.png') no-repeat center center;} .attendance_head .benefit_area .coupon .goal{margin-bottom:30px; padding-bottom:20px; font-size:16px; border-bottom:1px dashed #ccc;} .attendance_head .benefit_area .coupon .goal strong{font-weight:600; color:#000;} .attendance_head .benefit_area .coupon .benefit{font-size:26px; font-weight:600; color:#ff6c6c;} .attendance_body{padding:50px; background:#fff;} .attendance_body .date_selector{position:relative; margin-bottom:40px; text-align:center;} .attendance_body .date_selector > a{display:inline-block; vertical-align:middle;} .attendance_body .date_selector .year_month{display:inline-block; margin:0 20px; vertical-align:middle; font-size:28px; font-weight:600; color:#000;} .attendance_body .date_selector .go_today{position:absolute; top:10px; right:0; font-size:14px; color:#000;} .attendance_body .date_selector .go_today img{margin:-3px 0 0 5px;} .attendance_body table.attendance th img{display:none !important;} .attendance_body table.attendance th:after{display:block; padding:7px; width:100%; height:100%; box-sizing:border-box; font-size:14px; color:#fff; background:#99a4ad; border-left:1px solid #fff;} .attendance_body table.attendance .sun:after{content:"SUN"; border-left:0;} .attendance_body table.attendance .mon:after{content:"MON";} .attendance_body table.attendance .tue:after{content:"TUE";} .attendance_body table.attendance .wed:after{content:"WED";} .attendance_body table.attendance .thu:after{content:"THU";} .attendance_body table.attendance .fri:after{content:"FRI";} .attendance_body table.attendance .sat:after{content:"SAT";} .attendance_body table.attendance td{padding:10px; text-align:left; vertical-align:top; width:calc(100%/7); height:142px; font-size:16px; font-weight:500; color:#000; border:1px solid #ddd;} .attendance_body table.attendance td.att_check{background:url('/skin/f_black/images/sub/attendance_checked.png') no-repeat center center;} .attendance_body table.attendance td:nth-child(1){color:#ff6b6b;} .attendance_body table.attendance td:nth-child(7){color:#35a2ff;} /* ------------- 온라인 설문 ------------- */ .poll_wrap{padding:50px 100px; border:1px solid #ddd;} .poll_wrap .poll_tit{margin-bottom:5px; text-align:center; font-weight:500; font-size:18px; color:#000;} .poll_wrap .poll_tit .state{display:inline-block; margin:-4px 10px 0 0; padding:0 10px; height:22px; vertical-align:middle; line-height:20px; font-weight:500; font-size:13px; color:#000; border:1px solid #000; border-radius:11px;} .poll_wrap .poll_date{margin-bottom:30px; text-align:center; font-size:13px; color:#666;} .poll_wrap .middle_btn_area{margin-top:30px;} .poll_item{margin-top:10px; width:100%;} .poll_item:after{content:""; display:block; clear:both;} .poll_item:first-child{margin-top:0;} .poll_item .tit{margin-bottom:8px; font-size:14px; color:#000;} .poll_item .tit .num{display:inline-block; margin:-2px 5px 0 0; width:16px; height:16px; text-align:center; vertical-align:middle; line-height:14px; font-size:10px; border:1px solid #bbb; border-radius:50%;} .poll_item .bar{position:relative; margin-left:21px; width:calc(100% - 21px); height:5px; background:#ddd; border-radius:10px;} .poll_item .bar .percent{height:5px; background:#ff6c6c; border-radius:10px;} .poll_item .info{margin-top:5px; text-align:right; font-size:12px; font-weight:300; color:#666;} .poll_opinion_tit{position:relative; margin-top:50px; padding-bottom:5px;} .poll_opinion_tit h5{font-weight:500; font-size:18px; color:#000;} .poll_opinion_tit .opinion_btn{position:absolute; top:5px; right:0; font-size:13px; color:#000;} .poll_opinion_tit .opinion_btn:after{content:""; display:inline-block; margin-left:3px; width:9px; height:5px; vertical-align:middle; background:url('/skin/f_black/images/sub/arrow_up.png') no-repeat 0 0/cover;} .poll_opinion_tit .opinion_btn.open:after{background:url('/skin/f_black/images/sub/arrow_down.png') no-repeat 0 0/cover;} #poll_cmt_list_area .comment_list{border-top:1px solid #000;} /* ------------- 신청폼 ------------- */ .from_application .file .form_btn{margin-left:0;} .from_application select[name="APPFIELD_file_list"]{margin:5px 0 0 !important; width:100% !important; height:90px;} .from_application select[name^="APPFIELD_date"]{margin-right:5px;} .from_application select[name^="APPFIELD_date"] + label{margin-right:15px;} .from_application button.date{display:inline-block; margin-left:5px; width:18px; height:19px; text-indent:-9999em; overflow:hidden; background:url('/skin/f_black/images/sub/icon_calendar.png') no-repeat center center;} .from_application .date + select{margin-left:20px;} /* 팝업창 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------- 이벤트 팝업 (프로모션 기능) ------------- */ #eventPopup .event_popup_area img{max-width:100%;} #eventPopup .event_popup_close{padding:0 10px; height:30px; line-height:28px; font-size:12px; color:#fff; background:#000;} #eventPopup .event_popup_close:after{content:""; display:block; clear:both;} #eventPopup .event_popup_close .check_area{float:left;} #eventPopup .event_popup_close .check_area label{float:left;} #eventPopup .event_popup_close .close_btn{float:right; color:#fff;} div[id^=layer_event_]{border:0px !important;} div[id^=layer_event_] .event_popup_close{position:initial; top:unset !important; padding:0 10px; width:100%; height:30px; line-height:30px; font-size:12px; color:#fff; background-color:#000;} div[id^=layer_event_] .event_popup_close table{background-color:#000 !important;} div[id^=layer_event_] .event_popup_close table label{font-family:'NotoSansKR','Malgun Gothic','Dotum',sans-serif !important; font-size:12px; line-height:28px; color:#fff;} div[id^=layer_event_] .event_popup_close a.close_btn:after{content:'닫기'; font-size:12px; line-height:28px; color:#fff;} div[id^=layer_event_] .event_popup_close a.close_btn img{display:none;} /* ------------- 팝업 공통 (페이지 내 팝업) ------------- */ #popup{font-size:14px;} #popup input[type="text"], #popup select{font-size:14px;} .popup_head{padding:0 20px; width:100%; height:46px; line-height:46px; font-weight:500; font-size:16px; color:#fff; background:#000;} .popup_body{padding:20px 20px 50px;} .popup_body h2{margin:40px 0 7px; line-height:1; font-weight:500; font-size:16px; color:#000;} .popup_body h2.first{margin-top:0;} .popup_body .pop_msg{text-align:center; font-weight:400; font-size:15px; color:#000;} .popup_body .pop_msg strong{font-weight:500; font-size:14px; color:#ff6c6c;} .popup_body .pop_msg_sub{text-align:center; margin-top:5px; color:#666;} .popup_body .guide_msg{margin-bottom:15px; text-align:center; font-weight:400; font-size:14px; color:#000;} .popup_body .radio_area{margin-bottom:15px; padding:20px; border:1px solid #000; text-align:center;} .popup_body .form_area{margin-bottom:20px; padding:20px; text-align:center; font-size:0; line-height:0; background:#f7f7f7;} .popup_body .form_area > div{margin-top:5px;} .popup_body .form_area > div:first-child{margin-top:0;} .popup_body .form_area label{margin:0 15px 0 10px; vertical-align:middle; font-weight:400; line-height:40px; font-size:14px; color:#000;} .popup_body .form_area label:first-child{margin-left:0;} .popup_body .use_btn{display:inline-block; margin-top:20px; text-align:center; width:150px; height:40px; line-height:40px; font-size:14px; color:#fff; background:#ff6c6c;} .popup_body .form_area input[type="text"] + select{margin-left:5px;} .popup_body .form_area select + input[type="text"]{margin-left:5px;} .popup_body .form_area .mark{display:inline-block; width:4%; text-align:center; vertical-align:middle; line-height:40px; font-size:14px;} .popup_body .form_area .desc{margin-top:15px; line-height:1.5; font-size:13px; color:#ff6c6c;} .popup_body .form_area .form_btn{font-size:14px;} /* 기간검색 */ .popup_body .form_area .term_list > ul{display:inline-block; vertical-align:middle;} .popup_body .form_area .term_list li{display:inline-block; margin-left:5px;} .popup_body .form_area .term_list li:first-child{margin-left:0;} .popup_body .form_area .term_list li a{display:inline-block; text-align:center; width:90px; height:40px; line-height:40px; font-size:14px; color:#555; background:#eee; border:1px solid #bbb;} .popup_body .form_area .term_list li:hover a{color:#000; background:#fff; border:1px solid #000;} .popup_foot{text-align:center; font-size:0; line-height:0; border-top:1px solid #999;} .popup_foot button{display:block; text-align:center; width:100%; height:50px; line-height:50px; font-weight:500; font-size:15px; color:#000;} .popup_foot button + button{width:50%;} .popup_foot button.good{color:#ff6c6c;} .popup_foot button.normal{color:#000;} .popup_foot button.bad{color:#888;} /* ------------- popup form ------------- */ .table_pop_form{margin:0 auto; width:470px;} .table_pop_form tr:first-child th, .table_pop_form tr:first-child td{padding-top:0;} .table_pop_form th{padding-top:5px; text-align:left; font-size:14px; line-height:1; color:#000;} .table_pop_form td{padding-top:5px; text-align:left; font-size:14px;} .table_pop_form + .form_btn{margin:5px auto 0; width:470px;} /* ------------- popup paging ------------- */ #popup .paging{margin-top:50px;} #popup .paging a{padding:0 3px; font-size:20px; line-height:15px;} #popup .paging .pre, #popup .paging .next, #popup .paging .first, #popup .paging .last{width:15px; height:15px;} #popup .paging .pre:after, #popup .paging .next:after, #popup .paging .first:after, #popup .paging .last:after{width:15px; height:15px;} /* ------------- middle btn areapop ------------- */ .middle_btn_area_pop{margin:30px -3px 0; text-align:center; font-size:0; line-height:0;} .middle_btn_area_pop a, .middle_btn_area_pop button{display:inline-block; margin:0 3px; text-align:center; vertical-align:middle; width:168px; height:50px; font-weight:500; line-height:48px; font-size:15px;} .middle_btn_area_pop img{margin:-5px 0 0 8px;} .middle_btn_area_pop .good{color:#fff; background:#000;} .middle_btn_area_pop .normal{color:#000; border:1px solid #000;} .middle_btn_area_pop .bad{color:#555; background:#eee; border:1px solid #bbb;} /* ------------- popup table - col ------------- */ .table_pop_col{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_pop_col th{padding:10px 0; text-align:center; font-weight:500; font-size:14px; word-break:keep-all; color:#000; border-top:1px solid #ddd;} .table_pop_col td{padding:10px; text-align:center; font-weight:400; font-size:14px; word-break:keep-all; color:#555; border-top:1px solid #ddd;} .table_pop_col thead th, .table_pop_col thead td{border-top:0;} .table_pop_col .no_data{padding:30px 10px; color:#888;} .table_pop_col + .desc{margin-top:10px; text-align:left; line-height:1.5; font-size:13px; color:#ff6c6c;} /* 아이콘 버튼 */ .table_pop_col .btn_delete img{margin:-2px 0 0 5px;} /* 상품 이미지(td에 이미지만) */ .table_pop_col .img_box .img_frame{position:relative; margin:0 auto; width:50px; height:50px; overflow:hidden;} .table_pop_col .img_box .img_frame img{width:50px; height:50px;} /* 상품정보 */ .table_pop_col .info_box{text-align:left;} .table_pop_col .info_box .code{font-size:13px; color:#888;} /* 상품 이미지(td에 다른 정보와 함께) */ .table_pop_col .info_box .img_area{position:relative; float:left; vertical-align:middle; width:50px; height:50px; overflow:hidden;} .table_pop_col .info_box .img_area img{width:50px; height:50px;} /* 상품정보(td에 다른 정보와 함께) */ .table_pop_col .info_box .info_area{float:left; vertical-align:middle; padding-left:20px; width:calc(100% - 50px);} /* 제목(td에 다른 정보와 함께) */ .table_pop_col .info_box .tit, .table_pop_col .info_box .tit a{vertical-align:middle; line-height:1.5; font-size:14px; font-weight:500; color:#000;} /* 옵션 리스트 */ .table_pop_col .info_box .option_list{margin-top:8px;} .table_pop_col .info_box .option_list li{line-height:1.6; font-weight:300; font-size:13px; color:#555;} .table_pop_col .info_box .option_list .amount:before{content:""; display:inline-block; margin:0 5px; width:1px; height:9px; background:#999;} .table_pop_col .info_box .option_list .small_btn{margin:8px 0 0 0;} /* 가격 대체 문구 */ .table_pop_col .item_price_no{margin-top:13px; min-height:32px; font-size:12px; font-weight:400; line-height:1; color:#555;} /* 상품 가격 */ .table_pop_col .price_selling + .price_member{margin-top:5px;} .table_pop_col .item_price{font-size:0; line-height:0;} .table_pop_col .item_price dt{display:inline-block; vertical-align:middle; margin-top:3px; margin-right:5px; font-size:12px; font-weight:400; line-height:1; color:#555;} .table_pop_col .item_price dd{display:inline-block; vertical-align:middle; font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; line-height:1;} .table_pop_col .price_selling dd{text-decoration:line-through; font-size:14px; font-weight:400; color:#999;} .table_pop_col .price_member dd{letter-spacing:-0.5px; font-size:20px; font-weight:500; color:#ff6c6c;} .table_pop_col .price_selling .unit{font-size:12px; font-weight:300;} .table_pop_col .price_member .unit{font-size:15px; font-weight:400;} /* 할인 비율 */ .table_pop_col .discount_ratio{display:inline-block; margin-left:5px; padding:0 5px; height:20px; vertical-align:middle; letter-spacing:0; font-weight:500; font-size:13px; line-height:18px; border:1px solid #ffb5b5; border-radius:2px;} .table_pop_col .discount_ratio .percent{font-size:11px;} /* -------------popup table - row ------------- */ .table_pop_row{width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_pop_row + .table_pop_row{margin-top:20px;} .table_pop_row th{padding:10px; text-align:left; vertical-align:middle; font-weight:500; font-size:14px; word-break:keep-all; color:#000; border-top:1px solid #ddd;} .table_pop_row td{padding:10px; text-align:left; vertical-align:middle; font-weight:400; font-size:14px; word-break:keep-all; color:#555; border-top:1px solid #ddd;} /* ------------- 가격 ------------- */ .table_pop_row .price_box{font-size:0; line-height:0;} .table_pop_row .price_box{font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; font-weight:500;} .table_pop_row .price_box .unit{font-size:14px; font-weight:400;} /* 가격 대체 문구 */ .table_pop_row .price_no{color:#ff6c6c;} /* 판매가 */ .table_pop_row .price_selling{font-size:15px; color:#000;} /* 할인된 판매가 */ .table_pop_row .price_selling.discount{text-decoration:line-through; color:#888;} /* 즉시 할인가 */ .table_pop_row .price_instant{margin-left:10px; font-weight:600; font-size:15px; color:#000;} /* 회원가 */ .table_pop_row .price_member{font-weight:600; font-size:18px; color:#ff6c6c;} /* 할인률 */ .table_pop_row .discount_ratio{display:inline-block; margin-left:5px; padding:0 5px; height:22px; vertical-align:middle; letter-spacing:0; font-weight:500; font-size:14px; line-height:20px; color:#ff6c6c; border:1px solid #ffb5b5; border-radius:2px;} .table_pop_row .discount_ratio .percent{font-size:13px} /* 옵션 */ .table_pop_row .option_box ul{margin-top:5px;} .table_pop_row .option_box ul:first-child{margin-top:0;} .table_pop_row .option_box li{margin-top:5px;} .table_pop_row .option_box li:first-child{margin-top:0;} .table_pop_row .option_box select{width:100%;} .table_pop_row .option_box select.off{color:#555; background:#f5f5f5 url('/skin/f_black/images/common/select_arrow.png') no-repeat right 10px center;} .table_pop_row .option_box input[type="text"]{width:100%;} /* ------------- 팝업 파일업로드 ------------- */ .popup_upload2_wrap{text-align:center;} #popup.file_upload{font-family:'NotoSansKR','Malgun Gothic','Dotum',sans-serif;} #popup.file_upload .popup_head{margin-top:0;} #popup.file_upload table caption{display:none;} #popup.file_upload .file_upload_btn{display:block; margin:5px 0 0; text-align:center; vertical-align:middle; width:100%; height:40px; font-weight:500; line-height:40px; font-weight:400; font-size:15px; color:#fff; background:#5c606f; border-radius:5px;} #popup.file_upload .file_upload_btn + .desc{text-align:left; margin:5px 0 0 0; font-size:13px; color:#ff6c6c;} /* ------------- 상품 확대보기 ------------- */ .popop_goods_bigimg{padding:20px; width:742px;} .popop_goods_bigimg .img_frame{position:relative; overflow:hidden; width:702px; height:702px; border:1px solid #eee; cursor:pointer;} .popop_goods_bigimg .img_frame img{width:700px; height:700px;} .popop_goods_bigimg .thumb_list{margin-top:6px; overflow:hidden;} .popop_goods_bigimg .thumb_list ul{margin:-3px;} .popop_goods_bigimg .thumb_list ul:after{content:""; display:block; clear:both;} .popop_goods_bigimg .thumb_list li{position:relative; float:left; overflow:hidden; margin:3px; width:95px; height:95px; border:1px solid #eee; cursor:pointer;} .popop_goods_bigimg .thumb_list li.on{border-color:#000;} .popop_goods_bigimg .thumb_list li img{width:93px; height:93px;} /* ------------- 상품 옵션 수정 ------------- */ #popup .option_selected_wrap{margin-top:10px; padding:20px; text-align:right; background:#f7f7f7;} #popup .selected_options_panel > li, #popup .selected_additional_options_panel > li{margin-top:15px;} #popup .selected_options_panel > li:first-child{margin-top:0;} /* 옵션명 */ #popup .option_selected_wrap .option_tit{display:block; margin-bottom:10px; width:100%; text-align:left; font-size:13px; color:#000;} #popup .option_selected_wrap .option_tit li{font-size:13px;} #popup .option_selected_wrap .option_tit.hide{display:none;} /* 옵션 수량 */ #popup .option_selected_wrap .option_amount{float:left; display:inline-block; vertical-align:middle;} /* 옵션 가격 */ #popup .option_selected_wrap .option_price{display:inline-block; vertical-align:middle;} #popup .option_selected_wrap .option_delete{display:inline-block; vertical-align:middle;} /* 옵션 텍스트 */ #popup .option_txt{padding:10px; font-size:13px;} /* 옵션 미선택 */ #popup .option_selected_wrap .no_data{margin-top:0; padding:20px 0; text-align:center; color:#888;} /* 총 상품 금액 */ #popup .total_price{margin-top:20px; padding-top:10px; text-align:right; border-top:1px solid #eee;} #popup .total_price dt, #popup .total_price dd{display:inline-block; vertical-align:middle;} #popup .total_price dt{margin:2px 10px 0 0; font-weight:500; font-size:15px; color:#000;} #popup .total_price dd{font-family:'Raleway','NotoSansKR','Malgun Gothic','Dotum',sans-serif; line-height:1; letter-spacing:-1px; font-weight:600; font-size:25px; color:#ff6c6c;} #popup .total_price dd .unit{font-size:20px; font-weight:400;} /* ------------- 쿠폰 선택 팝업 ------------- */ /* 총 할인 금액 */ .coupon_total_wrap{margin-top:30px; padding:20px; border:2px solid #000;} .coupon_total_wrap table{width:100%;} .coupon_total_wrap th{padding:3px 0; text-align:right; color:#000;} .coupon_total_wrap td{text-align:right;} .coupon_total_wrap tbody tr:last-child th, .coupon_total_wrap tbody tr:last-child td{padding-bottom:15px;} .coupon_total_wrap tfoot th, .coupon_total_wrap tfoot td{padding:10px 0 0; border-top:1px dashed #bbb;} .coupon_total_wrap tfoot th{font-size:15px; font-weight:500;} .coupon_total_wrap tfoot td{font-size:20px; font-weight:600; color:#ff6c6c;} /* 팝업 내 선택 checkbox */ #buy_coupon_list input[type="checkbox"][name^="coupon_data_seq"]{display:inline-block; width:16px; height:16px; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; outline:none; box-shadow:none; background:url('/skin/f_black/images/common/checkbox.png') no-repeat center center;} #buy_coupon_list input[type="checkbox"][name^="coupon_data_seq"]:checked{background:url('/skin/f_black/images/common/checkbox_on.png') no-repeat center center;} /* ------------- 배송 수령 확인 ------------- */ .dlv_ok_box{padding:20px; border:1px solid #eee;} .pop_msg_sub + .dlv_ok_box{margin-top:20px;} .dlv_ok_box .form_area{margin:10px 0 0 0;} .dlv_ok_box dt{margin-bottom:3px; font-weight:500; font-size:15px; color:#000;} .dlv_ok_box li, .dlv_ok_box dd{position:relative; padding-left:10px; margin-top:8px; line-height:1.3;} .dlv_ok_box li:first-child, .dlv_ok_box dt + dd{margin-top:0;} .dlv_ok_box li:before, .dlv_ok_box dd:before{position:absolute; top:9px; left:0; content:""; display:inline-block; margin-right:5px; width:5px; height:1px; vertical-align:middle; background:#666;} .dlv_ok_box a{color:#ff6c6c;} /* ------------- 견적서 ------------- */ .popup_head_print{margin:30px 0 20px; width:100%; text-align:center; font-weight:700; font-size:24px; color:#000;} .table_pop_col.estimate th{padding:5px; font-size:12px; border-left:1px solid #aaa; border-top:1px solid #aaa;} .table_pop_col.estimate td{padding:5px 10px; font-size:12px; word-break:break-all; border-left:1px solid #aaa; border-top:1px solid #aaa;} .table_pop_col.estimate thead th:first-child, .table_pop_col.estimate tbody td:first-child{border-left:0;} .table_pop_col.estimate thead th, .table_pop_col.estimate thead td{border-top:0;} .table_pop_col.estimate .total{padding:10px; text-align:right; font-size:13px; color:#000;} .table_pop_col.estimate .total strong{font-weight:500; color:#d40000;} .table_pop_row.estimate th{padding:5px 10px; font-size:12px; border-color:#aaa;} .table_pop_row.estimate td{padding:5px 10px; font-size:12px; border-color:#aaa;} /* Blank Layout ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* layout */ #blankWrap{display:table; width:100%; height:100%;} #blankWrap .sub_tit + p{margin:-40px 0 50px; text-align:center;} /* ------------- 성인인증 로그인 ------------- */ #adultIntroLogin{display:table-cell; width:100%; height:100%; vertical-align:middle;} .auth_wrap_adult{margin-top:10px; padding:40px 30px; text-align:center; background:#f9f9f9;} .auth_wrap_adult p{font-size:14px;} .auth_wrap_adult strong{display:block; margin-bottom:5px; font-weight:500; color:#000;} .auth_wrap_adult button{margin-top:20px; width:100%; height:40px; text-align:center; vertical-align:middle; font-weight:400; line-height:40px; font-size:15px; color:#fff; background:#000;} .auth_wrap_adult button + button{margin-top:5px;} .adult_guide{margin-top:20px;} .adult_guide li{position:relative; padding-left:10px; margin-top:5px; font-size:13px;} .adult_guide li:first-child{margin-top:0;} .adult_guide li:after{position:absolute; top:8px; left:0; content:""; width:4px; height:4px; background:#555; border-radius:50px;} /* ------------- 인트로 로그인 ------------- */ #introLogin{display:table-cell; width:100%; height:100%; vertical-align:middle;} /* ------------- 인트로 ------------- */ #introWrap{display:table-cell; width:100%; height:100%; vertical-align:middle; background:url('/skin/f_black/images/common/intro.jpg') no-repeat center center/cover;} #introWrap .txt_area{text-align:center;} #introWrap .txt_area .big_msg{letter-spacing:-2px; line-height:1.2; font-weight:500; font-size:50px; color:#fff;} #introWrap .txt_area .small_msg{margin-top:20px; font-weight:300; font-size:18px; color:#fff;} #introWrap .txt_area > a{display:inline-block; margin-top:60px; width:240px; height:70px; text-align:center; line-height:70px; font-size:18px; font-weight:400; color:#fff; border:1px solid #fff;} /* ------------- 파킹 ------------- */ #parkingWrap{display:table-cell; width:100%; height:100%; vertical-align:middle; background:url('/skin/f_black/images/common/parking.jpg') no-repeat center center/cover;} #parkingWrap .txt_area{text-align:center;} #parkingWrap .txt_area .big_msg{letter-spacing:-2px; line-height:1.2; font-weight:500; font-size:50px; color:#fff;} #parkingWrap .txt_area .small_msg{margin-top:20px; font-weight:300; font-size:18px; color:#fff;} #buy_coupon_list td td input[type="radio"]{ display: revert; appearance: revert; } /* 1. 탭 메뉴 전체를 가로로 정렬 */ .item-tab { display: flex; /* 가로 정렬 */ list-style: none; /* 불렛 제거 */ padding: 0; margin: 0; border-bottom: 2px solid #ddd; /* 하단 구분선 */ } /* 2. 각 탭 항목의 너비 설정 */ .item-tab li { flex: 1; /* 모든 탭의 너비를 동일하게 배분 */ text-align: center; } /* 3. 버튼 디자인 (기본 상태) */ .item-tab li button { width: 100%; padding: 15px 0; background: #f9f9f9; border: 1px solid #ddd; border-bottom: none; /* 하단 선은 전체 테두리에 맞춤 */ cursor: pointer; font-size: 16px; color: #666; transition: 0.3s; } /* 4. 활성화된 탭 디자인 (class="on") */ .item-tab li button.on { background: #fff; /* 배경을 흰색으로 */ color: #000; /* 글자색 강조 */ font-weight: bold; /* 글자 두껍게 */ border-bottom: 2px solid #fff; /* 하단 선을 가려 탭이 연결된 느낌 부여 */ margin-bottom: -2px; /* 전체 테두리와 겹치게 조정 */ position: relative; z-index: 1; } /* 마우스를 올렸을 때 효과 */ .item-tab li button:hover { background: #eee; } /* id 선택자를 사용하여 특정 탭만 조절 */ #itemInfo05, #itemInfo06 { padding-top: 50px; }