@charset "UTF-8";
/* CSS Document */

/* 기본 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+KR:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Myeongjo:wght@400;700&family=Noto+Serif+KR:wght@400;700&display=swap');

@font-face {
    font-family: 'GriunBPL';
    src: url('fonts/Griun_BPL-Rg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif; 
    margin: 0; 
    padding: 15; /* padding은 20px보다 0으로 두고 .wrap에서 여백을 잡는 게 정렬에 유리합니다 */
    color: #333; 
    -webkit-font-smoothing: antialiased; /* 맥과 아이폰에서 글자를 더 매끄럽게 만듭니다 */
}
.wrap { max-width: 1100px; margin: 0 auto; }

/* 상단 헤더 */
header { 
	display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; 
	position: -webkit-sticky; position: sticky; top: 0; z-index: 1001; background-color: #ffffff;
}
.nav-menu { display: flex; gap: 10px; }
.nav-item { text-align: center; text-decoration: none; color: #333; font-size: 14px; font-weight: bold; }
/* 메뉴 아이콘 높이를 살짝 키우거나 줄여서 높이를 맞추세요 */
.nav-item img { display: block; height: 40px; margin: 0 auto; } 
.nav-item-container {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: block;
	visibility: hidden;
	opacity: 0;
	
	position: absolute;
	top: 110%;
	left: 50%;
	transform: translateX(-50%);
	
	background-color: #ffffff;
	min-width: 200px;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
	list-style: none;
	padding: 10px 0;
	margin: 0;
	border-radius: 6px;
	z-index: 1000 !important;
	
	transition: all 0.3s ease;
}
.dropdown-content li a {
	color: #333;
	padding: 10px 20px;
	text-decoration: none;
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.3px;
	text-align: left;
}
.dropdown-content li a:hover {
	background-color: #f8f9fa;
	color: #3498db;
}
.nav-item-container:hover .dropdown-content {
	visibility: visible;
	opacity: 1;
	top: 100%;
}
/* 메인 슬로건 */
.slogan { text-align: center; font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin: 30px 0; }
.slogan span.art { color: #e74c3c; font-weight: 700; }
.slogan span.part { color: #3498db; font-weight: 700; }

/* 중앙 컨텐츠 영역 */
/* 1. 전체 레이아웃: 가로로 배치하다가 자리가 좁으면 아래로 내림 */
.main-container {
    display: flex;
    flex-wrap: wrap;      /* 핵심: 공간 부족 시 자동 줄바꿈 */
    gap: 15px;            /* 왼쪽과 오른쪽 사이의 간격 */
    justify-content: center; /* 화면 중앙 정렬 */
    align-items: flex-start;
    padding: 10px;
}

/* 2. 왼쪽 메인 그림 영역 */
.content-left {
    flex: 1 1 400px;      /* 최소 너비 600px 확보, 자리가 있으면 더 넓어짐 */
    max-width: 900px;     /* 너무 커져서 깨지는 것 방지 */
	margin-bottom: 0px;
}

.gate-link {
    position: absolute;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0); /* 평소엔 완전 투명 */
    transition: background-color 0.3s ease; /* 부드러운 변화 */
}

.gate-link:hover {
    background-color: rgba(0, 0, 0, 0.05); /* 마우스 올리면 아주 살짝 어두워짐 (농도 0.05) */
    /* 혹은 교수님 취향에 따라 살짝 밝게 하려면 rgba(255, 255, 255, 0.1)도 좋습니다! */
}

/* 3. 오른쪽 사이드바 (BPLzine & Poll) */
.sidebar-right {
    flex: 0 0 280px;      /* 너비를 300px로 고정 */
    background-color: #f9f9f9; /* 살짝 배경색을 주면 구분하기 좋습니다 */
    padding: 10px 15px;
    border-radius: 8px;
	margin-top: 0px;
}
.sidebar-right h3 {
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 1.1em;
}
.sidebar-right div {
	margin-top: 5px !important;
}
.sidebar-right div button {
	margin-top: 15px;
	width: 100%;
	font-size: 16px;
	padding: 10px;
	background-color: #800020;
	color: #ffffff;
	border: none;
	font-weight: bold;
	cursor: pointer;
	transition: backgroun 0.3s;
}
.sidebar-right div button:hover {
	background-color: #961E32;
}
/* 4. 이미지 반응형 설정 */
.main-container img {
    max-width: 100%;      /* 부모 너비를 넘지 않게 */
    height: auto;         /* 비율 유지 */
}

/* 5. 사이드바 내부 이미지 간격 조절 */
.zine-thumb {
    margin-bottom: 15px;
}
.zine-thumb:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	filter: brightness(1.05);
}

/* 하단 뉴스 */
.recent-news { margin-top: 0px; padding-top: 10px; border-top: 1px solid #eee; }
.news-list { list-style: none; padding: 0; font-size: 14px; line-height: 2; }

.sidebar-right h3,
.content-left h2,
.recent-news h3 {
	font-size: 1.2em !important;
	font-weight: bold;
	letter-spacing: -0.5px;
	margin-bottom: 15px;
	color: #333;
	border-left: 5px solid #800020;
	padding-left: 10px;
}
img {
	max-width: 100%;
	height: auto;
}
.wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}
/* ==========================================
   sub-navigation
   ========================================== */
.sub-nav {
	width: 100%;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
	margin-top: 0px;
	margin-bottom: 5px;
	padding: 0;
}
.sub-nav-inner {
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 20px;
	list-style: none;
	padding: 0;
}
.sub-nav-item {
	text-decoration: none;
	color: #999;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-bottom: 3px solid transparent;
	transition: all 0.2s ease;
	display: block;
}
.sub-nav-item:hover {
	color: #800020 !important;
	border-bottom: 3px solid #800020;
	font-weight: 600 !important;
}
.sub-nav-item.active {
	color: #800020 !important;
	background-color: #f8eeee;
	border-bottom: 2px solid #800020;
	font-weight: 600 !important;
	border-radius: 4px 4px 0 0;
}

figure {
	margin: 0;
	display: inline-block;
}
figure img {
	display: block;
	margin-bottom: 0;
}
figcaption {
    margin-top: 4px;
    font-weight: 700;
    font-style: italic;
    font-size: 0.82rem;
    color: #666;
    text-align: center;
    line-height: 1.3;
}

/* ==========================================
   RESEARCH CONTENT STYLES (Why, See, Decode...)
   ========================================== */

/* 1. 기본 본문 설정 */
.dw-content {
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    color: #31333F;
}

.dw-content p {
    margin-top: 0;
    margin-bottom: 15px; /* 교수님이 원하시던 적절한 여백 */
    text-align: justify;  /* 양쪽 정렬로 칼럼 느낌 극대화 */
}

/* 2. 소제목 (버건디 포인트) */
h3.dw-content {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    border-left: 6px solid #800000; /* 연구실 메인 버건디 */
    padding-left: 15px;
    margin: 40px 0 20px 0;
    color: #000;
}

/* 3. 인용구 (전문적인 느낌) */
.dw-quote {
	position: relative;
    overflow: hidden;
    font-family: 'Georgia', "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", serif;
    font-style: italic;
    color: #444; 
    border-left: 4px solid #800000; 
    padding: 15px 25px; 
    margin: 10px 0 5px 0 !important; 
    background-color: #fcf8f8; /* 아주 연한 버건디 빛 배경 */
    line-height: 1.6 !important;
}
.dw-quote p {
	margin: 0 !important;
	padding: 0 !important;
}
/* 4. 캡션 및 출처 */
.citation {
	display: block;
	text-align: right;
	margin-top: 5px;
    margin-bottom: 25px;
	background: none !important;
	border: none !important;
	font-size: 0.82rem;
    color: #999;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-style: normal;
}
.dw-quote .citation::before {
	content: "- "
}

.research-section {
	scroll-margin-top: 120px;
	padding-top: 10px;
	padding-bottom: 40px;
	border-bottom: 1px solid #f0f0f0;
}

.research-section:nth-of-type(even) {
    background-color: #fcfcfc; /* 거의 안 보이는 듯한 연한 회색 */
    max-width: 100%;           /* 배경은 화면 끝까지 채우되 */
}

/* 배경이 찰 때 본문 폭은 유지하기 위한 내부 가두기 */
.research-section:nth-of-type(even) .section-inner {
    max-width: 900px;
    margin: 0 auto;
}

.research-section:last-of-type {
	border-bottom: none;
}

/* 5. 인터랙티브 줌 (데이터 강조용) */
.bpl-zoom {
    display: inline-block;
    font-weight: 800;
    color: #800000;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
}

.bpl-zoom:hover {
    transform: scale(3.0); /* 3.0은 너무 커서 레이아웃이 깨질 수 있으니 1.5~2.0 추천 */
    color: #E74C3C; /* 호버 시에만 밝은 레드로 변신 */
}

/* Top 버튼 기본 스타일 */
#backToTop {
    display: none;        /* 처음에는 숨겨둠 (스크롤하면 나타남) */
    position: fixed;      /* 화면에 고정 */
    bottom: 30px;         /* 바닥에서 30px */
    right: 30px;          /* 오른쪽에서 30px */
    z-index: 1002;         /* 최상단에 배치 */
	background: none !important;
    border: none;
	cursor: pointer;
	padding: 0 !important;
	transition: all 0.3s ease;
}

#backToTop .rocket-img {
	width: 100px;
	height: auto;
	content: url("images/top button_normal.png");
	transition: transform 0.3s ease, filter 0.3s ease;
	display: block;
}

/* 마우스 호버 시 연구실 테마색(버건디)으로 변경 */
#backToTop:hover .rocket-img {
    content: url("images/top button_hover.png");
    transform: translateY(-10px); /* 살짝 위로 떠오르는 효과 */
	filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

.section-h3 {
    font-size: 1.25rem;       /* 너무 크지 않은 적당한 크기 */
    color: #333;              /* 진한 회색 */
    margin-top: 5px;         /* 위쪽 섹션과의 간격 확보 */
    margin-bottom: 5px;      /* 아래 리스트와의 간격 */
    font-weight: 700;         /* 굵게 */
    
    /* [포인트] 왼쪽에 버건디색 세로 막대를 세웁니다 */
    border-left: 5px solid #800020; 
    padding-left: 12px;       /* 막대와 글자 사이 간격 */
    
    /* 자간 조절 (아까 배우신 스킬!) */
    letter-spacing: -0.5px;
}

.whisper-text {
    color: #999; /* 기본적으로 연한 회색 */
    filter: blur(2px); /* 글자를 흐릿하게 */
    transition: all 0.5s ease; /* 부드러운 변화 */
    cursor: help; /* 마우스를 올리면 물음표가 뜨게 함 */
    display: inline-block;
}

.whisper-text:hover {
    color: #444; /* 마우스 올리면 진해짐 */
    filter: blur(0); /* 흐림 효과 제거 */
}

/* Researcher Card Layout */
.researcher-card {
    display: flex;
	flex-direction: column;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* 상단: 사진 + 얀구 정보 */
.card-header-flex {
	display: flex;
	border-bottom: 1px solid #f5f5f5;
}
/* 프로필 (고정폭) */
.card-side-profile {
    flex: 0 0 140px;
    background: #fcfcfc;
    padding: 10px 5px;
    text-align: center;
    border-right: 1px solid #f1f1f1;
}

.card-side-profile img {
    width: 90px;
    height: 90px;
    object-fit: contain;
	border-radius: 50%; /* 캐리커처를 원형으로 강조 */
    background: #fff;
    border: 2px solid #eee;
	margin: 0 auto 5px auto;
}

.card-footer-pubs {
    padding: 20px 25px;
	background: #ffffff;
}

.name-kor { font-size: 1.1rem; font-weight: 700; color: #333; display: block; margin-bottom: -4px; }
.name-eng { font-size: 0.8rem; color: #777; display: block; margin-top: 0; margin-bottom: 3px; }
.role-tag { 
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #E74C3C; /* 버건디/레드 포인트 */
    border-radius: 4px;
}

/* 우측: 상세 정보 */
.card-main-info {
    flex: 1;
    padding: 10px 20px;
}

.info-group { margin-bottom: 15px; }
.info-label { font-size: 0.7rem; font-weight: 800; color: #bbb; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.info-text { font-size: 0.9rem; color: #444; font-weight: 500; line-height: 1.4; margin-bottom: 12px; }

/* 하단: Publications (카드의 전체 폭 사용) */
.pubs-title {
	font-size: 0.85rem;
	font-weight: 800;
	color: #800020;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.pub-list {
	font-size: 0.95rem;
	color: #333;
	line-height: 1.4;
	padding-left: 25px;
	margin: 0;
	list-style-type: decimal;
}

.pub-list li {
	margin-bottom: 8px;
	padding-left: 5px;
}

/* Alumni 전용: 현재 직장(Current) 스타일 */
.affil-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee; /* 구분선 */
}

.affil-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #2E86C1; /* 파란색 계열 라벨 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.affil-text {
    font-size: 0.95rem;
    color: #21618C; /* 진한 파란색 텍스트 */
    font-weight: 700;
    line-height: 1.3;
}
/* publication 관련 스타일 */
/* 1. 탭 버튼 컨테이너 */
.pub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
}

/* 2. 개별 탭 버튼 */
.tab-btn {
    padding: 10px 25px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: #bbb;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* 하단 선과 겹치게 */
}

/* 3. 활성화된 탭 (Active) */
.tab-btn.active {
    color: #3498db; /* 교수님 캡처본의 파란색 */
    border-bottom: 3px solid #3498db;
}

/* 4. 컨텐츠 영역 제어 */
.tab-content { display: none; } /* 기본은 숨김 */
.tab-content.active { display: block; } /* 선택된 것만 노출 */

/* ==========================================
   PUBLICATIONS FRAGMENT STYLES (Fetch용)
   ========================================== */

/* 연도별 헤더 박스 */
.pub-year-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 아래쪽 정렬 */
    flex-wrap: wrap;       /* [중요] 연도가 많아지면 자동으로 줄바꿈 */
    gap: 10px;             /* 줄바꿈 시 위아래 간격 */
    margin-top: 45px;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-bottom: 2px solid #2E86C1; /* 캡처본의 메인 블루 */
    background-color: #fcfcfc;
}

/* 왼쪽 큰 연도 텍스트 */
.pub-year-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2E86C1;
    line-height: 1;
}

/* 오른쪽 연도 내비게이션 바 */
.pub-year-nav {
    flex: 1;               /* 남은 공간 차지 */
    min-width: 250px;      /* 최소 폭 확보 */
    text-align: right;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.8;      /* 줄바꿈 시 간격 확보 */
    word-break: keep-all;  /* 단어 단위 줄바꿈 */
}

/* 내비게이션 링크 스타일 */
.year-nav-link {
    text-decoration: none;
    color: #bbb;
    font-weight: 500;
    padding: 0 2px;
    transition: color 0.2s ease;
}

.year-nav-link:hover {
    color: #2E86C1;
    text-decoration: underline;
}

/* 논문 개별 항목 */
.pub-item {
    margin-bottom: 18px;
    padding-left: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

/* 논문 번호 강조 */
.pub-num {
    color: #888;
    font-weight: 700;
    margin-right: 10px;
}

/* DOI 링크 강조 */
.doi-link {
    text-decoration: none;
    color: #2E86C1;
    font-weight: 600;
    margin-left: 5px;
}
.doi-link:hover {
    text-decoration: underline;
}

.bpl-zine-container, 
.bpl-zine-container .zine-title, 
.bpl-zine-container .zine-vol {
    font-family: 'GriunBPL', sans-serif !important; /* 이 영역 안에서만 BPL체 사용 */
}

/* 제목 크기 및 미세 조정 */
.zine-title {
    font-size: 1.3rem;
    color: #333;
    line-height: 1.2;
    margin-top: 12px;
    letter-spacing: -0.03em; /* 폰트 특성에 맞춰 자간 살짝 조절 */
}

.zine-vol {
    font-size: 0.9rem;
    color: #800020;
    margin-bottom: 2px;
}

/* --- BPLzine 폰트 배포 공용 스타일 --- */
.font-dist-area { 
    border-top: 1px solid #f0f0f0; 
    padding-top: 30px; 
    font-family: sans-serif; 
    font-size: 0.95rem; 
    color: #888; 
    margin-top: 40px; 
    text-align: center; /* 중앙 정렬 추가 */
}

.griun-highlight { 
    font-family: 'GriunBPL', sans-serif !important; 
    color: #333; 
    font-size: 1.1rem; 
    margin-right: 5px; 
}

.download-links { 
    margin-top: 15px; 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
}

.btn-download { 
    text-decoration: none; 
    color: #555; 
    border: 1px solid #ddd; 
    padding: 6px 15px; 
    border-radius: 20px; 
    font-size: 0.85rem; 
    transition: all 0.3s; 
    background: #fff; 
}

.btn-download:hover { 
    background: #800020; 
    color: #fff; 
    border-color: #800020; 
}

@media (max-width: 768px) {
    header {
        flex-direction: row !important;
		justify-content: space-between !important;
        align-items: center;
    }
    .nav-menu {
        display: flex;
        justify-content: flex-end;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
        gap: 10px; /* 아이콘 사이 간격 */
    }
    /* 여기서 기본적인 레이아웃 배치를 잡아줍니다 */
	.pi-profile-box {
        flex-direction: column !important; /* 가로에서 세로로 변경 */
        align-items: center !important;    /* 중앙 정렬 */
    }

    .pi-photo-col {
        flex: 0 0 auto !important; /* 고정 너비(160px) 해제 */
        width: 100% !important;    /* 너비 전체 사용 */
        max-width: 200px;          /* 사진이 너무 커지지 않게 제한 */
        margin-bottom: 20px;       /* 사진과 글 사이 간격 */
    }

    .pi-info-col {
        width: 100% !important;
        text-align: center;        /* 텍스트 중앙 정렬 */
        padding-left: 0 !important; /* 아까 준 20px 여백 제거 */
    }

    .pi-affiliation {
        padding-left: 0 !important; /* 소속 정보 들여쓰기 해제 */
    }

	/* 일반 본문의 figure와 이미지 설정 */
    figure {
        margin: 0 0 20px 0 !important; /* 바깥 여백 초기화 및 아래 간격 확보 */
        width: 100% !important;        /* 한 줄을 통째로 차지 */
        text-align: center !important; /* 이미지와 캡션을 중앙으로 */
    }

    figure img {
        float: none !important;        /* [핵심] 글자를 옆으로 흐르게 하는 성질 제거 */
        display: block !important;     /* 이미지를 한 줄 독점 덩어리로 만듦 */
        margin: 0 auto 10px auto !important; /* 이미지 자체를 중앙 정렬 */
        max-width: 100% !important;    /* 화면 너비를 넘지 않게 */
        height: auto !important;
    }

    figcaption {
        text-align: center !important; /* 사진 설명(Source...)도 중앙 정렬 */
        font-size: 0.85rem;            /* 모바일에선 설명을 조금 작게 */
    }	

	.card-header-flex {
        flex-direction: column; /* 가로 배치를 세로로 전환 */
    }

    .card-side-profile {
        width: 100%;            /* 모바일에선 너비 전체 사용 */
        flex: none;
        border-right: none;
        border-bottom: 1px solid #f1f1f1;
        padding: 20px;
        display: flex;          /* 사진과 이름 정보를 가로로 배치 (모바일 공간 절약) */
        align-items: center;
        gap: 15px;
        text-align: left;
    }

    .card-side-profile img {
        flex: 0 0 80px;
		width: 80px;            /* 모바일은 조금 작게 */
        height: 80px;
        margin-bottom: 0;
    }

    .card-main-info {
        padding: 20px;
    }
	
	.name-info {
		flex: 1;
		min-width: 0;
	}
	
	/* [추가] 논문 연도 헤더 모바일/태블릿 대응 */
    .pub-year-wrapper {
        flex-direction: column; /* 가로에서 세로로 변경 */
        align-items: flex-start; /* 왼쪽 정렬 */
        padding: 15px;
    }

    .pub-year-nav {
        text-align: left; /* 네비게이션도 왼쪽 정렬 */
        min-width: 100%;
        margin-top: 10px; /* 연도 제목과의 간격 */
        padding-top: 10px;
        border-top: 1px dashed #eee; /* 살짝 구분선 */
    }
}
@media (max-width: 600px) {
    header {
        flex-direction: row !important;      /* 위아래가 아닌 가로 정렬 */
        justify-content: space-between !important; /* 로고-메뉴 양끝 배치 */
        padding: 5px 10px !important;        /* 세로 여백 최소화 */
        align-items: center !important;
    }
	
	.sub-nav {
		position: static !important;
		border-bottom: 1px solid #eee;
		background-color: #fafafa;
	}
	/* 공통 설정: 텍스트 숨기고 박스 크기 잡기 */
    .nav-item img { display: none !important; }
    
    .nav-item {
        display: inline-block !important;
        width: 45px !important;
        height: 45px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0 !important;
    }

	#backToTop {
		bottom: 20px;
		right: 15px;
	}
	#backToTop .rocket-img {
		width: 100px;
		content: url("images/top button_hover.png") !important;
		display: block;
	}
	#backToTop:hover .rocket-img {
		content: url("images/top button_hover.png") !important;
		transform: none !important;
		filter: none !important;
	}
	
    /* ID를 이용한 1:1 매칭 (절대 안 꼬입니다) */
    #m1 { background-image: url('images/menu_res_icon.png') !important; }
    #m2 { background-image: url('images/menu_family_icon.png') !important; }
    #m3 { background-image: url('images/menu_lab_icon.png') !important; }
    #m4 { background-image: url('images/menu_footprint_icon.png') !important; }
    #m5 { background-image: url('images/menu_messzine_icon.png') !important; }
}