182 lines
4.3 KiB
CSS
182 lines
4.3 KiB
CSS
@charset "utf-8";
|
|
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
|
|
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
|
|
/* Copyright Ⓒ Hanmaceng Corp. All Rights Reserved. */
|
|
/* 기술개발센터 김건우A 연구원 b25013@hanmaceng.co.kr */
|
|
|
|
/* 버전 히스토리 */
|
|
/* 2025-03-17 : -- root.css 정의 */
|
|
/* 2025-03-19 : -- "root.css" → "system.css" 으로 이름 변경 */
|
|
/* 2025-03-20 : -- '컴포넌트 정의'부분 수정 */
|
|
/* 2025-03-20 : -- 'header'부분 수정 */
|
|
/* 2025-03-20 : -- '컴포넌트 정의' - 스크롤바 추가 */
|
|
/* 2025-03-25 : -- 'header'부분 수정 */
|
|
/* 2025-03-28 : -- '프라이머리컬러스케일' 추가 */
|
|
/* 2025-03-28 : -- 'header', 'footer' 리뉴얼 */
|
|
/* 2025-03-31 : -- 'main'부분 수정 */
|
|
/* 2025-03-31 : -- 'h2'정의 추가 */
|
|
/* 2025-04-15 : -- 전면 리뉴얼 */
|
|
|
|
/* -- ↓ -- style -- ↓ -- */
|
|
|
|
/* 색상 및 시스템 정의 ===== ===== ===== ===== ===== */
|
|
:root {
|
|
|
|
--color-red: #F21D0D;
|
|
--color-pink: #E8175E;
|
|
--color-magenta: #B92ED1;
|
|
--color-purple: #6D3DC2;
|
|
--color-navy: #4255bd;
|
|
--color-blue: #0D8DF2;
|
|
--color-cyan: #03AEFC;
|
|
--color-green: #4DB251;
|
|
--color-yellow: #FFBF00;
|
|
--color-orange: #FF9800;
|
|
--color-dahong: #FF3D00;
|
|
--color-brown: #A0705F;
|
|
--color-iron: #7F7F7F;
|
|
--color-steel: #688897;
|
|
|
|
--color-red-light: #FEE9E7;
|
|
--color-pink-light: #FDE8EF;
|
|
--color-magenta-light: #F8EBFB;
|
|
--color-purple-light: #F1ECF9;
|
|
--color-navy-light: #EDEEF9;
|
|
--color-blue-light: #E7F4FE;
|
|
--color-cyan-light: #E6F7FF;
|
|
--color-green-light: #EEF8EE;
|
|
--color-yellow-light: #FFF9E6;
|
|
--color-orange-light: #FFF5E6;
|
|
--color-dahong-light: #FFECE6;
|
|
--color-brown-light: #F6F1EF;
|
|
--color-iron-light: #F3F3F3;
|
|
--color-steel-light: #F0F4F5;
|
|
|
|
--color-red-medium: #FAA59E;
|
|
--color-pink-medium: #F6A2BF;
|
|
--color-magenta-medium: #E3ABEC;
|
|
--color-purple-medium: #C5B1E7;
|
|
--color-navy-medium: #B3BBE5;
|
|
--color-blue-medium: #9ED1FA;
|
|
--color-cyan-medium: #9ADFFE;
|
|
--color-green-medium: #B8E0B9;
|
|
--color-yellow-medium: #FFE599;
|
|
--color-orange-medium: #FFD699;
|
|
--color-dahong-medium: #FFB199;
|
|
--color-brown-medium: #D9C6BF;
|
|
--color-iron-medium: #CCCCCC;
|
|
--color-steel-medium: #C3CFD5;
|
|
|
|
/* 프라이머리컬러스케일 */
|
|
--primary-lv-0: #E9EEED;
|
|
--primary-lv-1: #D2DCDB;
|
|
--primary-lv-2: #A5B9B6;
|
|
--primary-lv-3: #789792;
|
|
--primary-lv-4: #4B746D;
|
|
--primary-lv-5: #35635C;
|
|
--primary-lv-6: #1E5149;
|
|
--primary-lv-7: #1B443D;
|
|
--primary-lv-8: #193833;
|
|
--primary-lv-9: #162A27;
|
|
}
|
|
|
|
|
|
/* 컴포넌트 정의 ===== ===== ===== ===== ===== */
|
|
/* 폰트 고정값 */
|
|
|
|
*, img {
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
html {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@media screen and (max-width: 1920px) {
|
|
html {
|
|
font-size: 0.8333333vw;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
html {
|
|
font-size: 1.3333333vw;
|
|
}
|
|
.main__list-item {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
padding: 0.5rem;
|
|
}
|
|
.main__list-item .master {
|
|
padding-left: 1.5rem;
|
|
}
|
|
.main__list-item-label {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Pretendard';
|
|
color: #111;
|
|
}
|
|
|
|
/* 한줄 강조 emphasize-20px */
|
|
h1 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 프로젝트 제목 project-title-16px */
|
|
h2 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 본문 제목 title-14px */
|
|
h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 본문 body-14px */
|
|
h4 {
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 알약형 capsule-12px */
|
|
h5 {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 소본문 body-12px */
|
|
h6 {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 주석 caption */
|
|
p {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
|
|
color: #777;
|
|
} |