/* header */ #header {position: fixed; width:100%; z-index: 99; background:var(--white); transition: 1s;} #header .header-top {position: relative; width:1280px; margin:0 auto;height:100px;} #header .header-logo {position: absolute; top:32px; left:0;} #header.header-flooting-fixed {position:fixed; top:0;} #header .header-top .header-top-search {position:absolute; display:flex; top:50%; transform: translateY(-50%); left:232px; z-index: 1} #header .header-top .top-search-all fieldset {display:flex;} #header .header-top .top-search-all .bootstrap-select .dropdown-toggle {background:var(--white); border:none;} #header .header-top .top-search-all .change-sort {width:160px; flex-shrink: 0; border-radius: 16px 0 0 16px; font-size:var(--font14); border:1px solid var(--gray10);} #header .header-top .top-search-all .search-input-box {display:flex; width:100%; z-index:1;} #header .header-top .top-search-all .search-input-box .search-input {background:#f5f5f5; width:360px; padding:0 16px; border:1px solid #dedfe4; border-width:1px 0;} #header .header-top .top-search-all .search-input-box .search-btn {width:48px; background:var(--primary) url("/assets/img/common/icon-search-ff.svg")no-repeat center; border-radius: 0 16px 16px 0; flex-shrink: 0;} #header .header-top .top-search-all .search-input-box .hidden-box {top:100%; padding:24px 20px} #header .header-top .top-search-all .search-input-box .hidden-box .btn-hidden-box-close {position: absolute; right:10px; top:10px; width:24px; height:24px;background:url("/assets/img/common/icon-close-s.svg")no-repeat center; background-size:23px 23px;} #header .header-top-search .search-menu-top {display:none;} #header .bootstrap-select .dropdown-menu {background: #fff; border-radius: 16px 0 16px 16px; white-space: nowrap} #header .search-detail-info {display:flex; gap:20px;} #header .search-detail-info .my-search-keyword .title {width:300px; border-bottom:1px solid #c1c2c7; font-size:var(--font16); font-weight: bold; padding-bottom:10px; margin-bottom:16px;} #header .search-detail-info .my-search-keyword .list ul {display:flex; flex-direction: column; gap:10px;} #header .search-detail-info .my-search-keyword .list ul li {position: relative; padding-right:16px;} #header .search-detail-info .my-search-keyword .list ul li a {font-size:var(--font14);} #header .search-detail-info .my-search-keyword .list ul li .btn-delet {position: absolute; right:0; top:0; width:16px; height:16px; background:url("/assets/img/common/icon-close-s.svg")} #header .search-detail-info .my-search-keyword .no-list {color:#82838b} #header .search-detail-info .piki-search-lanking .title {width:360px; border-bottom:1px solid #c1c2c7; font-size:var(--font16); font-weight: bold; padding-bottom:10px; margin-bottom:16px; color:var(--primary);} #header .search-detail-info .piki-search-lanking .tab-list-wrap {display:flex; gap:4px; margin-bottom:10px;} #header .search-detail-info .piki-search-lanking .tab-list-wrap li {display:block; height:40px; width:100%; line-height: 40px; border-radius: 16px; border:1px solid #dedfe4; color:#82838b; background:#f5f5f5; text-align: center; transition: 0.3s; cursor: pointer;} #header .search-detail-info .piki-search-lanking .tab-list-wrap li.current {border-color:#1a1a1a; color:#1a1a1a; font-weight: bold;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap ul.lanking {display:flex; flex-direction: column; gap:10px;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap ul.lanking li {position: relative;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap ul.lanking li a {display:flex; align-items: center;} #header .search-detail-info .piki-search-lanking .list {width:360px;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap .lank-number {display:block; flex-shrink: 0; width:30px; height:30px; border-radius: 50%; text-align: center; line-height: 30px; color:#fff; background:var(--primary); font-size:var(--font14);} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap .lank-name {display:block; font-size:var(--font16); margin-left:8px; padding-right:30px;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap .mark-state {position: absolute; right:0; top:calc(50% - 8px); height:16px; width:16px;} #header .search-detail-info .piki-search-lanking .tab-cnt-wrap .mark-state img {position: absolute; top:0; left:0;} #header .search-detail-info .piki-search-autolist .list {width:464px;} #header .search-detail-info .piki-search-autolist .list ul {display:flex; flex-direction: column; gap:10px;} #header .search-detail-info .piki-search-autolist .list ul li {position: relative; padding-right:16px;} #header .search-detail-info .piki-search-autolist .list ul li a {font-size:var(--font14);} #header .search-detail-info .piki-search-autolist .list ul li a b {color:var(--primary)} #header .header-top .header-top-lank {margin-left:20px; padding:9px 0;} #header .header-top .header-top-lank .swiper {height:30px;} #header .header-top .header-top-lank .lank-number {display:inline-block; width:30px; height:30px; border-radius: 50%; text-align: center; line-height: 30px; color:#fff; background:var(--primary); font-size:var(--font14);} #header .header-top .header-top-lank .lank-name {font-size:var(--font16); width:140px; margin-left:8px; font-size:var(--font16)} #header .header-top .header-top-usermenu {position: absolute; right:0; top:50%; transform: translateY(-50%); z-index:1;} #header .header-top .header-top-usermenu .top-usermenu-ul {display:flex; gap:24px;} #header .header-top .header-top-usermenu .top-usermenu-ul .count {position: absolute; top:0; right:0; width:16px; height:16px; background:var(--primary); font-size:var(--font12); text-align: center; line-height: 16px; border-radius: 50%; color:var(--white);} #header .header-top .header-top-usermenu .hidden-box {position: absolute; top:100%; left:0; margin-top:8px; width:200px;} #header .header-top .header-top-usermenu .hidden-box .hidden-box-top {display:none; z-index:10; border-bottom:1px solid #c1c2c7; position: absolute; top:0; width:100%; height:60px;} #header .header-top .header-top-usermenu .hidden-box .btn-hbox-close {position: absolute; top:16px; right:16px; cursor: pointer;} #header .header-top .header-top-usermenu .hidden-box .btn-hbox-close {display:block; width:24px; height:24px; background:url(/assets/img/common/icon-close-s.svg)no-repeat center; background-size:23px;} #header .header-top .header-top-usermenu .hidden-box ul { padding:16px;} #header .header-top .header-top-usermenu .hidden-box ul li a {display:block; /*height:30px; line-height: 30px;*/ font-size:var(--font14); margin-bottom: 10px; } #header .header-top .header-top-usermenu .hidden-box ul li a:hover {color:var(--primary); font-weight: bold;} #header .header-top .header-top-usermenu .hidden-box ul li.mobile { display: none; } #header .change-lang .dropdown-toggle { max-width: 36px; height: 36px; padding: 0; background: transparent url(/assets/img/common/icon_lang.svg) no-repeat center center; background-size: contain; } #header .bootstrap-select .dropdown-toggle i { width: 100%; height: 100%; } #header .change-lang .dropdown-toggle .caret::after { display: none; } #header .change-lang .dropdown-menu li span.text i { display: none; } #header .change-lang .dropdown-menu { width: 115px; top: 120%; left: auto; } #header .change-lang .dropdown-menu .inner { overflow: hidden; } #header .header-navi {border:1px solid #dedfe4; border-width:1px 0;} #header .header-navi .header-navi-inner {position: relative; height:62px;} #header .header-navi .btn-navi-category {position: relative; width:62px; height:62px; border:1px solid #dedfe4; border-width:0 1px;} #header .header-navi .btn-navi-category i {position: absolute; top:calc(50% - 1px); left:calc(50% - 15px); width:30px; height:2px; background:var(--primary)} #header .header-navi .btn-navi-category i:after {content:''; position: absolute; top:-10px; left:0; width:30px; height:2px; background:var(--primary)} #header .header-navi .btn-navi-category i:before {content:''; position: absolute; top:10px; left:0; width:30px; height:2px; background:var(--primary)} #header .header-navi .header-navi-event {position: absolute; left:100px; top:0;} #header .header-navi .header-navi-event .navi-event-list {display:flex; gap:24px; height:62px;} #header .header-navi .header-navi-event .navi-event-list li a {display:block; line-height:62px; padding:0 16px; font-size:var(--font16);} #header .header-navi .header-navi-event .btn-search-mb {display:none;} #header .header-navi .header-navi-util {position: absolute; right:0px; top:0; height:100%;} #header .header-navi .header-navi-util .logout-status {display:flex; align-items: center; height:100%;} #header .header-navi .header-navi-util .logout-status p:after {content:''; display:inline-block; vertical-align: middle; width:1px; height:12px; background:var(--gray10); margin:0 16px;} #header .header-navi .header-navi-util .logout-status p:last-child:after {display:none;} #header .header-navi .header-navi-util .logout-status a.btn-join {color:#82838b} #header .header-navi .header-navi-util .login-status {display:flex; align-items: center; height:100%;} #header .header-navi .header-navi-util .login-status .user-name {font-size:var(--font16); margin-right:24px;} #header .header-navi .header-navi-util .login-status a:nth-child(2) {margin-right:10px;} #header .header-navi .header-navi-util .login-status .btn-mssg.new {position: relative} #header .header-navi .header-navi-util .login-status .btn-mssg.new:after {content:''; position: absolute; top: 0px; right: 0px; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--primary);} @media all and (min-width : 1280px ) { #header.header-flooting-fixed .header-top {height:auto;} #header.header-flooting-fixed .header-top .header-logo {left:85px; top:12px; z-index:1;} #header.header-flooting-fixed .header-top .header-logo img {width:162px;} #header.header-flooting-fixed .header-navi .header-navi-event {display:none;} #header.header-flooting-fixed .header-top .header-top-search {left:277px; top:9px; transform: none;} #header.header-flooting-fixed .header-navi .header-navi-util {display:none;} #header.header-flooting-fixed .header-top .header-top-usermenu {top:15px; transform: none;} #header.header-flooting-fixed .header-navi .btn-navi-category {position: absolute; top:0;} #header.header-flooting-fixed .header-top .header-top-lank {display:none;} } @media all and (max-width : 1440px ) { } @media all and (max-width : 1280px ) { #header .header-top {display:flex; max-width:100%; height:60px; justify-content:space-between; } #header .header-logo {position: relative; top:initial; padding-left:56px; height:100%; display:flex; align-items: center; justify-content: center;} #header .header-logo img {width:110px;} #header .header-navi .btn-navi-category {position: absolute; top:-61px; border:none; width:56px; height:60px;} #header .header-navi .btn-navi-category i {width:24px; left:calc(50% - 13px);} #header .header-navi .btn-navi-category i:before {width:24px; top:-7px;} #header .header-navi .btn-navi-category i:after {width:24px; top:7px;} #header .header-top .header-top-search {display:none; position: fixed; z-index: 2; top: 0; left: 0; transform: none; width: 100%; height: 100%; background: #fff;} #header .header-top .header-top-search.active {display:block;} #header .header-top .top-search-all .search-input-box .hidden-box {visibility: visible; opacity: 1; position: absolute; top:100%; left:0; width:100%; border:none; border-radius: 0; padding:0 16px 16px;} #header .header-top .top-search-all .search-input-box .hidden-box .btn-hidden-box-close {display:none;} #header .search-detail-info {flex-direction: column;} #header .search-detail-info .piki-search-lanking .title {width:100%;} #header .search-detail-info .piki-search-lanking .list {width:100%;} #header .header-top .header-top-lank {display:none;} #header .header-top .top-search-all {width:100%; overflow-y: auto; height:calc(100% - 60px);} #header .header-top .top-search-all .change-sort {display:none;} #header .header-top .top-search-all .search-input-box {padding:16px;} #header .header-top .top-search-all .search-input-box .search-input {border-radius:16px 0 0 16px; width:100%; height:48px; border-width:1px 0 1px 1px;} #header .header-top-search .search-menu-top {display:block; position: relative; height:60px; border-bottom:1px solid #1a1a1a;} #header .header-top-search .search-menu-top span {font-size:var(--font14); font-weight:bold; height:60px; line-height: 60px; display:block; padding:0 16px;} #header .header-top-search .search-menu-top .btn-all-close {position: absolute; right:16px; top:calc(50% - 12px); width:24px; height:24px;background:url("/assets/img/common/icon-close-s.svg")no-repeat center; background-size:23px 23px;} #header .header-top .header-top-usermenu {position: relative; display:flex; align-items: center; transform: initial; top:initial; padding-right:16px;} #header .header-top .header-top-usermenu .hidden-box {position:fixed; padding-top:60px; width:100%; top:0; left:0; height:100%; margin-top:0; border: none; border-radius: 0;} #header .header-top .header-top-usermenu .hidden-box .hidden-box-top {display:block;} #header .header-top .header-top-usermenu .top-usermenu-ul {gap:12px;} #header .header-top .header-top-usermenu .top-usermenu-ul li img {width:24px;} #header .header-top .header-top-usermenu .top-usermenu-ul li.usermenu-order {display:none;} #header .header-top .header-top-usermenu .top-usermenu-ul li.usermenu-cart .count {display:none;} #header .header-top .header-top-usermenu .hidden-box ul { padding: 20px 16px;} #header .header-top .header-top-usermenu .hidden-box ul li a, #header .header-top .header-top-usermenu .hidden-box .menu-biz p { height:48px; line-height: 48px; margin: 0; border-bottom: 1px solid #dedfe4; font-size:var(--font14);} #header .header-top .header-top-usermenu .hidden-box .menu-biz a { height: 40px; line-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--gray11); background: var(--gray13); color: var(--gray04); } #header .header-top .header-top-usermenu .hidden-box ul li.mobile { display: block; } #header .change-lang .dropdown-toggle { max-width: 26px; height: 26px; text-align: center; } #header .header-navi .header-navi-event {left:0; width:100%;} #header .header-navi .header-navi-inner {height:36px;} #header .header-navi .header-navi-event .navi-event-list {gap:20px; height:36px; gap:0; padding-right:40px; overflow-x: auto} #header .header-navi .header-navi-event .navi-event-list::-webkit-scrollbar {height:3px;} #header .header-navi .header-navi-event .navi-event-list li a {white-space: nowrap; padding:0 16px; height:36px; line-height: 36px; font-size:var(--font14);} #header .header-navi .header-navi-util {display:none; left:16px; top:-48px; z-index: 1;} #header .header-navi .header-navi-util.on {display:block;} #header .header-navi .header-navi-util {width:calc(100% - 60px);} #header .header-navi .header-navi-event .btn-search-mb {display:block; position: absolute; right:0; top:0;} #header .header-navi .header-navi-event .btn-search-mb i {display:block; width:36px; height:36px; border-radius: 16px; background:var(--primary) url("/assets/img/common/icon-search-ff.svg")no-repeat center;} #header .search-detail-info .my-search-keyword .title { width: 100%; } } @media all and (max-width : 1024px ) { } @media all and (max-width: 960px) { } @media all and (max-width:640px) { } @media all and (max-width: 320px) { #header .header-logo {padding-left:36px; } #header .header-logo img {width:100px;} #header .header-navi .btn-navi-category {position: absolute; top:-61px; border:none; width:56px; height:60px;} #header .header-navi .btn-navi-category i {width:20px; left:calc(50% - 20px);} #header .header-navi .btn-navi-category i:before {width:20px; top:-7px;} #header .header-navi .btn-navi-category i:after {width:20px; top:7px;} #header .header-navi .header-navi-event .btn-search-mb i { border-radius: 50%; } #header .header-top .header-top-usermenu { padding-right: 10px; } #header .header-top .header-top-usermenu .top-usermenu-ul { gap: 4px; } #header .change-lang .dropdown-toggle { max-width: 26px; height: 26px; } } /* header modal */ #login .modal-head h4 { font-size: var(--font16); } #login .modal-body .input-basic input { height: 48px; line-height: 48px; } #login .modal-body .form-basic + .form-basic { margin-top: 10px; } #login .modal-body .btn-box { margin-top: 10px; } #login .modal-body .btn-box .btn { margin-top: 0; } #login .modal-body .change-pw a { font-size: var(--font13); margin: 15px 0; } #login .modal-body .move-signup { border-top: 1px solid var(--gray10); margin-bottom: 1px; } #login .modal-body .move-signup p { font-size: var(--font13); margin: 13px 0 9px; } #sgmMember .modal-body .provide-agree { word-break: keep-all; } #sgmMember .modal-body .provide-info p { display: inline-block; line-height: 26px; padding: 5px 20px 5px 5px; margin-bottom: 10px; border-radius: 18px; background-color: var(--white); } #sgmMember .modal-body .provide-info p span { display: inline-block; width: 26px; height: 26px; margin-right: 4px; border-radius: 50%; background-color: var(--gray10); } #sgmMember .modal-body .provide-info p img { vertical-align: middle; } #sgmMember .modal-body .agree-chk label span { color: var(--gray06); } #mobileCheck .modal-body {} #mobileCheck .modal-body .valid-time { position: absolute; top: 17px; right: 15px; font-size: var(--font12); color: var(--primary); } #mobileCheck .modal-body .certify-re { margin: 15px 0 5px; font-size: var(--font12); text-align: right; } #mobileCheck .modal-body .certify-re button { font-size: var(--font12); text-align: right; } #mobileCheck .modal-body .bootstrap-select .form-control { height: 42px; line-height: 42px; } #mobileCheck .modal-body .bootstrap-select .dropdown-menu.inner { padding-bottom: 60px; } #mobileCheck .modal-body .bootstrap-select .dropdown-menu .nation { padding-right: 25px; } #mobileCheck .modal-body .bootstrap-select .nation { display: flex; justify-content: space-between; align-items: center; gap: 20px; } #mobileCheck .modal-body .bootstrap-select .nation i img { max-width: 25px; vertical-align: middle; } @media all and (max-width : 480px ) { #login .modal-body .change-pw a { margin: 10px 0; } } /* footer */ #footer { color: var(--gray08); padding: 31px 0; background-color: var(--gray02); } #footer .bootstrap-select .dropdown-menu, #footer .bootstrap-select .dropdown .dropdown-menu { top: auto; bottom: 100%; } #footer .bootstrap-select .dropdown-toggle .filter-option-inner-inner { top: auto; bottom: 100%; } #footer .company-wrap { display: flex; align-items: flex-start; padding-bottom: 22px; } #footer .company-wrap ul li { display: inline-block; margin-right: 10px; } #footer .company-wrap .company-info { margin-left: 55px; } #footer .company-wrap .ft-link { margin-left: auto; flex: 0 0 auto; } #footer .company-wrap .ft-link .sns { flex: 0 0 auto; } #footer .company-wrap .ft-link .sns a img {filter:brightness(0.3)} #footer .right-wrap { font-size: 13px; /*font-size: var(--font13);*/ padding-top: 24px; border-top: 1px solid var(--gray03); } #footer .right-wrap .policy-wrap { position: relative; } #footer .right-wrap .policy-terms { position: relative; margin-right: 20px; } #footer .right-wrap .policy-terms::after { position: absolute; top: 4px; right: -12px; content:""; display: inline-block; width: 1px; height: 12px; background-color: var(--gray05); } #footer .right-wrap .bootstrap-select .dropdown-menu { right: 0; left: auto; bottom: 30px; } #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 195px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 200px; } #footer .right-wrap .bootstrap-select .dropdown-toggle { font-size: var(--font13); color: var(--white); padding: 0; border: 0; border-radius: 0; background-color: transparent; } #footer .right-wrap .bootstrap-select .dropdown-toggle .caret::after { display: none; } #footer .right-wrap .bootstrap-select .dropdown .dropdown-menu { top: auto; bottom: 100%; } #footer .right-wrap .terms-wrap a { position: relative; color: var(--gray08); margin-right: 20px;} #footer .right-wrap .terms-wrap a:last-child { margin: 0; color: var(--white); font-weight: var(--font600); } #footer .right-wrap .terms-wrap a:not(:last-child)::after { position: absolute; top: 3px; right: -12px; content: ""; display: inline-block; width: 1px; height: 11px; background-color: var(--gray04); } /* #footer .company-wrap .ft-link .bootstrap-select .dropdown-toggle { color: var(--white); padding: 10px 20px 10px 40px; background: var(--black) url('/assets/img/common/icon_lang_w.svg') no-repeat 20px 50%; } */ @media all and (max-width : 1280px ) { #footer .company-wrap .company-info ul li { display: block; font-size: var(--font13); } } @media all and (max-width: 960px) { #footer .company-wrap ul li { margin-right: 5px; } #footer .company-wrap { flex-direction: column; } #footer .company-wrap .company-info { margin: 20px 0; } #footer .company-wrap .ft-link { margin: 0; } #footer .right-wrap { flex-direction: column-reverse; align-items: baseline; } #footer .right-wrap .bootstrap-select .dropdown-menu { right: auto; left: 0; } } @media all and (max-width: 640px) { #footer .right-wrap { font-size: 12px; } #footer .company-wrap .ft-link .bootstrap-select { width: 100%; } #footer .company-wrap .ft-link .bootstrap-select .dropdown-toggle { padding: 7px 12px 7px 30px; background-position: 11px 50%; } #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 195px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 190px; } } @media all and (max-width: 480px) { #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 165px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 170px; } } @media all and (max-width: 320px) { #footer .company-wrap .ft-link { flex-direction: column; align-items: flex-start; gap: 7px; } #footer .company-wrap .ft-link .bootstrap-select { width: auto; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { left: auto; right: 0; } } /* sub common */ /*#container { padding-top: 75px; }*/ #container {margin-top:164px;} .sub-container { } .sub-container .sub-basic { padding: 40px 0 60px; } /*.sub-container .sub-top-banner { padding-top: 0 !important; }*/ .sub-container .sub-tit h2, .sub-container .sub-tit-wrap h2 { font-size: var(--font30); color: var(--gray02); font-weight: var(--font800); text-align: center; margin-bottom: 30px; } .sub-container .sub-tit h3, .sub-container .sub-tit-wrap h3 { font-size: var(--font30); color: var(--gray02); font-weight: var(--font800); text-align: center; margin-bottom: 30px; } .sub-container .mypage-wrap .sub-tit h3 {margin-top:20px;} .sub-container .h3-tit { font-size: var(--font20); font-weight: var(--font600); /*margin-bottom: 10px; */} .sub-container .h3-point {font-size: var(--font30); font-weight: bold; text-align: center; padding:0 0 40px;} .sub-container .h3-point b {color:var(--primary)} .sub-container .h4-tit { font-size: var(--font16); font-weight: var(--font600); margin-bottom: 5px; } .sec-tit-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section { position: relative; width: 100%; margin:0 auto; } .section > p.p-summary { font-size: var(--font13); color: var(--gray07); margin-bottom: 20px; } .section aside { position: sticky; top: 100px; } .section aside .aside-inner { width: 274px; max-height: calc(100vh - 130px); padding: 0 10px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .section:not(:last-child):has(.sec-tit) { margin-bottom: 30px; } .max-w600 { position: relative; width: 100%; max-width: 600px; margin:0 auto; } .max-w1000 { position: relative; width: 100%; max-width: 1000px; margin:0 auto; } .max-w1180 { position: relative; width: 100%; max-width: 1180px; margin:0 auto; } .max-w1280 { position: relative; width: 100%; max-width: 1280px; margin:0 auto; } .max-w1560 { position: relative; width: 100%; max-width: 1560px; margin:0 auto; } .mark-required { font-size: var(--font14); color: var(--primary); vertical-align: top; } .uniqueId { word-break: break-all } .hashtag a { color: var(--primary); margin-right: 6px; cursor: pointer; } .js-copy button { flex: 0 0 auto; width: 17px; height: 12px; padding-left: 5px; } .js-copy button img { vertical-align: text-top; } /*.exchange-dollar { font-size: var(--font13); color: var(--gray05); text-align: right; }*/ .exchange-money { font-size: var(--font12); color: var(--gray08); text-align: right; } .exchange-money b {color: var(--black);} @media all and (max-width : 1600px ) { .max-w1560 { padding: 0 2%; } } @media all and (max-width : 1280px ) { .max-w1180 { padding: 0 2%; } #container {margin-top:98px;} } @media all and (max-width : 1024px ) { /*#container { padding-top: 60px; }*/ .max-w1000 { padding: 0 2%; } } @media all and (max-width : 960px ) { .sub-container .sub-basic { padding: 20px 0 40px; } } @media all and (max-width : 768px ) { .sub-container .sub-tit h2, .sub-container .sub-tit-wrap h2 { margin-bottom: 10px; } .sub-container .mypage-wrap .sub-tit h3 {margin:0 0 20px !important;} .section aside { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; padding: 15px 14px 8px; border:none; border-radius: 0; background-color: var(--white); z-index: 99; display: none; } .section aside .aside-inner { width: 100%; } .section:not(:last-child):has(.sec-tit) { margin-bottom: 18px; } .max-w600, .max-w1000, .max-w1560 { padding: 0 3%; } } /* form */ .form-basic { margin-bottom: 24px; } .form-basic .label-box { width: 100%; font-size: var(--font16); font-weight: var(--font500); margin-bottom: 10px;} .form-basic .input-box { position: relative; } .form-basic .input-box input { width:100%; } .form-basic .input-box input.w80 { width:80px !important; } .form-basic .input-box input.calendar { padding-right: 30px; background: var(--gray13) url(/assets/img/market/icon_calendar.svg) no-repeat right 12px top 50%; background-size: 20px; box-shadow: 0 0 0 10px transparent inset; -webkit-box-shadow: 0 0 0 10px transparent inset;} /*.form-basic .input-box input.calendar:focus { background-color: var(--white); }*/ .form-basic .input-box .select-value { position: relative; display: flex; align-items: center; flex: 1; } .form-basic .input-box .select-value input { padding-right: 50px; } .form-basic .input-box .select-value .etc { position: absolute;right: 16px; } .form-basic .input-box.input-date { display: flex; align-items: center; gap: 0 4px; } .form-basic .input-box.input-date input { width: 50%; max-width: 291px; } .form-basic .file-box { width: 100%; } .form-basic .file-box.file-box-flex { display:flex; align-items:center; flex-wrap: wrap; } .form-basic .file-box.file-box-flex .file-name { /*width:calc(100% - 0px);*/ } .form-basic .file-box.file-box-flex .file-btn { flex:0 0 auto; /*width:;*/ } .form-basic .file-box.file-box-flex .file-btn label { display:inline-block; text-align: center; } .form-basic .file-box .img-wrap.img-preview .img-box { transition: all 0.5s; } .form-basic .file-box .img-wrap.img-preview .img-box label { display:flex; justify-content: center; align-items: center; width: 100%; height:100%; position:absolute; top:0; left:0; border-radius: var(--radius20); border: 2px dashed var(--gray10); overflow: hidden; } .form-basic .file-box .img-wrap.img-preview .img-box label::after { display: block; width:36px; height: 36px; line-height: 36px; content: "\e913"; font-family: 'xeicon'; font-size: var(--font22); color: var(--white); text-align: center; border-radius: 50%; background-color: var(--gray02); } .form-basic .file-box .img-wrap.img-preview .img-box label img { display: none; opacity: 0; } .form-basic .file-box .img-wrap.img-preview .img-box label.preview-ing { border: 1px solid rgba(0, 0, 0, 0.08); background-color: var(--gray13); cursor: wait; pointer-events: none; } .form-basic .file-box .img-wrap.img-preview .img-box label.preview-ing::after { display: none; } .form-basic .file-box .img-wrap.img-preview .img-box label.preview-is { border: 1px solid rgba(0, 0, 0, 0.08); } .form-basic .file-box .img-wrap.img-preview .img-box label.preview-is::after { display: none; } .form-basic .file-box .img-wrap.img-preview .img-box label.preview-is img { display: block; opacity: 1; } .form-basic .file-box .img-wrap.img-preview .img-box .del-preview { position:absolute; top:6px; right: 6px; display:inline-block; z-index:5; } .form-basic .file-box .img-wrap.img-preview .img-box .del-preview i { width:20px; height: 20px; line-height: 20px; font-size: var(--font10); color: var(--white); text-align: center; border-radius: 50%; background-color: var(--black); opacity: 0.54; cursor: pointer; } .form-basic .file-box .img-wrap.img-upsize { max-width: 140px; } .form-basic .file-box .img-wrap.img-uploading .img-box { opacity: 0.5; pointer-events: none; } .form-basic + .form-basic { margin-top: 5px; } @media all and (max-width : 768px) { .form-basic .file-box .img-wrap.img-upsize { max-width: 120px; } } .form-warp { } .form-warp .form-w {} .form-warp .form-w .w-guide { font-size: var(--font13); color: var(--gray07); margin-bottom: 5px; } .form-warp .form-w .w-guide + .file-box { margin-top: 11px; } .form-warp .form-w .btn-add-input { text-align: right; } /* input spinner */ .input-range p { margin: 32px 0 15px; } .range-num {display:flex; gap:5px; align-items: center; justify-content: center} .range-num .opt-stock {margin-left:5px; color:var(--gray07)} .range-num .volume { width: 48px; height: 48px; vertical-align: bottom; border-radius: 24px; border: 1px solid var(--gray10); background: url('/assets/img/market/icon_count.svg') no-repeat -49px 0; } .range-num .btn-plus:hover { background-position: -1px 0; } .range-num .btn-minus { background-position: -144px 0; } .range-num .btn-minus:hover { background-position: -96px 0; } .range-num .piece { width: 75px; text-align: center; background: none; } .range-num .piece.disable { opacity: 0.5; pointer-events: none; user-select : none; } @media all and (max-width : 480px) { .range-num .volume { width: 33px; height: 33px; background-position: -56px -8px; } .range-num .btn-plus:hover { background-position: -8px -8px; } .range-num .btn-minus { background-position: -152px -8px; } .range-num .btn-minus:hover { background-position: -104px -8px; } .range-num .piece { width: 65px; } } /* star-rating */ .star-rating { display: flex; flex-direction: row-reverse; } .star-rating label { } .star-rating label i { width: 16px; height: 16px; background: url("/assets/img/common/icon_star_default.svg") no-repeat center center; cursor: pointer; } .star-rating label:hover ~ label i, .star-rating:not(:checked) label:hover i { background: url("/assets/img/common/icon_star_on.svg") no-repeat center center; } .star-rating input:checked ~ label i, .star-rating input:checked + label i { background: url("/assets/img/common/icon_star_on.svg") no-repeat center center; } /* check st */ .label-st-v label, .label-st-o label { position: relative; display: inline-block; min-height: 20px; line-height: 20px; padding-left:30px; user-select: none; cursor: pointer; } /* 스트라이프 이미지 */ .label-st-v label::before, .label-st-o label::before { position: absolute; left: 0; display: inline-block; content:""; width: 20px; height: 20px; margin-right: 4px; border:1px solid #dedfe4; background-color:#fff;: } .label-st-v label::before {border-radius: 6px;} /* v */ .label-st-o label::before {border-radius: 50%;} /* v */ .label-st-v input:checked + label::before { background:#1a1a1a url('/assets/img/common/icon-check-12-s-ff.svg') no-repeat center; background-size: 12px 12px; border-color:#1a1a1a; } .label-st-o label::before {top: 0;} /* o */ .label-st-o input:checked + label::before { background: url('/assets/img/common/radio_chcked.svg') no-repeat 0 0; background-size: contain; } .label-st-v input.disable + label::before { background: url('/assets/img/common/check_disable.svg') no-repeat 0 0; background-size: contain; } .label-st-o input.disable + label::before { background: url('/assets/img/common/radio_disable.svg') no-repeat 0 0; background-size: contain; } .label-st-flex ul { display: flex; align-items: center; gap: 30px; } /* tab st */ .tab-list-wrap.tab-st-line {border:1px solid var(--gray10); border-width:1px 0; display:flex;} .tab-list-wrap.tab-st-line .tab-list { flex: 1 1 0; } .tab-list-wrap.tab-st-line .tab-list > a {position: relative; display:block; height:56px; line-height: 56px; min-width:150px; text-align: center; font-size: var(--font18); color:#82838b;} .tab-list-wrap.tab-st-line .tab-list.current > a {background:var(--white) !important; color:var(--black) !important;} .tab-list-wrap.tab-st-line .tab-list.current > a:after {content:''; width:100%; height:2px; background:var(--black); position: absolute; bottom:0; left:0;} @media all and (max-width : 640px) { .tab-list-wrap.tab-st-line .tab-list > a { min-width: initial; height: 40px; line-height: 40px; font-size: var(--font13); } } /* nft 상품 내 체크박스 v */ .img-wrap .label-st-v { position: absolute; left: 10px; bottom: 5px; z-index: 999; } .img-wrap .label-st-v label { padding-left: 20px; } @media all and (max-width : 640px) { /*.label-st-v label,*/ /*.label-st-o label { min-height: 20px; padding-left:24px; }*/ /*.label-st-v label::before, .label-st-o label::before { width: 20px; height: 20px; }*/ /*.label-st-v label::before { background-size: 80px; }*/ /*.label-st-v input:checked + label::before { background-position: -20px 0; }*/ /*.label-st-o label::before { background-size: 80px; background-position: 0 -20px; } .label-st-o input:checked + label::before { background-position: -20px -20px; }*/ /*.label-st-v input.disable + label::before { !*background-position: -70px 0;*! }*/ /*.label-st-o input.disable + label::before { !*background-position: -47px -23px; *! }*/ .label-st-v label, .label-st-o label { min-height: 20px; padding-left:24px; } .label-st-v label::before, .label-st-o label::before { top: 1px; width: 18px; height: 18px; } /* .label-st-v label::before, .label-st-v input:checked + label::before, .label-st-o label::before, .label-st-o input:checked + label::before, .label-st-v input.disable + label::before, .label-st-o input.disable + label::before { background-size: contain; }*/ .label-st-flex ul { gap: 12px; } } /* helpTip */ .helpTip { display: inline-block; width: 20px; height: 20px; margin-left: 3px; background: url("/assets/img/common/icon_help.svg") no-repeat 0 0; vertical-align: text-bottom; cursor: pointer; } .helpTip .helpTipTxt { display: none; position: absolute; left: 0; bottom: 27px; width: max-content; max-width: 600px; font-size: var(--font13); color: var(--white); font-weight: var(--font400); padding: 16px 20px; border-radius: var(--radius20); background-color: var(--gray02); word-break: break-all; user-select: none; z-index: 100; } .helpTip::after { content:""; display: none; position: absolute; bottom: 20px; margin-left: 5px; border: 4px solid var(--gray02); border-color: var(--gray02) transparent transparent transparent; } .helpTip:hover .helpTipTxt { display: inline-block; } .helpTip:hover::after { display: block; } @media all and (max-width : 640px) { .helpTip .helpTipTxt { width: auto; max-width: 100%; } } @media all and (max-width : 480px) { .helpTip .helpTipTxt { padding: 10px; } } /* progress */ .progress-box progress { appearance: none; width: 100%; height: 5px; } .progress-box progress::-webkit-progress-bar { border-radius:10px; background-color: var(--gray13); } .progress-box progress::-webkit-progress-value { border-radius:10px; background: var(--primary); } /* agree */ .agree-wrap { margin-top: 30px; } .agree-wrap .agree-box {border:1px solid var(--gray09); border-radius: 16px; padding:20px;} .agree-wrap h5 { font-size: var(--font15); font-weight: var(--font600); margin-bottom: 15px; } .agree-wrap h5 label::before { top: 0; } .agree-wrap ul { padding-top: 18px; border-top: 1px solid var(--gray02); } .agree-wrap ul li {display: flex; justify-content: space-between; align-items: center; font-size: var(--font14); gap: 5px } .agree-wrap ul li:not(:first-child) {margin-top:10px;} .agree-wrap ul li label { line-height: 21px; } .agree-wrap ul li label span { color: var(--gray06); } .agree-wrap ul li input[type="checkbox"]:checked + label span { color: var(--red); } .agree-wrap ul li a { flex: 0 0 auto; min-height: 24px; font-size: var(--font13); color: var(--gray06);/*padding-right: 15px; background: url(/assets/img/common/icon_arr_r_gray.svg) no-repeat 100% 30%;*/} .agree-chk input[type="checkbox"]:checked + label span { color: var(--red) !important; } @media all and (max-width : 768px ) { .agree-wrap h5 label::before { top: 2px; } } /* dl */ .dl-title { display: inline-block; margin-bottom: 7px; font-weight: var(--font600); } .dl-wrap { border-top: 1px solid var(--gray10); } .dl-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--gray10); } .dl-line dt { color: var(--gray06); } .dl-line dd { flex: 1 1 0; } .dl-wrap.txt-r dt { text-align: left; } @media all and (max-width : 768px ) { .dl-line { padding: 10px 0; gap: 4px; } } @media (max-width: 640px) { .dl-line { flex-direction: column; align-items: flex-start; } .dl-line dt, .dl-line dd { width: 100%; max-width: 100%; } } /* table */ .respTable table td[data-label="TXID"] span { max-width: calc(100% - 20px); } .respTable table td[data-label="TXID"] a { color: var(--gray09); display: inline-block; width: 16px; height: 16px; font-family: 'xeicon'; } .respTable table td .item-wrap-flex { align-items: center; gap: 8px; padding-bottom: 0; } /*.respTable table td .item-wrap-flex .item-info-wrap { max-width:calc(100% - 45px); }*/ /* swiper-tab */ .sec-menu-wrap { display: flex; margin-bottom: 25px; border-bottom: 1px solid var(--gray10); overflow: hidden; } .swiper-tab ul { } .swiper-tab ul li { width: auto !important; padding: 16px 0; } .swiper-tab ul li:not(:first-child) { margin-left: 35px; } .swiper-tab ul li a span { font-size: var(--font12); color: var(--gray05); display:inline-block; padding-left:4px;} .swiper-tab ul li.current-page::after { content: ""; display: inline-block; position: absolute; left:0; bottom: 0; width: 100%; height: 2px; background-color: var(--gray02); } .swiper-tab button:not(:first-child) { margin-left: 8px; } .sec-menu-wrap .swiper-button-prev, .swiper-rtl .swiper-button-next { color: var(--gray04); left: 0; background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); } .sec-menu-wrap .swiper-button-next, .swiper-rtl .swiper-button-prev { color: var(--gray04); right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); } .sec-menu-wrap .swiper-button-prev.swiper-button-disabled, .sec-menu-wrap .swiper-button-next.swiper-button-disabled { opacity: 0; } @media all and (max-width : 1600px) { .sec-menu-wrap .max-w1560 { padding: 0; } } @media all and (max-width : 1024px) { .sec-menu-wrap.max-w1000 { width: 96%; margin: 0 2% 25px; padding: 0; } } @media all and (max-width : 640px) { /*.swiper-tab ul li { padding: 10px 0; }*/ .swiper-tab ul li:not(:first-child) { margin-left: 10px; } } /* modal tab */ .modal-head .tab-list-wrap { display: flex; } .modal-head .tab-list-wrap li { width: 50%; text-align: center; padding: 13px 5px; border-bottom: 1px solid var(--gray10); } .modal-head .tab-list-wrap li span { font-size: var(--font12 ); color: var(--gray05); } .modal-head .tab-list-wrap li.current { border-bottom: 2px solid var(--gray02);} .icon-menu { width: 36px; height: 36px; line-height: 36px; text-align: center; margin:0 2px; border-radius: 50%; } .icon-menu img { vertical-align: middle; } .icon-menu:hover { background-color: var(--gray13); } @media all and (max-width : 480px) { .icon-menu { width: 32px; height: 32px; line-height: 32px; margin: 0 3px; } .icon-menu img { max-width: 20px; } } /* video */ .player-wrap { cursor: pointer; } .player-wrap video { width: 100%; height: 100%; border-radius: var(--radius20); background-color: var(--gray13); overflow: hidden; } .player-wrap .btn-play { position: absolute; width: 60px; height: 60px; line-height: 65px; font-size: var(--font32); color: var(--white); text-align: center; border: none; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; } .player-wrap .btn-play i { padding-left: 3px; } .player-wrap:hover .btn-play { background-color: var(--primary); } @media all and (max-width : 640px) { .player-wrap .btn-play { width: 45px; height: 45px; line-height: 50px; font-size: var(--font24);} } /* image */ .img-wrap { flex: 1 1 0; max-width: 600px; user-select: none; } .img-box { position: relative; /*aspect-ratio:1/1;*/ padding-top:100%; border-radius: var(--radius20); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.03) inset; background-color: var(--white); } .img-box p { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .img-box p img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; object-position: 50% 50%; } .img-wrap.img-circle .img-box { border-radius: 50%; } .img-wrap.img-soldOut { pointer-events: none; } .img-wrap.img-soldOut .img-box::before { content: "SOLD OUT"; display: block; position: absolute; top: 50%; left: 50%; width: max-content; font-size: var(--font24); font-weight: var(--font800); color: var(--white); letter-spacing: 1px; transform: translate(-50%, -50%); opacity: 0.5; z-index: 1; } .img-wrap.img-soldOut .img-box::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--black); opacity: 0.5; } /*.no-image .img-box { background-color: var(--gray11); } */ .no-image p img { max-width: 120px !important; max-height: 120px !important; } .sec-shopping .img-box {padding-top:59%;} /* video */ /* player */ .video-box { position:relative; height:0; padding-bottom:56.25%; } .video-box video, .video-box iframe { position:absolute; left:0; top:0; width:100%; height:100%;} /* user info */ .user-info-box .user-txt{ display: flex; justify-content: space-between; align-items: center; gap: 4px; } .user-info-box.user-info-flex { display: flex; align-items: center; gap: 5px; } .user-txt { width: 100%; text-align: left; } .user-txt .user-name strong { font-weight: var(--font600); } .user-txt .user-name .txt-ellipsis { max-width: 100%; font-size: var(--font13);color: var(--gray02); } .user-txt .user-name.user-badge .txt-ellipsis { max-width: calc(100% - 15px); } .user-txt .user-name.user-badge::after { content:""; display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-left: 3px; background: url('/assets/img/common/icon_user_mark.svg') no-repeat center center; background-size: contain; } .user-txt .item-cnt { flex: 0 0 auto; font-size: var(--font13); color: var(--gray04); } .user-txt .user-name .user-hover-box { display: none; position: absolute; bottom: 20px; left: -50%; width: 320px; padding: 30px; border-radius: var(--radius10); background-color: var(--white); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.08); cursor: default; z-index: 10; } .user-txt .user-name .user-hover-box .inner-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .user-txt .user-name .user-hover-box .inner-top .user-info-box { flex: 1 1 0; } .user-txt .user-name .user-hover-box .inner-top .img-wrap { max-width: 60px; } .user-txt .user-name .user-hover-box .inner-bottom { padding-top: 15px; margin-top: 19px; border-top: 1px solid var(--gray12); } .user-txt .user-name .user-hover-box .inner-bottom ul { display: flex; justify-content: space-between; gap: 10px; } .user-txt .user-name .user-hover-box .inner-bottom ul li { flex: 1 1 33.3%; line-height: 1; } .user-txt .user-name .user-hover-box .inner-bottom ul li b { display: block; font-size: var(--font18); } .user-txt .user-name .user-hover-box .inner-bottom ul li span { font-size: var(--font12); color: var(--gray07); } /*.user-txt .user-name:hover .user-hover-box { display: block; }*/ @media all and (max-width : 1024px) { .user-txt .user-name:hover .user-hover-box { display: none; } } @media all and (max-width : 480px) { .user-txt .user-name .txt-ellipsis { font-size: var(--font12); } } /* item option */ .list-item-opt { position: absolute; top: 0; display: flex; align-items: center; width: 100%; padding: 11px 10px 0;z-index: 10; } /*.list-item-opt .piki-mark { padding: 4px 20px; border-radius: var(--radius15); background-color: rgba(0, 0, 0, 0.7); }*/ .list-item-opt .state { font-size: var(--font13); color: var(--white); padding: 4px 20px; border-radius: var(--radius16); background-color: rgba(0, 0, 0, 0.6); } .list-item-opt .nft-video img { max-width: 38px; } .list-item-opt .time-left { font-size: var(--font13); color: var(--white); padding: 4px 20px; border-radius: var(--radius16); background-color: rgba(0, 0, 0, 0.7); } .list-item-opt .time-left::before { content: ""; display: inline-block; width : 4px; height: 4px; margin: 0 5px 1px 0; vertical-align: middle; border-radius: 50%; background-color: var(--white); } .list-item-opt .hidden-click-box { margin-left: auto; } .list-item-opt .hidden-click-box button { width:30px; height: 30px; border-radius: 50%; background-color: rgba(0,0,0,0.2); } .list-item-opt .hidden-click-box button img { vertical-align: middle; } .list-item-opt .item-inner-menu { width: 36px; height: 36px; line-height: 24px; text-align: center; margin-left: auto; border-radius: 50%; overflow: hidden; } .list-item-opt .hidden-click-box .hidden-box { width: 155px; margin-top: 2px; border:none;} .list-item-opt .hidden-click-box button:hover { background-color: rgba(0,0,0,0.3); } .list-item-opt .item-inner-menu:hover { background-color: rgba(0, 0, 0, 0.2); } .list-item-opt .time-left::before { content: ""; display: inline-block; width : 4px; height: 4px; margin: 0 5px 1px 0; vertical-align: middle; border-radius: 50%; background-color: var(--white); } @media all and (max-width : 960px) { .list-item-opt .state, .list-item-opt .time-left { font-size: var(--font10); padding: 4px 15px; } .list-item-opt .time-left::before { margin: 0 5px 3px 0; } } @media all and (max-width : 640px) { .list-item-opt .state, .list-item-opt .time-left { padding: 4px 10px; } .list-item-opt .time-left::before { display: none; } } /* item info */ .list-inner .item-name { font-size: var(--font16); font-weight: var(--font600); text-align: left; min-height: 40px;} .list-inner .item-txt { display: flex; } .list-inner .item-txt .item-dt-oriacron { font-size: var(--font11); color: var(--gray05); text-decoration: line-through} .list-inner .item-txt .item-dd-acron { font-size: var(--font11); color: var(--gray02); text-align: right; } .list-inner .item-txt .item-dt-rate { font-size: var(--font18); color: var(--primary); font-weight: bold;} .list-inner .item-txt .item-dd-oriwon { font-size: var(--font18); color: var(--gray02); font-weight: bold;} .list-inner .item-txt .item-dd-oriwon span {font-weight: normal;} /*.item-txt .item-dd .exchange-money { font-size: var(--font10); color: var(--gray05); }*/ .list-inner .item-txt .item-dd .exchange-money { font-size: var(--font15); font-weight: var(--font600); color: var(--gray02); } /*.list-inner .item-txt dl:last-child { text-align: right; }*/ .list-inner .item-txt dl:only-child { text-align: left; } /* 디지털 스타일 유지 필요 */ .item-txt .item-dd { font-size: var(--font10); color: var(--gray05); text-align: right; } /* temp */ .item-txt .item-dd span { color: var(--gray05); } .item-txt .item-dd span::before { display: inline-block; content: "/"; font-size: var(--font10); } .item-txt .item-dt.item-discount strong { font-size: var(--font18); color: var(--primary); } .item-txt .item-dt.item-discount span { display: block; font-size: var(--font10); color: var(--gray05); text-decoration: line-through; } @media all and (max-width : 640px) { .item-txt dl {flex-direction: column; text-align: left;} .item-txt .item-dt.item-discount strong { font-size: 12px; } .list-inner .item-txt .item-dd-acron, .list-inner .item-txt .item-dd .exchange-money { text-align: left; } } @media all and (max-width : 480px) { .item-txt .item-dt-rate {font-size:var(--font12)} .item-txt .item-dt-rate strong {font-size:var(--font12)} .item-txt .item-dd-oriwon {font-size:var(--font14)} .list-inner .item-txt .item-dd-oriwon {font-size:var(--font14)} .item-txt .item-dt { font-size: var(--font10); } .item-txt .item-dd { font-size: var(--font13); text-align: left; } .item-txt dl:last-child { text-align: left !important; } } @media all and (max-width : 360px) { /* 디지털 스타일 유지 필요 */ .item-txt dl:last-child { text-align: left; } } /* gallery info */ .list-gallery .list-inner .user-txt .user-name .txt-ellipsis { font-size: var(--font16); } /* series info */ .series-info-box { display: flex; gap: 4px; } /*.series-info-box .img-wrap { box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; }*/ .series-info-box .img-wrap .img-box { } .series-txt { display: inline-flex; flex: 1 1 0; gap: 4px; align-items: center; } .series-txt .series-name { } .series-txt .item-cnt { flex: 0 0 auto; font-size: var(--font13); color: var(--gray04); } /* item inline style */ .item-wrap-flex { display: flex; flex: 1 1 auto; gap: 10px; justify-content: space-between; align-items: flex-start; overflow: hidden; } .item-wrap-flex.box100 .img-wrap { position: relative; flex: 0 0 100px; } .item-wrap-flex.box80 .img-wrap { position: relative; flex: 0 0 80px; } .item-wrap-flex.box40 .img-wrap { flex: 0 0 40px; min-width: 20px; } .item-wrap-flex .img-box { border-radius: var(--radius10); } .item-wrap-flex.box40 .img-wrap .img-box { border-radius: 10px; } .item-wrap-flex .item-type { font-size: var(--font13); color: var(--gray04); text-align: left; } .item-wrap-flex .item-user-info { display: flex; gap: 8px; } .item-wrap-flex .user-box { overflow: hidden; } .item-wrap-flex .user-txt { display: initial; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font14); color: var(--gray03); } .item-wrap-flex .user-txt .user-name { font-size: var(--font13); color: var(--gray03); } .item-wrap-flex .user-txt .user-name.user-badge::after { width: 12px; height: 12px; } .item-wrap-flex .user-royalty { flex: 0 0 auto; font-size: var(--font13); color: var(--gray04); } .item-wrap-flex .user-royalty p::before { content: "|"; display: inline-block; color: var(--gray09); margin-right: 7px; } .item-wrap-flex .item-info-wrap, .item-wrap-flex .series-info-box { margin-right: auto; } .item-wrap-flex.box100 .item-info-wrap { max-width: calc(100% - 115px); } /* 버튼 여백 5px */ .item-wrap-flex.box80 .item-info-wrap { max-width: calc(100% - 95px); } /* 버튼 여백 5px */ .item-wrap-flex.box40 .img-wrap { } /* line 354 */ .item-wrap-flex .item-txt dl { } .item-wrap-flex .item-txt dl dt, .item-wrap-flex .item-txt dl dd { display: inline-block; font-size: var(--font13); color: var(--gray04); text-align: left; } .item-wrap-flex .list-item-opt { padding: 3px 4px 0; } .item-wrap-flex .list-item-opt .time-left { font-size: var(--font10); padding: 3px 7px; } .item-wrap-flex .list-item-opt .time-left::before { display: none; } .item-wrap-flex .list-item-opt .nft-video img { max-width: 28px; } .item-list-box { display: flex; justify-content: space-between; align-items: center; gap: 3px; } .item-list-box .label-st-v { flex: 0 0 auto; } .item-list-box .flex-side { flex: 0 0 auto; gap: 18px; } .item-list-box .item-price { font-weight: var(--font600); text-align: right; } .item-list-box .item-count { flex: 0 0 auto; min-width: 80px; text-align: center; } .item-list-box .etc-option { flex: 0 0 auto; min-width: 135px; } .item-list-box .etc-option + .btn { flex: 0 0 55px; width: 55px; } .item-list-head { border-top: 1px solid var(--black); } .item-list-head p { padding: 15px 0; color: var(--gray05); font-weight: var(--font600); text-align: center; } .item-list-head .label-st-v label { top: 5px; } .item-list-head .item-wrap-flex { justify-content: center; } @media all and (max-width : 960px) { .item-wrap-flex.box100 .img-wrap { flex: 0 0 80px; } .item-wrap-flex.box100 .item-info-wrap { max-width: calc(100% - 95px); } .item-list-box .flex-side { gap: 10px; } .item-list-box .etc-option { min-width: 110px; } } @media all and (max-width : 768px ) { .item-wrap-flex.box100 .img-wrap { flex: 0 0 70px; } .item-wrap-flex.box80 .img-wrap { flex: 0 0 70px; } .item-wrap-flex.box100 .item-info-wrap { max-width: calc(100% - 85px); } .item-wrap-flex.box80 .item-info-wrap { max-width: calc(100% - 85px); } .item-list-box .item-count { min-width: 70px; } .item-list-box .etc-option { min-width: 90px; } } @media all and (max-width : 640px) { .item-wrap-flex { width: 100%; } .item-list-box { flex-direction: column; align-items: flex-start; gap: 2px; } .item-list-box .label-st-v { position: absolute; top: 10px; margin: 0; z-index: 9; } .item-list-box .label-st-v label::before { top: 0; border-radius: 50%; background-color: var(--white); } .item-list-box .flex-side { flex-direction: column; align-items: self-start; gap: 0; margin-left: 72px; } .item-list-box .flex-side p { display: inline-block ; } .item-list-box .item-count { min-width: auto; } .item-list-box .item-count::before { content: attr(data-label); display: inline-block; } .item-list-box .etc-option { flex-direction: column; align-items: flex-start; gap: 3px; } .item-list-box .etc-option::before { content: attr(data-label); display: inline-block; } .item-list-box .etc-option + .btn { flex: 0 0 auto; padding: 0 15px; margin-top: 5px; } .item-list-head { display: none; } .respTable table td .item-wrap-flex { align-items: flex-start; } } @media all and (max-width : 480px) { .item-wrap-flex .item-user-info { flex-direction: column; gap: 1px; } .item-wrap-flex .user-royalty p::before { display: none; } } /* series inline style */ .series-wrap-flex { display: flex; flex: 1 1 0; gap: 10px; align-items: center; } /* published inline item */ .published-item {} .published-item .uniqueId { font-size: var(--font13); color: var(--gray04); padding: 10px; margin-bottom: 10px; border-radius: var(--radius10); background-color: var(--gray13);} .published-item .uniqueId span::after { display: inline-block; content:""; width: 1px; height: 10px; margin: 0 5px; background-color: var(--gray08); } /*.published-item .item-list-box + .item-list-box { padding-top: 10px; }*/ .published-item.line > ul { border-top: 1px solid var(--gray10); } .published-item.line > ul > li { padding: 20px 0; border-bottom: 1px solid var(--gray10); } .published-item .disable { opacity: 0.5; pointer-events: none; user-select : none; } .pay-info { } .pay-info > div { padding: 8px 0; border-bottom: 1px solid var(--gray11); } .pay-info .flex-side { align-items: flex-start; } .pay-info .pay-part .type { font-size: var(--font14); font-weight: var(--font600); color: var(--gray05); } .pay-info .total-price .type { font-weight: var(--font600); } .pay-info .total-price strong { font-size: var(--font22); } .pay-info { } .pay-info > div { padding: 8px 0; border-bottom: 1px solid var(--black); } .pay-info .flex-side { align-items: flex-start; } .pay-info .pay-part .type { font-size: var(--font14); font-weight: var(--font600); color: var(--gray05); } .pay-info .total-price .type { font-weight: var(--font600); } .pay-info .total-price strong { font-size: var(--font22); } @media all and (max-width : 640px) { .published-item.line > ul > li { padding: 10px 0; } .pay-info .total-price strong { font-size: var(--font18); } } /* published table item */ .published-item .respTable .tbl-chk { width: 35px; } .published-item .respTable .tbl-item { width: auto; } .published-item .respTable .tbl-item .item-name {font-weight: var(--font600)} .published-item .respTable .tbl-count { width: 75px; } .published-item .respTable .tbl-price { width: 150px; } .published-item .respTable .tbl-delivery { width: 110px; } .published-item .respTable .tbl-etc { width: 105px; } .published-item .respTable td.tbl-price, .published-item .respTable td.tbl-delivery { text-align: right; } /*.published-item .respTable td:*/ @media all and (max-width : 768px) { .published-item .respTable td { font-size: var(--font12); } .published-item .respTable td .exchange-money { font-size: 12px; } .published-item .respTable .tbl-count { width: 65px; } .published-item .respTable .tbl-price { width: 120px; } .published-item .respTable .tbl-delivery { width: 95px; } } @media all and (max-width : 640px) { .published-item .respTable td { width: 100% !important; } .published-item .respTable td .label-st-v input:not(:checked) label::before { background-color: var(--white); } .published-item .respTable td.tbl-chk { position: absolute; z-index: 1; } .published-item .respTable td.tbl-count, .published-item .respTable td.tbl-price, .published-item .respTable td.tbl-delivery, .published-item .respTable td.tbl-etc { width: calc(100% - 75px) !important; margin-left: 75px; text-align: left !important} .published-item .respTable.table-col td::before { position: initial; } .published-item .respTable td.tbl-price, .published-item .respTable td.tbl-delivery, .published-item .respTable td .exchange-money { text-align: left; } .published-item .respTable td.tbl-price p, .published-item .respTable td.tbl-delivery p { display: inline-block; } .published-item .respTable td.tbl-etc .btn-small { padding: 0 18px; } } /* list common */ .list-inner { position: relative; /*padding:2%; margin: -16px -0.5% 0;*/ overflow: hidden; padding:1%; margin:-1%;} .list-inner > ul { display: flex; /*align-items: flex-start; overflow: hidden; */} .list-inner > ul > li { position: relative; transition: all 0.2s;border-radius: var(--radius20); box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.08); background:var(--white);} .list-inner > ul > li > a { position: relative; display: block; } .list-inner > ul > li:hover { transform: translateY(-5px); z-index: 2; } .list-inner > ul > li .img-box { box-shadow: none; } .list-inner > ul > li.no-data {box-shadow: none;} .list-inner:has(.swiper-scrollbar) { padding-bottom: 40px; } .list-inner .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 13px; } .item-unit { width: 100%; margin: 0 auto; border-radius: var(--radius20); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.08); } .item-unit.list-best { max-width: 296px; } .item-unit + .date { margin-top: 30px; } @media all and (max-width : 960px) { .list-inner { position: relative; } .list-inner > ul > li:hover { transform: translateY(0px); } } @media all and (max-width : 768px) { .item-unit.list-best { max-width: 220px; } } /* list best */ .img-wrap { position: relative; } .list-inner .item-info-box { padding: 13px 20px 25px; } .list-inner .item-txt {flex-direction: column; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--gray11); } .list-inner .item-txt dl {display:flex; justify-content: space-between} .list-best .piki-mark { position: absolute; bottom: 10px; left: 10px; } .list-best .list-ul li.first-best .user-hover-box { left: 0; } .list-best:has(.exchange-money) .item-txt { min-height: 66px; } .item-info-box:has(.user-name) .item-txt .item-dd { font-size: var(--font15); font-weight: var(--font600); color: var(--gray02); } @media all and (max-width : 480px) { .list-inner .item-info-box { padding: 12px 10px 20px; } .list-best .piki-mark { bottom: 5px; left: 5px; width: 25px; height: 25px; } .list-best:has(.exchange-money) .item-txt { min-height: 58px; } } @media all and (max-width : 360px) { .list-inner .item-txt { flex-direction: column; padding-top: 10px; margin-top: 10px; } .list-best .item-txt .exchange-money { text-align: left; } .list-best:has(.exchange-money) .item-txt { justify-content: flex-start; min-height: 85px; } } /* list gallery */ .list-gallery { width: 100%; } .list-gallery .list-inner > ul.list-ul > li { cursor: pointer; } .list-gallery .list-inner .img-wrap.np-bg .img-box { padding-top: 33%; box-shadow: none; } .list-gallery .list-inner .img-wrap.np-symbol .img-box { padding-top: 110px; margin-top:-53px; /*background: url("/assets/img/common/series_bg.svg") no-repeat 50% 0; box-shadow: none;*/ background: none; } .list-gallery .list-inner .img-wrap.np-symbol p { width: 100px; height: 100px; left: 50%; transform: translateX(-50%); } .list-gallery .list-inner .img-wrap.np-symbol img { border: 1px solid #dedfe4; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset; } .list-gallery .list-inner .img-wrap.np-symbol.no-image .img-box p img { background-color: var(--gray10); } .list-gallery .user-info-box { gap: 20px; padding: 0 20px 24px; } /*.list-gallery .user-info-box ul.user-txt { max-width: calc(100% - 80px); }*/ /*.list-gallery .user-info-box ul.user-txt li { width: 100% !important; }*/ .list-gallery .user-info-box ul.user-txt .user-name { flex: 1 1 0; font-size: var(--font16); font-weight: var(--font600); overflow: hidden; } .list-gallery .user-info-box ul.user-txt .user-name.user-badge .txt-ellipsis { max-width: calc(100% - 20px); } .list-gallery .list-inner ul li .follow { display: none; position: absolute; bottom: 38px; right: 20px; } .list-gallery .list-inner > ul.list-ul3 > li { width: calc(33% - 23px); } .list-gallery .list-inner > ul.list-ul2 > li { width: calc(50% - 10px); } /*.no-image .img-box p { background-color: var(--gray10); }*/ /*.no-image .img-box p img { max-width: 120px !important; max-height: 120px !important; }*/ /*.section-inner .list-nft > .list-inner > ul.list-ul-5 > li { width: calc(20% - 16px); }*/ @media all and (max-width : 1200px) { .list-gallery .list-inner > ul.list-ul > li { width: calc(33.3% - 14px); } .list-gallery .list-inner .img-wrap.np-symbol .img-box { padding-top: 96px; margin-top: -44px; background-size: 130px; } .list-gallery .list-inner .img-wrap.np-symbol p { width: 84px; height: 84px; } .list-gallery .user-info-box { padding: 0 20px 20px; } .list-gallery .list-inner ul li .follow { bottom: 26px; } } @media all and (max-width : 960px) { .list-gallery .list-inner > ul.list-ul > li { width: calc(50% - 5px); } } @media all and (max-width : 768px) { /*.list-gallery .list-inner > ul.list-ul > li { width: calc(50% - 10px); }*/ .list-gallery .list-inner .img-wrap.np-bg .img-box { padding-top: 36%; } .list-gallery .list-inner .img-wrap.np-symbol .img-box { padding-top: 82px; } .list-gallery .list-inner .img-wrap.np-symbol p { width: 72px; height: 72px; } .list-gallery .user-info-box { padding: 0 13px 20px; } } @media all and (max-width : 640px) { .list-gallery .list-inner .img-wrap.np-bg .img-box { padding-top: 27%; } .list-gallery .list-inner ul li .follow { bottom: 24px; right: 13px; } } @media all and (max-width : 480px) { .list-gallery .list-inner > ul.list-ul > li { width: 100%; } .list-gallery .list-inner .img-wrap.np-bg .img-box { padding-top: 110px; } .list-gallery .list-inner .img-wrap.np-symbol .img-box { padding-top: 84px; margin-top: -38px; background-size: 130px; } } /* list series */ .list-series { width: 100%;} .list-series .img-wrap.img-series-bg .img-box { padding-top: 70%; border-radius: 20px; } .main-container .list-series ul li {box-shadow: none !important; background: none} .list-series .list-inner > ul > li > a {background:transparent;} .list-series .series-info-box { align-items: flex-end; gap: 24px; padding: 16px 22px; margin-top: -45px; } .list-series .series-info-box .img-wrap { max-width: 78px; border: 4px solid var(--white); border-radius: 14px; background-color: var(--white); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06); z-index: 2; } .list-series .series-info-box .img-wrap .img-box { border-radius: 12px; } .list-series .series-info-box .series-txt { justify-content: space-between; max-width:100%; margin-bottom: 10px; } .list-series .series-txt .series-name { flex: 1 1 0; /*max-width: calc(100% - 60px);*/ font-size: var(--font16); font-weight: var(--font800); overflow: hidden; } .list-series .list-inner > ul > li > a {box-shadow: none;} .side-cnt .list-series { width: 100%; } .side-cnt .list-series .li_data {box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.08) !important;} .side-cnt .list-series .img-wrap.img-series-bg .img-box { padding-top: 59.5%; border-radius: 20px 20px 0 0; } .side-cnt .list-series .series-info-box { align-items: flex-end; gap: 24px; padding: 16px 22px; } .side-cnt .list-series .series-info-box { margin-top: -45px; } .side-cnt .list-series .series-info-box .img-wrap { max-width: 78px; border: 4px solid var(--white); border-radius: 14px; background-color: var(--white); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06); z-index: 2; } .side-cnt .list-series .series-info-box .img-wrap .img-box { border-radius: 12px; } .side-cnt .list-series .series-info-box .series-txt { justify-content: space-between; max-width: calc(100% - 100px); margin-bottom: 10px; } .side-cnt .list-series .series-txt .series-name { flex: 1 1 0; /*max-width: calc(100% - 60px);*/ font-size: var(--font16); font-weight: var(--font800); overflow: hidden; } @media all and (max-width : 1200px) { .side-cnt .list-series .series-info-box { gap: 10px; padding: 15px; margin-top: -40px; } } @media all and (max-width : 1024px) { .side-cnt .list-series .series-info-box .img-wrap { max-width: 68px; } .side-cnt .list-series .series-info-box .series-txt { max-width: calc(100% - 83px); } } @media all and (max-width : 768px) { .side-cnt .list-series .series-info-box .img-wrap { max-width: 60px; } .side-cnt .list-series .series-info-box .series-txt { max-width: calc(100% - 75px); margin-bottom: 5px; } } /* list controller */ .list-controller { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0; margin-bottom: 25px; } .list-controller .filter-btn-box { flex: 0 0 auto; } .list-controller .filter-btn-box button { padding: 10px 16px 14px; border-radius: var(--radius20); background-color: var(--gray13); } .list-controller .filter-btn-box button::before { content:""; display: inline-block; width: 24px; height: 24px; vertical-align: bottom; margin-right: 4px; background: url('/assets/img/common/icon_filter.svg') no-repeat -24px 3.5px; background-size: 44px; } .list-controller .filter-btn-box button.btn-filter-close::before { background-position: 0 4px; } .list-controller .search-wrap { flex: 1 1 0; max-width: 400px; } .list-controller .select-sort { width: 210px; /*margin-left: auto;*/ } .list-controller .list-type-box { flex: 0 0 auto; padding: 7px; border-radius: var(--radius20); background-color: var(--gray13); } .list-controller .list-type-box button { width: 46px; height: 36px; line-height: 0.8; border-radius: var(--radius20); } .list-controller .list-type-box button i { display: inline-block; width: 20px; height: 20px; background: url('/assets/img/common/icon_listtype.svg') no-repeat 0 0; } .list-controller .list-type-box button.active { background-color: var(--white); } .list-controller .list-type-box .type-list i { background-position: -20px 0; } .list-controller .list-type-box .type-list.active i { background-position: 0 0; } .list-controller .list-type-box .type-gallery i { background-position: -60px 0; } .list-controller .list-type-box .type-gallery.active i { background-position: -40px 0; } @media all and (max-width : 768px) { .list-controller .filter-btn-box button { padding: 10px 12px 14px; } .list-controller .filter-btn-box button::before { margin: 0; } .list-controller .filter-btn-box button span { display: none; } .list-controller .select-mb { width: 48px; } .list-controller .select-mb .bootstrap-select .dropdown-toggle { } .list-controller .select-mb .bootstrap-select .dropdown-toggle { background: var(--gray13) url('/assets/img/common/icon_sort.svg') no-repeat center center; } .list-controller .select-mb .bootstrap-select .dropdown-toggle .filter-option-inner-inner { text-indent: -9999px; } .list-controller .select-mb .bootstrap-select .dropdown-menu { left: auto; width: 210px; } .list-controller .select-mb .bootstrap-select .dropdown-toggle .caret::after { display: none; } } @media all and (max-width : 480px) { .list-controller { margin-bottom: 10px; } .list-controller:has(.select-btn-box) { flex-wrap: wrap; } .list-controller .select-btn-box { width: 100%; gap: 10px; } .list-controller .select-mb .bootstrap-select .dropdown-toggle { padding: 12px 10px; } } /* filter wrap */ .section-inner { position: initial; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .section-inner .filter-wrap { display: none; position: sticky; top: 100px; padding: 0 10px; border:1px solid var(--gray11); border-radius: var(--radius20); } .section-inner .filter-wrap h4 { margin-bottom: 10px; font-size: var(--font28); text-align: center; display: none; } .section-inner .filter-wrap .filter-x { display: none; position: absolute; top: 10px; right: 10px; font-size: var(--font20); } /*.section-inner .filter-wrap .filter-inner { width: 274px; max-height: calc(100vh - 130px); padding: 0 10px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }*/ .section-inner .filter-wrap .filter-inner::-webkit-scrollbar { display: none; } .section-inner .filter-wrap .filter-inner .btn-box { margin: 0; } .section-inner .filter-wrap .category-sub { margin-bottom: 5px; } .section-inner .filter-wrap .category-sub + .checkbox-btn { margin-bottom: 10px; } .section-inner .filter-wrap .coin-type-sel { margin-bottom: 4px; } .section-inner .filter-wrap .btn-box #apply_price { margin-top: 4px; } .section-inner .filter-wrap .form-basic { margin: 0; } .section-inner .filter-wrap .checkbox-ul > li { display: flex; justify-content: space-between; align-items: center; height: 29px; } .section-inner .filter-wrap .checkbox-ul > li + li { margin-top: 10px; } .section-inner .filter-wrap .checkbox-ul .label-st-v label::before { top: 4px; margin: 0; } .section-inner .filter-wrap .checkbox-ul .li-chk-box { width: calc(100% - 30px); } .section-inner .filter-wrap .checkbox-ul .cnt { font-size: var(--font12); color: var(--gray08); } .section-inner .filter-wrap .checkbox-ul .series-info-box { width: 100%; max-width: calc(100% - 30px); } .section-inner .filter-wrap .checkbox-ul .series-info-box .img-wrap { max-width: 30px; } .section-inner .filter-wrap .checkbox-ul .series-info-box .img-wrap .img-box { border-radius: 10px; } .section-inner .filter-wrap .checkbox-ul .series-txt { width: calc(100% - 35px); overflow: hidden; } .section-inner .filter-wrap .checkbox-ul .series-txt .series-name { max-width: calc(100% - 40px); font-size: var(--font13); overflow: hidden; } .section-inner .filter-wrap .checkbox-ul .hashtag-list { display: inline-flex; align-items: center; gap: 4px; width: 100%; max-width: calc(100% - 30px); overflow: hidden; } .section-inner .filter-wrap .checkbox-ul .hashtag-list .hashtag { /*max-width: calc(100% - 40px);*/ overflow: hidden; } .section-inner .filter-wrap.open { display: none; } .section-inner .filter-wrap .accordion .accordion-item:last-child { border-bottom: none; } .section-inner .filter-wrap .filter-foot.btn-wrap { position: sticky; bottom: 0; display: none; padding: 12px 0; background-color: inherit; } .section-inner .filter-wrap .filter-foot.btn-wrap .btn { max-width: 100%; } @media all and (max-width : 768px) { .sec-initial { position: initial; } .section-inner .filter-wrap { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; padding: 15px 14px 8px; border:none; border-radius: 0; background-color: var(--white); z-index: 99; display: none; } .section-inner .filter-wrap .filter-x { display: block; } .section-inner .filter-wrap .filter-inner { width: 100%; padding-bottom: 70px; } .section-inner .filter-wrap h4 { display: block; } .section-inner .filter-wrap .filter-foot.btn-wrap { display: flex; flex-direction: row; } /*.section-inner .filter-wrap:not(.open) { flex-direction: column; }*/ .section-inner .filter-wrap .accordion-head { padding: 15px 0; } } /* list-wrap */ .section-inner .side-cnt { width: calc(100% - 280px); } .section-inner .wide-cnt { width: 100%; } .section-inner .list-wrap { flex: 1 1 0; display: block; } .section-inner .list-wrap .filter-selected { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .section-inner .list-wrap .filter-selected p { display: flex; align-items: center; font-size: var(--font14); padding: 10px 15px 10px 19px; border-radius: var(--radius20); background-color: var(--gray12); } .section-inner .list-wrap .filter-selected p i { font-size: var(--font24); vertical-align: top; } .section-inner .list-wrap .filter-selected .btn-reset { padding: 10px 19px; font-size: var(--font14); color: var(--gray08); } .section-inner .list-inner > ul.list-ul { flex-wrap: wrap; gap: 40px; } .section-inner .list-nft > .list-inner > ul.list-ul-5 > li { width: calc(20% - 32px); } .section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(25% - 30px); } .section-inner .list-nft > .list-inner > ul.list-ul-3 > li { width: calc(33.3% - 27px); } .section-inner .list-nft > .list-inner > ul.list-ul-2 > li { width: calc(50% - 20px); } /*.list-nft ul {gap:40px;}*/ /*.list-nft ul > li {width:calc(100% / 4)}*/ .section-inner .list-best > .list-inner > ul.list-ul-5 > li { width: calc(20% - 16px); } .section-inner .list-best > .list-inner > ul.list-ul-4 > li { width: calc(25% - 15px); } .section-inner .list-best > .list-inner > ul.list-ul-3 > li { width: calc(33.3% - 14px); } .section-inner .list-best > .list-inner > ul.list-ul-2 > li { width: calc(50% - 10px); } /*.list-series > .list-inner > ul.list-ul > li,*/ .section-inner .list-series > .list-inner > ul.list-ul-3 > li { width: calc(33.3% - 14px); max-width: 504px;} .section-inner .list-series > .list-inner > ul.list-ul-2 > li { width: calc(50% - 10px); max-width: 504px;} .section-inner .side-cnt .list-inner > ul.list-ul { gap: 20px; } .section-inner .side-cnt .list-inner > ul.list-ul-5 > li { width: calc(20% - 16px); } .section-inner .side-cnt .list-inner > ul.list-ul-4 > li { width: calc(25% - 15px); } @media all and (max-width : 1200px) { .section-inner .list-inner > ul.list-ul { flex-wrap: wrap; gap: 20px; } .section-inner .list-nft > .list-inner > ul.list-ul-5 > li, .section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(25% - 15px); } /*.section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 14px); }*/ /*.section-inner .side-cnt .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(25% - 15px) !important; }*/ /*.section-inner .list-nft > .list-inner > ul.list-ul-3 > li { width: calc(50% - 10px); }*/ .section-inner .list-best > .list-inner > ul.list-ul-5 > li { width: calc(25% - 15px); } .section-inner .list-best > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 14px); } .section-inner .list-best > .list-inner > ul.list-ul-3 > li { width: calc(50% - 10px); } } @media all and (max-width : 960px) { /*.section-inner .side-cnt .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 7px) !important; }*/ .section-inner .list-series > .list-inner > ul.list-ul-3 > li { width: calc(33.3% - 10px); } .section-inner .list-best > .list-inner > ul.list-ul-5 > li { width: calc(33.3% - 14px); } .section-inner .list-best > .list-inner > ul.list-ul-4 > li { width: calc(50% - 10px); } .section-inner .list-series > .list-inner > ul.list-ul-3 > li { width: calc(50% - 10px); } } @media all and (max-width : 830px) { .section-inner .list-nft > .list-inner > ul.list-ul-5 > li, .section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 14px); } .section-inner .list-series > .list-inner > ul.list-ul-2 > li { width: calc(50% - 10px); } } @media all and (max-width : 768px) { .section-inner .side-cnt { width: 100%; } /*.section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 7px); }*/ .section-inner .list-best > .list-inner > ul.list-ul-4 > li { width: calc(33.3% - 7px); } } @media all and (max-width : 640px) { /*.section-inner .list-nft > .list-inner > ul.list-ul-5 > li { width: calc(50% - 5px); }*/ /*.section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(50% - 5px); }*/ /*.section-inner .side-cnt .list-nft > .list-inner > ul.list-ul-4 > li { width: calc(50% - 5px) !important; }*/ .section-inner .list-best > .list-inner > ul.list-ul-5 > li { width: calc(50% - 5px); } .section-inner .list-best > .list-inner > ul.list-ul-4 > li { width: calc(50% - 5px); } } @media all and (max-width : 480px) { .section-inner .list-nft > .list-inner > ul.list-ul { gap: 10px; } .section-inner .list-nft > .list-inner > ul.list-ul-5 > li, .section-inner .list-nft > .list-inner > ul.list-ul-4 > li, .section-inner .list-nft > .list-inner > ul.list-ul-3 > li { width: calc(50% - 5px); } .section-inner .list-series > .list-inner > ul.list-ul-3 > li, .section-inner .list-series > .list-inner > ul.list-ul-2 > li { width: 100%; } } @media all and (max-width : 320px) { /*.section-inner .list-nft > .list-inner > ul.list-ul-5 > li,*/ /*.section-inner .list-nft > .list-inner > ul.list-ul-4 > li { width: 100%; }*/ } /* address */ .addr-info-wrap { flex: 1 1 0; display: flex; justify-content: space-between; gap: 5px; } .addr-info { flex: 1 1 0; } .addr-info ul li { color: var(--gray05); } .addr-info ul li span { color: var(--gray02); } .addr-info:not(.seller-info) ul li span::after { content:""; display: inline-block; width: 1px; height: 12px; margin: 0 10px; background-color: var(--gray09); } .zip-code { display: flex; gap: 4px; } .zip-code input { max-width: 160px; } /* board *//* board list */ .brd-l aside {} .brd-l aside .aside-inner {} .brd-l aside .aside-tit { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--gray11); font-size: var(--font18); font-weight: var(--font800); } .brd-l aside ul li a { width: 100%; padding: 17px 0 15px; border-bottom: 1px solid var(--gray11); font-weight: var(--font600); color: var(--gray05); } .brd-l aside ul li.on2 a { border-color: var(--gray02); color: var(--gray02); } .brd-l .table-top .search-wrap { width: 100%; max-width: 394px; } .brd-l .table-top .select-wrap { width: 100%; max-width: 150px; } .brd-l .respTable { min-height: 250px; } .brd-l .respTable table tr:hover { background-color: #fafafa; } .brd-l .respTable table tr:hover td.tbl-tit a { color: var(--primary) } .brd-l .respTable table tr.highlight .tbl-no { min-height: 27px; font-size: 0; background: url('/assets/img/common/icon_notifixed.svg') no-repeat center center; } .brd-l .respTable table td { padding: 18px 10px; } .brd-l .respTable table .tbl-no { width: 8%; color: var(--gray05); text-align: center; } .brd-l .respTable table .tbl-tit { width: auto; } .brd-l .respTable table td.tbl-tit { text-align: left; } .brd-l .respTable table .tbl-date { width: 110px; color: var(--gray05); } .brd-l .respTable table .tbl-state { width: 12%; color: var(--gray05); } .brd-l .respTable table .tbl-state .mark { color: var(--primary); } .brd-l .no-data p { margin: 250px auto; } .brd-l .respTable thead tr:hover, .brd-l .no-data:hover { background-color: transparent !important; } @media all and (max-width : 960px) { .brd-l aside { display: none; } .brd-l .side-cnt { width: 100%; } } @media all and (max-width : 640px) { .brd-l .table-top .data-total { display: none; } .brd-l .table-top .search-wrap { max-width: 220px; } .brd-l .respTable table .tbl-no { display: none; } .brd-l .respTable.table-col { text-align: left; } .brd-l .no-data td { padding: 5px !important; } .brd-l .no-data p { margin: 120px auto; } } /* board *//* board read */ .brd-r .section { margin-bottom: 60px; } .brd-r ul.ul-flex li { display: flex; gap: 10px; } .brd-r ul.ul-line { border-top: 1px solid var(--gray10); } .brd-r ul.ul-line li { padding: 20px; border-bottom: 1px solid var(--gray10); } .brd-r .brd-head {} .brd-r .brd-head .h3-tit { margin-bottom: 10px; font-size: var(--font30); text-align: center; } .brd-r .brd-head .brd-info { display: flex; justify-content: center; color: var(--gray05); } .brd-r .brd-head .brd-info .brd-date {} .brd-r .brd-head .brd-info .event-period {} .brd-r .brd-head .brd-info .event-announce {} .brd-r .brd-head .brd-info p:not(:last-child)::after { display: inline-block; content: ""; width: 1px; height: 55%; margin: 0 10px; background-color: var(--gray10); } .brd-r .brd-body { margin: 20px 0; border-top: 1px solid var(--gray10); border-bottom: 1px solid var(--gray10); line-height: 1.8; } .brd-r .brd-body .brd-body-txt { padding: 40px 3% 20px; } .brd-r .brd-body .brd-body-txt iframe { width: 100%; min-height: 430px; } .brd-r .brd-body .brd-attach { padding: 0 3% 40px; } .brd-r .brd-body .brd-attach ul.brd-img { display: flex; gap: 10px; margin-bottom: 10px; } .brd-r .brd-body .brd-attach ul.brd-img li { flex: 0 1 auto; width: 100%; max-width: 141px; } .brd-r .brd-body .brd-attach ul.brd-file li { display: block; padding-left: 20px; background: url('/assets/img/common/icon_file.svg') no-repeat 0 50%; } .brd-r .brd-foot .btn-box { margin-bottom: 50px; } .brd-r .brd-foot .btn-flex { justify-content: space-between; } .brd-r .brd-foot .btn-flex button { margin-right: 5px; } .brd-r .brd-foot .btn-view-list { padding: 0 54px; } .brd-r .brd-foot .brd-cmt {} .brd-r .brd-foot .brd-cmt .input-basic.input-flex { gap: 10px; } .brd-r .brd-foot .brd-cmt .input-basic label { flex: 1 1 0; } .brd-r .brd-foot .brd-cmt ul { text-align: center; } .brd-r .brd-foot .brd-cmt ul li .cmt-num { flex: 0 0 50px; color: var(--gray05); } .brd-r .brd-foot .brd-cmt ul li .cmt-txt { flex: 1 1 0; text-align: left; } .brd-r .brd-foot .brd-cmt ul li .cmt-nik { flex: 0 0 150px; word-break: break-all; } .brd-r .brd-foot .brd-cmt ul li .cmt-date { flex: 0 0 100px; color: var(--gray05); } .brd-r .brd-other { margin-top: 50px; } .brd-r .brd-other ul li span { display: inline-block; width: 100px; color: var(--gray05); } @media all and (max-width : 768px) { .brd-r .section { margin-bottom: 40px; } .brd-r ul.ul-line li { padding: 11px 8px; font-size: var(--font14); } .brd-r .brd-body { padding: 25px 3%; } .brd-r .brd-body .brd-body-txt iframe { min-height: 255px; } .brd-r .brd-foot .btn-box { margin: 23px 0 35px; } .brd-r .brd-foot .btn-box a { height: 42px; line-height: 42px; padding: 0 40px; } .brd-r .brd-other { margin-top: 35px; } } @media all and (max-width : 640px) { .brd-r ul.ul-flex li { flex-direction: column; gap: 2px; } .brd-r .brd-head .brd-info { font-size: 12px; } .brd-r .brd-body .brd-attach ul.brd-img { gap: 5px; } .brd-r .brd-foot .brd-cmt ul { text-align: left; } .brd-r .brd-foot .brd-cmt ul li .cmt-num { display: none; } .brd-r .brd-foot .brd-cmt ul li .cmt-txt { order: 2; } .brd-r .brd-foot .brd-cmt ul li .cmt-nik { flex: initial; order: 1; } .brd-r .brd-foot .brd-cmt ul li .cmt-date { flex: initial; order: 3; font-size: 11px; } .brd-r .brd-other ul li span { width: 70px; } } /* board *//* board write */ /* inquiry write 에 적용된 스타일 */ .brd-w .form-brd { display: flex; align-items: flex-start; padding: 17px 0 16px; gap: 10px; border-bottom: 1px solid var(--gray10); } .brd-w .form-brd .label-box { width: 150px; color: var(--gray06); } .brd-w .form-brd .input-box, .brd-w .form-brd .file-box { flex: 1 1 0; width: calc(100% - 160px); } .brd-w .form-brd .input-box .select-box { max-width: 400px; } /*.brd-w .form-brd .input-box .sel-input { display: flex; align-items: flex-start; gap: 30px; } dd del */ .brd-w .form-brd .input-box .w-guide { margin: 8px 0 0; } .brd-w .form-brd .input-box textarea { min-height: 155px; } .brd-w .form-brd .input-validation { margin-bottom: 0; } .brd-w .form-brd .file-box .file-wrap { } .brd-w .form-brd .file-box .file-wrap li { padding-left: 20px; background: url(/assets/img/common/icon_file.svg) no-repeat 0 50%; } .brd-w .form-brd .file-box .file-wrap li i.del-file { padding-left: 20px; background: url(/assets/img/common/icon_file.svg) no-repeat 0 50%; } .brd-w .form-brd .file-box .file-wrap li span { max-width: calc(100% - 30px); } .brd-w .form-brd .file-box .file-wrap li i.del-file { display: inline-block; width: 15px; height: 15px; margin-left: 5px; vertical-align: middle; background: url('/assets/img/common/icon_delete.svg') no-repeat 50% 50%; } .brd-w .agree-wrap { margin-top: 20px;} .brd-w .agree-wrap ul { padding: 0; border: none;} @media all and (max-width : 768px) { .brd-w .form-brd .label-box { width: 110px; } .brd-w .form-brd .input-box { flex: 0 0 auto; } .brd-w .form-brd .file-box { flex: 1 1 0; width: calc(100% - 120px); } } @media all and (max-width : 640px) { .brd-w .form-brd { flex-direction: column; padding: 11px 0; gap: 7px; } .brd-w .form-brd .label-box, .brd-w .form-brd .input-box, .brd-w .form-brd .file-box { width: 100%; } .brd-w .form-brd .input-box .select-box { max-width: 100%; } } /* modal common */ .modal-body .item-unit.list-nft { max-width: 296px; margin-bottom: 20px; } .modal-body .item-wrap-flex .img-wrap { position: relative; max-width: 80px; flex: 0 0 80px; } .modal-body .item-wrap-flex .img-box { border-radius: 10px; } .modal-body .item-info-wrap { max-width: calc(100% - 90px ); } /*.modal-body .series-info-box { display: block; max-width: calc(100% - 90px ); }*/ .modal-body .list-series { max-width: 400px; } .modal-body .series-info-box .series-txt { width: 100%; } .modal-body .series-info-box .series-txt .series-name { overflow: hidden; } .modal-body .table-top label { cursor: pointer; } .modal-body .table-top input[type=checkbox]:checked + label { color: var(--white); background-color: var(--gray02); } .modal-body .table-top .select-sort { width: 100%; max-width: 150px; } .modal-body .dl-wrap dt { width: 25%; min-width: 120px; } .modal-body .dl-wrap.txt-r dt { text-align: left; } .modal-body .dl-wrap.eng-dl dt { width: 35%; max-width: 150px; } /*.modal-body .user-txt .user-name.user-badge .txt-ellipsis { max-width: calc(100% - 21px); }*/ /*.modal-body .user-txt .user-name.user-badge::after { width: 14px; height: 14px; }*/ .modal-body .helpTip .helpTipTxt { max-width: 100%; } .modal-body .no-data p { margin: 80px auto; } @media all and (max-width : 480px) { .modal-body .item-info-wrap { max-width: calc(100% - 75px ); } .modal-body .series-info-box { max-width: calc(100% - 75px ); } .modal-body .item-wrap-flex .item-user-info { flex-direction: column; gap: 3px; } .modal-body .item-wrap-flex .user-royalty p::before { display: none; } .modal-body .table-top .select-mb { width: 48px; } .modal-body .table-top .select-mb .bootstrap-select .dropdown-toggle { } .modal-body .table-top .select-mb .bootstrap-select .dropdown-toggle { background: var(--gray13) url('/assets/img/common/icon_sort.svg') no-repeat center center; } .modal-body .table-top .select-mb .bootstrap-select .dropdown-toggle .filter-option-inner-inner { text-indent: -9999px; } .modal-body .table-top .select-mb .bootstrap-select .dropdown-menu { right: auto; width: 160px; } .modal-body .table-top .select-mb .bootstrap-select .dropdown-toggle .caret::after { display: none; } .modal-body .dl-wrap dl { flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 0; } .modal-body .dl-wrap dl dt, .modal-body .dl-wrap dl dd { width: 100%; text-align: left; } } /* modal table fraction */ .modal-body .table-fraction { min-width: 480px; } .modal-body .table-fraction .tbl-fraction { width: 18%; } .modal-body .table-fraction .tbl-owner { width: 36%; } .modal-body .table-fraction .tbl-price { width: 27%; } .modal-body .table-fraction .tbl-btn1 { width: 19%; } .modal-body .table-fraction .img-wrap { max-width: 30px; } .modal-body .table-fraction .item-cnt { color: var(--gray08); } .modal-body .table-fraction .item-cnt::before { display: inline-block; content: "/"; } .modal-body .table-fraction .user-txt { width: 100%; max-width: calc(100% - 35px); } .modal-body .table-fraction.table-cnt { min-width: auto; } .modal-body .table-fraction.table-cnt .user-txt { max-width: 100%; } .modal-fraction .modal-body { height: 425px; overflow-y: auto; } @media all and (max-width : 640px) { .modal-fraction .modal-body { height: auto; max-height: 60vh; } } @media all and (max-width : 640px) { .modal-body .table-fraction.table-cnt th:nth-child(2), .modal-body .table-fraction.table-cnt td:nth-child(2) { display: none; } } /* modal table edition */ .modal-body .table-edition { min-width: 600px; } .modal-body .table-edition .tbl-edition { width: 11%; } .modal-body .table-edition .tbl-owner { width: auto; } .modal-body .table-edition .tbl-type { width: 18%; } .modal-body .table-edition .tbl-state { width: 15%; } .modal-body .table-edition .tbl-price { width: 20%; } .modal-body .table-edition .tbl-btn1 { width: 13%; } .modal-body .table-edition .img-wrap { max-width: 30px; width: 30px; height: 30px; } .modal-body .table-edition .item-cnt { color: var(--gray08); } .modal-body .table-edition .item-cnt::before { display: inline-block; content: "/"; } .modal-body .table-edition .user-txt { width: 100%; max-width: calc(100% - 35px); } /*.modal-body .table-edition td.btl-price { word-break: break-all; }*/ #choiceEdition .modal-body { height: 450px; } @media all and (max-width : 640px) { #choiceEdition .modal-body { height: auto; max-height: 60vh; } } /* modal table order */ .modal-body .orderTable { max-height: 300px; overflow-y: auto; } .modal-body .orderTable table { font-size: var(--font14); } .modal-body .orderTable table th.tbl-date { width: 100px; } .modal-body .orderTable table th.tbl-order { width: 145px; } .modal-body .orderTable table th.tbl-buyer { width: 90px; } .modal-body .orderTable table td .order-number { text-decoration: underline; } /* modal deposit */ #deposit .modal-body .deposit-info { padding: 20px 20px 30px; border-radius: var(--radius20); border: 1px solid var(--gray10); } #deposit .modal-body .deposit-info .deposit-addr div { padding: 15px 20px; border-radius: var(--radius20); background-color: var(--gray13); } #deposit .modal-body .deposit-info .deposit-addr div span { font-size: var(--font14); word-break: break-all; } #deposit .modal-body .deposit-info .deposit-addr div button { flex: 0 0 20px; } /* modal report */ .modal-report .modal-body .dl-wrap dd .input-validation { margin-bottom: 0; } .modal-report .modal-body .dl-wrap dd .attention { margin-top: 8px; font-size: var(--font13); color: var(--gray07); } .modal-report .modal-body .answer { padding: 20px 10px; background-color: var(--gray13); } .modal-report .modal-body .answer p { font-size: var(--font13); color: var(--gray05); margin-bottom: 10px; } .modal-report .modal-body .answer p span { display: inline-block; padding: 6px 16px; margin-right: 15px; border-radius: var(--radius16); background-color: var(--gray06); color: var(--white); font-size: var(--font13); } @media all and (max-width : 640px) { .modal-report .modal-body .dl-wrap dt, .modal-report .modal-body .dl-wrap dd { width: 100%; max-width: 100%; } /*.modal-report .modal-body .bootstrap-select .dropdown-menu { max-height: 135px !important; }*/ } @media all and (max-width : 480px) { .modal-report .modal-body .item-wrap-flex .img-wrap { max-width: 65px; flex: 0 0 65px; } .modal-report .modal-body .answer p span { display: none; } } /* modal member */ .modal-member .modal-body { height: 390px; overflow-y: auto; } .modal-member .modal-body .member-list > li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray10); } .modal-member .modal-body .member-list .user-info-box { width: calc(100% - 80px); } .modal-member .modal-body .member-list .user-name a { font-size: var(--font14); } .modal-member .modal-body .member-list .uniqueId { font-size: var(--font12); color: var(--gray04); } .modal-member .modal-body .member-list .img-wrap { max-width: 40px;} .modal-member .modal-body .member-list .user-txt { max-width: calc(100% - 46px); } .modal-member .modal-body .member-list .no-data { margin: 50px auto 30px; } .modal-policy .modal-body { height: 288px; overflow-y: auto; } .modal-policy .modal-body .bootstrap-select { display: none; } @media all and (max-width : 640px) { .modal-policy .modal-body { height: auto; max-height: calc(80vh - 200px); } } /* 전체메뉴 */ .header-all-menu {position: sticky; top:100px;} .header-all-menu .all-menu-inner {display:none; position: absolute; left:0; width:100%; max-height: 337px; overflow: auto; background:#fff; border-bottom:1px solid #1a1a1a;} .header-all-menu .all-menu-content {display:flex; align-items: stretch; height: 100%; } .header-all-menu .all-menu-top {display:none; height:60px;} .header-all-menu .category-depth1 { position: relative; flex: 0 0 auto; width:213px; background: #f2f2f2; } /*.header-all-menu .category-depth1::before { content: ""; position: absolute; top: 0; display: block; width: 100%; height: 100%; }*/ .header-all-menu .category-depth1 ul li a {display:block; height:48px; background:#f2f2f2; padding:0 16px; line-height: 48px; border-bottom:1px solid #fff;} .header-all-menu .category-depth1 ul li.sel a {background:var(--primary); color:#fff;} .header-all-menu .category-depth2-list {display:none; flex-wrap: wrap; height:100%;} .header-all-menu .category-depth2-list.active {display:flex; } .header-all-menu .category-depth2-list .depth2-li {float:left; width:212px; /*height:100%;*/ padding:30px 0; border-right:1px solid #dedfe4; border-bottom: 1px solid #dedfe4; } .header-all-menu .category-depth2-list ul li a {display:block; padding:0 16px; height:40px; line-height: 40px; color:#82838b} .header-all-menu .category-depth2-list ul li a:hover {color:#1a1a1a;} .header-all-menu .category-depth2-list .depth2-sort { pointer-events: none; } .header-all-menu .category-depth2-list .depth2-sort a {font-size:var(--font16); font-weight: bold; margin-bottom:10px; color:#1a1a1a; padding:0 15px; height:40px; line-height: 40px; } @media all and (min-width : 1280px ) { .header-all-menu .category-depth2-list ul { display: block !important; } } @media all and (max-width : 1280px ) { .header-all-menu {top:0; z-index:1;} .header-all-menu .all-menu-inner {position: fixed; top:0; height:100%; max-height: 100%; } .header-all-menu .all-menu-top {display:block; position: relative;} .header-all-menu .all-menu-top {display:block; position: relative;} .header-all-menu .all-menu-top span {font-size:var(--font14); font-weight:bold; height:60px; line-height: 60px; display:block; padding:0 16px;} .header-all-menu .all-menu-top .btn-all-close {position: absolute; right:16px; top:calc(50% - 12px); width:24px; height:24px;background:url("/assets/img/common/icon-close-s.svg")no-repeat center; background-size:23px 23px;} .header-all-menu .all-menu-content {height:calc(100% - 60px); border-top:1px solid #1a1a1a;} .header-all-menu .category-depth1 {width:114px; flex-shrink: 0; background:#f2f2f2; border-bottom:none;} .header-all-menu .category-depth2 {width:calc(100% - 114px); height:100%; overflow-y: auto;} .header-all-menu .category-depth2-list.active { display: block; } .header-all-menu .category-depth2-list .depth2-li {width:100%; padding:0; border-bottom:1px solid #dedfe4} .header-all-menu .category-depth2-list ul {display:none;} .header-all-menu .category-depth2-list .depth2-sort { pointer-events: auto; } .header-all-menu .category-depth2-list .depth2-sort a {position: relative; font-size:var(--font14); height:46px; line-height:46px; padding:0 16px; margin-bottom:0; width:100%;} .header-all-menu .category-depth2-list .depth2-sort a:after {content:''; position: absolute; width:16px; height:16px; right:16px; top:calc(50% - 8px); background:url("/assets/img/common/icon-open-16-s.svg")} .header-all-menu .category-depth2-list .depth2-sort.on a:after {transform: rotate(-180deg)} } /* sub common */ .max-w1280 { position: relative; width: 100%; max-width: 1280px; margin:0 auto;} /* footer */ #footer { color:#55565b; padding: 31px 0; background-color:#f5f5f5; } #footer .bootstrap-select .dropdown-menu, #footer .bootstrap-select .dropdown .dropdown-menu { top: auto; bottom: 100%; } #footer .bootstrap-select .dropdown-toggle .filter-option-inner-inner { top: auto; bottom: 100%; } #footer .company-wrap { display: flex; align-items: flex-start; padding-bottom: 22px; } #footer .company-wrap ul li { display: inline-block; margin-right: 10px; } #footer .company-wrap .company-info { margin-left: 55px; } #footer .company-wrap .ft-link { margin-left: auto; flex: 0 0 auto; } #footer .company-wrap .ft-link .sns { flex: 0 0 auto; } #footer .right-wrap { font-size:var(--font13); padding-top: 24px; border-top: 1px solid #dedfe4; } #footer .right-wrap .policy-wrap { position: relative; } #footer .right-wrap .policy-terms { position: relative; margin-right: 20px; } #footer .right-wrap .policy-terms::after { position: absolute; top: 4px; right: -12px; content:""; display: inline-block; width: 1px; height: 12px; background-color: var(--gray05); } #footer .right-wrap .bootstrap-select .dropdown-menu { right: 0; left: auto; bottom: 30px; } #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 195px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 200px; } #footer .right-wrap .bootstrap-select .dropdown-toggle { font-size: var(--font13); color: var(--white); padding: 0; border: 0; border-radius: 0; background-color: transparent; } #footer .right-wrap .bootstrap-select .dropdown-toggle .caret::after { display: none; } #footer .right-wrap .bootstrap-select .dropdown .dropdown-menu { top: auto; bottom: 100%; } #footer .right-wrap .terms-wrap a { position: relative; color:#55565b; margin-right: 20px;} #footer .right-wrap .terms-wrap a:last-child { margin: 0; color:#55565b; font-weight: var(--font600); } #footer .right-wrap .terms-wrap a:not(:last-child)::after { position: absolute; top: 3px; right: -12px; content: ""; display: inline-block; width: 1px; height: 11px; background-color:#707070; } /*#footer .copyRight {color:Copyright © 2023 Piki Market. All rights reserved.}*/ /* /* #footer .company-wrap .ft-link .bootstrap-select .dropdown-toggle { color: var(--white); padding: 10px 20px 10px 40px; background: var(--black) url('/assets/img/common/icon_lang_w.svg') no-repeat 20px 50%; } */ @media all and (max-width : 1280px ) { .sub-container .max-w1280 { padding: 0 2%; } .sub-container .max-w1280.list-controller { padding: 0 !important; } } @media all and (max-width : 960px ) { body:has(.physical-detail) #footer { padding-bottom: 100px !important; } } @media all and (max-width : 640px ) { .sub-container .max-w1280 { padding: 0 4%; } } @media all and (max-width: 480px) { .max-w1280 {max-width: 100%;} } /* footer */ @media all and (max-width : 1280px ) { #footer .company-wrap .company-info ul li { display: block; font-size:var(--font13); } } @media all and (max-width: 960px) { #footer .company-wrap ul li { margin-right: 5px; } #footer .company-wrap { flex-direction: column; } #footer .company-wrap .company-info { margin: 20px 0; } #footer .company-wrap .ft-link { margin: 0; } #footer .right-wrap { flex-direction: column-reverse; align-items: baseline; } #footer .right-wrap .bootstrap-select .dropdown-menu { right: auto; left: 0; } } @media all and (max-width: 640px) { #footer .right-wrap { font-size: 12px; } #footer .company-wrap .ft-link .bootstrap-select { width: 100%; } #footer .company-wrap .ft-link .bootstrap-select .dropdown-toggle { padding: 7px 12px 7px 30px; background-position: 11px 50%; } #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 195px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 190px; } } @media all and (max-width: 480px) { #footer .right-wrap .policy-terms .bootstrap-select .dropdown-menu { width: 165px; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { width: 170px; } } @media all and (max-width: 320px) { #footer .company-wrap .ft-link { flex-direction: column; align-items: flex-start; gap: 7px; } #footer .company-wrap .ft-link .bootstrap-select { width: auto; } #footer .right-wrap .policy-privacy .bootstrap-select .dropdown-menu { left: auto; right: 0; } }