:root { 
  --custom-font-white: #ffffff;
  --custom-font-black: #000000;
  --custom--color-gard-purple: #664E9E;
  --custom--color-gard-yellow: #F58C1E;
  --custom--color-gard-purple-tra: #F0EEF6;
  --custom--color-gard-purple-line: #b8a6dd;
  --custom--color-gard-purple-sub: #A98DDA;
  --default-color: #444444;
}
:root {
  --default-font: "Roboto", 'Noto Sans KR', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat", 'Noto Sans KR', sans-serif;
  --nav-font: "Open Sans", 'Noto Sans KR', sans-serif;
  --noto-font: 'Noto Sans KR', sans-serif;
}

/* ================================================================================== 미디어쿼리 */
/* 2026.06.xx 기준 기준점 
	1399 - 미세 보정
	1199 - 레이아웃
	1100 => 문제 없음
	992  - 레이아웃 / 태블릿 기준점
	768  - 레이아웃 + 미세조정
	640  - 미세조정
	576  - 레이아웃 / 모바일 기준점
	520  => 문제 없음
	480  - 미세조정
	440  => 문제 없음
	390  - 레이아웃
	375  => 문제 없음
	320  - 미세 조정
 */
/* ----------------------------------------1399px */
@media (max-width: 1399px) {
	.sub-banner p {
    	font-size: 15px;
    }
    .chart-wrap, .participant-summary-row, .participant-age-box, .process-wrap{
		width: 100%;
	}
	/* ------------------------ */
	.multimodal-card-wrap {
		padding: 0;
	}
	.multimodal-card {
		padding: 24px 16px;
	}
	.multimodal-card h5 {
    	font-size: 22px;
    }
	.multimodal-card ul {
	    padding-left: 30px;
	}
}

/* ---------------------------------------- 1199px */
@media (max-width: 1199px) {
	.sub-banner {
    	padding: 30px 0;
    }
	.sub-path {
    	margin-bottom: 18px;
	}
	.sub-banner h2 {
		font-size: 25px;
	}
	.sub-banner-wrap {
    	padding: 79px 0 50px 0;
	}
	/* ------------------------ */
	.sub-lnb {
    	max-width: 100%;
    	margin-bottom: 50px;
	}
    .sub-lnb-box ul {
        display: flex;
        flex-wrap: wrap;
    }
    .sub-lnb-box li {
        flex: 1 1 20%;
    	min-width: 180px;
    }
    .sub-lnb-box li a {
    	min-height: 50px;
    } 
    .sub-lnb-box h2 {
    	text-align: left;
    	padding: 20px 0;
    }
}

/* ---------------------------------------- 992px: 태블릿 기준점 */
:root {
  	--tablet-992-max-width-sm: 700px; 
}

@media (max-width: 992px) {
	.sub-br-992{
		display: block;
	}
	.sub-none-992{
		display: none;
	}
	.sub-banner-wrap {
    	padding: 79px 0 40px 0;
	}
	.sub-banner-wrap .container{
		max-width: var(--tablet-992-max-width-sm);
	}	
	#sub-content-box, #sub-footer .sub-footer-container {
	    max-width: var(--tablet-992-max-width-sm);
	    margin: 0 auto;
	}
	.sub-lnb {
    	margin-bottom: 50px;
	}
    .sub-lnb-box li {
        flex: 0 0 50%;
    	min-width: 50%;
    }
    .sub-text .sub-text-h3 {
    	font-size: 30px;
    }
    .sub-text .sub-text-p {
    	margin-bottom: 5px;
    	line-height: 1.55;
    }
    /* ------------------------ */ 
	.mission-card-wrap {
        flex-wrap: wrap;
    }
    .mission-card {
        flex: 0 0 calc(50% - 10px);
    }
	.mission-card:first-child {
        flex: 0 0 100%;
    }
	.mission-slogan strong {
    	font-size: 60px;
	}
	/* ------------------------ */
	.greeting-content {
        display: block;
    }
    .greeting-photo-pc {
        display: none;
    }
    .greeting-bottom-tablet {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0px;
        margin-top: 45px;
    }
    .greeting-photo-tablet {
        display: block;
        flex: 0 0 42%;
    }
    .greeting-photo-tablet img {
        width: 85%;
    }
    .greeting-sign {
        flex: 1;
        text-align: left;
    }
    /* ------------------------ */
    .roadmap-wrap-pc {
		display: none;
	}
    .roadmap-wrap-tablet{
		display: block;
	}
	.roadmap-wrap-tablet .roadmap-row {
		grid-template-columns: 100px 80px 330px;
		justify-content: center;
	}
	.roadmap-wrap-tablet .roadmap-center {
	    position: relative;
	}
	.roadmap-wrap-tablet .roadmap-center::before{
		content: "";
		position: absolute;
		top: 0px;
	    bottom: 0px;
	    left: 50%;
	    transform: translateX(-50%);
		width: 2px;
		height: 100%;
		background: var(--custom--color-gard-purple-line);
		z-index: 1;
	}
	.roadmap-wrap-tablet .roadmap-dot{
		position: relative;
		z-index: 2;
	}
	.roadmap-wrap-tablet .roadmap-step{
		text-align: right!important;
		min-width: 100px;
	}
	.roadmap-wrap-tablet .step-line{
		margin-left: auto!important;
	}
	.roadmap-wrap-tablet .roadmap-row .roadmap-cell:first-child{
		justify-content: flex-start;
	}
    /* ------------------------ */
    .line-chart-labels {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }
    .line-chart-labels p{
    	margin: 0
    }
    .process-card {
    	width: 300px;
    	padding: 18px 15px;
    }
    .process-card h5 {
    	font-size: 18px;
    }
    /* ------------------------ */
    .multimodal-card-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .multimodal-card {
        max-width: 310px;
        width: 100%;
        margin: 0 auto;
        padding: 20px 16px;
    }
    .framework-box {
    	width: 600px;
    	height: 530px;
    }
    .framework-center-icon {
    	width: 120px;
    	height: 120px;
    }
    .framework-center-icon img {
	    width: 63px;
	    height: 63px;
    }
    .framework-neuro {
	    left: 120px;
    	top: 22px;
    }
    .framework-bio {
    	left: -14px;
    	top: 199px;
    }
    .framework-micro {
    	left: 108px;
    	bottom: 0px;
    }
    .framework-genome {
	    right: 122px;
	    top: -10px;
	}
	.framework-clinical {
	    right: 0px;
	    top: 227px;
	}
	.framework-life {
	    right: 74px;
	    bottom: 27px;
	}
	.data-biobank .biobank-wrap{
		height:560px;
	}
	.data-biobank .biobank-line {
		height:190px;
	}
	.data-biobank .biobank-line::after{
		background:
			linear-gradient(var(--custom--color-gard-purple), var(--custom--color-gard-purple)) left top / 2px 28px no-repeat,
			linear-gradient(var(--custom--color-gard-purple), var(--custom--color-gard-purple)) 25% top / 2px 190px no-repeat,
			linear-gradient(var(--custom--color-gard-purple), var(--custom--color-gard-purple)) 50% top / 2px 28px no-repeat,
			linear-gradient(var(--custom--color-gard-purple), var(--custom--color-gard-purple)) 75% top / 2px 190px no-repeat,
			linear-gradient(var(--custom--color-gard-purple), var(--custom--color-gard-purple)) right top / 2px 28px no-repeat;
	}
	.data-biobank .item-serum, .data-biobank .item-csf{
		top:410px;
	}
	
	/* ------------------------ */ 
	.portal-function h4 {
		font-size: 19px;
	}
	.portal-function p {
		font-size: 14px;
	}
		
}

/* ---------------------------------------- 768px */
:root {
  	--tablet-768-max-width-sm: 660px; 
}

@media (max-width: 768px) {
	.sub-none-768{
		display: none;
	}
	.sub-banner-wrap .container{
		max-width: var(--tablet-768-max-width-sm);
	}	
	#sub-content-box, #sub-footer .sub-footer-container  {
	    max-width: var(--tablet-768-max-width-sm);
	    margin: 0 auto;
	}
	.sub-text .sub-text-h3 {
    	font-size: 28px;
    }
    .sub-footer-logo-wrap > img {
    	width: 120px;
    }
    .sub-footer-copyright p {
    	font-size: 15px;
    }
    /* ------------------------ */
    .mission-card-wrap {
    	gap: 15px;
    }
	.mission-card {
        flex: 0 0 100%;
        padding: 14px 17px;
        min-height: 100px;
    }	
    .mission-slogan strong {
        font-size: 53px;
    }
    /* ------------------------ */
    .greeting-sign img {
    	max-width: 140px;
    }
    /* ------------------------ */
    .framework-diagram {
    	width: auto;
    }
    .framework-connection {
    	display: none;
    }
    /* ------------------------ */
    .chart-wrap {
	    height: 400px;
	}
    .participant-summary-row {
    	gap: 40px;
    }
    /* ------------------------ */
    .framework-center p {
    	font-size: 22px;
    }
    .framework-item p {
    	font-size: 15px;
    }
    /* ------------------------ */
    .portal-functions {
	    flex-direction: column;
        gap: 15px;
        margin-top: 35px;
	}
	.portal-function {
		width: 100%;
	}
	.portal-function h4 {
		font-size: 22px;
		margin-top: 14px;
    	margin-bottom: 10px;
	}
	.portal-function-line {
    	margin-bottom: 6px;
    	width: 50%;
	}
	.portal-function p {
		font-size: 16px;
	}
	/* ------------------------ */
	.publication-top-area {
		display: block;
	}
	.publication-search {
		margin-top: 7px;
	}
	.search-reset-btn{
		display: none;
	}
	.publication-card-wrap {
	    align-items: flex-start;
	}
	.publication-card-wrap .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
	.publication-card-wrap > div {
    	height: auto !important;
  	}
	.publication-card {
        display: flex;
        height: auto !important;
    	min-height: 300px !important;
        align-items: stretch;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        transition: all .3s ease;
    }
    .publication-img {
        flex: 0 0 36%;
        padding: 20px;
        display: flex;
        height: auto;
        align-items: center;
        justify-content: center;
    }
    .publication-img  img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .publication-body {
        padding: 20px;
    }
    .publication-title {
        font-size: 20px;
        margin: 15px 0;
    }
    .publication-authors {
        font-size: 16px;
    }
    .publication-journal {
        font-size: 16px;
    }
}

/* ---------------------------------------- 640px */
@media (max-width: 640px) {
	.sub-text .sub-text-h3 {
    	font-size: 26px;
    }
    .sub-footer-logo-wrap > img {
        width: 105px;
    }
    /* ------------------------ */
    
    /* ------------------------ */
    .participant-summary-row {
        gap: 10px;
    }
    .process-wrap {
        display: flex;
	    flex-direction: column;
	    align-items: center;
	    gap: 28px;
	    height: auto;
    }
    .process-svg {
    	display: none;
    }
    .process-card {
    	position: relative;
        width: 82%;
        max-width: 360px;
    }
    .process-card:not(:last-child)::after {
	    content: "↓";
	    position: absolute;
	    left: 50%;
	    bottom: -30px;
	    transform: translateX(-50%);
	    font-size: 20px;
	    color: var(--custom--color-gard-purple-line);
	    font-weight: 300;
	}
	/* ------------------------ */
	.framework-box {
        width: 500px;
        height: 500px;
    }
	.circle-outer {
	    width: 450px;
	    height: 450px;
	}
	.circle-inner {
	    width: 410px;
	    height: 410px;
	}
	.framework-center-icon {
        width: 100px;
        height: 100px;
    }
	.framework-center-icon img {
        width: 50px;
        height: 50px;
    }
    .framework-neuro {
        left: 100px;
        top: 20px;
    }
    .framework-bio {
        left: 0px;
        top: 200px;
    }
    .framework-micro {
    	left: 110px;
    }
    .framework-genome {
        right: 100px;
        top: 20px;
    }
    .framework-clinical {
        top: 190px;
    }
    .framework-life {
        right: 85px;
        bottom: 0px;
    }
    .framework-item p {
        font-size: 14px;
    }
    /* ------------------------ */
    .portal-function h4 {
        font-size: 20px;
        margin-top: 10px;
    }
}

/* ----------------------------------------576px: 모바일 경계선 */
:root {
  	--mobile-576-max-width-sm: 500px; 
}
	
@media (max-width: 576px) {
	.sub-br-576{
		display: block;
	}
	.sub-banner-wrap .container{
		max-width: var(--mobile-576-max-width-sm);
	}	
	#sub-content-box, #sub-footer .sub-footer-container  {
	    max-width: var(--mobile-576-max-width-sm);
	}
	.sub-banner-wrap {
        padding: 79px 0 30px 0;
    }
	.sub-banner {
        height: 140px;
	}
	.sub-banner h2 {
        font-size: 22px;
    }
	.sub-banner p {
        display: none;
    }
    .sub-lnb {
        margin-bottom: 40px;
    }
    .sub-lnb-box h2 {
        font-size: 22px;
        padding: 15px 0;
    }
    .sub-lnb-box li a {
    	padding: 0 17px;
    	font-size: 15px;
    	min-height: 45px;
    }
    .sub-text .sub-text-h3 {
        font-size: 25px;
    }
    .sub-text .sub-text-p {
    	font-size: 16px;
    }
    /* ------------------------ */
    .mission-card h4 {
    	font-size: 16px;
    }
    .mission-slogan span {
    	font-size: 16px;
    }
    .mission-slogan strong {
        font-size: 40px;
    }
    /* ------------------------ */  
    .greeting-sign p {
    	font-size: 16px;
    }
    .greeting-sign p:nth-child(2) {
    	font-size: 18px;
	}
	.greeting-sign img {
        max-width: 110px;
    }
    /* ------------------------ */  
    .framework-orbit {
    	display: none;
    }
    .framework-diagram {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .framework-card {
    	width: 240px;
    	height: 240px;
    	padding: 13px;
    	box-shadow: none;
    }
    .framework-diagram .framework-item {
	    position: static!important;
	}
	.framework-item-gard {
		transform: none;
	}
	.framework-logo {
		margin-bottom: 8px;
	}
	.framework-none-logo {
		height: 20px;
	}
	.framework-card h5 {
		font-size: 21px;
	}
	.framework-divider {
		margin: 10px 0 8px;
	}
	.framework-card ul {
    	padding-left: 20px;
    }
    .roadmap-wrap-tablet {
    	margin: 30px auto 0;
    }
    .roadmap-wrap-tablet .roadmap-row {
        grid-template-columns: 80px 60px 250px;
    }
    .roadmap-wrap-tablet .roadmap-step {
    	min-width: 80px;
    }
    .roadmap-step strong {
    	font-size: 18px;
    }
    .step-line {
    	width: 70px;
    }
    .roadmap-step span {
    	font-size: 14px;
    }
    .roadmap-card {
    	width: 250px;
    	padding: 20px 10px 16px 10px;
    }
    .roadmap-card img {
	    max-width: 170px;
	}
	.roadmap-card-text strong {
		font-size: 17px;
		margin-bottom: 10px;
	}
	.roadmap-card p {
    	font-size: 14px;
    }
    /* ------------------------ */ 
    .line-chart-labels p {
    	font-size: 16px;
    }
    .participant-summary-row {
    	flex-direction: column;
        align-items: center;
        gap: 40px
    }
    /* ------------------------ */
    .multimodal-card-wrap {
        gap: 15px;
    }
    .multimodal-card h5 {
        font-size: 18px;
    }
    .multimodal-card ul {
        padding-left: 20px;
    }
    .multimodal-card li {
    	font-size: 15px;
    }
    .framework-box {
        width: 400px;
        height: 400px;
    }
	.circle-outer {
	    width: 350px;
	    height: 350px;
	}
	.circle-inner {
	    width: 310px;
	    height: 310px;
	}
	.framework-center-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 5px;
    }
	.framework-center-icon img {
        width: 50%;
        height: 50%;
    }
    .framework-center p {
        font-size: 18px;
    }
    .data-framework .framework-item{
    	position: absolute;
    }
    .framework-icon {
    	width: 70px;
    	height: 70px;
    	margin: 0 auto 4px;
    }
    .framework-icon img {
    	width: 40px;
    	height: 40px;
    }
    .framework-neuro {
        left: 80px;
        top: 12px;
    }
    .framework-bio {
        top: 155px;
    }
    .framework-micro {
    	left: 90px;
    }
    .framework-genome {
        right: 90px;
        top: 12px;
    }
    .framework-clinical {
        top: 150px;
    }
    .framework-life {
        right: 65px;
    }
	.data-biobank .biobank-wrap{
		height:auto;
	}
	.data-biobank .biobank-main{
		position:relative;
		left:auto;
		transform:none;
		margin-bottom:50px;
	}
	.data-biobank .biobank-main-icon {
    	width: 110px;
    	height: 110px;
    	margin: 0 auto;
        margin-bottom: 8px;
    }
	.data-biobank .biobank-main-icon img {
	    width: 55px;
	    height: 55px;
	}
	.data-biobank .biobank-main p {
		font-size: 20px;
	}
	.data-biobank .biobank-line{
		display:none;
	}
	.data-biobank .biobank-list{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:30px;
	}
	.data-biobank .biobank-item{
		position:relative;
		left:auto !important;
		right:auto !important;
		top:auto !important;
		transform:none !important;
	}
    .data-biobank .biobank-item span {
    	font-size: 17px;
    	font-weight: 600;
    }
	.data-biobank .biobank-item::before{
		content:"";
		position:absolute;
		width:2px;
		height:17px;
		background:var(--custom--color-gard-purple);
		left:50%;
		top:-24px;
		transform:translateX(-50%);
		opacity: .6;
	}
	.data-biobank .biobank-item:first-child::before{
		height:35px;
		top:-44px;
	}	
    
    /* ------------------------ */
    .portal-functions {
        gap: 13px;
        margin-top: 28px;
    }
    .portal-function h4 {
        font-size: 18px;
    }
    .portal-function p {
        font-size: 14px;
    }
    /* ------------------------ */
    .publication-card {
        min-height: 260px !important;
    }
    .publication-search select {
    	transform: translateY(0px);
    }
    .publication-img, .publication-body {
    	padding: 12px;
    }
    .publication-title {
        font-size: 18px;
        margin: 13px 0;
    }
}

/* ----------------------------------------480px */
:root {
  	--mobile-480-max-width-sm: 420px;
}
	
@media (max-width: 480px) {
	.sub-none-480{
		display: none;
	}
	.sub-br-480{
		display: block;
	}
	.sub-banner-wrap .container{
		max-width: var(--mobile-480-max-width-sm);
	}	
	#sub-content-box, #sub-footer .sub-footer-container  {
	    max-width: var(--mobile-480-max-width-sm);
	}
	.sub-footer-logo-wrap > img {
        width: 100px;
    }
	/* ------------------------ */  
	.mission-slogan span {
        font-size: 15px;
    }
    /* ------------------------ */ 
    .roadmap-wrap-tablet .roadmap-row {
        grid-template-columns: 70px 45px 200px;
    }
    .roadmap-wrap-tablet .roadmap-step {
        min-width: 70px;
    }
    .roadmap-step span {
        font-size: 13px;
    }
    .roadmap-card {
        width: 200px;
        padding: 15px 8px 10px 8px;
    }
    .roadmap-card img {
        max-width: 150px;
        margin-bottom: 8px;
    }
    .roadmap-step strong {
        font-size: 17px;
    }
    .roadmap-wrap-tablet .step-line {
        margin-left: auto !important;
        margin: 6px 0;
    }
    /* ------------------------ */  
    .multimodal-card-wrap {
        gap: 10px;
    }
    .multimodal-icon {
    	width: 80px;
    	height: 80px;
    }
    .multimodal-card h5 {
        font-size: 16px;
    }
    .multimodal-card li {
        font-size: 14px;
    }
    .framework-box {
        width: 300px;
        height: 300px;
    }
	.circle-outer {
	    width: 250px;
	    height: 250px;
	}
	.circle-inner {
	    width: 210px;
	    height: 210px;
	}
	.framework-center-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 5px;
    }
	.framework-center-icon img {
        width: 50%;
        height: 50%;
    }
    .framework-center p {
        font-size: 17px;
    }
    .framework-icon {
    	width: 60px;
    	height: 60px;
    	margin: 0 auto 4px;
    }
    .framework-icon img {
    	width: 35px;
    	height: 35px;
    }
    .framework-item p {
        display: none;
    }
    .framework-neuro {
        left: 50px;
        top: 20px;
    }
    .framework-bio, .framework-clinical {
        top: 120px;
    }
    .framework-micro {
    	left: 52px;
        bottom: 15px;
    }
    .framework-genome {
        right: 60px;
        top: 20px;
    }
    .framework-life {
        right: 58px;
        bottom: 15px;
    }
    /* ------------------------ */ 
    .publication-search input {
	    width: 150px;
	}
    .publication-body{
    	min-width: 0;
	}
	.publication-authors, .publication-journal {
     	display: block;
	    max-width: 100%;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    font-size: 15px;
    }
}

/* ----------------------------------------390px */
:root {
  	--mobile-390-max-width-sm: 340px; 
}
	
@media (max-width: 390px) {
	.sub-banner-wrap .container{
		max-width: var(--mobile-390-max-width-sm);
	}	
	.sub-banner h2 {
        font-size: 20px;
    }
    .sub-lnb-box h2 {
        font-size: 20px;
        padding: 13px 0;
    }
    .sub-lnb-box li a {
        padding: 0 13px;
        font-size: 14px;
        min-height: 43px;
    }
	#sub-content-box, #sub-footer .sub-footer-container  {
	    max-width: var(--mobile-390-max-width-sm);
	}
	.sub-text .sub-text-h3 {
        font-size: 21px;
        margin-bottom: 18px;
    }
    .sub-text .sub-text-h4 {
    	font-size: 21px;
    }
    /* ------------------------ */  
    .mission-card-wrap {
        gap: 12px;
        margin-top: 22px;
    }
    .mission-icon {
	    flex: 0 0 60px;
	    width: 60px;
	    height: 60px;
    }
    .mission-icon i {
    	font-size: 30px;
    }
    .mission-slogan span {
        font-size: 13px;
    }
    /* ------------------------ */  
    .greeting-sign p {
        font-size: 15px;
        margin-bottom: 0px;
    }
    .greeting-sign p:nth-child(2) {
        font-size: 17px;
        margin-bottom: 5px;
    }
    .greeting-sign img {
        max-width: 100px;
    }
    /* ------------------------ */ 
    .roadmap-wrap-tablet .roadmap-row {
        grid-template-columns: 70px 45px 185px;
    }
    .roadmap-card {
        width: 185px;
    }
    /* ------------------------ */ 
    .chart-wrap {
        height: 360px;
    }
    .line-chart-labels p {
        font-size: 15px;
    }
    .pie-chart-wrap {
	    height: 230px;
	}
	.pie-labels {
	    margin-top: 8px;
	}
    .process-card {
    	width: 100%;
    }
    .process-card p {
    	font-size: 14px;
    }
    /* ------------------------ */ 
    .multimodal-card {
    	padding: 15px 10px;
    }
    .multimodal-icon {
        width: 70px;
        height: 70px;
    }
    /* ------------------------ */ 
    .portal-function h4 {
        font-size: 17px;
    }
    /* ------------------------ */ 
   .publication-search input {
        width: 100px;
    }
    .publication-card-wrap > .col-md-6:not(:nth-child(1)){
    	margin-top: 18px;
    }
    .publication-card {
        min-height: 250px !important;
    }
    .publication-img {
    	display: none;
    }
}
/* ----------------------------------------320px */
@media (max-width: 320px) {
	.sub-footer-logo-wrap > img {
        width: 90px;
    }
}