@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600;800&display=swap");
@import url("../font/pretendard/pretendard.css");
@import url("./preline.css");
@layer utilities {
	.content-auto {
		content-visibility: auto;
	}
}

:root {
	--font-family-base: 'Raleway', "Pretendard", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-accent: "Outfit", "Pretendard", sans-serif;
	--base-size: 16px;
	--font-weight: 400;
	--user-font-scale: 1rem;
    --line-height: 1.6;
    --page-min-width: 320px;
	--smaller: .92;
	--padding-x: 2rem;
    --footer-height: 54px;
	--wrapper: 75rem;
	--header-wrapper: 100%;
	--content-wrapper: 50rem;
    --backdrop-opacity: 0.75;

	--color-text: hsl(0, 0%, 0%);
	--color-surface: hsl(45, 8%, 90%);
	--color-primary: hsl(332, 71%, 49%);
	--color-secondary: hsl(246, 65%, 49%);
	--color-accent: hsl(325, 96%, 72%);
	--color-hero-bg: hsl(180, 18%, 92%);

	--fs-100: clamp(0.64rem, calc(0.60rem + 0.23vw), 0.78rem);
	--fs-200: clamp(0.75rem, calc(0.65rem + 0.36vw), 0.94rem);
	--fs-300: clamp(0.84rem, calc(0.71rem + 0.52vw), 1.15rem);
	--fs-400: clamp(0.91rem, calc(0.77rem + 0.73vw), 1.35rem);
	--fs-500: clamp(1.03rem, calc(0.83rem + 0.99vw), 1.62rem);
	--fs-600: clamp(1.16rem, calc(0.89rem + 1.31vw), 1.94rem);
	--fs-700: clamp(1.30rem, calc(0.96rem + 1.72vw), 2.33rem);
	--fs-800: clamp(1.46rem, calc(1.02rem + 2.23vw), 2.80rem);

    /* Cool Gray (Slate) */
	/* --gray-50: hsl(210, 20%, 98%);
	--gray-100: hsl(220, 14%, 96%);
	--gray-200: hsl(220, 13%, 91%);
	--gray-300: hsl(216, 12%, 84%);
	--gray-400: hsl(218, 11%, 65%);
	--gray-500: hsl(220, 9%, 46%);
	--gray-600: hsl(215, 14%, 34%);
	--gray-700: hsl(217, 19%, 27%);
	--gray-800: hsl(215, 28%, 17%);
	--gray-900: hsl(221, 39%, 11%);
	--gray-950: hsl(224, 71%, 4%); */
	
    /* Neutral Gray */
	--gray-50: hsl(0, 0%, 98%);
	--gray-100: hsl(0, 0%, 96%);
	--gray-200: hsl(0, 0%, 90%);
	--gray-300: hsl(0, 0%, 77%);
	--gray-400: hsl(0, 0%, 64%);
	--gray-500: hsl(0, 0%, 45%);
	--gray-600: hsl(0, 0%, 32%);
	--gray-700: hsl(0, 0%, 25%);
	--gray-800: hsl(0, 0%, 15%);
	--gray-900: hsl(0, 0%, 11%);
	--gray-950: hsl(0, 0%, 7%);

    /* --mixed-gray: hsl(220, 2%, 50%); */
    --mixed-gray: hsl(225deg 10.51% 64.09%);
    --mixed-gray-50: color-mix(in oklab, var(--mixed-gray) 5%, white);
    --mixed-gray-100: color-mix(in oklab, var(--mixed-gray) 10%, white);
    --mixed-gray-200: color-mix(in oklab, var(--mixed-gray) 30%, white);
    --mixed-gray-300: color-mix(in oklab, var(--mixed-gray) 50%, white);
    --mixed-gray-400: color-mix(in oklab, var(--mixed-gray) 70%, white);
    --mixed-gray-500: var(--mixed-gray);
    --mixed-gray-600: color-mix(in oklab, var(--mixed-gray) 80%, black);
    --mixed-gray-700: color-mix(in oklab, var(--mixed-gray) 60%, black);
    --mixed-gray-800: color-mix(in oklab, var(--mixed-gray) 45%, black);
    --mixed-gray-900: color-mix(in oklab, var(--mixed-gray) 32.5%, black);
    --mixed-gray-950: color-mix(in oklab, var(--mixed-gray) 22.5%, black);

    /* --gray-50: var(--mixed-gray-50);
    --gray-100: var(--mixed-gray-100);
    --gray-200: var(--mixed-gray-200);
    --gray-300: var(--mixed-gray-300);
    --gray-400: var(--mixed-gray-400);
    --gray-500: var(--mixed-gray-500);
    --gray-600: var(--mixed-gray-600);
    --gray-700: var(--mixed-gray-700);
    --gray-800: var(--mixed-gray-800);
    --gray-900: var(--mixed-gray-900);
    --gray-950: var(--mixed-gray-950); */
}

html.dark {  
	--color-text: hsl(0, 0%, 90%);
	/* --color-surface: hsl(240, 3%, 8%); */
    --color-surface: hsl(0, 0%, 5%);
	--color-secondary: hsl(172, 89%, 29%);
	--color-accent: hsl(325, 96%, 72%);
	--color-hero-bg: hsl(221, 58%, 6%);
    --backdrop-opacity: 0.9;
}

@media (max-width: 467px) {
	:root {
		--padding-x: 1rem;
	}
}

@media (min-width: 468px) and (max-width: 767px) {
	:root {
		--padding-x: 1.5rem;
	};
}


/* @media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--padding-x: 2.5rem;
	}
} */

*, :after, :before {
	box-sizing: border-box;
}

::-moz-selection {
	background: var(--color-primary);
	color: white;
}

::selection {
	background: #000000a4;
	color: white;
}

html {
	height: 100%;
	scroll-behavior: smooth;
	/* scroll-padding-top: 6rem; */
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: var(--page-min-width);
	height: 100%;
	background: var(--color-surface);
	font-size: var(--fs-300);
	font-family: var(--font-family-base);
	color: var(--color-text);
	line-height: var(--line-height);
	letter-spacing: -0.02em;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	overflow-y: scroll;
    overflow-x: hidden;
}

body.lock {
	touch-action: none;
	-ms-scroll-chaining: none;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: auto;
	overflow-y: hidden;
}

h1, h2, h3 {
	font-family: var(--font-family);
	line-height: 1.1;
	/* text-wrap: balance; */
    word-break: keep-all;
}

h1 {
	font-size: var(--fs-700);
	/* color: var(--color-accent); */
}

h2 {
	font-size: var(--fs-600);
	/* color: var(--color-primary); */
}

h3 {
	font-size: var(--fs-500);
	/* color: var(--color-text); */
}

p {
    word-break: break-all;
    line-height: var(--line-height);
}

input, progress {
	accent-color: var(--color-accent);
}

a, button {
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

a:hover:not([type="button"]),
::marker {
	color: var(--color-primary) !important;
}

a[type="button"],
button {
    white-space: nowrap;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

a, button {
    transition: color 0.25s ease;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

input, progress {
    accent-color: var(--color-primary);
}

[type="radio"], label {
    vertical-align: middle;
}

[type="radio"] {
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
    background: #ffffff;
    border: max(5px, 0.4em) solid #D1D5DB;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    transition: border 0.1s ease-in-out;
}

[type="radio"]:checked {
    border: 0.4em solid var(--color-primary);
}

[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted var(--color-primary);
}

[type="radio"]:hover {
    /* box-shadow: 0 0 0 max(3px, 0.15em) #D1D5DB;box-shadow */
    cursor: pointer;
}

[type="radio"]:hover + label {
    cursor: pointer;
}

[type="radio"]:disabled {
    background-color: #D1D5DB;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

[type="radio"]:disabled + label {
    opacity: 0.7;
    cursor: not-allowed;
}

.filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}

select:disabled,
input:disabled,
input[readonly="readonly"] {
    cursor: not-allowed;
}

header {
    --gnb-height: 36px;
    --tnb-height: 124px; 
    display: flex;
    flex-shrink: 0;
	width: 100%;
    height: calc(var(--tnb-height) + var(--gnb-height));
}

header #main-header-body {
    display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
    background: #ffffff;
    width: 100%;
    height: calc(var(--tnb-height) + var(--gnb-height));
    box-shadow: 0 1px 16px hsla(0, 0%, 0%, 0.095);
    transition: height 150ms linear;
	z-index: 50;
}

@media (max-width: 767px) {
	header {
        --tnb-height: 64px;
	}
}

/* @media (max-width:767px) {
    header {
        height: var(--gnb-height);
    }
    header.scrolled.up {
        height: 100px;
        transition: height 150ms linear;
    }
    header.scrolled,
    header.scrolled.down {
        height: 60px;
        transition: height 150ms linear;
    }

    header #tnb {
        height: var(--tnb-height);
        transition: height 150ms linear;
    }

} */
/* header.scrolled #tnb {
    transform: translateY(var(--tnb-height) * -1);
    overflow: hidden;
    transition: height 150ms linear;
} */

@media (min-width:768px) {

    header.scrolled > * {
        transition: height 150ms linear;
    }

    header.scrolled {
        --tnb-height: 90px !important;
    }

    header.scrolled a {
        gap: 12px;
    }

    header.scrolled img#symbol {
        height: 45px;
    }

    header.scrolled img#logo {
        height: 12px;
    }
}

header nav {
    width: 100%;    
	height: var(--gnb-height);
	padding: 0 var(--padding-x);
	grid-template-columns: 1fr auto 1fr;
}

main {
	display: flex;
	flex-direction: column;
    flex-grow: 1;
	flex-shrink: 0;
	/* justify-content: center; */
}

/* @media (max-width: 467px) {
    main {
        padding-bottom: 2rem;
    }
} */

main section {
	width: 100%;
}

/* main section#hero {
    margin-top: var(--header-height);
}

header.scrolled ~ main section#hero {
    margin-top: var(--gnb-height);
} */

main aside {
	flex-basis: 200px;
	flex-grow: 1;
}

main article {
	display: flex;
	flex-direction: column;
	flex-basis: 471px;
	flex-grow: 999;
	gap: 3rem;
}

/* main article section > * + :not(h1):not(h2):not(h3) {
	margin-top: 1.5rem;
} */

/* main article.flow > * + * {
	margin-top: 1em;
} */

main .wrapper {
	/* width: min(100%, 65ch); */
	margin-inline: auto;
}

footer {
	display: grid;
	width: 100%;
    height: var(--footer-height);
	place-items: center;
	flex-shrink: 0;
	margin-top: auto;
}

.grid-center {
	display: grid;
	place-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-balance {
	text-wrap: balance;
}

@supports not (text-wrap: balance) {
	.text-balance {
		width:80%;
	}
}

#bo_v_con.pswp-gallery {
    & iframe {
        width: 100%;
    }
}

/* 팝업레이어 */
#hd_pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1000;

    & h2 {
        position:absolute;
        font-size:0;
        line-height:0;
        overflow:hidden;
    }
}



.hd_pops {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
    box-sizing: border-box;

    & .hd_pops_wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        background: transparent;
        width: 100%;
        max-width: 500px;
        height: fit-content;
        box-shadow: 0 6px 16px lab(0% 0 0 / 0.35);
        border-radius: 8px;
        overflow: hidden;
    }

    & .hd_pops_con {
        display: flex;
        width: 100% !important;
        max-width: 500px;
        height: fit-content !important;

        & img {
            width: 100% !important;
            height: auto !important;
        }
    }
}

.hd_pops_footer {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    text-align: left;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    &:after {
        display: block;
        visibility: hidden;
        clear: both;
        content:""
    }
    
    & button {
        display: flex;
        align-items: center;
        height: 100%;
        padding-inline: 20px;
        border:0;
        color:#fff;
        font-size: 13px;
    }
    
    & .hd_pops_reject {
        display: none;
        text-align:left;
    }
    
    & .hd_pops_close {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        padding-inline: 16px;
        font-weight: 600;
        background: #96384e;
    }
}

html.Mobile #hd_pop {
    & .hd_pops_wrapper {
        position: fixed;
        top: unset !important;
        bottom: 0;
        border-radius: 12px 12px 0 0 !important;
    }

    & .hd_pops_footer {
        height: 54px;
    }
}


.hs-dropdown.open svg.chevron {
	transform: rotate(180deg);
}

.hs-dropdown svg.chevron,
.hs-dropdown.open svg.chevron {
transition: transform 0.15s ease;
}

.hs-overlay-backdrop {
    background: #000 !important;
    opacity: var(--backdrop-opacity);
}

.avatar-mask {
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
	mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==)
}

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.parallax__container .parallax {
	/* can be put in a seperate class for better control */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* --------------------------- */
	position: fixed;
	top: 0;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
	width: 100%;
}


/* Scroll to TOP */
.scroll-to-top {
    display: flex;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 50%;
    bottom: -200px;
    z-index: 200;
    background-color: rgb(61 61 61 / 80%);
    border-radius: 50%;
    height: 42px;
    width: 42px;
    margin-left: -23px;
    color: #fff;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: scale(0);
    transform-origin: center;
    transition: all 0.5s ease-in-out;
}

html.dark .scroll-to-top {
    background-color: rgba(255, 255, 255, 0.1);
}

.scroll-to-top.active {
    bottom: 1.5rem;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: all 0.65s cubic-bezier(0.58, 0, 0.33, 1.35);
}

.scroll-to-top.active.at-bottom {
    bottom: 0.8rem;
    transition: all 0.5s ease;
}

.scroll-to-top:hover {
	background-color: var(--color-primary) !important;
    transform: scale(1.05);
	transition: all 0.15s linear;
}

.scroll-to-top img {
    width: 26px; height:auto;
    /* -webkit-filter: drop-shadow(2px 2px 4px #000000db);
            filter: drop-shadow(2px 2px 4px #000000db); */
}

@media (max-width:768px) {
    /* .scroll-to-top {
        left: 50%;
    } */
    .scroll-to-top.active {
        bottom: 1.25rem;
    }
    .scroll-to-top.active.at-bottom {
        bottom: 7.25rem;
    }
}

#daum_juso_pagemb_zip {
    min-height: 470px !important;
    max-height: 470px !important;
    margin: 0 !important;
    border-color: #d1d5db !important;
    border-radius: 6px !important;
    overflow: hidden;   
}

#btnFoldWrap {
    right: -1px !important;
    top: -1px !important;
}

.info_body {
    padding: 10px !important;
}

@media (max-width: 467px) {
    .stretch-full {
        margin-left: -1rem;
        width: calc(100% + 2rem) !important;
    }    
}

.bg-noisy {
    background-image: url(../img/img-noise.png);
    background-repeat: repeat;
    background-size: 182px;
    opacity: .05;
}

/* Progressively enhanced infinite horizontal scroll */
.scroller {
    max-width: 100%;
  }
  
.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
 }
  
.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    flex-wrap: nowrap;
    -webkit-animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
            animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }
  
  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }
  
  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }
  
  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  @-webkit-keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
  
  /* general styles */
  
  :root {
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);

    --scroller-gap: 1.5rem;
	--scroller-time: 40s;	
  }

  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  
  .tag-list li {
    padding: 1rem;
    background: var(--clr-primary-400);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
  }
  

  /* Scroller */
.scroller[data-hover-paused="true"] .scroller__inner:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

.scroller__inner.logos {
    background: var(--color-surface);
}

.scroller__inner.logos a:hover img {
	opacity: 1;
}

.scroller__inner.logos img {
    mix-blend-mode: difference;
	opacity: 0.85;
}


  /* Lazyload - vanilla-lazyload */
/* img.lazy {
    opacity: 0;
}
img:not(.initial) {
    transition: opacity 1s;
}
img.initial,
img.loaded,
img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
} */

.page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 9999;
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate 1s linear infinite;
            animation: rotate 1s linear infinite
  }
  .loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 3px solid #333;
    -webkit-animation: prixClipFix 2s linear infinite ;
            animation: prixClipFix 2s linear infinite ;
  }

  @-webkit-keyframes rotate {
    100%   {transform: rotate(360deg)}
  }

  @keyframes rotate {
    100%   {transform: rotate(360deg)}
  }

  @-webkit-keyframes prixClipFix {
      0%   {-webkit-clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }

  @keyframes prixClipFix {
      0%   {-webkit-clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {-webkit-clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0);clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }

.board-category li a {
    font-weight: 400;
    color: var(--gray-500);
}

.board-category li a:hover {
    /* text-decoration: none; */
}

.board-category li a#bo_cate_on {
    color: var(--color-primary);
    font-weight: 600;
}

.sound_only,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}