@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* body {overflow: hidden} */
/* body.overflow-auto {overflow: auto;} */
html,body {overflow-x: hidden ;}
body {margin: 0; padding: 0; background-color: white;  font-family: 'Pretendard-Regular'; box-sizing: border-box;}
ul, li {list-style-type: none; }
.container {margin: 5% 5%; padding: 0;}


/*loading-screen*/
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease-out;
}
.loading-text p {
    color: rgb(168, 168, 168);
    font-size: 2.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    animation: typing 4s steps(40) forwards;
}
.loading-text h1 {
    font-size: 4rem;
    font-weight: 900;
    color: black;
    overflow: hidden;
    white-space: nowrap;
    border-right: 0.1em solid black;
    padding-right: 0.1em;
    text-align: left;
    animation: typing 4s steps(40) forwards, blink 0.75s step-end infinite;
}

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

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

.main-content {
    display: none;
    opacity: 1;

    transition: opacity 2s ease;
}

.show-main-content {
    display: block;
    opacity: 1;

}

.hide-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* header */
.logo {z-index: 999;}
.logo img {width: 58px;height: 58px;margin: 4px 30px;  }
.head {display: flex;justify-content: space-between;align-items: center;padding: 12px 30px;
     z-index: 1000; position: fixed; width: 100%; left: 0; top: 0; height: 94px;
}
.menu {flex-grow: 1;text-align: center; position: fixed; right: 50px;}
.navbar {list-style: none;margin: 0; padding: 0;display: flex;justify-content: flex-end;gap: 15px;align-items: center;}
.menu-item { position: relative;}
.menu-item a {text-decoration: none;color: white; font-size: 20px; font-weight: 900; padding: 10px 15px; display: inline-block;}
.menu-item a:hover {color: red !important; border-radius: 5px;}
.sub-menu {list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0px; 
    color: black; border-radius: 5px; display: none; }
.menu-item:hover .sub-menu { display: block;}
.sub-menu .menu-item a { font-size: 16px; padding: 10px 20px; color: white; white-space: nowrap; text-align: left;}
.sub-menu .menu-item a:hover { color: red !important; }

.hide-header {
    display: none;
    opacity: 1;
}
.show-header {
    display: flex;justify-content: space-between;align-items: center;padding: 12px 30px;
     z-index: 1000; position: fixed; width: 100%; left: 0; top: 0; height: 94px;

}


.nav-toggle {
    display: none;
  }
  
  .nav-toggle-label {
    display: none;
  }
  
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    display: block;
    background: white;
    height: 3px;
    width: 25px;
    position: relative;
    transition: all 0.3s ease-in-out;
  }
  
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: "";
    position: absolute;
  }
  
  .nav-toggle-label span::before {
    bottom: 8px;
  }
  
  .nav-toggle-label span::after {
    top: 8px;
  }
  
  .nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }
  
  .nav-toggle:checked + .nav-toggle-label span::before {
    transform: rotate(-45deg);
    background: black ;
    bottom: 0;
  }
  
  .nav-toggle:checked + .nav-toggle-label span::after {
    transform: rotate(45deg);
    background: black ;
    top: 0;
  }

  .dropdown{display: none;}
  


/* main-section */
.main-section, .video-container {
    width: 100vw;      
    height: 100vh;   
    overflow: hidden;  
    position: relative; 
}

.video-container video {
    position: absolute; 
    top: 0;  
    left: 0;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/*section - two*/ 
.section-two {width: 100%; height: 80vh; position: relative;}
.section-two section > div {border-radius: 40px;}
.section-two-title span {color: black;}
.section-two-title {color: red; font-size: 57px; margin-bottom: 40px; }
.global-one, .global-two, .global-three {
    margin: 0 ;
    color: white;
    font-weight: 300;
    font-size: 100%;
    width: 100%;
    height: 65.4vh;
}
.global-one {background: url(../image/img2.png); position: relative; z-index: 1; }
.global-two{background-image: url(../image/img3.png) ; position: relative; z-index: 2; }
.global-three{background-image: url(../image/img.png) ; position: relative; z-index: 3;}
.section-two h3 { position: absolute; z-index: 50;font-size: 45px; font-weight: 900; padding: 80px 100px; margin-bottom: 10px;}
.section-two p { position: absolute;
    top: 230px; z-index: 50;font-weight: 900; line-height: 1.6; padding: 0px 100px;; font-size: 18px;}


/* section - three */
.section-three{ 
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    line-height: 120px;
    position: relative;
    text-align: center; 
}
.section-three-top {font-weight: 900; 
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 50px
}
.section-three-top p {font-size: 4vw; font-weight: 900; line-height: 100px;}
.inner {position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%); width: 100%; }
.section-three span {color: red;}
.section-three-bottom {font-size: 1.5rem; color: gray; line-height: 40px;}


/*slider*/
.slider{border: 5px solid rgb(158, 157, 157); padding: 3%; border-right: white; border-left: white; overflow: hidden; position: relative;}
.slider span {font-weight: 900; font-size: 8vw; white-space: nowrap; margin-right: 50px;}
.slider span:nth-child(n+1) {text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black; color: red;}
.slider span:nth-child(2n + 1) {text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black; color: yellow;}
.slider div {
   display: flex;
   width: fit-content;
   animation: slider 10s linear infinite;
}
@keyframes slider {
    0% {
        transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
}

/*section-four*/
.section-four {width: 75%; height: 100vh; position: relative; overflow: hidden;margin: 0 auto;}
.four-inner{background-image: url(../image/fresh.jpg) ; width: 100%; height: 75%;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 10%;
    bottom: 10%;
    color: white;
    border-radius: 40px;
    overflow: hidden;
}
.four-inner h2 {font-size: 80px;line-height: 140px;}
.four-inner p {text-align: center; font-size: 1.5rem; font-weight: 400;}
.four-inner-i { position: relative; top: 50%;left: 50%; transform: translate(-50%, -50%);text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.four-inner-i div {width: 200px;height: 50px; border-radius: 30px ;background: red; line-height: 50px; margin-top: 30px; }
.four-inner a {display: inline-block; width: 100%; height: 100% ; text-decoration: none; color: white;text-align: center;}
.four-inner span {font-weight: bolder;}



/*section-five*/
.section-five { height: 80vh; padding: 5% 0; overflow: visible;
 }
.news-head {font-size: 40px; position: sticky;}
.news-head h2 img {width: 7vh; height: 7vh;}
.news-content {
    width: 50vh; height: 40vh; border-radius: 20px; 
    margin-right: 20px;
}
.news-wrapper {
    position: sticky;
    top: 0px;
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: hidden;
}
.horizontal {display: flex; height: 50vh;}
.cont1{background-color: #FFDECC; }
.cont2{background-color: #E6E9BF;}
.cont3{background-color: #F8E6C3;}
.cont4{background-color: #FFDECC;}
.cont5{background-color: #E6E9BF;}
.cont6{background-color: #F8E6C3;}
.news-title{margin-top: 20px;}
.news-title a {font-size: 20px; font-weight: bold; margin: 30px; text-decoration: none; color: black;}
.news-content img {width: 50vh; height: 30vh; margin-top: 25px; border-radius: 20px;}
/* .news-content:hover {transform: scale(1.1)} */


/*footer*/
.footer {width: 100%; height: auto; position: relative; background-color: #f7e4e4; border-radius: 40px;
    display: flex;
    justify-content: space-between;
    padding: 2% 2%;
    box-sizing: border-box;
}
.footer-left h2 {font-weight: bold; font-size: 25px;}
.footer-btn {width: 100px; height: 50px; margin-bottom: 40px; margin-top: 90px; background-color: black; border-radius: 30px; color: white;}
.footer-btn a {font-weight: bold; text-decoration: none; color: white; font-size: 20px;  padding: 15px; line-height: 50px;}
.footer-left p {opacity: 0.5;  }
.footer-right-head {font-weight: bold; }
.footer-left, .footer-right {flex: 1; padding: 20px;}
.footer-left{text-align: left;}
.footer-right{text-align: left; font-size: 20px; line-height: 50px;}
.footer-right img{margin-top: 20px;}


.pc {display:block}
.m {display:none;}

@media (max-width: 768px) {

    /* header */
    .logo img {width: 40px;height: 40px;margin: 0px; }
 
    .nav-toggle-label {
        display: block;
        position: fixed;
        right: 40px;
        z-index: 9999;
        cursor: pointer;
        top: 56px;
      }

      .menu {
        display: none;
      }
      .nav-toggle:checked ~ .menu {
        display: block;
        background-color: white;
        width: 1000vh;
        z-index: 1;
        margin-right: -50px;
        height: 1000vh;
    }
    
    .nav-toggle:checked ~ .dropdown {
        display: block;
        z-index: 999;
        position: absolute;
        top: 17vh;
        left: 30px;
        line-height: 60px;
        font-size: 20px;
    }

    .nav-toggle:checked~.dropdown a {
        color: black;
        display: flex;
        left: 10;
    }
    
    .nav-toggle:checked~.dropdown a:hover {
        color: red;
    }


    .container {margin:0 auto;}

    /*section - two*/
    .section-two {width:90%;margin:6rem auto 0;}
    .section-two-title {font-size: 40px; }
    .section-two h3 {font-size: 28px; font-weight: 700; padding: 80px 50px; margin-bottom: 0px;}
    .section-two p {font-weight: 300; line-height: 1.6; padding: 50px;; font-size: 15px;}



    /* section - three */
    .section-three {height: 50vh;margin-bottom:4rem;}
    .section-three-top {font-size: 30px; line-height: 50px;}
    .section-three-bottom {font-size: 15px;line-height: 25px;}

    /*slider*/
    .slider span {font-size: 50px;}

    /*section-four*/
    .news-head {width:90%;margin: 0 auto;}
    .four-inner h2 {font-size: 20px;}
    .four-inner p {font-size: 15px;}

    /*footer*/
    .footer { top: 20px; position: relative; 
        height: 40vh;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 20px;
        width:90%;
        margin: 0 auto;
    }
    .footer-left h2 { font-size: 20px; position: relative;}
    .footer-btn { position: absolute; width: 90px; height: 45px; right: 40px; top: 50px; margin-bottom: 0px; margin-top: 0px; }
    .footer-btn a {font-size: 17px; line-height: 45px;}
    .footer-left p {display: none; }
    .footer-left, .footer-right {padding: 10px;}
    .footer-right{text-align: left; position: absolute; font-size: 15px; line-height: 25px; top: 120px; left: -15px;}
    .footer-right img{position: absolute; top: 150px; right: -110px;}



    .m p {
        text-align: left;
        animation: typing 4s steps(40) 1 normal forwards;
    }
    .m h1 {
        text-align: left;
        animation: typing 4s steps(40) 1 normal forwards,
    }
    @keyframes blink {
        0% {
            border-color: white;
        }
    }

    /* 수정 */
    .pc {display:none;}
    .m {display:block;}
    .loading-text p {font-size: 2rem;}
    .loading-text p:nth-child(2) {margin-bottom: 20px;}
    .loading-text h1 {font-size:3rem;}

    .section-three-top p {font-size: 10vw;line-height: 1.3;}
    .section-three-bottom {margin-top: 40px;}

    .footer-right {position: static;left:0;}

    .four-inner-i {width:100%;position:relative;z-index: 10;}
    .four-inner h2 {font-size: 2.5rem;margin-bottom: 20px;}
    .four-inner p {font-size:1.2rem}

    .four-inner-i div {width: 240px;height: 60px;line-height: 60px;margin-top: 40px;}
    .four-inner a {font-size: 1.3rem;}

    .section-five {height: 50vh;}
    .footer {margin-bottom: 60px; margin-top: 6vh;}
    .footer-btn {top:30px;}
    .footer-right ul li:last-child {display:none;}
}

/* 태블릿 1024 */
/* 작은PC 1200 */


@media (min-width: 769px) and (max-width:1024px) {

     /* header */
    .logo img {width: 40px;height: 40px;margin: 0px; }


    /*section - two*/
    .section-two-title {font-size: 50; }

    /* section - three */
    .section-three-top p{font-size: 60px; line-height: 75px;}
    .section-three-bottom {font-size: 18px; ;}

    /*section-four*/
    .four-inner h2 {font-size: 40px;}

    
}