@font-face {
    font-family: 'Nanum Gothic';
    src: url('/fonts/NanumGothic.ttf') format('truetype'),
         url('/fonts/NanumGothicBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body, html {
            height: 100%;
            margin: 0;
            font-family: 'Nanum Gothic', Arial, Helvetica, sans-serif;
        }
        #wrap {
            position: relative;
            height: 100%;
        }
        header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
        }
        header nav {
            background: rgba(255, 255, 255, 0.7);
        }
        
        .video-bg-container {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
            z-index: 0; /* 비디오 컨텐츠의 z-index 설정 */
        }
        .video-bg-container video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: 100%;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }
        .content {
            position: relative;
            z-index: 1;
            color: white;
            text-align: center;
        }
        .content h1, .content p {
            background: rgba(0, 0, 0, 0.5);
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }
        .section-content {
            padding: 50px 0;
        }
        .section-content h3 {
            font-size: 31px;
        }
        .section-content p {
            font-size: 18px;
        }
        .section-image h4 {
            font-size: 24px;
        }
        .section-image p {
            font-size: 16px;
        }
        .latestposts .card {
            border: none;
        }
        .latestposts .card-img-top {
            border-radius: 5px;
        }
        .latestposts .card-body {
            padding: 10px;
        }
        .latestposts .card-title {
            font-size: 18px;
            font-weight: bold;
        }
        .latestposts .card-text {
            font-size: 14px;
            color: #6c757d;
        }
        footer {
            background-color: #343a40;
            color: white;
            padding: 30px 0;
        }
        footer a {
            color: #d4d4d4;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
        header nav .navbar-nav .nav-item {
            margin-right: 20px; /* 간격 조정 */
        }

        /* 마지막 nav-item의 오른쪽 마진 제거 */
        header nav .navbar-nav .nav-item:last-child {
            margin-right: 0;
        }
		.nav-link.active {
			position: relative;
			color: #d63384; /* 분홍색 텍스트 (선택사항) */
		}

		.nav-link.active::after {
			content: '';
			position: absolute;
			bottom: -2px; /* 메뉴 항목 아래에 라인 표시 */
			left: 0;
			right: 0;
			height: 2px;
			background-color: #d63384; /* 분홍색 라인 */
		}
		
		.custom-title {
            font-size: 31px;
        }

        .custom-subtitle {
            color: #54cd38;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 2px;
            margin: 20px 0;
        }

        .custom-text {
            color: #777;
        }
		.custom-section-title {
            color: #292929;
            position: relative;
            padding-bottom: 1.5rem;
            font-size: 1rem;
            text-transform: uppercase;
        }

        .custom-section-title::after {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background-color: #54cd38;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .custom-text {
            color: #6a6a6a;
        }

        .custom-quote {
            font-size: 15px;
            line-height: 24px;
            color: #3a3b3c;
            font-family: 'Lora', serif;
            font-style: italic;
        }

        .mb-3-custom {
            margin-bottom: 21px;
        }
		.rich-list {
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			list-style: none;
			margin: 0;
			padding: 0
		}

		.rich-list-item {
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			background: 0 0;
			padding: .75rem;
			margin: 0;
			cursor: default;
			text-decoration: none!important
		}

		.rich-list-content {
			-webkit-box-flex: 1;
			-ms-flex: 1;
			flex: 1;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column
		}

		.rich-list-title {
			font-size: 1.0rem;
			margin-bottom: 0;
			padding: 0
		}

		.rich-list-subtitle {
			color: var(--bs-secondary-color)
		}

		.rich-list-bordered .rich-list-item {
			border: 1px dashed var(--bs-border-color);
			border-radius: .3rem;
			margin-bottom: 5px
		}

		.rich-list-append,.rich-list-prepend {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			color: var(--bs-text-level-1)
		}

		.rich-list-prepend {
			margin-right: .5rem
		}

		.rich-list-append {
			margin-left: .5rem
		}

		.rich-list-action .rich-list-item {
			cursor: pointer
		}

		.rich-list-action .rich-list-item.active,.rich-list-action .rich-list-item:active,.rich-list-action .rich-list-item:hover {
			background: var(--bs-light)
		}

		.rich-list-action .rich-list-item.active .rich-list-title,.rich-list-action .rich-list-item:active .rich-list-title,.rich-list-action .rich-list-item:hover .rich-list-title {
			color: #38c66c
		}

		.rich-list-action .rich-list-item.disabled,.rich-list-action .rich-list-item:disabled {
			background: var(--bs-secondary-bg);
			opacity: .65;
			pointer-events: none;
			cursor: default
		}

		.rich-list-flush .rich-list-item {
			border-bottom: 1px dashed var(--bs-border-color)
		}
        @media (max-width: 576px) {
            .video-bg-container video {
                width: 100%;
                height: auto;
                top: 0;
                left: 0;
                transform: none;
            }
        }