<style>
    @font-face {font-family: 's-core-dream'; font-weight: 700; font-style: normal; src: url('../font/scdream7-webfont.woff') format('woff');}
    @font-face {font-family: 's-core-dream'; font-weight: 600; font-style: normal; src: url('../font/scdream6-webfont.woff') format('woff');}
    @font-face {font-family: 's-core-dream'; font-weight: 400; font-style: normal; src: url('../font/scdream5-webfont.woff') format('woff');}
    @font-face {font-family: 's-core-dream'; font-weight: 300; font-style: normal; src: url('../font/scdream3-webfont.woff') format('woff');}
    body, h1, h2, h3, h4, h5, h6, label, input, button, textarea, div, p, nav, ul, select, img, li, span, table, tr, td, pre { font-family: 's-core-dream', sans-serif;}

    .video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
    .iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    @media screen and (max-width: 1140px) {img.card-img-top {height: 300px; object-fit: cover;}}
    @media screen and (min-width: 1140px) {img.card-img-top {width: 1140px;	object-fit: cover;}}
    @media screen and (max-width: 768px) {div.container {position: relative;width: 100%;padding-right: 0px;padding-left: 0px}
    img.card-img-top {height: 220px;object-fit: cover;}}
    @media screen and (max-width: 560px) {img.card-img-top {height: 120px;object-fit: cover;}
    img.card-img-top2 {width: 100%;height: 100%px;object-fit: cover;}}

    .custom-width {width: 140px;}
    .youtube-wrapper {position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 비율 */}
    .youtube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .aspect-ratio-4-3 { position: relative; width: 100%; padding-bottom: 75%; background: #e0e0e0; overflow: hidden; }
    .aspect-ratio-4-3 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    .custom-width {width: 140px;}
    .card-link { text-decoration: none; /* 링크의 밑줄 제거 */ color: inherit; /* 링크의 기본 색상 상속 */ }
    .card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transform: translateY(-5px); /* 카드가 약간 위로 움직이는 효과 */ transition: all 0.3s; opacity: 0.5; /* 투명도를 50%로 설정 */ }
    .custom-card-column { padding-left: 5px; padding-right: 5px; }
    .container {display: flex; flex-wrap: wrap;}

    .help-popup {display: none; /* 기본적으로 숨김 */ position: fixed; z-index: 1000; /* 가장 위에 표시 */ left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; /* 가로 사이즈 설정 */ padding: 20px; background-color:white; border: 2px solid #000; box-shadow: 0 0 10px rgba(0,0,0,0.5); font-size: 12pt; }
    .help-popup .close-btn { display: block; text-align: right; margin-bottom: 10px; }
    .overlay { display: none; /* 기본적으로 숨김 */ position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); /* 검은색 배경, 투명도 적용 */ z-index: 999; /* 팝업 아래에 있지만 다른 요소 위에 표시 */	}
</style>