<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K2ZWHWT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>


<style>
  .navbar-brand{
  	margin:0!important;
    flex-grow:1;
    flex-shrink:1; 
  }
  
.custom-navbar.navbar {
    background-color: #040404 !important;
 	padding:0.2rem 4rem !important;
    width: var(--page-max-width);
 	margin: 0 auto;
    max-width: 100%;
}
.navbar-toggler::before{
    font-size:2rem;
}
.custom-navbar .container {
    padding-left: 25px;
    padding-right: 25px;
}
.custom-navbar.navbar .nav-link {
    color: #AAACBA !important;
    margin-left: 0.1rem;
    margin-right: 0.5rem;
}
.custom-navbar.navbar .nav-link:hover {
    color: #ffffff !important;
}
.custom-navbar.navbar .navbar-brand img {
    background-color: transparent !important;
    filter: brightness(0) invert(1); 
  	object-fit: contain;
  	max-width: 100%;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

* { word-break: keep-all !important; font-family: "Pretendard Variable", Pretendard, serif; letter-spacing: -0.2px; }
body { margin: 0; padding: 0; }
h4 { font-weight: 700 !important; }
h3 { font-weight: 700 !important; }
h2 { font-size: 42px !important; }
h2 span { font-weight: 800 !important; }
.page_cover, .width.padding:first-of-type, .notion-frame>div>div:first-child, .notion-record-icon { display: none !important; }
.notion-frame>div>div:nth-child(2) { display: flex !important; max-width: 1000px !important; width: 100%; margin: 0 auto; }
.notion-frame>div:nth-child(1) { background: none; }
.notion-topbar { background: none !important; border: none !important; padding: 0; }
.notion-topbar+div { border: none !important; background: none !important; position: relative; }
.notion-topbar+div+div { display: none !important; }
.notion-header-block { font-size: 22px; margin: 3rem 0 0; text-align: center; }
.notion-sub_sub_header-block { font-size: 20px; margin-top: 0 !important; }
.notion-sub_header-block, .notion-image-block { font-size: 20px; margin-bottom: 8px !important; margin-top: 0 !important; }
.notion-topbar { height: 120px !important; }
.notion-calloutline-height-block, .notion-text-block { line-height: 1.7; }
.notion-toggle-block { line-height: 1.7; }
.notion-toggle-block>div>div>div>div>span { font-weight: 500 !important; }
.notion-toggle-block>div { color: #DDDDE4 !important; fill: #DDDDE4 !important; }
.notion-page-content { font-size: 16px !important; padding-top: 0 !important; }
.notion-link-token:hover { text-decoration: underline !important; }
.notion-collection-item h4 { font-size: 16px; }
.notion-toggle-block { background-color: #0d0f13 !important; padding: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2C3039; }
.notion-link-token span { color: #DDDDE4!important; border-bottom: 0!important; opacity: 1!important; }
.hidden { display: none; }
.glowing { animation: glow 1s alternate infinite; }
[class^="CalloutBlock_content__"] { color: #DDDDE4 !important; background-color: #0d0f13 !important; padding: 24px !important; line-height: 1.6; }
[class^="CalloutBlock_blocks__"] { color: #DDDDE4 !important; margin-left: 0!important; }
.mord { font-size: 18px; font-weight: 600; }
.css-14is9qy { font-size: 30px; }
.css-ff5b3c { margin-bottom: 8px !important; }
.nav-link.active { font-weight: 700; }
.nav-link:active { font-weight: 700; }
[data-block-id="f5c7e684-53d5-45d5-ad5d-f86766be62db"], [data-block-id="0c41da45-b211-4425-9ec6-ff34b88f4434"] { font-size: 18px; }
[data-block-id="28a381e9-24d1-4829-8e81-3b8b421cff29"], [data-block-id="183128fa-e0f4-4c32-84bd-0e04cf7e3c61"] { display: none !important; }
[role="button"]:not([tabindex="-1"]):active { background: var(--primary-transparent-24); }
@keyframes glow { from { text-shadow: 0 0 5px #87CEEB, 0 0 5px #614ad3; } to { text-shadow: 0 0 20px #87CEEB, 0 0 20px #614ad3; } }
.notion-quote-block>div>div { border-left: 2px solid rgba(0,0,0,0.2) !important; padding: 0 10px !important; }
.fontKakao { font-family: "KakaoSans" !important; }
@property --rotate { syntax: "<angle>"; initial-value: 132deg; inherits: false; }
.lecCrd { background: #0d0f13; padding: 12px 16px 16px!important; position: relative; border-radius: 20px; border: 1px solid #2C3039; justify-content: center; align-items: center; display: flex; cursor: pointer; margin-bottom: 44px; }
.lecCrd img { cursor: pointer; border: 1px solid rgba(255,255,255,0.1); }
.lecCrd > div > div { width: 100% !important; }
.lecCrd:hover { box-shadow: 0 0 16px rgba(33, 33, 33, .2); transition: box-shadow .3s; }
.lecCrdCtr { cursor: none; }
.lecCrdCtr img { border: none; cursor: none; }
.lecCrdCtr, .lecCrdCtr::before, .lecCrdCtr::after { background: none; animation: none; }
@keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; } }
.txtCrd>a { height: 600px!important; background: transparent!important; box-shadow: none!important; }
.txtCrd>a>div>div+div { display: none; }
.txtCrd>a>div>div>div>div { height: 600px!important; padding-top: 0!important; }
.txtCrd>a>div>div>div>div>div { color: #333 !important; }
.txtCrd>a>div>div>div>div>div>div { opacity: 1.0!important; margin-bottom: 30px; }
.txtCrd>a>div .notion-text-block { font-size: 13px; }
.txtCrd>a>div h4 { font-size: 14px; }
.txtCrd>a>[role="button"]:not([tabindex="-1"]):hover { background: transparent; }
.txtCrd div[aria-label="collection tile"]>div:first-of-type { -webkit-mask-image: linear-gradient(to bottom,rgba(40,48,59,0)0%,rgba(40,48,59,1)20%,rgba(40,48,59,1)80%,rgba(40,48,59,0)100%); mask-image: linear-gradient(to bottom,rgba(40,48,59,0)0%,rgba(40,48,59,1)20%,rgba(40,48,59,1)80%,rgba(40,48,59,0)100%); }
@keyframes scrollUp { 0% { transform: translateY(-600px); } 100% { transform: translateY(-100%); } }
@keyframes scrollDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(-600px); } }
.txtCrd>a>div>div>div>div>div { overflow: hidden; position: relative; background-color: inherit; }
.txtCrd:nth-child(odd)>a>div>div>div>div>div { width: 100%; animation: scrollUp 100s linear infinite; }
.txtCrd:nth-child(even)>a>div>div>div>div>div { width: 100%; animation: scrollDown 100s linear infinite; }
.CalloutBlock_content__AigMk { border: 1px solid #2C3039 !important; border-radius: 20px !important; }

@media(max-width:480px) {
    .custom-navbar.navbar {
        display: grid !important;
        justify-content: space-between;
        align-items: center;
      width:100%;
      grid-template-columns: auto auto;
      min-width:0; 
      	padding: 1.5rem 1.25rem !important;
    }
    .notion-topbar img { height: 40px !important; }
    .notion-page-content { padding: 0 20px 20px 20px !important; }
    .notion-header-block { font-size: 18px; margin-top: 2rem !important; }
    .notion-image-block { margin-bottom: 8px !important; margin-top: 8px !important; }
    .notion-sub_header-block, .notion-sub_sub_header-block, .notion-toggle-block, .notion-text-block, .notion-callout-block { font-size: 16px; }
    .notion-column_list-block { display: flex; flex-wrap: wrap; align-items:center; justify-content:center; flex-direction: column; }
    .notion-column_list_block>div { display: contents; }
    .notion-topbar { height: 80px !important; padding: 5px 12px 5px 18px; }
    h4 { font-size: 18px !important; }
    h3 { font-size: 24px !important; }
    h2 { font-size: 27px !important; }
    .notion-quote-block>div { font-size: 14px !important; }
    .notion-bulleted_list-block { font-size: 14px !important; }
    .mord { font-size: 16px; font-weight: 600; }
    .CalloutBlock_content__AigMk { padding: 20px !important; }
    .navbar { padding: 0.6875rem 0 !important; }
    .form-inline { display: block !important; }
    .ctrItm { padding: 0 5px 5px!important; border-radius: 8px; margin: 0 2px; text-align: center!important; }
    .ctrItm+div { width: 0px!important; }
  .css-1r6553s{
  	width: 100%;
  }
}
</style>

<script>
let count = 20;
const chg = () => { chgAll(); count-- <= 0 && clearInterval(intervalId); };
const intervalId = setInterval(chg, 20);
['scroll', 'DOMContentLoaded'].forEach(evt => window.addEventListener(evt, chgAll));
window.addEventListener('DOMContentLoaded', () => {
  chgAll();
  window.matchMedia(mq).addEventListener('change', chgAll);
  document.querySelectorAll('img').forEach(img => img.addEventListener('load', chgAll));
});
</script>

의류 이커머스 플랫폼 | Highfive

시연영상

프로젝트 소개