/* ============================================================
   KPFGH SKIN CSS
   국회국제보건의료포럼 그누보드5 스킨
   ============================================================ */

/* ── CSS 변수 ─────────────────────────────────────────────── */
:root {
    --primary:        #0A2D6E;   /* 의회 네이비 */
    --primary-dark:   #071e4d;   /* 호버용 진한 네이비 */
    --primary-light:  #e8edf7;   /* 연한 배경 */
    --accent:         #00417b;   /* 골드 포인트 */
    --accent-hover:   #00417b;
    --text:           #1e2535;
    --text-muted:     #5a6478;
    --border:         #dde2ed;
    --white:          #ffffff;
    --bg-light:       #f5f7fb;
    --trans:          0.22s ease;
}

/* ── 리셋 & 기본 ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* 초기화 */
html {font-size: 10px;line-height: 1.6; overflow-y:scroll;scroll-behavior: smooth;}
@media (max-width: 1780px) {
	html {font-size: 9.6px;}
}
@media (max-width: 1340px) {
	html {font-size: 9.5px;}
}
@media (max-width: 1280px) {
	html {font-size: 9.4px;	}
}
@media (max-width: 1080px) {
	html {font-size: 9.2px;	}
}
@media (max-width: 840px) {
	html {font-size: 9px;}
}
@media (max-width: 600px) {
	html {font-size: 8.8px;}
}

body {font-size:1.6rem;
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.inner {max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 2%;}

#main_visu {background: linear-gradient(rgba(0, 65, 123, 0.6), rgba(0, 33, 62, 0.6)), url('../../images/main_visu.png'); background-size: cover; background-position: center;}
#main_visu .inner {position: relative; height: 700px;}
#main_visu .main_visu_txt {position: absolute; top: 50%; color: var(--white); font-size: 4rem; word-break: keep-all; font-weight: 600; opacity: 0; transform: translateY(-50%); animation: fadeInUp 1.5s ease-out forwards;}

@media (max-width: 1024px) {
    #main_visu .inner {height: 550px;}
}

@media (max-width: 768px) {
    #main_visu .inner {height: 450px;}
    #main_visu .main_visu_txt {text-align: center; width: 96%; font-size: 3rem;}
}
@media (max-width: 480px) {
    #main_visu .main_visu_txt {font-size: 2rem;}
    #main_visu .main_visu_txt br {display: none;}
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(0%); /* 시작 위치 (아래) */
    }
    100% {
        opacity: 1;
        transform: translateY(-50);    /* 최종 위치 (원래 자리) */
    }
}

#section1 {margin: 100px 0;}
#section1 h2.section_tit {font-size: 5rem; font-weight: 600;}
#section1 .section_sub_tit {font-size: 2rem; word-break: keep-all; color: #333; font-weight: 500;}
#section1 .grid {gap: 18px; margin: 40px 0; display: grid; grid-template-columns: repeat(4, 1fr);align-items: stretch;}
#section1 .grid > a {
    display: block;
    height: 100%;
}
#section1 .grid .card {
	padding: calc((40 * 100 / 1920) * 1vw) calc((35 * 100 / 1920) * 1vw);
	border-radius: calc((30 * 100 / 1920) * 1vw);
	background: #f3f3f3;
	display: flex;
	flex-direction: column;
	gap: calc((80 * 100 / 1920) * 1vw);
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	z-index: 2;
    transition: transform 0.4s ease, color 0.4s ease;
    height: 100%;
}

#section1 .grid .card p {
	word-break: keep-all;
	font-size: 2.5rem;
	letter-spacing: -0.045em;
	font-weight: 600;
	color: var(--primary);
	line-height: calc(34 / 24 * 1em);
}

#section1 .grid .card dl {
	display: flex;
	align-items: flex-end;
	gap: calc((15 * 100 / 1920) * 1vw);
	margin-left: auto;
}

#section1 .grid .card dl img {height: 110px;}

#section1 .grid .card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(118deg, #7998f2 0%, #74e7fa 100%);
	z-index: 2;
	opacity: 0;
	transition: 0.4s;
	pointer-events: none;
	z-index: -1;
	transition: opacity 0.4s ease;
}

#section1 .grid .card.active {
	color: #fff;
}

#section1 .grid .card.active::after {
	opacity: 1;
}

#section1 .grid .card.active p {
	color: #fff;
}

@media screen and (min-width: 821px) {

	/* 1781 이상이면 기본폼 */
	#section1 .grid .card:hover {
		color: #fff;
		transform: translateY(-40px);
	}

	#section1 .grid .card:hover::after {
		opacity: 1;
	}

	#section1 .grid .card:hover p {
		color: #fff;
	}
}

@media screen and (min-width: 1781px) {
	#section1 .grid .card {
		padding: 40px 35px;
		border-radius: 30px;
		gap: 80px;
	}

	#section1 .grid .card p {
		font-size: 2.3rem;
	}

	#section1 .grid .card dl {
		gap: 15px;
	}
}


@media screen and (max-width: 920px) {
    #section1 {margin: 80px 0;}
    #section1 h2.section_tit {font-size: 4rem;}
	#section1 .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
       margin: 10px 0;
	}

	#section1 .grid .card {
		padding: 30px 25px;
		border-radius: 25px;
		gap: 20px;
	}

	#section1 .grid .card dl img {height: 80px;}
    
}

@media screen and (max-width: 480px) {
    #section1 h2.section_tit {font-size: 3rem;}
    #section1 .section_sub_tit {font-size: 1.5rem;}
	#section1 .grid {
		gap: calc(25 * 100 / 480 * 1vw);
	}

	#section1 .grid .card {
		padding: calc(20 * 100 / 480 * 1vw);
		border-radius: calc(21 * 100 / 480 * 1vw);
		gap: calc(20 * 100 / 480 * 1vw);
	}

	#section1 .grid .card p {
		font-size: calc(16 * 100 / 480 * 1vw);
	}

	#section1 .grid .card dl dt {
		font-size: calc(71 * 100 / 480 * 1vw);
	}

	#section1 .grid .card dl dd {
		font-size: calc(15 * 100 / 480 * 1vw);
	}
}


#section2 {margin: 100px 0;}
#section2 h2.section_tit {font-size: 5rem; font-weight: 600;}
#section2 .section_sub_tit {font-size: 2rem; word-break: keep-all; color: #333; font-weight: 500;}


@media screen and (max-width: 920px) {
    #section2 {margin: 80px 0;}
    #section2 h2.section_tit {font-size: 4rem;}    
}

@media screen and (max-width: 480px) {
    #section2 h2.section_tit {font-size: 3rem;}
    #section2 .section_sub_tit {font-size: 1.5rem;}
}


#section3 {margin: 100px 0;}
#section3 h2.section_tit {font-size: 5rem; font-weight: 600;}
#section3 .section_sub_tit {font-size: 2rem; word-break: keep-all; color: #333; font-weight: 500;}


@media screen and (max-width: 920px) {
    #section3 {margin: 80px 0;}
    #section3 h2.section_tit {font-size: 4rem;}    
}

@media screen and (max-width: 480px) {
    #section3 h2.section_tit {font-size: 3rem;}
    #section3 .section_sub_tit {font-size: 1.5rem;}
}