:root{
  --content_width: 1200px;
}
/*  */
body{background: #333;width: 100%;overflow-x: hidden;;}
/* body{
    width: 100%;
    --s: 200px;
    --c1: #1d1d1d;
    --c2: #4e4f51;
    --c3: #3c3c3c;
  
    background: repeating-conic-gradient(
          from 30deg,
          #0000 0 120deg,
          var(--c3) 0 180deg
        )
        calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
      repeating-conic-gradient(
        from 30deg,
        var(--c1) 0 60deg,
        var(--c2) 0 120deg,
        var(--c3) 0 180deg
      );
    background-size: var(--s) calc(var(--s) * 0.577);

} */
/* body{
  --mx: 0;
  --my: 0;
  --a-x: calc(var(--mx) * 8px);
  --a-y: calc(var(--my) * 8px);
  --b-x: calc(var(--mx) * -6px);
  --b-y: calc(var(--my) * -6px);
  --c-x: calc(var(--mx) * 4px);
  --c-y: calc(var(--my) * 4px);

  background:
    repeating-linear-gradient(
        45deg,
        #0000 calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        #0000 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        #0000 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(0px + var(--c-x)) calc(0px + var(--c-y)),
    repeating-linear-gradient(
        45deg,
        #0000 calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        #0000 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        #0000 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(32px + var(--a-x)) calc(32px + var(--a-y)),
    repeating-linear-gradient(
        -45deg,
        #0000 calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        #0000 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        #0000 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(0px + var(--b-x)) calc(0px + var(--b-y)),
    repeating-linear-gradient(
        -45deg,
        #0000 calc(-650% / 13) calc(50% / 13),
        #100f0f 0 calc(100% / 13),
        #0000 0 calc(150% / 13),
        #100f0f 0 calc(200% / 13),
        #0000 0 calc(250% / 13),
        #100f0f 0 calc(300% / 13)
      )
      calc(32px + var(--a-x)) calc(32px + var(--a-y)) #1e1e1e;

  background-size: 64px 64px;
  width: 100%;
  height: 100%;
} */
/*  */
.p{display: flex;}
.m{display: none;}
.flex{display: flex;}
/* body{background: #333;} */
main{width: 100%; min-height: 100vh; overflow: hidden; }
.btn{display: flex; line-height: 1.6; align-items: center; font-weight: 500; box-sizing: border-box; transition: .2s; color: #fff; font-size: 14px; justify-content: center;gap: 6px;padding: 8px 14px;border-radius: 10px;background: var(--color-primary-500); cursor: pointer; border: 2px solid var(--color-primary-500);}
.btn:hover{background: var(--color-primary-50); color: var(--color-primary-500);}
/* 아웃라인 버튼 변형 */
.btn-outline{background: transparent; color: var(--color-primary-500); border-color: var(--color-primary-500);}
.btn-outline:hover{background: var(--color-primary-500); color: #fff;}
/*  */
header{position: fixed;top: 0;left: 0;width: 100%;z-index: 999;}
header .h_inner{max-width: 90%; width: var(--content_width); height: 40px; margin: 20px auto; display: flex;align-items: center;justify-content: space-between;}
header .logo,
header .transparent{height: 40px; filter: brightness(0) invert(1); z-index: 999;}
header .logo img,
header .transparent img{width: 100%;height: 100%;object-fit: contain;}
header .transparent{user-select: none; pointer-events: none; opacity: 0;}
header .menu{transition: .3s; background: rgba(0,0,0,0.1);backdrop-filter: blur(24px); border-radius: 10px; height: 100%;padding: 0 14px; overflow: hidden;}
header .menu .m_inner{display: flex;align-items: center;gap: 10px;font-weight: 500;height: 100%;}
header .menu a{position: relative; height: 100%; color: #fff; font-size: 14px; padding: 10px;display: flex;align-items: center;justify-content: center;}
header .menu a::after{content: ''; opacity: 0; transition: .2s; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; border-radius: 10px; background: #fff; }
header .menu a:hover::after{bottom: 5px;opacity: 1;}
/*  */
.ham_btn{
    z-index: 1001;
    position: relative;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.ham_btn span{width: 20px; height: 2px; background: #fff; transform-origin: center; border-radius: 10px;transition: .2s;left: 0; position: relative;}
.ham_btn:hover span:nth-child(2){left: 2px;}
body.ham .ham_btn span:nth-child(2){left: 4px; opacity: 0;}
body.ham .ham_btn span:nth-child(1){transform: rotate(45deg) translateY(10px); left: 8px;}
body.ham .ham_btn span:nth-child(3){transform: rotate(-45deg) translateY(-10px); left: 8px;}
body.ham{overflow: hidden;}
/*  */
footer{width: 100%;background: #F7F7F7; z-index: 999;}
footer .f_inner{display: flex;flex-direction: column; width: var(--content_width); max-width: 90%; margin: 0 auto; padding: 40px 0;}
footer .logo{height: 40px; display: flex;width: fit-content;}
footer .logo img{width: auto;height: 100%;object-fit: contain;}
footer .f_info{display: flex;gap: 5px 10px;flex-wrap: wrap;}
footer .f_menu{display: flex;gap: 10px; width: 300px; margin: 0;}
footer .f_title{width: 90px; font-size: 14px;font-weight: bold;color: #333;}
footer .f_content{font-size: 14px;font-weight: 500;color: #333;}
footer .f_menu dd{margin: 0;}
footer .f_df{display: flex;gap: 20px; justify-content: space-between; margin-top: 20px;}
.w100{width: 100%; height: 0;}

footer .copyright{border-top: 1px solid #ddd; font-size: 12px;font-weight: 400;color: #333; text-align: right; margin-top: 20px; padding-top: 20px;}
footer .sns_bx{display: flex; gap: 10px; align-items: flex-start; flex-shrink: 0;}
footer .sns_bx a{display: flex;transition: .2s;top: 0;display: flex;}
footer .sns_bx img{top: 0; position: relative; width: 24px; aspect-ratio: 1/1; object-fit: contain; transition: .2s;}
footer .sns_bx a:hover img{top: -3px;}

/*  */
@media (max-width: 1024px){
    .p{display: none;}
    .m{display: flex;}
    /*  */
    .ham_btn{display: flex;}
    /*  */
    header .logo, 
    header .transparent{height: 30px;}
    header .menu{
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        pointer-events: none;
        width: 100%;
        height: 100vh;
    }
    body.ham header .menu{opacity: 1; pointer-events: auto;}
    header .h_inner > .flex{align-items: center;}
    header .menu .m_inner{flex-direction: column; justify-content: center;}
    header .menu a{height: 30px;}

    footer .f_df{flex-direction: column-reverse;}
    footer .f_info .w100{display: none;}

    
}