/* Header background */
#header-background {
    background-image: url('../Images/Header/Header1.png');
    background-size: cover; /* ¹è°æÀ» È­¸é Å©±â¿¡ ¸ÂÃã */
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh; /* È­¸é Àüü ³ôÀÌ */
    position: relative;
    z-index: 0;
    transition: background-image 1s ease-in-out; /* ¹è°æ À̹ÌÁö Àüȯ È¿°ú */
}

/* ¹è°æ À§ÀÇ ÅؽºÆ® ¹öÆ° ÄÁÅÙÃ÷ */
.text-header-content {
    position: absolute;
    top: 78%; /* Áß¾Óº¸´Ù Á¶±Ý ¾Æ·¡ ¹èÄ¡ */
    left: 5%; /* ÁÂÃø ¿©¹é */
    transform: translateY(-50%); /* ¼¼·Î Áß¾Ó Á¤·Ä */
    max-width: 100%;
    color: ghostwhite;
    text-align: left; /* ÅؽºÆ® ¿ÞÂÊ Á¤·Ä */
}

    .text-header-content h1 {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 30px;
        line-height: 1.2;
        /* Ãʱ⠻óŸ¦ ¸íÈ®È÷ ¼³Á¤ */
        opacity: 0;
        transform: translateX(-100px);
        /* ¾Ö´Ï¸ÞÀ̼ÇÀÌ Àû¿ëµÇÁö ¾ÊÀ» ¶§µµ º¸À̵µ·Ï fallback Ãß°¡ */
        animation-fill-mode: both;
    }
    .text-header-content h2 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 30px;
        line-height: 1.2;
        /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/ /* ÅؽºÆ® ±×¸²ÀÚ Ãß°¡ */
        opacity: 0.8; /* ÅؽºÆ® Åõ¸íµµ 80% */
    }

    .text-header-content p {
        font-size: 1.5rem;
        margin-bottom: 30px;
        /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/ /* ÅؽºÆ® ±×¸²ÀÚ Ãß°¡ */
    }

/* ¹öÆ° ÄÁÅ×ÀÌ³Ê */
.button-container {
    display: flex;
    margin-top: 30px;
    margin-left: 10px;
    flex-wrap: wrap; /* ¹öÆ°ÀÌ ÀÛ¾ÆÁú °æ¿ì ÁÙ ¹Ù²ÞÀ» Çã¿ë */
    gap: 10px; /* ¹öÆ° °£ÀÇ °£°Ý */
}

    /* ¹öÆ° ½ºÅ¸ÀÏ */
    .button-container a {
        text-decoration: none;
        padding: 12px 24px; /* ³»ºÎ ¿©¹éÀ» ³Ë³ËÈ÷ ¼³Á¤ */
        border: 2px solid rgba(0, 0, 0, 0.6); /* Å׵θ® ¼³Á¤ */
        border-radius: 25px; /* µÕ±Ù Å׵θ® */
        color: #ffffff;
        font-weight: bold;
        display: inline-block;
        white-space: nowrap; /* ÁÙ¹Ù²Þ ¹æÁö */
        overflow: hidden; /* ³»¿ëÀÌ ³ÑÄ¡Áö ¾Êµµ·Ï ¼³Á¤ */
        text-overflow: ellipsis; /* ÅؽºÆ®°¡ ³ÑÄ¥ °æ¿ì »ý·« ±âÈ£ Ç¥½Ã */
        line-height: 1.2; /* ÅؽºÆ® ÁÙ °£°Ý Á¶Á¤ */
        background-color: rgba(0, 0, 0, 0.4); /* ±âº» ¹è°æ»ö Á¦°Å */
        transition: background-color 0.3s, color 0.3s, transform 0.3s; /* ºÎµå·¯¿î Àüȯ È¿°ú */
    }

        /* ¹öÆ° È£¹ö È¿°ú */
        .button-container a:hover {
            background-color: dodgerblue;
            opacity: 0.9;
            color: white;
            transform: scale(1.2); /* ¸¶¿ì½º ¿À¹ö ½Ã »ì¦ Ä¿Áö´Â È¿°ú */
        }
/* Logo positioning */
#logo {
    position: absolute;
    top: 0px; /* Move above the header */
    left: 5px; /* Slight left padding */
    bottom: 0px;
    z-index: 10;
    width: 180px; /* Larger logo */
    height: auto;
    margin: 0;
}



/* Header ³»ºÎ¿¡ Image Select ¹öÆ° */
.radio-container input[type="radio"] {
    appearance: none !important; /* Remove default styling */
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Make it circular */
    border: 2px solid white; /* Outer circle border */
    position: relative;
    background-color: transparent;
    margin: 0 10px;
    cursor: pointer;
    outline: none;
}

    .radio-container input[type="radio"]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background-color: white; /* Inner circle (unchecked state) */
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }

    .radio-container input[type="radio"]:checked::before {
        background-color: rgba(255, 255, 255, 0.9); /* Inner circle changes color when checked */
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .radio-container input[type="radio"]:checked {
        border-color: rgba(255, 255, 255, 0.9); /* Slightly brighter border when checked */
    }

.radio-container {
    position: absolute;
    bottom: 20px; /* ¹è°æ À̹ÌÁöÀÇ ÇÏ´Ü¿¡¼­ 20px À§·Î À§Ä¡ */
    gap: 10px; /* ¶óµð¿À ¹öÆ° °£ÀÇ °£°Ý */
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%); /* °¡·Î·Î °¡¿îµ¥ Á¤·Ä */
    z-index: 10;
}

    /* Add a hover effect */
    .radio-container input[type="radio"]:hover {
        border-color: rgba(255, 255, 255, 0.7); /* Slightly brightens border on hover */
    }


/* ÆäÀÌÁö ³»¿ëÀÌ °íÁ¤µÈ ³×ºñ°ÔÀÌ¼Ç ¹Ù¿Í °ãÄ¡Áö ¾Êµµ·Ï »ó´Ü¿¡ Æеù Ãß°¡ */
body {
    padding-top: 0px; /* ÆäÀÌÁö Àüü¸¦ ¾Æ·¡·Î ³»¸² */
    /*margin-top: 50px;*/ /* ÆäÀÌÁö Àüü¸¦ ¾Æ·¡·Î ³»¸² */
    display: flex;
    flex-direction: column;
    /*overflow-x: hidden;*/ /* ¼öÆò ½ºÅ©·Ñ ¹æÁö */
    /*overscroll-behavior: contain;*/ /* iOS Safari ²ø¾î³»¸®´Â bounce ¹æÁö (¼±ÅÃ) */
    /*touch-action: manipulation;*/ /* ÀϺΠÅÍÄ¡±â¹Ý È®´ë ¹æÁö */
}
.main-content {
    flex: 1;
}
.container, .section, .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
/*.main-content {
    min-height: calc(100vh - 20px);*/ /* ǪÅ͸¦ Á¦¿ÜÇÑ È­¸é ³ôÀ̸¦ ä¿ìµµ·Ï ¼³Á¤ */
/*}*/

/*Footer*/
.footer-section {
    background-color: #000;
    color: #fff;
    padding: 40px 0; /* »ó´Ü¿¡ ¿©¹é Ãß°¡ */
    position: relative; /* ǪÅÍÀÇ À§Ä¡¸¦ »ó´ëÀûÀ¸·Î ¼³Á¤ */
    z-index: 1; /* ǪÅÍ°¡ ³×ºñ°ÔÀÌ¼Ç ¹Ù À§¿¡ ¿Àµµ·Ï ¼³Á¤ */
}

.footer-title {
    color: #ff6600;
    font-size: 32px; /* Á¦¸ñÀ» ´õ Å©°Ô */
    margin-top: 20px; /* »ó´Ü¿¡ ¿©¹é Ãß°¡ */
    margin-bottom: 20px; /* Á¦¸ñ°ú ·Î°í »çÀÌ¿¡ ¿©¹é Ãß°¡ */
}

.footer-logo {
    max-width: 200px; /* ·Î°í Å©±â¸¦ Å°¿ì±â À§ÇØ max-width¸¦ 200px·Î ¼³Á¤ */
    margin-bottom: 10px;
    display: block; /* ºí·Ï ¿ä¼Ò·Î º¯°æÇÏ¿© ÁÂÃø Á¤·Ä */
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin-left: 0; /* ¿ÞÂÊ ¿©¹é Á¦°Å */
}

    .footer-contact li {
        margin-bottom: 5px;
    }

        .footer-contact li i {
            margin-right: 10px;
        }

.footer-section a {
    color: #ff6600;
    text-decoration: none;
}

    .footer-section a:hover {
        text-decoration: underline;
    }



/* ¹ÝÀÀÇü µðÀÚÀÎ: È­¸éÀÌ ÀÛ¾ÆÁú ¶§ ÆùÆ® Å©±â Á¶Á¤ */
@media (max-width: 768px) {
    #header-background {
        height: 60vh;
    }

    .text-header-content {
        top: 65%;
        left: 3%;
        transform: translateY(-50%);
        padding-right: 3%;
    }

        .text-header-content h1 {
            font-size: 1.0rem !important;
            margin-bottom: 5px;
            line-height: 1.3;
        }
        .text-header-content h2 {
            font-size: 0.3rem !important;
            margin-bottom: 5px;
            line-height: 1.3;
        }

        .text-header-content p {
            font-size: 1rem !important;
            margin-bottom: 5px;
        }

    .button-container a {
        font-size: 0.9rem !important;
        padding: 6px 10px;
        margin-bottom: 10px;
        display: block;
    }

    #logo {
        width: 140px;
    }

    .footer-title {
        font-size: 24px;
        text-align: center;
    }

    .footer-logo {
        max-width: 120px;
        margin: 0 auto;
    }

    .footer-contact {
        text-align: center;
    }

    .radio-container {
        bottom: 10px;
        gap: 6px;
    }

}




/* ¾Ö´Ï¸ÞÀÌ¼Ç Å¬·¡½º */
.slide-in {
    animation: slideInLeft 0.8s ease-out forwards;
}

/* Å°ÇÁ·¹ÀÓ ¾Ö´Ï¸ÞÀÌ¼Ç Á¤ÀÇ */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ¾Ö´Ï¸ÞÀ̼ÇÀÌ Àû¿ëµÉ Ŭ·¡½º */
.animate-on-scroll {
    animation: fadeSlideIn 1s ease-out forwards;
}

/* ¾Ö´Ï¸ÞÀ̼ÇÀÌ ¿Ï·áµÈ ÈÄ »óÅ À¯Áö */
.slide-in-complete {
    opacity: 1;
    transform: translateX(0);
}