/*withu-min v1 src=39544 md5=a4388a016aba1bcc6e96d740d1c6849c*/






.family-slider-section {
  padding: var(--space-11) var(--gutter) var(--space-9);
  overflow: hidden;
  background: var(--color-bg);
}


.family-slider-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: var(--width-body);
  margin-inline: auto;

  
  padding-block: 2px;
}


.family-slider-track {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  
  animation: withu-marquee var(--family-marquee-dur) linear infinite;
}


.family-slider-section:hover .family-slider-track {
  animation-play-state: paused;
}

@keyframes withu-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .family-slider-track {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  
  .family-circle:hover img { transform: none; }
}


.family-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.family-circle img {
  width: auto;
  max-height: var(--family-logo);
  object-fit: contain;
  transition: transform var(--transition);
}


.family-circle:hover img { transform: scale(1.06); }




.cf2 {
  padding: var(--space-10) 0 var(--space-9);
  background: var(--c-gray-950);
  color: var(--color-text-invert);
}

.cf2 a { color: inherit; }


.cf2 .container { max-width: calc(var(--width-body) + var(--gutter) * 2); }

.cf2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.cf2-menus {
  display: flex;
  gap: var(--space-10);
}

.cf2-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cf2-col a {
  font-size: var(--fs-base);
  transition: color var(--transition);
}


.cf2-main a { color: var(--color-text-invert); }
.cf2-sub  a { color: var(--c-gray-500); }

.cf2-col a:hover { color: var(--color-text-invert); }



.cf2-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}




.cf2-family { position: relative; }

.cf2-family-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  min-width: 200px;
  border: 0;
  border-bottom: 1px solid var(--c-gray-700);
  background: none;
  color: var(--c-gray-300);
  font-size: var(--fs-sm);

  
  letter-spacing: var(--ls-label);

  justify-content: space-between;
}

.cf2-family-btn .material-symbols-outlined {
  font-size: 20px;
  color: inherit;
  transition: rotate var(--transition);
}

.cf2-family.open .cf2-family-btn .material-symbols-outlined { rotate: 180deg; }



.cf2-family-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-header);

  max-height: 0;
  overflow: hidden;
  padding: 0;

  background: var(--c-gray-900);
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius);

  
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray-700) transparent;

  opacity: 0;
  visibility: hidden;

  
  transition: opacity var(--transition), visibility var(--transition),
              max-height var(--transition), padding var(--transition);
}


.cf2-family-list::-webkit-scrollbar {
  
  width: 6px;
}

.cf2-family-list::-webkit-scrollbar-track {
  background: transparent;
}

.cf2-family-list::-webkit-scrollbar-thumb {
  background: var(--c-gray-700);
  border-radius: var(--radius-pill);
}

.cf2-family-list::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-600);
}


.cf2-family.open .cf2-family-list {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-2) 0;
  opacity: 1;
  visibility: visible;
}

.cf2-family-list a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--c-gray-300);
}

.cf2-family-list a:hover {
  background: var(--c-gray-800);
  color: var(--color-text-invert);
}




.cf2-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
}


.cf2-brand {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 900;          
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-invert);

  
  margin-bottom: -0.133em;
}

.cf2-sns {
  display: flex;
  gap: var(--space-3);
}

.cf2-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-gray-700);
  border-radius: var(--radius-circle);
  transition: border-color var(--transition), background var(--transition);
}

.cf2-sns a:hover {
  border-color: var(--color-text-invert);
  background: var(--c-gray-800);
}

.cf2-sns i {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}



.cf2-sns-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
}

.cf2-sns-youtube {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.cf2-sns-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E");
}





@media (max-width: 767px) {

  

  
  .cf2 { padding: var(--space-8) 0 var(--space-5); }

  .cf2-top {
    flex-direction: column;
    gap: var(--space-7);
    margin-bottom: var(--space-8);
  }

  
  .cf2-menus {
    flex-direction: column;
    gap: var(--space-9);
  }

  .cf2-col { gap: var(--space-3); }

  
  .cf2-main a { font-size: var(--fs-base); }
  .cf2-sub  a { font-size: var(--fs-sm); }

  .cf2-family { width: 100%; }

  .cf2-family-btn { width: 100%; }

  
  .cf2-family-list {
    top: auto;
    bottom: 100%;
  }

  
  .cf2-family-btn .material-symbols-outlined { rotate: 180deg; }
  .cf2-family.open .cf2-family-btn .material-symbols-outlined { rotate: 0deg; }

  

  
  .cf2-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  
  .cf2-brand { font-size: 64px; }
}