/*======================================== ALL COMMON PART STYLE =========================================*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); :root { --h1size: 50px; --h2size: 40px; --h3size: 24px; --h4size: 20px; --h5size: 18px; --h6size: 16px; --h1height: 58px; --h2height: 48px; --h3height: 32px; --h4height: 28px; --h5height: 26px; --h6height: 26px; --bodyheight: 26px; --blue: #1494a9; --chalk: #f5f5f5; --green: #11b76b; --orange: #e86121; --yellow: #ffab10; --body: #f5f6f7; --heading: #212121; --primary: #11338c; --sub-heading: #565765; --green-chalk: #ddffd5; --green-dark: #072f17; --gray-chalk: #cccccc; --intro-bg: #f8fffa; --facebook: #3b5998; --linkedin: #0e76a8; --twitter: #00acee; --google: #E60023; --instagram: #F77737; --caution : #cd7c18; --sec : #6878a1; --graytxt :#a6a6a9; --primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); --primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1); --bs-gutter-x : 12px; --black : #222; --gray: #787878; --gray1: #999; --light: #a6a6a9; --red: #a02121; --red1: #b04847; --purple: #5c68b4; --text: #525252; --border: #e8e8e8; --hover : #2cad7f; --bodysize: 16px; --bodyheight : 1.3; --fsize2 : 18px; --fsize14 : 14px; --fsize16 : 16px; --fsize18 : 18px; --fsize20 : 20px; --fsize24 : 24px; --fsize26 : 26px; --fsize28 : 28px; --fsize30 : 30px; --fsize32 : 32px; --fsize34 : 34px; --fsize38 : 38px; --fsize40 : 40px; --fsize48 : 48px; --bfont: 'Roboto', 'Noto Sans KR', sans-serif; --awesome : 'Font Awesome 5 Free'; --awesome6 : 'Font Awesome 6 Free'; --monts : 'Montserrat', sans-serif; } * {margin: 0px; padding: 0px; outline: 0px; } html, body {scroll-behavior: smooth;} body {color: var(--text); background:#fff; font-size: var(--bodysize); font-family: var(--bfont); font-weight:400; line-height: var(--bodyheight); overflow-x: hidden;} img {vertical-align: middle;} a {text-decoration: none; display: inline-block; color:var(--text); white-space:wrap;} a:hover {text-decoration: none;} ul, ol { padding: 0px; list-style: none; } h1, h2, h3, h4, h5, h6, p, ol, ul, li, span, details-label new {margin-bottom: 0px;} p {white-space:wrap;} h1, h2, h3, h4, h5, h6 {font-weight: 500; color: var(--heading);} h1 { font-size: var(--h1size); line-height: var(--h1height); } h2 { font-size: var(--h2size); line-height: var(--h2height); letter-spacing: -0.3px; text-transform: capitalize; } h3 { font-size: var(--h3size); line-height: var(--h3height); } h4 { font-size: var(--h4size); line-height: var(--h4height); } h5 { font-size: var(--h5size); line-height: var(--h5height); } h6 { font-size: var(--h6size); line-height: var(--h6height); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size: 14px; color: var(--gray); text-transform: capitalize; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-size: 14px; color: var(--gray); text-transform: capitalize; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { font-size: 14px; color: var(--gray); text-transform: capitalize; } input::placeholder, textarea::placeholder { font-size: 14px; color: var(--gray); text-transform: capitalize; } input, button { border: none; outline: none; background: none; } button:focus { outline: none; } input[type="text"] {border:1px sold var(--border);} input[type=checkbox] {display: inline-block; width: 15px; height: 15px; border: 1px solid #ededed; border-radius: 3px; margin-top: -4px; vertical-align: middle;} select {border:1px solid #ddd;} @media (max-width: 991px) { .content-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .txt_b {font-weight:700;} .txt_caution {color:var(--caution);} .text_black {color:var(--black);} .font_normal {font-style:normal;} .text_linethrough {text-decoration:line-through;} .flex-row {display:flex; flex-flow:row wrap;} /*공통*/ .row-cols-12 > * {flex:0 0 100%; max-width:100%;} .ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .divide_line {height:1px; margin:10px 0; border-bottom:1px solid #ddd; font-size:0; line-height:0;} .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1320px; width:100%; margin:0 auto; padding-right: var(--bs-gutter-x); padding-left: var(--bs-gutter-x);} .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; color: #212529; text-align: left; background-color: #fff; border: 0; border-radius: 0; overflow-anchor: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease; } .accordion-button::after { flex-shrink: 0; margin-left: auto; content: "\f107"; font-family:var(--awesome); font-weight:900; background-size: 1.25rem; transition: transform .2s ease-in-out; } .accordion-button:not(.collapsed)::after { background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e); transform: rotate(-180deg); } .form-select { height:32px; padding: 0px 10px; letter-spacing: 0.3px; background-size: 12px 10px; text-transform: capitalize; color: var(--text); cursor: pointer; } .form-select:focus-within { -webkit-box-shadow: none; box-shadow: none; border-color:#666; } .form-check-input:focus { border-color: var(--primary); -webkit-box-shadow: none; box-shadow: none; } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-btn { width: 100%; height: 45px; font-size: 14px; font-weight: 400; line-height: 45px; border-radius: 6px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; color: var(--white); background: var(--black); } .form-input-group { position: relative; } .form-input-group:focus-within i { color: var(--primary); } .form-input-group input { padding: 0px 20px 2px 45px; } .form-input-group textarea { padding: 12px 20px 12px 45px; } .form-input-group i { position: absolute; top: 0px; left: 0px; width: 45px; height: 45px; font-size: 18px; line-height: 45px; border-radius: 50%; text-align: center; } .form-btn-group { width: 100%; height: 45px; font-size: 14px; font-weight: 500; line-height: 45px; border-radius: 6px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; color: var(--white); background: var(--primary); } .form-btn-group i { font-size: 15px; margin-right: 5px; /*display: inline-block;*/ } /*버튼*/ .btn {margin:2px; border: none; font-weight: 500; border-radius:0; text-transform: uppercase; padding: 14px 20px/*32px*/; line-height:1;} .btn:focus {-webkit-box-shadow: none !important; box-shadow: none !important;} .btn i {margin-right: 5px;} .btn-inline { color: var(--white); background: var(--black); } .btn-inline:hover { color: var(--black); background: var(--white); } .review-act-btn:hover { border:1px solid var(--black); } .btn-outline { color: var(--black); background: var(--white); border:1px solid var(--black); } .btn-outline:hover { color: var(--white); background: var(--black); } .btn_prime {background:var(--black); border:1px solid var(--black); color:var(--white);} .btn_prime:hover {background:var(--primary); color:var(--white); border:1px solid var(--primary);} .btn_round {border-radius:8px;} .btn_tab {margin:3px; background:#fff; border-radius: 50px; border: 1px solid #ddd; color:#666!important;} .btn_tab:hover {border:1px solid #333; color:var(--black)!important;} .btn_tab.active {border:1px solid #333; background:var(--black); color:#fff!important;} .btn_black {background:var(--black); color:#fff;} .btn_black:hover {background:#424242; color:#fff;} .btn_gray {background:#9f9f9f; color:#fff;} .btn_gray:hover {background:#ccc; color:#fff;} .tooltip_btn {position: relative; display: inline-block; } .tooltiptext { position: absolute; top:0; left: 50%;display:block; padding-top:20px; visibility:hidden; z-index: 1; transform: translateX(-50%);} .tooltiptext > div {width:100%; padding:10px; background:#fff; border:1px solid #333; font-size:var(--fsize14);} .tooltiptext .tit {font-weight:700; color:var(--black); font-size:var(--fisze18);} .tooltip_btn:hover .tooltiptext {visibility: visible;} /*모달*/ .modal-dialog { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } .modal-content {padding:20px; border: none; border-radius: 0px;} .modal-content .row {margin-left:0; margin-right:0;} .modal-content .head_tit {font-size: var(--fsize28); font-weight: 700;} .modal-content .guide {font-size: var(--fsize14); color: var(--black); margin-bottom: 20px;} .modal-content h3 {font-size: inherit; font-weight: 700; color: var(--black);} .modal-close { position: absolute; top: -15px; right: -15px; z-index: 1; width: 35px; height: 35px; font-size: 18px; line-height: 35px; border-radius: 50%; text-align: center; display: inline-block; background: var(--white); -webkit-box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .modal-close:hover { color: var(--white); background: var(--black); } .modal-form { width: 400px; padding: 30px; border-radius: 8px; background: var(--white); } /*테이블관련*/ .table-list { width: 100%; } thead tr { background: var(--black); } thead tr th { font-size: 17px; font-weight: 500; white-space: nowrap; text-align: center; text-transform: capitalize; padding: 8px 10px; color: var(--white); border-right: 1px solid var(--border); } thead tr th:first-child { } thead tr th:last-child { border-right: none; } tbody tr { border-bottom: 1px solid var(--border); } tbody tr td { padding: 12px 20px; text-align: center; border-right: 1px solid var(--border); } tbody tr td:last-child { border-right: none; } .table-name { white-space: nowrap; text-transform: capitalize; } .table-image img { width: auto; height: 100px; } .table-price h6 { white-space: nowrap; } .table-price h6 small { font-size: 13px; margin-left: 3px; color: var(--gray); font-family: sans-serif; } .table-desc p { width: 150px; font-size: 15px; text-align: left; } .table-desc p a { text-transform: capitalize; } .table-desc p a:hover { text-decoration: underline; } .table-vendor a { font-weight: 500; color: var(--heading); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .table-vendor a:hover { color: var(--primary); } .table-status h6 { text-transform: capitalize; } .table-status .stock-in { color: #999; } .table-status .stock-out { color: var(--orange); } .table-shop { width: 180px; } .table-shop .product-add { display: flex; justify-content: center; align-items: center; width: 100%; padding: 5px; background: #efefef; border-radius: 8px; color: var(--black); font-size: 14px;} .table-shop .product-add i {margin-right:5px; font-size:12px;} .table-shop .action-plus i, .table-shop .action-minus i {background: var(--white);} .table-action button i, .table-action a i { width: 35px; height: 35px; font-size: 16px; line-height: 35px; text-align: center; display: inline-block; border-radius: 5px; margin: 3px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .table-action .view i { color: var(--black); background: var(--white); } .table-action .view i:hover { color: var(--white); background: var(--black); } .table-action .wish i { color: var(--green); background: var(--white); } .table-action .wish.active i { color: var(--white); background: var(--green); } .table-action .trash i { color: #666; background: var(--white); } .table-action .trash i:hover { color: var(--white); background: #111; } .tb_bline {width:100%; border-top:1px solid var(--black);} .tb_bline th, .tb_bline td {padding:10px; text-align:left;} .tb_bline th {font-weight:500; color:var(--black);} #app {min-height: calc(100vh - 330px);} /*헤더*/ .header-part .alam, .header-part .cate-btn {display:none;} .header-part {position: sticky; top: 0; left: 0; background:#fff; z-index:100;} .header-part.active {border-bottom:1px solid var(--border);} .header-part.active .header-content {padding-bottom:15px;} .header-content {padding:30px 0px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .header-content .header-logo img {width:110px; margin-right:54px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;} .header-content .search_box {display:flex; flex-flow:row wrap; align-items:center; position: relative;} .header-content .search_box input {width:400px; height:40px; padding:5px 15px; border: 1px solid var(--border); border-radius:50px; -webkit-appearance: textfield;} .header-content .search_box input::placeholder {color:var(--light); font-weight:500;} .header-content .search_box input:focus {outline: 0; border-color:#646468; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);} .search_box input:focus + .search-ac {display:flex; flex-flow:row wrap;} .search-ac {display: none; position: absolute; top: 44px; left: 0; right: 0; z-index: 10; padding:15px; background:#fff; border: 1px solid var(--border); border-radius:8px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size:14px;} .search-ac:hover {display: block;} .search-ac li {display: block; width:100%;} .search-ac strong {color:var(--black); font-weight:700;} .search-ac a {display: block; position: relative; padding:5px 0; color: #808394; text-decoration: none;} .search-ac.search-ac.default {padding:0;} .search-ac.search-ac.default li:first-child {width:55%; padding:15px;} .search-ac.search-ac.default li:last-child {width:45%; padding:15px;} .search-ac.search-ac.default dt {display:flex; margin-bottom:10px; color:var(--black); font-siz:16px} .search-ac.search-ac.default dt span {margin-left:auto; color:var(--light); font-weight:400; font-size:12px;} .search-ac.search-ac.default dd {display:flex; align-items:center;} .search-ac.search-ac.default a {margin-right:10px;} .search-ac.search-ac.default .del {margin-left:auto; color:var(--light); font-size:12px; cursor:pointer;} .search-ac.search-ac.default li:last-child .num {margin-right:10px; font-weight:500; color:var(--black)} .header-content .search_box button {width:40px; height:40px; line-height:40px; text-align:center; margin-left:5px; color:#fff; background:var(--black); border-radius:50px;} .header-content .header_mem {margin-left:auto;} .header-content .header_mem a {color:#666;} .header-content .header_mem a > i {width:40px; height:40px; margin-right:6px; line-height:40px; text-align:center; background:#eff1f4; border-radius:50px;} .header-content .header_mem a span i {font-size:12px;} .header-content .header_mem .navbar-item {margin:0;} .header-content .header_mem .navbar-item > a {color:var(--black);} .header-content .header_mem .navbar-link {padding:0; color: var(--black); text-transform: capitalize; font-weight:400;} .header-content .header_mem .dropdown-position-list, .header-content .header_mem .dropdown:hover .dropdown-position-list {top:38px; right: 0; left: auto; z-index:100;} .header-content .header_mem .dropdown-position-list::before {display:none;} .header-content .header_mem .dropdown-position-list i {width:auto; height:auto; background:none; border-radius:0; line-height:1;} .header-content .header_mem .dropdown-arrow {padding-right:18px!important;} /*상단메뉴*/ .navbar-content {display:flex; margin-left:-20px;} .navbar-list {display:flex; align-items: center;} .navbar-link:hover {color: var(--primary);} .navbar-part {width: 100%; z-index: 2; background:#fff; border-bottom:1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;} .navbar-part .navbar-link {padding:28px 20px; color: var(--black); font-weight:700; font-size:var(--fsize2); text-transform: capitalize;} .navbar-part .navbar-link:hover, .navbar-part .navbar-link.active, .dropdown-megamenu:hover .navbar-link, .dropdown-megamenu:hover .dropdown-arrow::before {color:var(--hover);} .navbar-part .divide_v:after {display:inline-block; content:""; width:1px; height:18px; margin: -4px 0 0 30px; background: #ddd; vertical-align: middle;} .dropdown-megamenu {position: static; padding-right:25px;} .dropdown-megamenu:hover .megamenu {visibility: visible; opacity: 1; top:80px;} .megamenu {position: absolute; left:50%; width:100vw; padding: 30px; background:#fff; z-index: 2; -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); -webkit-transform: translateX(-50%); transform: translateX(-50%); visibility:hidden; opacity:0; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .megamenu-scroll {height: 380px; overflow-y: scroll;} .megamenu .row {padding:0 15px; font-size:14px;} .megamenu .cate {display:flex; justify-content:space-between; width:calc(100% - 401px);} .megamenu .cate_ban {padding-left:40px; border-left:1px solid var(--border);} .megamenu-wrap {width:160px; margin-right:30px;} .megamenu-wrap dt a {display:inline-block; margin-bottom:10px; color:var(--black); font-size:14px; font-weight:700;} .megamenu-wrap dd a {display:inline-block; padding:2px 0; color:var(--text); font-size:14px;} .megamenu-wrap dd a:hover {font-weight:500; color:var(--black);} .megamenu .cate_ban h3 {margin-bottom:10px; color:var(--black); font-size:14px; font-weight:700;} .megamenu .cate_ban .box_wrap {display:flex;} .megamenu .cate_ban .box {width:150px; margin-left:60px; font-size:14px;} .megamenu .cate_ban .box:first-child {margin-left:0;} .megamenu .cate_ban .img_box {position:relative; width:150px; height:0; padding-top:150px; margin-bottom:10px;} .megamenu .cate_ban .img_box img {position:absolute; top:0; left:0; width:100%; height:100%;} .megamenu .cate_ban .name {color:var(--black); font-weight:500;} .megamenu .cate_ban .info {color:var(--gray);} .megamenu .cate_ban .price {color:var(--red); font-weight:700;} .megamenu .brand_area {display:block; } .megamenu .brand_search {position:relative; display:flex; flex-direction:column; margin-bottom:10px; padding-right:10px; color:var(--black);} .megamenu .brand_search > div {font-weight:700;} .megamenu .brand_index {display:flex; align-items:center; flex-flow:row wrap; background:#f6f6f6;} .megamenu .brand_index li:not(.brand_best) {display:flex; align-items:center; justify-content:center; padding:5px 8px; font-weight:500;} .megamenu .brand_index li:not(.brand_best):hover {background:#f1f1f1; font-weight:700; color:var(--black);} .megamenu .brand_index li.active {display:flex; align-items:center; justify-content:center; margin-right:5px; padding:5px 10px; background:var(--black); border-radius:50px; font-weight:500; color:#fff; font-size:12px; line-height:1;} /*.megamenu .brand_best:hover {background:var(--black);}*/ .megamenu .search_box {display: flex; flex-flow:row wrap; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ddd;} .megamenu .search_box input {width: 100%;max-width: 500px; height:32px; padding:5px 10px; border:1px solid #ddd; border-radius:50px;} .megamenu .search_box button {border-radius: 50px; background: var(--black); height: 30px; padding: 5px 15px; color: #fff; margin-left: 3px; font-size: 12px;} .megamenu .search_box .btn {height: 30px; margin:0 5px; padding:5px 15px; background:#f1f1f1; border:none; border-radius:50px; font-size:12px; font-weight:400; line-height: 21px;} .megamenu .search_box .cls {height:30px; width:30px; line-height:29px; background:#fff; border:1px solid var(--black); border-radius:50px; text-align:center; color:var(--black);} .megamenu .brand_index li {cursor:pointer;} .megamenu .brand_list ul {display:flex; flex-flow:row wrap; height:300px; margin-left:-10px; overflow-y:scroll;} .megamenu .brand_list li {display:flex; width:25%; padding:10px;} .megamenu .brand_list li a {color:var(--text);} .megamenu .brand_list li a:hover {font-weight:500; color:var(--black);} .megamenu .brand_list li i {margin-right:5px;} .cate_b .megamenu .cate {width: calc(100% - 212px);} .cate_b .cate_ban .box_wrap {flex-flow:column nowrap; align-items:center;} .cate_b .cate_ban .box {margin:10px!important;} .header-navbar-fixed.active .dropdown-megamenu:hover .megamenu { top: 62px; } .navbar-part.active {display:none; position: -webkit-sticky; position: sticky; top:91px; left: 0px; width: 100%; z-index:2; background: var(--white); -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;} .navbar-part.active .navbar-item > .navbar-link {padding: 15px 0px;} /*지워도 됨 .header-part.active .header-content { padding:5px 0px; } .header-part.active .header-widget:hover i { background: var(--primary); } .header-part.active .header-widget sup { border-color: var(--white); } .header-part.active .header-form { background: var(--white); border-color: var(--primary); } .header-part.active .header-form input, .header-part.active .header-form button i {height:40px;} */ .dropdown-arrow::before { color: var(--black); } .dropdown-arrow {position: relative; } .dropdown-arrow:hover::before {color: var(--hover);} .dropdown-arrow.root::before {content: "" !important;} .dropdown-link.root::before {content: "" !important;} .dropdown-arrow::before { position: absolute; content: "\f107"; font-weight: 900; font-family: "Font Awesome 5 Free"; top: 50%; right: 0px; font-size: 12px; line-height: 12px; color: var(--text); -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .dropdown-link { position: relative; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .dropdown-link:hover { color: var(--primary); background: var(--chalk); } .dropdown-link:hover::before { color: var(--primary); } .dropdown-link::before { padding: 15px 20px; position: absolute; top: 50%; right: 18px; content: "\f054"; font-size: 10px; font-weight: 900; font-family: "Font Awesome 5 Free"; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .dropdown-link.active {color: var(--black);} .dropdown-link.active::before {color: var(--black); -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg);} .mypage-sidebar .dropdown-link.active::before {-webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg);} .dropdown:hover .dropdown-position-list {visibility: visible; opacity: 1; top: 70px;} .dropdown-position-list {position: absolute; top: 100px; left: 0; z-index: 2; width: 200px; height: auto; visibility: hidden; opacity: 0; padding: 10px; background: var(--white); border: 1px solid var(--border); -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -ms-transition: all linear .1s; -o-transition: all linear .1s;} .dropdown-position-list li a { width: 100%; font-size: 15px; line-height: 18px; border-radius: 8px; padding:8px 15px; color: var(--text); background: var(--white); white-space: nowrap; text-transform: capitalize; } .dropdown-position-list li a:hover {color: var(--primary);} /*암막*/ .backdrop { position: fixed; top: 0px; left: 0px; z-index:190; width: 1000%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; } .backtop { position: fixed; right: 20px; bottom: 20px; z-index: 2; width: 48px; height: 48px; font-size: 15px; color: var(--white); line-height: 48px; text-align: center; display: none; border-radius: 50%; background: var(--black); -webkit-animation: mahmud 2s infinite; animation: mahmud 2s infinite; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .backtop:hover { color: var(--white); } @-webkit-keyframes mahmud { 0% { margin-bottom: 0px; } 50% { margin-bottom: 15px; } } @keyframes mahmud { 0% { margin-bottom: 0px; } 50% { margin-bottom: 15px; } } .inner-section {margin-bottom:0;} /*장바구니 슬라이드*/ .cart-sidebar { position: fixed; top: 0px; right: -450px; width: 400px; height: 100vh; z-index:200; background: var(--white); -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15); box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .cart-sidebar.active { right: 0px; } .cart-header { padding: 18px 25px; text-align: center; position: relative; border-bottom: 1px solid var(--border); } .cart-total { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cart-total i { font-size: 20px; margin-right: 8px; color: var(--black); } .cart-total span { font-weight: 500; color: var(--black); text-transform: capitalize; } .cart-close { position: absolute; top: 50%; left: -18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cart-close i { width: 35px; height: 35px; font-size: 18px; line-height: 35px; border-radius: 50%; text-align: center; display: inline-block; color: var(--text); background: var(--white); text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .cart-close i:hover { color: var(--white); background: var(--primary); } .cart-list { height: 100%; padding: 0px 15px; max-height: calc(100vh - 210px); overflow-y: scroll; } .cart-item { padding: 15px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-bottom: 1px solid var(--border); } .cart-item:hover .cart-media button { -webkit-transform: scale(1); transform: scale(1); } .cart-item:last-child { border-bottom: none; } .cart-media { position: relative; margin-right: 25px; } .cart-media a img { width: 100px; border-radius: 8px; } .cart-media button { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 8px; background: rgba(0, 0, 0, 0.2); -webkit-transform: scale(0); transform: scale(0); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .cart-media button i { width: 32px; height: 32px; font-size: 18px; line-height: 32px; text-align: center; border-radius: 5px; display: inline-block; color: var(--red); background: rgba(255, 255, 255, 0.9); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .cart-media button i:hover { color: var(--white); background: var(--red); } .cart-info-group { width: 100%; } .cart-info { margin-bottom: 13px; } .cart-info h6 { font-weight: 400; text-transform: capitalize; } .cart-info h6 a { color: var(--heading); } .cart-info p { font-size: 14px; } .cart-action-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cart-action-group .product-action { display: -webkit-box; display: -ms-flexbox; display: flex; } .cart-action-group .product-action button i { width: 30px; height: 30px; font-size: 12px; line-height: 30px; border-radius: 5px; } .cart-action-group .product-action input { width: 45px; height: 30px; font-size: 14px; border-radius: 5px; color: var(--primary); background: var(--chalk); } .cart-action-group h6 { font-weight: 500; color: var(--primary); } .cart-footer { padding: 20px 15px 0px; text-align: center; -webkit-box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08); } /*카테고리 슬라이드*/ .category-sidebar { position: fixed; top: 0px; left: -320px; width: 280px; height: 100vh; z-index:200; background: var(--white); -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15); box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .category-sidebar.active { left: 0px; } .category-header { padding: 15px 18px; position: relative; border-bottom: 1px solid var(--border); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .category-title { color: var(--primary); text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .category-title i { margin-right: 8px; } .category-close { position: absolute; top: 50%; right: -18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .category-close i { width: 35px; height: 35px; font-size: 18px; line-height: 35px; border-radius: 50%; text-align: center; display: inline-block; color: var(--text); background: var(--white); text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .category-close i:hover { color: var(--white); background: var(--primary); } .category-list { width: 100%; padding: 0px 15px; overflow-y: scroll; height: calc(100vh - 130px); } .category-item { width: 100%; border-bottom: 1px solid var(--border); } .category-link { font-size: 16px; font-weight: 400; padding: 12px 15px; color: var(--text); text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .category-link i { font-size: 25px; margin-right: 15px; display: inline-block; } .category-footer { text-align: center; margin-top: 20px; } .category-footer p { font-size: 14px; color: var(--gray); } .category-footer p a { color: var(--primary); } .category-sidebar .dropdown-list {display:none;} .category-sidebar .category-link {font-weight:700;} .dropdown-list { display: none; padding: 0px 20px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .dropdown-list li a { width: 100%; font-size: 15px; line-height: 18px; border-radius: 8px; padding: 10px 15px 10px 35px; color: var(--text); background: var(--white); position: relative; white-space: nowrap; text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .dropdown-list li a:hover { color: var(--primary); background: var(--chalk); } .dropdown-list li a::before { position: absolute; top: 50%; left: 15px; content: "\f068"; font-size: 10px; font-weight: 900; font-family: "Font Awesome 5 Free"; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dropdown:hover .navbar-position-list { top: 30px !important; } .navbar-position-list { top: 60px !important; z-index: 1000 !important; } .navbar-position-list li { margin: 0 !important; } .dropdown-position-list::before { position: absolute; content: ""; z-index: -1; top: -7px; left: 12px; width: 12px; height: 12px; border-radius: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--white); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .dropdown-submenu .dropdown-arrow { display: flex; align-items: center; padding:8px 15px!important; } .dropdown-submenu .dropdown-arrow::before {transform: rotate(-90deg); top: 30%;} .dropdown-submenu {position:relative;} .dropdown-submenu .dropdown-position-list {top:0!important; left: calc(100% + 15px); visibility:hidden!important;} .dropdown-submenu:hover .dropdown-position-list {left: calc(100% + 5px); visibility: visible!important; opacity: 1;} .dropdown-submenu .dropdown-position-list::before {top:15px;left:-8px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} /*사이드바*/ .nav-sidebar, .mypage-sidebar { position: fixed; top: 0px; left: -320px; width: 280px; height: 100%; padding: 0px; z-index: 200; background: var(--white); -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15); box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .nav-sidebar.active, .mypage-sidebar.active {left: 0px;} .mypage-sidebar .header-cart {display:block;} .sidebar .nav-list li ul li a, .nav-sidebar .nav-list li ul li a {padding:10px 20px;} /*.nav-sidebar .nav-list li > ul a.active {background:#fff;}*/ .sidebar .nav-list li ul ul li, .nav-sidebar .nav-list li ul ul li {padding-left:20px;} .sidebar .dropdown-list, .nav-sidebar .dropdown-list {padding:0;} .sidebar .nav-list li, .nav-sidebar .nav-list li {position:relative;} .sidebar .nav_arrow, .nav-sidebar .nav_arrow {position:absolute; top:24px; right:0; z-index:50;} .sidebar .nav_arrow.active~a, .nav-sidebar .nav_arrow.active~a {color: var(--primary); background: var(--green-chalk);} .sidebar .nav-link::before, .nav-sidebar .nav-link::before {display:none;} .sidebar .dropdown-link:hover, .nav-sidebar .dropdown-link:hover {} .nav-link { width: 100%; font-weight: 500; padding: 12px 15px; color: var(--black); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .nav-link:hover {background: #f1f1f1;} .nav-header { padding: 15px 0px; position: relative; text-align: center; border-bottom: 1px solid var(--border); } .nav-header a img { width: auto; height: 40px; } .nav-close { position: absolute; top: 50%; right: -18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .nav-close i { width: 35px; height: 35px; font-size: 18px; line-height: 35px; border-radius: 50%; text-align: center; display: inline-block; color: var(--text); background: var(--white); text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .nav-close i:hover { color: var(--white); background: var(--primary); } .nav-content {overflow-y: scroll; max-height: calc(100vh - 100px);} .nav-btn { width: 100%; padding: 20px 0px; margin-bottom: 20px; text-align: center; background: var(--chalk); } .nav-btn .btn { display:block; width:90%; margin: 10px auto; font-size: 14px; padding: 15px 25px; letter-spacing: 0.3px; border:2px solid var(--black); } .nav-btn .btn i { font-size: 14px; } .nav-profile { width: 100%; text-align: center; padding: 18px 0px 0px; } .nav-user { margin-bottom: 10px; border-radius: 50%; border: 2px solid var(--primary); } .nav-user img { width: 85px; height: 85px; border-radius: 50%; border: 2px solid var(--white); } .nav-name { margin-bottom: 18px; text-transform: capitalize; } .nav-name a { color: var(--heading); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .nav-name a:hover { color: var(--primary); } .nav-select-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .nav-select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 18px; padding-right: 18px; line-height: 20px; border-right: 1px solid var(--gray-chalk); } .nav-select:last-child { padding: 0px; margin: 0px; border: none; } .nav-select i { margin-right: 5px; } .nav-list { width: 100%; } .nav-list li { width: 100%; } .nav-link::before { right: 15px; } .nav-link i { font-size: 20px; margin-right: 12px; } .nav-link.active {background:#f1f1f1;} .nav-info-group { padding: 20px 0px; margin-top: 15px; margin-bottom: 25px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .nav-info { margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .nav-info:last-child { margin-bottom: 0px; } .nav-info i { font-size: 30px; margin-right: 15px; color: var(--primary); } .nav-info p small { font-size: 14px; line-height: 18px; display: block; text-align: left; text-transform: capitalize; } .nav-info p span { font-size: 16px; font-weight: 500; } .nav-footer { text-align: center; } .nav-footer p { font-size: 14px; color: var(--gray); } .nav-footer p a { color: var(--primary); } .collapse .nav-link {font-size:14px; color:#666;} /*메인 슬라이드*/ .visual_main {margin:0 auto; height:600px; margin-left:-22px;} .visual_main .row {align-items:center; width:78%/*960px*/; max-width:930px; height:100%; margin:0 auto;} .visual_main .swiper {height:100%;} .visual_main .swiper-slide {width:1320px; background:#e1e6f2;} .visual_main .swiper-slide:not(.swiper-slide-active) {opacity:0.3;} .visual_main .cont {margin-right:30px;} .visual_main .title {font-size:var(--fsize28); font-weight:700; color:var(--black);} .visual_main .desc {margin-top:3px; margin-bottom:24px; font-size:var(--fsize18); font-weight:500; color:#666666;} .visual_main .time {display:flex; align-items: center; margin-bottom:34px;} .visual_main .time > div {padding:0 10px; border:1px solid #878fa3; color:var(--black); font-size:var(--fsize48);} .visual_main .dday {margin-right:10px; font-weight:700; } .visual_main .dtime {font-weight:300;} .visual_main .name {font-size:var(--fsize20); color:var(--black); font-weight:500;} .visual_main .info {font-size:var(--fsize18); color:var(--black); } .visual_main .price {display:flex; align-items:center;} .visual_main .price span {display:inline-block; margin-right:10px; font-size:var(--fsize18); color:var(--gray1); text-decoration:line-through;} .visual_main .price strong {color:var(--red); font-size:var(--fsize32); font-weight:700;} .visual_main .slide_pager {position:absolute; display: flex; justify-content: flex-end; width:calc(100% / 1.48); max-width:1322px; bottom:0; left:50%; transform: translateX(-50%); z-index:5;} .visual_main .slide_pager .outer {display: flex; align-items: center; width: 156px; height: 45px; padding:5px 20px; background: rgba(0, 0, 0, 0.3);} .visual_main .swiper-pagination, .visual_main .swiper-button-prev, .visual_main .swiper-button-next {position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0; padding: 0; color: #fff;} .visual_main .swiper-button-prev:after, .visual_main .swiper-button-next:after {color:#fff; font-size:14px; font-weight:900;} .visual_main .swiper-pagination-total {opacity:0.6;} .visual_main .pic {margin-left:auto; width:46.87%/*450px*/;} .visual_main .pic .outer {position:relative; width:100%;} .visual_main .pic .img_box {position:relative; width:100%; height:0; padding-top:100%; border-radius:30px; overflow:hidden;} .visual_main .pic .img_box img {position:absolute; top:0; left:0; width:100%;} .visual_main .pic .tag {position:absolute; top:20px; right:20px; background:#d32e3e; display:flex; align-items:center; justify-content:center; width:100px; height:100px; border-radius:50px; color:#fff; font-weight:700; font-size:var(--fsize40); z-index:2} /*메인 중간 배너*/ .mid-banner {position:relative; width:100%; max-width:1320px; margin:0 auto; padding:100px 100px; overflow:hidden;} /*.mid-banner:before {position:absolute; top:0; left:-50%; content:""; width:calc(100% - 600px); height:100%; background:#fff; z-index:2 } .mid-banner:after {position:absolute; top:0; right:-50%; content:""; width:calc(100% - 600px); height:100%; background:#fff; z-index:2}*/ .mid-banner .swiper {position:static;} .mid-banner .swiper-slide {display: flex; flex-flow: column nowrap; align-items: center; color} .mid-banner .img_box {position:relative; width:130px; height:130px; margin-bottom:15px; border-radius:50%; overflow:hidden;} .mid-banner .img_box img {position:absolute; top:0; left:0; width:100%; } .mid-banner .swiper-button-prev, .mid-banner .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;} .mid-banner .swiper-button-prev:after, .mid-banner .swiper-button-next:after {font-size:var(--fsize16);} .mid-banner a {display:block; text-align:center; color:var(--black);} .mid-banner .swiper-pagination {bottom:70px;} .mid-banner .swiper-pagination-bullet {transition: all 0.2s;} .mid-banner .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius:3px;} /*메인 구매자 보호*/ .main_protection {background:#f8f8f8;} .main_protection.pc .cont {width:52%; height: 100%; padding: 80px 50px; padding-right: 0; border-left: 1px solid #e7e7e7;} .main_protection.pc .row {position:relative; width:100%; max-width:1320px; margin:0 auto;} .main_protection.pc h3 { margin-left:5px; font-size:var(--fsize34); color:var(--black); font-weight:700;} .main_protection.pc h3 strong {font-family:var(--monts); font-size:var(--fsize40); } .main_protection.pc ul {display:flex; flex-flow:row wrap; margin-left:-5px;} .main_protection.pc li {display:flex; align-items:center; width:calc(50% - 10px); height:65px; margin:5px; padding:10px 30px; background:#fff; border: 1px solid var(--border); border-radius:50px; color:var(--black); font-weight:500;} .main_protection.pc li > span {display:inline-block; margin-right:10px;} .main_protection.pc .cont > a {display: inline-block; margin: 20px 0 35px; margin-left: 5px; color: var(--gray);} .main_protection.pc .pic {position:absolute; top:0; right:0; height:100%; border-top-right-radius:30px; overflow: hidden;} .main_protection.mob {display:none;} /*메인 인기상품*/ .section-heading {text-align: center; margin-bottom:60px;} .section-heading h2 {font-family:var(--monts); font-weight:700; color:var(--black);} .section-heading span {display:inline-block; margin-top:10px; font-size:var(--fsize20); color:#666;} .product-card { width: 100%; overflow: hidden; position: relative; margin-bottom: 25px; background: var(--white); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; cursor:pointer; } .product-media:hover .product-widget, .product-widget.active {opacity: 1;} .product-media { position: relative; } .product-label { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 10px; left:10px; z-index:1; } .label-text {margin:2px; font-size:12px; font-weight:500; line-height:1; padding:3px 5px 2px; line-height: 13px; border-radius:3px; color: var(--white); text-align: center; text-transform: capitalize; } /*.label-text.sale {background: var(--red1);}*/ /*.label-text.new {background: var(--purple);}*/ .label-text.off { background: var(--black); } .label-text.new { background: var(--black); } .label-text.sale { background: var(--orange); } .product-wish { position: absolute; top:10px; right:10px; display:flex; justify-content:center; align-items:center; width:32px; height:32px; background:#fff; border-radius:50px; font-size:16px; color:var(--black); z-index:1; } .product-wish.active {color: var(--danger);} .product-wish:hover {color: var(--danger);} .product-widget { display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow:column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0px; left: 0px; width: 100%; height:100%; padding:20px; background:rgba(0, 0, 0, 0.5); opacity: 0; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .product-widget ul {display:flex; flex-flow:row wrap; justify-content:center; margin-top:40px;} .product-widget li {width:46px; height:46px; margin:1px; background:#fff; overflow:hidden;} .product-widget li img {width:100%;} .product-widget dl {margin-top:10px; margin-bottom:0;} .product-widget dt, .product-widget dd {text-align:center; font-size:14px; color:#fff; font-weight:500;} .product-content {display:flex; flex-direction:column; justify-content:space-between; margin-top:10px;} .product-content > a {width:100%;} .product-name {margin-bottom: 0; color:var(--black); font-weight:500; text-transform: capitalize;} .product-desc {font-weight:500; color:var(--gray); font-size:14px; line-height:1.2;} .product-tag {padding:1px 5px; border-radius:3px;} .product-tag.quick {align-self:flex-start; display:inline-block; margin-top:5px; background:#e0e9f6; color:#3e6ae9; font-size:12px;} .product-btm {margin-top:auto;} .product-price {margin-top:10px; margin-bottom:3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; color: var(--black); } .product-price strong {font-weight:799; color:var(--red);} .product-price strong small {font-size:var(--fsize16); font-weight: 400;} .product-status {color:#999; font-size:12px;} .product-content .time {display:flex; margin-top: 10px; color: var(--primary); font-weight: 500;} .product-content .dday {margin-right:8px;} .main_popular {padding:100px 15px; padding-top:120px;} .main_popular .swiper-slide {height:auto;} .main_popular .col {height:100%; margin-bottom:20px;} .main_popular .product-card {height:100%;} .main_popular .product-content {height:100%;} .main_popular .btn_wrap {justify-content:center;} .main_popular .btn_wrap button {display:flex; justify-content:center; align-items:center; width:100%; max-width:136px; height:50px; padding:10px 20px; border:1px solid #dbdbdb; border-radius:50px; color:var(--black);} .main_popular .btn_wrap button:hover {background:var(--black); color:#fff;} .see_option {display:none;} /*메인 중간 상품 배너*/ .banner_products .row {margin:0;} .banner_products .swiper-slide a {display:flex; justify-content:center; text-align:center; width:100%; overflow: hidden;} .banner_products .swiper-slide a img {display:block; height:100%;} .banner_products .swiper-button-prev, .banner_products .swiper-button-next {color:#fff; font-weight:300;} .banner_products .swiper-button-prev, .banner_products .swiper-rtl .swiper-button-next {left:40px;} .banner_products .swiper-button-next, .banner_products .swiper-rtl .swiper-button-prev {right:40px;} .banner_products .swiper-pagination-bullet {width:50px; height:3px; margin:0 1px!important; background:#fff; opacity:0.4; border-radius:0;} .banner_products .swiper-pagination-bullet-active {opacity:1;} /*메인 베스트 리뷰*/ .best_review {padding:80px 15px 120px; background:#f6f6f6;} .best_review a {display:block;} .best_review .swiper-container {position: relative; width: 100%; max-width:1320px; margin:0 auto; padding: 0 100px;} .best_review .swiper-button-prev, .best_review .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;} .best_review .swiper-button-prev:after, .best_review .swiper-button-next:after {font-size:var(--fsize16);} .best_review .swiper-button-prev {left: 0;} .best_review .swiper-button-next {right: 0;} .best_review .swiper-pagination {bottom:-54px;} .best_review .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;} .best_review .img_box {width:100%; background: #f6f6f6;} .best_review .img_box img {width:100%; mix-blend-mode: multiply;} .best_review .cont {position:relative; height:284px; margin-top:-50%; padding:30px; background:#fff; z-index:10;} .best_review .cont > div {width:100%;} .best_review .brand {color:var(--black); font-weight:500;} .best_review .name {color:var(--gray); font-size:14px;} .best_review .product-rating {justify-content:flex-start; margin:16px 0 20px;} .best_review .product-rating i {font-size: 18px; margin: 0px 1px;} .best_review .writer {display:flex; align-items:center; margin-bottom:5px; font-size:14px; color:#666;} .best_review .writer span:last-child {color:#999; font-size:14px;} .best_review .writer span:last-child:before {content:""; display:inline-block; width:1px; height:12px; margin:0 5px 0 8px; margin-top:4px; background:#ddd;} .best_review .comment {overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical;} /*메인 최근 본 상품*/ .recent {padding:100px 15px; padding-bottom:160px;} .recent_swiper {position: relative; width:100%; max-width:1320px; margin:0 auto; padding:0 20px;} .recent_swiper .swiper-button-prev, .recent_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;} .recent_swiper .swiper-button-prev:after, .recent_swiper .swiper-button-next:after {font-size:var(--fsize16);} .recent_swiper .swiper-button-prev {left: 0;} .recent_swiper .swiper-button-next {right: 0;} .recent_swiper .swiper-pagination {bottom:-54px;} .recent_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;} .recent_swiper .product-card {margin-bottom:0;} /*풋터*/ .footer-part > div {border-top:1px solid #ededed;} .ft_menu {display:flex; flex-flow:row wrap; align-items:center;} .ft_menu a {position:relative; display:inline-block; padding:20px 12px; color:var(--black); font-size:var(--fsize14);} .ft_menu a:first-child {margin-left:-12px;} .ft_menu a:after {content:""; position:absolute; top:21px; right:0; display:block; width:1px; height:14px; margin-left:12px; background:#ddd;} .ft_menu a:last-child:after {display:none;} .ft_cont .info_btn, .ft_cont .custom_btn {display:none;} .ft_cont .info_btn i.active, .ft_cont .custom_btn i.active {transform:translateY(-1px) rotate(180deg);} .ft_cont .ft_left {margin-right:30px;} .ft_cont .ft_left > a {display:inline-block; margin-top:26px; font-size: var(--fsize14); color:var(--black);} .ft_cont {padding:40px 0;} .ft_cont .container {display:flex; flex-flow:row wrap; align-items:stretch;} .ft_cont .ft_logo {display:inline-block; margin-bottom:20px;} .ft_cont .info, .ft_cont .copyright {font-size:var(--fsize14); color:var(--gray); line-height:1.8;} .ft_cont .ft_left > a {display:block; margin-top:10px;} .ft_cont .ft_right {display:flex; align-items:center; margin-left:auto; padding-left:50px; border-left:1px solid #ededed;} .ft_cont .custom h3 {font-size:var(--fsize16); font-weight:700; color:var(--black); line-height:1;} .ft_cont .custom .tel { font-size:var(--fsize40); font-weight:900; color:var(--black);} .ft_cont .custom .time {font-size:var(--fsize14); color:var(--gray);} /*모바일 메뉴*/ .mobile-menu { position: fixed; bottom:-3px; left: 0px; width: 100%; height:60px; z-index:300; background: var(--white); border-radius: 10px 10px 0px 0px; -webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: none; transition:all 0.2s; } .mobile-menu.active {bottom:-100px;} .mobile-menu a, .mobile-menu button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 80px; padding: 8px 0px; border-radius: 8px; position: relative; } .mobile-menu a:hover, .mobile-menu button:hover { background: var(--chalk); } .mobile-menu a:hover i, .mobile-menu button:hover i { color: var(--primary); } .mobile-menu a:hover span, .mobile-menu button:hover span { color: var(--primary); } .mobile-menu a i, .mobile-menu button i {font-size:20px; margin-bottom: 5px; color: var(--black);} .mobile-menu a span, .mobile-menu button span {font-size:12px; color: var(--black); text-transform: uppercase;} .mobile-menu a sup, .mobile-menu button sup { position: absolute; top: -5px; left: 75%; width: 24px; height: 24px; font-size: 12px; line-height: 20px; border-radius: 50%; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: var(--white); background: var(--primary); border: 2px solid var(--green-chalk); text-shadow: var(--primary-tshadow); } .mobile-menu a .fas fa-shopping-basket, .mobile-menu button .fas fa-shopping-basket { font-size: 18px; } /*서브*/ .single-banner { background-size: cover !important; margin-top:0; margin-bottom:0; padding: 100px 0px; padding-bottom:0; text-align: center; position: relative; z-index: 1; } .single-banner::before { position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 100%; /*background: -webkit-gradient(linear, right top, left top, from(rgba(6, 23, 56, 0.6)), to(rgba(17, 151, 68, 0.6))); background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(17, 151, 68, 0.6));*/ z-index: -1; } .single-banner h2 { font-size: 34px; color: var(--black); text-transform: uppercase; font-weight:700; } /*갤러리 리스트 .header-part, .navbar-part {opacity:0.3;}*/ .res_wrap {width:100%; overflow-x:auto;} .shop-part {margin-bottom:25px; margin-top:10px;} .shop-part .right {min-height:600px;} .shop-part .right .conts_top{position:sticky; top:86px; left: 0px; background: var(--white); z-index:1;} .shop-part .right .conts_top.active .col-lg-12 {padding:0;} .navbar-part.active .navbar-item > .navbar-link {padding: 15px 0px;} .shop-part .row-cols-3 .product-card {} .shop-part .pricing_box1 {flex:0 0 100%; max-width:100%; padding:50px 0; text-align:center;} .shop-part .product-desc {font-weight:400;} .shop-part .product-name a {width:100%;} .shop-part .product-price strong {font-weight:500; font-size:18px;} .shop-part .product-status {font-size:14px;} .bottom-paginate { padding-top: 25px; border-top: 1px solid var(--border); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content:center; } .bottom-paginate.justify-content-end {justify-content:center!important;} .page-info { font-weight: 400; color: var(--text); } .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 50% !important; border-bottom-left-radius: 50% !important; } .page-item:first-child .page-link, .page-item:last-child .page-link { display:flex; align-items:center; justify-content:center; border-radius: 50%; } .page-link {width:40px; height:40px; line-height:40px; padding: 0px; background: var(--white); border: none; border-radius:50px; text-align: center; font-weight: 400; color: var(--text);} .page-link button:focus {background: var(--white);} .page-link:hover {color: var(--white); background: var(--black);} .page-item .active {color: var(--white); background: var(--black);} .page-link:focus {-webkit-box-shadow: none; box-shadow: none;} .page-item.active .page-link {z-index: unset;} .page-item {margin-left: 10px;} .page-item.active .page-link {color: white !important; background:var(--black)!important;} .page-item.active .page-link:focus {justify-content: center;} .page-item.disabled .page-link {color: #999; pointer-events: none; cursor:pointer; background: var(--white);} .custom-pagination { display: flex; justify-content: center; margin-left: auto; } .custom-pagination-page { display: flex; justify-content: center; margin-left: auto; } .pagination-page.disabled .page-link { color: #999; pointer-events: none; cursor: auto; background-color: #fff; border-color: #eee; } .pagination-page.active .page-link { color: white !important; background: black !important; } .top-filter {position:sticky; top:0; left:0; z-index:100;} .top-filter .filter_result {display:flex; overflow-y: hidden; overflow-x: auto; margin-left:-3px; padding: 5px 0;} .top-filter .filter_result > div {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; flex-grow:0; height:36px; font-size:14px; line-height: 1;} .top-filter .filter_result .tag {margin:3px; padding:10px 15px; border-radius:50px; border:1px solid #ddd; color:#666;} .top-filter .filter_result .tag i {margin-left:5px; color:#666; font-size:12px;} .mob_filtershow {margin:3px; padding:10px 15px; border-radius:50px; background:var(--black); color:#fff;} .top-filter .short_wrap {display:flex; align-items: center; margin-bottom:20px; padding: 8px 3px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;} .top-filter .top_txt {color:var(--black);} .filter-short {display: flex; align-items: center; justify-content: center; margin-left:auto;} .top-filter .select_grid {display:none; margin-left:15px;} .top-filter .select_grid i {width:30px; height:30px; line-height:30px; text-align:center;} .top-filter .grid_1 {font-size:16px;} .filter-show { width: 125px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 50% !important; border-bottom-right-radius: 50% !important; } .filter-label { font-size: 14px; font-weight: 500; margin-right: 8px; white-space: nowrap; text-transform: uppercase; } .filter-select {height: 32px; background-color: transparent;} .filter-select:focus-within { border-color: #ced4da; } .filter-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .filter-action a i { width: 40px; height: 40px; font-size: 16px; line-height: 40px; border-radius: 50%; text-align: center; color: var(--text); background: transparent; } .filter-action a i:hover { color: var(--primary); } .filter-action .active i { color: var(--white); background: var(--primary); } .filter-action .active i:hover { color: var(--white); } .pagination-sm .page-link { padding: 0 !important; font-size: 16px !important; line-height: 40px !important; } .filter {position:sticky; top:86px; left:0; height:100%; text-align:left; overflow-y: scroll; max-height: 820px; } .filter::-webkit-scrollbar, #brand .accordion-body::-webkit-scrollbar {width: 6px;} .filter::-webkit-scrollbar-track, #brand .accordion-body::-webkit-scrollbar-track {background-color: transparent;} .filter::-webkit-scrollbar-thumb, #brand .accordion-body::-webkit-scrollbar-thumb {border-radius: 3px; background-color:#ddd;} .filter::-webkit-scrollbar-button, #brand .accordion-body::-webkit-scrollbar-thumb {width: 0; height: 0;} .filter .container {padding:0;} .filter .btn_cls {display:none; position:absolute; top:-15px; left:50%; width:40px; height:40px; line-height:40px; background: var(--white); border-radius:50px; text-align: center; font-size:16px; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;} .filter_header {position: relative; display:flex; flex-flow:row wrap; margin-bottom:34px; padding: 15px 2px; border-bottom: 1px solid var(--border);} .filter_header h3 {font-size:22px; font-weight:400; color:var(--black);} .filter_header .see_result {display:none; width: 100%; margin: 10px 0 0; padding:5px 10px; background:#ededed; color:#666; border-radius:5px; border:1px solid #ededed; font-size:var(--fsize14);} .filter_header .reload {margin-left:auto; font-size:14px; color:var(--gray);} .filter_header .nav-close {display:none;} .filter_cont .accordion-item {padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);} .filter_cont .accordion-button {padding:0;} .filter_cont h2 {line-height:1.3; font-size:var(--fsize16); } .filter_cont h2 button {font-size:inherit; color:var(--black); font-weight:700;} .filter_cont .accordion-body {margin-top:16px; font-size:14px;} .filter_cont .accordion-body li {position:relative; padding:6px 0; padding-left:20px;} .filter_cont .category-link {padding:3px 0; font-size:inherit;} .filter_cont #category .accordion-body a {display:block; width:100%;} .filter_cont #category .accordion-body > li:not(:first-child) {padding-left:0;} .filter_cont #category .accordion-body li ul li {padding-left:0;} .filter_cont #category .accordion-body li ul li a:before {color:#ccc;} .filter_cont #category .category-link {padding-left:0; padding-right:0;} .filter_cont #category .dropdown-link.active {font-weight:500;} .filter_cont #category .dropdown-link.active + ul {padding-left:10px;} .filter_cont #category .dropdown-link.active + ul ul {padding-left:0;} .filter_cont #category .dropdown-link.active + ul li a {font-weight:400;} .filter_cont #category .dropdown-link::before {content: "\f107"; font-family: var(--awesome); right:0; padding: 0 7px; font-size: 14px; color: var(--gray);} .filter_cont #category .dropdown-link.active::before {transform: translateY(-50%) rotate(180deg);} .filter_cont #category .dropdown-link:hover {background:none;} .filter_cont #category .dropdown-list {padding:0;} .filter_cont #category .dropdown-list li {padding-left:0;} .filter_cont .accordion-body li span {position:absolute; top:5px; left:0;} .filter_cont input[type=checkbox] {opacity:0.6;} .filter_cont .accordion-button::after {margin-right:5px;} .filter_cont #brand {} .filter_cont #brand .accordion-body {height:500px; overflow-y:auto;} .filter_cont .brand_search > div {display:flex; margin-top:12px; padding:5px; border:1px solid var(--border);} .filter_cont .brand_search input {width: calc(100% - 24px);} .filter_cont .brand_search .btn_clear {width:24px;} .product-image {display:block; position:relative; width: 100%; height: 0; padding-top: 100%;} .product-image img {position: absolute; top: 50%; left: 0; transform: translateY(-50%);width: 100%;} .product-image:after { content:' '; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0,.03); } /*상품상세*/ .shop.detail {margin-bottom:25px; margin-top:30px;} .shop.detail .container .row {align-items:flex-start;} .shop.detail .container .poducts_summery {position:relative; padding-left:30px;} .details-gallery {position: relative;} .details-gallery .slick-slide {z-index:0!important;} .shop.detail .poducts_summery .share i {position:absolute; top:10px; right:0; display:flex; justify-content:center; align-items:center; width:35px; height:35px; border:1px solid #ddd; border-radius:50px;} .details-content {background: var(--white);} .details-content > div {padding:0 3px;} .details-content > div dl:not(:last-of-type) {margin-bottom: 5px;} .details-content dl {display:flex; flex-flow:row wrap; } .details-content dt {width:100%; max-width:100px; color:#666; font-weight:400;} .details-content dd {color:var(--black)} .details-content .btn_card {margin-left:16px; text-decoration:underline; color:#4742be; font-size:var(--fsize14); cursor:pointer;} .details-content .tooltiptext {width:250px;} .details-name {padding-right:40px; font-size: 26px; line-height: 34px; font-weight:700; margin-top:10px; text-transform: capitalize;} .details-name a {color: var(--black); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;} .details-sub-name {margin-top:10px; margin-bottom:30px; color:var(--black); font-size:inherit;} .details-sub-name .share i {display:flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--black); border-radius:50px; font-size:14px;} .details-sub-name .share:hover i {border:1px solid #0056b3;} .shop.detail .benefits_wrap {padding:0 3px;} .shop.detail .price_wrap {display:flex; align-items:center; padding: 10px 0;} .shop.detail .price_wrap small {font-size:var(--fsize16);} .shop.detail .dbr-discount {margin-right:10px; font-size:var(--fsize28); color:#e56167; font-weight:700;} .shop.detail .dbr-sales-price {margin-right:14px; font-size:var(--fsize28); color:var(--black); font-weight:700;} .shop.detail .dbr-origial-price {margin-top: 5px; color:#999; } .shop.detail .dbr-origial-price > span {text-decoration:line-through;} .shop.detail .buy-option-area .option_tit {display:flex; flex-flow:row wrap; align-items:center; margin-bottom:20px; } .shop.detail .buy-option-area .option_tit h4 {font-size: var(--fsize16); font-weight: 500;} .shop.detail .buy-option-area .option_tit button {margin-left:16px; border: 1px solid var(--black); padding: 2px 16px; font-size:var(--fsize14);} #size_chart .modal-title {font-weight: 700; font-size: 20px;} #size_chart .modal-title p {margin-top:16px; font-size: 14px; font-weight: 400; color: #787878;} #size_chart .nav-tabs {margin-bottom:0;} #size_chart .tab-link {font-size:14px;} #size_chart .tab-pane {overflow-x: auto;} #size_chart .btn-close {font-size:20px;} .shop.detail .buy-option-area select {width:100%; padding:10px;} .shop.detail .buy-option-area select option {font-size:14px;} .shop.detail .buy_amount {flex-flow:row wrap; padding:15px 0; border-bottom: 1px solid #ededed;} .shop.detail .buy_amount .col-7 { -ms-flex: 0 0 54%; flex: 0 0 54%; max-width: 54%; } .product-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-action button i { width:32px; height:32px; font-size:10px; line-height:32px; border-radius: 6px; text-align: center; display: inline-block; color: var(--text); background: var(--chalk); text-shadow: var(--primary-tshadow); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .product-action button i:hover { color: var(--white); background: var(--black); } .product-action .icofont-minus {font-size:12px;} .product-action input { width: 50px; margin: 0px 5px; padding: 6px 0px; border-radius: 6px; text-align: center; color: var(--black); /*text-shadow: var(--primary-tshadow);*/ } .shop.detail .size_guide {display:flex; justify-content:flex-end; margin-bottom:10px;} .shop.detail .size_guide button {border-bottom:1px solid #333;} .shop.detail .size_guide i {font-size:14px;} .shop.detail .sum {display:flex; padding:15px 3px; align-items:center;} .shop.detail .sum dt {margin-right:15px; font-weight:700; color:var(--black);} .shop.detail .sum dd {margin-left:auto; font-weight:700; color:var(--red); font-size:var(--fsize20);} .shop.detail .btn_group {display:flex; justify-content:space-between; align-items:center; margin-right:-3px; margin-left:-3px;} .shop.detail .btn_group > * {width:calc(50% - 6px); margin:3px;} .shop.detail .wish-list-form {margin-right:3px;} .shop.detail .btn_group .btn_gray {width: calc(100% - 2px);} .shop.detail .btn_group .btn {display:flex; justify-content:center; align-items:center; height:46px;} .item_detail > .container > .row {position:sticky; top:86px; left:0; z-index:999; background:#fff;} .item_detail.inner-section {margin-top:30px;} .item_detail .container {border-top:1px solid var(--black);} .item_detail .nav-tabs {margin-bottom:20px; padding:10px 25px; padding-top:30px;} .item_detail .tab-link {position:relative; transition:all 0.3s ease;} .item_detail .tab-link.active:after {position:absolute; bottom:0; left:0; content:""; width:100%; height:2px; background:var(--primary); transition:all 0.3s ease;} .item_detail .div {margin-top:-120px; height:120px;} .item_detail .div#tab-seller {margin-top:-130px; height:120px;} .item_detail .tab-pane {display:block; opacity:1; visibility:visible; margin-bottom:150px;} .item_detail .tab-pane h4 {margin-bottom:5px; font-size:16px; font-weight:700;} .item_detail .tag_cont {margin:0 -5px;} .item_detail .tag_cont a {display:inline-block; margin:5px; background: #f6f6f6; padding: 8px 15px; border-radius: 50px; font-size: 14px;} .item_detail .product_info_notice {margin-top:40px;} .item_detail .product_info_notice table {font-size:14px;} .item_detail .product_info_notice th {width:220px; padding:10px 15px; background:#f9f9f9; border-bottom:1px solid #ededed;} .item_detail .product_info_notice td {padding:10px 15px; border-bottom:1px solid #ededed;} .item_detail .recent {margin-top:40px; padding:0;} .item_detail .recent .row {margin-left:-20px; margin-right:-20px;} .item_detail .recent_swiper .swiper-button-prev, .item_detail .recent_swiper .swiper-button-next {top:-10px; width:24px; height:24px;} .item_detail .recent_swiper .swiper-button-prev {left:110px;} .item_detail .recent_swiper .swiper-button-next {left:140px; right:auto;} .item_detail .recent_swiper .swiper-button-prev:after, .item_detail .recent_swiper .swiper-button-next:after {font-size:11px;} .item_detail .recent_swiper .swiper-pagination {bottom:-40px;} .item_detail .product-name a {width:100%;} .item_detail .qna .guide {margin-bottom: 20px; padding: 20px; border: 3px solid #e9e9e9; color: #666;} .item_detail .qna .guide h4{margin-top: 20px; color:var(--red);} .item_detail .qna .guide .btn_wrap {margin-top:20px;} .item_detail .qna ul {display:flex; flex-flow:row wrap; width:100%;} .item_detail .qna li {display:flex; align-items:center; justify-content:center; padding:16px 10px;} .item_detail .qna .list_head {margin-top:40px; border-top:1px solid var(--black); border-bottom:1px solid #ddd;} .item_detail .qna .list_head li {font-size:14px; font-weight:500;} .item_detail .qna .status {width:100px;} .item_detail .qna .subject {justify-content:flex-start; width:calc(100% - 340px);} .item_detail .qna .btn_warning {margin-left:6px; padding:3px 10px; background:rgba(255, 255, 255, 0.8); border:1px solid #ddd; color:#666; font-size:12px; line-height:1; vertical-align:text-bottom;} .item_detail .qna .lock {font-size: 14px; display: inline-block; margin-left: 3px; margin-bottom: 3px;} .item_detail .qna .writer {width:120px;} .item_detail .qna .date {width:120px;} .item_detail .qna .item.in .body {display: block;} .item_detail .qna .head, .item_detail .qna .body {border-bottom:1px solid #ededed; background-color: #fff; box-sizing: border-box;} .item_detail .qna .head {display:flex; align-items:center;} .item_detail .qna .body {display: none; padding-left:110px; background-color:#f6f6f6;} .item_detail .qna .head .status {font-size:14px; font-weight:500; color:#878787;} .item_detail .qna .head .status .done {color:var(--primary);} .item_detail .qna .q_cont {padding:20px 0; padding-right:20px; border-bottom:1px solid #ededed;} .item_detail .qna .q_cont li {padding:16px 10px;} .item_detail .qna .a_cont .subject {display:block; width:calc(100% - 280px);} .item_detail .qna .a_cont .tag {width:44px;} .item_detail .qna .a_cont .tag span {align-self: flex-start; display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:#333; color:#fff; font-size:14px; font-weight:700;} .ask_write .modal-dialog {width: 90%; max-width: 600px;} .ask_write .modal-header {border-bottom:none;} .ask_write .modal-title {font-weight:700;} .ask_write th, .ask_write td {padding-left:3px; padding-right:3px;} .ask_write th {width:100px; padding-top:11px; vertical-align:top;} .ask_write input:not([type="radio"]) {width:100%; height:40px; border:1px solid #ddd;} .ask_write textarea {width:100%; height:200px; border:1px solid #ddd; } .ask_write .uploadPic {margin-bottom: 20px;} .ask_write .uploadPic ul {display:flex; flex-flow:row wrap;} .ask_write .uploadPic li {position:relative; width: 19.2%; margin-left: 1%; margin-bottom:10px; border:1px solid #ddd; border-radius:5px; overflow:hidden;} .ask_write .uploadPic li:nth-of-type(5n+1) {margin-left:0;} .ask_write .uploadPic .uploadBtn {min-height:auto; padding:20px 0; border:none; cursor:pointer;} .ask_write .uploadPic .dz-message {display:flex; justify-content:center; align-items:center; height: 44px; margin:0; padding: 5px 10px;} .ask_write .uploadPic .uploadBtn i {margin-right: 5px; font-size: 20px;} .ask_write .uploadPic li div {display:absolute; top:0; left:0; width:100%; height:100%;} .ask_write .uploadPic li img {width:100%;} .ask_write .uploadPic li span {position:absolute; bottom:0; right:0; display: flex; justify-content: center; align-items: center; width:30px; height:30px; background:rgba(0, 0, 0, 0.6); color:#fff;} .ask_write .uploadPic .guide {font-size:14px; color:var(--secondary);} .ask_write .uploadPic .guide strong {font-weight:500; color:var(--cuation);} .ask_write .btn_wrap {margin-top:20px; margin-left:2px; margin-right:2px; } .ask_write .btn {width:calc(50% - 6px);} .item_detail .seller .btn_wrap button {margin:2px; padding:5px 10px; border:1px solid #ddd; font-size: 15px; color: #525252;} .item_detail .seller .btn_wrap button i {color:var(--black);} .item_detail .seller table {margin-top:20px;} .item_detail .seller th, .item_detail .seller td {padding:10px 20px;} .item_detail .seller th {background:#f8f8f8;} .item_detail .seller td {border-right:none;} .item_detail .seller .go_sellerinfo {cursor:pointer;} .item_detail .seller .go_sellerinfo i {font-size:14px; color:#525252; vertical-align: middle; margin-top: -4px;} .item_detail .seller .info {display:flex; flex-flow:row wrap; padding:30px 20px; border-bottom:1px solid #ddd;} .item_detail .seller .info > div {display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; width:20%; border-left:1px solid #ededed; color:var(--red1);} .item_detail .seller .info > div:first-child {border-left:none;} .item_detail .seller .info h4 {font-weight:500;} .item_detail .seller .info strong {display:inline-block; font-size:28px; font-weight:700;} .item_detail .seller .rating strong {color:var(--black);} .item_detail .seller .star_bg {position: relative; display: block; width: 175px; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x;} .item_detail .seller .star_rate {position: absolute; top: 0; left: 0; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x 0 -33px; overflow: hidden; vertical-align: -1px;} .item_detail .seller .certi > div {display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; width:100px; height:100px; background:#f8f8f8; border-radius:50px; font-size:14px; font-weight:700; color:var(--black); cursor:pointer;} .item_detail .seller .certi > div img {margin-bottom:10px;} .certi_view .modal-dialog {max-width:500px;} .certi_view .modal-header {border-bottom:none;} .certi_view .modal-body {font-size:14px;} .certi_view th, .certi_view td {padding:10px 20px; font-size:14px;} .certi_view th {width:100px;} .certi_view .conts {padding:20px 0; border-bottom:1px solid #ddd; color: var(--caution);} .certi_view .conts h4 {font-size:14px; font-weight:500;} .certi_view .guide {margin-top:20px; color:#787878;} .certi_view .who {display:flex; margin-top:40px;} .certi_view .who ul {margin-left:auto;} .item_detail .refund .guide {margin-bottom:20px; color:#787878;} .item_detail .refund h4 {margin-bottom:10px;} .item_detail .refund th, .item_detail .refund td {padding:16px;} .item_detail .refund th {width:200px; background:#f8f8f8;} .item_detail .refund td {border-left:1px solid var(--border);} .item_detail .refund td strong {font-weight:500; color:var(--red);} .item_detail .refund td li {position:relative; padding:3px 0; padding-left:15px;} .item_detail .refund td li:before {content:""; position:absolute; top:15px; left:4px; width:3px; height:3px; background:var(--gray);} .item_detail .refund .period_guide {margin-top:10px; font-size:14px; color:var(--gray);} .item_detail .refund .period_guide li:before {top:10px} .item_detail .refund .tooltiptext {width:300px; color:#666;} .item_detail .refund .tooltiptext li {position:relative; padding:2px 0; padding-left:10px;} .item_detail .refund .tooltiptext li:before {content:"-"; position:absolute; top:5px; left:0;} .seller_info .modal-dialog {max-width:500px;} .seller_info .modal-header {padding-bottom: 0; border-bottom:none;} .seller_info th, .seller_info td {padding:10px 3px; font-size:15px;} .seller_info th {width:130px;} .seller_info td button {margin: 3px; padding: 4px 10px; font-size: 12px; line-height: 1;} .seller_info .btn_verify {border:1px solid var(--blue); background:var(--blue); color:#fff;} .seller_info .btn_wrong {border: 1px solid var(--danger); color: var(--danger);} .seller_info .conts {background: #f6f6f6; padding: 20px;margin-top: 20px; font-size: 14px; line-height: 1.4;} .seller_info .conts strong {color:var(--red);} .share_view .share_list {display:flex;} .share_view .share_list > div {display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 20px 15px 0; font-size:14px; cursor:pointer;} .share_view .share_list img {width:50px; height:50px; margin-bottom:6px; border-radius:50px;} .tab-link { font-weight: 500; text-transform: uppercase; color: var(--heading); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .tab-link:hover { color: var(--primary); } .tab-link i { font-size: 18px; margin-right: 3px; } .tab-link.active { color: var(--primary); } .tab-pane {display: none; width:100%; max-width:1080px; margin:0 auto; padding: 0px;} .tab-pane.active {display: block;} .modal_card .card_content {height:80vh; padding-top:30px; padding-right: 20px;overflow-y: scroll; border-top: 1px solid #000;} .modal_card .card_content > div:not(.guide) {margin-bottom:30px;} .modal_card .cardtable {width:100%;} .modal_card .cardtable tr {border-bottom: 1px solid #ebebeb;} .modal_card .cardtable th {background-color: #f5f5f5; border-top: 1px solid #000; border-bottom: 1px solid #ebebeb; padding: 10px 0; color:var(--black); font-size:var(--fsize14); text-align:center;} .modal_card .cardtable td {padding:10px; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; font-size:var(--fsize14);} .modal_card .table_info {padding: 10px 0; font-size:var(--fsize14);} .details-label-group { position: absolute; top: 20px; left: 20px; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .details-label { font-size: 14px; padding: 6px 20px; margin-bottom: 6px; line-height: 13px; border-radius: 50px; text-transform: capitalize; text-align: center; color: var(--white); } .details-label:last-child { margin-bottom: 0px; } .details-label.off { background: var(--red); } .details-label.new { background: var(--black); } .details-label.sale { background: var(--orange); } .details-label.feat { background: var(--purple); } .details-label.rate { background: var(--yellow); } .details-preview { margin-bottom: 16px; } .details-preview li img { width: 100%; border-radius: 8px; } .details-thumb li { margin: 0px 8px; cursor: pointer; } .details-thumb li img { width: 100%; border-radius: 8px; border: 1px solid var(--white); } .details-thumb .slick-current img { border: 1px solid #5f6472; } .product-navigation {display:none; margin-bottom: 25px; padding: 20px 25px; border-radius: 8px; background: var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product-navigation li a { color: var(--text); text-transform: capitalize; position: relative; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .product-navigation li a:hover { color: var(--primary); } .product-navigation li a:hover .product-nav-popup { visibility: visible; opacity: 1; } .product-nav-popup { position: absolute; top: 30px; left: 50%; z-index: 3; width: 100px; height: auto; visibility: hidden; opacity: 0; padding: 10px; border-radius: 8px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: var(--white); border: 1px solid var(--border); -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .product-nav-popup::before { position: absolute; content: ""; z-index: -1; top: -3px; left: 50%; width: 12px; height: 12px; border-radius: 3px; -webkit-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); background: var(--white); border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .product-nav-popup img { width: 100%; } .product-nav-popup small { font-size: 14px; line-height: 18px; display: inline-block; } .details-meta { margin-bottom: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; flex-wrap: wrap; } .details-meta p { font-size: 13px; margin-right: 20px; white-space: wrap; text-transform: uppercase; color: var(--placeholder); } .details-meta span, .details-meta a { margin-left: 5px; color: var(--placeholder); } .details-meta a:hover { text-decoration: underline; color: var(--primary); } .details-rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 15px; } .details-rating i, .details-rating a { font-size: 15px; margin-right: 3px; color: var(--gray); } .details-rating a { margin-left: 8px; white-space: nowrap; text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .details-rating a:hover { color: var(--primary); text-decoration: underline; } .details-rating .active { color: var(--yellow); } .details-price { margin-bottom: 20px; } .details-price del { color: var(--red); margin-right: 25px; } .details-price span { color: var(--primary); white-space: nowrap; } .details-price span small { font-size: 14px; font-weight: 400; text-transform: capitalize; } .details-desc { margin-bottom: 25px; } .details-list-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 25px; } .details-list-group:last-child { margin-bottom: 0px; } .details-list-title { font-weight: 500; margin-right: 15px; color: var(--heading); text-transform: capitalize; } .details-tag-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .details-tag-list li { margin-right: 8px; } .details-tag-list li a { font-size: 14px; line-height: 12px; padding: 8px 10px; border-radius: 5px; letter-spacing: 0.3px; text-transform: capitalize; color: var(--text); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .details-tag-list li a:hover { color: var(--white); background: var(--primary); } .details-share-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .details-share-list li { margin-right: 8px; } .details-share-list li a { width: 35px; height: 35px; font-size: 16px; line-height: 35px; border-radius: 50%; text-align: center; color: var(--text); background: var(--chalk); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .details-share-list li a:hover { color: var(--white); background: var(--primary); } .details-add-group { margin: 0; } .details-add-group .product-add, .details-add-group .action-input, .details-buy, .details-buy:hover { display:flex; padding: 10px 0px; color: var(--white); background: var(--black); border:1px solid var(--black); text-transform: uppercase; justify-content:center; align-items:center; } .details-buy i {margin-right: 5px;} .details-add-group .action-minus i, .details-add-group .action-plus i { background: var(--chalk); } .details-wish.active { color: var(--white); background: var(--primary); } .details-wish.active:hover { color: var(--white); background: var(--primary); } .product-details-frame { width:100%; max-width:1080px; margin:0 auto; padding: 50px 0; padding-top:0; border-radius: 8px; margin-bottom: 30px; background: var(--white); } .product-details-frame:last-child { margin-bottom: 0px; } .frame-title { margin-bottom: 30px; text-transform: capitalize; } .tab-descrip { position: relative; } .tab-descrip ul { list-style: disc; margin-left: 20px; margin-top: 25px; } .tab-descrip ul li { margin-bottom: 8px; } .tab-descrip ul li:last-child { margin-bottom: 0px; } .tab-descrip img { width: 100%; border-radius: 8px; } .tab-descrip a { position: absolute; top: 50%; left: 50%; z-index: 2; width: 80px; height: 80px; font-size: 22px; line-height: 80px; border-radius: 50%; text-align: center; color: var(--white); background: rgba(15, 199, 86, 0.8); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: var(--primary-bshadow); box-shadow: var(--primary-bshadow); text-shadow: var(--primary-tshadow); } .table-bordered { margin-bottom: 0px; } .table-bordered th, .table-bordered td { padding: 12px 25px; text-align: left; } .table-bordered th { font-weight: 500; } .table-bordered td:last-child { border-right: 1px solid var(--border); } .review-item { display:flex; flex-flow:row wrap; align-items: flex-start; padding: 45px 45px; border-radius: 8px; margin-bottom: 30px; background: var(--chalk); border: 1px solid var(--border); } .review-item:last-child { margin-bottom: 0px; } .review-media { margin-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .review-avatar { margin-right:40px; border-radius: 50%; border: 2px solid var(--primary); } .review-avatar img { width:60px; border-radius: 50%; border: 2px solid var(--white); } .review-meta { text-transform: capitalize; } .review-meta a { color: var(--heading); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .review-meta a:hover { color: var(--primary); } .review-meta span { display: block; font-size: 15px; font-weight: 400; color: var(--text); } .review-meta span b { font-weight: 500; color: var(--primary); } .review-rating { margin-bottom: 10px; } .review-rating li { font-size: 16px; margin-right: 5px; color: var(--yellow); display: inline-block; } .review-desc { margin-bottom: 20px; } .review-reply { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .review-reply input { width: 100%; padding: 7px 18px; border-radius: 6px; margin-right: 20px; background: var(--white); } .review-reply button { font-size: 15px; padding: 6px 15px; border-radius: 6px; color: var(--white); background: var(--primary); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .review-reply button:hover { background: var(--heading); } .review-reply button i { margin-right: 5px; } .review-reply-list { margin-left: 80px; margin-top: 35px; border-top: 1px solid var(--border); } .review-reply-item { display:flex; flex-flow:row wrap; align-items:center; padding: 30px 0px; border-bottom: 1px solid var(--border); } .review-reply-item:last-child { padding-bottom: 0px; border-bottom: none; } .review-form .btn { width: 100%; padding: 12px 30px; } .review .product-details-frame {padding:50px 0;} .review .tag_amount {position: absolute; bottom: 0; right: 0; padding: 0 5px; background: rgba(0, 0, 0, 0.4); font-weight: 500; color: #fff; display: block; width: 30px; height: 30px; line-height: 30px; font-size: 12px; text-align: center;} .review .tit h3 {display:inline-block; margin-right:5px; font-size: 18px; font-weight: 700; color:#212121; vertical-align:middle;}{} .review_guide {display:flex; flex-flow:row wrap; padding:20px; border:1px solid #ddd; border-radius:5px; font-size: 14px; color: #787878;} .review_guide > div:last-child {margin-left:auto;} .review_guide dl {display:flex; flex-flow:row wrap; margin:0; margin-top:3px;} .review_guide dt {font-weight:normal;} .review_guide dd {position:relative; margin:0; margin-right:20px; color: var(--caution);} .review_guide dd:before {position: absolute; top: 5px; bottom: 5px; right:-10px; width: 1px; background-color: #ccc; content: "";} .review_guide dd:last-child:before {display:none;} .review_guide button, .review_guide button:hover { display: flex; align-items: center; justify-content: center; width: 120px; height: 44px; padding: 5px 10px; background: #191f2e; border: none; color: #fff;} .review_rating {margin-top:40px;} .review_rating .inner_wrap {display:flex; flex-flow:row wrap; justify-content:center; /*height:210px;*/ padding:35px 30px 29px; background-color: #f8f9fb; border: 1px solid #e0e0e1; border-radius: 5px;} .review_rating .inner_wrap > div {display:flex; flex-flow:column wrap; align-items:center; overflow:hidden;} .review_rating .inner_wrap > div > strong, .review_classfied .slick-slide > strong {display:block; color: #212121; font-weight: 500; font-size: 14px; text-align:center; word-break:keep-all;} .review_rating .user_total {text-align:center;} .review_rating .score {display:block; margin-top:15px; font-size: 38px; color: #c5c5c5; line-height: 1;} .review_rating .score strong {color:#212121; font-weight:500;} .review_user .star_bg {position: relative; display: block; margin:26px auto 0; width: 175px; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x;} .review_user .star_rate {position: absolute; top: 0; left: 0; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x 0 -33px; overflow: hidden; vertical-align: -1px;} .review_total {width: 165px; margin-left:3.5%;} .review_total i {margin-top:17px; font-size:42px; color:#d3d6d9;} .review_rate {width:170px; margin-left:3.5%;} .review_rate ul {display: table; table-layout: fixed; width: 100%; margin-top: 7px; padding: 18px 0 28px;} .review_rate li {display: table-cell; position: relative; text-align: center;} .review_rate .bar {display: inline-block; position: relative; width: 8px; height: 100px; border-radius: 5px; background-color: #e6e9f0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); vertical-align: top;} .review_rate .gauge {position: absolute; right: 0; bottom: 0; left: 0; min-height: 8px;} .review_rate .account {position: absolute; bottom: 100%; left: 50%; z-index: 1; height: 19px; opacity:0;} .review_rate .gauge.active .account {opacity:1;} .review_rate .account em {display: inline-block; position: relative; margin-top: -1px; height: 15px; padding: 0 3px; border-radius: 2px; background-color: #f54a4c; font-family: arial,sans-serif; font-size: 11px; line-height: 15px; color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .review_rate .account em:before {position: absolute; bottom: -7px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #f54a4c; content: "";} .review_rate .graph {display: inline-block; width: 100%; height: 100%; border-radius: 5px; background-color: #ced4e1; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); vertical-align: top;} .review_rate .gauge.active .graph {background-color: #f54a4c;} .review_rate .score {display:block; margin-top:16px; font-size:14px; text-align:center; color:#787878;} .review_classfied {display:block!important; width: 316px; margin-left:3.5%;} .review_classfied .slick-slide {height:auto;} .review_classfied .slick-list {padding:0 40px;} .review_classfied .slick-slider {position:relative; width:100%; height:100%;} .review_classfied .slick-arrow {position:absolute; top:50%; width:26px; height:51px; margin-top:-25px; background-image: url('/themes/kakemall/pro/resources/images/arrow_gray.svg'); background-repeat:no-repeat; background-position:center; background-size:13px auto; z-index:1; text-indent:-999999px; } .review_classfied .slick-next {right:0;} .review_classfied .slick-prev {left:0; transform:rotate(-180deg);} .review_classfied .slick-dots {margin-top: 6px; text-align: center;} .review_classfied .slick-dots li {display: inline-block; width: 4px; height: 4px; margin: 0 2px 0 3px; background-color: #000; border-radius: 50%; vertical-align: top; opacity: .1; text-indent:-9999px; font-size:0; line-height:0;} .review_classfied .slick-dots li.slick-active {opacity: 1;} .review_classfied .slick-slide ul {height: 91px; margin-top: 27px;} .review_classfied .slick-slide ul li {display:flex; margin-top:9px;} .review_classfied .slick-slide ul li:first-child {margin-top:0;} .review_classfied .slick-slide ul li > div {display:flex; width: 100%;} .review_classfied .slick-slider .box1 em {display:inline-block; min-width:66px; height: 22px; margin-top: 1px; margin-right:10px; padding: 0 5px; border:1px solid #a26f59; color:#a26f59; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; line-height: 20px; vertical-align: top; border-radius: 12px; text-align: center; font-style:normal;} .review_classfied .slick-slider .comment {padding-right: 7px; font-size: 13px; color: #000; font-size:13px;} .review_classfied .slick-slider .amount {display:flex; margin-left: auto; font-size:12px; color:#777; } .review_classfied .slick-slider .amount > span:last-child {margin-left:auto; font-size:11px; color:#959595;} .review_classfied .slick-slider .box2 li {display:flex;} .review_classfied .slick-slider .box2 li em {color: #aaa; white-space: nowrap; font-style:normal;} .review_classfied .slick-slider .box2 li > div {margin-left:auto; width:120px;} .review_classfied .slick-slider .box2 .graph {display: inline-block; position: relative; width:100px; height: 6px; margin-top: 5px; background-color: #e6e9f0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); border-radius: 3px; vertical-align: top;} .review_classfied .slick-slider .bar {position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); border-radius: 3px; background-color: #ced4e1;} .review_classfied .slick-slider .bar.active {background:#1e49c1;} .review_classfied .box2 .amount {margin-left:5px; font-size:11px; color: #aaa; white-space: nowrap;} .storePick {margin-top:40px;} .storePick .tit em {font-size: 14px; font-style: normal; color: #787878; vertical-align:middle;} .slideStorePick .slick-slide {height:auto;} .slideStorePick .columnWrap {display:flex!important; flex-flow:row wrap; justify-content:space-between; height:auto;} .slideStorePick .column {width:calc(50% - 5px); padding: 20px; border: 1px solid #ddd;} .slideStorePick .writerInfo {display:flex; padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #ddd;} .slideStorePick .writerInfo > div {overflow:hidden;} .slideStorePick .writerInfo img {width: 50px; height: 50px; margin-right:15px; border-radius: 50%;} .slideStorePick .star_bg {position: relative; display:inline-block; width:80px; height:16px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:16px;} .slideStorePick .star_rate {position: absolute; top: 0; left: 0; height: 16px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -15px; background-size:16px; overflow: hidden;} .slideStorePick .starRate em {display:inline-block; margin-left:3px; font-weight:700; font-style:normal; color:var(--black);} .slideStorePick .summary {font-size:14px; color:var(--graytxt); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .slideStorePick .summary span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;} .slideStorePick .cont {display:flex; height:100px; overflow:hidden;} .slideStorePick .cont img {width:100px;} .slideStorePick .cont .comment {margin-right:20px; font-size:15px; } .slideStorePick .pic {position:relative;} .slideStorePick .slick-arrow, .slideStorePick .slick-dots {display:none!important;} .storePick .btnWrap {display:flex; justify-content:center; margin: 20px 0 40px;} .storePick .btnWrap img {width:9px; margin:0 10px;} .storePick .prevBtn {transform:rotate(-180deg);} .reviewMedia ul {display:flex;} .reviewMedia li {position:relative; width:calc(12.5% - 8px); margin-left:10px;} .reviewMedia li:first-child {margin-left:0;} .reviewMedia img {width:100%;} .reviewMedia .tit span, .reveiwSort .tit span {margin-left:3px; color:var(--caution); font-weight:500;} .reviewMedia li a {position:relative;} .reviewMedia .moreWrap {position:absolute!important; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:1; color:#fff; cursor:pointer;} .reviewFilter {margin-top:40px; padding-top:20px; border-top:1px solid #ccc;} .reveiwSort {display:flex;} .reveiwSort .tit {display:block; margin-right:auto; color:var(--black);} .reveiwSort ul {display:flex;} .reveiwSort li {position:relative;} .reveiwSort li a {padding:3px 8px; color:var(--secondary);} .reveiwSort li a.active {color:var(--black);} .reveiwSort li a:before {display:none; content:"\f00c"; font-family:var(--awesome); font-weight:900; margin-top:-2px; margin-right:3px; font-size:14px; color:var(--black); vertical-align:middle; } .reveiwSort li a.active:before {display:inline-block;} .reveiwSort li .tooltipGuide {display:none; position:absolute; top:30px; width:230px; padding:10px; background:#fff; border:1px solid #ddd; border-radius:5px; -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); font-size:14px;} .reveiwSort li:first-child:hover .tooltipGuide {display:block;} .reveiwSort li .tooltipGuide strong {color:var(--black);} .reviewTabWrap {margin:20px 0;} .reviewTabs {display:flex; padding:20px; background:#1d377a; border:1px solid #1d377a; border-bottom:none; border-top-left-radius:5px; border-top-right-radius:5px;} .reviewTabs li {flex:1; text-align:center;} .reviewTabs a {position:relative; display:inline-block; color:#fff;} .reviewTabs a:hover {color:rgba(255, 255, 255, 0.8);} .reviewTabs a.active:before {position:absolute; bottom:0; width:100%; display:block; content:""; background:#fff; height:2px;} .reviewHash {display:flex; padding:20px; background:#fff; border:1px solid #ddd; border-bottom-left-radius:5px; border-bottom-right-radius:5px;} .reviewHash .tag {margin:0 5px; padding:3px 15px; border:1px solid #ddd; border-radius:50px; font-size:14px; } .reviewHash .tag.active {border:1px solid var(--primary); color:var(--primary);} .reviewHash .goodsOption {position:relative;} .reviewHash .goodsOption button.active i {transform:rotate(-180deg);} .reviewHash .dropdownWrap {position:absolute; display:none; width:250px; margin-top:10px; background:#fff; border:1px solid #ddd; border-radius:5px; overflow:hidden; z-index: 5000;} .reviewHash .dropdownWrap > div:first-child {padding:10px 20px; background: #f6f6f6; border-bottom:1px solid #ddd; font-size:14px; color:var(--black);} .reviewHash .dropdownWrap ul {height: 160px; margin-top:10px; overflow-y: scroll;} .reviewHash .dropdownWrap li {padding:5px 20px; font-size:14px;} .reviewHash .dropdownWrap input[type="radio"] {display:none;} .reviewHash .dropdownWrap input[type="radio"]:checked + label {color:#133691; font-weight:500;} .reviewHash .dropdownWrap label:before {content:"\f00c"; font-family:var(--awesome); font-weight:900; display: none; margin-right: 3px; font-size: 12px; vertical-align: text-bottom; color:#133691; } .reviewHash .dropdownWrap input[type="radio"]:checked + label:before {display:inline-block;} .reviewHash .dropdownWrap .btnWrap {padding:10px 20px; border-top:1px solid #eee; } .reviewHash .dropdownWrap .btnWrap button {width:calc(50% - 5px); margin-left:5px; padding:5px; background:var(--primary); color:#fff; font-size:14px; text-align:center;} .reviewHash .dropdownWrap .btnWrap button:first-child {margin-left:0; background:#acb0b9;} .reviewGuide {margin-bottom:20px; padding:10px 20px; border:1px solid #ddd; border-radius:5px;} .reviewGuide i {color:var(--orange);} .reviewGuide strong {color: var(--facebook); font-weight:500;} .reviewWrite .col-lg-12 {padding-left:0; padding-right:0;} .reviewWrite .modal-dialog {width:90%; max-width:600px;} .reviewWrite .product-details-frame {padding:20px;} .reviewWrite .pointGuide {margin-bottom:10px; background:#f6f6f6; border-radius:5px; font-size:14px; color:#787878; overflow:hidden;} .reviewWrite .pointGuide > * {padding:10px 20px; } .reviewWrite .pointGuide i {margin-right:3px;} .reviewWrite .pointGuide strong {font-weight:500; color:var(--caution);} .reviewWrite .pointGuide .fa-angle-down {margin-left:10px;} .reviewWrite .pointGuide > div.active .fa-angle-down {transform:rotate(-180deg);} .reviewWrite .pointGuide > ul {padding-left: 42; background:#eee; border-top:1px dashed #ddd;} .reviewWrite .pointGuide > ul li {position:relative; padding:3px 0 3px 5px;} .reviewWrite .pointGuide > ul li:before {position:absolute; top:10px; left:0; content:""; display:block; width:3px; height:3px; border-radius:50%; background:#787878;} .reviewWrite .pointGuide .notice {border-top:1px solid #ddd; } .reviewWrite .summary {display:flex;} .reviewWrite .summary .pic {width:100px; margin-right: 15px;} .reviewWrite .summary img {width:100%;} .reviewWrite .summary .cont {margin-top:5px;} .reviewWrite .summary .store, .reviewWrite .summary .option {font-size:14px; color:var(--secondary);} .reviewWrite .summary .goodsName {font-weight:500;} .reviewWrite .starRate {margin-top:10px; padding:0; padding-top:20px; border-top:1px solid #212121;} .reviewWrite .star-rating {display: flex; justify-content: center; padding:30px 20px; background: var(--gray-dark); border-radius:5px;} .reviewWrite .star-rating label {width:40px; height:40px; position: relative; margin:0; cursor:pointer;} .reviewWrite .star-rating label:hover:after {opacity:1;} .reviewWrite .star-rating label:before {content: ""; position: absolute; display: block; top: 0px; left: 0px; width:40px; height:39px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 0; background-size:40px; overflow: hidden;} .reviewWrite .star-rating label:after {content: ""; position: absolute; display: block; top: 0px; left: 0px; opacity: 0; width:40px; height:39px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -37.5px; background-size:40px; overflow: hidden;} .reviewWrite .star-rating input:checked ~ label::after {opacity:1;} .reviewWrite .optionRate {padding-left:5px; padding-right:5px;} .reviewWrite .optionRate dl {display:flex; border-bottom: 1px solid var(--border);} .reviewWrite .optionRate dt {width:30%; padding:14px 20px 0 5px; font-weight: 500; color: var(--black);} .reviewWrite .optionRate dd {width:70%; display:flex; align-items: flex-start;} .reviewWrite .optionRate .star-rating {flex-flow:column wrap; align-items:center; justify-content:center; margin: 0 10px; padding:0; background:none; border:none; direction: inherit;} .reviewWrite .optionRate .star-rating label {width:26px; height:26px;} .reviewWrite .optionRate .star-rating label:before, .reviewWrite .optionRate .star-rating label:after{width:26px; height:26px; background-size:26px; } .reviewWrite .optionRate .star-rating label:after {background-position:0 -25px;} .reviewWrite .optionRate .star-rating span {margin-top: 8px; color: var(--secondary); font-size: 14px; word-break: keep-all; line-height: 1.3;} .reviewWrite .comment {padding:0;} .reviewWrite .uploadPic {margin-bottom: 20px;} .reviewWrite .uploadPic ul {display:flex; flex-flow:row wrap;} .reviewWrite .uploadPic li {position:relative; width: 19.2%; margin-left: 1%; margin-bottom:10px; border:1px solid #ddd; border-radius:5px; overflow:hidden;} .reviewWrite .uploadPic li:nth-of-type(5n+1) {margin-left:0;} .reviewWrite .uploadPic .uploadBtn {display:flex; justify-content:center; align-items:center; margin-left:0px; flex-flow: column wrap;} .reviewWrite .uploadPic .uploadBtn a {color:var(--secondary)!important; text-align: center; font-size: 15px; word-break: keep-all; line-height:1.3;} .reviewWrite .uploadPic .uploadBtn i {font-size: 26px; margin-bottom: 5px;} .reviewWrite .uploadPic li div {display:absolute; top:0; left:0; width:100%; height:100%;} .reviewWrite .uploadPic li img {width:100%;} .reviewWrite .uploadPic li span {position:absolute; bottom:0; right:0; display: flex; justify-content: center; align-items: center; width:30px; height:30px; background:rgba(0, 0, 0, 0.6); color:#fff;} .reviewWrite .uploadPic .guide {font-size:14px; color:var(--secondary);} .reviewWrite .uploadPic .guide strong {font-weight:500; color:var(--cuation);} .review-list .reviewCont {flex:1;} .review-list .reviewSummery {font-size:14px; color:var(--sec);} .review-list .reviewSummery a {color:inherit;} .review-list .starRate {display:flex; align-items:center;} .review-list .star_bg {position: relative; display:inline-block; width:100px; height:20px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:20px;} .review-list .star_rate {position: absolute; top: 0; left: 0; height:20px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -20px; background-size:20px; overflow: hidden;} .review-list .starRate em {display:inline-block; margin-left:10px; font-weight:700; font-style:normal; color:var(--black); vertical-align: text-bottom; font-size:16px;} .review-list .writer {font-size:14px; color:var(--graytxt); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .review-list .writer span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;} .review-list .optionRate dl {display:flex; margin-top:10px; padding:10px 15px; border-radius:10px; border:1px dashed #ddd; color: var(--sub-heading);} .review-list .optionRate dt {margin-right:5px;} .review-list .optionRate dd {margin-bottom:0;} .review-list .optionRate dd:after {content:""; width:1px; height:100%; margin:0 10px; background:#ddd;} .review-list .reviewSummery {display:flex; align-items: flex-start;} .review-list .reviewSummery .pic {position:relative; width:120px; height:0; margin-left:40px; padding-top:120px;} .review-list .reviewSummery .pic img {width:100%;} .review-list .reviewSummery .imgBox {position:absolute; top:0; left:0; width:100%; height:100%;} .review-desc {line-height:1.6;} .review-desc img {display:inline-block; max-width:100%; margin:10px;} .review-desc .morecontent span {display: none;} .review-desc .morelink {display: block;} .review-list .btnGood {margin-top:10px; padding:5px 10px; border:1px solid #ddd; border-radius:5px; background:#fff; color:#666; line-height:1.3; font-size:14px;} .review-list .btnGood i {color: var(--orange);} .review-reply-list .review-media {margin-bottom:0;} .review-reply-list .review-avatar {margin-right:20px;} .review-reply-list .writer strong {color:var(--black);} .review-reply-list .review-desc {margin-top:20px;} .reviewPopup .view-details {margin-left:0;} .reviewPopup .slick-slide {height:auto;} .reviewPopup .view-meta {display:flex; align-items:center;} .reviewPopup .review-avatar {margin-right:20px;} .reviewPopup .review-avatar img {width:40px;} .reviewPopup .summery {flex:1; font-size: 13px; margin-right:0; text-transform: uppercase; color: var(--placeholder);} .reviewPopup .starRate {display:flex; align-items:center;} .reviewPopup .star_bg {position: relative; display:inline-block; width:100px; height:20px; margin-left:0; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:20px;} .reviewPopup .star_rate {position: absolute; top: 0; left: 0; height:20px; margin-left:0; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -20px; background-size:20px; overflow: hidden;} .reviewPopup .starRate em {display:inline-block; margin-left:10px; font-weight:700; font-style:normal; color:var(--black); vertical-align: text-bottom; font-size:16px;} .reviewPopup .writer {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px 0; margin: 5px 0; color:var(--secondary);} .reviewPopup .writer span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;} .reviewPopup .optionRate {margin-top:10px; margin-bottom:20px; padding:10px; border-radius:10px; border:1px dashed #ddd; color: var(--sub-heading); font-size:14px;} .reviewPopup .optionRate dl {display:flex; margin-bottom:2px;} .reviewPopup .optionRate dt {margin-right:5px;} .reviewPopup .optionRate dd {margin-bottom:0;} .reviewPopup .optionRate dd:after {content:""; width:1px; height:100%; margin:0 10px; background:#ddd;} .reviewPopup .view-desc {height:260px; overflow-y:scroll;} .reviewPopup .option {color: var(--facebook);} .reviewPopup .btnGood button {border: 1px solid var(--gray-chalk); border-radius: 50px; font-size: 15px; margin-left:8px; padding: 3px 15px; color: var(--orange);} .galleryPopup ul {display:flex; flex-flow:row wrap; margin:30px;} .galleryPopup li {position:relative; width:110px; height:110px; margin:5px; background:#f5f5f5; overflow:hidden;} .galleryPopup li img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;} /*상품상세 - 로그인시 보이는 테이블*/ .cre_box table {width:100%; margin-bottom:20px;} .cre_box table th {padding:6px 10px; background: #f3f4f5; border-top:1px solid #e1dfdf; border-right:1px solid #e1dfdf; text-align:center; word-break:break-all ; font-size: 15px; font-weight: 500; color: #6275a7;} .cre_box table th:first-of-type {border-left:1px solid #e1dfdf;} .cre_box table td {padding:6px 10px; border-right:1px solid var(--border)!important; word-break:keep-all;} .cre_box table td:first-of-type {margin-top:10px; padding-top:10px; border-left:1px solid var(--border)!important;} .detail_rel.inner-section {margin-top:60px; padding-bottom:100px; padding-top:90px; background:#f5f6f7;} .detail_rel h2 {font-size:30px; font-family:inherit;} .detail_rel .product-label {top:10px; left:10px;} .detail_rel .product-wish {top:10px; right:10px;} .detail_rel .product-card {margin-bottom:40px;} .detail_rel .product-image:after {background:none;} .detail_rel .product-content {padding:10px;} .detail_rel .product-action button i {background:#ccc;} .detail_rel .product-action button i:hover {background:var(--black);} .details-gallery .slick-slide {height:auto;} .inner-section.detail.credit-item {margin-bottom:0;} .goods-option-area dl {display:flex; flex-flow:row wrap; margin:10px 0;} .goods-option-area dd {margin-left:5px;} /*세일*/ .visual_sale {height:520px; margin-top:20px;} .visual_sale .swiper-slide {background:#78ab94;} .visual_sale .title {color:#f4fdc5;} .visual_sale .desc, .visual_sale .time > div, .visual_sale .name, .visual_sale .info {color:#fff;} .visual_sale .time > div {border: 1px solid #fefeff;} .visual_sale .price span {color:#b1cbbf;} .visual_sale .price strong {color:#b72323;} .sale_part {padding:100px 0; padding-bottom:160px;} .salepart_swiper {position: relative; width:100%; max-width:1320px; margin:0 auto; padding:0 20px;} .salepart_swiper .swiper-slide {padding:10px 0; height:100%; } .salepart_swiper .swiper-button-prev, .salepart_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;} .salepart_swiper .swiper-button-prev:after, .salepart_swiper .swiper-button-next:after {font-size:var(--fsize16);} .salepart_swiper .swiper-button-prev {left: 0;} .salepart_swiper .swiper-button-next {right: 0;} .salepart_swiper .swiper-pagination {bottom:-54px;} .salepart_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;} .salepart_swiper .product-card {margin-bottom:0;} .sale_part .product-card, .sale_cate .product-card {display:flex; flex-flow:column nowrap;} .sale_part .product-content, .sale_cate .product-content {flex:1; margin:0; padding:15px 0;} .sale_part .product-content > a, .sale_cate .product-content > a {display:flex; flex-flow:column nowrap; height: 100%;} .sale_part .product-name {font-weight:700;} .sale_part .product-desc {font-size:var(--fsize14); color:var(--black); font-weight:400;} .sale_part .product-price, .sale_cate .product-price {display:flex; flex-flow:row wrap; align-items:center; margin-top:auto;} .sale_part .discount, .sale_cate .discount {padding-right:5px; font-size:var(--fsize30); color:#d73535; font-weight:500;} .sale_part .price > *, .sale_cate .price > * {display:block;} .sale_part .price span, .sale_cate .price span {color:#999999; font-size:var(--fsize14); text-decoration: line-through; font-weight:400; line-height: 1;} .sale_part .price strong, .sale_cate .price strong {font-size:var(--fsize16); color:var(--black); font-weight:700; line-height: 1;} .sale_part .product-card {height:100%; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;} .sale_part .product-content {padding:15px;} .sale_cate {padding:80px 0; border-top:1px solid var(--border);} .sale_cate .container {display:flex; flex-direction:column; align-items: flex-start;} .sale_cate .nav-tabs {margin-bottom:0; padding: 15px 25px;} .sale_cate .tab {position:sticky; top:86px; background:#fff; z-index:2;} .sale_cate .tab {width:calc(100% + 30px); padding-left: 10px; margin-left: -15px; margin-right: -15px; overflow-x: auto;} .sale_cate .nav-tabs li, .event .nav-tabs li, #size_chart .nav-tabs li {padding:0; border-right: none;} .sale_cate .tab-link, .event .tab-link, #size_chart .tab-link {display:flex; align-items:center; justify-content:center; min-width:100px; height:40px; margin:5px 5px; padding:5px 10px;} .sale_cate .tab-pane {padding-top:40px;} .sale_cate .product-card {height:calc(100% - 25px);} /*이벤트*/ /*.blog-grid.single-banner {padding-bottom:40px;} .event .tab-link {min-width:130px; height:50px;} .blog-grid .blog-img {position:relative; width:100%; height:0; padding-top:63.68%;} .blog-grid .blog-img img {position:absolute; top:0; left:0; width:100%; height:100%;} .blog-grid .blog-content {padding:10px 0; text-align:center;} .event_tag {display:inline-block; padding:4px 8px; line-height:1; border: 1px solid #bfbfbf; border-radius: 50px; color: #04329f; font-size: 12px; font-weight: 500; vertical-align: middle; margin-top: -3px;} .event_tag.comming {color:#9f044a;} .event_tag.end {color:#3f3e3e;} .blog-grid .blog-title {margin-top: 5px; margin-bottom:0; } .blog-grid .blog-title a {width:100%; color:var(--black); font-weight:500; font-size:var(--fsize16);} .blog-grid .event_sche {color:var(--gray)} .blog-standard .btn {height:45px; line-height:1;} .blog-standard .list {padding-left:0; padding-right:0; border-top:2px solid var(--black);} .blog-details {border-top:1px solid var(--black);} .blog-details-top {margin-bottom:0; padding:25px 0; border-bottom:1px solid var(--border); text-align:center; word-break:keep-all;} .blog-details-title {margin-bottom:20px; font-size:22px; font-weight:700; color:var(--black); line-height:1.3;} .blog-details-meta {justify-content:center; margin-bottom:0; color:var(--gray);} .blog-details-meta .event_tag {margin-right:5px;} .blog-details-cont {padding:40px 0; border-bottom:1px solid var(--border); word-break:keep-all;} .blog-details-part .btn_wrap {display:flex; flex-flow:row wrap; justify-content:center; align-items:center;} .blog-details-part .btn {width:100%; max-width:200px; height:54px;} */ /*구매자보호*/ .protect .container > div:not(:first-of-type) {padding:20px 0;} .protect .container > div:nth-child(even) {flex-direction: row-reverse;} .protect .tab-link {padding-left:22px; padding-right:22px;} .protect .conts_wrap {display:flex; flex-flow:column nowrap; justify-content:center; width:100%; height:100%; max-width:560px;} .protect .container > div:nth-child(even) .conts_wrap {margin-left:auto;} .protect .container > div:nth-child(even) .pic {padding-right:30px; padding-left:inherit;} .protect .conts h3 {font-size: var(--fsize24); font-weight: 700; } .protect .conts h3:after {content: ""; width:100px; display: block; height:1px; margin:20px 0; background: var(--black);} .protect .conts h3 span {display:block; margin-bottom:5px; color:#999; font-size:var(--fsize16);} .protect .pic {padding-left:30px;} .protect .img_wrap {position:relative; width:100%; height:0; padding-top:65.68%; overflow:hidden;} .protect .img_wrap img {position:absolute; top:0; left:0; width:100%;} .refund_process {padding:0 15px;} .refund_process .conts_wrap {display:flex; flex-flow:column nowrap; align-items:center; max-width:none; padding:30px; box-shadow: 0px 0px 8px rgba(0,0,0,0.1);} .refund_process h4 {margin-bottom:50px; color:var(--black); font-size:var(--fsize20); font-weight:700;} .refund_process ul {display:flex; flex-flow:row wrap;} .refund_process ul li {position:relative; width:33.33%; padding:0 50px;} .refund_process ul li:not(:last-child):after {position:absolute; top:50%; right:0; font: var(--fa-font-solid); content: "\f105"; font-size: 20px;} .refund_process ul li {display:flex; flex-flow:column nowrap; align-items:center;} .refund_process ul li i {display:flex; justify-content:center; align-items:center; width:80px; height:80px; margin-bottom: 15px; background:#f0f1f1; border-radius:50px; font-size:24px;} .refund_process li strong {margin-bottom:10px; color:var(--black); font-weight:500; text-align:center;} .refund_process li strong span {display:block; font-weight:400; color:var(--gray);} .protect_review {padding:80px 15px 120px; background:#f6f6f6;} .protect_review .title {text-align:center;} .protect_review .title h2 {font-weight: 700; color: var(--black); font-size: var(--fsize30);} .protect_review .title small {display:block; margin-top:20px; font-size:var(--fsize14);} .protect_review a {display:block;} .protect_swiper {position: relative; width: 100%; max-width:1320px; margin:0 auto; padding: 0 100px;} .protect_swiper .swiper-slide {padding:10px;} .protect_swiper .cont_wrap {padding:20px; background:#fff; box-shadow: 0px 0px 8px rgba(0,0,0,0.1);} .protect_swiper .meta {display:flex; flex-flow:row wrap; align-items:center; margin-bottom:20px;} .protect_swiper .date {margin-left:auto; color:var(--gray); font-size:14px;} .protect_swiper .writer {display:flex; flex-flow:row wrap; align-items:center; margin-top:20px;} .protect_swiper .pic {display:flex; justify-content:center; align-items:center; width:40px; height:40px; margin-right:10px; padding:0!important; background:#d3d7e1; border-radius:50px; font-size:20px; font-weight:700;} .protect_swiper .name {display:block; color:var(--black);} .protect_swiper .swiper-button-prev, .protect_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;} .protect_swiper .swiper-button-prev:after, .protect_swiper .swiper-button-next:after {font-size:var(--fsize16);} .protect_swiper .swiper-button-prev {left: 0;} .protect_swiper .swiper-button-next {right: 0;} .protect_swiper .swiper-pagination {bottom:-54px;} .protect_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;} .protect_custom {padding: 80px 15px; text-align: center; background: #29364f; color:#fff;} .protect_custom h3 {margin-bottom:30px; color:#fff; font-size:var(--fsize30);} .protect_custom .btn_wrap {display:flex; justify-content:center; align-items:center; margin-top:40px;} .protect_custom button {display:flex; justify-content:center; align-items:center; width:100%; max-width:180px; height:46px; margin:5px; padding:10px; border:1px solid #fff; color:#fff;} .faq-part {padding-top:100px;} .faq-part h3 {margin-bottom:30px; text-align:center; font-size: var(--fsize30); font-weight:500;} .faq-child { border-radius: 8px; margin-bottom:10px; background: var(--white); border: 1px solid #717fa5; -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); } .faq-child:hover .faq-que button { color: var(--primary); } .faq-child:last-child { margin-bottom: 0px; } .faq-que button { width: 100%; border: none; outline: none; background: none; text-align: left; padding: 22px 25px; color: var(--black); font-weight: 500; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .faq-que span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--primary); color:var(--white);} .faq-ans { padding: 20px 25px; border-top: 1px solid var(--border); font-weight:400; } .faq-ans span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:#b1bddd; color:var(--white);} /*정리필요*/ /*지워도 됨 .navbar-focus-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .navbar-focus-list li { margin-left: 30px; } .navbar-focus-list li:first-child { margin-left: 0px; } .navbar-focus-list li a { font-weight: 500; color: var(--text); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .navbar-focus-list li a:hover { color: var(--primary); } .navbar-focus-list li a i { font-size: 18px; margin-right: 5px; } .navbar-info-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .navbar-info { margin-right: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .navbar-info:last-child { margin-right: 0px; } .navbar-info i { font-size: 24px; margin-right: 10px; color: var(--black); } .navbar-info p small { margin-bottom:-2px; font-size: 14px; line-height: 16px; display: block; text-align: left; text-transform: capitalize; color:#707070; } .navbar-info p span { font-size: 15px; } .navbar-info a, .navbar-info a:hover { color:inherit; } .header-navbar-fixed.active .navbar-part { top: 69px; background: rgba(0, 0, 0, 0.8); } .navbar-info p { color: #30457d; } .megamenu-title { padding-bottom: 18px; margin-bottom: 20px; position: relative; text-transform: capitalize; border-bottom: 1px solid var(--border); } .megamenu-title::before { position: absolute; content: ""; bottom: -2px; left: 0px; width: 50px; height: 2px; background: var(--primary); } .megamenu-list { border-left: 1px solid var(--border); } .megamenu-list li a { width: 100%; border-radius: 5px; padding: 5px 0px 5px 25px; color: var(--text); white-space: nowrap; text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .megamenu-list li a:hover { color: var(--primary); background: var(--chalk); } .megamenu-promo a img { width: 100%; border-radius: 3px; } */ .privacy-part .nav-link-a { width: 100%; font-weight: 500; padding: 12px 15px; border-radius: 8px; color: var(--text); text-transform: capitalize; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .ui-menu { position: relative; list-style: none; background-color: white; border-radius: 18px; z-index:10; box-shadow: 5px 0px 8px white; width: 214px; line-height: 200%; font-size: 18px; padding: 15px 0; border: solid 1px grey; } .ui-menu .ui-menu-item { margin: none; padding-left: 15px; padding-right:10px; } .typeahead li.active .dropdown-item { color: #16181b; text-decoration: none; background-color: #e9ecef } #search-form { position: relative; } .typeahead.dropdown-menu { width: 100%; } .cursor-pointer { cursor: pointer; } .value-color-green { color: #1ec800 ; font-size: 17px; } .privacy-part .nav-link-a:hover { color: var(--primary); background: var(--chalk); } .privacy-part .nav-link-a.active { color: var(--primary); background: var(--chalk); } .privacy-part .nav-link-a::before { right: 15px; } .privacy-part .nav-link-a i { font-size: 20px; margin-right: 12px; } .privacy-part .nav-link-a.active { color: var(--primary); background: var(--green-chalk); } .certi-btn { height: 100% !important; line-height: 1 !important; width: 140px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; font-size: 12px !important; } .spinner { margin-right: 5px; display: none; } .sso-login-btn { border: 1px solid #ddd !important; } .sso-login-btn img { width: 25px; } .page-pc .pay-type-content { display:none; padding: 25px; margin-top:-2px; margin-bottom: 25px; background: #fff; border-color: #b4bdd3; border-radius: 8px; border: 1px solid var(--border); position: relative; /*padding: 10px; border: 2px solid #c5c7cd; background-color: #f4f6fa; */ } .pay-type-sections {display:flex; flex-flow:row wrap; justify-content:space-between;} .pay-type-sections li {width:49.5%;} .pay-type-sections input, .pay-type-sections select {width:100%;} #paymethod1 {display:block;} .cypto2-group li {width:33%;} .pay-cypto li {width:42%;} .pay-cypto .avail {width:15%; text-align:center;} .pay-cypto .avail strong {display:block; margin-top: 0.5rem; line-height:45px;} .pay-cypto .avail i {line-height:45px;} .page-pc .virtual-account-payment-explain { padding-top: 20px; margin-bottom: 10px; } .checkout-part input { padding: 0 3px; } /*.page-pc input:read-only,*/ /*.page-pc input:disabled {*/ /* padding: 0 3px;*/ /* color: black;*/ /* border-color: #e9e4e4;*/ /* background: #fff;*/ /*}*/ .page-pc .virtual-account-payment-explain dd { display: list-item; list-style-type: disc; list-style-position: inside; margin-bottom: 5px; line-height: 15px; color: #888; font-size: 13px; } .invoice-details li p { width: 100%; } #medium-modal .sort-div { margin-right: 10px; } .account-content .paymethod-div { margin-right: 20px; } .rounded-top-0 { border-top-left-radius: 0!important; border-top-right-radius: 0!important } .rounded-bottom-0 { border-bottom-right-radius: 0!important; border-bottom-left-radius: 0!important } .rounded-left-0 { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important } .rounded-right-0 { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important } .radius-r0 {border-top-right-radius:0!important; border-bottom-right-radius:0!important;} .radius-l0 {border-top-left-radius:0!important; border-bottom-left-radius:0!important;} .weekly-best-image, .best-image { width: 210px; height: 210px; } .login .login_sns button { width: 80%; height: 55px; margin-bottom: 8px; text-align: center; border: 1px solid #ddd; background-color: white; } .form-text { color: var(--text); background: white; border: 1px solid black; } .orderlist-part { margin-bottom: 0!important; } .end-event { opacity: 0.3; } #modal-cancel-dormant-account .btn_ok { display:flex; align-items:center; justify-content:center; width:100%; height:45px; border-radius:50px; max-width: 230px; font-size: 15px !important; } #modal-cancel-dormant-account-success .modal-footer button, #modal-cancel-dormant-account #dormant-cancel-btn { background-color: #ff661b; } #modal-cancel-dormant-account .modal-body { background-color: #f5f5f5; } #modal-cancel-dormant-account .modal-header { position: relative; background-color: #ff8012 !important; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 0.5rem 0.938rem; border-bottom: 1px solid rgba(0,0,0,.125); border-top-left-radius: calc(0.3125rem - 1px); border-top-right-radius: calc(0.3125rem - 1px); } .modal-header .close { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 0; margin: 0; background: rgb(255 255 255 / 90%); color: #f33030!important; border-radius: 50%; width: 30px; height: 30px; } .btn_orange { border-color: #d57755 !important; background: #d57755; font-size: 1.6rem; border-radius: 5px; color: #fff; } .btn_orange:hover { background: #cf5c33 !important; color: #fff; } @media (min-width: 1400px) { } @media (max-width:480px) { .page-pc .virtual-account-payment-explain dd { line-height: 18px; } .pay-type-sections li {width:100%!important;} .pay-cypto .avail {text-align:left;} .pay-cypto .avail strong {display:inline-block; line-height: inherit; margin-bottom: 20px;} }