@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gmarket/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gmarket/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gmarket/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'ELAND_Nice_M';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {box-sizing:border-box;word-break:keep-all;letter-spacing:-0.025em;}

html, body{margin:0; padding:0;}
html {
    scroll-behavior: smooth;
}
html{
    font-size:20px;
}
body{
    font-size:1em;font-family:'Pretendard';
    /* background-image:url(../img/bg.png); */
    background-repeat: repeat;
    background-attachment: fixed;
    background-position:right bottom;
    background-color:#222;
}

/* reset */
ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;list-style:none;}

:root{
    --header-height:100px;
    --bg-color-1:#222222;
    --bg-color-2:#2a282a;
    --bg-color-3:#f4b11c;
    --bg-color-4:#2f2e2e;
    --bg-color-5:#fdfdfd;
    --bg-color-6:#f4b11c;
    --bg-color-7:#f4b11c;
    --bg-color-8:#fdfdfd;
    --footer-height:120px;
    
    --color-red:#cd191c;
    --color-darked:#111111;
    --color-yellow:#f3b01b;
    --color-brown:#734d29;
    --color-gold:#ffca55;
    --color-form-button:#f4b11c;
    --color-form-bg:var(--color-darked);
    
    --max-width:1800px;
}

.max-width{
    width:95%;
    max-width:var(--max-width);
    margin:0 auto;
}

body.modal-open {
  overflow: hidden;
}

a{text-decoration:none;}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color:transparent;
    background-image:linear-gradient(180deg, rgba(34,34,34,0.9) 80%, rgba(34,34,34,0) 100%);
    z-index: 1000;
    padding: 0;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
    height:var(--header-height);
    display:flex;
    align-items:center;
}
header nav {
    flex:1;
    background:transparent;
}
header nav ul{
    display:flex;
    list-style:none;
    justify-content:space-between;
}
header nav ul li a {
  text-decoration: none;
  padding: 0.5rem;
  color: #ffffff;
  transition: color 0.3s;
}

header nav ul li a.active {
  color:var(--color-form-button);
  font-weight: bold;
  /* border-bottom: 2px solid #007bff; */
}

header nav ul li a.active {
  /* background: linear-gradient(to right, #007bff, #0056b3);
  padding: 0.5rem 1rem;
  */
  border-radius: 5px;
  
  transition: all 0.3s ease;
}

.sound_only{
    position:absolute;
    font-size:0px !important;
    opacity:0;
    height:0 !important;
    line-height:0 !important;
}

.page-scroll-bar-outer{
    height:4px;
    width:100vw;
    position:fixed;
    z-index:1001;
    top:0;
    left:0;
}
.page-scroll-bar{
    position:absolute;
    height:100%;
    background-color:var(--color-yellow);
    transition:all 0.5s;
    width:0%;
}

.logo-title{
    margin-right:45px;
    font-size:1.85rem;
    font-family:'Black Han Sans';
    font-weight:normal;
    display:flex;
    align-items:center;
    gap:0.5rem;
}
.n-scroll-menu::-webkit-scrollbar {
    display: none;
}
.n-section-box::-webkit-scrollbar {
    display: none;
}
main {
    /*
    padding-top: var(--header-height);
    */
     /* 헤더 높이만큼 여백 확보 */
}

.n-section-box h2{
    font-size:3em;
    font-family:'GmarketSans';
    font-weight:700;
    text-shadow:0 5px 3px rgba(0,0,0,0.2);
    position:relative;
    z-index:1;
}
.n-section-box h2 > span{
    display:inline-flex;
    align-items:center;
    position:relative;
    z-index:1;
}
.n-section-box h2 .dot-added{

}
.n-section-box h2 .dot-added > span {
    position:relative;
    display:inline-block;
    vertical-align:middle;
    margin:0;
    padding:0;
}
.n-section-box h2 .dot-added > span:not(.dot-not):before{
    content:'';
    position:absolute;
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
    left:50%;
    transform:translateX(-50%);
    top:0rem;
    opacity:0;
    background-color:#ffffff;
}

.n-section-box h2 .dot-added.dot-white{
    color:#ffffff;
}
.n-section-box h2 .dot-added.dot-white > span:before{
    background-color:#ffffff;
}

.n-section-box h2 .dot-added.dot-red{
    color:#ff2c2c;
}
.n-section-box h2 .dot-added.dot-red > span:before{
    background-color:#ff2c2c;
}
.n-section-box h2 .dot-added.dot-cyan{
    color:#00ffd8;
}
.n-section-box h2 .dot-added.dot-cyan > span:before{
    background-color:#00ffd8;
}

.color-yellow{
    color:#ffbe2e;
}
.color-black{
    color:#000000;
}
.color-white{
    color:#ffffff;
}
.color-red{
    color:var(--color-red);
}
.color-gold{
    color:var(--color-gold);
}



.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(1):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:0.5s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(2):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:0.7s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(3):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:0.9s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(4):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:1.1s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(5):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:1.3s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(6):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:1.5s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(7):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:1.7s;}
.n-section-box h2 .dot-added > span.aos-animate:nth-of-type(8):before{animation-name:moveUp; animation-iteration-count: infinite; animation-direction: alternate; animation-duration:0.5s;  animation-fill-mode:forwards; animation-timing-function:ease; animation-delay:1.9s;}

.n-section-box h2 .dot-added.dot-yellow{
    color:#ffc441;
}
.n-section-box h2 .dot-added.dot-yellow > span:before{
    background-color:#ffc441;
}

.flex-direct-col{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.875rem;
}
.text-white{ color:#ffffff; }

@keyframes moveUp {
    from{
        transform:translateY(0) translateX(-50%); 
        opacity:0; 
    } 
    to{
        transform:translateY(-1.6rem) translateX(-50%); 
        opacity:1;
    }
}

.n-section-box{
    display: flex;
    background-color:#ffffff50;
    /* min-height: calc(100vh - var(--header-height)); */
    scroll-margin-top: var(--header-height);
    scroll-margin-bottom: var(--footer-height);
    transition:background-color 0.3s;
    /* 임시 */
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    overflow-y:auto;
    position:relative;
}
.n-section-box.active:nth-of-type(1){background-color:var(--bg-color-1);}
.n-section-box.active:nth-of-type(2){background-color:var(--bg-color-2);}
.n-section-box.active:nth-of-type(3){background-color:var(--bg-color-3);}
.n-section-box.active:nth-of-type(4){background-color:var(--bg-color-4);}
.n-section-box.active:nth-of-type(5){background-color:var(--bg-color-5);}
.n-section-box.active:nth-of-type(6){background-color:var(--bg-color-6);}
.n-section-box.active:nth-of-type(7){background-color:var(--bg-color-7);}
.n-section-box.active:nth-of-type(8){background-color:var(--bg-color-8);}

.n-section-box-last{
    /* margin-bottom: var(--footer-height); */
}

.n-section-box.n-footer{
    min-height:10vh;
    padding-top:2rem;
    margin-bottom:calc(var(--footer-height) + 2rem);
}

.n-gnb-outer{
    flex:1;
    display:flex;
    max-width:var(--max-width);
    margin:0 auto;
    align-items:center;
    padding:0 0;
}

.n-fly-box{
    position:fixed;
    top:50%;
    right:25px;
    transform:translateY(-50%);
    z-index:5;
}

.n-fly-box a{
    display:block;
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid #ffffff;
    background-color:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}
.n-fly-box a span{
    display:block;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:transparent;
    transition:all 0.3s;
}
.n-fly-box a.active{
    border-color:#ffcc00;
    transition:all 0.3s;
}
.n-fly-box a.active span{
    background-color:#ffcc00;
    transition:all 0.3s;    
}

.n-fly-box ul.n-navigation-box{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.n-section-box-inner{
    display:flex;
    height:100%;
    width:90%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}

.n-section-box-inner h2{
    font-weight:400;
    font-size:4rem;
    font-family:'Black Han Sans';
    color:#ffffff;
}

.n-section-box-inner img{
    width:auto !important;
    max-width:100%;
}

.footer#counsel_form{
    position:fixed;
    bottom:calc( -1 * var(--footer-height));
    left:0;
    right:0;
    z-index:100;
    opacity:0;
    transition:all 0.5s;
    color:#ffffff;
    container-name: form-container;
    container-type: inline-size;    
}
.footer#counsel_form.show{
    bottom:0;
    opacity:1;
    transition:all 0.5s;
}

.footer#counsel_form .n-relative{
    position:relative;
    height:var(--footer-height);    
}

.footer#counsel_form .n-form-show-btn{
    position:absolute;
    display:none;
    height:45px;
    background-color:var(--color-red);
    color:#ffffff;
    border:0;
    left:10%;
    border-radius:6px 6px 0 0;
    font-size:1.125rem;
    padding:0 10px;
    top:-45px;
    border:0;
    cursor:pointer;
}

.n-form-flex{
    display:flex;
}
.n-form{
    display:flex;
    flex-direction:column;
    align-items: stretch;
    justify-content:center;
    width: 100%;
    height: 100%;    
    position:relative;
    padding:0 2rem;
    background-color:var(--color-form-bg);    
}

.n-form-outer{
    justify-content: center;
    gap:1rem;
    width: 100%;    
}

.n-form .n-form-input{
    border:0;
    padding:1em 1.25em;
    background-color:#333333;
    border:1px solid #888888;
    border-radius:6px;
    color:#ffffff;
}
.n-form-inner{
    display:flex;
    align-items: stretch; 
    gap:1rem;
}
.n-form-inner .n-form-btn{
    height:100%;
    border:0;
    border-radius:6px;
    background-color:var(--color-form-button);
    font-size:1.25rem;
    padding:0 2rem;
    font-weight:700;
    letter-spacing:-0.05em;
    color:#000000;
}

.n-form-inner a{
    font-size:0.75rem;
    color:#ffffff;
}

.n-form-field{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.n-form-field .n-form-flex{
    gap:0.75rem;
    align-items:center;
}

.n-form-field .n-form-flex>div{
    display:flex;
    align-items:center;
}

.modal-outer{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    backdrop-filter:blur(5px);
    z-index:1001;
    height:100vh;
    display:none;
}
.modal-outer.active{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;    
}
.modal-outer .modal-inner{
    background-color:#ffffff;
    position:relative;
    overflow:hidden;
    width: 80%;
    height:70%;
    flex: 0 0 auto;    
    display:flex;
    flex-direction:column;
}

.modal-outer .modal-header{
    position:absolute;
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    background-color:var(--color-red);
    color:#ffffff;
    padding:0 1.25rem;
    z-index:1;
    top:0;
    left:0;
    right:0;
    height:48px;
}

.n-fly-box nav{
    display:flex;
    flex-direction:column;
    align-items: center;    
    gap:1.25rem;
}

.coucel-q-btn{
    background-color:var(--color-red);
    color:#ffffff;
    font-size:1.125rem;
    font-family:'Black Han Sans';
    border:0;
    border-radius:6px;
    cursor:pointer;
}

.modal-outer .privacy-content{
    padding:1rem;
    font-family:'Noto Sans KR' !important;
    font-size:1rem !important;
    font-weight:500;
    overflow-y:auto;
    margin-top:48px;
}

.modal-outer .modal-privacy-close{
    font-size:1.125rem;
    color:#ffffff;
    outline:0;
    background-color:transparent;
    border:0;
}

.n-form-outer h3{
    font-weight:700;
    font-size:1.625rem;
    font-family:'Gmarket Sans';    
}

.n-form-radio{
    display:none;
}
.n-form-radio + label{
    position:relative;
    font-size:0.85rem;
    padding-left:1.5rem;
    color:#ffffff;
    font-weight:500;
    transition: height 0.3s ease;    
}
.n-form-radio + label:before{
    content:'';
    position:absolute;
    width:1.15rem;
    height:1.15rem;
    border-radius:3px;
    left:0;
    top:50%;
    transform:translateY(-50%);
    border:1px solid #ffffff;
}
.n-form-radio:checked + label:before{
    background-color:var(--color-form-button);
}

.n-form-checkbox + label{
    margin-right:0.5rem;
}

.n-mobile-menu-btn{
    display:none;
}

.aos-box{
    background-color:#cccccc;
}

.aos-tmp-flex{
    display:flex;
    jusity-content:space-between;
    gap:2.5rem;
}

.aos-box{
    flex:1;
    min-height:400px;
}

.btn-top{
    position:fixed;
    right:15px;
    bottom:15px;
    z-index:101;
    display:none;
    text-transform:uppercase;
    background-color:transparent;
    border:0;
}

.btn-top .go-top { width:70px;height:70px; position:relative; display:flex; justify-content:center; align-items:center; border:1px solid #dedede; overflow:hidden; z-index:2; transition-duration:600ms; transition-delay:400ms; box-shadow:2px 2px 5px rgba(0,0,0,.2); background:rgba(255,255,255,.9); border-radius:50%;}
.btn-top .go-top:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:50%; width:0; height:0; background:#111; transition-duration:600ms; z-index:-1; }

.btn-top .go-top {transform:translateY(0); transition-delay:0ms; }

.btn-top .go-top span { position:absolute; left:calc(50% - 1px); top:calc(50% - var(--arrow-height)/2); width:2px; height:var(--arrow-height); background:#111; --arrow-height:12px; }
.btn-top .go-top span:before,
.btn-top .go-top span:after { content:""; position:absolute; width:2px; height:8px; border-radius:2px; background:#111; }
.btn-top .go-top span:before { right:100%; top:-3px; transform:rotate(45deg); }
.btn-top .go-top span:after { left:100%; top:-3px; transform:rotate(-45deg); }

.btn-top .go-top:hover { border-color:#111; }
.btn-top .go-top:hover:before { width:120%; height:120%; }
.btn-top .go-top:hover b { color:#fff; }
.btn-top .go-top:hover span,
.btn-top .go-top:hover span:before,
.btn-top .go-top:hover span:after { background:#fff;}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-90px) translateY(-50px);
  }
  50% {
    opacity: 0;
    transform: translateX(-90px) translateY(10px) scale(200%);
  }
  100% {
    opacity: 1;
    transform: translateX(0)  translateY(0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0) translateY(0) rotateY(0) rotateZ(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(90px) translateY(50px) rotateY(90deg) rotateZ(360deg) scale(0.5);
  }
}

@keyframes bounce-in-up {
  0%   { opacity:0; transform: translateY(60px) scale(0.96); }
  55%  { opacity:1; transform: translateY(-10px) scale(1.02); }
  75%  { transform: translateY(5px)  scale(0.99); opacity:1;}
  100% { transform: translateY(0)    scale(1); opacity:1;}
}

[data-aos="bounce-in"]{
  opacity:0; 
  transform: translateY(60px) scale(0.96);
}
[data-aos="bounce-in"].aos-animate{
    /* 여러 번 튕김 느낌의 키프레임 실행 */
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: bounce-in-up;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
}

#ani-text span.animate-out {
  animation: fadeOutRight 0.75s forwards ease ;
}


#ani-text span {
  opacity: 0;
  color:transparent;
  font-size:4.4rem;
  font-weight:normal;
  font-family:'ELAND_Nice_M'; 
  display:inline-block;  
  /*text-shadow:2px 2px 8px rgba(0,0,0,0.75);*/
  background-image: linear-gradient(0deg, rgba(238,161,41,1) 0%, rgba(246,219,119,1) 50%, rgba(214,132,20,1) 100%);
  background-clip: text;
}

#ani-text span.animate-in {
  animation: fadeInLeft 0.75s forwards ease;
}

.type-zoom {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 2px solid #fff;
  animation: typing 2s steps(20, end) infinite, blink 0.75s step-end infinite;
}

.n-footer{
    background-color:#222222;
    color:#ffffff;
    
}
.n-footer .info {
    display: flex;
    justify-content: center;
    flex-direction:column;
    margin: 0 auto;
    align-items: center;
}
.n-footer .info .logo{
    display: flex;
    justify-content: center;
    flex-direction:column;
    margin: 1.5rem auto;
}
.n-footer .desc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -2px;
    margin: 0 auto;
}
.n-footer .desc dl {
    display: flex;
    margin: 2px 15px 2px 0;
}
.site-link button{color:#ffffff;background-color:transparent;border:0;}

.an-img-box{
    position:relative;
    overflow:hidden;
    width:100%;
    aspect-ratio:16/8.5;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
}
.an-img-box img{
    width:auto !important;
    max-width:100%;
}
.an-img-box > img{
    display:block;
}

.n-footer .copyright > p{
    color:rgba(255,255,255,0.5);
}

/* 애니메이션 오브젝트용 정의 */
.n-section-object{
    position:absolute;
    z-index:2;
}
.n-section-object-box{
    position:absolute;
    z-index:1;
    top:50%;
    left:0;
    width:100%;
    transform:translateY(-50%);
}
.n-section-content{
    max-width:var(--max-width);
    margin:0 auto;
    display:flex;
    align-items: center;
    justify-content: center;    
}

.main-text > div{
    font-size:2.25rem;
    font-family:'GmarketSans';
    text-align:center;
    color:transparent;
    background-image: linear-gradient(0deg, rgba(238,161,41,1) 0%, rgba(246,219,119,1) 50%, rgba(214,132,20,1) 100%);
    background-clip: text;
    display:flex;
    flex-direction:column;
}

.particle-layer{
    width:100%;
    height:100%;
    margin:0 auto;
    overflow:hidden;
}

.particle-left,.particle-right{
    position:absolute;
    top:0;
    height:100%;
    overflow:hidden;
    width:50vw;
    display:flex;
    transition: all 3s ease;
    opacity:0.2;
}

.particle-left {
    left: -50vw;
}

.particle-right {
    right: -50vw;
    justify-content:flex-end;      
}

body.loaded .particle-left{
    animation: fadeL 1.5s infinite alternate;    
}
body.loaded .particle-right{
    animation: fadeR 1.5s infinite alternate;
}
@keyframes fadeL{
      0% {opacity: 0.2; transform:rotateZ(0deg)}
     50% {opacity: 1; transform:rotateZ(-0.5deg) translateX(-2%) }
    100% {opacity: 0.2;  transform:rotateZ(0deg)}
}
@keyframes fadeR{
      0% {opacity: 0.2; transform:rotateZ(0deg)}
     50% {opacity: 1;  transform:rotateZ(0.5deg) translateX(2%)}
    100% {opacity: 0.2;  transform:rotateZ(0deg)}
}

body.loaded .particle-left {
    opacity:1;
    left: 0;
}

body.loaded .particle-right {
    opacity:1;
    right: 0;
}

.cutton-layer{
    width:100%;
    height:100%;
    margin:0 auto;
    overflow:hidden;
}

.cutton-left,.cutton-right{
    position:absolute;
    top:0;
    height:100%;
    overflow:hidden;
    width:30vw;
    display:flex;
    transition: left 0.75s ease, right 0.75s ease;
}

.cutton-left {
    left: -30vw;
}

.cutton-right {
    right: -30vw;
    justify-content:flex-end;  
}

body.loaded .cutton-left {
  left: 0;
}

body.loaded .cutton-right {
  right: 0;
}

.cutton-right img{
    transform:rotateY(-180deg);
}


/* 슬라이드 인 + 타이핑 */
.slide-type {
    overflow: hidden;
    white-space: nowrap;
    animation: slideIn 0.8s ease-out, typing 2s steps(20) 0.8s forwards infinite, blink 0.75s step-end infinite 2.8s;
}

@keyframes slideIn {
  from { transform: translateX(-50%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 애니메이션 오브젝트용 정의 */

.youtube-iframe{
    position:relative;
    width:90%;
    max-width:1000px;
    aspect-ratio:16/9;
    z-index:1;
    margin:2em auto 1em auto;
}
.youtube-iframe .youtube-wrap{
    width:100% !important;
    height:100% !important;
    position:relative;
    border: 8px solid #000;
    background:#000000;
}
.youtube-iframe .youtube-wrap > iframe{
    width:100% !important;
    height:100% !important;
}

.youtube-hart{
    position:absolute;
    max-width:112px;
    width:10%;
    z-index:1;
    right:2%;
    bottom:2%;
}

.n-sec2-imgtxt-box{
    display:flex;
    flex-direction:column;
    gap:5vh;
    align-items:center;
}
.n-sec2-bubble{
    display:flex;
    align-items:center;
    gap:5vw;
    justify-content:center;
}
.shop-box{
    width:100%;
    padding:15px;
    overflow:hidden;
    margin:2rem auto 0 auto;
}

.mySwiper .swiper-slide{
    width:100%;
    max-width:350px;
    aspect-ratio:367/274;
}

.n-sec2-oper-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.n-sec2-oper-info > div{
    font-size:1.875rem;
    position:relative;
    z-index:1;
    padding:0 15px;
}
.n-sec2-oper-info > div:before{
    content:'';
    position:absolute;
    z-index:-1;
    width:100%;
    height:80%;
    background-color:#c2fce5;
    left:0;
    bottom:-8px;
}
.flex-tbl{
    display:flex;
    flex-wrap:wrap;
    align-items: center;    
}
.flex-tbl > div{
    flex:0 0 auto;
    width:30%;
}
.flex-tbl > div:nth-of-type(2n){
    flex:1;
    text-align:right;
    font-size:1em;
}
.flex-tbl > div {
    font-size:0.9em;
}
.flex-tbl > div > span{
    font-size:0.9em;
}

.grid-tbl{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.grid-tbl > div.grid-left{
    text-align:left;
    font-size:1.25em;
    color:#000000;
    font-weight:600;
}
.grid-tbl > div.grid-right{
    text-align:right;
    font-size:1.1em;
    color:#666;
}

.diff-box{
    display:flex;
    flex-direction:column;
    background-color:#fafafa;
    padding:1em;
    gap:10px; 
    font-size:1em;
    text-align:center;   
    border-radius:1em;
    height: 100%;
    justify-content: center;    
}

.diff-tit{
    font-size:1.25em;
    color:#333333;
}
.diff-cost{
    font-size:1.56em;
    font-weight:700;
    letter-spacing:-0.05em;
}

.diff-cost > strong{
    font-weight:700;
    position:relative;
}

.diff-cost > strong:before{
    content:'';
    margin-right:5px;
    display:inline-block;
    width:0.8em;
    height:0.8em;
    border-radius:50%;
    background-color:#f4f4f4;
    vertical-align:middle;
}
.diff-cost.diff-col-1 > strong:before{
    background-color:#2d62cd;
}
.diff-cost.diff-col-2 > strong:before{
    background-color:#ffd200;
}

.diff-point > span{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:1em;
    color:#666666;
    font-size:1.06em;
    padding:0.3em 1em;
}
.diff-point.diff-red > span{
    background-color:#fbd0db;
    color:#f11616;
}

.diff-point.diff-blue > span{
    background-color:#daebff;
    color:#146bc4;
}

.an-tab{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:5px;
}
.an-tab > div{
    padding:0.7em 1.5em;
    background-color:#f3f3f4;
    color:#272727;
    border-radius:16px;
    text-align:center;
}
.an-tab > div:first-child{
    background-color:#114cc5;
    color:#ffffff;
}

.anibar-wrap{position:relative;width:100%;height:14px;overflow:hidden;}

.bar-section-group{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.bar-section-group > div{
    display:flex;
    flex-direction:column;
    align-items: center;    
    color:#8a8a8a;
    font-size:1.06em;
    font-weight:600;
    letter-spacing:-0.05em;
}

.bar-section-group > div:last-child{
    color:#000000;
}

.bar-y-group{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
    width: 80%;    
}

.aos-init:has(.n-section-object-box){
    overflow:hidden;
}

.bar-section-legend{
    display:flex;
    justify-content:flex-end;
}
.bar-section-legend > div{
    display:flex;
    border:1px solid #ccc;
    border-radius:1em;
    padding:0.6em 1em;
    flex-direction:column;
    position:relative;
    flex: 0 0 auto;
    width: 90%;
    max-width: 200px;
    
}
.bar-section-legend > div:after{
    content:"";
    position:absolute; left:calc(100% - 24px); 
    bottom:-8px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #ccc;
}
.bar-section-legend > div > div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1em;
}
.bar-section-legend > div > div > span{
    flex:1;
}
.bar-section-legend > div > div > span:first-child{
    text-align:right;
}
.bar-section-legend > div > div > span:last-child{
    flex:1.5;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.bar-section-legend > div > div .diff-cost{
    font-size:1em;
    font-weight:600;
    letter-spacing:-0.05em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.bar-section-legend > div > div .diff-cost > strong{
    font-weight:600;
    position:relative;
}

.bar-section-legend > div > div .diff-cost > strong:before{
    content:'';
    margin-right:5px;
    display:inline-block;
    width:0.8em;
    height:0.8em;
    border-radius:50%;
    background-color:#f4f4f4;
    vertical-align:middle;
}
.bar-section-legend > div > div .diff-cost.diff-col-1 > strong:before{
    background-color:#2d62cd;
}
.bar-section-legend > div > div .diff-cost.diff-col-2 > strong:before{
    background-color:#ffd200;
}

/* 기본 상태: 0 (보이지 않음) */
.ani-bar-x, .ani-bar-y{
  transition: transform 900ms cubic-bezier(0.25,0.8,0.25,1);
  will-change: transform;
  /* height:100%;*/
}

.aos-init .ani-bar-x { transform-origin: left center; transform: scaleX(0); }
.aos-init .ani-bar-y {transform-origin: center bottom; transform: scaleY(0); }

.aos-init[data-aos-id="bar-animation"] .ani-bar-x.is-run { transform: scaleX(calc(var(--p, 100) * 0.01)); }
.aos-init[data-aos-id="bar-animation"] .ani-bar-y.is-run { transform: scaleY(calc(var(--p, 100) * 0.01)); }


/* 액션: X축 */
.ani-bar-x.ani-bar-action {
  animation: BarActionX var(--dur, 500ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--delay, 0ms) both;
}

/* 액션: Y축 */
.ani-bar-y.ani-bar-action {
  animation: BarActionY var(--dur, 500ms) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--delay, 0ms) both;
}

/* 목표치는 --p(0~100)로 제어 */
@keyframes BarActionX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(calc(var(--p, 100) * 0.01)); }
}

@keyframes BarActionY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(calc(var(--p, 100) * 0.01)); }
}


.flex-column-between{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding-top:6rem;
    padding-bottom:3rem;    
    gap:0.1rem;
}

@media (prefers-reduced-motion: reduce){
  .ani-bar-x, .ani-bar-y{ transition: none !important; transform: none !important; }
  .js-ani-root .js-ani-object {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@media(max-width:1500px){
    html{
        font-size:16px;
    }
    header nav {
        flex:0 0 auto;
        width:100%;
        overflow:hidden;
    }
    .scroll-wrapper {
      position: relative;
      overflow: hidden;
    }

    .scroll-wrapper::before,
    .scroll-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 30px;
      z-index: 2;
      pointer-events: none;
    }

    .scroll-wrapper::before {
      left: 0;
      background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
    }

    .scroll-wrapper::after {
      right: 0;
      background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
    }

    .n-scroll-menu {
      position: relative;
      z-index: 1;
    }
    .logo-title {
        display: none;
    }
    .n-scroll-menu {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        position: relative;
        padding: 1rem 2rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .an-img-box {
        width: 100%;
        aspect-ratio:initial;
    }
}

@media(max-width:1280px){
    :root{
        --header-height: 48px;
    }
    .footer#counsel_form .n-relative{
        height:0;
    }
    .footer#counsel_form .n-relative.expanded {
        height: 80vh !important;
    }
    .n-form {
        padding: 2rem 2rem;
        display:none;
    }
    .footer#counsel_form .n-relative.expanded .n-form {
        display:block;
    }
    .n-form-outer {
        flex-direction:column;
        justify-content: center;
        gap: 1rem;
        width: 100%;
    }
    .n-form-inner, .n-form-field {
        display: flex;
        flex-direction:column;
        align-items: stretch;
        gap: 1rem;
    }
    .n-form-inner .n-form-btn{
        height:100%;
        border:0;
        border-radius:6px;
        background-color:#f4b11c;
        font-size:2rem;
        padding:2rem 2rem;
        font-weight:700;
        letter-spacing:-0.05em;
        color:var(--color-form-bg);
    }
    
    .n-form-field .n-form-flex>div{
        flex:1;
        width:100%;
    }
    .footer#counsel_form .n-form-show-btn{
        display:block;
    }
    /*
    .coucel-q-btn{
        display:none;
    }
    */
    .n-mobile-menu-btn{
        display:block;
    }
    .aos-tmp-flex{
        flex-direction:column;
    }
    .n-section-box-last {
        margin-bottom:0;
    }
    .n-section-box{
        padding:0 0;
    }
    header{
        padding:0;
    }
    main .n-section-box:first-child{
        padding:0;
        min-height: 0;
        height: auto !important;        
    }
    #ani-text span {
        font-size:2.5rem;
    }
}

@media(max-width:1024px){
    html{
        font-size:15px;
    }
    .n-form-field > .n-form-flex{
        flex-direction:column;
    }
    .n-form-field .n-form-flex .n-form-input{
        flex:1;
        width:100%;
    }
}

@media(max-width:768px){
    html{
        font-size:14px;
    }
    .btn-top .go-top{
        width:50px;
        height:50px;
    }
}

@container form-container(min-width:1280px){
    .n-form-outer h3{
        font-size:1rem;
    }
    .n-form-show-btn{
        display:none;
    }
}

.prize-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:25px;
}

.prize-box > div{
    background-color:#ffffff;
    border:3px solid #9d1f15;
    border-radius:20px;
    padding:30px;
    position:relative;
    text-align:center;
    max-width:230px;
    width:25%;
    aspect-ratio:230/200;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    box-shadow:6px 6px 8px rgba(0,0,0,0.35);
}

.store-name{
    font-family:'Gmarket Sans','Pretendard',sans-serif;
    font-weight:500;
    font-size:1.4rem;
    letter-spacing:-0.05em;
}
.store-sales{
    font-family:'Gmarket Sans','Pretendard',sans-serif;
    color:#a92218;
    font-weight:700;
    letter-spacing:-0.05em;
    font-size:1.5rem;
}
.prize-medal{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:50%;
}

.prize-medal > img{
    width:auto !important;
    max-width:100%;
}

.prize-box.prize-bottom{
    place-content: center;
}
.prize-box.prize-bottom > div{
    max-width:230px;
    aspect-ratio:230/190;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;    
}

.prize-flex-col{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5em;
}
.prize-info-txt{
    font-family:'Gmarket Sans','Pretendard',sans-serif;
    color:#a92218;
    font-weight:700;
    letter-spacing:-0.05em;
    font-size:2.5rem;
}

.prize-top{
    margin-top:150px;
}

.text-type-ani-blink {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 2px solid #ccc;
  animation: typing 5s steps(35, end) infinite, blink 0.75s step-end infinite;
  /* background-clip: text;*/
}

.text-type-ani {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 0px solid #ccc;
  animation: typing 5s steps(35, end) infinite alternate;
  /* background-clip: text;*/
}


@keyframes typing {
    0% { width: 0; }
   50% { width: 105%; }
  100% { width: 105%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

.ani-blink{
  animation-name: _blink_;
  animation-duration: var(--dur, 1s);
  animation-timing-function: steps(5, end);
  animation-delay: var(--delay, 0s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes _blink_ {
    0% { opacity:0.25; }
   50% { opacity:1; }
  100% { opacity:1; }
}

.fade-rotate {
  opacity: 0;
  transform: translateX(-50%) rotateY(-180deg) scale(0.8);
  tansform-orgin:center center;
  animation: fadeRotate 2.4s ease-out forwards infinite;
}

@keyframes fadeRotate {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotateY(-180deg) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
}


.ani-up-down{
  opacity:0;
  animation-name: aniUpDown;
  animation-duration: 1s;
  animation-timing-function:ease-in-out;
  animation-delay: 1.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes aniUpDown {
    0% { opacity:1; transform:translateY(-10%); }
   50% { opacity:1; transform:translateY(0); }
  100% { opacity:1; transform:translateY(0); }
}

.ani-tilt{
  opacity:0;
  animation-duration: 1s;
  animation-timing-function:ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
}
.ani-tilt.tilt-left{
    animation-name: aniTiltLeft;
    transform-origin:bottom right;
}
.ani-tilt.tilt-right{
    animation-name: aniTiltRitht;
    transform-origin:bottom left;
}
@keyframes aniTiltLeft {
    0% { opacity:1; transform:rotateZ(-5deg); }
   50% { opacity:1; transform:rotateZ(0deg); }
  100% { opacity:1; transform:rotateZ(0deg); }
}
@keyframes aniTiltRitht {
    0% { opacity:1; transform:rotateZ(5deg); }
   50% { opacity:1; transform:rotateZ(0deg); }
  100% { opacity:1; transform:rotateZ(0deg); }
}

.revenue-grid{
    max-width:1800px;
    margin:0 auto;
    padding:0 1.5rem;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    overflow:hidden;
    gap:6.75rem;
    align-items: stretch;    
}

.revenue-item h3{
    font-size:1.95rem;
    font-weight:700;
    letter-spacing:-0.05em;
}
.revenue-item-right > img{
    border-radius:1.15rem;
    overflow:hidden;
}

.card-box{
    position:relative;
    z-index:1;
    background-color:#ffffff;
    padding:2rem;
    border-radius:1.5rem;
    box-shadow:0px 0px 25px rgba(0,0,0,0.35);
}

.h-100{height:100%;}
.img-back-center-cover{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    overflow:hidden;
}

.border-1{ border-radius:1.5rem;}

.check-list{list-style:none;margin:0;padding:0;}
.check-list > li{
    --ss:1.325rem;
    position:relative;
    padding-left:calc(var(--ss) + 1rem);
    margin:0.2em 0;
    font-size:var(--ss);
    font-weight:600;
    letter-spacing:-0.025em;
}
.check-list > li:before{
    content:'';
    position:absolute;
    display:block;
    width:var(--ss);
    height:var(--ss);
    background-image:url(../img/check.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    top:0.2rem;
    left:0;
}

.ani-opacity{
    opacity:1;
    animation-name:aniOpacity;
    animation-duration:2s;
    animation-timing-function:ease-in-out;
    animation-delay:0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes aniOpacity {
    0% { opacity:1; filter:saturate(1);}
   50% { opacity:1; filter:saturate(1.5);}
  100% { opacity:1; filter:saturate(1.5);}
}

[class*=shining-]{
	position:absolute;
	z-index:1;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in-out;
	transform-origin:center center;
    mix-blend-mode: screen;    
}
.shining-1{
	animation-name:scale_to_rotate1;
	animation-duration: 5s;
}
.shining-2{
	animation-name:scale_to_rotate2;
	animation-duration: 4.8s;
}

.shining-3{
	animation-name:scale_to_rotate3;
	animation-duration: 3.5s;
}

@keyframes scale_to_rotate1 {
      0%{opacity:0.1;transform:scale(0.2) rotate3d(0, 0, 1, 0deg)    }
     50%{opacity:1;  transform:scale(0.8) rotate3d(0, 0, 1, -360deg) }
    100%{opacity:0.1;transform:scale(0.2) rotate3d(0, 0, 1, 0deg)    }
}
@keyframes scale_to_rotate2 {
      0%{opacity:1;  transform:scale(0.8) rotate3d(0, 0, 1, 0deg);   }
     50%{opacity:0.1;transform:scale(0.2) rotate3d(0, 0, 1, 360deg); }
    100%{opacity:1;  transform:scale(0.8) rotate3d(0, 0, 1, 0deg);   }
}
@keyframes scale_to_rotate3 {
      0%{opacity:1;  transform:scale(0.8) rotate3d(0, 0, 1, 0deg);   }
     50%{opacity:0.1;transform:scale(0.2) rotate3d(0, 0, 1, -360deg);}
    100%{opacity:1;  transform:scale(0.8) rotate3d(0, 0, 1, 0deg);   }
}

/* 랜덤 반짝임 */
.spark {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
    width: var(--size, 64px);
    height: var(--size, 64px);
    left: var(--x, 50%);
    top:  var(--y, 50%);
    transform-origin: center center;
    transform:
    translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
    scale(var(--s0, 0.2))
    rotate(0deg);
    opacity: var(--op0, 0.1);
    animation: shineSpin var(--dur, 5s) var(--ease, ease-in-out) var(--delay, 0ms) infinite;
    mix-blend-mode: screen;
}

/* 회전·스케일 애니메이션 */
@keyframes shineSpin {
    0% {
        opacity: var(--op0, 0.1);
        transform:
          translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
          scale(var(--s0, 0.2)) rotate(0deg);
    }
    50% {
        opacity: var(--op50, 1);
        transform:
          translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
          scale(var(--s50, 0.8)) rotate(calc(var(--rot, 1) * 360deg));
    }
    100% {
        opacity: var(--op100, 0.1);
        transform:
          translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
          scale(var(--s0, 0.2)) rotate(0deg);
    }
}


.flex {display:flex;}
.direction-column {flex-direction:column;}
.direction-row {flex-direction:row;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center}

.in-box {font-size:1.2em;font-weight:700;display:inline-block;vertical-align:middle;padding:0.2em 0.5em;}
.bg-black   {color:#ffffff;background-color:#000000;}
.bg-darkred {color:#ffffff;background-color:#a12016;}
.bg-blue    {color:#ffffff;background-color:#022ccb;}


.why-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    padding:0 1.5rem;
}
.why-item{
    display:flex;
    flex-direction:column;
    gap:2em;
}
.why-item h3{
    display:flex;
    align-items:center;
    gap:2rem;
    justify-content:center;
    font-size:20px;
}
.why-item h3 > img{
    max-width:75px;
    width:20% !important;
}
.why-item h3 > span{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    justify-content:flex-start;
}
.why-item h3 > span > span  {font-size:1.15em; color:#1d49ca;line-height:1.1;}
.why-item h3 > span > strong{font-size:1.5em; color:#1c1c1c;line-height:1.1;}
.why-section h4{
    display:flex;
    align-items:center;
    gap:0.5em;
    font-size:1.25em;
    font-weight:700;
    margin-bottom:0.7em;
}
.why-section h4 svg{
    height:1.25em;
}
.why-section .why-section-item{
    padding:1rem;
    border-radius:0.75rem;
    text-align:center;
}
.why-section .why-section-item p{
    font-size:1.1em;
    font-weight:600;
}
.why-section.why-fail .why-section-item{background-color:#fff585;}
.why-section.why-good .why-section-item{background-color:#b3ff85;}

.why-section.why-fail h4, .why-section.why-fail h4 svg{fill:#8d8d8d;color:#8d8d8d;}
.why-section.why-good h4, .why-section.why-good h4 svg{fill:#2456ea;color:#2456ea;}

.why-item .why-section-rows:nth-of-type(odd)  .why-section-item {background-color:#fff585;}
.why-item .why-section-rows:nth-of-type(even) .why-section-item {background-color:#85e4ff;}

.why-section-rows .why-section-item{
    padding:1rem;
    border-radius:0.75rem;
    text-align:center;
}
.why-section-rows .why-section-item p{ font-size:1.15em; font-weight:700;}
.why-item .why-section-rows:nth-of-type(odd)   .why-section-item p:last-child{color:#4a37ff;}
.why-item .why-section-rows:nth-of-type(even)  .why-section-item p:last-child{color:#f32222;}

.why-item .why-section-adv{
    display:flex;
    flex-direction:column;
    gap:1em;
}
.why-item .why-section-adv .why-slogun{
    text-align:center;
}

.why-item .why-section-adv h3{
    font-size:1.5em;
    font-weight:700;
}
.why-section-adv .why-section-item{
    padding:1rem;
    border-radius:0.75rem;
    text-align:center;
}
.why-section-adv .why-section-item p{ font-size:1.15em; font-weight:700;}
.why-section-adv .why-section-item{background-color:#fff585;}
.why-item .why-section-adv .why-logo{
    text-align:center;
}

/* 커스텀 애니메이션 함수 처럼 구현 추가 */


/* 공통 기본값 */
.js-ani-root .js-ani-object {
  opacity: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;

  transition-property: opacity, transform;
  transition-duration: var(--fal-ani-duration, 0.7s);
  transition-delay: var(--fal-ani-delay, 0s);
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* inview 공통 목표 상태 */
.js-ani-root .js-ani-object.is-inview {
  opacity: 1;
  transform: translate3d(0,100px,0);
}

/* --- 각 효과의 초기 상태 정의 --- */

/* fade-up: 아래에서 위로 + 페이드인 */
.js-ani-root .js-ani-object.js-ani-fade-up {
  transform: translate3d(0, var(--fal-ani-offset, 0), 0);
}

/* fade-down: 위에서 아래로 + 페이드인 */
.js-ani-root .js-ani-object.js-ani-fade-down {
  transform: translate3d(0, calc(var(--fal-ani-offset, 0) * -1), 0);
}

/* fade-left: 오른쪽에서 왼쪽으로 + 페이드인 */
.js-ani-root .js-ani-object.js-ani-fade-left {
  transform: translate3d(var(--fal-ani-offset, 0), 0, 0);
}

/* fade-right: 왼쪽에서 오른쪽으로 + 페이드인 */
.js-ani-root .js-ani-object.js-ani-fade-right {
  transform: translate3d(calc(var(--fal-ani-offset, 0) * -1), 0, 0);
}

/* zoom-in: 스케일 업 + 페이드인 */
.js-ani-root .js-ani-object.js-ani-zoom-in {
  opacity: 0;
  transform: scale(var(--fal-ani-scale, .92));
}
.js-ani-root .js-ani-object.js-ani-zoom-in.is-inview {
  transform: scale(1);
}

/* 모션 민감 사용자 보호 */
@media (prefers-reduced-motion: reduce) {
  .js-ani-root .js-ani-object {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.ani-flip-y{
    opacity:1;
    animation-name:aniFlipY;
    animation-duration:5s;
    animation-timing-function:ease-in-out;
    animation-delay:0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}
@keyframes aniFlipY{
      0%{transform:rotateY(-360deg);}
     50%{transform:rotateY(0);}
    100%{transform:rotateY(0);}
}

.ani-flip-x{
    opacity:1;
    animation-name:aniFlipX;
    animation-duration:10s;
    animation-timing-function:ease-in-out;
    animation-delay:0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;  
}
@keyframes aniFlipX{
      0%{transform:rotateX(0);}
     10%{transform:rotateX(360deg);}
     30%{transform:rotateX(0);}
     40%{transform:rotateX(0);}
     50%{transform:rotateX(0);}
     60%{transform:rotateX(0);}
    100%{transform:rotateX(0);}
}

.ani-hue{
    opacity:1;
    animation-name:aniHue;
    animation-duration:2s;
    animation-timing-function:ease-in-out;
    animation-delay:0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running; 
    filter:saturate(1);
}
@keyframes aniHue{
      0%{opacity:0.5;filter:saturate(1);}
     25%{opacity:1;filter:saturate(1);}
     50%{opacity:1;filter:saturate(2);}
     75%{opacity:1;filter:saturate(1);}
    100%{opacity:1;filter:saturate(1);}
}

.story-flex{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4.6em;
}
.story-flex-item{
 
    
}
.story-flex-head{
    display:flex;
    position:relative;
    margin-bottom:2.25em;
}
.story-flex-head h3{
    font-size:1.75em;
    font-weight:600;
    text-align:center;
    padding-left:40px;
    padding-right:40px;
}
.story-flex-head h3 > strong{
    font-size:1.2em;
    font-weight:700;
    letter-spacing:-0.05em;
}
.story-quot{
    width:2em;
    position:absolute;
}
.story-flex-head div.story-quot:nth-of-type(1){left:0; top:0;}
.story-flex-head div.story-quot:nth-of-type(2){right:0; bottom:-0.65em;}
.story-flex-content{
    padding-top:1.5em;
}
.story-section-legend{
    position:absolute;
    font-size:1.75em;
    font-weight:700;
    color:#ffffff;
    padding:0.2em 0.85em;
    border-radius:0.7em;
    background-color:#3d4fd8;
    top:-0.8em;
    left:50%;
    white-space:nowrap;
    transform:translateX(-50%) !important;
}

.story-info-box{
    text-align:center;
    line-height:1.6;
    margin-bottom:1.5em;
    font-size:1.13em;
    padding-left:2em;
    padding-right:2em;
}
.story-info-box > strong{
    font-size:1.25em;
}

.wave-text span {
    display: inline-block;
    animation: waveAnim 1.2s ease-in-out infinite alternate;
}

.wave-text span:nth-child(even) { animation-delay: 0.1s; }
.wave-text span:nth-child(odd) { animation-delay: 0.2s; }

@keyframes waveAnim {
    0% { transform: translateY(0); }
   30% { transform: translateY(-8px); }
   40% { transform: translateY(0); }
   50% { transform: translateY(0); color:#ffff33}
   60% { transform: translateY(0); color:#ffff33}
   70% { transform: translateY(0); color:#ffff33}
   80% { transform: translateY(0); }
   90% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.cube-scene { 
    width: 100%;
    aspect-ratio:754/584;
    position: relative;
    perspective: min(3500px, 150cqw);
    container-type: inline-size;
    --cube-size: 100cqw;
    --half: calc(var(--cube-size) / 2);
}

.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    animation: spinY 6s cubic-bezier(.22,.61,.36,1) infinite;
}

.cube__face {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  color: #fff;
  border: 2px solid rgba(255,255,255,.25);
  border-radius:18px;
  backface-visibility: hidden;
}

/* 각 면을 정육면체의 6면 위치에 배치 */
.cube__front  { background:#cccccc; transform: translateZ(var(--half)); }
.cube__back   { background:#cccccc; transform: rotateY(180deg) translateZ(var(--half)); }
.cube__right  { background:#cccccc; transform: rotateY( 90deg) translateZ(var(--half)); }
.cube__left   { background:#cccccc; transform: rotateY(-90deg) translateZ(var(--half)); }
.cube__top    { background:#cccccc; transform: rotateX( 90deg) translateZ(var(--half)); }
.cube__bottom { background:#cccccc; transform: rotateX(-90deg) translateZ(var(--half)); }

@keyframes spinY {
  0% { transform: rotateY(360deg); }
  15% { transform: rotateY(0); }
  30% { transform: rotateY(0); }
  45% { transform: rotateY(0); }
  60% { transform: rotateY(0); }
  85% { transform: rotateY(0); }
  100% { transform: rotateY(0); }
}

.head-big-won{
    display:flex;
    align-items:center;
    justify-content:center;
}
.big-won{
    flex:0 0 auto;
    width:33.33%;
    aspect-ratio:1/1;
    border-radius:50%;
    background-color:rgba(255,255,255,0.9);
    position:relative;
    border:10px solid #f4b11c;
   
    background-repeat:no-repeat;
    background-position:center bottom;
}

.head-big-won .big-won:nth-of-type(1) {}
.head-big-won .big-won:nth-of-type(2) {margin-left:-2.5%;}
.head-big-won .big-won:nth-of-type(3) {margin-left:-2.5%;}

.won-cntbox{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:5%;
    font-size:20px;
    gap:15px;
}

.won-cntbox h3 {
    font-family:"Gmarket Sans";
    font-weight:700;
    font-size:2em;
}

.won-cntbox .won-catch h4{
    font-family:"Wanjudaedunsanche";
    font-weight:400;
    font-size:1em;
    text-align:center;
    color:#e50932;
}
.won-haccp-box{
    text-align:center;
}

.won-haccp-box h5{
    font-weight:500;
    margin-bottom:10px;
}

.won-haccp-wrap{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:center;
    gap:10px;
    justify-content: center;
}
.won-haccp-wrap > div{
    font-size:0.85em;
    color:#ffffff;
    background-color:#bf0225;
    border-radius:30px;
    height:58px;
    padding:0 15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    letter-spacing:-0.05em;
}

.won-head{
    color:#e50932;
    font-size:1.5em;
    text-align:center;
    font-weight:700;
    font-family:"Gmarket Sans";    
}

.won-head > h4 > span{
    color:#333333;
    font-size:0.75em;
    text-align:center;
    font-weight:500;
    font-family:"Pretendard";    
}

.won-arrow-graph-wrap{
    display:flex;
    align-items:center;
    gap:40px;
}
.won-arrow-g{
    position:relative;
    background-repeat:repeat-x;
    background-position:center center; 
    padding:20px 6px;
    text-align:center;
}
.won-arrow-g:after{
    content:'';
    background-repeat:no-repeat;
    width:40px;
    height:100%;
    position:absolute;
    display:inline-flex;
    top:0;
    right:-40px;
    background-position:left center;
}
.won-arrow-g:before{
    content:'';
    background-repeat:no-repeat;
    width:40px;
    height:100%;
    position:absolute;
    display:inline-flex;
    top:0;
    left:-40px;
    background-position:right center;
}

.won-arrow-g > div:first-child{
    font-family:'Gmarket Sans';
    font-weight:700;
    font-size:1.3em;
    letter-spacing:-0.05em;
}
.won-arrow-g > div:last-child{
    font-family:'Gmarket Sans';
    font-weight:700;
    font-size:1.3em;
    letter-spacing:-0.05em;    
    color:#000000;
}

.won-arrow-graph-wrap .won-arrow-g:nth-of-type(1)       {background-image:url(../img/arrow-g-r.svg);color:#577be3;}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(1):after {background-image:url(../img/arrow-g-f.svg);}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(1):before{background-image:url(../img/arrow-g-b.svg);}

.won-arrow-graph-wrap .won-arrow-g:nth-of-type(2)       {background-image:url(../img/arrow2-g-r.svg);color:#08a9c1;}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(2):after {background-image:url(../img/arrow2-g-f.svg);}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(2):before{background-image:url(../img/arrow2-g-b.svg);}

.won-arrow-graph-wrap .won-arrow-g:nth-of-type(3)       {background-image:url(../img/arrow3-g-r.svg);color:#9950dc;}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(3):after {background-image:url(../img/arrow3-g-f.svg);}
.won-arrow-graph-wrap .won-arrow-g:nth-of-type(3):before{background-image:url(../img/arrow3-g-b.svg);}

.won-check-list{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5em;
}

.won-check-list > li{
    text-align:center;
    display:inline-flex;
    aligin-items:center;    
}

.won-check-list > li > strong{
    position:relative;
    color:#0631e7;
    display:inline-flex;
    aligin-items:center;
    margin-right:0.5em;
}
.won-check-list > li > strong:before{
    content:'\e5ca';
    font-family:'Material Icons';
}
.won-check-list > li > strong:after{
    content:' : ';
    color:#242424;
    font-weight:normal;
    margin-left:0.5em;
}

.delivery-grid{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:20px;
    position:relative;
}

.delivery-grid > div:nth-of-type(1) {display:flex; align-items:center; position:relative;}
.delivery-grid > div:nth-of-type(2) {display:flex; align-items:center; position:relative;}
.delivery-grid > div:nth-of-type(3) {display:flex; align-items:center; position:relative;}

.delivery-grid > div > div{
    flex:1;
    text-align:center;
}

.delivery-grid .delivery-grp{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.delivery-grid:before{
    content:'';
    display:block;
    position:absolute;
    width:75%;
    height:85%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:2px dashed #b1b1b1;
    border-radius:40px;
}

.delivery-cation{
    background-color:#f4b11c;
    color:#000000;
    border-radius:16px;
    padding:0.25em 0.75em;
}

.frn-grid-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2em;
    font-size:1rem;
}

.frn-item{
    display:flex;
    flex-direction:column;
    font-size:1em;
}

.frn-item h3{
    text-align:center;
    font-family:'Gmarket Sans';
    font-weight:700;
    font-size:2em;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 1em 0.25em 1em;
    margin:0;
    line-height:1;
    border-radius:1em 1em 0 0;
    height:2.5em;
}

.frn-grid-box .frn-item:nth-of-type(1){}
.frn-grid-box .frn-item:nth-of-type(2){}

.frn-grid-box .frn-item:nth-of-type(1) h3{background-color:#282828;color:#ffffff;}
.frn-grid-box .frn-item:nth-of-type(2) h3{background-color:#21339e;color:#ffffff;}

.frn-tbl{
    background-color:#ffffff;
    border-radius:1em;
    padding:1em;
    margin-top:-1em;
}

.frn-tbl table{ border-collapse:collapse; width:100%; font-size:0.9rem;}
.frn-tbl th,.frn-tbl td{ padding:0.65em 1em;}
.frn-tbl thead{ background-color:#282828;color:#ffffff;}
.frn-tbl tfoot{ background-color:#282828;color:#ffffff;}

.frn-tbl tbody tr td:nth-of-type(2){
    color:#c60707;
    font-weight:700;
    
}

.frn-tbl tbody tr{
    transition:all 0.5s ease-in-out;
    animation-name:fontScale;
    animation-duration:10s;
    animation-timing-function:ease-in-out;
    animation-delay:0.25s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;  
    backface-visibility: visible;
}

.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(1) {animation-delay:0.25s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(2) {animation-delay:0.5s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(3) {animation-delay:0.75s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(4) {animation-delay:1s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(5) {animation-delay:1.25s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(6) {animation-delay:1.5s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(7) {animation-delay:1.75s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(8) {animation-delay:2s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(9) {animation-delay:2.25s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(10){animation-delay:2.5s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(11){animation-delay:2.75s;}
.frn-grid-box .frn-item:nth-of-type(1) .frn-tbl tbody tr:nth-of-type(12){animation-delay:3s;}

.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(1) {animation-delay:3.25s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(2) {animation-delay:3.5s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(3) {animation-delay:3.75s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(4) {animation-delay:4s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(5) {animation-delay:4.25s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(6) {animation-delay:4.5s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(7) {animation-delay:4.75s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(8) {animation-delay:5s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(9) {animation-delay:5.25s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(10){animation-delay:5.5s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(11){animation-delay:5.75s;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tbody tr:nth-of-type(12){animation-delay:6s;}



@keyframes fontScale{
      0%  {transform:rotateX(0deg);}
      5%  {transform:rotateX(75deg);}
     10%  {transform:rotateX(0deg);}
     20%  {transform:rotateX(0deg);}
     30%  {transform:rotateX(0deg);}
     40%  {transform:rotateX(0deg);}
     50%  {transform:rotateX(0deg);}
     60%  {transform:rotateX(0deg);}
     70%  {transform:rotateX(0deg);}
     80%  {transform:rotateX(0deg);}
     90%  {transform:rotateX(0deg);}
    100%  {transform:rotateX(0deg);}
}

.frn-tbl tbody tr:nth-of-type(even) th,.frn-tbl tbody tr:nth-of-type(even) td{
    background-color:#f3f3f3;
}

.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl thead{ background-color:#21339e;color:#ffffff;}
.frn-grid-box .frn-item:nth-of-type(2) .frn-tbl tfoot{ background-color:#21339e;color:#ffffff;}

.large{
    font-size:1.45em;
}
.small{
    font-size:0.85em;
}

.center{text-align:center;}
.left{text-align:left;}

.recipe-wrap{
    display:grid;
    gap:2.5em;
    grid-template-columns:repeat(4,1fr);
}

.recipe-item{
    flex:1;
    position:relative;
    background-color:#ffffff;
    border-radius:1em;
    padding:4.5em 0.9em 0.9em .9em;
    display:flex;
    flex-direction:column;
    gap:1em;
    align-items: center    
}

.recipe-item .recipe-step{
    position:absolute;
    width:7em;
    height:7em;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color:#ffb104;
    color:#ffffff;
    font-family:'Gmarket Sans';
    font-weight:700;
    top:-4em;
    left:calc(50% - 3.5em);
    padding:0.5em;
}
.recipe-item .recipe-step div:first-child{font-size:1em;}
.recipe-item .recipe-step div:last-child{font-size:2.5em;margin-top:15px;}

.recipe-cation{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    text-align:center;
    height:3.25em;
    font-size:1.1em;
    padding:0 1.5em;
}

.recipe-pic > img{
    aspect-ratio:9/5;
}


@keyframes recipeWobble {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
    70% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.recipe-wobble {
    transform-origin: top center;
    animation: recipeWobble 3s ease-in-out var(--wobble-delay, 0ms) infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .recipe-wobble { animation: none !important; }
}

.corepoint-wrap{
    display:flex;
    align-items:center;
}

.corepoint-won-outer{
    background-color:#ffffff;
    border-radius:50%;
    padding:16px;
    border:2px dashed #f2b01e;
}

.corepoint-won-inner{
    max-width:440px;
    aspect-ratio:1/1;
    background-color:#e4e4e4;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:16px;
    position:relative;
    z-index:2;
}

.corepoint-won-img {
    width:100%;
    aspect-ratio:1/1;
    background-color:#ffffff;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:80px;
}

.corepoint-won-img > img{
    transform-origin: center center;
    animation: symbolRotate 3s ease-in-out 0ms infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .corepoint-won-img { animation: none !important; }
}

@keyframes symbolRotate {
    0%   { transform: scale(1);}
    25%  { transform: scale(1.1);}
    50%  { transform: scale(1);}
    70%  { transform: scale(1);}
    100% { transform: scale(1);}
}

.corepoint-won-img img{
    max-width:253px;
    aspect-ratio:253/260;
}

.corepoint-content-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1;
    padding-left:130px;
    margin-left:85px;
    z-index:2;
}

.corepoint-item{
    background-color:rgba(255,255,255,0.9);
    border-radius:30px;    
    position:relative;
    padding:20px 30px;
    border:1px solid #e3e3e3;
    padding-left:130px;
    z-index:1;
}

.corepoint-text {
    display:flex;
    flex-direction:column;
    gap:20px;    
    padding:20px 0;
}


ol.number-list {
    list-style-type:decimal;
    list-style-position: inside;
    padding-left: 0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

ol.number-list li {
    list-style-type:decimal;
    text-indent: -10px;
    margin-left: 20px;
    padding-left:10px;
}

.corepoint-title{
    position:absolute;
    width:170px;
    aspect-ratio:1/1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    top:calc(50% - (170px / 2));
    left:calc( -1 * (170px / 2));
    color:#ffffff;
    padding:0px;
}
.corepoint-title > strong{
    flex:1;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    padding:16px;   
    font-size:1.75em;
    text-align:center;
    position:relative;
    z-index:1;
}

.corepoint-content-wrap .corepoint-item:nth-of-type(1) .corepoint-title{ border:8px solid #f2b01e55; background-color:#f2b01e55;}
.corepoint-content-wrap .corepoint-item:nth-of-type(2) .corepoint-title{ border:8px solid #cd232855; background-color:#cd232855;}
.corepoint-content-wrap .corepoint-item:nth-of-type(3) .corepoint-title{ border:8px solid #744f2b55; background-color:#744f2b55;}
.corepoint-content-wrap .corepoint-item:nth-of-type(1) .corepoint-title > strong{background-color:#f2b01e;}
.corepoint-content-wrap .corepoint-item:nth-of-type(2) .corepoint-title > strong{background-color:#cd2328;}
.corepoint-content-wrap .corepoint-item:nth-of-type(3) .corepoint-title > strong{background-color:#744f2b;}

.corepoint-text h3{
    font-size:1.35em;
    font-weight:700;
}

.corepoint-content-wrap .corepoint-item:nth-of-type(1) .corepoint-text h3{color:#f2b01e;}
.corepoint-content-wrap .corepoint-item:nth-of-type(2) .corepoint-text h3{color:#cd2328;}
.corepoint-content-wrap .corepoint-item:nth-of-type(3) .corepoint-text h3{color:#744f2b;}

.corepoint-connect-start{
  position: absolute;
  width: 1px; height: 1px;
  top: calc(50% - 0.5px);
  left: calc(50% - 0.5px);
  z-index: 1;
}

.corepoint-won-end{
    position:absolute;
    z-index:1;
    width:24px;
    height:24px;
    border-radius:50%;
}

.corepoint-won-end.conn1{background-color:#f2b01e; top:calc(25% - 12px); right:18px;}
.corepoint-won-end.conn2{background-color:#cd2328; top:calc(50% - 12px); right:-12px;}
.corepoint-won-end.conn3{background-color:#744f2b; top:calc(75% - 12px); right:18px;}

.corepoint-section{
    position:relative;
    overflow: visible;
}

.corepoint-section .corepoint-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:0; transition:opacity .25s ease;
}
.corepoint-section .corepoint-svg[data-show]{ opacity:1; }
.corepoint-section .corepoint-svg path{ fill:none; }


.corepoint-title{
    transform-origin: center center;
    animation: wonScale 3s ease-in-out 0ms infinite alternate;
    will-change: transform;
}

.corepoint-title > strong{
    transform-origin: center center;
    animation: wonScale1 3s ease-in-out 0ms infinite alternate;
    will-change: transform border-width;
}

@media (prefers-reduced-motion: reduce) {
    .corepoint-title,.corepoint-title > strong { animation: none !important; }
}

@keyframes wonScale {
    0%   {transform: scale(1);}
    25%  {transform: scale(1.1);}
    50%  {transform: scale(1);}
    70%  {transform: scale(1);}
    100% {transform: scale(1);}
}

@keyframes wonScale1 {
    0%   { transform: scale(1);}
    25%  { transform: scale(0.9);}
    50%  { transform: scale(1);}
    70%  { transform: scale(1);}
    100% { transform: scale(1);}
}

.propose-wrap{
    margin-top:60px;
}

.propose-caption{
    text-align:center;
    position:relative;
}

.propose-caption h3{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    color:#ffffff;
    font-family:'Gmarket Sans';
    font-size:1.9em;
    font-weight:400;
    text-align:center;
    align-items: center;    
}

.propose-caption h3 > strong{
    font-size:1.45em;
    font-weight:400;
    display:block;
    text-align:center;
    color:#ff1133;
}

.propose-outer{
    position:relative;
    background-color:#ffffff;
    border-radius:30px;
    padding:4em 60px 60px 60px;
}

.propose-title{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-4em;
}

.propose-title-inner{
    position:relative;
    display:inline-flex;
}
.propose-title-inner > h4{
    position:absolute;
    display:block;
    text-align:center;
    left:50%;
    top:15%;
    transform:translateX(-50%);
    font-size:1.75em;
    text-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
.propose-title-inner > h4 > span{
    color:#cf112c;
}


.propose-content{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.propose-content > div{
    display:flex;
    flex-direction:column;
    gap:15px;
}
.propose-content > div > p{
    position:relative;
    padding-left:1.2em;
    font-size:1.4em;
}

.propose-content > div > p:before{
    content:'\e838';
    font-family:'Material Icons';
    position:absolute;
    left:0;
    top:0.1em;
    color:#ff1133;
    transform-origin: center center;
    animation: sldeColor 2s ease-in-out 0ms infinite alternate;
    will-change: color;
}

.propose-star{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-3em;
}

.propose-star > img{
    transform-origin: center center;
    animation: lightShow 2s ease-in-out 0ms infinite alternate;
    will-change: filter;
}

@keyframes lightShow {
    0%   { filter:blur(0) brightness(1);}
    25%  { filter:blur(2px) brightness(1.5);}
    50%  { filter:blur(0) brightness(1);}
    75%  { filter:blur(0) brightness(1);}
    100% { filter:blur(0) brightness(1);}
}

@keyframes sldeColor {
    0%   { color:#ff1133;;}
    50%  { color:#dbb43d;;}
    100% { color:#ff1133;;}
}

.rotate-text{
    transform:rotateZ(-30deg) translateY(-20px);
    transform-origin: center center;
    animation: zigRotate 2s ease-in-out 0ms infinite alternate;
    will-change: transform;
}
@keyframes zigRotate{
      0% { transform:  translateY(-20px) rotate(-30deg); }
     25% { transform:  translateY(-20px) rotate(30deg); }
     50% { transform:  translateY(-20px) rotate(-30deg); }
     70% { transform:  translateY(-20px) rotate(-30deg); }
    100% { transform:  translateY(-20px) rotate(-30deg); }
}


.standard-title{
    max-width:var(--max-width);
    margin:0 auto;
}
.standard-title h3{
    font-size:2em;
    font-family:'Gmarket Sans';
    font-weight:400;
}
.standard-title strong,.standard-title span{
    font-weight:700;
}

.standard-wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2.2em;
}

.standard-wrap .standard-item{
    overflow:hidden;
    display:inline-flex;
    vertical-align:middle;
    align-items:center;
}

.standard-wrap .standard-item > img{
    transform-origin: center center;
    animation: imgScale 3s ease-in-out var(--delay) infinite alternate;
    will-change: transform border-width;
    vertical-align:middle;
}

@keyframes imgScale {
    0%   { transform: scale(1);}
    25%  { transform: scale(0.9);}
    50%  { transform: scale(1);}
    70%  { transform: scale(1);}
    100% { transform: scale(1);}
}

.standard-title h3{
    font-family:'Gmarket Sans';
    color:#000000;
    font-size:2em;
    font-weight:400;
    text-align:center;
}
.standard-title h3 > span{
    font-weight:400;
}

.standard-content{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4.8em;
}

.standard-bluebox{
    background-color:#02398a;
    border-radius:1.2em;
    padding:3em 2.5em;
    color:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:35px;
}

.standard-bluebox p{
    font-size:2em;
    font-weight:500;
    position:relative;
    padding-left:1.2em;
}
.standard-bluebox p:before{
    content:'\e5ca';
    font-family:'Material Icons Outlined','Material Icons';
    color:#fff837;
    position:absolute;
    left:0;
    top:0;
    font-weight:700;
}
.standard-bluebox p strong{
    font-weight:700;
    color:#fff837;
}

.standard-customer{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

.dakr-box{
    background-color:#000000;
    color:#ffffff;
    padding:0.2em 1em 0 1em;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.dakr-box > span{
    color:#ffffff;
}
.dakr-box > span > strong{
    color:#fdbd31;
    font-weight:700;
}
.customer-txt{
    font-size:2em;
    font-weight:700;
    letter-spacing:-0.05em;
    position:relative;
    display:flex;
    align-items:center;
    gap:0.3em;
}
.customer-txt > img{
    filter:brightness(0);
}

.customer-num{
    font-weight:900;
    font-size:6em;
    letter-spacing:-0.05em;
    color:#cf3333;
    text-shadow:5px 5px 0 #c5c5c580;
}
.customer-icons{
    display:flex;
    align-items:center;
    gap:80px;
    justify-content:center;
}

.customer-icons > div > a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.4em;
    color:#333333;
    font-size:1.5em;
    font-weight:500;
}


.num-wave-text span {
    display: inline-block;
    animation: numWaveAnim 1.2s ease-in-out infinite alternate;
}

.num-wave-text span:nth-child(even) { animation-delay: 0.1s; }
.num-wave-text span:nth-child(odd) { animation-delay: 0.2s; }

@keyframes numWaveAnim {
    0% { transform: translateY(0); }
   30% { transform: translateY(-8px); }
   40% { transform: translateY(0); }
   50% { transform: translateY(0); color:#ffcc00}
   60% { transform: translateY(0); color:#ffcc00}
   70% { transform: translateY(0); color:#ffcc00}
   80% { transform: translateY(0); }
   90% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.ani-motion-fb{
    animation: aniMotionFB 5s ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes aniMotionFB {
    0% { transform: translateX(0);}
   30% { transform: translateX(0);}
   40% { transform: translateX(0);}
   50% { transform: translateX(10px);}
   60% { transform: translateX(0);}
   70% { transform: translateX(0);}
   80% { transform: translateX(0);}
   90% { transform: translateX(0);}
  100% { transform: translateX(0);}
}

.ani-flip-updown{
    animation: aniflipUpdown var(--dur,5s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes aniflipUpdown {
    0% { transform: rotateX(0deg);}
   30% { transform: rotateX(0deg);}
   40% { transform: rotateX(0deg);}
   50% { transform: rotateX(90deg);}
   60% { transform: rotateX(0deg);}
   70% { transform: rotateX(0deg);}
   80% { transform: rotateX(0deg);}
   90% { transform: rotateX(0deg);}
  100% { transform: rotateX(0deg);}
}



@media(max-width:1600px){
    html,body{
        font-size:15px;
    }
    .an-img-box{
        aspect-ratio:initial;
    }
    .won-cntbox{
        font-size:16px;
    }
    
    .head-big-won {
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
    }
    .big-won {
        flex: 0 0 auto;
        width: 80%;
        max-width:800px;
        aspect-ratio: initial;
        border-radius: 3em;
        background-color: rgba(255, 255, 255, 0.9);
        position: relative;
        border: 10px solid #f4b11c;
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    .head-big-won .big-won:nth-of-type(1) {margin-left:0;margin-top:0px;}
    .head-big-won .big-won:nth-of-type(2) {margin-left:0;margin-top:20px;}
    .head-big-won .big-won:nth-of-type(3) {margin-left:0;margin-top:20px;}
    
    .prize-box.prize-bottom{
        padding:2em;
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        flex-wrap:wrap;
        justify-items: center;
    }
    .prize-box.prize-bottom > div{
        flex:0 0 auto;
        width:100%;
    }
    
    .propose-section{
        aspect-ratio:16/10;
    }
}

@media(max-width:1380px){
    .prize-box.prize-bottom {
        padding: 2em;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        flex-wrap: wrap;
        justify-items: center;
    }
}

@media(max-width:1280px){
    .story-flex {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 4.6em;
    }
    .cube-scene {
        margin-top:2.25em;
        width: 80%;
        max-width:500px;
        --cube-size: 100cqw;
        --half: calc(var(--cube-size) / 2);
    }
    .story-flex-head {
        display: flex;
        align-items:center;
        flex-direction:column;
        justify-content:center !important;
        position: relative;
        margin-top: 2.25em;
        margin-bottom: 2.25em;
    }
    .story-quot {
        width: 2em;
        position:relative;
    }
    .story-flex .story-flex-item:nth-of-type(1){
        position:relative;
    }
    
    .n-section-box h2{
        margin-bottom:1em;
    }
    
    .foods-knowhow{
        padding-top:5em;
    }
    .recipe-wrap {
        margin-top:3em;
        display: grid;
        gap: 2.5em;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
    
    .main-foods > div.n-section-object{
        width:40% !important;
    }
    
    .main-visualbox{
        height:auto !important;
        aspect-ratio:16/12;
    }
    .main-visual-crwon{
        height:30% !important;
        top:15% !important;
    }
    .main-visual-textbox{
        height:50% !important;
        white-space:nowrap;
        transform:translate(-50%,-75%) !important;
    }
 
     .corepoint-won-inner {
        max-width: 300px;
        max-height: 300px;
        aspect-ratio: 1 / 1;
        background-color: #e4e4e4;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px;
        position: relative;
        z-index: 2;
    }
    .corepoint-won-img {
        width: 100%;
        height:100%;
        aspect-ratio: 1 / 1;
        background-color: #ffffff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px;
    }
    .corepoint-won-img > img{
        width:100%;
        height:100%;
    }
    .propose-wrap {
        padding-top:80px;
    }
    .propose-section{
        aspect-ratio:16/10;
    }
    
    .propose-title-inner h4 > img{
        width:100% !important;
        max-width:337px !important;
    }
 
}

@media (max-width: 1024px), (max-width: 980px) {
    .corepoint-wrap{
        flex-direction:column;
    }
    .corepoint-content-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
        padding-left: 130px;
        margin-left:0;
        z-index: 2;
        max-width:90%;
        width:100%;
    }
    .corepoint-won-end.conn1{background-color:#f2b01e; top:calc(80% - 12px); left:20px;right:initial;}
    .corepoint-won-end.conn2{background-color:#cd2328; top:calc(98% - 12px); left:calc(50% - 12px);right:initial;}
    .corepoint-won-end.conn3{background-color:#744f2b; top:calc(80% - 12px); right:20px;}
    .propose-title {
        position: absolute;
        width:100%;
        left: 50%;
        transform: translateX(-50%);
        top: -4em;
    }
    .propose-section{
        aspect-ratio:initial;
    }
    .standard-wrap {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 2.2em;
    }
    .frn-grid-box {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2em;
        font-size: 1rem;
    }
    
    .head_office_section{
        min-height:initial !important;
    }
    .story_section{
        min-height:initial !important;
    }
    
    .why-grid {
        width:90%;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
        padding: 0 1.5rem;
    }
    
    .why-item, .why-item .why-section-adv{
        flex:1;
        width:100%;
    }
    
    .n-section-content:has(.oper_section){
        width:100%;
        padding:2em;
    }
    
    .oper_section.n-section-content{
        margin-top:3em;
    }
    .oper_section{
        display:grid;
        grid-template-columns: repeat(2,1fr);
        gap:1.5em !important;
    }

    .oper_section.n-section-content > div:nth-of-type(3) {
        grid-column:span 2;
    }
    
    .oper_section.n-section-content > div > img{
        height:427px;
        width:100% !important;
    }
    
    .prize-box.prize-bottom {
        grid-template-columns: repeat(4,1fr);
    }
}

.brand-section{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    --brand-won-size:442px;
}

#brand_info_grid{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    align-items: flex-start;
    justify-content:center;
    padding-bottom:3rem;
}
#brand_info_grid > div{
    
}
#brand_info_grid > div:nth-of-type(1) > img{margin-top:0;}
#brand_info_grid > div:nth-of-type(2) > img{margin-top:20%;}
#brand_info_grid > div:nth-of-type(3) > img{margin-top:20%;}
#brand_info_grid > div:nth-of-type(4) > img{margin-top:0;}


.brand-trophy > img{
    position:absolute;
    width:auto !important;
    height:100% !important:
}

.youtube-hart img{
  display:block; width:100%; height:auto;
  --dur:1.8s;
  --soft:50%;
  /* 아래가 진하고 위로 갈수록 투명해지는 마스크 */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(30%), transparent calc(30% + var(--soft)));
          mask-image: linear-gradient(to top, #000 0%, #000 calc(30%), transparent calc(30% + var(--soft)));
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 30% 100%;
          mask-position: 30% 100%;
  animation: fal-reveal-up var(--dur) steps(15, end) infinite alternate;
}

@keyframes fal-reveal-up{
    0%{ -webkit-mask-position: 0%  20%; mask-position: 0%  20%; }
   50%{ -webkit-mask-position: 0%  50%; mask-position: 0%  50%; }
   75%{ -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
  100%{ -webkit-mask-position:10% 100%; mask-position:10% 100%; }
}

/* 접근성 배려: 모션 최소화 환경 */
@media (prefers-reduced-motion:reduce){
  .youtube-hart img{ animation:none; -webkit-mask-position:0 0; mask-position:0 0; }
}

img[class*='youtube-obj']{
    animation: aniYoutubeObj 5s ease-in-out var(--delay,0s) infinite alternate;
}
img[class*='youtube-obj1']{
    animation-name: aniYoutubeObj;
    animation-duration:5s;
}
img[class*='youtube-obj2']{
    animation-name: aniYoutubeObj2;
    animation-duration:8s;
}
img[class*='youtube-obj3']{
    animation-name: aniYoutubeObj3;
    animation-duration:5s;
}
@keyframes aniYoutubeObj {
    0% { transform: scale(1);}
   30% { transform: scale(1);}
   40% { transform: scale(1);}
   50% { transform: scale(1);}
   60% { transform: scale(0.75);}
   70% { transform: scale(1);}
   80% { transform: scale(1);}
   90% { transform: scale(1);}
  100% { transform: scale(1);}
}
@keyframes aniYoutubeObj2 {
    0% { transform: rotateZ(0deg);}
   30% { opacity:0.2;transform: rotateZ(0deg);}
   40% { transform: rotateZ(8deg);}
   50% { opacity:1;transform: rotateZ(0deg);}
   60% { transform: rotateZ(0deg);}
   70% { transform: rotateZ(-8deg);}
   80% { opacity:0.3;transform: rotateZ(0deg);}
   90% { transform: rotateZ(0deg);}
  100% { opacity:1;transform: rotateZ(0deg);}
}
@keyframes aniYoutubeObj3 {
    0% { transform: rotateZ(0deg);}
   30% { transform: rotateZ(0deg);}
   40% { transform: rotateZ(8deg);}
   50% { transform: rotateZ(0deg) scale(0.85);}
   60% { transform: rotateZ(0deg);}
   70% { transform: rotateZ(-8deg);}
   80% { transform: rotateZ(0deg);}
   90% { transform: rotateZ(0deg);}
  100% { transform: rotateZ(0deg);}
}

.brand-ani-updown{
    animation: brandaniUpdown 8s ease-in-out var(--delay,0s) infinite alternate;
}

@keyframes brandaniUpdown {
    0% { transform: translateY(0);}
   30% { transform: translateY(8%);}
   40% { transform: translateY(0);}
   50% { transform: translateY(0) scale(0.85);}
   60% { transform: translateY(0);}
   70% { transform: translateY(0);}
   80% { transform: translateY(-8%);}
   90% { transform: translateY(0);}
  100% { transform: translateY(0);}
}

.n-sec2-bubble div img{
    animation: brandaniUpdown 8s ease-in-out var(--delay,0s) infinite alternate;
}

.wheel{
    animation: wheelRotate 2s linear 0s infinite;
}
@keyframes wheelRotate {
    from { transform: rotateZ(0deg);}
    to   { transform: rotateZ(360deg);}
}


/* 모바일 기기를 사용하지 않음 */
@media(max-width:1024px){
    html,body{
        font-size:20px;
    }
    header,.scroll-wrapper{
        height:4rem;
        background-image: linear-gradient(180deg, rgba(34, 34, 34, 0.9) 80%, rgba(34, 34, 34, 0) 100%);        
    }
    header nav{
        width:100vw;
    }
    header nav ul li a{
        font-size:2rem;
    }

    .brand-head {
        padding-top:3rem !important;
    }
    .standard-content {
        margin-top:3em;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2em;
    }
    
    .n-section-box .an-img-box h2 {
        padding-left:2em;
        padding-right:2em;
        /* line-height:2.4em; */
        font-size:2.25em !important;
    }
    
    .main-visualbox{
        height:auto !important;
        aspect-ratio:16/15 !important;
    }
    
    @keyframes moveUp {
        from{
            transform:translateY(0) translateX(-50%); 
            opacity:0; 
        } 
        to{
            transform:translateY(-25px) translateX(-50%); 
            opacity:1;
        }
    }
    
    .mobile-resample .text-type-ani {
        white-space: wrap;
        overflow: hidden;
        display: block;
        text-align:center;
        border-right: 0px solid #ccc;
        animation: _blink_ 5s steps(35, end) infinite alternate;
        background-clip: text;
    }
    
    .n-fly-box a {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .n-fly-box a span {
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: transparent;
        transition: all 0.3s;
    }
    
    .footer#counsel_form .n-form-show-btn {
        height:80px;
        font-size: 1.8rem;
        top: -80px;
        padding: 0 3rem;
    }
    .n-form-outer h3 {
        font-weight: 400;
        font-size: 2.25rem;
        font-family: 'Black Han Sans';
    }
    .n-form .n-form-input{
        font-size:1.8rem;
    }
    .n-form-radio + label {
        position: relative;
        font-size: 1.25rem;
        padding-left: 1.5rem;
        color: #ffffff;
        font-weight: 500;
        transition: height 0.3s ease;
    }
    .n-form-inner a {
        font-size: 1.25rem;
        color: #ffffff;
    }
    .modal-outer .modal-header {
        height: 90px;
        font-size:2rem;
    }
    .modal-outer .privacy-content {
        padding: 1rem;
        margin-top: 90px;
    }
    .modal-outer .privacy-content p{
        font-size:1.6rem;
    }
    .modal-outer .modal-inner {
        width: 95vw;
        height: 80vh;
    }
    .revenue-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 3em;
    }
}

@media(max-width:720px){
    html,body{
        font-size:14px;
    }
    body{
        zoom:0.75;
    }
    header nav{
        width:100%;
    }
    .prize-box.prize-bottom {
        grid-template-columns: repeat(1, 1fr);
    }
    .n-section-box .an-img-box h2 {
        padding-left: 2em;
        padding-right: 2em;
        font-size: 1.8em !important;
    }
    .n-sec2-oper-info{
        font-size:1.5em;
    }
    .n-sec2-oper-info > div{
        font-size:1em;
    }
    .prize-box.prize-top{
        flex-direction:column;
    }
    .prize-box > div {
        background-color: #ffffff;
        border: 3px solid #9d1f15;
        border-radius: 20px;
        padding: 30px;
        position: relative;
        text-align: center;
        max-width: 250px;
        width: 100%;
        aspect-ratio: 230 / 200;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content:space-around;
        box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.35);
        white-space:wrap;
    }
    .item-go-top{ order:-1; }
    .recipe-wrap {
        margin-top: 1em;
        display: grid;
        gap: 4.5em 2.5em;
        grid-template-columns: repeat(2, 1fr);
    }
    .frn-tbl th,.frn-tbl td{font-size:1.3em;}
    .propose-content {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    .oper_section {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5em !important;
    }
    .oper_section.n-section-content > div:nth-of-type(3) {
        grid-column:span 1;
    }
}

@media (max-aspect-ratio: 1280/650) {
    /* 가로/세로 비율이 16대9보다 세로 값이 작거나 같을 때 - aos가 제대로 안됨  */
    /* .main-visualbox {height:100vh !important; aspect-ratio:initial !important;} */
    .n-sec2-oper-info {
        margin-bottom:1em;
    }
    .n-sec2-oper-info div{
        font-size:1.35rem;
    }
    .n-section-box h2{
        margin-bottom:0.5em;
    }
    .standard-content {
        margin-top:2em;
    }
}


.fal-modal{
    position:fixed;
    inset:0;
    display:none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1001;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction:column;
}
.fal-modal.is-open{display:flex}
.fal-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.fal-modal__dialog{position:relative;width:80%; max-width:640px;margin:10vh auto;background:#fff;border-radius:14px;overflow:hidden}
.fal-modal__header{
    display:flex;
    justify-content:space-between;
    aligin-items:center;
}
.fal-modal__header,.fal-modal__footer{padding:14px 16px;background:#f7f7f8}
.fal-modal__footer{
    text-align:right;
}
.fal-modal__body{padding:18px 16px;line-height:1.6}
.fal-modal__close{background:none;border:0;font-size:1.5em;line-height:1;cursor:pointer}
.fal-modal__ok{padding:.6em 1.2em;border:0;border-radius:6px;background:#111;color:#fff;cursor:pointer}
.fal-modal__ok:focus,.fal-modal__close:focus{outline:2px solid #3b82f6;outline-offset:2px}

.fal-modal .list-ul{
    display:flex;
    flex-direction:column;
    margin-top:10px;
    line-height:1.6;
    margin-left:2em;
    gap:4px;
}

.fal-modal .list-ul > li {
    display:flex;
    font-weight:400;
    color:#333333;
}

.fal-modal .list-ul > li > strong{
    font-weight:500;
    flex:0 0 auto;
    width:30%;
    position:relative;
    display:flex;
    align-items:center;
    gap:5px;
}
.fal-modal .list-ul > li > strong:before{
    content:'';
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background-color:var(--color-red);
}

.fal-modal__body p{
    text-align: center;
    font-weight: 700;
    color: blue;
    font-size: 1.25em;
}