commit 21b6332c9c3d52f223e0e57d2b5c7ff633469256 Author: 송대일 Date: Fri Jan 30 17:20:52 2026 +0900 commit diff --git a/index.php b/index.php new file mode 100644 index 0000000..3fe7bac --- /dev/null +++ b/index.php @@ -0,0 +1,36 @@ + + Require all denied + + +# -------------------------------------------------- +# PHP 설정 (가능한 경우) +# -------------------------------------------------- +php_flag display_errors Off diff --git a/kngil/auth/oauth-callback.php b/kngil/auth/oauth-callback.php new file mode 100644 index 0000000..dda59c3 --- /dev/null +++ b/kngil/auth/oauth-callback.php @@ -0,0 +1,39 @@ + + + + + +로그인 처리중... + + + + + diff --git a/kngil/bbs/.htaccess b/kngil/bbs/.htaccess new file mode 100644 index 0000000..45552cb --- /dev/null +++ b/kngil/bbs/.htaccess @@ -0,0 +1 @@ +Options -Indexes \ No newline at end of file diff --git a/kngil/bbs/adm.php b/kngil/bbs/adm.php new file mode 100644 index 0000000..771e133 --- /dev/null +++ b/kngil/bbs/adm.php @@ -0,0 +1,165 @@ + 'error', + 'message' => '로그인이 필요합니다.' + ]); + exit; +} + +$auth = $_SESSION['login']['auth_bc'] ?? ''; + +if (!in_array($auth, ['BS100100', 'BS100200'])) { + echo json_encode([ + 'status' => 'error', + 'message' => '접근 권한이 없습니다.' + ]); + exit; +} + +/* ================================================= + 공통 입력 +================================================= */ +$input = json_decode(file_get_contents('php://input'), true) ?? []; +$action = $_GET['action'] ?? $input['action'] ?? 'list'; + +try { + + switch ($action) { + + case 'user_list': + + // 🔥 상단에서 선택한 회사 + $target_member_id = $_GET['member_id'] ?? ''; + + if (!$target_member_id) { + throw new Exception('member_id 누락'); + } + + $stmt = $pdo->prepare(" + SELECT * + FROM kngil.sp_users_r( + :member_id, + '', + '', + '' + ) + "); + + $stmt->execute([ + ':member_id' => $target_member_id + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + foreach ($rows as $i => &$r) { + $r['recid'] = $i + 1; + } + + echo json_encode([ + 'status' => 'success', + 'records' => $rows + ]); + break; + + /* ================================================= + 1. 통합 회원 목록 조회 + - 모든 회사(member) 조회 + ================================================= */ + case 'list': + + $sql = "SELECT * FROM kngil.sp_member_sys_r('', '', '');"; + $rows = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC); + + $i = 1; + foreach ($rows as &$r) { + $r['recid'] = $i++; + } + + echo json_encode([ + 'status' => 'success', + 'records' => $rows + ]); + break; + + /* ================================================= + 2. 회원 정보 수정 (회사 단위) + - tel / email / 사업자번호 / 회사명 + ================================================= */ + case 'save': + + $updates = $input['updates'] ?? []; + if (!$updates) { + throw new Exception('저장할 데이터가 없습니다.'); + } + + $pdo->beginTransaction(); + + $stmtU = $pdo->prepare(" + SELECT kngil.sp_member_sys_u( + :member_id::varchar, + :tel_no::varchar, + :email::varchar, + :bs_no::varchar, + :co_nm::varchar, + :mid::varchar + ) AS result + "); + + foreach ($updates as $r) { + + if (empty($r['member_id'])) { + throw new Exception('member_id 누락'); + } + + $stmtU->execute([ + ':member_id' => $r['member_id'], + ':tel_no' => $r['tel_no'] ?? null, + ':email' => $r['email'] ?? null, + ':bs_no' => $r['bs_no'] ?? null, + ':co_nm' => $r['co_nm'] ?? null, + ':mid' => $_SESSION['login']['user_id'] + ]); + + $result = $stmtU->fetchColumn(); + + if (strpos($result, 'ERROR') === 0) { + throw new Exception($result); + } + } + + $pdo->commit(); + + echo json_encode([ + 'status' => 'success' + ]); + break; + + default: + throw new Exception('Invalid action'); + } + +} catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} \ No newline at end of file diff --git a/kngil/bbs/adm_comp copy.php b/kngil/bbs/adm_comp copy.php new file mode 100644 index 0000000..9e73e69 --- /dev/null +++ b/kngil/bbs/adm_comp copy.php @@ -0,0 +1,261 @@ +prepare(" + SELECT * + FROM kngil.fn_base_cd(:main_cd) + "); + $stmt->execute([ + ':main_cd' => $main_cd + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + echo json_encode([ + 'status' => 'success', + 'items' => $rows // [{id, text}] + ]); + break; + + + /* ========================= + 1. 사용자 목록 조회 + ========================= */ + case 'list': + + $schType = $_GET['sch_type'] ?? ''; + $schKeyword = $_GET['sch_keyword'] ?? ''; + $schUseYn = $_GET['sch_use_yn'] ?? ''; + + // 기본값 + $sch_id = ''; + $sch_nm = ''; + $sch_dept = ''; + + if ($schKeyword !== '') { + switch ($schType) { + case 'id': + $sch_id = $schKeyword; + break; + case 'name': + $sch_nm = $schKeyword; + break; + case 'dept': + $sch_dept = $schKeyword; + break; + + default: // 전체 + $sch_id = $schKeyword; + $sch_nm = $schKeyword; + $sch_dept = $schKeyword; + } + } + + $sql = " + SELECT * + FROM kngil.sp_users_r( + :member_id, + :user_nm, + :dept_nm, + :use_yn + ); + "; + + $stmt = $pdo->prepare($sql); + $stmt->execute([ + ':member_id' => $member_id, + ':user_nm' => $_GET['user_nm'] ?? '', + ':dept_nm' => $_GET['dept_nm'] ?? '', + ':use_yn' => $_GET['use_yn'] ?? '' + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + $i = 1; + foreach ($rows as &$r) { + $r['recid'] = $i++; + } + + echo json_encode([ + 'status' => 'success', + 'member_id' => $member_id, + 'records' => $rows + ]); + break; + + + /* ========================= + 2. 사용자 저장 + ========================= */ + case 'save': + + $inserts = $input['inserts'] ?? []; + $updates = $input['updates'] ?? []; + + if (!$inserts && !$updates) { + throw new Exception('저장할 데이터가 없습니다.'); + } + + $pdo->beginTransaction(); + + // INSERT + if ($inserts) { + $stmtI = $pdo->prepare(" + SELECT kngil.sp_users_i( + :member_id,:user_id,:user_pw,:user_nm,:dept_nm, + :posit_nm,:tel_no,:email,:auth_bc,:use_yn,:rmks,:cid + ) + "); + + foreach ($inserts as $r) { + $stmtI->execute([ + ':member_id' => $member_id, + ':user_id' => $r['user_id'], + ':user_pw' => $r['user_pw'] ?? '0000', + ':user_nm' => $r['user_nm'], + ':dept_nm' => $r['dept_nm'], + ':posit_nm' => $r['posit_nm'] ?? '', + ':tel_no' => $r['tel_no'], + ':email' => $r['email'], + ':auth_bc' => $r['auth_bc'], + ':use_yn' => $r['use_yn'], + ':rmks' => $r['rmks'] ?? '', + ':cid' => $r['cid'] ?? 'SYSTEM' + ]); + } + } + + // UPDATE + if ($updates) { + $stmtU = $pdo->prepare(" + SELECT kngil.sp_users_u( + :member_id,:user_id,:user_pw,:user_nm,:dept_nm, + :posit_nm,:tel_no,:email,:auth_bc,:use_yn,:rmks,:mid + ) + "); + + foreach ($updates as $r) { + $stmtU->execute([ + ':member_id' => $member_id, + ':user_id' => $r['user_id'], + ':user_pw' => null, + ':user_nm' => $r['user_nm'], + ':dept_nm' => $r['dept_nm'], + ':posit_nm' => $r['posit_nm'] ?? '', + ':tel_no' => $r['tel_no'], + ':email' => $r['email'], + ':auth_bc' => $r['auth_bc'], + ':use_yn' => $r['use_yn'], + ':rmks' => $r['rmks'] ?? '', + ':mid' => $r['mid'] ?? 'SYSTEM' + ]); + } + } + + $pdo->commit(); + echo json_encode(['status'=>'success']); + break; + + + + /* ========================= + 3. 사용자 삭제 (비활성) + ========================= */ + case 'delete': + + $ids = $input['ids'] ?? []; + if (!$ids) throw new Exception('삭제 대상이 없습니다.'); + + $sql = "SELECT kngil.sp_users_d(:member_id, :user_id)"; + $stmt = $pdo->prepare($sql); + + foreach ($ids as $uid) { + $stmt->execute([ + ':member_id' => $member_id, + ':user_id' => $uid + ]); + } + + echo json_encode(['status'=>'success']); + break; + /* ========================= + 4. 회원 총 구매 면적 조회 + ========================= */ + case 'total_area': + + $sql = " + SELECT COALESCE(SUM(sum_area), 0) AS total_area + FROM kngil.sp_buy_item_history_r(:member_id, '', NULL, NULL) + "; + + $stmt = $pdo->prepare($sql); + $stmt->execute([ + ':member_id' => $member_id + ]); + + $row = $stmt->fetch(PDO::FETCH_ASSOC); + + echo json_encode([ + 'status' => 'success', + 'member_id' => $member_id, + 'total_area' => (int)$row['total_area'] + ]); + break; + + default: + throw new Exception('잘못된 요청'); + } + +} catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + http_response_code(500); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} \ No newline at end of file diff --git a/kngil/bbs/adm_comp.php b/kngil/bbs/adm_comp.php new file mode 100644 index 0000000..29659ea --- /dev/null +++ b/kngil/bbs/adm_comp.php @@ -0,0 +1,393 @@ +prepare(" + SELECT * + FROM kngil.fn_base_cd(:main_cd) + "); + $stmt->execute([':main_cd' => $main_cd]); + + echo json_encode([ + 'status' => 'success', + 'items' => $stmt->fetchAll(PDO::FETCH_ASSOC) + ]); + break; + + /* ========================= + 1. 사용자 목록 조회 + ========================= */ + case 'list': + + // 조회 대상 member_id 결정 + $target_member_id = $member_id; // 기본: 세션 기준 + + // 관리자 / 개발자만 GET member_id 허용 + if ($isAdmin && !empty($_GET['member_id'])) { + $target_member_id = $_GET['member_id']; + } + + $stmt = $pdo->prepare(" + SELECT * + FROM kngil.sp_users_r( + :member_id, + :user_nm, + :dept_nm, + :use_yn + ) + "); + + $stmt->execute([ + ':member_id' => $target_member_id, + ':user_nm' => $_GET['user_nm'] ?? '', + ':dept_nm' => $_GET['dept_nm'] ?? '', + ':use_yn' => $_GET['use_yn'] ?? '' + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + foreach ($rows as $i => &$r) { + $r['recid'] = $i + 1; + } + + echo json_encode([ + 'status' => 'success', + 'member_id' => $target_member_id, + 'records' => $rows + ]); + break; + + /* ========================= + 2. 사용자 저장 + ========================= */ + case 'save': + + if (!$isAdmin) { + throw new Exception('저장 권한이 없습니다.'); + } + + $inserts = $input['inserts'] ?? []; + $updates = $input['updates'] ?? []; + + if (!$inserts && !$updates) { + throw new Exception('저장할 데이터가 없습니다.'); + } + + $pdo->beginTransaction(); + + /* ---------- INSERT ---------- */ + if ($inserts) { + + $stmtI = $pdo->prepare(" + SELECT kngil.sp_users_i( + :member_id,:user_id,:user_pw,:user_nm,:dept_nm, + :posit_nm,:tel_no,:email,:auth_bc,:use_yn,:rmks,:cid + ) + "); + + foreach ($inserts as $r) { + $stmtI->execute([ + ':member_id' => $member_id, + ':user_id' => $r['user_id'], + ':user_pw' => $r['user_pw'] ?? '0000', + ':user_nm' => $r['user_nm'], + ':dept_nm' => $r['dept_nm'], + ':posit_nm' => $r['posit_nm'] ?? '', + ':tel_no' => $r['tel_no'], + ':email' => $r['email'], + ':auth_bc' => is_array($r['auth_bc']) + ? ($r['auth_bc']['id'] ?? '') + : $r['auth_bc'], + ':use_yn' => is_array($r['use_yn']) + ? ($r['use_yn']['id'] ?? 'Y') + : $r['use_yn'], + ':rmks' => $r['rmks'] ?? '', + ':cid' => $user_id + ]); + } + } + + /* ---------- UPDATE ---------- */ + if ($updates) { + + $stmtChk = $pdo->prepare(" + SELECT 1 + FROM kngil.users + WHERE member_id = :member_id + AND user_id = :user_id + "); + + $stmtU = $pdo->prepare(" + SELECT kngil.sp_users_u( + :member_id,:user_id,NULL,:user_nm,:dept_nm, + :posit_nm,:tel_no,:email,:auth_bc,:use_yn,:rmks,:mid + ) + "); + + foreach ($updates as $r) { + + // 회사 탈출 방지 + $stmtChk->execute([ + ':member_id' => $member_id, + ':user_id' => $r['user_id'] + ]); + + if (!$stmtChk->fetchColumn()) { + throw new Exception('권한 없는 사용자 수정 시도'); + } + + $stmtU->execute([ + ':member_id' => $member_id, + ':user_id' => $r['user_id'], + ':user_nm' => $r['user_nm'], + ':dept_nm' => $r['dept_nm'], + ':posit_nm' => $r['posit_nm'] ?? '', + ':tel_no' => $r['tel_no'], + ':email' => $r['email'], + ':auth_bc' => $r['auth_bc'], + ':use_yn' => $r['use_yn'], + ':rmks' => $r['rmks'] ?? '', + ':mid' => $user_id + ]); + } + } + + $pdo->commit(); + echo json_encode(['status' => 'success']); + break; + + /* ========================= + 3. 사용자 삭제 (비활성) + ========================= */ + case 'delete': + + if (!$isAdmin) { + throw new Exception('삭제 권한이 없습니다.'); + } + + $ids = $input['ids'] ?? []; + if (!$ids) { + throw new Exception('삭제 대상이 없습니다.'); + } + + $stmt = $pdo->prepare(" + SELECT kngil.sp_users_d(:member_id, :user_id) + "); + + foreach ($ids as $uid) { + $stmt->execute([ + ':member_id' => $member_id, + ':user_id' => $uid + ]); + } + + echo json_encode(['status' => 'success']); + break; + + /* ========================= + 4. 회원 총 구매 면적 + ========================= */ + case 'total_area': + + $stmt = $pdo->prepare(" + SELECT COALESCE(SUM(sum_area),0) + FROM kngil.sp_buy_item_history_r(:member_id, '', NULL, NULL) + "); + $stmt->execute([':member_id' => $member_id]); + + echo json_encode([ + 'status' => 'success', + 'total_area' => (int)$stmt->fetchColumn() + ]); + break; + + /* ========================= + 5. CSV 일괄 계정생성 + ========================= */ + + + case 'bulk_create': + + if (!$isAdmin) { + throw new Exception('일괄 생성 권한이 없습니다.'); + } + + $target_member_id = $input['member_id'] ?? ''; + $csv_url = $input['csv_url'] ?? ''; + + if (!$target_member_id || !$csv_url) { + throw new Exception('필수 파라미터 누락'); + } + + // CSV 다운로드 + $csv = @file_get_contents($csv_url); + if ($csv === false) { + throw new Exception('CSV 파일을 불러올 수 없습니다.'); + } + + $lines = array_map('str_getcsv', explode("\n", trim($csv))); + + // 헤더 제거 (첫 줄) + array_shift($lines); + + $success = 0; + $fail = 0; + $errors = []; + + $stmt = $pdo->prepare(" + SELECT kngil.sp_users_i( + :member_id,:user_id,:user_pw,:user_nm,:dept_nm, + '',:tel_no,:email,:auth_bc,:use_yn,'', + :cid + ) + "); + + foreach ($lines as $i => $row) { + + if (count($row) < 8) { + $fail++; + $errors[] = "라인 ".($i+2).": 컬럼 수 부족"; + continue; + } + + [ + $user_id, + $user_pw, + $user_nm, + $tel_no, + $email, + $dept_nm, + $use_txt, + $auth_txt + ] = array_map('trim', $row); + + /* ---------- 값 정규화 ---------- */ + + $use_yn = 'Y'; // 항상 사용 + $auth_bc = 'BS100500'; // 일반 권한 + + /* ---------- 중복 체크 ---------- */ + + // ID 중복 (대소문자 무시) + $chk = $pdo->prepare(" + SELECT 1 FROM kngil.users + WHERE LOWER(user_id) = LOWER(:uid) + "); + $chk->execute([':uid' => $user_id]); + if ($chk->fetchColumn()) { + $fail++; + $errors[] = "라인 ".($i+2).": ID 중복 ($user_id)"; + continue; + } + + // 전화번호 중복 + $chk = $pdo->prepare(" + SELECT 1 FROM kngil.users + WHERE tel_no = :tel + "); + $chk->execute([':tel' => $tel_no]); + if ($chk->fetchColumn()) { + $fail++; + $errors[] = "라인 ".($i+2).": 연락처 중복 ($tel_no)"; + continue; + } + + /* ---------- 프로시저 호출 ---------- */ + try { + $stmt->execute([ + ':member_id' => $target_member_id, + ':user_id' => $user_id, + ':user_pw' => $user_pw ?: '0000', + ':user_nm' => $user_nm, + ':dept_nm' => $dept_nm, + ':tel_no' => $tel_no, + ':email' => $email, + ':auth_bc' => $auth_bc, + ':use_yn' => $use_yn, + ':cid' => $user_id // 생성자 + ]); + $result = $stmt->fetchColumn(); // ⭐ 필수 + + if ($result !== 'SUCCESS') { + $fail++; + $errors[] = "라인 ".($i+2).": ".$result; + continue; + } + + $success++; + + } catch (Exception $e) { + $fail++; + $errors[] = "라인 ".($i+2).": ".$e->getMessage(); + } + } + + echo json_encode([ + 'status' => 'success', + 'success_cnt' => $success, + 'fail_cnt' => $fail, + 'errors' => $errors + ]); + break; + + + default: + throw new Exception('잘못된 요청'); + } + +} catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + http_response_code(403); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} diff --git a/kngil/bbs/adm_faq_popup.php b/kngil/bbs/adm_faq_popup.php new file mode 100644 index 0000000..772474d --- /dev/null +++ b/kngil/bbs/adm_faq_popup.php @@ -0,0 +1,27 @@ +prepare("SELECT * FROM kngil.sp_fa_comments_r()"); + $stmt->execute(); + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + // 3. W2UI를 위해 각 행에 'recid' 필드 강제 주입 + $records = []; + foreach ($rows as $row) { + $row['recid'] = $row['fa_id']; // 상품코드를 고유 키로 지정 + $records[] = $row; + } + + // 4. 순수 JSON만 출력 (다른 echo나 공백이 섞이면 에러 발생) + echo json_encode($records); + +} catch (PDOException $e) { + // 에러 발생 시 그리드가 이해할 수 있게 JSON으로 출력 + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/adm_faq_popup_delete.php b/kngil/bbs/adm_faq_popup_delete.php new file mode 100644 index 0000000..24edef2 --- /dev/null +++ b/kngil/bbs/adm_faq_popup_delete.php @@ -0,0 +1,58 @@ +beginTransaction(); + + // 3. 삭제 실행 + $stmt = $pdo->prepare("SELECT kngil.sp_fa_comments_d(:fa_id)"); + + foreach ($ids as $code) { + $stmt->execute([':fa_id' => $code]); + } + + $pdo->commit(); + echo json_encode(['status' => 'success']); + +} catch (Exception $e) { + if (isset($pdo) && $pdo->inTransaction()) { + $pdo->rollBack(); + } + // 기존 출력물 제거 후 깨끗한 JSON만 출력 + if (ob_get_length()) ob_clean(); + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/adm_faq_popup_save.php b/kngil/bbs/adm_faq_popup_save.php new file mode 100644 index 0000000..abd44fc --- /dev/null +++ b/kngil/bbs/adm_faq_popup_save.php @@ -0,0 +1,94 @@ +beginTransaction(); + + /* ---------- 신규 추가(INSERT) ---------- */ + if ($inserts) { + // 호출 시 파라미터 개수와 이름을 정확히 맞춤 + $stmtI = $pdo->prepare("SELECT kngil.sp_fa_comments_i(:fa_subject, :fa_content, :sq_no, :use_yn, :cid)"); + + foreach ($inserts as $r) { + $stmtI->execute([ + ':fa_subject' => $r['fa_subject'] ?? '', // 데이터가 없으면 빈 글자라도 보냄 + ':fa_content' => $r['fa_content'] ?? '', + ':sq_no' => $r['sq_no'] ?? 0, + ':use_yn' => $r['use_yn'] ?? 'Y', + ':cid' => $user_id + ]); + } + } + + /* ---------- 수정(UPDATE) ---------- */ + if ($updates) { + $stmtU = $pdo->prepare("SELECT kngil.sp_fa_comments_u(:fa_id, :fa_subject, :fa_content, :sq_no, :use_yn, :mid)"); + + foreach ($updates as $r) { + $stmtU->execute([ + ':fa_id' => $r['fa_id'] ?? '', + ':fa_subject' => $r['fa_subject'] ?? '', // 데이터가 없으면 빈 글자라도 보냄 + ':fa_content' => $r['fa_content'] ?? '', + ':sq_no' => $r['sq_no'] ?? 0, + ':use_yn' => $r['use_yn'] ?? 'Y', + ':mid' => $user_id + ]); + } + } + + $pdo->commit(); + echo json_encode(['status' => 'success']); + break; + default: + throw new Exception('잘못된 요청'); + } + } + + + +catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + http_response_code(403); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} + diff --git a/kngil/bbs/adm_guard.php b/kngil/bbs/adm_guard.php new file mode 100644 index 0000000..0bdfe26 --- /dev/null +++ b/kngil/bbs/adm_guard.php @@ -0,0 +1,36 @@ +prepare("SELECT * FROM kngil.sp_item_r()"); + $stmt->execute(); + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + // 3. W2UI를 위해 각 행에 'recid' 필드 강제 주입 + $records = []; + foreach ($rows as $row) { + $row['recid'] = $row['itm_cd']; // 상품코드를 고유 키로 지정 + $records[] = $row; + } + + // 4. 순수 JSON만 출력 (다른 echo나 공백이 섞이면 에러 발생) + echo json_encode($records); + +} catch (PDOException $e) { + // 에러 발생 시 그리드가 이해할 수 있게 JSON으로 출력 + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/adm_product_popup_delete.php b/kngil/bbs/adm_product_popup_delete.php new file mode 100644 index 0000000..e19ec67 --- /dev/null +++ b/kngil/bbs/adm_product_popup_delete.php @@ -0,0 +1,58 @@ +beginTransaction(); + + // 3. 삭제 실행 + $stmt = $pdo->prepare("SELECT kngil.sp_item_d(:itm_cd)"); + + foreach ($ids as $code) { + $stmt->execute([':itm_cd' => $code]); + } + + $pdo->commit(); + echo json_encode(['status' => 'success']); + +} catch (Exception $e) { + if (isset($pdo) && $pdo->inTransaction()) { + $pdo->rollBack(); + } + // 기존 출력물 제거 후 깨끗한 JSON만 출력 + if (ob_get_length()) ob_clean(); + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/adm_product_popup_save.php b/kngil/bbs/adm_product_popup_save.php new file mode 100644 index 0000000..75901c2 --- /dev/null +++ b/kngil/bbs/adm_product_popup_save.php @@ -0,0 +1,97 @@ +beginTransaction(); + + /* ---------- 신규 추가(INSERT) ---------- */ + if ($inserts) { + // 호출 시 파라미터 개수와 이름을 정확히 맞춤 + $stmtI = $pdo->prepare("SELECT kngil.sp_item_i(:itm_cd, :itm_nm, :area, :itm_amt, :use_yn, :rmks, :cid)"); + + foreach ($inserts as $r) { + $stmtI->execute([ + ':itm_cd' => $r['itm_cd'] ?? '', // 데이터가 없으면 빈 글자라도 보냄 + ':itm_nm' => $r['itm_nm'] ?? '', + ':area' => $r['area'] ?? 0, + ':itm_amt' => $r['itm_amt'] ?? 0, + ':use_yn' => $r['use_yn'] ?? 'Y', + ':rmks' => $r['rmks'] ?? '', + ':cid' => $user_id + ]); + } + } + + /* ---------- 수정(UPDATE) ---------- */ + if ($updates) { + $stmtU = $pdo->prepare("SELECT kngil.sp_item_u(:itm_cd, :itm_nm, :area, :itm_amt, :use_yn, :rmks, :mid)"); + + foreach ($updates as $r) { + $stmtU->execute([ + ':itm_cd' => $r['itm_cd'] ?? '', + ':itm_nm' => $r['itm_nm'] ?? '', + ':area' => $r['area'] ?? 0, + ':itm_amt' => $r['itm_amt'] ?? 0, + ':use_yn' => $r['use_yn'] ?? 'Y', + ':rmks' => $r['rmks'] ?? '', + ':mid' => $user_id + ]); + } + } + + $pdo->commit(); + echo json_encode(['status' => 'success']); + break; + default: + throw new Exception('잘못된 요청'); + } + } + + + +catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + http_response_code(403); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} + diff --git a/kngil/bbs/adm_purch_popup.php b/kngil/bbs/adm_purch_popup.php new file mode 100644 index 0000000..4d1cc5f --- /dev/null +++ b/kngil/bbs/adm_purch_popup.php @@ -0,0 +1,45 @@ +prepare("SELECT * FROM kngil.sp_buy_item_history_r(?, ?, ?, ?)"); + + // 파라미터 순서대로 배열에 담아 실행합니다. + $stmt->execute([ + $p_member_id, + $p_member_nm, + $p_fbuy_dt, + $p_tbuy_dt + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + // 3. W2UI를 위해 각 행에 'recid' 필드 강제 주입 + $records = []; + foreach ($rows as $row) { + // 복합키(member_id + sp_no)를 조합하여 유일한 recid 생성 + $row['recid'] = $row['member_id'] . '_' . $row['sq_no']; + $records[] = $row; + } + + // 4. 결과 출력 + echo json_encode($records); + +} catch (PDOException $e) { + // HTTP 상태 코드를 500으로 설정하여 클라이언트가 에러임을 인지하게 할 수 있습니다. + http_response_code(500); + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/adm_service.php b/kngil/bbs/adm_service.php new file mode 100644 index 0000000..4b6d6ca --- /dev/null +++ b/kngil/bbs/adm_service.php @@ -0,0 +1,209 @@ + 'error', + 'message' => '필수값 누락' + ]); + exit; +} + +try { + + /* ========================= + 조회 (R) + ========================= */ + if ($action === 'list') { + + $buy_date = $input['buy_date'] ?? ''; + if (!$buy_date) { + throw new Exception('구매일 누락'); + } + + $stmt = $pdo->prepare(" + SELECT * + FROM kngil.sp_buy_item_r(:member_id, :buy_date) + "); + $stmt->execute([ + 'member_id' => $member_id, + 'buy_date' => $buy_date + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + $i = 1; + foreach ($rows as &$r) { + $r['recid'] = $i++; + } + + echo json_encode([ + 'status' => 'success', + 'records' => $rows + ]); + exit; + } + + /* ========================= + 즉시 삭제 (D) + ========================= */ + if ($action === 'delete') { + + $sq_no = $input['sq_no'] ?? null; + if (!$sq_no) { + throw new Exception('삭제 대상 누락'); + } + + $pdo->prepare(" + SELECT kngil.sp_buy_item_d( + :member_id, + :sq_no + ) + ")->execute([ + 'member_id' => $member_id, + 'sq_no' => $sq_no + ]); + + echo json_encode([ + 'status' => 'success' + ]); + exit; + } + + /* ========================= + 저장 (C / U) + ========================= */ + if ($action === 'save') { + + $buy_date = $input['buy_date'] ?? ''; + $items = $input['items'] ?? []; + + if (!$buy_date) { + throw new Exception('구매일 누락'); + } + + $pdo->beginTransaction(); + + foreach ($items as $row) { + + $end_dt = empty($row['end_dt']) ? null : $row['end_dt']; + + // INSERT + if (!empty($row['_new'])) { + + $pdo->prepare(" + SELECT kngil.sp_buy_item_i( + :member_id::character varying, + :buy_dt::date, + :itm_cd::character varying, + :itm_qty::numeric, + :itm_area::numeric, + :add_area::numeric, + (:itm_area + :add_area)::numeric, + :itm_amt::numeric, + :dis_rt::numeric, + :buy_amt::numeric, + :vat_amt::numeric, + :sum_amt::numeric, + :end_dt::date, + :ok_yn::character varying, + :rmks::character varying, + :cid::character varying + ) + ")->execute([ + 'member_id' => $member_id, + 'buy_dt' => $buy_date, + 'itm_cd' => $row['itm_cd'], + 'itm_qty' => $row['itm_qty'], + 'itm_area' => $row['itm_area'], + 'add_area' => $row['add_area'] ?? 0, + 'itm_amt' => $row['itm_amt'], + 'dis_rt' => $row['dis_rt'], + 'buy_amt' => $row['buy_amt'], + 'vat_amt' => $row['vat_amt'], + 'sum_amt' => $row['sum_amt'], + 'end_dt' => $end_dt, + 'ok_yn' => $row['ok_yn'], + 'rmks' => $row['rmks'] ?? '', + 'cid' => 'ADMIN' + ]); + + continue; + } + + // UPDATE + if (!empty($row['_existing']) && !empty($row['sq_no'])) { + + $pdo->prepare(" + SELECT kngil.sp_buy_item_u( + :member_id::character varying, + :sq_no::integer, + :buy_dt::date, + :itm_cd::character varying, + :itm_qty::numeric, + :itm_area::numeric, + :add_area::numeric, + (:itm_area + :add_area)::numeric, + :itm_amt::numeric, + :dis_rt::numeric, + :buy_amt::numeric, + :vat_amt::numeric, + :sum_amt::numeric, + :end_dt::date, + :ok_yn::character varying, + :rmks::character varying, + :mid::character varying + ) + ")->execute([ + 'member_id' => $member_id, + 'sq_no' => $row['sq_no'], + 'buy_dt' => $buy_date, + 'itm_cd' => $row['itm_cd'], + 'itm_qty' => $row['itm_qty'], + 'itm_area' => $row['itm_area'], + 'add_area' => $row['add_area'] ?? 0, + 'itm_amt' => $row['itm_amt'], + 'dis_rt' => $row['dis_rt'], + 'buy_amt' => $row['buy_amt'], + 'vat_amt' => $row['vat_amt'], + 'sum_amt' => $row['sum_amt'], + 'end_dt' => $end_dt, + 'ok_yn' => $row['ok_yn'], + 'rmks' => $row['rmks'] ?? '', + 'mid' => 'ADMIN' + ]); + } + } + + $pdo->commit(); + + echo json_encode([ + 'status' => 'success' + ]); + exit; + } + + throw new Exception('Invalid action'); + +} catch (Exception $e) { + + if ($pdo->inTransaction()) { + $pdo->rollBack(); + } + + http_response_code(500); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} diff --git a/kngil/bbs/adm_use_history.php b/kngil/bbs/adm_use_history.php new file mode 100644 index 0000000..2f770af --- /dev/null +++ b/kngil/bbs/adm_use_history.php @@ -0,0 +1,41 @@ +prepare("SELECT * FROM kngil.sp_use_history(?, ?, ?)"); + + $stmt->execute([ + $p_member_id, + $p_user_nm, + $p_dept_nm + ]); + + $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); + + // 3. W2UI를 위해 각 행에 'recid' 필드 주입 + $records = []; + foreach ($rows as $index => $row) { + // user_id와 sq_no 조합으로 유일키 생성 (권장) + // 만약 데이터가 없을 경우를 대비해 $index를 활용할 수도 있음 + $row['recid'] = ($row['user_id'] ?? 'unknown') . '_' . ($row['sq_no'] ?? $index); + $records[] = $row; + } + + // 4. 결과 출력 + echo json_encode($records, JSON_UNESCAPED_UNICODE); // 한글 깨짐 방지 + +} catch (PDOException $e) { + http_response_code(500); + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/db_conn.php b/kngil/bbs/db_conn.php new file mode 100644 index 0000000..571dcf8 --- /dev/null +++ b/kngil/bbs/db_conn.php @@ -0,0 +1,13 @@ + PDO::ERRMODE_EXCEPTION + ]); + // echo "PostgreSQL 연결 성공 🎉"; +} catch (PDOException $e) { + echo $e->getMessage(); +} diff --git a/kngil/bbs/get_base_cd.php b/kngil/bbs/get_base_cd.php new file mode 100644 index 0000000..a8fae3b --- /dev/null +++ b/kngil/bbs/get_base_cd.php @@ -0,0 +1,23 @@ +prepare("SELECT id, text FROM kngil.fn_base_cd(?)"); + $stmt->execute([$group_id]); + $items = $stmt->fetchAll(PDO::FETCH_ASSOC); + + echo json_encode($items); +} catch (PDOException $e) { + echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); +} +?> \ No newline at end of file diff --git a/kngil/bbs/join copy.php b/kngil/bbs/join copy.php new file mode 100644 index 0000000..d71aaad --- /dev/null +++ b/kngil/bbs/join copy.php @@ -0,0 +1,160 @@ + false, + 'message' => '아이디 형식 오류' + ]); + exit; + } + + $stmt = $pdo->prepare(" + SELECT kngil.fn_user_id_check(:user_id) + "); + $stmt->execute([ + ':user_id' => $userId + ]); + + $result = trim($stmt->fetchColumn()); + + if (strpos($result, 'SUCCESS') === 0) { + echo json_encode([ + 'available' => true, + 'message' => '사용 가능한 아이디입니다.' + ]); + } else { + echo json_encode([ + 'available' => false, + 'message' => '이미 존재하는 아이디입니다.' + ]); + } + exit; +} + + +/* ================================================= + 1. 필수값 검증 +================================================= */ +$required = [ + 'memberType', // 회원유형 + 'userId', + 'password', + 'userName', + 'email', + 'phone' +]; + +foreach ($required as $k) { + if (empty($data[$k])) { + echo json_encode([ + 'success' => false, + 'message' => '필수 항목이 누락되었습니다.' + ]); + exit; + } +} + +/* ================================================= + 2. 회원유형 → co_bc 매핑 +================================================= */ +/* + 기업회원 : '1' + 개인회원 : '2' + → 실제 코드값은 여기서 통제 +*/ +$co_bc = ($data['memberType'] === '1') + ? 'CB100100' // 기업 + : 'CB100200'; // 개인 + +/* ================================================= + 3. 비밀번호 규칙 + 암호화 +================================================= */ +if (!preg_match('/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*]).{12,}$/', $data['password'])) { + echo json_encode([ + 'success' => false, + 'message' => '비밀번호 규칙이 올바르지 않습니다.' + ]); + exit; +} + +$hashedPw = password_hash($data['password'], PASSWORD_DEFAULT); + +/* ================================================= + 4. 이메일 형식 +================================================= */ +if (!filter_var($data['email'], FILTER_VALIDATE_EMAIL)) { + echo json_encode([ + 'success' => false, + 'message' => '이메일 형식 오류' + ]); + exit; +} + +/* ================================================= + 5. 프로시저 호출 +================================================= */ +try { + + $stmt = $pdo->prepare(" + SELECT kngil.sp_member_i( + :p_co_bc, + :p_member_id, + :p_user_pw, + :p_member_nm, + :p_email, + :p_tel_no, + :p_co_nm, + :p_dept_nm, + :p_cid + ) AS result + "); + + $stmt->execute([ + ':p_co_bc' => $co_bc, + ':p_member_id' => $data['userId'], + ':p_user_pw' => $hashedPw, + ':p_member_nm' => $data['userName'], + ':p_email' => $data['email'], + ':p_tel_no' => $data['phone'], + ':p_co_nm' => $data['company'] ?? null, + ':p_dept_nm' => $data['department'] ?? null, + ':p_cid' => $data['userId'] + ]); + + $result = $stmt->fetchColumn(); + + if ($result === 'SUCCESS') { + echo json_encode([ + 'success' => true + ]); + } else { + echo json_encode([ + 'success' => false, + 'message' => $result + ]); + } + +} catch (Exception $e) { + echo json_encode([ + 'success' => false, + 'message' => '서버 오류' + ]); +} + +echo json_encode([ + 'success' => false, + 'message' => 'Invalid action' +]); +exit; \ No newline at end of file diff --git a/kngil/bbs/join.php b/kngil/bbs/join.php new file mode 100644 index 0000000..a6d3fab --- /dev/null +++ b/kngil/bbs/join.php @@ -0,0 +1,203 @@ + false, + 'message' => 'Invalid action' + ]); + exit; +} + +/* ================================================= + 1. 아이디 중복확인 +================================================= */ +if ($action === 'check_id') { + + $userId = trim($data['userId'] ?? ''); + join_log('CHECK_ID userId', $userId); + + if (!preg_match('/^[a-zA-Z][a-zA-Z0-9]{3,11}$/', $userId)) { + echo json_encode([ + 'available' => false, + 'message' => '아이디 형식 오류' + ]); + exit; + } + + $stmt = $pdo->prepare(" + SELECT kngil.fn_user_id_check(:user_id) + "); + $stmt->execute([':user_id' => $userId]); + + $result = trim($stmt->fetchColumn()); + join_log('CHECK_ID RESULT', $result); + + if (strpos($result, 'SUCCESS') === 0) { + echo json_encode([ + 'available' => true, + 'message' => '사용 가능한 아이디입니다.' + ]); + } else { + echo json_encode([ + 'available' => false, + 'message' => '이미 존재하는 아이디입니다.' + ]); + } + exit; +} + +/* ================================================= + 2. 회원가입 +================================================= */ +if ($action !== 'signup') { + echo json_encode([ + 'success' => false, + 'message' => 'Invalid action' + ]); + exit; +} + +/* ================================================= + 3. 필수값 검증 +================================================= */ +$required = ['memberType','userId','password','userName','email','phone']; + +foreach ($required as $k) { + if (empty($data[$k])) { + join_log('REQUIRED MISSING', $k); + echo json_encode([ + 'success' => false, + 'message' => '필수 항목이 누락되었습니다.' + ]); + exit; + } +} + +/* ================================================= + 4. 회원유형 → co_bc +================================================= */ +$memberType = $data['memberType'] ?? '2'; +$co_bc = ($memberType === '1') ? 'CB100100' : 'CB100200'; + +join_log('co_bc', $co_bc); + +/* ================================================= + 5. 비밀번호 규칙 (8자) +================================================= */ +if (!preg_match('/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/', $data['password'])) { + join_log('PASSWORD INVALID'); + echo json_encode([ + 'success' => false, + 'message' => '비밀번호 규칙이 올바르지 않습니다.' + ]); + exit; +} + +$userPw = $data['password']; + +/* ================================================= + 6. 이메일 검증 +================================================= */ +if (!filter_var($data['email'], FILTER_VALIDATE_EMAIL)) { + join_log('EMAIL INVALID', $data['email']); + echo json_encode([ + 'success' => false, + 'message' => '이메일 형식 오류' + ]); + exit; +} + +/* ================================================= + 7. 프로시저 호출 +================================================= */ +try { + + join_log('SIGNUP PARAMS', [ + 'memberType' => $memberType, + 'userId' => $data['userId'], + 'userName' => $data['userName'], + 'email' => $data['email'], + 'phone' => $data['phone'], + 'company' => $data['company'] ?? null, + 'department' => $data['department'] ?? null, + ]); + + $stmt = $pdo->prepare(" + SELECT kngil.sp_member_i( + :p_co_bc, + :p_member_id, + :p_user_pw, + :p_member_nm, + :p_email, + :p_tel_no, + :p_co_nm, + :p_dept_nm, + :p_cid + ) + "); + + $stmt->execute([ + ':p_co_bc' => $co_bc, + ':p_member_id' => $data['userId'], + ':p_user_pw' => $userPw, + ':p_member_nm' => $data['userName'], + ':p_email' => $data['email'], + ':p_tel_no' => $data['phone'], + ':p_co_nm' => $data['company'] ?? null, + ':p_dept_nm' => $data['department'] ?? null, + ':p_cid' => $data['userId'] + ]); + + $result = trim($stmt->fetchColumn()); + join_log('PROC RESULT', $result); + + if ($result === 'SUCCESS') { + join_log('SIGNUP SUCCESS', $data['userId']); + echo json_encode(['success' => true]); + } else { + join_log('SIGNUP FAIL', $result); + echo json_encode([ + 'success' => false, + 'message' => $result + ]); + } + +} catch (Throwable $e) { + join_log('EXCEPTION', $e->getMessage()); + echo json_encode([ + 'success' => false, + 'message' => '서버 오류' + ]); +} + +exit; diff --git a/kngil/bbs/login.php b/kngil/bbs/login.php new file mode 100644 index 0000000..23cbf5b --- /dev/null +++ b/kngil/bbs/login.php @@ -0,0 +1,68 @@ + 'error', + 'message' => '아이디와 비밀번호를 입력하세요.' + ]); + exit; +} + +$stmt = $pdo->prepare(" + SELECT + u.member_id, + u.user_id, + u.user_pw, + u.user_nm, + u.auth_bc, + u.dept_nm, + m.co_nm, + u.tel_no, + u.email + FROM kngil.users u + LEFT JOIN kngil.members m + ON u.member_id = m.member_id + WHERE LOWER(u.user_id) = LOWER(:id) + AND u.use_yn = 'Y' + LIMIT 1 +"); +$stmt->execute([':id' => $id]); + +$user = $stmt->fetch(PDO::FETCH_ASSOC); + +if (!$user) { + echo json_encode([ + 'status' => 'error', + 'message' => '존재하지 않는 아이디입니다.' + ]); + exit; +} + +// 현재 구조상 평문 비교 +if ($user['user_pw'] !== $pw) { + echo json_encode([ + 'status' => 'error', + 'message' => '비밀번호가 올바르지 않습니다.' + ]); + exit; +} + +// ✅ 로그인 성공 +$_SESSION['login'] = [ + 'member_id' => $user['member_id'], + 'user_id' => $user['user_id'], + 'user_nm' => $user['user_nm'], + 'auth_bc' => $user['auth_bc'], + 'co_nm' => $user['co_nm'] ?? null, + 'dept_nm' => $user['dept_nm'] ?? null, + 'tel_no' => $user['tel_no'] ?? null, + 'email' => $user['email'] ?? null +]; + +echo json_encode(['status' => 'success']); diff --git a/kngil/bbs/login_sms copy.php b/kngil/bbs/login_sms copy.php new file mode 100644 index 0000000..5c3292e --- /dev/null +++ b/kngil/bbs/login_sms copy.php @@ -0,0 +1,179 @@ +'HS256','typ'=>'JWT']; + + $segments = []; + $segments[] = base64url_encode(json_encode($header)); + $segments[] = base64url_encode(json_encode($payload)); + + $signing_input = implode('.', $segments); + $signature = hash_hmac('sha256', $signing_input, $secret, true); + + $segments[] = base64url_encode($signature); + + return implode('.', $segments); +} + +/* ========================= + cURL 요청 함수 +========================= */ +function curl_json($url, $method='GET', $headers=[], $body=null) { + $ch = curl_init($url); + + curl_setopt_array($ch, [ + CURLOPT_RETURNTRANSFER => true, + CURLOPT_CUSTOMREQUEST => $method, + CURLOPT_HTTPHEADER => $headers, + CURLOPT_POSTFIELDS => $body, + CURLOPT_TIMEOUT => 10 + ]); + + $response = curl_exec($ch); + $err = curl_error($ch); + $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); + + curl_close($ch); + + if ($err) { + throw new Exception($err); + } + + return [$code, $response]; +} + +/* ========================= + MODE 분기 +========================= */ +$mode = $_GET['mode'] ?? 'request'; + +try { + + /* ========================= + 1️⃣ 매직링크 발급 요청 + ========================= */ + if ($mode === 'request') { + + // JWT payload (3분 유효) + $payload = [ + 'system' => $SYSTEM, + 'iat' => time(), + 'exp' => time() + 180 + ]; + + $jwt = create_jwt($payload, $SECRET_KEY); + + [$code, $res] = curl_json( + $AUTH_SERVER.'/auth/sentinel', + 'POST', + [ + 'Authorization: Bearer '.$jwt, + 'Content-Type: application/json' + ], + json_encode([ + 'phoneNumber' => $PHONE + ]) + ); + + echo json_encode([ + 'step' => 'sentinel_request', + 'http_code' => $code, + 'response' => json_decode($res, true) + ], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE); + exit; + } + + /* ========================= + 2️⃣ 매직링크 상태 확인 + ========================= */ + if ($mode === 'status') { + + $token = $_GET['token'] ?? ''; + if (!$token) { + throw new Exception('token 필요'); + } + + $payload = [ + 'system' => $SYSTEM, + 'iat' => time(), + 'exp' => time() + 180 + ]; + + $jwt = create_jwt($payload, $SECRET_KEY); + + [$code, $res] = curl_json( + $AUTH_SERVER.'/auth/status?token='.$token, + 'GET', + [ + 'Authorization: Bearer '.$jwt + ] + ); + + $data = json_decode($res, true); + + // 🔴 여기부터가 "로그인 처리" + if (!empty($data['loggedIn'])) { + + $stmt = $pdo->prepare(" + SELECT member_id, user_id, user_nm, auth_bc + FROM kngil.users + WHERE REPLACE(tel_no, '-', '') = :phone + AND use_yn = 'Y' + LIMIT 1 + "); + $stmt->execute([':phone' => $PHONE]); + $user = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$user) { + throw new Exception('해당 번호로 등록된 사용자 없음'); + } + + $_SESSION['login'] = [ + 'member_id' => $user['member_id'], + 'user_id' => $user['user_id'], + 'user_nm' => $user['user_nm'], + 'auth_bc' => $user['auth_bc'] + ]; + + echo json_encode([ + 'status' => 'success', + 'message' => '자동 로그인 완료' + ]); + exit; + } + + echo json_encode([ + 'status' => 'pending' + ]); + exit; + } + +} catch (Exception $e) { + echo json_encode([ + 'error' => true, + 'message' => $e->getMessage() + ], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE); +} diff --git a/kngil/bbs/login_sms.php b/kngil/bbs/login_sms.php new file mode 100644 index 0000000..d642d65 --- /dev/null +++ b/kngil/bbs/login_sms.php @@ -0,0 +1,212 @@ + 'HS256', 'typ' => 'JWT']; + + $segments = []; + $segments[] = base64url_encode(json_encode($header)); + $segments[] = base64url_encode(json_encode($payload)); + + $signing_input = implode('.', $segments); + $signature = hash_hmac('sha256', $signing_input, $secret, true); + + $segments[] = base64url_encode($signature); + return implode('.', $segments); +} + +/* ========================= + cURL JSON 요청 +========================= */ +function curl_json($url, $method = 'GET', $headers = [], $body = null) { + $ch = curl_init($url); + + curl_setopt_array($ch, [ + CURLOPT_RETURNTRANSFER => true, + CURLOPT_CUSTOMREQUEST => $method, + CURLOPT_HTTPHEADER => $headers, + CURLOPT_POSTFIELDS => $body, + CURLOPT_TIMEOUT => 10 + ]); + + $response = curl_exec($ch); + $err = curl_error($ch); + $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); + + curl_close($ch); + + if ($err) { + throw new Exception($err); + } + + return [$code, $response]; +} + +try { + + /* ========================= + 1️⃣ 매직링크 발급 요청 + ========================= */ + if ($mode === 'request') { + + $rawPhone = $input['phone'] ?? ''; + $phone = preg_replace('/[^0-9]/', '', $rawPhone); + + if (!$phone) { + echo json_encode([ + 'status' => 'error', + 'message' => '휴대폰 번호를 입력하세요.' + ]); + exit; + } + + // JWT payload (3분 유효) + $payload = [ + 'system' => $SYSTEM, + 'iat' => time(), + 'exp' => time() + 180 + ]; + + $jwt = create_jwt($payload, $SECRET_KEY); + + [$code, $res] = curl_json( + $AUTH_SERVER . '/auth/sentinel', + 'POST', + [ + 'Authorization: Bearer ' . $jwt, + 'Content-Type: application/json' + ], + json_encode([ + 'phoneNumber' => $phone + ]) + ); + + $result = json_decode($res, true); + + if (empty($result['token'])) { + throw new Exception('Sentinel token 발급 실패'); + } + + // ✅ token 반드시 저장 + $_SESSION['sms_login'] = [ + 'phone' => $phone, + 'token' => $result['token'] + ]; + + echo json_encode([ + 'status' => 'success' + ]); + exit; + } + + /* ========================= + 2️⃣ 매직링크 상태 확인 → 자동 로그인 + ========================= */ + if ($mode === 'status') { + + if ( + empty($_SESSION['sms_login']['token']) || + empty($_SESSION['sms_login']['phone']) + ) { + echo json_encode(['status' => 'pending']); + exit; + } + + $token = $_SESSION['sms_login']['token']; + $phone = $_SESSION['sms_login']['phone']; + + $payload = [ + 'system' => $SYSTEM, + 'iat' => time(), + 'exp' => time() + 180 + ]; + + $jwt = create_jwt($payload, $SECRET_KEY); + + [$code, $res] = curl_json( + $AUTH_SERVER . '/auth/status?token=' . $token, + 'GET', + [ + 'Authorization: Bearer ' . $jwt + ] + ); + + $data = json_decode($res, true); + + // 🔴 인증 완료 시 로그인 처리 + if (!empty($data['loggedIn'])) { + + $stmt = $pdo->prepare(" + SELECT + member_id, + user_id, + user_nm, + auth_bc + FROM kngil.users + WHERE REPLACE(tel_no, '-', '') = :phone + AND use_yn = 'Y' + LIMIT 1 + "); + $stmt->execute([':phone' => $phone]); + $user = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$user) { + throw new Exception('해당 번호로 등록된 사용자 없음'); + } + + // ✅ 기존 PW 로그인과 동일 + $_SESSION['login'] = [ + 'member_id' => $user['member_id'], + 'user_id' => $user['user_id'], + 'user_nm' => $user['user_nm'], + 'auth_bc' => $user['auth_bc'] + ]; + + unset($_SESSION['sms_login']); + + echo json_encode([ + 'status' => 'success', + 'message' => '자동 로그인 완료' + ], JSON_UNESCAPED_UNICODE); + exit; + } + + echo json_encode(['status' => 'pending']); + exit; + } + +} catch (Exception $e) { + echo json_encode([ + 'error' => true, + 'message' => $e->getMessage() + ], JSON_UNESCAPED_UNICODE); +} \ No newline at end of file diff --git a/kngil/bbs/logout.php b/kngil/bbs/logout.php new file mode 100644 index 0000000..b7bb0cf --- /dev/null +++ b/kngil/bbs/logout.php @@ -0,0 +1,6 @@ + 'error', 'message' => '로그인이 필요합니다.']); + exit; +} + +$input = json_decode(file_get_contents('php://input'), true); +$pw = trim($input['pw'] ?? ''); + +if ($pw === '') { + echo json_encode(['status' => 'error', 'message' => '비밀번호를 입력하세요.']); + exit; +} + +$userId = $_SESSION['login']['user_id']; + +$stmt = $pdo->prepare(" + SELECT user_pw + FROM kngil.users + WHERE user_id = :user_id + AND use_yn = 'Y' +"); +$stmt->execute([':user_id' => $userId]); + +$user = $stmt->fetch(PDO::FETCH_ASSOC); + +if (!$user || $user['user_pw'] !== $pw) { + echo json_encode(['status' => 'error', 'message' => '비밀번호가 올바르지 않습니다.']); + exit; +} + +// ✅ 비밀번호 재인증 성공 +$_SESSION['mypage_verified'] = true; + +echo json_encode(['status' => 'success']); diff --git a/kngil/bbs/mypage02.php b/kngil/bbs/mypage02.php new file mode 100644 index 0000000..7f38b34 --- /dev/null +++ b/kngil/bbs/mypage02.php @@ -0,0 +1,90 @@ + 'error', 'message' => '로그인이 필요합니다.']); + exit; +} + +if (empty($_SESSION['mypage_verified'])) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => '마이페이지 인증이 필요합니다.']); + exit; +} + +$userId = $_SESSION['login']['user_id']; + +/* ========================= + 페이징 파라미터 +========================= */ +$page = max(1, intval($_GET['page'] ?? 1)); +$pageSize = 5; +$offset = ($page - 1) * $pageSize; + +try { + + /* ========================= + 1. 내 정보 + ========================= */ + $stmt = $pdo->prepare("SELECT * FROM kngil.sp_users_my_r(:user_id)"); + $stmt->execute([':user_id' => $userId]); + $user = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$user) { + echo json_encode(['status' => 'error', 'message' => '사용자 정보 없음']); + exit; + } + + /* ========================= + 2. 전체 건수 + ========================= */ + $cntStmt = $pdo->prepare(" + SELECT COUNT(*) + FROM kngil.use_history + WHERE user_id = :user_id + "); + $cntStmt->execute([':user_id' => $userId]); + $totalCount = (int)$cntStmt->fetchColumn(); + + $totalPages = (int)ceil($totalCount / $pageSize); + + /* ========================= + 3. 현재 페이지 데이터 + ========================= */ + $histStmt = $pdo->prepare(" + SELECT * + FROM kngil.sp_users_my_history(:user_id) + OFFSET :offset + LIMIT :limit + "); + $histStmt->bindValue(':user_id', $userId, PDO::PARAM_STR); + $histStmt->bindValue(':offset', $offset, PDO::PARAM_INT); + $histStmt->bindValue(':limit', $pageSize, PDO::PARAM_INT); + $histStmt->execute(); + + $history = $histStmt->fetchAll(PDO::FETCH_ASSOC); + + echo json_encode([ + 'status' => 'success', + 'user' => $user, + 'history' => $history, + 'pagination' => [ + 'page' => $page, + 'pageSize' => $pageSize, + 'totalCount' => $totalCount, + 'totalPages' => $totalPages + ] + ]); + +} catch (Exception $e) { + http_response_code(500); + echo json_encode([ + 'status' => 'error', + 'message' => '서버 오류', + 'detail' => $e->getMessage() + ]); +} diff --git a/kngil/bbs/mypage03.php b/kngil/bbs/mypage03.php new file mode 100644 index 0000000..4a2d103 --- /dev/null +++ b/kngil/bbs/mypage03.php @@ -0,0 +1,139 @@ + 'error', 'message' => '로그인이 필요합니다.']); + exit; +} + +// 2차 인증 체크 +if (empty($_SESSION['mypage_verified'])) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => '마이페이지 인증이 필요합니다.']); + exit; +} + +$userId = $_SESSION['login']['user_id']; +$memberId = $_SESSION['login']['member_id']; + +/* ================================================== + GET : 회원정보 조회 (mypage03 열릴 때) +================================================== */ +if ($_SERVER['REQUEST_METHOD'] === 'GET') { + + try { + $stmt = $pdo->prepare(" + SELECT * + FROM kngil.sp_users_r( + :member_id, + '', + '', + 'Y' + ) + WHERE user_id = :user_id + LIMIT 1 + "); + + $stmt->execute([ + ':member_id' => $memberId, + ':user_id' => $userId + ]); + + $row = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$row) { + echo json_encode(['status' => 'error', 'message' => '회원정보를 찾을 수 없습니다.']); + exit; + } + + echo json_encode([ + 'status' => 'success', + 'data' => $row + ]); + exit; + + } catch (Exception $e) { + http_response_code(500); + echo json_encode([ + 'status' => 'error', + 'message' => '조회 중 오류 발생', + 'detail' => $e->getMessage() + ]); + exit; + } +} + +/* ================================================== + POST : 회원정보 수정 +================================================== */ +if ($_SERVER['REQUEST_METHOD'] === 'POST') { + + $input = json_decode(file_get_contents('php://input'), true); + + $userPw = trim($input['password'] ?? ''); + $email = trim($input['email'] ?? ''); + $deptNm = trim($input['dept_nm'] ?? ''); + + // 전화번호는 이번 단계에서 수정 안 함 + $tel_no = trim($input['tel_no'] ?? ''); + + if ($email === '') { + echo json_encode(['status' => 'error', 'message' => '이메일은 필수입니다.']); + exit; + } + + if ($userPw !== '' && strlen($userPw) < 8) { + echo json_encode(['status' => 'error', 'message' => '비밀번호는 8자 이상이어야 합니다.']); + exit; + } + + try { + $stmt = $pdo->prepare(" + SELECT kngil.sp_users_my_u( + :user_id, + :user_pw, + :email, + :tel_no, + :dept_nm, + :mid + ) + "); + + $stmt->execute([ + ':user_id' => $userId, + ':user_pw' => $userPw, + ':email' => $email, + ':tel_no' => $tel_no, + ':dept_nm' => $deptNm, + ':mid' => $userId + ]); + + $result = $stmt->fetchColumn(); + + if ($result !== 'SUCCESS') { + echo json_encode(['status' => 'error', 'message' => $result]); + exit; + } + + echo json_encode(['status' => 'success']); + exit; + + } catch (Exception $e) { + http_response_code(500); + echo json_encode([ + 'status' => 'error', + 'message' => '저장 중 오류 발생', + 'detail' => $e->getMessage() + ]); + exit; + } +} + +// 허용되지 않은 메서드 +http_response_code(405); +echo json_encode(['status' => 'error', 'message' => 'Invalid request']); diff --git a/kngil/bbs/qa_comment.php b/kngil/bbs/qa_comment.php new file mode 100644 index 0000000..70bad7d --- /dev/null +++ b/kngil/bbs/qa_comment.php @@ -0,0 +1,110 @@ +'error','message'=>'로그인 필요']); + exit; +} + +require_once __DIR__.'/db_conn.php'; + +$postId = (int)($_POST['postId'] ?? 0); +$content = trim($_POST['comment'] ?? ''); + +if ($postId < 1 || ($content === '' && empty($_FILES['images']))) { + echo json_encode(['status'=>'error','message'=>'내용 없음']); + exit; +} + +$user = $_SESSION['login']; + +try { + $pdo->beginTransaction(); + + /* ========================= + 1) 댓글 INSERT + ========================= */ + $stmt = $pdo->prepare(" + INSERT INTO kngil.qa_comments + (post_id, commenter, user_nm, content, cdt_dt) + VALUES + (:post_id, :commenter, :user_nm, :content, NOW()) + RETURNING comment_id + "); + $stmt->execute([ + ':post_id' => $postId, + ':commenter' => $user['user_id'], + ':user_nm' => $user['user_nm'], + ':content' => $content + ]); + + $commentId = $stmt->fetchColumn(); + + /* ========================= + 2) 이미지 업로드 + ========================= */ + $images = []; + + if (!empty($_FILES['images']['name'][0])) { + + $uploadDir = $_SERVER['DOCUMENT_ROOT'].'/kngil/uploads/comment/'; + if (!is_dir($uploadDir)) { + mkdir($uploadDir, 0777, true); + } + + foreach ($_FILES['images']['name'] as $i => $name) { + + if ($_FILES['images']['error'][$i] !== UPLOAD_ERR_OK) continue; + + $tmp = $_FILES['images']['tmp_name'][$i]; + $size = $_FILES['images']['size'][$i]; + $ext = strtolower(pathinfo($name, PATHINFO_EXTENSION)); + + $save = time().'_'.bin2hex(random_bytes(4)).'.'.$ext; + $fullPath = $uploadDir.$save; + move_uploaded_file($tmp, $fullPath); + + $path = '/kngil/uploads/comment/'.$save; + + // 🔥 DB 구조에 맞게 INSERT + $pdo->prepare(" + INSERT INTO kngil.qa_comment_images + (comment_id, file_name, file_path, thumb_path, file_size, uploaded_at) + VALUES + (:comment_id, :file_name, :file_path, :thumb_path, :file_size, NOW()) + ")->execute([ + ':comment_id' => $commentId, + ':file_name' => $name, + ':file_path' => $path, + ':thumb_path' => $path, // 지금은 동일 (추후 썸네일 분리 가능) + ':file_size' => $size + ]); + + $images[] = [ + 'thumb' => $path, + 'full' => $path, + 'name' => $name + ]; + } + } + + $pdo->commit(); + + echo json_encode([ + 'status' => 'ok', + 'comment_id' => $commentId, + 'comment_text' => $content, + 'user_name' => $user['user_nm'], + 'login_id' => $user['user_id'], + 'created_at' => date('Y-m-d H:i'), + 'images' => $images + ]); + +} catch (Exception $e) { + $pdo->rollBack(); + echo json_encode([ + 'status' => 'error', + 'message' => $e->getMessage() + ]); +} diff --git a/kngil/bbs/qa_comment_delete.php b/kngil/bbs/qa_comment_delete.php new file mode 100644 index 0000000..57e9980 --- /dev/null +++ b/kngil/bbs/qa_comment_delete.php @@ -0,0 +1,33 @@ +'error','message'=>'로그인 필요']); + exit; +} + +$id = (int)($_POST['commentId'] ?? 0); +$userId = $_SESSION['login']['user_id']; + +if ($id < 1) { + echo json_encode(['status'=>'error','message'=>'잘못된 요청']); + exit; +} + +// 관리자 or 본인 +$isAdmin = function_exists('is_qna_admin') && is_qna_admin(); + +$sql = $isAdmin + ? "DELETE FROM kngil.qa_comments WHERE comment_id = :id" + : "DELETE FROM kngil.qa_comments WHERE comment_id = :id AND commenter = :user"; + +$stmt = $pdo->prepare($sql); +$params = [':id'=>$id]; +if (!$isAdmin) $params[':user'] = $userId; + +$stmt->execute($params); + +echo json_encode(['status'=>'ok']); diff --git a/kngil/bbs/qa_comment_update.php b/kngil/bbs/qa_comment_update.php new file mode 100644 index 0000000..fc294a2 --- /dev/null +++ b/kngil/bbs/qa_comment_update.php @@ -0,0 +1,34 @@ +'error','message'=>'로그인 필요']); + exit; +} + +$id = (int)($_POST['commentId'] ?? 0); +$content = trim($_POST['comment'] ?? ''); + +if ($id < 1 || $content === '') { + echo json_encode(['status'=>'error','message'=>'잘못된 요청']); + exit; +} + +// 본인 댓글만 수정 +$stmt = $pdo->prepare(" + UPDATE kngil.qa_comments + SET content = :content, + mdt_dt = NOW() + WHERE comment_id = :id + AND commenter = :user +"); +$stmt->execute([ + ':content' => $content, + ':id' => $id, + ':user' => $_SESSION['login']['user_id'] +]); + +echo json_encode(['status'=>'ok']); diff --git a/kngil/bbs/qa_detail.php b/kngil/bbs/qa_detail.php new file mode 100644 index 0000000..8a4e4c1 --- /dev/null +++ b/kngil/bbs/qa_detail.php @@ -0,0 +1,233 @@ + + alert('로그인 후 이용 가능합니다.'); + location.href = '/kngil/skin/qa_list.skin.php'; + "; + exit; +} + +$login = $_SESSION['login']; +$me = $login['user_id'] ?? ''; +$auth = $login['auth_bc'] ?? ''; + +$isAdmin = in_array($auth, ['BS100100', 'BS100200']); // 개발자/관리자 + +/* =============================== + 2. DB 연결 (PostgreSQL) +=============================== */ +require_once $_SERVER['DOCUMENT_ROOT'].'/kngil/bbs/db_conn.php'; + +/* =============================== + 4. 삭제 처리 +=============================== */ +if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'delete') { + + $postId = (int)($_POST['post_id'] ?? 0); + if ($postId < 1) { + die('잘못된 요청입니다.'); + } + + // 글 조회 + $stmt = $pdo->prepare(" + SELECT post_id, user_id, stat_bc + FROM kngil.qa_posts + WHERE post_id = :pid + "); + $stmt->execute([':pid' => $postId]); + $post = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$post) { + die('존재하지 않는 글입니다.'); + } + + // 상태 제한 (검토중 / 완료면 삭제 불가) + if (in_array($post['stat_bc'], ['REVIEW', 'DONE']) && !$isAdmin) { + die('검토중이거나 답변 완료된 글은 삭제할 수 없습니다.'); + } + + // 권한 체크 (본인 or 관리자) + if (!$isAdmin && $post['user_id'] !== $loginUser['user_id']) { + die('삭제 권한이 없습니다.'); + } + + try { + $pdo->beginTransaction(); + + // 1️⃣ 첨부파일 삭제 + $fs = $pdo->prepare(" + SELECT save_path + FROM kngil.qa_attachments + WHERE post_id = :pid + "); + $fs->execute([':pid' => $postId]); + + foreach ($fs->fetchAll() as $f) { + $file = $_SERVER['DOCUMENT_ROOT'] . $f['save_path']; + if (is_file($file)) unlink($file); + } + + $pdo->prepare("DELETE FROM kngil.qa_attachments WHERE post_id = ?") + ->execute([$postId]); + + // 2️⃣ 댓글 삭제 + $pdo->prepare("DELETE FROM kngil.qa_comments WHERE post_id = ?") + ->execute([$postId]); + + // 3️⃣ 본문 삭제 + $pdo->prepare("DELETE FROM kngil.qa_posts WHERE post_id = ?") + ->execute([$postId]); + + $pdo->commit(); + + header("Location: /kngil/skin/qa_list.skin.php"); + exit; + + } catch (Exception $e) { + $pdo->rollBack(); + die('삭제 중 오류 발생: ' . $e->getMessage()); + } +} + +/* =============================== + 3. post_id 검증 +=============================== */ +$postId = (int)($_GET['id'] ?? 0); +if ($postId < 1) { + exit('잘못된 접근입니다.'); +} + + +/* =============================== + 5. 글 조회 +=============================== */ +$stmt = $pdo->prepare(" + SELECT + p.post_id, + p.user_id, + p.user_nm, + p.tel_no, + p.category, + p.co_nm, + p.dept_nm, + p.title, + p.content, + p.attachment, + p.stat_bc, + p.is_secret, + p.complete_form, + p.cdt_dt, + p.mid_dt, + p.is_read_admin, + + u.email + + FROM kngil.qa_posts p + LEFT JOIN kngil.users u + ON p.user_id = u.user_id + WHERE p.post_id = :pid +"); +$stmt->execute([':pid' => $postId]); +$post = $stmt->fetch(PDO::FETCH_ASSOC); + +if (!$post) { + exit('존재하지 않는 글입니다.'); +} + +/* =============================== + 6. 비밀글 접근 제어 +=============================== */ +if ($post['is_secret'] === 'Y' && $post['user_id'] !== $me && !$isAdmin) { + exit('⚠️ 비밀글은 작성자 또는 관리자만 확인할 수 있습니다.'); +} + +/* =============================== + 7. 관리자 열람 처리 +=============================== */ +if ($isAdmin && $post['is_read_admin'] === 'N') { + $pdo->prepare(" + UPDATE kngil.qa_posts + SET is_read_admin = 'Y' + WHERE post_id = :pid + ")->execute([':pid' => $postId]); +} + +/* =============================== + 8. 라벨 매핑 +=============================== */ +$STATUS_LABELS = [ + 'WAIT' => '문의접수', + 'REVIEW'=> '검토중', + 'DONE' => '답변완료' +]; + +$CATEGORY_LABELS = [ + 'general' => '일반문의', + 'improvement' => '개선문의', + 'error' => '오류문의', + 'notice' => '공지사항' +]; + +$post['status_label'] = $STATUS_LABELS[$post['stat_bc']] ?? $post['stat_bc']; +$post['category_label'] = $CATEGORY_LABELS[$post['category']] ?? $post['category']; +$post['display_name'] = $post['user_nm']; + +/* =============================== + 9. 첨부파일 조회 +=============================== */ +$af = $pdo->prepare(" + SELECT + id, + ori_name, + save_path, + file_size, + uploaded_at + FROM kngil.qa_attachments + WHERE post_id = :pid + ORDER BY id ASC +"); +$af->execute([':pid' => $postId]); +$attachments = $af->fetchAll(PDO::FETCH_ASSOC); + +/* =============================== + 10. 댓글 조회 (일단 구조만) +=============================== */ +$stmt = $pdo->prepare(" + SELECT + comment_id, + post_id, + commenter, + content, + user_nm, + cdt_dt + FROM kngil.qa_comments + WHERE post_id = :post_id + ORDER BY cdt_dt ASC +"); +$stmt->execute([ + ':post_id' => $postId +]); + +$comments = $stmt->fetchAll(PDO::FETCH_ASSOC); + +/* =============================== + 11. 소유자 여부 (수정 버튼용) +=============================== */ +$isOwner = ($post['user_id'] === $me); + +/* =============================== + 12. 스킨 렌더링 +=============================== */ +include $_SERVER['DOCUMENT_ROOT'].'/kngil/skin/qa_detail.skin.php'; diff --git a/kngil/bbs/qa_list.php b/kngil/bbs/qa_list.php new file mode 100644 index 0000000..e1984a9 --- /dev/null +++ b/kngil/bbs/qa_list.php @@ -0,0 +1,152 @@ + $cat) { + $key = ":cat{$i}"; + $catKeys[] = $key; + $params[$key] = $cat; + } + $where[] = "p.category IN (" . implode(',', $catKeys) . ")"; +} + +/* 내가 작성한 글 */ +if ($writer === 'me' && $loginUserId) { + $where[] = "p.user_id = :me"; + $params[':me'] = $loginUserId; +} + +/* 상태 */ +if ($status !== 'all') { + $where[] = "p.stat_bc = :status"; + $params[':status'] = $status; +} + +/* 검색 (제목 + 내용) */ +if ($search !== '') { + $where[] = "(p.title ILIKE :q OR p.content ILIKE :q)"; + $params[':q'] = "%{$search}%"; +} + +$whereSql = $where ? 'WHERE ' . implode(' AND ', $where) : ''; + +/* ========================= + 3. 전체 건수 +========================= */ +$countSql = " + SELECT COUNT(*) + FROM kngil.qa_posts p + {$whereSql} +"; +$stmt = $pdo->prepare($countSql); +$stmt->execute($params); +$totalCount = (int)$stmt->fetchColumn(); + +/* ========================= + 4. 리스트 조회 +========================= */ +$listSql = " + SELECT + p.post_id, + p.category, + p.title, + p.user_nm, + p.co_nm, + p.dept_nm, + p.stat_bc AS status, + p.is_secret, + p.cdt_dt AS created_at, + + -- 댓글 수 + ( + SELECT COUNT(*) + FROM kngil.qa_comments c + WHERE c.post_id = p.post_id + ) AS comment_count, + + -- 첨부파일 수 + ( + SELECT COUNT(*) + FROM kngil.qa_attachments a + WHERE a.post_id = p.post_id + ) AS file_count + + FROM kngil.qa_posts p + {$whereSql} + ORDER BY + (p.category = 'notice') DESC, + p.post_id DESC + LIMIT :limit OFFSET :offset +"; + +$stmt = $pdo->prepare($listSql); + +/* 바인딩 */ +foreach ($params as $k => $v) { + $stmt->bindValue($k, $v); +} +$stmt->bindValue(':limit', $pageSize, PDO::PARAM_INT); +$stmt->bindValue(':offset', $offset, PDO::PARAM_INT); + +$stmt->execute(); +$posts = $stmt->fetchAll(PDO::FETCH_ASSOC); + +/* ========================= + 5. 표시용 가공 +========================= */ +foreach ($posts as &$row) { + // 회사 표시 + $row['display_company'] = $row['co_nm'] ?? ''; + + // 작성자 표시 + $row['display_name'] = $row['user_nm'] ?? $row['user_id']; + + // 날짜 포맷 + $row['created_at'] = substr($row['created_at'], 0, 10); +} +unset($row); + +/* ========================= + 6. 페이징 계산 +========================= */ +$totalPages = (int)ceil($totalCount / $pageSize); + +/* ========================= + 7. 스킨 렌더링 +========================= */ +include $_SERVER['DOCUMENT_ROOT'].'/kngil/skin/qa_list.skin.php'; diff --git a/kngil/bbs/qa_status.php b/kngil/bbs/qa_status.php new file mode 100644 index 0000000..127b5ec --- /dev/null +++ b/kngil/bbs/qa_status.php @@ -0,0 +1,50 @@ +prepare(" + UPDATE kngil.qa_posts + SET stat_bc = :status, + mid_dt = NOW() + WHERE post_id = :pid + "); + $stmt->execute([ + ':status' => $status, + ':pid' => $postId + ]); + + // 상세 페이지로 복귀 + header("Location: /kngil/bbs/qa_detail.php?id={$postId}"); + exit; + +} catch (Exception $e) { + exit('DB 오류: '.$e->getMessage()); +} diff --git a/kngil/bbs/qa_write.php b/kngil/bbs/qa_write.php new file mode 100644 index 0000000..6ad439a --- /dev/null +++ b/kngil/bbs/qa_write.php @@ -0,0 +1,231 @@ +'; +// var_dump($_SESSION['login']); +// exit; + +if (empty($_SESSION['login'])) { + echo ""; + exit; +} + +$loginUser = $_SESSION['login']; + +/* =============================== + 2. DB 연결 +=============================== */ +require_once $_SERVER['DOCUMENT_ROOT'].'/kngil/bbs/db_conn.php'; + +/* =============================== + 3. 수정 여부 판단 +=============================== */ +$postId = isset($_GET['id']) ? (int)$_GET['id'] : 0; +$isEdit = $postId > 0; + +/* =============================== + 4. 수정 모드 – 기존 글 로드 +=============================== */ +$post = [ + 'category' => '', + 'title' => '', + 'content' => '', + 'is_secret' => 'N', +]; + +if ($isEdit) { + $stmt = $pdo->prepare("SELECT * FROM kngil.qa_posts WHERE post_id = :pid"); + $stmt->execute([':pid' => $postId]); + $post = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$post) { + die('존재하지 않는 글입니다.'); + } + + // 작성자 본인만 수정 가능 + if ($post['user_id'] !== ($loginUser['user_id'] ?? '')) { + die('수정 권한이 없습니다.'); + } +} + +/* =============================== + 5. 첨부파일 업로드 +=============================== */ +function handle_file_uploads(PDO $pdo, int $postId) +{ + if (empty($_FILES['attach']['name'][0])) return; + + $uploadDir = $_SERVER['DOCUMENT_ROOT'] . '/kngil/uploads/qa/'; + if (!is_dir($uploadDir)) { + mkdir($uploadDir, 0777, true); + } + + $allowExt = ['jpg','jpeg','png','gif','pdf','hwp','doc','docx','xls','xlsx','zip']; + + foreach ($_FILES['attach']['name'] as $i => $oriName) { + + if ($_FILES['attach']['error'][$i] !== UPLOAD_ERR_OK) continue; + + $tmp = $_FILES['attach']['tmp_name'][$i]; + $size = $_FILES['attach']['size'][$i]; + $ext = strtolower(pathinfo($oriName, PATHINFO_EXTENSION)); + + if (!in_array($ext, $allowExt)) continue; + if ($size > 30 * 1024 * 1024) continue; + + $saveName = time() . '_' . bin2hex(random_bytes(6)) . '.' . $ext; + $savePath = $uploadDir . $saveName; + + if (!move_uploaded_file($tmp, $savePath)) continue; + + $stmt = $pdo->prepare(" + INSERT INTO kngil.qa_attachments ( + post_id, + ori_name, + save_path, + file_size, + uploaded_at + ) VALUES ( + :post_id, + :ori_name, + :save_path, + :file_size, + NOW() + ) + "); + + $stmt->execute([ + ':post_id' => $postId, + ':ori_name' => $oriName, + ':save_path' => '/kngil/uploads/qa/' . $saveName, + ':file_size' => $size + ]); + } +} + + +/* =============================== + 6. POST 처리 (등록 / 수정) +=============================== */ +$errors = []; + +$secret = 'N'; +$category = ''; +$title = ''; +$content = ''; + +if ($_SERVER['REQUEST_METHOD'] === 'POST') { + + $category = trim($_POST['category'] ?? ''); + $title = trim($_POST['title'] ?? ''); + $content = trim($_POST['content'] ?? ''); + $secret = isset($_POST['secret']) ? 'Y' : 'N'; + + if ($category === '') $errors[] = '구분을 선택하세요.'; + if ($title === '') $errors[] = '제목을 입력하세요.'; + if ($content === '') $errors[] = '내용을 입력하세요.'; + + // 첨부파일명만 저장 (실파일 저장은 추후 분리 가능) + $attachment = null; + if (!empty($_FILES['attach']['name'][0])) { + $attachment = implode(',', $_FILES['attach']['name']); + } + + if (empty($errors)) { + try { + + if ($isEdit) { + /* ---------- UPDATE ---------- */ + $stmt = $pdo->prepare(" + UPDATE kngil.qa_posts + SET category = :category, + title = :title, + content = :content, + is_secret = :is_secret, + mid_dt = NOW() + WHERE post_id = :pid + "); + $stmt->execute([ + ':category' => $category, + ':title' => $title, + ':content' => $content, + ':is_secret' => $secret, // 'Y' or 'N' + ':pid' => $postId + ]); + handle_file_uploads($pdo, $postId); + + } else { + /* ---------- INSERT ---------- */ + $stmt = $pdo->prepare(" + INSERT INTO kngil.qa_posts ( + user_id, + user_nm, + tel_no, + co_nm, + dept_nm, + category, + title, + content, + is_secret, + stat_bc, + is_read_admin, + cdt_dt + ) VALUES ( + :user_id, + :user_nm, + :tel_no, + :co_nm, + :dept_nm, + :category, + :title, + :content, + :is_secret, + 'wait', + 'N', + NOW() + ) + RETURNING post_id + "); + // var_dump($loginUser); + // exit; + $stmt->execute([ + ':user_id' => $loginUser['user_id'], + ':user_nm' => $loginUser['user_nm'], + ':tel_no' => $loginUser['tel_no'] ?? null, + ':co_nm' => $loginUser['co_nm'] ?? null, + ':dept_nm' => $loginUser['dept_nm'] ?? null, + ':category' => $category, + ':title' => $title, + ':content' => $content, + ':is_secret' => $secret + ]); + + $postId = $stmt->fetchColumn(); + handle_file_uploads($pdo, $postId); + } + + header("Location: /kngil/bbs/qa_detail.php?id={$postId}"); + exit; + + } catch (Exception $e) { + $errors[] = 'DB 오류: ' . $e->getMessage(); + } + } +} + +/* =============================== + 7. 화면 출력 +=============================== */ +include $_SERVER['DOCUMENT_ROOT'].'/kngil/skin/qa_write.skin.php'; diff --git a/kngil/bbs/sales_results.php b/kngil/bbs/sales_results.php new file mode 100644 index 0000000..701ac04 --- /dev/null +++ b/kngil/bbs/sales_results.php @@ -0,0 +1,223 @@ + PDO::ERRMODE_EXCEPTION, + PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC + ] + ); +} catch (Exception $e) { + echo json_encode(["status" => "fail", "message" => "DB 연결 실패"]); + exit; +} + +/* ----------------------------------------------------- + 🔵 공통 날짜 변환 함수 (MM/DD/YYYY → YYYY-MM-DD) +----------------------------------------------------- */ +function normalize_date($dateStr) { + if (!$dateStr) return null; + + // 이미 YYYY-MM-DD라면 그대로 반환 + if (preg_match('/^\d{4}-\d{2}-\d{2}$/', $dateStr)) { + return $dateStr; + } + + // MM/DD/YYYY → YYYY-MM-DD (한자리/두자리 모두 허용) + if (preg_match('/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/', $dateStr, $m)) { + $month = str_pad($m[1], 2, '0', STR_PAD_LEFT); + $day = str_pad($m[2], 2, '0', STR_PAD_LEFT); + return "{$m[3]}-$month-$day"; + } + + // 형식 이상하면 null 리턴 + return null; +} + +/* ----------------------------------------------------- + 🔵 요청 액션 +----------------------------------------------------- */ +$action = $_POST['action'] ?? $_GET['action'] ?? ""; + +/* ===================================================== + 1) LIST +===================================================== */ +if ($action === "list") { + $stmt = $pdo->query(" + SELECT r.*, m.emp_name + FROM sales_results r + LEFT JOIN sales_members m ON r.emp_no = m.emp_no + ORDER BY r.seq_no DESC + "); + + echo json_encode([ + "status" => "ok", + "records" => $stmt->fetchAll() + ]); + exit; +} + +/* ===================================================== + 2) INSERT (seq_no 자동 증가) +===================================================== */ +if ($action === "insert") { + + $sales_date = normalize_date($_POST['sales_date']); + + if (!$sales_date) { + echo json_encode([ + "status" => "error", + "message" => "실적일(sales_date) 형식 오류. YYYY-MM-DD 또는 MM/DD/YYYY 로 입력하세요." + ]); + exit; + } + + $next_seq = $pdo->query("SELECT IFNULL(MAX(seq_no), 0) + 1 FROM sales_results")->fetchColumn(); + + // 🔥 서버에서 총금액 계산 + $qty = (int)($_POST['quantity'] ?? 0); + $unit = (int)($_POST['unit_price'] ?? 0); + $discount = (int)($_POST['discount'] ?? 0); + + $total_amount = ($qty * $unit) - $discount; + if ($total_amount < 0) $total_amount = 0; + + $stmt = $pdo->prepare(" + INSERT INTO sales_results + (seq_no, sales_date, emp_no, client_code, product_code, quantity, unit_price, discount, total_amount, remarks) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + "); + + $stmt->execute([ + $next_seq, + $sales_date, + $_POST['emp_no'], + $_POST['client_code'], + $_POST['product_code'], + $qty, + $unit, + $discount, + $total_amount, // 🔥 클라이언트 값 무시, 서버 계산값 넣기 + $_POST['remarks'] + ]); + + echo json_encode(["status" => "ok"]); + exit; +} + +/* ===================================================== + 3) UPDATE +===================================================== */ +if ($action === "update") { + + $seq_no = $_POST['seq_no'] ?? ''; + if (!$seq_no) { + echo json_encode(["status" => "error", "message" => "seq_no 누락"]); + exit; + } + + unset($_POST['action'], $_POST['seq_no']); + + /* ----------------------------- + 🔵 날짜 변환 (MM/DD/YYYY → YYYY-MM-DD) + ----------------------------- */ + if (!empty($_POST['sales_date'])) { + $date = normalize_date($_POST['sales_date']); + if (!$date) { + echo json_encode(["status" => "error", "message" => "실적일(sales_date) 형식 오류"]); + exit; + } + $_POST['sales_date'] = $date; + } + + /* -------------------------------------------------- + 🔥 quantity / unit_price / discount 변경 여부 확인 + ----------------------------------------------------- */ + $qtyChanged = array_key_exists('quantity', $_POST); + $unitChanged = array_key_exists('unit_price', $_POST); + $discountChanged = array_key_exists('discount', $_POST); + + if ($qtyChanged || $unitChanged || $discountChanged) { + + // 기존 값 가져오기 + $old = $pdo->prepare(" + SELECT quantity, unit_price, discount + FROM sales_results + WHERE seq_no = ? + "); + $old->execute([$seq_no]); + $oldData = $old->fetch(); + + // 새 값이 있으면 새 값 사용, 없으면 기존 값 사용 + $qty = isset($_POST['quantity']) ? (int)$_POST['quantity'] : (int)$oldData['quantity']; + $unit = isset($_POST['unit_price']) ? (int)$_POST['unit_price'] : (int)$oldData['unit_price']; + $discount = isset($_POST['discount']) ? (int)$_POST['discount'] : (int)$oldData['discount']; + + // 서버에서 총금액 재계산 + $total_amount = ($qty * $unit) - $discount; + if ($total_amount < 0) $total_amount = 0; + + $_POST['total_amount'] = $total_amount; // 🔥 강제 반영 + } + + /* ----------------------------- + 🔵 Partial Update (빈값은 무시) + ----------------------------- */ + $fields = []; + $params = []; + + foreach ($_POST as $key => $val) { + + // NULL, 빈문자, undefined는 UPDATE 안함 + if ($val === '' || $val === null || $val === 'undefined') { + continue; + } + + $fields[] = "$key = ?"; + $params[] = $val; + } + + if (!empty($fields)) { + $sql = "UPDATE sales_results SET " + . implode(", ", $fields) + . ", updated_at = NOW() + WHERE seq_no = ?"; + $params[] = $seq_no; + + $stmt = $pdo->prepare($sql); + $stmt->execute($params); + } + + echo json_encode(["status" => "ok"]); + exit; +} + + +/* ===================================================== + 4) DELETE +===================================================== */ +if ($action === "delete") { + + $stmt = $pdo->prepare("DELETE FROM sales_results WHERE seq_no = ?"); + $stmt->execute([$_POST['seq_no']]); + + echo json_encode(["status" => "ok"]); + exit; +} + + +/* ===================================================== + 요청 없음 +===================================================== */ +echo json_encode(["status" => "fail", "message" => "잘못된 요청"]); +exit; +?> diff --git a/kngil/css/adm_style.clean.css b/kngil/css/adm_style.clean.css new file mode 100644 index 0000000..7347f58 --- /dev/null +++ b/kngil/css/adm_style.clean.css @@ -0,0 +1,219 @@ +/* ================================================== + adm_style.clean.css + 외부용 관리자 페이지 덮어쓰기 전용 + 기존 adm_style.css 수정 금지 +================================================== */ + +/* ---------- 기본 톤 ---------- */ +body { + background: #f8fafc; + color: #111827; +} + +/* ---------- 카드 공통 ---------- */ +.card { + border-radius: 14px; + border-color: #e5e7eb; + background: #ffffff; +} + +/* ---------- 관리자 요약 영역 ---------- */ +.adm-summary { + border: 1px solid #e5e7eb !important; + border-radius: 14px; + background: #ffffff; + box-shadow: 0 1px 2px rgba(0,0,0,0.04); +} + +.adm-summary .adm-row { + padding: 10px 16px; + border-bottom: 1px solid #e5e7eb; +} + +.adm-summary .adm-row:last-child { + border-bottom: none; +} + +.adm-summary .label { + color: #6b7280; + font-weight: 500; +} + +.adm-summary .value.bold { + color: #111827; + font-weight: 700; +} + +/* ---------- 사용량 바 ---------- */ +.usage-box { + width: 520px; +} + +.usage-text { + font-size: 12px; + color: #6b7280; +} + +.usage-bar { + height: 10px; + border-radius: 999px; + background: #e5e7eb; + overflow: hidden; + margin-top: 6px; +} + +.usage-used { + background: #2563eb !important; + height: 100%; +} + +.usage-remain { + display: none; +} + +/* ---------- 검색 영역 ---------- */ +.adm-search { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 10px 14px; +} + +.adm-search input, +.adm-search select { + height: 36px; + border-radius: 8px; + border: 1px solid #e5e7eb; +} + +/* ---------- 상단 타이틀 ---------- */ +.adm-title { + font-size: 22px; + font-weight: 700; + margin: 20px 0; +} + +/* ---------- 상단 보조 버튼 ---------- */ +.adm-title-actions button { + background: #f3f4f6; + border: 1px solid #e5e7eb; + color: #374151; + border-radius: 8px; +} + +.adm-title-actions button:hover { + background: #e5e7eb; +} + +/* ---------- 저장 버튼 ---------- */ +#btnSave_comp { + background: #2563eb !important; + border-color: #2563eb !important; + color: #ffffff !important; + border-radius: 8px; +} + +#btnSave_comp:hover { + background: #1d4ed8 !important; +} + +/* ---------- 삭제 버튼 ---------- */ +#btnDelete { + background: transparent !important; + color: #dc2626 !important; + border-color: #dc2626 !important; + border-radius: 8px; +} + +#btnDelete:hover { + background: #fee2e2 !important; +} + +/* ---------- 추가 버튼 ---------- */ +#btnAdd { + background: transparent !important; + color: #16a34a !important; + border-color: #16a34a !important; + border-radius: 8px; +} + +#btnAdd:hover { + background: #ecfdf5 !important; +} + +/* ---------- 일괄 생성 버튼 ---------- */ +#btnBulkCreate { + background: #f3f4f6 !important; + color: #374151 !important; + border-color: #e5e7eb !important; + border-radius: 8px; +} + +/* ---------- Grid 카드 ---------- */ +.grid-card { + border-radius: 14px; + overflow: hidden; +} + +/* ---------- w2ui Grid 외부용 ---------- */ +.w2ui-grid { + border-radius: 14px; + overflow: hidden; + border: 1px solid #e5e7eb; +} + +.w2ui-grid-header { + background: #f9fafb !important; + font-weight: 600; +} + +.w2ui-grid-records tr { + height: 44px; +} + +/* ---------- 홈 버튼 ---------- */ +.btn-home-fixed { + background: #111827; + border-radius: 10px; +} + +.btn-home-fixed:hover { + background: #000000; +} + +/* =============================== + 외부 사용자용 레이아웃 폭 제한 +=============================== */ + +/* 페이지 전체 폭 컨테이너 효과 */ +body { + background: #f8fafc; /* 살짝 밝은 배경 */ +} + +/* 관리자 페이지 실 컨텐츠 폭 제한 */ +.adm-title, +.adm-summary, +.adm-search, +.card { + max-width: 1400px; /* ← 여기만 조절 */ + margin-left: auto; + margin-right: auto; +} + +/* 카드 간 간격 통일 */ +.card { + border-radius: 12px; +} + +/* 검색 영역도 카드 느낌 */ +.adm-search { + background: #fff; + padding: 12px 16px; + border-radius: 12px; + border: 1px solid #e5e7eb; +} + +/* 버튼 그룹 정리 */ +.adm-search button { + white-space: nowrap; +} diff --git a/kngil/css/adm_style.css b/kngil/css/adm_style.css new file mode 100644 index 0000000..6fb2397 --- /dev/null +++ b/kngil/css/adm_style.css @@ -0,0 +1,532 @@ +/*---------------20260119---------------*/ +/* =============================== + 서비스 등록 팝업 +=============================== */ + +.service-popup { + padding: 10px; + font-size: 13px; +} + +/* 상단 */ +.service-top { + display: flex; + gap: 16px; + margin-bottom: 12px; +} + +/* 회원 정보 */ +.service-member { + flex: 1; + border: 1px solid #ddd; + padding: 10px; + background: #fafafa; +} + +.service-member > div { + margin-bottom: 4px; +} + +.purchase-date { + margin-top: 8px; +} + +/* 상품 선택 */ +.service-product { + width: 420px; + border: 1px solid #ddd; + padding: 10px; + background: #fff; +} + +.service-product .title { + font-weight: bold; + margin-bottom: 6px; +} + +/* 저장 / 삭제 바 */ +.service-save-bar { + display: flex; + justify-content: flex-end; + align-items: center; + margin: 12px 0; +} + +.service-save-bar .btn-delete { + padding: 6px 14px; + font-size: 13px; + font-weight: 600; + border-radius: 4px; + border: none; + background: rgb(247, 74, 52); + color: #fff; +} + +.service-save-bar .btn-delete:hover { + background: #d32f2f; +} + +.service-save-bar .btn-save { + padding: 6px 14px; + font-size: 13px; + font-weight: 600; + border-radius: 4px; + border: none; + background: rgb(70, 58, 248); + color: #fff; +} + +.service-save-bar .btn-save:hover { + background: #3c04f3; +} + +.service-save-bar .right-actions { + display: flex; + gap: 8px; /* 삭제-저장 간격 */ +} + +/* Grid */ +.service-grid { + margin-top: 10px; +} + +/* 합계 */ +.service-summary { + display: flex; + justify-content: flex-end; + gap: 20px; + padding: 10px; + border-top: 2px solid #ccc; + margin-top: 8px; + font-weight: bold; +} + +/* =============================== + 상품등록 +=============================== */ + +.product-wrap { + max-width: 900px; + margin: 40px auto; + border: 1px solid #aaa; + background: #fff; +} + +.product-header { + background: #f2f2f2; + padding: 10px 14px; + font-size: 16px; + font-weight: 700; + text-align: center; + position: relative; +} + +.product-header .btn-close { + position: absolute; + right: 10px; + top: 8px; + cursor: pointer; +} + +.product-toolbar { + padding: 8px 10px; + border-bottom: 1px solid #ccc; + display: flex; + gap: 6px; +} + +.product-toolbar button { + padding: 4px 10px; + font-size: 13px; +} + +/* =============================== + Grid 액션 바(슈퍼관리자 상단) +=============================== */ + +/* 검색 + 저장 버튼 한 줄 정렬 */ +/* 전체 한 줄 */ +.super-search-wrap { + display: flex; + align-items: center; + gap: 10px; + margin: 10px 20px; +} + +/* 좌측 검색 그룹 */ +.super-search { + display: flex; + align-items: center; + gap: 8px; +} + +/* 검색 입력 공통 */ +.super-search select, +.super-search input { + height: 34px; + padding: 0 10px; + font-size: 13px; + border-radius: 6px; + border: 1px solid #d1d5db; +} + +/* 검색 버튼 */ +#btnSearch { + height: 34px; + padding: 0 14px; + border-radius: 6px; + border: 1px solid #2563eb; + background: #2563eb; + color: #374151; + cursor: pointer; +} + +#btnSearch:hover, +#btnSearch:focus, +#btnSearch:active { + background: #ffffff; + color: #374151; + border: 1px solid #2563eb; + box-shadow: none; + outline: none; +} + +/* 🔥 저장 버튼을 오른쪽 끝으로 */ +#btnSave { + margin-left: auto; + height: 34px; + padding: 0 16px; + border-radius: 6px; + border: 1px solid #2563eb; + background: #2563eb; + color: #fff; + cursor: pointer; +} + +#btnSave:hover { + background: #1d4ed8; +} + +#schMemberStatus { + width: 130px; +} + +#schMemberName { + width: 160px; +} + +#schRemainArea { + width: 160px; + text-align: right; +} + +#btnSuperSearch { + margin-left: auto; + height: 34px; + padding: 0 16px; + font-size: 13px; + border-radius: 6px; + border: 1px solid #2563eb; + background: #2563eb; + color: #fff; + cursor: pointer; +} + +#btnSuperSearch:hover { + background: #1d4ed8; +} + +.grid-action-bar { + display: flex; + justify-content: flex-end; + margin-bottom: 6px; +} + +.btn-save { + padding: 6px 14px; + font-size: 13px; + font-weight: 600; + border-radius: 4px; + border: none; + background: #2f80ed; + color: #fff; +} + +.btn-save:hover { + background: #1f66d1; +} + +/* =============================== + 관리자 요약 영역 (거래처관리자 상단) +=============================== */ + +.adm-summary { + border: 2px solid #1f6fd8; + font-size: 13px; + padding: 0; +} + +.adm-row { + display: flex; + align-items: center; + padding: 6px 10px; + border-bottom: 1px solid #1f6fd8; +} + +.adm-row:last-child { + border-bottom: none; +} + +.adm-item { + display: flex; + align-items: center; + margin-right: 20px; +} + +.adm-item.right { + margin-left: auto; +} + +.label { + font-weight: 600; + margin-right: 6px; +} + +.value { + margin-right: 8px; +} + +.value.bold { + font-weight: 700; +} + + +/* 사용량 */ +.adm-row.usage { + align-items: flex-start; +} + +.usage-box { + margin-left: auto; + width: 520px; +} + +.usage-text { + display: flex; + justify-content: space-between; + font-size: 12px; + margin-bottom: 4px; +} + +.usage-bar { + display: flex; + height: 22px; + background: #eee; + border-radius: 3px; + overflow: hidden; + font-size: 12px; + font-weight: 700; + color: #fff; + margin-top: 6px; +} + +.usage-used { + background: #ff6b6b; + text-align: center; + line-height: 22px; + width: 60%; + height: 100%; + float: left; +} + +.usage-remain { + background: #4caf50; + text-align: center; + line-height: 22px; + width: 40%; + height: 100%; + float: left; +} + +/*검색영역*/ +.adm-search { + display: flex; + align-items: center; + gap: 6px; + margin: 0 20px 10px; +} + +.adm-search input, +.adm-search select { + height: 32px; + padding: 0 8px; + font-size: 13px; + border-radius: 6px; + border: 1px solid #d1d5db; + background: #fff; + width: 120px; +} + +.adm-search button { + height: 32px; + padding: 0 10px; + font-size: 13px; + border-radius: 6px; + border: 1px solid #d1d5db; + background: #ffffff; + cursor: pointer; + margin-left: 0; +} + +.adm-search button:hover { + background: #f9fafb; +} + +#btnSave_comp { + background: #2563eb; + border-color: #2563eb; + color: #fff; + margin-left: auto; +} + +#btnSave_comp:hover { + background: #1d4ed8; +} + +#btnDelete { + color: #dc2626; + border-color: #dc2626; +} + +#btnDelete:hover { + background: #fee2e2; +} + +#btnSearch { + margin-left: auto; + background: #f3f4f6; + margin-left: 4px; +} + +#btnAdd { + border-color: #22c55e; + color: #22c55e; +} + +#btnAdd:hover { + background: #ecfdf5; +} + +/* 좌측 상단 홈 버튼 - 타이틀 높이 기준 정렬 */ +.btn-home-fixed { + position: fixed; + top: 14px; + left: 16px; + z-index: 2000; + + width: 40px; + height: 40px; + + display: flex; + align-items: center; + justify-content: center; + + background: #000; + color: #fff; + border-radius: 8px; +} + +/* ⭐ 반드시 SVG 크기 제한 */ +.btn-home-fixed .icon-home { + width: 20px; + height: 20px; +} + +.adm-member-input { + width: 140px; + margin-right: 6px; +} + +.btn-bulk { + margin-right: 12px; + background: #555; + color: #080808; +} + + +/* =============================== + 관리자 페이지 타이틀 (슈퍼&거래처) +=============================== */ + +.adm-title { + position: relative; + text-align: center; + font-size: 24px; + font-weight: 700; + margin: 12px 0 16px; +} + +/* 우측 상단 버튼 */ +.adm-title-actions { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + display: flex; + gap: 8px; +} + +/* 구매이력 버튼 */ +.btn-history { + padding: 6px 14px; + font-size: 13px; + border: 1px solid #999; + background: #f5f5f5; + cursor: pointer; + right: 0; +} +.btn-history:hover { + background: #e9e9e9; +} + +/* 상품등록 버튼 (강조 스타일) */ +.btn-product { + padding: 6px 14px; + font-size: 13px; + border: 1px solid #1f6fd8; + background: #1f6fd8; + color: #fff; + cursor: pointer; +} +.btn-product:hover { + background: #185bb0; +} + +.btn-service { + padding: 6px 14px; + font-size: 13px; + border: 1px solid #444; + background: #444; + color: #fff; +} + +/* =============================== + 공통 +=============================== */ + +body { + font-size: 13px; +} + +.card { + background: #fff; + border: 1px solid #ddd; + padding: 16px 20px; + margin-bottom: 16px; +} + +/* 버튼 공통 */ +button { + cursor: pointer; +} + diff --git a/kngil/css/common.css b/kngil/css/common.css new file mode 100644 index 0000000..ff692a7 --- /dev/null +++ b/kngil/css/common.css @@ -0,0 +1,3700 @@ +@charset "UTF-8"; +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"); +html { + font-size: 10px; +} +html[lang=ko-KR], html[lang=ko] { + font-family: "Noto Sans KR", sans-serif; +} +html[lang=en], +html *[lang=en] { + font-family: "Noto Sans KR", Arial, sans-serif, serif; +} +html[lang=en] body, +html *[lang=en] body { + font-size: 22px; + font-weight: 400; +} +html body { + font-size: 20px; + font-weight: 400; + line-height: 1.4; + color: #000; + letter-spacing: -0.04em; +} + +/* ====================================================================== */ +/* [Web Font] +/* ====================================================================== */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +html { + -webkit-text-size-adjust: 100%; +} + +main { + display: block; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: bold; +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + border-style: none; +} + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +progress { + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type=checkbox], +[type=radio] { + box-sizing: border-box; + padding: 0; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; + appearance: none; + margin: 0; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +[hidden] { + display: none; +} + +/* reset */ +html * { + box-sizing: border-box; + word-wrap: break-word; +} + +body, +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +code, +form, +figure, +legend, +input, +textarea, +button, +p, +blockquote, +th, +td, +form, +fieldset, +blockquote, +iframe { + margin: 0; + padding: 0; + text-size-adjust: 100%; +} + +article, +aside, +canvas, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary { + display: block; +} + +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +img { + display: inline-block; + vertical-align: top; + max-width: 100%; + border: 0; + image-rendering: -moz-crisp-edges; /* firefox */ + image-rendering: -o-crisp-edges; /* opera */ + image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */ + image-rendering: crisp-edges; + transform: translateZ(0); +} + +fieldset { + border: 0; +} + +ul, +ol, +li { + list-style: none; +} + +pre { + white-space: pre-wrap; +} + +legend, +caption { + position: relative; + clip: rect(0 0 0 0); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + border: 0; + padding: 0; + white-space: nowrap; + clear: both; +} + +a { + color: inherit; + cursor: pointer; + background-color: transparent; +} +a:link { + text-decoration: none; +} +a:hover, a:focus, a:active, a:visited { + text-decoration: none; +} + +em, +i, +address, +cite { + font-style: normal; + font-weight: normal; +} + +input, +textarea, +select, +button, +table { + font-size: inherit; + font-family: inherit; + border: 0; + background-color: transparent; +} + +button, +select { + cursor: pointer; +} + +textarea, +input, +select { + border-radius: 0; + border: 0; + outline-color: -moz-use-text-color; + outline-width: medium; +} + +textarea { + resize: none; + appearance: none; +} + +label { + cursor: pointer; + -webkit-touch-callout: none; + user-select: none; +} + +table { + table-layout: fixed; + border-collapse: collapse; + border-spacing: 0; +} + +th, +td { + border-collapse: collapse; +} + +select::-ms-expand { + display: none; +} + +/** + * 반응형 폰트 크기 (responsive font) + * @param {number} $min-px - 최소 폰트 크기 (px) + * @param {number} $max-px - 최대 폰트 크기 (px) + * @param {number} $min-vw - 최소 뷰포트 너비 (기본값: 375px) + * @param {number} $max-vw - 최대 뷰포트 너비 (기본값: 1920px) + */ +/** + * 박스 그림자 (box-shadow) + * @param {number} $x - X 오프셋 (기본값: 0px) + * @param {number} $y - Y 오프셋 (기본값: 3px) + * @param {number} $blur - 블러 반경 (기본값: 6px) + * @param {number} $spread - 확산 반경 (기본값: 0px) + * @param {color} $color - 색상 (기본값: rgba(0, 0, 0, 0.25)) + * @param {boolean} $important - !important 사용 여부 (기본값: false) + */ +/** + * 텍스트 그림자(text-shadow) + * @param {number} $x - X 오프셋 (기본값: 0px) + * @param {number} $y - Y 오프셋 (기본값: 1px) + * @param {number} $blur - 블러 반경 (기본값: 0px) + * @param {color} $color - 색상 (기본값: rgba(0, 0, 0, 0.25)) + * @param {boolean} $important - !important 사용 여부 (기본값: false) + */ +/** + * 미디어 쿼리 mixin + * @param {string|number} $width - 브레이크포인트 이름 또는 픽셀 값 + * @param {string} $type - 'min' 또는 'max' + * @example + * @include mq('desktop') { ... } + * @include mq(1920px) { ... } + * @include mq('tablet', 'max') { ... } + */ +/** + * 배경 이미지 커버 + * @param {string} $url - 배경 이미지 경로 + */ +/** + * 그라디언트 박스 + * @param {number|string} $direction - 그라디언트 방향 (기본값: 90deg) + * @param {color} $color1 - 시작 색상 + * @param {color} $color2 - 끝 색상 + */ +/** + * 리스트 불릿 스타일 + * @param {number} $padding-left - 왼쪽 패딩 (기본값: 20px) + * @param {color} $color - 불릿 색상 (기본값: #fff) + * @param {number} $opacity - 불릿 투명도 (기본값: 0.6) + */ +html { + scroll-behavior: smooth; +} +html.is-locked body { + height: calc(var(--window-inner-height) - 1px); + overflow: hidden; + box-sizing: border-box; +} +html body { + margin: 0; + padding: 0; +} + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100px; + padding: 0 48px; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent); + transition: all 0.3s ease; + z-index: 99; + display: flex; + align-items: center; + justify-content: space-between; +} +@media only screen and (max-width: 991px) { + .header { + height: 48px; + padding: 0 8px 0 16px; + } +} +.header-right { + gap: 20px; + display: flex; + align-items: center; + justify-content: center; +} +.header h1 { + z-index: 1; +} +.header h1 a { + display: block; + width: 90px; + height: 22px; + background: url(../img/logo_kngil.svg) center no-repeat; + background-size: contain; + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} +.header .menu-box, +.header .menu-user, +.header .menu-all, +.header .menu-admin { + position: relative; +} +.header .menu-box { + padding: 10px 0; +} +.header .menu-list { + display: none; + background: #fff; + border-radius: 4px; + box-sizing: border-box; + border: 1px solid #131313; + position: absolute; + left: 50%; + top: 50px; + padding: 4px; +} +.header .menu-list.show { + display: flex; + animation: menuListShow 0.3s ease forwards; +} +.header .menu-list::before { + content: " "; + background: url(../img/tri_img.svg) no-repeat; + background-size: cover; + width: 12px; + height: 10px; + position: absolute; + top: -9px; + left: calc(50% - 6px); +} +.header .menu-list li { + width: 68px; + height: 32px; + text-align: center; + font-size: 13px; + font-weight: 500; + cursor: pointer; +} +.header .menu-list li:hover { + background: var(--color-yellow); +} +.header .menu-list li a { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.header .menu-all { + cursor: pointer; + display: block; + width: 32px; + height: 32px; + position: relative; + z-index: 1; +} +.header .menu-all.open span:nth-child(1) { + transform: translateY(8px) rotate(-45deg); +} +.header .menu-all.open span:nth-child(2) { + opacity: 0; +} +.header .menu-all.open span:nth-child(3) { + transform: translateY(-8px) rotate(45deg); +} +.header .menu-all span { + width: 24px; + height: 2px; + position: absolute; + left: 4px; + background-color: #fff; + transition: all 0.2s linear; +} +.header .menu-all span:nth-child(1) { + top: 7px; +} +.header .menu-all span:nth-child(2) { + top: 15px; +} +.header .menu-all span:nth-child(3) { + bottom: 7px; +} + +.sitemap { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: var(--window-inner-height); + background-color: #111; + display: flex; + justify-content: center; + overflow: hidden; + gap: 16px; + padding: 20px; + pointer-events: none; + animation: enableHover 0.8s forwards; + animation-delay: 0.3s; + display: none; +} +.sitemap.open { + display: flex; +} +.sitemap.open ~ * { + overflow: hidden !important; +} +@media only screen and (max-width: 1279px) { + .sitemap { + flex-direction: column; + justify-content: space-between; + } + .sitemap li { + height: 100%; + } + .sitemap li span { + text-align: center; + } + .sitemap li:has(.bg-line) { + display: none; + } +} +.sitemap div[class*=bg-line] { + position: relative; + width: 1px; + height: 100%; + background-color: #fff; + animation-duration: 0.8s; + animation-timing-function: ease-out; + animation-fill-mode: both; +} +.sitemap .bg-line.down { + animation-name: slideDown; +} +.sitemap .bg-line.up { + animation-name: slideup; +} +.sitemap li:has(:not(.bg-line)) { + background-size: cover; + background-position: center; + position: relative; + overflow: hidden; + cursor: pointer; + transition: all 0.5s; + width: 20%; + z-index: 1; +} +.sitemap li:has(:not(.bg-line)).value { + background-image: url(../img/img_sitemap_01.jpg); + background-position: left 42% center; + background-size: cover; + background-repeat: no-repeat; +} +.sitemap li:has(:not(.bg-line)).value a::before { + background-color: rgba(0, 0, 0, 0.3); +} +.sitemap li:has(:not(.bg-line)).provided { + background-image: url(../img/img_sitemap_02.jpg); + background-position: left 32% center; + background-size: cover; + background-repeat: no-repeat; +} +.sitemap li:has(:not(.bg-line)).provided a::before { + background-color: rgba(0, 0, 0, 0.2); +} +.sitemap li:has(:not(.bg-line)).primary { + background-image: url(../img/img_sitemap_03.jpg); + background-position: left 58% center; + background-size: cover; + background-repeat: no-repeat; +} +.sitemap li:has(:not(.bg-line)).analysis { + background-image: url(../img/img_sitemap_04.jpg); + background-position: left 38% center; + background-size: cover; + background-repeat: no-repeat; +} +.sitemap li:has(:not(.bg-line)).analysis a::before { + background-color: rgba(0, 0, 0, 0.4); +} +.sitemap li:has(:not(.bg-line)).results { + background-image: url(../img/img_sitemap_05.jpg); + background-position: left 2% center; + background-size: cover; + background-repeat: no-repeat; +} +.sitemap li:has(:not(.bg-line)) a { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + padding-left: 24px; + padding-top: 20px; + width: 100%; + height: 100%; + color: #fff; + white-space: nowrap; + transform-origin: left; + text-decoration: none; + position: relative; + z-index: 2; +} +.sitemap li:has(:not(.bg-line)) a::before, .sitemap li:has(:not(.bg-line)) a::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.sitemap li:has(:not(.bg-line)) a::before { + background-color: rgba(0, 0, 0, 0.5); + transition: 0.5s ease; + z-index: -1; +} +.sitemap li:has(:not(.bg-line)) a::after { + background-color: #111; + z-index: 1; + animation: slideRight 0.5s ease-in forwards; + animation-delay: 0.1s; +} +.sitemap li:has(:not(.bg-line)) a span { + position: relative; + font-size: 42px; + font-weight: 900; + line-height: 1.2; + z-index: 2; +} +@media only screen and (max-width: 1023px) { + .sitemap li:has(:not(.bg-line)) a span { + font-size: 2.8rem; + } +} +.sitemap li:has(:not(.bg-line)) a span::before { + position: absolute; + top: -100px; + left: 0px; + width: 100%; + height: 100%; + opacity: 0.2; + font-weight: 900; + line-height: 80%; + font-size: 80px; + display: none; + z-index: -1; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)) a span::before { + display: block; + top: -50%; + left: 0; + width: max-content; + line-height: 1; + font-size: 60px; + } +} +@media only screen and (max-width: 991px) { + .sitemap li:has(:not(.bg-line)) a span::before { + font-size: 3.8rem; + } +} +@media only screen and (max-width: 575px) { + .sitemap li:has(:not(.bg-line)) a span::before { + display: none; + } +} +.sitemap li:has(:not(.bg-line)) a p { + font-size: 16px; + font-weight: 400; + margin: 0; + color: #fff; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)) a p { + display: none; + } +} +.sitemap li:has(:not(.bg-line)) a em { + font-weight: 700; + color: #fff; +} +.sitemap li:has(:not(.bg-line)).value a span::before { + content: "\aValue of"; + white-space: pre; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)).value a span::before { + content: "Value of"; + } +} +.sitemap li:has(:not(.bg-line)).provided a span::before { + content: "Provided\a Data"; + white-space: pre; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)).provided a span::before { + content: "Provided Data"; + } +} +.sitemap li:has(:not(.bg-line)).primary a span::before { + content: "Key \a Features"; + white-space: pre; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)).primary a span::before { + content: "Key Features"; + } +} +.sitemap li:has(:not(.bg-line)).analysis a span::before { + content: "Data\a Analysis"; + white-space: pre; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)).analysis a span::before { + content: "Data Analysis"; + } +} +.sitemap li:has(:not(.bg-line)).results a span::before { + content: "Exploration\aResults"; + white-space: pre; +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)).results a span::before { + content: "Exploration Results"; + } +} +@media only screen and (min-width: 1280px) { + .sitemap li:has(:not(.bg-line)):hover { + width: 60%; + } +} +@media only screen and (min-width: 1280px) { + .sitemap li:has(:not(.bg-line)):hover a { + opacity: 1; + transform: scale(1.3); + } +} +.sitemap li:has(:not(.bg-line)):hover a::before { + opacity: 0; + background-color: transparent; +} +@media only screen and (min-width: 1280px) { + .sitemap li:has(:not(.bg-line)):hover a span::before { + display: initial; + } + .sitemap li:has(:not(.bg-line)):hover a em { + color: var(--color-yellow); + } +} +@media only screen and (max-width: 1279px) { + .sitemap li:has(:not(.bg-line)) { + width: 100%; + } +} + +@keyframes menuListShow { + 0% { + opacity: 0; + transform: translateX(-50%) translateY(-10px); + } + 100% { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} +.sitemap.open ~ *, +body:has(.sitemap.open), +html:has(.sitemap.open) { + overflow: hidden !important; +} +.sitemap.open ~ *.lenis-scrolling, .sitemap.open ~ *.lenis, +body:has(.sitemap.open).lenis-scrolling, +body:has(.sitemap.open).lenis, +html:has(.sitemap.open).lenis-scrolling, +html:has(.sitemap.open).lenis { + overflow: hidden !important; +} + +/* common */ +.wrap { + position: relative; + width: 100%; + min-height: var(--window-inner-height); + overflow: hidden; + flex-direction: column; + max-width: 1920px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} +.wrap.main { + height: var(--window-inner-height); + min-height: var(--window-inner-height); +} + +.inner { + max-width: 1440px; + margin: 0 auto; +} + +.container { + position: relative; + width: 100%; + flex-grow: 1; +} +.container section { + max-width: 1920px; + margin: 0 auto; +} + +.footer { + position: relative; + width: 100%; + background: #14100c; + color: var(--text-white); + padding: 16px 60px; + z-index: 9; +} +@media only screen and (max-width: 1279px) { + .footer { + padding: 16px 32px; + } +} +@media only screen and (max-width: 767px) { + .footer { + padding: 40px 32px; + } +} +.footer-wrap { + width: 100%; + gap: 40px; + display: flex; + align-items: flex-start; + justify-content: space-between; +} +@media only screen and (max-width: 1279px) { + .footer-wrap { + gap: 24px; + } +} +@media only screen and (max-width: 767px) { + .footer-wrap { + flex-direction: column; + } +} +.footer-menu { + gap: 32px; + font-size: 20px; + font-weight: 500; + color: #fff; + white-space: nowrap; + display: flex; + align-items: center; + justify-content: space-between; +} +@media only screen and (max-width: 1439px) { + .footer-menu { + display: none; + } +} +.footer-close { + display: none; +} +.footer .comp-info { + min-width: 240px; + flex-direction: column; + color: rgba(255, 255, 255, 0.5019607843); + display: flex; + align-items: flex-start; + justify-content: flex-start; +} +.footer .comp-info .logo { + width: 200px; + height: 45px; + opacity: 0.8; +} +.footer .comp-info .logo img { + vertical-align: middle; +} +.footer .comp-info .ceo { + font-size: 14px; +} +.footer .comp-info .ceo em { + font-size: 18px; + font-weight: 500; + margin-left: 4px; +} +@media only screen and (max-width: 767px) { + .footer .comp-info .ceo em { + font-size: 14px; + } +} +.footer .comp-inner { + width: 100%; + font-size: 16px; + color: rgba(255, 255, 255, 0.5019607843); + gap: 8px; + flex-wrap: wrap; + display: flex; + align-items: center; + justify-content: space-between; +} +@media only screen and (max-width: 767px) { + .footer .comp-inner { + display: grid; + grid-template-columns: 100%; + gap: 16px; + font-size: 14px; + } +} +.footer .comp-contact { + width: max-content; + gap: 56px; + display: flex; + align-items: center; + justify-content: space-between; +} +@media only screen and (max-width: 1279px) { + .footer .comp-contact { + justify-content: end; + } +} +@media only screen and (max-width: 767px) { + .footer .comp-contact { + width: inherit; + max-width: 400px; + grid-row: 3; + } +} +.footer .privacy-box { + font-size: 18px; + font-weight: 500; + gap: 40px; + display: flex; + align-items: center; + justify-content: flex-start; +} +@media only screen and (max-width: 767px) { + .footer .privacy-box { + font-size: 14px; + } +} +.footer .privacy-box .privacy { + position: relative; + color: #fff; + opacity: 0.9; +} +.footer .privacy-box .privacy::after { + position: absolute; + content: "|"; + font-weight: 300; + font-size: 16px; + color: #aaa; + top: 1px; + right: -22px; +} +@media only screen and (max-width: 767px) { + .footer .privacy-box .privacy::after { + font-size: 12px; + } +} +.footer .footer-family { + position: relative; + width: 160px; +} +@media only screen and (max-width: 767px) { + .footer .footer-family { + width: 100%; + max-width: 400px; + } +} +.footer .footer-family .btn-family { + position: relative; + min-width: 160px; + width: 100%; + color: #fff; + font-weight: 500; + background: #2c2121; + padding: 8px 12px; + display: flex; + align-items: center; + justify-content: space-between; +} +.footer .footer-family .btn-family.open::after { + transform: scaleY(1); +} +.footer .footer-family .btn-family::after { + content: ""; + width: 12px; + aspect-ratio: 1/1; + background-image: url(../img/ico/ico_angle.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transform: scaleY(-1); + transition: 0.2s; +} +.footer .footer-family .family-list { + position: absolute; + left: 0; + bottom: 100%; + width: 100%; + padding: 0 10px; + background: #fff; + border-radius: 4px 4px 0 0; + color: #777; + font-size: 12px; + box-sizing: border-box; + box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1333333333); + display: none; +} +.footer .footer-family .family-list.open { + display: block; +} +.footer .footer-family .family-list li { + padding: 8px 0; + border-bottom: 1px solid #ddd; +} +.footer .address { + color: rgba(255, 255, 255, 0.6666666667); + display: flex; + flex-wrap: wrap; + gap: 2px 24px; + min-width: 60%; +} +@media only screen and (max-width: 1279px) { + .footer .copyright { + font-size: 13px; + } +} + +.main .footer { + display: none; + height: max-content; + background: rgba(20, 16, 12, 0.8666666667); +} +@media only screen and (max-width: 767px) { + .main .footer { + display: none !important; + } +} +.main .footer.on { + position: absolute; + bottom: 0; + display: block; + animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} +.main .footer .footer-close { + background: url(../img/ico/ico_footer_close.svg) no-repeat; + background-size: cover; + background-position: center; + position: absolute; + width: 40px; + height: 36px; + top: -36px; + left: 0; + display: block; + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} +.floating-menu { + width: 80px; + position: fixed; + top: 124px; + right: 0px; + z-index: 98; + padding: 61px 0 61px 8px; + background-image: url(../img/bg_floating_menu.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + filter: drop-shadow(-4px 4px 10px rgba(0, 0, 0, 0.25)); + overflow: hidden; +} +.floating-menu ul { + width: 100%; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; + gap: 2px; + position: relative; + z-index: 1; +} +.floating-menu li { + position: relative; + width: 75px; + height: 78px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; +} +.floating-menu li a { + width: 100%; + height: 100%; + text-align: center; + font-weight: 700; + gap: 4px; + flex-direction: column; + position: relative; + z-index: 10; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; +} +.floating-menu li a:hover span { + color: #FFD700; +} +.floating-menu li a:hover .ico-buy { + background-color: #FFD700; +} +.floating-menu li a:hover .ico-faq { + background-color: #FFD700; +} +.floating-menu li span { + display: block; + color: #ffffff; + font-weight: 500; + text-align: center; + font-size: 14px; + letter-spacing: 0.5px; + position: relative; + z-index: 10; +} +.floating-menu li i { + width: 28px; + height: 28px; +} +.floating-menu li i.ico-buy { + background-color: #fff; + -webkit-mask-image: url("../img/ico/ico_floating_buy.svg"); + mask-image: url("../img/ico/ico_floating_buy.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.floating-menu li i.ico-faq { + background-color: #fff; + -webkit-mask-image: url("../img/ico/ico_floating_faq.svg"); + mask-image: url("../img/ico/ico_floating_faq.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.btn-wrap { + width: 100%; + gap: 8px; + display: flex; + align-items: center; + justify-content: space-between; +} +.btn-wrap.right { + justify-content: flex-end; +} + +.btn-cancel { + background-color: #eee; + font-weight: 500; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + font-size: 16px; + color: #000; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.062745098); + transition: background-color 0.3s ease-out; +} + +.btn-primary { + width: 120px; + background-color: rgb(39, 36, 29); + color: #fff; + border-radius: 4px; + padding: 0 16px; + display: flex; + justify-content: center; + align-items: center; + column-gap: 12px; + height: 45px; + padding: 0 16px; + font-size: 16px; + font-weight: 700; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.062745098); + transition: background-color 0.3s ease-out; +} +.btn-primary:hover { + opacity: 0.9; +} + +.btn-secondary { + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + font-size: 16px; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.062745098); + transition: background-color 0.3s ease-out; + color: #fff; + font-weight: 700; + background: rgb(14, 60, 46); + border-radius: 4px; + padding: 0 16px; +} +.btn-secondary:hover { + background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.2509803922) 0%, rgba(39, 36, 29, 0) 80%); +} + +.btn-save { + padding: 4px 20px; + height: 40px; + background-origin: border-box; + border: 1px solid transparent; + border-radius: 3px; + font-size: 16px; + font-weight: bold; + color: #fff; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), linear-gradient(180deg, #886d35 0%, #423625 9%, #f3dba8 26%, #0e0b06 84%, #574b30 100%); +} +.btn-save:hover { + background-color: rgb(39, 36, 29); + background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.2509803922) 0%, rgba(39, 36, 29, 0) 80%); +} + +.btn-full { + width: 100%; + height: 48px; + background-color: #0e3c2e; + color: #fff; + border-radius: 4px; + padding: 0 16px; +} + +.btn-top { + position: fixed; + bottom: 60px; + right: 60px; + z-index: 10; + width: 60px; + height: 60px; + background-color: #14100c; + cursor: pointer; + border-radius: 50%; + opacity: 0; + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} +.btn-top::before { + content: ""; + background: #fff; + width: 30px; + height: 2px; + display: block; + position: absolute; + top: 12px; + left: calc(50% - 15px); + border-radius: 20px; +} +.btn-top .arrow { + width: 2px; + height: 32px; + background-color: #fff; + position: absolute; + bottom: 8px; + left: 50%; + border-radius: 20px; +} +.btn-top .arrow::after, .btn-top .arrow::before { + position: absolute; + content: ""; + width: 16px; + height: 2px; + background-color: #fff; + top: 6px; + left: 50%; +} +.btn-top .arrow::after { + transform: translateX(calc(-50% + 6px)) rotate(45deg); +} +.btn-top .arrow::before { + transform: translateX(calc(-50% - 6px)) rotate(-45deg); +} +.btn-top:hover .arrow { + bottom: 14px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn-top:hover .arrow::after, .btn-top:hover .arrow::before { + bottom: 8px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn-top:hover::before { + background: var(--color-yellow); +} +.btn-top.topbtn-off { + transition: opacity 0.3s; + opacity: 0; +} +.btn-top.topbtn-on { + transition: opacity 0.3s; + opacity: 1; +} + +.main .btn-top.topbtn-off { + visibility: hidden; +} + +label { + display: inline-flex; + align-items: center; + gap: 8px; +} + +[type=checkbox] { + width: 16px; + height: 16px; + cursor: pointer; + -webkit-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +[type=checkbox]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} + +.popup-wrap { + display: none; + z-index: 1000; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.popup-wrap::before { + content: ""; + background: rgba(0, 0, 0, 0.6666666667); + display: block; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; +} + +.popup-in { + position: relative; +} +.popup-in .btn-close { + position: absolute; + top: -42px; + right: 0; + z-index: 10000; + width: 107px; + height: 48px; + background: transparent; + background-image: url("../img/bg_close.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border: none; + text-align: right; + padding-right: 26px; + padding-top: 4px; + cursor: pointer; +} +.popup-in .btn-close img { + pointer-events: none; +} +@media only screen and (max-width: 767px) { + .popup-in .btn-close { + background: none; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) brightness(106%) contrast(100%); + top: 16px; + right: 20px; + width: 28px; + height: 28px; + padding: 0; + } +} +.popup-in.member { + width: 1140px; +} +.popup-in.member .pop-body { + width: 100%; + padding: 80px 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: flex-start; +} +@media only screen and (max-width: 1279px) { + .popup-in.member .pop-body { + padding: 40px 20px; + } +} +.popup-in.member .pop-body .form-wrap, +.popup-in.member .pop-body form { + width: 100%; + height: 100%; + max-width: 480px; + gap: 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: flex-start; +} +@media only screen and (max-width: 1279px) { + .popup-in.member .pop-body .form-wrap, + .popup-in.member .pop-body form { + max-width: 100%; + gap: 16px; + } +} +.popup-in.member .pop-body .form-wrap:has(.terms-area), +.popup-in.member .pop-body form:has(.terms-area) { + gap: 32px; +} +@media only screen and (max-width: 1279px) { + .popup-in.member .pop-body .form-wrap:has(.terms-area), + .popup-in.member .pop-body form:has(.terms-area) { + gap: 20px; + } +} +.popup-in.mypage { + width: 1300px; +} +.popup-in.mypage .popup-container.edit .pop-body { + padding: 80px 82px; + z-index: 1; +} +.popup-in.mypage .popup-container .pop-body { + padding: 80px 48px; +} +.popup-in.mypage .popup-container .pop-body .form-wrap, +.popup-in.mypage .popup-container .pop-body form { + width: 100%; + max-width: 100%; +} +.popup-in.mypage .popup-container.cancel .pop-body { + padding: 80px; +} +.popup-in.mypage .pop-body { + width: 100%; + padding: 80px 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body { + padding: 40px 20px; + } +} +.popup-in.mypage .pop-body .form-wrap, +.popup-in.mypage .pop-body form { + width: 100%; + height: 100%; + max-width: 480px; + gap: 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body .form-wrap, + .popup-in.mypage .pop-body form { + max-width: 100%; + gap: 16px; + } +} +.popup-in.mypage .pop-body .form-wrap:has(.terms-area), +.popup-in.mypage .pop-body form:has(.terms-area) { + gap: 32px; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body .form-wrap:has(.terms-area), + .popup-in.mypage .pop-body form:has(.terms-area) { + gap: 20px; + } +} +.popup-in.mypage .pop-body.password .center-wrap { + max-width: 480px; +} +.popup-in.mypage .pop-body.password .input-box { + padding: 16px 0; +} +.popup-in.mypage .pop-body .my-info { + width: 100%; + flex-direction: column; + gap: 32px; + display: flex; + align-items: flex-end; + justify-content: center; +} +.popup-in.mypage .pop-body .my-info .name { + gap: 8px; + font-size: 28px; + display: flex; + align-items: center; + justify-content: flex-end; +} +.popup-in.mypage .pop-body .my-info .name .user-id { + color: #777; +} +.popup-in.mypage .pop-body .my-info .name .btn-sm { + min-width: 94px; + width: 94px; + font-size: 14px; + border-radius: 4px; +} +.popup-in.mypage .pop-body .my-info .detail { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; +} +.popup-in.mypage .pop-body .my-info .detail li { + width: 100%; + padding: 0 24px; +} +.popup-in.mypage .pop-body .my-info .detail li:not(:last-child) { + border-right: 1px solid rgba(0, 0, 0, 0.1); +} +.popup-in.mypage .pop-body .my-info .detail li h5 { + font-size: 18px; + font-weight: 500; + color: #000; + margin-bottom: 16px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; +} +.popup-in.mypage .pop-body .my-info .detail li h5 i { + width: 22px; + height: 22px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.popup-in.mypage .pop-body .my-info .detail li h5 i.tel { + background-image: url(../img/ico/ico_tel.svg); +} +.popup-in.mypage .pop-body .my-info .detail li h5 i.company { + background-image: url(../img/ico/ico_company.svg); +} +.popup-in.mypage .pop-body .my-info .detail li h5 i.usage { + background-image: url(../img/ico/ico_usage.svg); +} +.popup-in.mypage .pop-body .my-info .detail p { + font-size: 16px; + font-weight: 400; + color: #000; +} +.popup-in.mypage .pop-body .my-info .detail p:not(:last-child) { + margin-bottom: 8px; +} +.popup-in.mypage .pop-body .my-info .detail p span { + margin-right: 16px; + color: #777; +} +.popup-in.mypage .pop-body .my-info .detail p em { + font-size: 16px; + font-weight: 700; + color: #1A543D; +} +.popup-in.mypage .pop-body .my-history { + padding: 0; + margin-top: 40px; +} +.popup-in.mypage .pop-body .my-history h5 { + font-size: 24px; + font-weight: 700; + color: #000; + margin-bottom: 16px; +} +.popup-in.mypage .pop-body .my-history .board-list { + flex-direction: column; + gap: 14px; + height: 395px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: space-between; +} +.popup-in.mypage .pop-body .my-history table { + border: none; + border-top: 2px solid #000; + border-bottom: 2px solid rgba(0, 0, 0, 0.2); +} +.popup-in.mypage .pop-body .my-history table thead tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + background: rgba(255, 255, 255, 0.4); +} +.popup-in.mypage .pop-body .my-history table thead tr th { + width: auto; + font-size: 14px; + font-weight: 400; + color: #000; + height: 52px; + vertical-align: middle; +} +.popup-in.mypage .pop-body .my-history table tbody tr { + background: none; +} +.popup-in.mypage .pop-body .my-history table tbody tr td { + padding: 16px 0; + color: rgb(0, 0, 0); + font-weight: 500; + text-align: center; + font-size: 14px; + height: 56px; + vertical-align: middle; +} +.popup-in.mypage .pop-body .my-history table tbody tr td.tit { + text-align: left; +} +.popup-in.mypage .edit .pop-header .tit { + letter-spacing: -0.08em; +} +.popup-in.mypage .edit .btn-wrap { + margin-top: 48px; +} +.popup-in.mypage .board-list table { + width: 100%; + border-collapse: collapse; + border: 1px solid rgba(0, 0, 0, 0.1254901961); +} +.popup-in.mypage .board-list table thead tr { + border-bottom: 1px solid #000; + background: rgba(255, 255, 255, 0.5019607843); +} +.popup-in.mypage .board-list table thead tr th { + padding: 10px 0; + font-size: 18px; + text-align: center; + white-space: nowrap; +} +.popup-in.mypage .board-list table tbody tr { + border-bottom: 1px solid #777; + background: rgba(255, 255, 255, 0.2); +} +.popup-in.mypage .board-list table tbody tr:last-child { + border-bottom: none; +} +.popup-in.mypage .board-list table tbody tr td { + padding: 16px 0; + color: rgba(0, 0, 0, 0.5019607843); + font-weight: 500; + text-align: center; +} +.popup-in.mypage .pagination { + gap: 30px; + font-size: 18px; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; +} +.popup-in.mypage .pagination .btn-prev, +.popup-in.mypage .pagination .btn-next { + width: 24px; + height: 24px; + border: none; + background: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + cursor: pointer; + padding: 0; + color: #000; + font-size: 0; + text-indent: -9999px; + overflow: hidden; +} +.popup-in.mypage .pagination .btn-prev { + background-image: url(../img/ico/ico_arrow_page_left.svg); +} +.popup-in.mypage .pagination .btn-next { + background-image: url(../img/ico/ico_arrow_page_right.svg); +} +.popup-in.mypage .pagination-list { + gap: 20px; + display: flex; + align-items: center; + justify-content: center; +} +.popup-in.mypage .pagination-list .on { + width: 30px; + height: 30px; + background-color: #000; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.popup-in.mypage .pagination-list .on a { + color: #fff; +} +.popup-in.mypage .pagination-list a { + color: #000; +} +.popup-in.mypage .my_qna tbody tr td.td_name { + padding: 10px 8px; + color: #000; + text-align: left; +} +.popup-in.mypage .my_qna tbody tr td.td_stat .txt_done { + color: #000; +} +.popup-in.mypage .my_qna tbody tr td.td_stat .txt_rdy { + color: #777; +} +.popup-in.mypage .my_qna tbody tr td .bo_cate_link { + float: none; + margin-right: 0; + background: transparent; + color: #000; + height: auto; + padding: 8px; + display: inline-block; + border-radius: 5px; + line-height: 10px; +} +.popup-in.mypage .my_qna tbody tr.answer { + background-color: rgba(255, 221, 0, 0.1333333333); +} +.popup-in.mypage .my_qna tbody tr.answer td em { + color: rgba(0, 0, 0, 0.5019607843); + font-weight: 500; +} +.popup-in.mypage .my_qna tbody tr.answer td.tit a { + display: flex; + justify-content: left; + align-items: center; + gap: 8px; +} +.popup-in.mypage, .popup-in.member { + position: absolute; + top: 72px; + right: 86px; + height: 805px; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage, .popup-in.member { + width: 100%; + max-width: 100%; + height: var(--window-inner-height); + max-height: var(--window-inner-height); + top: auto; + right: auto; + overflow-y: auto; + } + .popup-in.mypage .btn-close, .popup-in.member .btn-close { + background: none; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) brightness(106%) contrast(100%); + top: 16px; + right: 20px; + width: 28px; + height: 28px; + padding: 0; + } + .popup-in.mypage .popup-container, .popup-in.member .popup-container { + flex-direction: column; + } +} +.popup-in.mypage .pop-header, .popup-in.member .pop-header { + position: relative; + min-width: 420px; + display: flex; + flex-direction: column; + padding: 120px 0 90px 48px; + background-image: url(../img/bg_pop.png); + background-size: cover; + background-repeat: no-repeat; + background-position: top left; + color: #fff; + gap: 38px; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-header, .popup-in.member .pop-header { + min-width: auto; + padding: 40px 24px; + gap: 20px; + min-height: 160px; + justify-content: center; + } +} +.popup-in.mypage .pop-header::before, .popup-in.mypage .pop-header::after, .popup-in.member .pop-header::before, .popup-in.member .pop-header::after { + position: absolute; + top: 10px; + font-size: 120px; + font-weight: 900; + white-space: nowrap; + letter-spacing: -0.02em; + opacity: 0.5; + z-index: 1; + text-shadow: 0 0 50px rgba(0, 0, 0, 0.05); +} +.popup-in.mypage .pop-header::before, .popup-in.member .pop-header::before { + right: 6px; + color: rgba(255, 255, 255, 0.15); +} +.popup-in.mypage .pop-header::after, .popup-in.member .pop-header::after { + left: 410px; + color: rgba(255, 255, 255, 0.3); +} +.popup-in.mypage .pop-header h2, .popup-in.member .pop-header h2 { + font-size: 67px; + font-weight: 900; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-header h2, .popup-in.member .pop-header h2 { + font-size: 34px; + text-align: center; + } +} +.popup-in.mypage .pop-header p, .popup-in.member .pop-header p { + font-size: 20px; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-header p, .popup-in.member .pop-header p { + font-size: 16px; + text-align: center; + text-wrap: balance; + word-break: keep-all; + } +} +@media only screen and (max-width: 575px) { + .popup-in.mypage .pop-header p, .popup-in.member .pop-header p { + display: none; + } +} +.popup-in.mypage .pop-header br.pc-only, .popup-in.member .pop-header br.pc-only { + display: block; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-header br.pc-only, .popup-in.member .pop-header br.pc-only { + display: none; + } +} +.popup-in.mypage .pop-body, .popup-in.member .pop-body { + width: 100%; + max-width: calc(100% - 420px); + width: 100%; + padding: 80px 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: flex-start; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body, .popup-in.member .pop-body { + padding: 40px 20px; + } +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body, .popup-in.member .pop-body { + max-width: 100%; + } +} +.popup-in.mypage .pop-body .form-wrap, +.popup-in.mypage .pop-body form, .popup-in.member .pop-body .form-wrap, +.popup-in.member .pop-body form { + width: 100%; + height: 100%; + max-width: 480px; + gap: 24px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: flex-start; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body .form-wrap, + .popup-in.mypage .pop-body form, .popup-in.member .pop-body .form-wrap, + .popup-in.member .pop-body form { + max-width: 100%; + gap: 16px; + } +} +.popup-in.mypage .pop-body .form-wrap:has(.terms-area), +.popup-in.mypage .pop-body form:has(.terms-area), .popup-in.member .pop-body .form-wrap:has(.terms-area), +.popup-in.member .pop-body form:has(.terms-area) { + gap: 32px; +} +@media only screen and (max-width: 1279px) { + .popup-in.mypage .pop-body .form-wrap:has(.terms-area), + .popup-in.mypage .pop-body form:has(.terms-area), .popup-in.member .pop-body .form-wrap:has(.terms-area), + .popup-in.member .pop-body form:has(.terms-area) { + gap: 20px; + } +} +.popup-in.mypage select, +.popup-in.mypage input[type=text], +.popup-in.mypage input[type=password], +.popup-in.mypage input[type=tel], .popup-in.member select, +.popup-in.member input[type=text], +.popup-in.member input[type=password], +.popup-in.member input[type=tel] { + width: 100%; + height: 48px; + font-size: 18px; + border-bottom: 1px solid #000; +} +.popup-in.mypage .select-box, .popup-in.member .select-box { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; +} +.popup-in.mypage .input-box, .popup-in.member .input-box { + width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; +} +.popup-in.mypage .input-box:has(input[type=radio]), .popup-in.member .input-box:has(input[type=radio]) { + height: 48px; +} +.popup-in.mypage .input-box i, .popup-in.member .input-box i { + display: inline-block; + width: 32px; + aspect-ratio: 1/1; + margin-left: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.popup-in.mypage .input-box i.id, .popup-in.member .input-box i.id { + background-image: url(../img/ico/ico_id.svg); +} +.popup-in.mypage .input-box i.pw, .popup-in.member .input-box i.pw { + background-image: url(../img/ico/ico_pw.svg); +} +.popup-in.mypage .input-box i.phone, .popup-in.member .input-box i.phone { + background-image: url(../img/ico/ico_phone.svg); +} +.popup-in.mypage .input-box.group, .popup-in.member .input-box.group { + border-bottom: 1px solid #000; +} +.popup-in.mypage .input-box.group input, .popup-in.member .input-box.group input { + border-bottom: none; + flex: 1; +} +.popup-in.mypage .input-box.group:focus-within, .popup-in.member .input-box.group:focus-within { + border-color: #000; +} +.popup-in.mypage .input-box.group.has-value, .popup-in.member .input-box.group.has-value { + border-color: #000; +} +.popup-in.mypage .input-box:has(input[type=radio]), .popup-in.member .input-box:has(input[type=radio]) { + gap: 40px; +} +.popup-in.mypage .input-box:has(input[type=radio]) label, .popup-in.member .input-box:has(input[type=radio]) label { + display: flex; + align-items: center; + gap: 12px; + font-size: 16px; + font-weight: 500; + color: #333; + cursor: pointer; + user-select: none; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio], .popup-in.member .input-box:has(input[type=radio]) label input[type=radio] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 18px; + height: 18px; + margin: 0; + padding: 0; + border: 2px solid #C5C5C5; + border-radius: 50%; + background: transparent; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: all 0.2s ease; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]::after, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + border-radius: 50%; + background: #00832A; + opacity: 0; + transition: opacity 0.2s ease; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:checked, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:checked { + border-color: #00832A; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:checked::after, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:checked::after { + opacity: 1; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:disabled, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:disabled { + border-color: #999; + cursor: not-allowed; + pointer-events: none; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:disabled:checked, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:disabled:checked { + border-color: #999; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:disabled:checked::after, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:disabled:checked::after { + background: #999; + opacity: 1; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:disabled + span, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:disabled + span { + color: #999; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:hover:not(:disabled), .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:hover:not(:disabled) { + border-color: #00832A; +} +.popup-in.mypage .input-box:has(input[type=radio]) label input[type=radio]:hover:not(:disabled)::after, .popup-in.member .input-box:has(input[type=radio]) label input[type=radio]:hover:not(:disabled)::after { + background: #00832A; +} +.popup-in.mypage .timer, .popup-in.member .timer { + color: #FB3C00; + font-size: 18px; + font-weight: 500; +} +.popup-in.mypage .complete-msg, .popup-in.member .complete-msg { + color: var(--text-success); + font-size: 18px; + font-weight: 500; + display: flex; + align-items: center; + gap: 8px; +} +.popup-in.mypage .complete-msg .ico-check, .popup-in.member .complete-msg .ico-check { + width: 20px; + height: 20px; + display: inline-block; + background-color: var(--text-success); + mask-image: url(../img/ico/ico_check.svg); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-image: url(../img/ico/ico_check.svg); + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} +.popup-in.mypage .go-signup, +.popup-in.mypage .go-find, .popup-in.member .go-signup, +.popup-in.member .go-find { + color: var(--text-body); + font-size: 18px; + font-weight: 700; + gap: 8px; + display: flex; + align-items: center; + justify-content: center; +} +.popup-in.mypage .go-signup .arrow-r, +.popup-in.mypage .go-find .arrow-r, .popup-in.member .go-signup .arrow-r, +.popup-in.member .go-find .arrow-r { + width: 16px; + height: 16px; + background-image: url(../img/ico/ico_arrow_r.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.popup-in.mypage .go-signup:first-child:last-child, .popup-in.member .go-signup:first-child:last-child { + margin-left: auto; +} +.popup-in.mypage .check-box, .popup-in.member .check-box { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} +.popup-in.mypage .check-box label, .popup-in.member .check-box label { + font-size: 18px; + font-weight: 600; + color: var(--text-base); +} +.popup-in.mypage .check-box input, .popup-in.member .check-box input { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 28px; + aspect-ratio: 1/1; + border-radius: 2px; + position: relative; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.2); + background-color: rgba(255, 255, 255, 0.6666666667); + box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1333333333); + padding: 0; + display: inline-block; +} +.popup-in.mypage .check-box input:checked, .popup-in.member .check-box input:checked { + background-image: url(../img/ico/ico_check.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + background-color: var(--color-green); + box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1333333333); +} +.popup-in.mypage .check-box input.chk-all, .popup-in.member .check-box input.chk-all { + background-color: #f7e4e8; +} +.popup-in.mypage .check-box input.chk-all:checked, .popup-in.member .check-box input.chk-all:checked { + background-color: var(--color-green); +} +.popup-in.mypage .terms-box, .popup-in.member .terms-box { + width: 100%; + height: 128px; + border-radius: 4px; + padding: 10px 16px; + margin-top: 8px; + font-size: 14px; + text-align: left; + box-sizing: border-box; + border: 1px solid rgba(0, 0, 0, 0.2); + background-color: rgba(255, 255, 255, 0.3333333333); + overflow-y: auto; +} +.popup-in.privacy { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + max-width: 800px; + height: 662px; + max-height: 700px; + translate: -50% -50%; +} +@media only screen and (max-width: 767px) { + .popup-in.privacy { + width: 100%; + height: var(--window-inner-height); + max-height: var(--window-inner-height); + overflow-y: auto; + } +} +.popup-in.privacy .pop-contents { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + width: 100%; + background-image: url(../img/bg_pop.png); + background-size: cover; + background-repeat: no-repeat; + background-position: top left; +} +@media only screen and (max-width: 767px) { + .popup-in.privacy .pop-contents { + padding: 56px 16px 16px; + gap: 16px; + } +} +.popup-in.privacy .list-1 > li { + margin-bottom: 40px; +} +.popup-in.privacy .list-2 { + margin-top: 16px; +} +.popup-in.privacy .list-2 > li { + list-style: square; + padding-left: 8px; + margin-left: 32px; + margin-bottom: 16px; +} +.popup-in.privacy .list-3 { + margin-left: 8px; + margin-top: 8px; +} +.popup-in.privacy .list-3 > li { + list-style-type: "- "; + margin-bottom: 4px; +} +.popup-in.privacy .tab-menu { + background-color: #eee7dd; +} +.popup-in.privacy .tab-content { + color: #fff; + padding: 40px; +} +@media only screen and (max-width: 767px) { + .popup-in.privacy .tab-content { + font-size: 16px; + } +} + +.popup-container { + width: 100%; + height: 100%; + box-shadow: 20px -20px 50px rgba(0, 0, 0, 0.8); + border: 4px solid #1A543D; + border-radius: 5px 0 5px 5px; + display: flex; + z-index: 100; + overflow: hidden; + background: #EAE4D9; +} +.popup-container.login .pop-body form { + justify-content: center; +} +.popup-container.login .pop-body .input-box { + gap: 16px; + height: 80px; + padding: 16px 0; + border-bottom: 1px solid #000; +} +.popup-container.login .pop-body .input-box .timer { + font-size: 24px; + margin-right: 24px; +} +.popup-container.login .pop-body input[type=text], +.popup-container.login .pop-body input[type=tel], +.popup-container.login .pop-body input[type=password] { + padding: 0 16px; + font-size: 24px; + border-bottom: none; +} +.popup-container.login .tab-content { + padding: 40px 0; +} +.popup-container .messages { + width: 100%; + flex-grow: 1; + flex-direction: column; + text-align: center; + gap: 60px; + display: flex; + align-items: center; + justify-content: center; +} +.popup-container .messages .ico-pw { + margin-bottom: 16px; +} +.popup-container.search .hidden { + display: none; +} +.popup-container.search .radio-wrap { + width: 100%; + padding: 0 8px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 48px; + margin-bottom: 24px; +} +.popup-container.search .radio-wrap label { + display: flex; + align-items: center; + gap: 12px; + font-size: 18px; + font-weight: 500; + color: #333; + cursor: pointer; + user-select: none; +} +.popup-container.search .radio-wrap label input[type=radio] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 29px; + height: 29px; + margin: 0; + padding: 0; + border: 2px solid #C5C5C5; + border-radius: 50%; + background: transparent; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: all 0.2s ease; +} +.popup-container.search .radio-wrap label input[type=radio]::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + border-radius: 50%; + background: #00832A; + opacity: 0; + transition: opacity 0.2s ease; +} +.popup-container.search .radio-wrap label input[type=radio]:checked { + border-color: #00832A; +} +.popup-container.search .radio-wrap label input[type=radio]:checked::after { + opacity: 1; +} +.popup-container.search .radio-wrap label input[type=radio]:hover { + border-color: #00832A; +} +.popup-container.search .radio-wrap label input[type=radio]:hover::after { + background: #00832A; +} +.popup-container.search .radio-wrap label input[type=radio].on { + border-color: #00832A; +} +.popup-container.search .radio-wrap label input[type=radio].on::after { + opacity: 1; +} +.popup-container .contents-wrap { + width: 100%; + max-width: 480px; + margin-top: 92px; + flex-grow: 1; +} +.popup-container .center-wrap { + width: 100%; + height: 100%; + flex-direction: column; + gap: 32px; + display: flex; + align-items: center; + justify-content: center; +} +.popup-container .terms-wrap { + gap: 32px; + flex-direction: column; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.popup-container table { + width: 100%; + border-collapse: separate; +} +.popup-container table tr:not(:last-child) th, +.popup-container table tr:not(:last-child) td { + padding-bottom: 20px; +} +.popup-container table th { + width: 25%; + text-align: left; + font-size: 18px; + font-weight: 500; + vertical-align: top; + padding-top: 12px; +} +.popup-container table tr.disabled { + color: #999; +} +.popup-container table tr.disabled input:disabled { + color: #999; + border-bottom-color: #999; + cursor: not-allowed; + pointer-events: none; +} +.popup-container table tr.disabled input:disabled::placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.disabled input:disabled::-webkit-input-placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.disabled input:disabled::-moz-placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.disabled input:disabled:-ms-input-placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.disabled input[type=radio]:disabled { + border-color: #999; + cursor: not-allowed; + pointer-events: none; +} +.popup-container table tr.disabled input[type=radio]:disabled:checked { + border-color: #999; +} +.popup-container table tr.disabled input[type=radio]:disabled:checked::after { + background: #999; + opacity: 1; +} +.popup-container table tr.disabled input[type=radio]:disabled + span { + color: #999; +} +.popup-container table tr.disabled label { + color: #999; + cursor: not-allowed; +} +.popup-container table tr.disabled button:disabled, +.popup-container table tr.disabled .btn-sm:disabled, +.popup-container table tr.disabled .btn-full:disabled, +.popup-container table tr.disabled .btn-cancel:disabled { + color: #999; + background: #f5f5f5; + cursor: not-allowed; + opacity: 0.6; +} +.popup-container table tr.company-group.disabled { + color: #999; +} +.popup-container table tr.company-group.disabled input:disabled { + color: #999; + border-bottom-color: #999; + cursor: not-allowed; + pointer-events: none; +} +.popup-container table tr.company-group.disabled input:disabled::placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.company-group.disabled input:disabled::-webkit-input-placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.company-group.disabled input:disabled::-moz-placeholder { + color: #999; + opacity: 1; +} +.popup-container table tr.company-group.disabled input:disabled:-ms-input-placeholder { + color: #999; + opacity: 1; +} +.popup-container .btn-wrap { + margin-top: 16px; + display: flex; + gap: 8px; +} +.popup-container .btn-full { + font-size: 24px; + font-weight: 700; + height: 80px; + background: linear-gradient(92deg, rgba(255, 234, 198, 0.4) 0%, rgba(255, 255, 255, 0) 100%), #856120; + backdrop-filter: blur(5px); +} +.popup-container .btn-full:hover { + background: linear-gradient(92deg, rgba(0, 144, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #1A543D; +} +.popup-container .btn-sm { + min-width: 74px; + font-size: 16px; + padding: 4px 8px; + height: 32px; + background: #1A543D; + color: #fff; + border: none; + border-radius: 2px; + cursor: pointer; + white-space: nowrap; +} +.popup-container .btn-sm.light { + background: var(--text-success); +} +.popup-container .btn-sm.change { + min-width: 110px; +} +.popup-container .btn-sm.btn-cancel { + background: #999; + padding: 4px 8px; + height: 32px; + border-radius: 2px; + font-size: 16px; +} +.popup-container .btn-cancel { + padding: 0 30px; + height: 80px; + font-size: 24px; + color: #fff; + border-radius: 4px; + background: #4E4E4E; + white-space: nowrap; + backdrop-filter: blur(5px); +} +.popup-container button:disabled, +.popup-container .btn-sm:disabled, +.popup-container .btn-full:disabled, +.popup-container .btn-cancel:disabled { + color: #999; + background: #f5f5f5; + cursor: not-allowed; + opacity: 0.6; + pointer-events: none; +} +.popup-container .sign-out { + color: #766C5A; + font-size: 16px; + font-weight: 700; + text-align: right; + margin-top: 20px; +} +.popup-container .sign-out a { + display: inline-flex; + align-items: center; + gap: 8px; +} +.popup-container .sign-out .ico-signout { + width: 24px; + height: 24px; + display: inline-block; + background-image: url(../img/ico/ico_sign_out.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.popup-container .point { + color: var(--text-accent); +} +.popup-container .txt-done { + color: #00832A; +} +.popup-container .info-msg { + font-size: 12px; + color: var(--text-accent); + margin-bottom: 16px; +} +.popup-container .info-msg.txt-right { + display: block; + text-align: right; +} +.popup-container .tbl-wrap > .info-msg { + text-align: right; +} +.popup-container .tab-menu { + width: 100%; + min-height: 67px; + border-radius: 6px; + border: 2px solid #FFF; + box-sizing: border-box; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%); + display: flex; + gap: 4px; +} +.popup-container .tab-menu.round { + padding: 0; + border-radius: 50px; + border: 1px solid rgba(176, 176, 176, 0.5); + overflow: hidden; + position: relative; +} +.popup-container .tab-menu.round::before { + content: " "; + position: absolute; + top: 0px; + left: 0%; + width: 50%; + height: 100%; + border-radius: 50px; + background: linear-gradient(92deg, rgba(0, 144, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #1A543D; + background-blend-mode: plus-lighter, normal; + backdrop-filter: blur(5px); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 0; + pointer-events: none; + transform: translateX(var(--tab-indicator-position, 0)); +} +.popup-container .tab-menu.round li { + border-radius: inherit; + position: relative; + z-index: 1; + color: #7A7A7A; + transition: color 0.3s ease, background 0.25s ease; +} +.popup-container .tab-menu.round li.on { + background: transparent; + color: #fff; +} +.popup-container .tab-menu.round:has(.tab-phone.on) .tab-id:not(.on):hover { + background: linear-gradient(90deg, transparent 0%, #dbcbb4 100%); + background-color: transparent; +} +.popup-container .tab-menu.round:has(.tab-id.on) .tab-phone:not(.on):hover { + background: linear-gradient(90deg, #dbcbb4 0%, transparent 100%); + background-color: transparent; +} +.popup-container .tab-menu li { + position: relative; + width: 50%; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #7A7A7A; +} +.popup-container .tab-menu li:not(.on):hover { + background-color: #dbcbb4; +} +.popup-container .tab-menu .on { + background-color: #1A543D; + color: #fff; +} +.popup-container .tab-content { + display: none; + position: relative; + width: 100%; + flex-grow: 1; + border-radius: 4px; + padding: 40px 0; + font-size: 16px; + text-align: left; + box-sizing: border-box; + overflow-y: scroll; +} +@media only screen and (max-width: 767px) { + .popup-container .tab-content { + padding: 20px; + font-size: 14px; + } +} +.popup-container .tab-content.show { + display: block; +} +.popup-container .tab-content .inquiry { + font-size: 14px; + color: #555; +} +.popup-container .tab-content .info-box { + border-radius: 4px; + background: rgba(255, 255, 255, 0.4); + width: 100%; + padding: 16px 10px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} +.popup-container .tab-content .info-box p { + text-align: center; + word-break: keep-all; +} + +@media only screen and (min-width: 1280px) { + .login .pop-header::before { + content: "Logi"; + } + .login .pop-header::after { + content: "n"; + } + .join .pop-header::before { + content: "Sign u"; + } + .join .pop-header::after { + content: "p"; + } + .mypage .pop-header::before { + content: "My pa"; + } + .mypage .pop-header::after { + content: "ge"; + } + .search .pop-header::before { + content: "ID/P"; + } + .search .pop-header::after { + content: "W"; + } + .cancel .pop-header::before { + content: "Cancel"; + } + .cancel .pop-header::after { + content: "Memvership"; + } +} +.condition { + padding: 120px 0; + width: 100%; + max-width: 100%; +} + +.diagram-wrap { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + position: relative; + width: max-content; + max-width: 100%; + margin: auto; +} +.diagram-wrap .dia-element { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +.diagram-wrap .dia-element .dia-tit { + font-size: 20px; + font-weight: 500; + white-space: nowrap; + flex-direction: column; + gap: 8px; + display: flex; + align-items: center; + justify-content: center; +} +.diagram-wrap .dia-element .dia-text { + font-size: 18px; + font-weight: 500; +} +.diagram-wrap .dia-element .line { + background-color: #ffffff; + position: absolute; +} +.diagram-wrap .dia-circles-wrap { + position: relative; + width: 324px; + aspect-ratio: 1/1; + z-index: 1; +} +@media only screen and (max-width: 767px) { + .diagram-wrap .dia-circles-wrap { + width: 240px; + } +} +@media only screen and (max-width: 575px) { + .diagram-wrap .dia-circles-wrap { + width: 190px; + } +} +.diagram-wrap .dia-circles-wrap::after { + position: absolute; + content: ""; + width: 110%; + aspect-ratio: 1/1; + border-radius: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px dashed #B6D0C9; + opacity: 0.5; + z-index: -1; +} +.diagram-wrap .dia-circles-wrap div[class^=circle-] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.diagram-wrap .dia-circles-wrap .circle-belt { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + border: 1px solid #b6d0c9; + background: #f0f7f5; +} +.diagram-wrap .dia-circles-wrap .circle-core { + width: 80%; + aspect-ratio: 1/1; + border-radius: 50%; + background: linear-gradient(180deg, #01935B 0%, #06584C 94.21%); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1333333333); + filter: drop-shadow(-4px 8px 8px rgba(0, 0, 0, 0.2)); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 32px; + font-weight: 700; + text-align: center; + color: #ffffff; +} +@media only screen and (max-width: 575px) { + .diagram-wrap .dia-circles-wrap .circle-core { + font-size: 2rem; + } +} +.diagram-wrap .dia-circles-wrap .circle-core span:first-child { + font-size: 20px; + font-weight: 400; +} +@media only screen and (max-width: 575px) { + .diagram-wrap .dia-circles-wrap .circle-core span:first-child { + font-size: 1.4rem; + } +} +.diagram-wrap .dia-circles-wrap .circle-dash { + border: 1px dashed #b6d0c9; + width: 110%; + height: 110%; + border-radius: 50%; +} +.diagram-wrap .dia-circles-wrap .circle-dots { + width: 100%; + height: 100%; +} +.diagram-wrap .dia-circles-wrap .circle-dots.move { + top: 0; + left: 0; + opacity: 0.3; + animation-duration: 12s; + animation-iteration-count: infinite; + animation-name: dot-rotate; +} +.diagram-wrap .dia-circles-wrap .circle-dots.move .dot { + width: 8px; + height: 8px; +} +@media only screen and (max-width: 575px) { + .diagram-wrap .dia-circles-wrap .circle-dots.move .dot { + width: 5px; + height: 5px; + } +} +.diagram-wrap .dia-circles-wrap .circle-dots.move .dot::after { + display: none; +} +.diagram-wrap .dia-circles-wrap .circle-dots .dot { + position: absolute; + width: 9px; + height: 9px; + border-radius: 50%; + background-color: rgba(56, 56, 56, 0.3019607843); +} +@media only screen and (max-width: 575px) { + .diagram-wrap .dia-circles-wrap .circle-dots .dot { + width: 6px; + height: 6px; + } +} +.diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(1) { + top: 50%; + left: -4px; + right: initial; + transform: translateY(-50%); +} +.diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(2) { + top: 50%; + left: initial; + right: -4px; + transform: translateY(-50%); +} + +.layout-fix-left { + width: 100%; + display: flex; + position: relative; +} +.layout-fix-left .left { + min-width: 700px; + height: 200%; + padding: 100px 0 0 200px; + position: sticky; + top: 0; + left: 0; + overflow: hidden; +} +.layout-fix-left .left .bg { + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 0; + left: 0; + z-index: -2; +} +.layout-fix-left .left .bg.on { + z-index: -1; +} +.layout-fix-left .left .mid-tit { + color: #fff; + display: block; +} +.layout-fix-left .right { + width: 100%; + max-width: 1373px; +} +.layout-fix-left:not(.is-single) .left .mid-tit { + opacity: 0.5; +} +.layout-fix-left:not(.is-single) .left .mid-tit.on { + opacity: 1; +} +.layout-fix-left:not(.is-single) .left .js-fixLeft-tit > li:not(.on) { + opacity: 0.5; +} + +.mouse-mark { + position: fixed; + width: 64px !important; + height: 64px !important; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 114, 67, 0.8); + border-radius: 50%; + transform: translate(-65%, -65%) !important; + pointer-events: none; + z-index: 100; + transition: opacity 0.2s; +} +.mouse-mark span { + position: relative; + letter-spacing: 0.07rem; + font-size: 10px; + font-weight: 700; + color: #fff; +} +.mouse-mark span::before, .mouse-mark span::after { + content: ""; + width: 4px; + height: 4px; + display: block; + position: absolute; + left: calc(50% - 2px); + border: solid #ffffff; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 1.5s infinite ease; +} +.mouse-mark span::before { + bottom: -10px; +} +.mouse-mark span::after { + bottom: -16px; + animation-delay: 0.35s; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + letter-spacing: -0.04em; + scroll-behavior: smooth; + user-select: auto; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + transition: background-color 5000s ease-in-out 0s; + -webkit-transition: background-color 9999s ease-out; + -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset !important; +} + +video::-webkit-media-controls { + display: none !important; +} + +::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +::-webkit-scrollbar-thumb { + background-color: #bbb; + background-clip: padding-box; + border: 2px solid transparent; + border-radius: 10px; +} + +a { + color: inherit; +} + +em, strong { + font-weight: 700; +} + +br.pc-only { + display: block; +} +@media only screen and (max-width: 1023px) { + br.pc-only { + display: none; + } +} +br.mo-only { + display: none; +} +@media only screen and (max-width: 1023px) { + br.mo-only { + display: block; + } +} + +h2 { + font-size: 70px; + color: #fff; +} +@media only screen and (max-width: 767px) { + h2 { + font-size: 3.6rem; + } +} + +.big-tit { + font-size: 64px; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .big-tit { + font-size: 4.5rem; + } +} +@media only screen and (max-width: 767px) { + .big-tit { + font-size: 3rem; + } +} + +.grand-tit { + font-size: 64px; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .grand-tit { + font-size: 4.5rem; + } +} +@media only screen and (max-width: 767px) { + .grand-tit { + font-size: 3rem; + } +} + +.mid-tit { + font-size: 52px; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .mid-tit { + font-size: 3.5rem; + } +} +@media only screen and (max-width: 767px) { + .mid-tit { + font-size: 2.4rem; + } +} + +.sub-text { + font-size: 20px; + line-height: 30px; + display: block; + text-align: justify; +} +@media only screen and (max-width: 767px) { + .sub-text { + font-size: 1.4rem; + line-height: 1.6; + } +} + +.txt-border { + filter: drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000); +} + +.tc-red { + color: #f00; +} + +.tit-box h3 { + font-size: 32px; + color: var(--text-title); +} +.tit-box p { + font-size: 20px; +} + +.sec-title h4 { + font-size: 52px; + color: var(--text-white); +} +.sec-title h4 em { + color: var(--text-title); +} + +.txt-box h3 { + color: var(--text-title); + font-size: 42px; +} +.txt-box h4 { + color: var(--text-title); + font-size: 32px; +} +.txt-box p { + color: var(--text-sub); + font-size: 20px; +} + +.sub-header { + position: relative; + display: flex; + flex-direction: column; + gap: 96px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.sub-header .page-title { + width: 100%; + height: 480px; + padding-bottom: 130px; + gap: 12px; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + text-align: center; +} +@media only screen and (max-width: 1023px) { + .sub-header .page-title { + height: 22rem; + padding-bottom: 5rem; + } +} +.sub-header .page-title h2 { + color: var(--text-white); + font-size: 70px; + text-shadow: 0 0 12px rgba(0, 44, 30, 0.25); +} +@media only screen and (max-width: 1023px) { + .sub-header .page-title h2 { + font-size: 3.6rem; + line-height: 1.2; + } +} +.sub-header .page-title .sub-txt { + font-size: 22px; + color: var(--text-white); +} +@media only screen and (max-width: 1023px) { + .sub-header .page-title .sub-txt { + font-size: 1.4rem; + } +} + +.sub-content { + position: relative; + padding-top: 160px; + padding-bottom: 250px; + margin: 0 auto; + flex-direction: column; + text-align: center; + gap: 100px; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 1023px) { + .sub-content { + padding-bottom: 180px; + } +} +.sub-content::before { + position: absolute; + bottom: 0; + left: 0; + font-size: 140px; + opacity: 0.05; + font-weight: 900; + white-space: pre; + text-align: left; + line-height: 0.8em; + letter-spacing: -0.04em; +} +@media only screen and (max-width: 1023px) { + .sub-content::before { + font-size: 6rem; + bottom: 20px; + text-align: right; + left: auto; + right: 1.4rem; + } +} + +.sub-tit-box { + position: relative; +} +.sub-tit-box::before { + content: ""; + position: absolute; + top: -67px; + left: calc(50% - 50px); + width: 100px; + height: 25px; + background: url(../img/ico_title_obj.svg) no-repeat center center; +} +.sub-tit-box .sub-tit { + font-weight: 400; +} + +.sub-tit { + display: block; + font-size: 32px; + font-weight: 700; + text-wrap: balance; + word-break: keep-all; +} +@media only screen and (max-width: 1023px) { + .sub-tit { + font-size: 2rem; + } +} + +i { + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.logo-c { + display: block; + background-image: url(../img/loco_kngil_c.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} + +.clearfix { + /* IE 지원 방식 : *zoom: 1; */ +} +.clearfix:before, .clearfix:after { + content: ""; + display: block; +} +.clearfix:after { + clear: both; +} + +.blind { + position: absolute; + clip: rect(0 0 0 0); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + border: 0; + padding: 0; + white-space: nowrap; +} + +.d-none { + display: none !important; +} + +.modal { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + overflow: auto; + z-index: 30; +} +.modal .modal-content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: #f6f1e9; + padding: 40px 20px 20px 20px; + border: 1px solid #888; + width: 470px; + min-height: 500px; + border-radius: 8px; + text-align: center; +} +.modal .close { + color: #000; + float: right; + font-size: 26px; + font-weight: bold; + position: absolute; + right: 12px; + top: 12px; + display: block; + margin-left: auto; + width: 26px; + height: 26px; + background: none; + line-height: 1; + filter: var(--text-shadow); + transition: all 0.1s ease-in-out; +} +.modal .close:hover, .modal .close:focus { + color: #e00400; + text-decoration: none; + cursor: pointer; + text-shadow: var(--text-stroke); +} + +.dim-background { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: var(--window-inner-height); + background-color: rgba(0, 0, 0, 0.8); + z-index: 1; +} + +@keyframes dot-rotate { + 0% { + transform: rotate(0); + } + 25% { + transform: rotate(90deg); + } + 50% { + transform: rotate(180deg); + } + 75% { + transform: rotate(270deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes dot-rotate3 { + 0% { + transform: rotate(0deg); + } + 35% { + transform: rotate(120deg); + } + 70% { + transform: rotate(240deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes expand { + 1% { + width: 0; + height: 0; + opacity: 1; + } + 100% { + width: 750%; + height: 750%; + opacity: 0; + border: 2px solid #fff; + } +} +@keyframes slideDown { + 0% { + top: -1000px; + opacity: 80%; + } + 100% { + top: 0; + opacity: 20%; + } +} +@keyframes slideup { + 0% { + bottom: -1000px; + opacity: 80%; + } + 100% { + bottom: 0; + opacity: 20%; + } +} +@keyframes slideRight { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(100%); + } +} +@keyframes arrow { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + margin-top: 10px; + } +} +@keyframes txt_mask { + 0% { + top: 80px; + opacity: 0; + } + 100% { + top: 0px; + opacity: 1; + } +} +@keyframes clip_play { + 0% { + clip-path: inset(50% 50% round 10px 10px 10px 10px); + top: -150px; + } + 30% { + clip-path: inset(49.5% 45% round 10px 10px 10px 10px); + top: -150px; + } + 60% { + clip-path: inset(45% 45% round 10px 10px 10px 10px); + top: -193px; + } + 100% { + clip-path: inset(0% 0% round 0px 0px 0px 0px); + top: 0; + } +} +@keyframes h-draw { + 0% { + width: 0; + } + 30% { + width: 0; + } + 70% { + width: 50%; + } + 100% { + width: 100%; + } +} +@keyframes v-center { + 0% { + top: 0; + } + 30% { + top: 0; + height: 80px; + } + 100% { + top: 0; + height: 100%; + } +} +@keyframes v-side { + 0% { + height: 0; + } + 70% { + height: 0; + } + 100% { + height: 100%; + } +} +@keyframes dot-center { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: 77px; + left: calc(50% - 3px); + } + 100% { + top: 77px; + left: calc(50% - 3px); + } +} +@keyframes dot-side-left { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: 77px; + left: calc(50% - 3px); + } + 70% { + top: 77px; + left: calc(25% - 3px); + } + 100% { + top: 77px; + left: calc(25% - 3px); + } +} +@keyframes dot-side-right { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: 77px; + left: calc(50% - 3px); + } + 70% { + top: 77px; + left: calc(75% - 3px); + } + 100% { + top: 77px; + left: calc(75% - 3px); + } +} +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(-10px); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes pulseCircle { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.2); + opacity: 0.7; + } +} +@keyframes enableHover { + to { + pointer-events: auto; + } +} +@media all and (min-width: 1024px) and (max-width: 1920px) { + html { + font-size: 10px; + } +} +@media all and (max-width: 1023px) { + html { + font-size: 14px; + } + html body { + font-size: 1.6rem; + } +} +@media all and (max-width: 767px) { + html { + font-size: 13px; + } +} +@media all and (max-width: 639px) { + html { + font-size: 12px; + } +} +@media all and (max-width: 479px) { + html { + font-size: 10px; + } +} +@media all and (max-width: 359px) { + html { + font-size: 9px; + } +} +@media all and (max-width: 319px) { + html { + font-size: 8px; + } +} \ No newline at end of file diff --git a/kngil/css/faq/faq_default.css b/kngil/css/faq/faq_default.css new file mode 100644 index 0000000..59d4a69 --- /dev/null +++ b/kngil/css/faq/faq_default.css @@ -0,0 +1,456 @@ +@charset "utf-8"; + +/* 초기화 */ +html {overflow-y:scroll} +body {margin:0;padding:0;font-size:0.95em;_font-family:'Malgun Gothic', dotum, sans-serif;background:#fff} +html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} +h1, h2, h3, h4, h5, h6 {font-size:1em;_font-family:'Malgun Gothic', dotum, sans-serif} +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} + +ul, dl,dt,dd {margin:0;padding:0;list-style:none} +legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} +label, input, button, select, img {vertical-align:middle;font-size:1em} +input, button {margin:0;padding:0;_font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em} +input[type="submit"] {cursor:pointer} +button {cursor:pointer} + +textarea, select {_font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em} +select {margin:0} +p {margin:0;padding:0;word-break:break-all} +hr {display:none} +pre {overflow-x:scroll;font-size:1.1em} +a {color:#000;text-decoration:none} + +*, :after, :before { + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; +} + +input[type=text],input[type=password], textarea { +-webkit-transition:all 0.30s ease-in-out; +-moz-transition:all 0.30s ease-in-out; +-ms-transition:all 0.30s ease-in-out; +-o-transition:all 0.30s ease-in-out; +outline:none; +} + +input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { +-webkit-box-shadow:0 0 5px #9ed4ff; +-moz-box-shadow:0 0 5px #9ed4ff; +box-shadow:0 0 5px #9ed4ff; +border:1px solid #558ab7 !important; +} + +.placeholdersjs {color:#aaa !important} + +/* 레이아웃 크기 지정 */ +#hd, #wrapper, #ft {min-width:1200px} + +#hd_pop, +#hd_wrapper, +#tnb .inner, + +#gnb .gnb_wrap, +#container_wr, +#ft_wr {width:1200px} + +/* 팝업레이어 */ +#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0} +#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} +.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} +.hd_pops img {max-width:100%} +.hd_pops_con {} +.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative} +.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} +.hd_pops_footer button {padding:10px;border:0;color:#fff} +.hd_pops_footer .hd_pops_reject {background:#000;text-align:left} +.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0} + +/* 상단 레이아웃 */ +#hd {background:#212020} +#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} + +#tnb {border-bottom:1px solid #383838;margin:0 auto} +#tnb:after {display:block;visibility:hidden;clear:both;content:""} +#tnb .inner {margin:0 auto} + +#hd_wrapper {position:relative;margin:0 auto;height:140px;zoom:1} +#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} + +#logo {float:left;padding:30px 0 0} + +.hd_sch_wr {float:left;padding:30px 0;width:445px;margin-left:65px} +#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden} +#hd_sch {border-radius:30px;overflow:hidden} +#hd_sch #sch_stx {float:left;width:385px;height:45px;padding-left:10px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.25em;color:#fff} +#hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px} + +#hd_define {float:left} +#hd_define:after {display:block;visibility:hidden;clear:both;content:""} +#hd_define li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} +#hd_define li:last-child {padding-right:0;margin-right:0;border-right:0} +#hd_define li a {display:inline-block;color:#919191} +#hd_define li.active a {color:#fff} + + +#hd_qnb {float:right;text-align:right} +#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""} +#hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} +#hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0} +#hd_qnb li span {display:block;margin-top:5px;font-size:0.92em} +#hd_qnb li a {display:inline-block;color:#919191} +#hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px} + + +.hd_login {position:absolute;right:0;top:60px} +.hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px} +.hd_login li:first-child {border-left:0} +.hd_login a {color:#fff} + + +/* 메인메뉴 */ +#gnb {position:relative;background:#fff} +#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} +#gnb .gnb_wrap {margin:0 auto;position:relative} +#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3} +#gnb #gnb_1dul {font-size:1.083em;padding:0;border-bottom:1px solid #e0e2e5;zoom:1} +#gnb ul:after {display:block;visibility:hidden;clear:both;content:""} +#gnb .gnb_1dli {float:left;line-height:55px;padding:0px;position:relative} +#gnb .gnb_1dli:hover > a {color:#3a8afd; +-webkit-transition:background-color 2s ease-out; +-moz-transition:background-color 0.3s ease-out; +-o-transition:background-color 0.3s ease-out; +transition:background-color 0.3s ease-out} + +.gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;background:url('../img/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px} +.gnb_1da {display:block;font-weight:bold;padding:0 15px;color:#080808;text-decoration:none} +.gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px} +.gnb_2dli:first-child {border:0} +.gnb_2dul {display:none;position:absolute;top:54px;min-width:140px;padding-top:2px} +.gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0; +-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); +-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); +box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)} +.gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none} +a.gnb_2da:hover {color:#3a8afd;background:#f7f7f8; +-moz-transition:all 0.3s ease-out; +-o-transition:all 0.3s ease-out; +transition:all 0.3s ease-out} + +.gnb_1dli_air .gnb_2da {} +.gnb_1dli_on .gnb_2da {} +.gnb_2da:focus, .gnb_2da:hover {color:#fff} +.gnb_1dli_over .gnb_2dul {display:block;left:0} +.gnb_1dli_over2 .gnb_2dul {display:block;right:0} +.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808} +.gnb_wrap .gnb_empty a {color:#3a8afd;text-decoration:underline} +.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555} + +#gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px} +#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0} +#gnb .gnb_mnal {float:right;padding:0} + +#gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2); +-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2); +box-shadow:0 2px 5px rgba(0,0,0,0.2)} +#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef} +#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""} +#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0} +#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef} +#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd} +#gnb_all .gnb_al_li li {line-height:2em} +#gnb_all .gnb_al_li li a {color:#555} +#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999} + +/* 중간 레이아웃 */ +#wrapper {} +#container_wr:after {display:block;visibility:hidden;clear:both;content:""} +#container_wr {margin:0 auto;zoom:1} +#aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px} + +#container {position:relative;float:left;min-height:500px;height:auto !important;margin:20px 0;font-size:1em;width:930px;zoom:1} +#container:after {display:block;visibility:hidden;clear:both;content:""} +#container_title {font-size:1.333em;margin:0 auto;font-weight:bold} +#container_title span {margin:0 auto 10px;display:block;line-height:30px} + +.lt_wr {width:32%} +.lt_wr:nth-child(3n+1) {clear:both} +.latest_wr {margin-bottom:20px} +.latest_wr:after {display:block;visibility:hidden;clear:both;content:""} +.latest_top_wr {margin:0 -10px 20px} +.latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""} + +/* 하단 레이아웃 */ +#ft {background:#212020;margin:0 auto;text-align:center} +#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} +#ft_wr {max-width:1240px;margin:0;padding:40px 0;position:relative;display:inline-block;text-align:left} +#ft_wr:after {display:block;visibility:hidden;clear:both;content:""} +#ft_wr .ft_cnt {width:25%;float:left;padding:0 20px} + +#ft_link {text-align:left} +#ft_link a {display:block;color:#fff;line-height:2em;font-weight:bold} +#ft_company h2 {font-size:1.2em;margin-bottom:20px} +#ft_company {font-weight:normal;color:#e3e3e3;line-height:2em} +#ft_catch {margin:20px 0 10px} +#ft_copy {text-align:center;width:1200px;margin:0 auto;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838} +#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)} +#top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff} + +/* 게시물 선택복사 선택이동 */ +#copymove {} +#copymove .win_desc {text-align:center;display:block} +#copymove .tbl_wrap {margin:20px} +#copymove .win_btn {padding:0 20px 20px} +.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px} +.copymove_currentbg {background:#f4f4f4} + +/* 화면낭독기 사용자용 */ +#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} +.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} + +/* 본문 바로가기 */ +#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} +#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} + +/* ie6 이미지 너비 지정 */ +.img_fix {width:100%;height:auto} + +/* 캡챠 자동등록(입력)방지 기본 -pc */ +#captcha {display:inline-block;position:relative} +#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} +#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} +#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px} +#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} +#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} +#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} + +/* 캡챠 자동등록(입력)방지 기본 - mobile */ +#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px} +#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block} +#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px} +#captcha.m_captcha #captcha_reload span {display:none} +#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px} +#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} +#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none} + +/* ckeditor 단축키 */ +.cke_sc {margin:0 0 5px;text-align:right} +.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer} +.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center} +.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1} +.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} +.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} +.cke_sc_def dt {width:20%;font-weight:bold} +.cke_sc_def dd {width:30%} + +/* ckeditor 태그 기본값 */ +#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} +#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} +#bo_v_con li {display:list-item} + +/* 버튼 */ +a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em; +-webkit-transition:background-color 0.3s ease-out; +-moz-transition:background-color 0.3s ease-out; +-o-transition:background-color 0.3s ease-out; +transition:background-color 0.3s ease-out} + +a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} +a.btn01:focus, a.btn01:hover {text-decoration:none} +button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} +a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} +a.btn02:focus, .btn02:hover {text-decoration:none} +button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} + +.btn_confirm {text-align:right} /* 서식단계 진행 */ + +.btn_submit {border:0;background:#3a8afd;color:#000;cursor:pointer;border-radius:3px} +.btn_submit:hover {background:#2375eb} +.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff} +a.btn_close {text-align:center;line-height:50px} + +a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} +button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} +.btn_cancel:hover {background:#aaa} +a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ +a.btn_frmline {} +button.btn_frmline {font-size:1em} + +/* 게시판용 버튼 */ +a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} +.btn_b01:hover, .btn_b01:hover {color:#000} +a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle} +a.btn_b02:hover, .btn_b02:hover {background:#0025eb} +a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} +a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} +a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} +a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} +a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ +.btn_admin:hover, a.btn_admin:hover {color:#ff3746} + + +/* 기본테이블 */ +.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} +.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} +.tbl_head01 {margin:0 0 10px} +.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} +.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px} +.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ +.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} +.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8} +.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all} +.tbl_head01 tbody tr:hover td {background:#fafafa} +.tbl_head01 a:hover {text-decoration:underline} + +.tbl_head02 {margin:0 0 10px} +.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} +.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} +.tbl_head02 thead a {color:#383838} +.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ +.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} +.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff} +.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all} +.tbl_head02 a {} + +/* 폼 테이블 */ +.tbl_frm01 {margin:0 0 20px} +.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} +.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} +.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} +.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px; +-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); +-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); +box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); +} +.tbl_frm01 textarea {padding:2px 2px 3px} +.frm_input {height:40px} + +.full_input {width:100%} +.half_input {width:49.5%} +.twopart_input {width:385px;margin-right:10px} +.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px} +.tbl_frm01 a {text-decoration:none} +.tbl_frm01 .frm_file {display:block;margin-bottom:5px} +.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} + +/*기본 리스트*/ +.list_01 ul {border-top:1px solid #ececec} +.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative} +.list_01 li:nth-child(odd) {background:#f6f6f6} +.list_01 li:after {display:block;visibility:hidden;clear:both;content:""} +.list_01 li:hover {background:#f9f9f9} +.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666} + +/*폼 리스트*/ +.form_01 h2 {font-size:1.167em} +.form_01 li {margin-bottom:10px} +.form_01 ul:after, +.form_01 li:after {display:block;visibility:hidden;clear:both;content:""} +.form_01 .left_input {float:left} +.form_01 .margin_input {margin-right:1%} +.form_01 textarea {height:100px;width:100%} +.form_01 .frm_label {display:inline-block;width:130px} + +/* 자료 없는 목록 */ +.empty_table {padding:50px 0 !important;text-align:center} +.empty_list {padding:20px 0 !important;color:#666;text-align:center} + +/* 필수입력 */ +.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important} + +/* 테이블 항목별 정의 */ +.td_board {width:80px;text-align:center} +.td_category {width:80px;text-align:center} +.td_chk {width:30px;text-align:center} +.td_date {width:60px;text-align:center} +.td_datetime {width:110px;text-align:center} +.td_group {width:80px;text-align:center} +.td_mb_id {width:100px;text-align:center} +.td_mng {width:80px;text-align:center} +.td_name {width:100px;text-align:left} +.td_nick {width:100px;text-align:center} +.td_num {width:50px;text-align:center} +.td_numbig {width:80px;text-align:center} +.td_stat {width:60px;text-align:center} + +.txt_active {color:#5d910b} +.txt_done {color:#e8180c} +.txt_expired {color:#ccc} +.txt_rdy {color:#8abc2a} + +/* 새창 기본 스타일 */ +.new_win {position:relative} +.new_win .tbl_wrap {margin:0 20px} +.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); +-moz-box-shadow:0 1px 10px rgba(0,0,0,.1); +box-shadow:0 1px 10px rgba(0,0,0,.1)} +.new_win #win_title .sv {font-size:0.75em;line-height:1.2em} +.new_win .win_ul {margin-bottom:15px;padding:0 20px} +.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} +.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px} +.new_win .win_ul li:first-child {margin-left:0} +.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3} +.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5} +.new_win .win_ul .selected a {color:#fff;font-weight:bold} +.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px} +.new_win .win_desc i {font-size:1.2em;vertical-align:baseline} +.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px} +.new_win .frm_info {font-size:0.92em;color:#919191} +.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px} +.new_win .new_win_con {margin:20px 0;padding:20px} +.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} +.new_win .new_win_con2 {margin:20px 0} +.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} +.new_win .win_btn {text-align:center} +.new_win .cert_btn {margin-bottom:30px;text-align:center} +.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer} +.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em} + +/* 검색결과 색상 */ +.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px} + +/* 자바스크립트 alert 대안 */ +#validation_check {margin:100px auto;width:500px} +#validation_check h1 {margin-bottom:20px;font-size:1.3em} +#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} + +/* 사이드뷰 */ +.sv_wrap {position:relative;font-weight:normal} +.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333; +-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); +-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); +box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)} +.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent} +.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb} +.sv_wrap .sv a:hover {background:#000;color:#fff} +.sv_member {color:#333} +.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto} +.sv_nojs .sv {display:block} + +/* 페이징 */ +.pg_wrap {clear:both;float:left;display:inline-block} +.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} +.pg {text-align:center} +.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee} +.pg a:focus, .pg a:hover {text-decoration:none} +.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px} +.pg_page:hover {background-color:#fafafa} +.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} +.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} +.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} +.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} +.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa} + +.pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px} + +/* cheditor 이슈 */ +.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { +-webkit-box-sizing:content-box; +-moz-box-sizing:content-box; +box-sizing:content-box; +} + +/* Mobile화면으로 */ +#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} + diff --git a/kngil/css/faq/faq_font.css b/kngil/css/faq/faq_font.css new file mode 100644 index 0000000..8d66205 --- /dev/null +++ b/kngil/css/faq/faq_font.css @@ -0,0 +1,49 @@ +@charset "utf-8"; +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 100; + src: url(/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Thin/notokr-thin.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 300; + src: url(/kngil/fonts/faq/NotoKR-Light/notokr-light.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Light/notokr-light.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Light/notokr-light.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 400; + src: url(/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Regular/notokr-regular.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 500; + src: url(/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Medium/notokr-medium.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 700; + src: url(/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Bold/notokr-bold.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 900; + src: url(/kngil/fonts/faq/NotoKR-Black/notokr-black.woff2) format('woff2'), + url(/kngil/fonts/faq/NotoKR-Black/notokr-black.woff) format('woff'), + url(/kngil/fonts/faq/NotoKR-Black/notokr-black.otf) format('opentype'); + } diff --git a/kngil/css/faq/faq_reset.css b/kngil/css/faq/faq_reset.css new file mode 100644 index 0000000..d7d8cb6 --- /dev/null +++ b/kngil/css/faq/faq_reset.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +/* Reset */ +* {box-sizing: border-box;} +html, body, h1, h2, h3, h4, h5, h6, div, p, pre, code, address, ul, ol, li, menu, nav, section, article, aside, +dl ,dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;} +html, body {width:100%; height:100%; font-family: 'Noto Sans KR', sans-serif; } +body {background:#fff; min-width:360px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;} +body, input, select, textarea, button {background:none; border:none;} +button {background: none; cursor: pointer; user-select: none;} +ul, ol, li {list-style:none;} +table {width:100%;border-spacing:0;border-collapse:collapse;} +img, fieldset {border:0;} +address, cite, code {font-style:normal;font-weight:normal;} +em {font-style:normal;font-weight:bold;} +i {font-style: normal;} +label, img, input, select, textarea, button {font-family:inherit; vertical-align:middle;} +caption, legend {line-height:0;font-size:1px;overflow:hidden;} +hr{display:none;} +main, header, section, nav, footer, aside, article, figure {display:block;} +a {color:inherit; text-decoration:none;} +a:hover {text-decoration:none;} +/* Form */ +input[type=text]::placeholder, input::-webkit-input-placeholder{font-weight:500; color:#bdbdbd;} +select:focus, +textarea:focus, +input:focus {border: 1; outline: none;} +input[type=text][readonly], +input[type=text][readonly]:focus {border:1;} +input[type=tel][readonly], +input[type=password][readonly], +input[type=email][readonly], +input[type=search][readonly], +input[type=tel][disabled], +input[type=text][disabled], +input[type=password][disabled], +input[type=search][disabled], +input[type=email][disabled] {border-color:#c0c0c0; color:#666; -webkit-appearance:none; font-size:16px;} +textarea[readonly], +textarea[disabled] {padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + + diff --git a/kngil/css/faq/faq_style.css b/kngil/css/faq/faq_style.css new file mode 100644 index 0000000..b22b575 --- /dev/null +++ b/kngil/css/faq/faq_style.css @@ -0,0 +1,10333 @@ +@charset "utf-8"; +/* -------------공통적용------------- */ +/* 죄우 여백 필요시 최소 200px 입니다 (200px 이하 여백 사용 X -- 플로팅과 겹쳐요). */ +/* "js__"로 시작하는 클래스는 only 자바스크립트용입니다.*/ +/* XXXX js__넣어서 css 작성 금지 XXXX */ +/* --------------------------------- */ + +/* 공통적용 - 컬러 */ +:root { + --color-yellow: #ffc600; + --color-green: #007243; + --color-orange: #ff5c00; + --color-han_gr: #0e3c2e; + --color-han_br: #27241d; + --color-han_bgbr: #f6f4f2; + --color-primary: #1b7f63; + + --gradient-han_gr: linear-gradient( + 180deg, + #08251c 0%, + #208769 37%, + #08241c 81%, + #051612 100% + ); + --gradient-han_yelllow_border: linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} + +/* 공통적용 - 페이지설정 */ +html { + overflow-y: auto; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + letter-spacing: -0.04em; + scroll-behavior: smooth; + user-select: auto; +} +.wrapper { + width: 100%; +} +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto !important; +} +.brk { + display: none; +} +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + transition: background-color 5000s ease-in-out 0s; + -webkit-transition: background-color 9999s ease-out; + -webkit-box-shadow: 0 0 0px 1000px #ffffff00 inset !important; +} +video::-webkit-media-controls { + display: none !important; +} + +/* 공통적용 - 스크롤 */ +::-webkit-scrollbar { + width: 12px; + height: 12px; +} +::-webkit-scrollbar-thumb { + background-color: #bbb; + background-clip: padding-box; + border: 2px solid transparent; + border-radius: 10px; +} + +/* 공통적용 - 텍스트 관련 */ +a { + color: inherit; +} +h2 { + font-size: 70px; + color: #fff; +} +.h_3 { + font-size: 20px; + font-weight: 400; + letter-spacing: -1px; +} +.h_4 { + font-size: 18px; + font-weight: 300; + letter-spacing: -1px; +} +.grand_tit { + font-size: 64px; + font-weight: 700; +} +.mid_tit { + font-size: 52px; + font-weight: 700; +} +.sub_tit { + font-size: 32px; + font-weight: 700; + color: var(--color-accent); + display: block; +} +.sub_text { + font-size: 20px; + line-height: 30px; + display: block; +} +font.egbim { + color: transparent; + background-repeat: no-repeat; + background-position: bottom 48% right; + margin-right: 2px; + padding: 0 1%; + white-space: nowrap; +} +.txt_border { + filter: drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000) + drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000); +} + +/* 공통적용 - ul li */ +ul { + line-height: 160%; +} +.value ul li { + position: relative; + text-indent: 16px; +} +.value ul li::before { + position: absolute; + content: ""; + top: 14px; + left: 0; + width: 5px; + height: 4px; + background-color: var(--color-accent); + transform: skew(-40deg); +} + +/* 공통적용 - 아이콘 관련 i */ +i { + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +i.egbim.k, +font.egbim.k { + background-image: url(../img/egbim_k.svg); +} +i.egbim.w, +font.egbim.w { + background-image: url(../img/egbim_w.svg); +} +i.egbim_obj.w { + background-image: url(../img/egbim_obj_w.svg); + width: 77px; + min-height: 12px; +} +i.egbim_obj.k { + background-image: url(../img/egbim_obj_k.svg); + width: 77px; + min-height: 12px; +} + +/* 공통적용 - 다이어그램 diagram_wrap */ +.diagram_wrap { + position: relative; +} +.diagram_wrap .dia_element { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +.diagram_wrap .dia_element .dia_tit { + font-size: 20px; + font-weight: 500; +} +.diagram_wrap .dia_element .dia_text { + font-size: 18px; + font-weight: 500; +} +.diagram_wrap .dia_element .line { + background-color: #ffffff; + position: absolute; +} +.diagram_wrap .dia_circles_wrap { + position: relative; + width: 300px; + aspect-ratio: 1/1; + z-index: 1; +} +.diagram_wrap .dia_circles_wrap::after { + position: absolute; + content: ""; + width: 110%; + aspect-ratio: 1/1; + border-radius: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px dashed var(--color-accent); + opacity: 0.5; + z-index: -1; +} +.diagram_wrap .dia_circles_wrap div[class^="circle_"] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.diagram_wrap .dia_circles_wrap .circle_belt { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + border: 1px solid #b6d0c9; + background: #f0f7f5; +} +.diagram_wrap .dia_circles_wrap .circle_core { + width: 80%; + aspect-ratio: 1/1; + border-radius: 50%; + background: linear-gradient(0deg, #123328 0%, #296b55 100%); + box-shadow: inset 0 0 0 1px #00000022; + filter: drop-shadow(-4px 8px 8px #00000033); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 32px; + font-weight: 700; + text-align: center; + color: #ffffff; +} +.diagram_wrap .dia_circles_wrap .circle_dash { + border: 1px dashed #b6d0c9; + width: 110%; + height: 110%; + border-radius: 50%; +} +.diagram_wrap .dia_circles_wrap .circle_dots { + width: 100%; + height: 100%; +} +.diagram_wrap .dia_circles_wrap .circle_dots.move { + top: 0; + left: 0; + opacity: 0.3; + animation-duration: 12s; + animation-iteration-count: infinite; + animation-name: dot-rotate; +} +.diagram_wrap .dia_circles_wrap .circle_dots.move .dot::after { + display: none; +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot { + position: absolute; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #3838384d; +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 50%; + left: -4px; + right: initial; + transform: translateY(-50%); +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: 50%; + left: initial; + right: -4px; + transform: translateY(-50%); +} +@keyframes dot-rotate { + 0% { + transform: rotate(0); + } + 25% { + transform: rotate(90deg); + } + 50% { + transform: rotate(180deg); + } + 75% { + transform: rotate(270deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* 공통적용 - 헤더 header */ +header { + width: 100%; + height: 100px; + padding: 0 48px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + background: linear-gradient(180deg, #00000033, transparent); +} +header h1 { + flex: 1; +} +header h1 a { + display: block; + width: 190px; + height: 36px; + background: url(../img/egbim_w.svg) center no-repeat; + background-size: contain; +} +header .menu_my, +header .menu_ham, +header .menu_admin { + padding: 10px; + position: relative; +} +header .menu_my_list { + display: flex; + background: #fff; + border-radius: 4px; + box-sizing: border-box; + border: 1px solid #131313; + position: absolute; + left: calc(25% - 60px); + top: 50px; + padding: 4px; +} +header .menu_my_list li { + width: 68px; + height: 32px; + text-align: center; + font-size: 13px; + font-weight: 500; + cursor: pointer; +} +header .menu_my_list li:hover { + background: var(--color-yellow); +} +header .menu_my_list li a { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +header .menu_my_list::before { + content: ""; + background: url(../img/tri_img.svg) no-repeat; + background-size: cover; + width: 12px; + height: 10px; + position: absolute; + top: -9px; + left: calc(50% - 6px); +} +header .menu_ham { + cursor: pointer; +} +header .menu_ham a { + display: block; + width: 32px; + height: 32px; + position: relative; +} +header .menu_ham a div { + width: 24px; + height: 2px; + position: absolute; + left: 4px; + background-color: #fff; + transition: 0.2s; +} +header .menu_ham a div:nth-child(1) { + top: 7px; +} +header .menu_ham a div:nth-child(2) { + top: 15px; +} +header .menu_ham a div:nth-child(3) { + bottom: 7px; +} + +/* 공통적용 - 플로팅메뉴 floating_menu */ +.floating_menu { + width: 82px; + height: 424px; + position: fixed; + top: 96px; + right: 0px; + z-index: 20; + background: url("../img/floating_bg_r4.png"); + background-size: cover; + padding: 52px 0 44px; +} +.floating_menu ul { + width: 100%; + height: 100%; + display: flex; + justify-content: space-evenly; + align-items: stretch; + flex-direction: column; +} +.floating_menu li { + height: 100%; + display: flex; + align-items: center; +} +.floating_menu li a { + width: 100%; + text-align: center; + display: block; + padding-left: 6px; +} +.floating_menu li span { + display: block; + color: #ffffff; + font-weight: 400; + text-align: center; + font-size: 14px; +} +.floating_menu li a:hover span { + color: var(--color-yellow); + font-weight: 500; +} +.floating_menu li a i { + width: 28px; + aspect-ratio: 1/1; + margin: 0 auto; +} +.floating_menu li.floating_buy a i { + background-image: url(../img/ico_floating_buy.svg); +} +.floating_menu li.floating_faq a i { + background-image: url(../img/ico_floating_faq.svg); +} +.floating_menu li.floating_download a i { + background-image: url(../img/ico_floating_download.svg); +} +.floating_menu li.floating_guide a i { + background-image: url(../img/ico_floating_book.svg); +} +.floating_menu li.floating_download a:hover i { + background-image: url(../img/ico_floating_download_on.svg); +} +.floating_menu li.floating_buy a:hover i { + background-image: url(../img/ico_floating_buy_on.svg); +} +.floating_menu li.floating_faq a:hover i { + background-image: url(../img/ico_floating_faq_on.svg); +} +.floating_menu li.floating_guide a:hover i { + background-image: url(../img/ico_floating_book_on.svg); +} + +/* 공통적용 - 푸터 footer */ +footer { + width: 100%; + background: #14100c; + padding: 16px 60px; + box-sizing: border-box; + color: #fff; +} +footer.footer_on { + display: block; + animation: footer_up 0.3s ease forwards; + position: relative; + z-index: 100; +} +footer .footer_wrap { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + gap: 40px; +} +footer .ceo { + font-size: 14px; + color: #ffffff80; +} +footer .ceo em { + font-weight: 500; + font-size: 18px; + margin-left: 4px; +} +footer .comp_inner { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 8px; +} +footer .comp_box { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; +} +footer .btn_privacy { + font-size: 18px; + color: #ffffff80; + font-weight: 500; +} +footer .btn_privacy em { + margin-right: 40px; + position: relative; + font-weight: 500; + color: #ffffff; + opacity: 0.9; +} +footer .btn_privacy em::after { + position: absolute; + content: "|"; + font-weight: 300; + font-size: 16px; + color: #aaa; + top: 1px; + right: -22px; +} +footer .btn_privacy a:hover { + color: #ffffff; +} +footer .footer_menu { + display: flex; + gap: 32px; + align-items: center; +} +footer .footer_menu li { + color: #fff; + font-weight: 500; + font-size: 20px; + white-space: nowrap; +} +footer .footer_menu li a:hover { + color: var(--color-primary); +} +footer .footer_sitemap { + font-size: 18px; + color: #ccc; + display: flex; + gap: 12px; + align-items: center; +} +footer .footer_sitemap .tova_sns { + display: flex; + gap: 8px; + margin-left: 26px; +} +footer .footer_sitemap .tova_sns a { + width: 40px; + height: 40px; + background-color: #2c2121; + border-radius: 40px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} +footer .footer_sitemap .tova_sns a img { + opacity: 0.5; +} +footer .footer_sitemap .tova_sns a:hover { + background-color: #3d2d2d; +} +footer .footer_sitemap .tova_sns a:hover img { + opacity: 1; +} +footer .footer_sitemap .family_wrap { + position: relative; + display: flex; + flex-direction: column-reverse; +} +footer .footer_sitemap .family_btn { + background: #2c2121; + color: #fff; + font-size: 16px; + font-weight: 500; + padding: 8px 12px; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + width: 160px; +} +footer .footer_sitemap .family_btn i { + width: 12px; + aspect-ratio: 1/1; + background-image: url(../img/ico_angle.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transform: scaleY(-1); + transition: 0.2s; +} +footer .footer_sitemap:has(.family_on) .family_btn i { + transform: scaleY(1); +} +footer .footer_sitemap .family_list { + background: #fff; + width: 100%; + border-radius: 4px 4px 0 0; + padding: 0 10px; + box-sizing: border-box; + box-shadow: 0px -2px 10px #00000022; + display: none; + position: absolute; + bottom: 100%; +} +footer .footer_sitemap .family_list.family_on { + display: block; + z-index: 10000; +} +footer .footer_sitemap .family_list li { + padding: 4px 0; + border-bottom: 1px solid #ddd; +} +footer .footer_sitemap .family_list li { + color: #777; + width: 100%; + display: block; + font-size: 12px; +} +footer .footer_sitemap .family_list li a:hover { + color: #000; + font-weight: 500; +} +footer .comp_info { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 40%; + max-width: 240px; +} +footer .comp_info .logo_baron { + width: 100%; + min-width: 200px; + max-width: 200px; + height: 45px; + opacity: 0.8; +} +footer .comp_contact { + display: flex; + flex-direction: row; + justify-content: space-between; + width: max-content; + gap: 56px; +} +footer .copyright { + grid-row: 4; + color: #ffffff80; + font-size: 16px; + align-self: flex-start; + letter-spacing: 0; +} +footer .comp_copy { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 0px; + width: 100%; + white-space: nowrap; +} +footer .address { + color: #ffffffaa; + font-size: 16px; + display: flex; + flex-wrap: wrap; + gap: 2px 24px; + min-width: 60%; +} +footer .address em { + font-weight: normal; +} +footer .address em.tel { + letter-spacing: 0; +} + +@keyframes footer_up { + 0% { + bottom: -80px; + opacity: 0.8; + } + 100% { + bottom: 0px; + opacity: 1; + } +} +@keyframes footer_down { + 0% { + bottom: 0px; + opacity: 1; + } + 100% { + bottom: -100px; + opacity: 0; + display: none; + } +} +.btn_top { + position: fixed; + bottom: 60px; + right: 60px; + z-index: 10; + width: 60px; + height: 60px; + background-color: #14100c; + cursor: pointer; + border-radius: 50%; + opacity: 0; +} +.btn_top::before { + content: ""; + background: #fff; + width: 30px; + height: 2px; + display: block; + position: absolute; + top: 12px; + left: calc(50% - 15px); + border-radius: 20px; +} +.btn_top .arrow { + width: 2px; + height: 32px; + background-color: #fff; + position: absolute; + bottom: 8px; + left: 50%; + border-radius: 20px; +} +.btn_top .arrow::after, +.btn_top .arrow::before { + position: absolute; + content: ""; + width: 16px; + height: 2px; + background-color: #fff; + top: 6px; + left: 50%; +} +.btn_top .arrow::after { + transform: translateX(calc(-50% + 6px)) rotate(45deg); +} +.btn_top .arrow::before { + transform: translateX(calc(-50% - 6px)) rotate(-45deg); +} +.btn_top:hover .arrow { + bottom: 14px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn_top:hover:before { + background: var(--color-yellow); +} +.btn_top:hover .arrow::after, +.btn_top:hover .arrow::before { + bottom: 8px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn_top.topbtn_off { + transition: opacity 0.3s; + opacity: 0; +} +.btn_top.topbtn_on { + transition: opacity 0.3s; + opacity: 1; +} + +.main .btn_top.topbtn_off { + visibility: hidden; +} + +/* 공통적용 - 인트로 intro */ +.intro { + display: flex; + flex-direction: column; + gap: 96px; + padding-bottom: 120px; + position: relative; +} +.intro::after { + position: absolute; + white-space: pre; + font-weight: 900; + letter-spacing: -0.04em; + line-height: 85%; +} +.intro .top { + width: 100%; + height: 480px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.intro .top span { + color: #fff; + font-size: 22px; +} +.intro .keyword { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 42px; + text-align: center; +} +.intro .keyword span { + font-weight: 700; + font-size: 32px; +} +.intro .keyword p { + font-size: 20px; +} + +/* 공통적용 - 왼쪽고정페이지 */ +.layout_fix_left { + width: 100%; + display: flex; + position: relative; +} +.layout_fix_left .left { + min-width: 700px; + height: 200%; /* height: 100vh; */ + padding: 100px 0 0 200px; + position: sticky; + top: 0; + left: 0; + overflow: hidden; +} +.layout_fix_left .left .bg { + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 0; + left: 0; + z-index: -2; +} +.layout_fix_left .left .bg.on { + z-index: -1; +} +.layout_fix_left .left .mid_tit { + color: #fff; + display: block; + opacity: 0.5; +} +.layout_fix_left .left .mid_tit.on { + opacity: 1; +} +.layout_fix_left .right { + width: 100%; + max-width: 1373px; +} + +/* 공통적용 - 마우스 스크롤 마크 */ +.mouse_mark { + position: fixed; + width: 64px !important; + height: 64px !important; + display: flex; + justify-content: center; + align-items: center; + background-color: #007243cc; + border-radius: 50%; + transform: translate(-65%, -65%) !important; + pointer-events: none; + z-index: 100; + transition: opacity 0.2s; +} +.mouse_mark span { + position: relative; + letter-spacing: 0.07rem; + font-size: 10px; + font-weight: 700; + color: #fff; +} +.mouse_mark span::before, +.mouse_mark span::after { + content: ""; + width: 4px; + height: 4px; + display: block; + position: absolute; + left: calc(50% - 2px); + border: solid #ffffff; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 1.5s infinite ease; +} +.mouse_mark span::before { + bottom: -10px; +} +.mouse_mark span::after { + bottom: -16px; + animation-delay: 0.35s; +} +@keyframes arrow { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + margin-top: 10px; + } +} + +/* 여기서부터 개별페이지 */ +/* --------------------------------- */ +/* 메인 index */ +/* --------------------------------- */ +.wrapper:has(.main) { + overflow: hidden; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.intro_wrap { + position: absolute; + width: 100%; + height: 100%; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} +.intro_wrap .intro_txt .txt_mask { + overflow: hidden; +} +.intro_wrap .intro_txt .txt_mask span { + display: block; + font-size: 56px; + text-align: center; + position: relative; + top: 80px; +} +.intro_wrap .intro_txt .txt_mask font { + font-size: 36px; +} +.intro_wrap .intro_txt .txt_mask:nth-child(1) span { + animation: txt_mask 1s ease 0s forwards; +} +.intro_wrap .intro_txt .txt_mask:nth-child(2) span { + animation: txt_mask 1s ease 0.1s forwards; +} +.intro_wrap .intro_txt .txt_mask:nth-child(3) span { + animation: txt_mask 1s ease 0.2s forwards; +} +@keyframes txt_mask { + 0% { + top: 80px; + opacity: 0; + } + 100% { + top: 0px; + opacity: 1; + } +} +.main_mask { + position: absolute; + width: 100%; + height: 100%; + z-index: 100; + top: -150px; + clip-path: inset(50% 50% round 10px 10px 10px 10px); + animation: clip_play 2.5s ease 1s 1 forwards; +} +@keyframes clip_play { + 0% { + clip-path: inset(50% 50% round 10px 10px 10px 10px); + top: -150px; + } + 30% { + clip-path: inset(49.5% 45% round 10px 10px 10px 10px); + top: -150px; + } + 60% { + clip-path: inset(45% 45% round 10px 10px 10px 10px); + top: -193px; + } + 100% { + clip-path: inset(0% 0% round 0px 0px 0px 0px); + top: 0; + } +} +.main_mask.skip { + animation: none; + clip-path: none; + top: 0; +} +.main { + width: 100%; + height: 100%; +} +.main .pagination_main { + display: flex; + flex-direction: column; + gap: 24px; + color: #fff; + font-weight: 700; + font-size: 17px; + text-align: center; + position: absolute; + bottom: calc((130 / 1080) * 100%); + right: 24px; + z-index: 1; + text-indent: 0; + transition: bottom 0.2s ease; +} +.main .pagination_main::before { + content: " "; + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + display: block; + width: calc(100% + 54px); + height: calc(100% + 48px); + pointer-events: none; + + /* 중앙 0.4, 외곽으로 투명하게 */ + background: radial-gradient( + ellipse at center, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.2) 50%, + rgba(0, 0, 0, 0.2) 95%, + rgba(0, 0, 0, 0) 105% + ); + filter: blur(20px); + border-radius: 20px; + mix-blend-mode: multiply; +} +.main .pagination_main li { + display: flex; + justify-content: flex-end; + width: 100%; + gap: 8px; +} +.main .pagination_main li div { + width: max-content; + cursor: pointer; + position: relative; + text-align: right; +} +.main .pagination_main li img { + height: 1em; +} +.main .pagination_main li span { + display: block; + width: 1.5em; + font-size: 20px; + color: #ffffff99; + font-weight: 300; + margin-left: 8px; +} +.main .pagination_main li div::after { + content: ""; + display: block; + height: 2px; + background: var(--color-yellow); + margin-top: 6px; + opacity: 0; + position: absolute; + left: 0; +} +.main .pagination_main li .page_on::after { + opacity: 1; +} +.main .main_link { + width: 100%; + height: 100%; +} +.main .main_link a { + width: 100%; + height: 100%; + display: none; +} +.main .main_link .link_on { + display: block; +} +.main .bg_video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + background: #000; +} +.main .bg_video video { + height: 100%; + width: 100%; + object-fit: cover; +} +.main footer.footer_on { + position: absolute; + bottom: 0; + z-index: 100; + background: #14100ccc; +} +.main footer.footer_off { + animation: footer_down 0.2s ease forwards; + display: none; +} +.main footer .footer_close { + background: url("../img/ico_footer_close.svg") no-repeat; + background-size: cover; + background-position: center; + position: absolute; + width: 40px; + height: 36px; + top: -36px; + left: 0; + cursor: pointer; +} +/* 페이지네이션 재생바 - 영상별로 재생시간 각각 설정해야함 */ +.main .pagination_main .page_01.page_on::after { + animation: page_play 16s linear 1 forwards; +} +.main .pagination_main .page_02.page_on::after { + animation: page_play 11s linear 1 forwards; +} +.main .pagination_main .page_03.page_on::after { + animation: page_play 24s linear 1 forwards; +} +.main .pagination_main .page_04.page_on::after { + animation: page_play 16s linear 1 forwards; +} +.main .pagination_main .page_05.page_on::after { + animation: page_play 13s linear 1 forwards; +} +.main .pagination_main.m .page_01.page_on::after { + animation: page_play 15s linear 1 forwards; +} +.main .pagination_main.m .page_02.page_on::after { + animation: page_play 07s linear 1 forwards; +} +.main .pagination_main.m .page_03.page_on::after { + animation: page_play 19s linear 1 forwards; +} +.main .pagination_main.m .page_04.page_on::after { + animation: page_play 13s linear 1 forwards; +} +.main .pagination_main.m .page_05.page_on::after { + animation: page_play 10s linear 1 forwards; +} +@keyframes page_play { + 0% { + width: 0%; + } + 100% { + width: 100%; + } +} + +/* --------------------------------- */ +/* TOVA소개 value */ +/* --------------------------------- */ +.value .intro { + background-image: url(../img/value_introbg.png); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + color: #fff; + padding-bottom: 370px; +} +.value .intro .top { + height: 240px; + margin-top: 150px; +} +.value .intro .keyword i.egbim_obj.w { + width: 77px; + height: 12px; +} + +.value .intro .diagram_wrap { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; + position: relative; +} +.value .intro .dia_element_wrap { + width: 100%; + position: absolute; + display: flex; + gap: 50px; + z-index: 10; + top: 0; + justify-content: center; + align-items: flex-start; + margin-top: 150px; +} +.value .intro .dia_element { + display: flex; +} +.value .intro .dia_element:nth-child(1) { + flex-direction: row-reverse; + margin-top: 7px; +} +.value .intro .dia_element:nth-child(2) { + flex-direction: column; + margin-top: 260px; +} +.value .intro .dia_element:nth-child(3) { + flex-direction: row; +} +.value .intro .dia_element .dia_tit { + width: 150px; + aspect-ratio: 1/1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} +.value .intro .dia_element:nth-child(1) .dia_tit { + background: linear-gradient(180deg, #fde0c080 0%, #b0917000 100%), + url(../img/dia_valuebg01.png), + linear-gradient(180deg, #583c1c 0%, #583c1c 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_element:nth-child(2) .dia_tit { + background: linear-gradient(180deg, #48d7ac80 0%, #86b6a800 100%), + url(../img/dia_valuebg02.png), + linear-gradient(180deg, #119d49 0%, #119d49 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_element:nth-child(3) .dia_tit { + background: linear-gradient(180deg, #92929280 0%, #92929280 100%), + url(../img/dia_valuebg03.png), + linear-gradient(180deg, #ed7d31 0%, #ed7d31 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_tit span { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; + line-height: 120%; + border: 6px solid #00000033; + border-radius: 50%; + padding: 0 20px; +} +.value .intro .dia_li { + padding: 16px; + border-radius: 10px; + width: 248px; +} +.value .intro .dia_element:nth-child(1) .dia_li { + background: linear-gradient(180deg, #583c1cb3 0%, #583c1c 100%); +} +.value .intro .dia_element:nth-child(2) .dia_li { + background: linear-gradient(180deg, #00583e 0%, #00583e99 100%); + border: 1px solid #08181399; +} +.value .intro .dia_element:nth-child(3) .dia_li { + background: linear-gradient(180deg, #bb5f09 0%, #bb5f09cc 100%); +} +.value .intro .dia_element .dia_line { + height: 1px; + width: 10px; + display: block; +} +.value .intro .dia_element:nth-child(1) .dia_line { + background: #583c1c; +} +.value .intro .dia_element:nth-child(2) .dia_line { + background: #01593e; + width: 1px; + height: 10px; +} +.value .intro .dia_element:nth-child(3) .dia_line { + background: #df6c01; +} +.value .intro .dia_li li { + list-style: disc; + text-indent: 0; + font-size: 18px; + line-height: 28px; + margin-left: 24px; + margin-bottom: 4px; +} +.value .intro .dia_li li::before { + display: none; +} +.value .intro .dia_li li:last-child { + margin-bottom: 0; +} +.value .intro .dia_li li.dia_li_tit { + list-style: none; + font-weight: 500; + font-size: 20px; + margin-left: 0; + margin-bottom: 10px; +} +.value .intro .dia_appendix { + position: absolute; + bottom: -170px; + width: 100%; + height: 60%; + display: flex; + justify-content: center; + gap: 280px; +} +.value .intro .dia_appendix .app_bg { + width: 300px; + height: 100%; + background-repeat: no-repeat; + background-position: 50% bottom; + background-size: contain; + background-image: url(../img/value_arc.svg); + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} +.value .intro .dia_appendix .app_bg:nth-child(2) { + background-image: url(../img/value_arc_r.svg); +} +.value .intro .dia_appendix .app_etc { + background: linear-gradient(90deg, #583c1c 0%, #015e42 100%); + padding: 10px 32px; + border-radius: 50px; + border: 1px solid #000000cc; + display: inline-block; + transform: translate(-50px, 30px); +} +.value .intro .dia_appendix .app_bg:nth-child(2) .app_etc { + background: linear-gradient(90deg, #015e42 0%, #df6c00 100%); + transform: translate(50px, 30px); +} + +.value .intro .dia_circles_wrap { + width: 490px; + padding: 25px; + box-sizing: border-box; + border: 1px solid #ffffff33; + border-radius: 50%; +} +.value .intro .dia_circles_wrap .circle_dash { + border: none; +} +.value .intro .dia_circles_wrap .circle_belt { + background: none; +} +.value .intro .dia_circles_wrap .circle_core { + width: 90%; + line-height: 95%; + background: linear-gradient(-45deg, #ffffff10 0%, #ffffff00 100%), + linear-gradient(180deg, #007f5bb6 0%, #81410040 70%); + border: 1px dashed #ffffff66; +} +.value .intro .dia_circles_wrap .circle_core img { + width: 196px; +} +.value .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 20px; + font-weight: 400; +} +.value .intro .dia_circles_wrap .circle_dots { + opacity: 0; +} +.value .intro .dia_circles_wrap .circle_dots .dot { + background-color: #ffffff; + top: -4px; + right: 49%; + left: initial; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(1) { + animation-name: dot-rotate-road1; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(2) { + animation-name: dot-rotate-road2; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(3) { + animation-name: dot-rotate-road3; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot { + animation-duration: 9s; + animation-iteration-count: infinite; + animation-timing-function: ease-out; + transform-origin: 2px 248px; +} +.value .intro .dia_circles_wrap .circle_dots.move { + opacity: 0.5; + animation: none; + left: 50%; + top: 50%; +} +@keyframes dot-rotate-road1 { + 0% { + transform: rotate(90deg); + } + 33% { + transform: rotate(180deg); + } + 66% { + transform: rotate(270deg); + } + 100% { + transform: rotate(450deg); + } +} + +@keyframes dot-rotate-road2 { + 0% { + transform: rotate(180deg); + } + 33% { + transform: rotate(270deg); + } + 66% { + transform: rotate(450deg); + } + 100% { + transform: rotate(540deg); + } +} + +@keyframes dot-rotate-road3 { + 0% { + transform: rotate(270deg); + } + 33% { + transform: rotate(450deg); + } + 66% { + transform: rotate(540deg); + } + 100% { + transform: rotate(630deg); + } +} + +.value .feature_intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + text-align: center; + position: relative; + overflow: hidden; + scroll-snap-align: center; + scroll-snap-stop: always; + background-image: url(../img/value_feature_bg.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.value .feature_intro .grand_tit { + width: 100%; +} +.value .feature_intro p { + font-size: 24px; + line-height: 160%; +} +.value .feature_intro .line { + width: 1px; + height: 500px; + position: absolute; + top: 65%; + left: calc(50% - 1px); + background-color: #aaa; +} +.value .feature_intro .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #555; + position: absolute; + top: 65%; + left: calc(50% - 3px); +} +.value .features { + width: 100%; + height: 100vh; + display: flex; + gap: 40px; + padding: 100px 20px 20px; + position: relative; + overflow: hidden; +} +.value .features .f_wrap { + width: 100%; + height: 100%; + border-radius: 0px; + padding: 0px 48px 32px 36px; + display: flex; + flex-direction: column; + gap: 24px; + justify-content: flex-end; + position: relative; + overflow: hidden; + transition: all 1s; + background-color: #000; + z-index: 1; +} +.value .features .f_wrap::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: all 1s; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + -webkit-mask-image: linear-gradient(#000000bb 0%, #00000011 100%); +} +.value .features .f_wrap i { + width: 48px; + aspect-ratio: 1/1; +} +.value .features .f_wrap .sub_tit { + color: #fff; +} +.value .features .f_wrap .sub_text { + width: 100%; + height: 240px; + color: #ffffff55; + font-weight: normal; + text-align: justify; + line-height: 32px; + transition: all 1s; +} +.value .features .f_wrap:hover { + padding-bottom: 100px; +} +.value .features .f_wrap:hover::before { + transform: scale(1.03); +} +.value .features .f_wrap:hover .sub_text { + color: #ffffff; +} +.value .features .interface::before { + background-image: url(../img/value_feature_interface_bg.png); +} +.value .features .tool::before { + background-image: url(../img/value_feature_tool_bg.png); +} +.value .features .floorplan::before { + background-image: url(../img/value_feature_floorplan_bg.png); +} +.value .features .bim::before { + background-image: url(../img/value_feature_bim_bg.png); +} +.value .features .interface i { + background-image: url(../img/ico_value_interface_w.svg); +} +.value .features .tool i { + background-image: url(../img/ico_value_tool_w.svg); +} +.value .features .floorplan i { + background-image: url(../img/ico_value_floorplan_w.svg); +} +.value .features .bim i { + background-image: url(../img/ico_value_bim_w.svg); +} +.value .features .lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} +.value .features .lines.move_ani * { + animation-duration: 1s; + animation-fill-mode: both; + position: absolute; +} +.value .features .lines.move_ani div[class^="v"] { + top: 80px; + border-left: 1px solid #aaa; + width: 1px; + height: 0; +} +.value .features .lines.move_ani div[class^="d"] { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #555; +} +.value .features .lines.move_ani .h { + border: 1px solid #aaa; + top: 80px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: calc(100% - 80px); + border-left: 0; + border-right: 0; + animation-name: h-draw; +} +.value .features .lines.move_ani .v1 { + left: calc(50% - 1px); + animation-name: v-center; +} +.value .features .lines.move_ani .v2 { + left: 25%; + animation-name: v-side; +} +.value .features .lines.move_ani .v3 { + left: 75%; + animation-name: v-side; +} +.value .features .lines.move_ani .d1 { + animation-name: dot-center; +} +.value .features .lines.move_ani .d2 { + animation-name: dot-side-left; +} +.value .features .lines.move_ani .d3 { + animation-name: dot-side-right; +} +@keyframes h-draw { + 0% { + width: 0; + } + 30% { + width: 0; + } + 70% { + width: 50%; + } + 100% { + width: 100%; + } +} + +@keyframes v-center { + 0% { + top: 0; + } + 30% { + top: 0; + height: 80px; + } + 100% { + top: 0; + height: 100%; + } +} + +@keyframes v-side { + 0% { + height: 0; + } + 70% { + height: 0; + } + 100% { + height: 100%; + } +} + +@keyframes dot-center { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } +} + +@keyframes dot-side-left { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 70% { + top: calc(80px - 3px); + left: calc(25% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(25% - 3px); + } +} + +@keyframes dot-side-right { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 70% { + top: calc(80px - 3px); + left: calc(75% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(75% - 3px); + } +} + +.value .system_bg { + width: 100%; + height: 0; + position: sticky; + top: 0; + left: 0; + z-index: -1; +} +.value .system_bg::after { + position: absolute; + content: ""; + width: 100%; + height: 1200px; + background-image: url(../img/value_system_bg.png); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; +} +.value .system { + width: 100%; + height: 1100px; + overflow: hidden; + position: relative; +} +.value .system .system_tit { + width: 100%; + height: 300px; + background-color: #fff; + padding-left: 200px; +} +.value .system .system_tit span { + display: block; + transform: translateY(141%); + font-size: 88px; + line-height: 90%; + font-weight: 900; + color: #3c3631; +} +.value .system .system_tit span em { + color: #fff; +} +.value .system .diagram_wrap { + width: 360px; + aspect-ratio: 1/1; + position: absolute; + bottom: 130px; + right: 24%; +} +.value .system .diagram_wrap .dia_circles_wrap { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; +} +.value .system .diagram_wrap .dia_circles_wrap::after { + border: 1px solid #fff; + background-color: #604f324d; + mix-blend-mode: color-burn; + width: 120%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_belt { + background: none; + border: 1px dashed #ffffff66; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core { + background: none; + box-shadow: none; + width: 100%; + height: 100%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 0px; + font-size: 20px; + font-weight: 300; + line-height: 70%; + border-radius: 50%; + width: 50%; + height: 50%; + color: #fff; + box-shadow: 0 1px 4px #00000077; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span b { + font-size: 24px; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(1) { + background: linear-gradient(180deg, #296b55 0%, #124133cc 100%); + border: 2px solid #17503dcc; + top: 0; + z-index: 2; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(2) { + background: linear-gradient(180deg, #352d1dcc 0%, #1d1810 100%); + border: 2px solid #352d1dcc; + bottom: 11%; + left: 4%; + z-index: 0; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(3) { + background: linear-gradient(-60deg, #eb5f00 0%, #bc4c0080 100%); + border: 2px solid #f67a2780; + bottom: 11%; + right: 4%; + z-index: 1; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(4) { + top: 7%; + right: -18%; + box-shadow: none; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot { + background-color: #fff; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots.move { + animation-name: dot-rotate3; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 0; + left: calc(50% - 4px); +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: initial; + bottom: 23%; + left: 6%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(3) { + top: initial; + bottom: 23%; + right: 6%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(4) { + top: 32%; + left: initial; + right: -9%; +} +@keyframes dot-rotate3 { + 0% { + transform: rotate(0); + } + 35% { + transform: rotate(120deg); + } + 70% { + transform: rotate(240deg); + } + 100% { + transform: rotate(360deg); + } +} +.value .system .diagram_wrap .dia_element { + position: absolute; + display: initial; +} +.value .system .diagram_wrap .dia_element .dia_text { + color: #fff; +} +.value .system .diagram_wrap .dia_element .dia_text li { + text-indent: 0; +} +.value .system .diagram_wrap .dia_element .dia_text li::before { + display: none; +} +.value .system .diagram_wrap .dia_element:nth-child(1) .dia_text { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 24px; + text-align: right; + width: max-content; +} +.value .system .diagram_wrap .dia_element:nth-child(1) { + width: max-content; + top: -50%; + left: 50%; + transform: translateX(-50%); +} +.value .system .diagram_wrap .dia_element:nth-child(2) { + width: max-content; + bottom: -6%; + right: 118%; + text-align: right; +} +.value .system .diagram_wrap .dia_element:nth-child(3) { + width: max-content; + bottom: -6%; + left: 118%; +} +.value .system .diagram_wrap .dia_element:nth-child(4) { + width: max-content; + top: 29.5%; + left: 117%; +} +.value .system .diagram_wrap .dia_element .line { + position: absolute; + width: 80px; + height: 1px; + background-color: #fff; + z-index: 10; +} +.value .system .diagram_wrap .dia_element:nth-child(1) .line { + width: 1px; + height: 80px; + bottom: -80px; + left: 50%; + transform: translateX(-50%); +} +.value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: 51px; + right: -94px; + transform: rotate(-30deg); +} +.value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: 26px; + left: -94px; + transform: rotate(30deg); +} +.value .system .diagram_wrap .dia_element:nth-child(4) .line { + width: 24px; + top: 12px; + left: -30px; +} + +/* --------------------------------- */ +/* 인터페이스 interface */ +/* --------------------------------- */ +.interface .sub_text { + text-align: justify; + line-height: 1.4em; +} +.interface .intro .top { + background-image: url(../img/interface_intro_bg.png); +} + +.interface .route { + width: 100%; + height: 100%; + position: relative; +} +.interface .route .fix { + position: sticky; + top: 0; + left: 0; + z-index: 0; + display: flex; + flex-direction: column; + align-items: center; + padding: 0px 120px; + background: url(../img/interface_route_bg.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + height: 100vh; + justify-content: space-around; +} +.interface .route .keyword { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + text-align: center; + height: max-content; +} +.interface .route .keyword span { + font-weight: 700; + font-size: 32px; +} +.interface .route .keyword p { + font-size: 20px; +} +.interface .route div { + width: 100%; + height: 100vh; + font-size: 30px; +} +.interface .route #sec1 { + height: 50vh; +} +.interface .route #sec2 { + height: 100vh; +} +.interface .route #sec3 { + height: 200vh; +} +.interface .route .content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + height: max-content; + gap: 64px; +} +.interface .route .subs { + width: 40%; + min-width: 470px; + height: max-content; + padding-top: 52px; +} +.interface .route .subs li .sub_tit { + font-size: 120px; + font-weight: 900; + color: #000000; + position: absolute; + right: -84px; + top: -56px; + text-align: right; + letter-spacing: -8px; + opacity: 0.05; + white-space: nowrap; +} +.interface .route .subs li .mid_tit { + font-size: 52px; + line-height: 120%; + display: inline-block; + height: fit-content; +} +.interface .route .subs li .mid_tit b { + color: var(--color-green); +} +.interface .route .subs li .sub_text { + margin-top: 32px; + line-height: 32px; + font-size: 20px; +} +.interface .route .subs li .sub_text ul { + margin-top: 24px; +} +.interface .route .subs li .sub_text ul li { + display: block; + text-indent: 16px; +} +.interface .route .subs li .sub_text ul li::before { + position: absolute; + content: ""; + top: 14px; + left: 0; + width: 5px; + height: 4px; + background-color: var(--color-green); + transform: skew(-40deg); +} +.interface .route .subs li { + display: none; + position: relative; +} +.interface .route .subs li.on { + display: block; + animation: scrollUp 0.5s ease-in; +} +.interface .route .imgs { + width: 100%; + max-width: 960px; + aspect-ratio: 7/4; + display: flex; + justify-content: center; + position: relative; + background: url(../img/interface_route_screen.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center top; +} +.interface .route .imgs li { + height: 100%; + aspect-ratio: 7/4; + display: none; + text-align: right; + background-repeat: no-repeat; + position: relative; +} +.interface .route .imgs li.on { + display: block; + animation: scrollUp 0.5s ease-in; +} +.interface .route .imgs li span { + display: block; + width: fit-content; + height: fit-content; + background-color: var(--color-yellow); + border-radius: 4px; + padding: 2px 8px; + font-size: 14px; + font-weight: 700; + line-height: initial; + position: absolute; + text-align: center; + z-index: 1; +} +.interface .route .imgs li span::after { + position: absolute; + content: "●"; + width: 14px; + height: 1px; + top: 50%; + left: 100%; + background-color: var(--color-yellow); + color: var(--color-yellow); + font-size: 6px; + display: flex; + justify-content: flex-end; + align-items: center; +} +.interface .route .imgs li .img_box { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0%; + overflow: hidden; +} +.interface .route .imgs li .img_box object { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.interface .route .imgs li:nth-child(1) .img_box object { + top: -4%; + left: -1.5%; + height: 101%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(1) { + top: -4.2%; + left: 15%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(2) { + top: -4.2%; + right: 30%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(1)::after, +.interface .route .imgs li:nth-child(1) span:nth-child(2)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(1) span:nth-child(3) { + top: 94.5%; + left: 7.5%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(4) { + top: 94.5%; + right: 29.2%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(3)::after, +.interface .route .imgs li:nth-child(1) span:nth-child(4)::after { + transform: rotate(-90deg); + top: -7px; + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(1) span:nth-child(5) { + top: 40.5%; + left: 42%; + background-color: #1f1e19; + color: #fff; + font-size: 24px; +} +.interface .route .imgs li:nth-child(1) span:nth-child(5)::after { + display: none; +} +.interface .route .imgs li:nth-child(2) .img_box object { + top: -2%; + left: -9.5%; + width: 107%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(1) { + top: 2.5%; + left: -10.8%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(2) { + top: 13.5%; + left: -4.1%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 77.5%; + left: 10%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 77.5%; + right: 30%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(3)::after, +.interface .route .imgs li:nth-child(2) span:nth-child(4)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(3) .img_box object { + top: 4%; + left: 8%; +} +.interface .route .imgs li:nth-child(3) span { + top: 18%; + right: 23.3%; +} + +@keyframes scrollUp { + 0% { + transform: translateY(40px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} + +.interface .dual { + width: 100%; +} +.interface .dual { + position: sticky; + top: 0; + left: 0; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + background-image: url(../img/interface_dual_bg.png); + background-size: contain; + background-position: top center; + background-repeat: no-repeat; +} +.interface .dual .dual_top #myimg { + width: 100%; + margin-top: 42px; + border-radius: 16px; +} +.interface .dual .sub_tit { + text-align: center; +} +.interface .dual .sub_tit b { + color: var(--color-green); +} + +.interface .dual .dual_top { + width: 100%; + padding: 160px 200px 0 200px; +} +.interface .dual .detail { + margin-top: 200px; + width: 100%; +} +.interface .dual .detail .sub_tit { + margin-bottom: 60px; +} +.interface .dual .detail .subs { + display: flex; + width: 100%; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0 200px; + margin-bottom: 120px; + gap: 24px; +} +.interface .dual .detail .element { + width: 100%; + padding: 28px 40px; + background: var(--color-han_bgbr); + border-radius: 12px; +} +.interface .dual .detail .exam { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + gap: 12px; +} +.interface .dual .detail .exam span { + font-size: 20px; + color: var(--color-green); + font-weight: 500; + margin-bottom: 8px; + display: block; +} +.interface .dual .detail .sub_text { + text-align: center; + margin-top: 24px; + font-size: 18px; + opacity: 0.85; +} + +/* --------------------------------- */ +/* 주요기능 primary */ +/* --------------------------------- */ +.primary .sub_text { + text-align: justify; + line-height: 1.4em; +} +.primary .intro::before { + position: absolute; + bottom: -4px; + right: 200px; + content: "Key\A Features"; + font-size: 120px; + opacity: 0.03; + text-align: right; + font-weight: 900; + white-space: pre; + line-height: 0.8em; + letter-spacing: -0.04em; +} +.primary .intro .top { + background-image: url(../img/primary_intro_bg.png); +} +.primary .intro .diagram_wrap { + width: 480px; + aspect-ratio: 1/1; + margin: 0 auto; + position: relative; + background-image: url(../img/atom_obj.svg); + background-repeat: no-repeat; + background-position: top center; + background-size: contain; +} +.primary .intro .diagram_wrap::after { + content: ""; + position: absolute; + width: 102.2%; + aspect-ratio: 1/1; + top: -6px; + left: 0; + background-image: url(../img/atom_line.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + mix-blend-mode: soft-light; +} +.primary .intro .diagram_wrap .dia_circles_wrap { + width: 100%; + z-index: -1; +} +.primary .intro .diagram_wrap .circle_core { + width: 52%; + aspect-ratio: 1/1; +} +.primary .intro .diagram_wrap .circle_core span { + font-size: 30px; + line-height: 36px; + width: 100%; + font-weight: 700; +} +.primary .intro .diagram_wrap .circle_dots .dot { + display: flex; + justify-content: center; + align-items: center; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(1) { + background: #afd7ca; + color: #afd7ca; + top: 7%; + left: 39%; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(2) { + background: #eaddce; + color: #eaddce; + top: 80.5%; + left: 20%; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(3) { + background: #f1d1c1; + color: #f1d1c1; + top: 62.5%; + right: 7%; +} +.primary .intro .diagram_wrap .circle_dots .dot::before { + content: ""; + width: inherit; + height: inherit; + border-radius: inherit; + position: absolute; + z-index: -10; + opacity: 0; + animation: 2s expand cubic-bezier(0.29, 0, 0, 1) infinite; + border: 2px solid; +} +@keyframes expand { + 0% { + width: 0; + height: 0; + opacity: 1; + } + 99% { + width: 500%; + height: 500%; + opacity: 0; + } + 100% { + opacity: 0; + border-color: transparent; + } +} +.primary .intro .diagram_wrap .dia_element { + position: absolute; + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 16px; + text-align: right; + font-size: 16px; +} +.primary .intro .diagram_wrap .dia_element i { + width: 40px; + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.primary .intro .diagram_wrap .e01 { + top: 0%; + left: -18%; +} +.primary .intro .diagram_wrap .e02 { + bottom: 6%; + left: -39%; +} +.primary .intro .diagram_wrap .e03 { + bottom: 32%; + right: -26%; + flex-direction: row; + text-align: left; +} +.primary .intro .diagram_wrap .e01 i { + background-image: url(../img/ico_pripary_my.svg); +} +.primary .intro .diagram_wrap .e02 i { + background-image: url(../img/ico_pripary_command.svg); +} +.primary .intro .diagram_wrap .e03 i { + background-image: url(../img/ico_pripary_civil.svg); +} + +.primary .route { + width: 100%; + height: 100%; + position: relative; + margin-bottom: 120px; +} +.primary .route > div { + width: 100%; + height: 100vh; + font-size: 30px; +} +.primary .route #sec1 { + position: absolute; + top: 0; +} +.primary .route .fix { + position: sticky; + top: 0; + left: 0; + z-index: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + overflow: hidden; + background: linear-gradient(#faf9f6 50%, transparent 50%); +} +.primary .route .fix > * { + width: 1360px; +} +.primary .route .subs { + padding-left: 140px; +} +.primary .route .subs li .sub_tit { + font-size: 28px; + font-weight: 500; + color: #007243; + margin-bottom: 20px; +} +.primary .route .subs li .mid_tit { + font-size: 72px; + color: var(--color-green); + display: inline-block; + margin-right: 32px; + letter-spacing: -0.08em; +} +.primary .route .subs li .sub_text { + font-size: 20px; + display: inline-block; + line-height: 160%; +} +.primary .route .subs li { + display: none; +} +.primary .route .subs li.on { + display: initial; +} +.primary .route .content { + display: flex; + flex-direction: row; + align-items: center; + height: 640px; + margin: 0 auto; + position: relative; +} +.primary .route .content::after { + position: absolute; + content: ""; + width: 150%; + height: 80%; + top: 10%; + left: -25%; + background-image: url(../img/primary_route_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + z-index: -1; +} +.primary .route .content .scroll_m { + display: none; +} +.primary .route .tabs { + min-width: 150px; + height: fit-content; + padding: 28px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + background: url(../img/primary_menu_bg.png); + background-size: cover; + background-repeat: no-repeat; + margin-right: -2px; +} +.primary .route .tabs li { + width: 100%; + padding: 4px 0 8px 14px; + border-radius: 8px 0 0 8px; + cursor: pointer; +} +.primary .route .tabs li.on { + background: #ff7f1c1a; + border: 3px solid #ff7f1c; + border-right: none; + position: relative; +} +.primary .route .tabs li.on::before { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(-180deg, #ff7f1c00 0%, #ff7f1c 100%); + display: block; + position: absolute; + top: -35px; + right: 0; +} +.primary .route .tabs li.on::after { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(180deg, #ff7f1c 0%, #ff7f1c00 100%); + display: block; + position: absolute; + bottom: -35px; + right: 0; +} +.primary .route .tabs li a { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; + color: #fff; + border-radius: 4px; + font-size: 16px; +} +.primary .route .tabs li a b { + border-bottom: 1px solid #261f10dd; + position: relative; + font-size: 14px; + line-height: 32px; +} +.primary .route .tabs li a b::after { + content: ""; + background: #ffffff29; + width: 100%; + height: 1px; + position: absolute; + left: 0; + bottom: -2px; +} +.primary .route .tabs_li li { + color: #d7d2b0; + font-size: 12px; + padding: 0; + font-weight: 500; + border-radius: 4px 0 0 4px; + text-indent: 12px; + margin-bottom: 4px; +} +.primary .route .tabs_li.on li:first-child { + background: linear-gradient(180deg, #e4dbc9 0%, #e4dbc9 100%), + linear-gradient(90deg, #68593f 0%, #debd7e 16%, #68593f00 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; + color: #000; + font-size: 14px; + box-sizing: content-box; +} +.primary .route .imgs { + height: 100%; + width: 100%; + display: flex; + background: #e4dbc9; + border: 2px solid #5f5744; + border-radius: 16px; + box-sizing: border-box; + overflow: hidden; +} +.primary .route .imgs li { + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + border-radius: 8px; + opacity: 1; + display: none; +} +.primary .route .imgs li a { + display: block; + width: 100%; + height: 100%; + padding: 32px; + display: flex; + align-items: center; +} +.primary .route .imgs li a img { + width: 100%; + max-height: 100%; +} +.primary .route .imgs li.on { + width: 100%; + opacity: 1; + display: block; +} + +.primary .process .left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + min-width: 575px; + height: 100vh; + padding: 0; + padding-left: 200px; +} +.primary .process .left .bg { + background-size: cover; +} +.primary .process .left .bg:nth-child(1) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_style_bg.png); +} +.primary .process .left .bg:nth-child(2) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_block_bg.png); +} +.primary .process .left .bg:nth-child(3) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_print_bg.png); +} +.primary .process .left .bg.on { + transform: scale(1); +} +.primary .process .left .mid_tit { + transform: scale(0.7) translate(-47%, 0%); + position: relative; + display: block; + font-size: 42px; + cursor: pointer; +} +.primary .process .left .mid_tit .num { + display: none; + font-weight: 300; + margin-right: 8px; +} +.primary .process .left .mid_tit::after { + position: absolute; + content: "●"; + top: 24px; + left: -20px; + font-size: 8px; + display: none; +} +.primary .process .left .mid_tit::before { + position: absolute; + content: ""; + top: 30px; + left: -123%; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent 50%, #fff 100%); + display: none; +} +.primary .process .left .mid_tit.on { + transform: initial; + text-indent: -66px; +} +.primary .process .left .mid_tit.on em, +.primary .process .left .mid_tit:hover em { + font-weight: 700; + color: var(--color-yellow); +} +.primary .process .left .mid_tit.on .num { + display: initial; +} +.primary .process .left .mid_tit.on::after, +.primary .process .left .mid_tit.on::before { + display: initial; +} +.primary .process .right { + padding: 200px 200px 100px 135px; + display: flex; + flex-direction: column; + gap: 160px; +} +.primary .process .right .sub_tit { + display: flex; + flex-direction: column; + font-size: 28px; + margin-bottom: 20px; + color: var(--color-green); +} +.primary .process .right .sub_tit img { + width: 48px; + margin-bottom: 20px; +} +.primary .process .right .sub_text { + margin-bottom: 32px; +} +.primary .process .right .sub_figs { + background: var(--color-han_bgbr); + width: 100%; + display: flex; + flex-direction: column-reverse; + border-radius: 4px; + margin-bottom: 32px; + padding: 24px 20px; + gap: 20px; +} +.primary .process .right .sub_figs .imgs { + width: 100%; +} +.primary .process .right .sub_figs .imgs img { + width: 100%; + object-fit: cover; + object-position: top left; +} +.primary .process .right .sub_figs .imgs { + display: flex; + gap: 16px; + position: relative; +} +.primary .process .right .sub_figs .imgs > div { + width: 100%; + box-shadow: inset 0 0 0 1px #00000022; + border-radius: 4px; + overflow: hidden; + position: relative; + background-position: top left; + background-repeat: no-repeat; + background-size: cover; +} +.primary .process .right .sub_figs .imgs > div span { + display: block; + width: 100%; + height: fit-content; + padding: 8px 0; + font-size: 16px; + font-weight: 500; + text-align: center; + color: #fff; + background-color: #000000aa; +} +.primary .process .right .sub_figs .imgs i { + background-color: var(--color-orange); + width: 48px; + aspect-ratio: 1/1; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-image: url(../img/block_img_ico.svg); + box-shadow: 0 2px 8px #000000aa; +} +.primary .process .right .sub_figs .text { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + font-size: 18px; + padding: 0 12px; +} +.primary .process .right .sub_figs .text b { + color: #000000; + font-size: 20px; + position: relative; +} +.primary .process .right .sub_figs .text li { + font-size: 16px; + position: relative; + line-height: 24px; + padding-left: 16px; + margin-bottom: 4px; +} +.primary .process .right .sub_figs .text li::before { + position: absolute; + content: ""; + top: 10px; + left: 2px; + width: 5px; + height: 4px; + background-color: var(--color-green); + transform: skew(-40deg); +} +.primary .process .right .style .text { + width: 45%; + padding: 0 32px; +} +.primary .process .right .style .sub_figs { + flex-direction: row; + padding: 0; + gap: 0; + height: 420px; +} +.primary .process .right .style .sub_figs .imgs img { + height: 100%; +} +.primary .process .right .style .sub_figs .text li { + margin-bottom: 12px; +} +.primary .process .right .block .sub_figs { + height: fit-content; + justify-content: flex-end; +} +.primary .process .right .block .sub_figs .imgs > div { + height: 400px; +} +.primary .process .right .block .sub_figs .imgs .fig01 { + background-image: url(../img/block_img_01.png); +} +.primary .process .right .block .sub_figs .imgs .fig02 { + background-image: url(../img/block_img_02.png); +} +.primary .process .right .print_area .sub_figs { + height: fit-content; + justify-content: flex-end; +} +.primary .process .right .print_area .sub_figs .imgs > div { + height: 240px; +} +.primary .process .right .print_area .sub_figs .imgs .fig01 { + background-image: url(../img/printarea_img_01.png); +} +.primary .process .right .print_area .sub_figs .imgs .fig02 { + background-image: url(../img/printarea_img_02.png); +} + +/* --------------------------------- */ +/* 도면관리 floorplan */ +/* --------------------------------- */ +.floorplan .intro { + align-items: center; +} +.floorplan .intro .top { + background-image: url(../img/floorplan_intro_bg.png); +} +.floorplan .intro::before { + position: absolute; + bottom: 0px; + left: 32px; + content: "Drawing\A management"; + font-size: 120px; + opacity: 0.03; + text-align: left; + font-weight: 900; + white-space: pre; + line-height: 0.8em; + letter-spacing: -0.04em; +} +.floorplan .intro .diagram_wrap { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 40px; + margin: 120px 0; + text-align: center; + position: relative; +} +.floorplan .intro .dia_elements_wrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.floorplan .intro .dia_element { + width: max-content; + gap: 12px; + position: absolute; +} +.floorplan .intro .dia_element .line { + width: 40px; + height: 1px; + background: var(--color-han_br); +} +.floorplan .intro .dia_element .dia_tit { + font-size: 18px; + line-height: 128%; + white-space: nowrap; +} +.floorplan .intro .dia_element i { + width: 48px; + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.floorplan .intro .dia_element01 i { + background-image: url(../img/ico_floorplan_dia_01.svg); +} +.floorplan .intro .dia_element02 i { + background-image: url(../img/ico_floorplan_dia_02.svg); +} +.floorplan .intro .dia_element03 i { + background-image: url(../img/ico_floorplan_dia_03.svg); +} +.floorplan .intro .dia_element01 { + top: -50%; + left: 50%; + transform: translateX(-50%); +} +.floorplan .intro .dia_element02 { + bottom: -14%; + left: -27%; +} +.floorplan .intro .dia_element03 { + bottom: -14%; + right: -27%; +} +.floorplan .intro .dia_element01 .line { + transform: rotate(90deg); + top: calc(100% + 20px); +} +.floorplan .intro .dia_element02 .line { + transform: rotate(-30deg); + bottom: 100%; + left: 100%; + z-index: 1; +} +.floorplan .intro .dia_element03 .line { + transform: rotate(30deg); + bottom: 100%; + right: 100%; +} +.floorplan .intro .circle_belt { + background: linear-gradient(180deg, #9469241a 0%, #94692433 100%); + border: 1px solid var(--color-han_br); +} +.floorplan .intro .circle_dash { + border: 1px dashed #d4cbbd; +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot { + background: var(--color-han_br); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 0%; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: 75%; + left: 5.5%; + transform: translateY(-50%) rotate(120deg); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(3) { + top: 75%; + right: 5.5%; + transform: translateY(-50%) rotate(240deg); +} +.floorplan .intro .dia_circles_wrap .circle_dots.move { + animation-name: dot-rotate3; +} +@keyframes dot-rotate3 { + 0% { + transform: rotate(0deg); + } + 35% { + transform: rotate(120deg); + } + 70% { + transform: rotate(240deg); + } + 100% { + transform: rotate(360deg); + } +} +.floorplan .intro .dia_circles_wrap .circle_core { + line-height: 95%; +} +.floorplan .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 20px; + font-weight: 400; +} + +.floorplan .key { + margin-bottom: 160px; + padding-top: 320px; + gap: 48px; +} +.floorplan .key .left { + overflow: initial; + z-index: 10; + min-width: 600px; +} +.floorplan .key .left .mid_tit { + width: calc(100vw - 200px); + max-width: 1720px; + height: 500px; + transform: translateY(-320px); + opacity: 1; + position: absolute; + top: 0; + left: 0; + background-size: cover; + background-repeat: no-repeat; +} +.floorplan .key .left .mid_tit span { + position: absolute; + bottom: -70px; + left: 200px; +} +.floorplan .key .left .mid_tit span em { + color: #000; +} +.floorplan .key .left ul { + padding-top: 200px; + display: flex; + flex-direction: column; + gap: 24px; +} +.floorplan .key .left ul li { + font-size: 20px; + font-weight: 300; + white-space: nowrap; + cursor: pointer; +} +.floorplan .key .left ul li:hover, +.floorplan .key .left ul li.on { + font-size: 24px; + color: var(--color-green); + font-weight: 700; +} +.floorplan .key .left ul li em { + margin-right: 12px; + color: inherit; + font-weight: inherit; +} +.floorplan .key .right { + padding: 300px 200px 80px 0; + display: flex; + flex-direction: column; + gap: 100px; +} +.floorplan .key .right .sub_tit { + margin-bottom: 20px; + color: var(--color-green); +} +.floorplan .key .right .sub_text { + text-align: justify; + margin-bottom: 32px; +} +.floorplan .key .right .sub_figs { + background: var(--color-han_bgbr); + width: 100%; + border-radius: 4px; + display: grid; + grid-template-columns: 2.5fr 1fr; +} +.floorplan .key .right .sub_figs .imgs { + position: relative; + width: 100%; +} +.floorplan .key .right .sub_figs .imgs img, +.floorplan .key .right .sub_figs .imgs object { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; +} +.floorplan .key .right .sub_figs .imgs .apx { + position: absolute; +} +.floorplan .key .right .sub_figs .text { + position: relative; + width: 100%; + min-width: 280px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + font-size: 18px; + padding: 24px 0; +} +.floorplan .key .right .sub_figs .top { + text-align: center; +} +.floorplan .key .right .sub_figs .line { + width: 40%; + border-top: 1px solid #000; + font-size: 0; + box-sizing: border-box; +} +.floorplan .key .right .sub_figs .line img { + margin: -1px auto 0; + display: block; +} +.floorplan .key .right .sub_figs .bottom { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + color: var(--color-green); +} +.floorplan .key .right .sub_figs .bottom img { + width: 40px; + object-fit: contain; +} + +.floorplan .find .left .mid_tit { + background-image: url(../img/floorplan_01.png); +} +.floorplan .find .find01 .sub_figs .imgs .apx { + top: -2%; + left: -35%; +} +.floorplan .find .find02 .sub_figs .imgs .apx { + width: 85%; + right: -2%; +} +.floorplan .find .find03 .sub_figs .imgs .apx { + width: 50%; + top: 24%; + z-index: 1; +} +.floorplan .find .find03 .sub_figs .find_03_move { + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + padding: 48px 0 24px; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(1) { + width: 14%; + margin-bottom: 15%; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(2) { + width: 40%; + margin-bottom: 10%; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(3) { + width: 80%; + transform: translateX(-44%); +} +.floorplan .find .find03 .sub_figs .find_03_move .element { + animation: find_03_ani 2.5s ease-in infinite; +} +@keyframes find_03_ani { + 0% { + transform: translate(-40px, -28px) scale(100%); + opacity: 0.85; + } + 50% { + transform: translate(100px, -28px) scale(150%); + opacity: 0; + } + 100% { + opacity: 0; + } +} +.floorplan .info .left .mid_tit { + background-image: url(../img/floorplan_02.png); + left: calc(176px - 12px); + width: calc(100vw - 176px); + max-width: 1744px; +} +.floorplan .info .left .mid_tit span { + left: 24px !important; +} +.floorplan .info .info01 .sub_figs .imgs .apx { + width: fit-content; + height: 60%; + top: 24%; + right: 11%; +} +.floorplan .info .info02 .sub_figs .imgs .apx { + width: 50%; + right: 10%; +} +.floorplan .print .left .mid_tit { + background-image: url(../img/floorplan_03.png); +} +.floorplan .print .right .print02 .sub_figs .imgs img { + object-fit: cover; +} + +/* --------------------------------- */ +/* Forbim forbim */ +/* --------------------------------- */ +.forbim .sub_text { + text-align: justify; + line-height: 1.4em; +} +.forbim .intro { + padding-bottom: 0; +} +.forbim .intro .top { + background-image: url(../img/forbim_intro_bg.png); +} +.forbim .intro .visual { + width: 100%; + height: 500px; + text-align: center; + background: url(../img/forbim_visual_bg.png); + background-size: contain; + background-position: center bottom; + background-repeat: no-repeat; +} +.forbim .intro .visual img { + width: 70%; + transform: translateY(-24%); + margin: 0 auto; +} +.forbim .theorys { + width: 100%; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 80px; + background-image: url(../img/forbim_theorys_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: #fff; +} +.forbim .theorys .mid_tit { + text-align: center; + white-space: nowrap; + font-size: 42px; +} +.forbim .theorys .mid_tit .gr_txt { + color: #34daaa; +} +.forbim .theorys .mid_tit .og_txt { + color: #f87725; +} +.forbim .theorys .diagram_wrap { + width: 600px; + height: max-content; + position: relative; +} +.forbim .theorys .diagram_wrap .dia_elements_wrap { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + gap: 120%; + justify-content: center; +} +.forbim .theorys .diagram_wrap .dia_element { + white-space: nowrap; +} +.forbim .theorys .diagram_wrap .dia_element li { + list-style-type: disc; +} +.forbim .theorys .diagram_wrap .dia_element .line { + width: 40px; + height: 1px; + top: calc(50% - 1px); + background-color: #fff; + z-index: 100; +} +.forbim .theorys .diagram_wrap .dia_element:first-child .line { + left: 130%; +} +.forbim .theorys .diagram_wrap .dia_element:last-child .line { + right: 130%; +} +.forbim .theorys .diagram_wrap .dia_element:last-child ul { + transform: translateX(22px); +} + +.forbim .theorys .diagram_wrap .dia_circles_wrap { + width: 100%; + display: flex; + aspect-ratio: 2/1; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap::after { + width: 105%; + height: 105%; + border-color: #fff; + border-radius: 200px; + opacity: 1; + background-color: #00000055; + border: 1px dashed #ffffff80; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap::before { + position: absolute; + top: -8%; + left: 50%; + transform: translateX(-50%); + content: "정보연동"; + font-weight: 700; + filter: drop-shadow(0 0 2px #000); + font-size: 20px; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_belt { + display: none; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core i { + width: 80%; + aspect-ratio: 5/3; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_dots .dot { + background-color: #fff; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_dots.move { + opacity: 0.5; + animation-duration: 5s; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap > div { + width: 50%; + height: 100%; + position: relative; + transform: initial; + top: initial; + left: initial; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_dots.move { + animation-name: dot-rotate-modal; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_core { + background: linear-gradient(180deg, #296b55 0%, #124133 100%), + linear-gradient(180deg, #458f76 0%, #103126 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_core i { + background-image: url(../img/forbim_theorys_bim.svg); +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_dots { + transform: translate(-50%, -50%) rotate(180deg); +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_dots.move { + animation-name: dot-rotate-algo; +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_core { + background: linear-gradient(180deg, #eb5f00 0%, #bc4c00 100%), + linear-gradient(180deg, #f8741a 0%, #ac5115 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_core + i { + background-image: url(../img/forbim_theorys_plan.svg); +} +@keyframes dot-rotate-modal { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(180deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes dot-rotate-algo { + 0% { + transform: rotate(-180deg); + } + 50% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } +} + +.forbim .process .left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + min-width: 575px; + height: 100vh; + padding: 0; + padding-left: 280px; +} +.forbim .process .left .bg:nth-child(1) { + background-image: url(../img/forbim_process_bg.png); + background-size: cover; +} +.forbim .process .left .bg:nth-child(2) { + background-image: url(../img/forbim_process_bg02.png); + background-size: cover; +} +.forbim .process .left .bg.on { + transform: scale(1); +} +.forbim .process .left .mid_tit { + transform: scale(0.7) translate(-47%, 0%); + position: relative; + display: block; + font-size: 42px; + line-height: 52px; + font-weight: 500; + line-height: 120%; + cursor: pointer; +} +.forbim .process .left .mid_tit .num { + display: none; + font-weight: 300; + margin-right: 8px; +} +.forbim .process .left .mid_tit::after { + position: absolute; + content: "●"; + top: 24px; + left: -32px; + font-size: 8px; + display: none; + line-height: 14px; +} +.forbim .process .left .mid_tit::before { + position: absolute; + content: ""; + top: 30px; + left: -123%; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent 50%, #fff 100%); + display: none; +} +.forbim .process .left .mid_tit.on { + transform: initial; + text-indent: -42px; +} +.forbim .process .left .mid_tit:hover em, +.forbim .process .left .mid_tit.on em { + font-weight: 700; + color: var(--color-yellow); +} +.forbim .process .left .mid_tit.on .num { + display: initial; +} +.forbim .process .left .mid_tit.on::after, +.forbim .process .left .mid_tit.on::before { + display: initial; +} +.forbim .process .right { + padding: 200px 200px 200px 135px; + display: flex; + flex-direction: column; + gap: 200px; +} +.forbim .process .right .sub_tit { + display: flex; + flex-direction: column; + font-size: 32px; + margin-bottom: 20px; + color: var(--color-green); +} +.forbim .process .right .sub_tit img { + width: 48px; + margin-bottom: 32px; +} +.forbim .process .right .sub_text { + margin-bottom: 32px; +} +.forbim .process .right .sub_figs { + width: 100%; + aspect-ratio: 2.4/1; + position: relative; +} +.forbim .process .right .sub_figs > div { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-radius: 4px; + overflow: hidden; +} +.forbim .process .right .sub_figs > div span { + width: 100%; + height: fit-content; + display: block; + position: absolute; + top: 0; + left: 0; + background-color: #000000aa; + text-align: center; + padding: 4px; + font-size: 16px; + color: #fff; + font-weight: 500; +} +.forbim .process .link .sub_figs > div { + width: 42%; + aspect-ratio: 1.2/1; + position: absolute; +} +.forbim .process .link .sub_figs .fig01 { + top: 0; + left: 0; + background-image: url(../img/forbim_process_01_1.png); +} +.forbim .process .link .sub_figs .fig02 { + top: 0; + left: 43%; + background-image: url(../img/forbim_process_01_2.png); +} +.forbim .process .link .sub_figs .fig03 { + width: 24%; + aspect-ratio: 1/1.25; + bottom: 0; + right: 0; + background-image: url(../img/forbim_process_01_3.png); + box-shadow: 0px 2px 8px #00000055; +} +.forbim .process .link .sub_figs .fig04 { + width: 58%; + aspect-ratio: 4/1; + bottom: 0%; + left: 8%; + border: 1px solid var(--color-orange); + border-top: 0; + border-radius: 0; + overflow: initial; +} +.forbim .process .link .sub_figs .fig04::after, +.forbim .process .link .sub_figs .fig04::before { + position: absolute; + content: "●"; + font-size: 10px; + color: var(--color-orange); + top: -5px; + left: -5px; +} +.forbim .process .link .sub_figs .fig04::before { + left: initial; + right: -5px; +} +.forbim .process .link .sub_figs .fig04 span { + color: var(--color-orange); + font-weight: 700; + width: fit-content; + height: 40px; + position: absolute; + top: initial; + display: flex; + align-items: center; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + padding: 0 40px; + border-radius: 100px; + font-size: 20px; + color: var(--color-orange); + background-color: #fff; + border: 1px solid var(--color-orange); + white-space: nowrap; +} +.forbim .process .info .sub_figs { + aspect-ratio: 1.6/1; + border-radius: 4px; + overflow: hidden; +} +.forbim .process .info .sub_figs div { + width: 100%; + height: 100%; + background-image: url(../img/forbim_process_02.png); + background-position: top center; +} +.forbim .process .info .sub_figs div span { + top: initial; + bottom: 0; +} + +/* --------------------------------- */ +/* FAQ 그누보드 */ +/* --------------------------------- */ +/* 자주하는 질문 faq */ +.faq .intro { + padding: 0; +} +.faq .intro .top { + background-image: url(/kngil/img/faq_intro_bg.png); +} +.faq .sub_tab { + display: flex; + width: 100%; + height: 64px; + position: absolute; + bottom: 0; + background-color: #00000077; +} +.faq .sub_tab li { + width: 100%; + height: 100%; + color: #fff; +} +.faq .sub_tab li a { + width: 25vw; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} +.faq .sub_tab li:not(:first-child, :last-child) { + width: max-content; +} + +.faq .sub_tab li:nth-child(1) a { + justify-self: flex-end; +} +.faq .sub_tab li a:hover { + color: var(--color-yellow); +} +.faq .sub_tab li.on { + background: linear-gradient( + 90deg, + rgba(29, 132, 103, 0) 0%, + #1d8467 35%, + #1d8467 65%, + rgba(29, 132, 103, 0) 100% + ); + font-weight: 700; + color: var(--color-yellow); + border-left: none; + border-right: none; +} +.faq .sub_tab li:first-child.on { + background: linear-gradient(270deg, #1d8467 0%, #051612 100%); +} +.faq .sub_tab li:last-child.on { + background: linear-gradient(90deg, #1d8467 0%, #051612 100%); +} + +.faq .sub_tit { + display: flex; + justify-content: center; + align-items: center; + margin-top: 60px; + color: #000; +} +.faq .sch_word { + background: var(--color-yellow); + color: #000; +} +.faq #hd_login_msg { + display: none; +} +.faq #wrapper { + min-width: initial !important; +} +.faq #container_wr { + width: 100%; + margin: 40px 0 120px; + min-height: auto; +} +.faq #container_wr * { + font-size: 16px; + box-shadow: none !important; +} +.faq #container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + float: initial; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 40px; + min-height: auto; +} +.faq #container::after { + display: none; +} +.faq #container_title { + display: none; +} +.faq #faq_hhtml { + display: none; +} +.faq #faq_thtml { + display: none; +} +.faq #faq_sch { + grid-column: 2; + padding: 0; + margin: 0; + background-color: initial; + justify-self: flex-end; + width: 100%; + max-width: 320px; +} +.faq #faq_sch form { + display: flex; + gap: 8px; +} +.faq #faq_sch form input { + width: 100%; + border: 1px solid #ddd; +} +.faq #faq_sch .btn_submit { + background-color: var(--color-han_br); + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + width: 88px; + padding: 0; +} +.faq #bo_cate { + grid-area: 1/1; + padding: 0; + margin: 0; +} +/* .faq #bo_cate {background-color: red;} */ +.faq #bo_cate h2 { + display: none; +} +.faq #bo_cate ul { + display: flex; + gap: 8px; +} +.faq #bo_cate li { + padding: 0; +} +.faq #bo_cate li a { + border: 1px solid #00000022 !important; + color: #555; + border-radius: 3px; + height: 45px; + display: flex; + align-items: center; +} +.faq #bo_cate li a:hover { + background-color: #fafafa; + color: #000; +} +.faq #bo_cate #bo_cate_on { + background-color: var(--color-yellow); + color: #000; +} +.faq #faq_wrap { + margin: 0; + grid-column: span 2; +} +.faq #faq_con li h3 { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + padding: 16px 56px 16px 16px; + width: 100%; + height: fit-content; + min-height: 64px; + font-size: 16px; + font-weight: initial; + margin-bottom: 0; +} +.faq #faq_con li h3 .tit_bg { + font-weight: 700; + font-size: 20px; + position: initial; + font-size: 16px; + color: #555; + align-self: flex-start; +} +.faq #faq_con li h3 a { + flex: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + font-weight: 500; +} +.faq #faq_con li h3 .tit_btn { + background: none; +} +.faq #faq_con li:hover h3 .tit_btn { + color: #000; +} +.faq #faq_con li:has(.faq_li_open), +.faq #faq_con li:hover { + background-color: #fafafa; +} +.faq #faq_con li .faq_li_open a { + color: #000 !important; +} +.faq #faq_con .con_inner .closer_btn { + border-radius: 3px; + border: 1px solid #00000011; + background-color: var(--color-green); + color: #ffffff; +} + +/* 1:1문의하기 q&a_list */ +.faq #container:has(#bo_list) { + display: block; +} + +.faq #bo_list { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 40px; +} +.faq #bo_list #bo_btn_top { + grid-column: 2; + margin: 0; + width: 100%; + max-width: 320px; + justify-self: flex-end; +} +.faq #bo_list #bo_btn_top #bo_list_total { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch_wrap { + display: block; + position: initial; +} +.faq #bo_list #bo_btn_top .btn_bo_user { + width: 100%; +} +.faq #bo_list #bo_btn_top .btn_bo_user li { + margin: 0; + width: 100%; +} +.faq #bo_list #bo_btn_top .btn_bo_user li:first-child .btn_bo_sch { + display: none; +} +.faq #bo_list #bo_btn_top .btn_bo_user li:last-child { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch { + position: initial; + margin: 0; + border: none; + background: none; + width: 100%; +} +.faq #bo_list #bo_btn_top .bo_sch h3 { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch form { + padding: 0; +} +.faq #bo_list #bo_btn_top .bo_sch form #sfl { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch form .sch_bar { + margin: 0; + height: 45px; + width: 100%; + border: none; + display: flex; + gap: 8px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_input { + width: 100%; + height: 100%; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_input::placeholder { + color: transparent; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_btn { + width: 88px; + height: 100%; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_btn .sound_only { + position: initial; + width: initial; + height: initial; + overflow: visible !important; + font-size: 16px; +} +.faq #bo_list #bo_btn_top .bo_sch form .bo_sch_cls { + display: none; +} + +.faq #bo_list #fqalist { + grid-column: span 2; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + row-gap: 40px; +} +.faq #bo_list::after { + display: none; +} +.faq #bo_list #fqalist .tbl_wrap { + margin: 0; + grid-column: span 3; +} +.faq #bo_list #fqalist table { + table-layout: fixed; + border: none; +} +.faq #bo_list #fqalist caption { + display: none; +} +.faq #bo_list #fqalist thead th { + height: 48px; + padding: 0; + font-weight: 500; + border-bottom: 1px solid #000; + border-top: 2px solid #000; + white-space: nowrap; +} +.faq #bo_list #fqalist tbody td { + color: #555; + height: 60px; + word-break: break-all; + text-align: center; + border-bottom: 1px solid#eee; +} +.faq #bo_list #fqalist tbody tr td { + background: none; +} +.faq #bo_list #fqalist tbody tr:hover td { + background: #fafafa; +} +.faq #bo_list #fqalist tbody .td_subject { + display: flex; + align-items: center; + border-top: none; + gap: 16px; +} +.faq #bo_list #fqalist tbody .bo_tit { + text-align: left; + width: 100%; + text-decoration: none; + font-weight: 500; +} +.faq #bo_list #fqalist tbody .bo_cate_link { + width: 58px; + height: 28px; + font-size: 14px; + font-weight: 500 !important; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + color: #000; + background: none; + position: relative; + overflow: hidden; +} +.faq #bo_list #fqalist tbody .bo_cate_link::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: transparent; +} +.faq #bo_list #fqalist tbody .td_stat span { + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: 500; + color: #555; + width: 80px; + margin: 0 auto; + border: 1px solid #00000011; +} +.faq #bo_list #fqalist tbody .td_stat .txt_rdy { + background-color: #fafafa; +} +.faq #bo_list #fqalist tbody .td_stat .txt_done { + background-color: var(--color-green); + color: #fff; +} +.faq #bo_list #fqalist .pg_wrap { + grid-column: 2; +} +.faq #bo_list #fqalist .pg_wrap .pg { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + width: 100%; + height: 100%; +} +.faq #bo_list #fqalist .pg_wrap .pg * { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 30px; + background: none; + border: none; + color: #000; + margin: 0; + padding: 0; + background-position: center; + background-repeat: no-repeat; +} +.faq #bo_list #fqalist .pg_wrap .pg .sound_only { + display: none !important; +} +.faq #bo_list #fqalist .pg_wrap .pg_current { + background-color: var(--color-han_br); + color: #fff; +} +.faq #bo_list #fqalist .pg_wrap .pg_start { + background-image: url(../img/ico_pg_left.svg); +} +.faq #bo_list #fqalist .pg_wrap .pg_end { + background-image: url(../img/ico_pg_right.svg); +} +.faq #bo_list #fqalist .bo_fx { + grid-column: span 3; + margin: 0; +} +.faq #bo_list #fqalist .btn_bo_user li:nth-child(1) { + display: none; +} +.faq #bo_list #fqalist .btn_bo_user .btn_b01 { + background-color: var(--color-han_br); + color: #fff; + border-radius: 3px; + width: 120px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; +} +.faq #bo_list #fqalist .btn_bo_user .btn_b01 .sound_only { + position: initial; + width: initial; + height: initial; + overflow: visible !important; +} + +/* 답변등록 q&a_reply */ +.faq #container:has(#bo_v) { + display: block; +} +.faq header { + position: initial; + padding: initial; + height: initial; +} +.faq header #bo_v_title { + width: 100%; + display: flex; + align-items: center; + gap: 8px; + font-size: 24px; + color: #000; +} +.faq header #bo_v_title .bo_v_cate { + width: 58px; + height: 28px; + font-size: 14px; + font-weight: 500 !important; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + color: #000; + background: none; + position: relative; + overflow: hidden; +} +.faq header #bo_v_title .bo_v_cate::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.02; +} +.faq #bo_v_info h2 { + display: none; +} +.faq #bo_v_top .bo_v_com > li:nth-child(1) { + display: none; +} +.faq #bo_v_top .bo_v_com > li:nth-child(2) { + display: none; +} +.faq #bo_v_top .bo_v_com .more_opt li { + width: 80px; +} +.faq #bo_v_top .bo_v_com .more_opt li i { + margin-right: 4px; +} +.faq #bo_v_atc h2 { + display: none; +} +.faq .bo_v_bottom { + display: flex; + align-items: center; + justify-content: space-between; +} +.faq .bo_v_bottom .bo_v_nb li { + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 3px; + border: 1px solid #eee; + height: 45px; + width: 100px; +} +.faq .bo_v_bottom .bo_v_nb li a { + width: 100%; + color: #000000b5; + font-weight: 500; + height: 45px; + line-height: 45px; +} +.faq .bo_v_bottom .bo_v_nb li i.fa-chevron-left { + margin-right: 8px; +} +.faq .bo_v_bottom .bo_v_nb li i.fa-chevron-right { + margin-left: 8px; +} +.faq .bo_v_bottom .bo_v_nb li:hover { + background: #eeeeee; +} +.faq .bo_v_bottom .list_btn { + background: var(--color-han_br); + color: #fff; + border-radius: 3px; + width: 120px; + display: flex; + justify-content: center; + align-items: center; + height: 45px; +} +.faq .bo_v_bottom .list_btn a { + color: #fff; + width: 100%; +} +.faq .bo_v_bottom .list_btn a i { + margin-right: 12px; +} +.faq #container_wr .bo_v_bottom, +.faq #container_wr #bo_v_ans_form { + margin-top: 24px; +} +.faq #container_wr table tbody td { + padding: 0; +} +.faq #bo_v_ans header { + background: none; + border-bottom: 1px solid #f1f1f1; +} +.faq #bo_v_ans #ans_datetime { + border: 0; +} +.faq #bo_v_ans h2 span { + padding: 2px 12px; + height: auto; + border-radius: 4px; + font-size: 14px; +} + +.faq #bo_v_ans_form h2 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin: 32px 0 16px; +} +.faq #bo_v_ans_form .btn_cke_sc { + display: none; +} +.faq #bo_v_ans_form .btn_submit { + background-color: var(--color-han_br); + color: #fff; +} + +.btn_confirm_re { + width: 120px; + display: flex; + gap: 16px; + float: right; +} +.btn_confirm_re button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + margin-top: 12px; + color: #fff; +} +.btn_confirm_re .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.btn_confirm_re .btn_cancel:hover { + background: #7a7165; + color: #fff; +} + +/* 1:1문의등록 q&a_write */ +.faq #container:has(#bo_w) { + display: block; +} +.faq #bo_w h2 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin-bottom: 16px; +} +.faq #bo_w .cke_sc { + display: none; +} +.faq #bo_w .write_div { + display: flex; + justify-content: flex-end; + gap: 8px; +} +.faq #bo_w .write_div .btn { + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + color: #000; +} +.faq #bo_w .write_div .btn_cancel { + background-color: #eee; +} +.faq #bo_w .write_div.btn_confirm button.btn_submit { + background: var(--color-han_gr); + color: #fff; + margin-top: 0; +} +.faq .btn_submit:hover { + background-image: linear-gradient( + 120deg, + #ffffff40 0%, + #27241d00 80% + ) !important; + color: #fff !important; +} +.faq .form_01 .bo_w_flie .lb_icon .fa-download { + line-height: 38px; +} +.faq .form_01::after { + content: "* 업로드 파일 용량제한 : 30MB이하"; + color: var(--color-orange); + font-weight: 500; + font-size: 16px; + text-align: left; +} +.faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(1), +.faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(1) { + display: none; +} +.faq #bo_list #fqalist:has(th.all_chk) .btn_bo_user li:nth-child(2) { + display: none; +} + +/* 250801 1:1 문의하기 추가 */ +.faq .contents { + width: 100%; + max-width: 1248px; + margin: 40px auto 120px; + padding: 0 24px; +} +.faq h3 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin-bottom: 16px; +} + +.form-wrap .form-area:not(:last-child) { + margin-bottom: 30px; +} +.form-wrap .form-group { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.form-wrap .form-item { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + min-height: 45px; + padding: 5px 0px; + gap: 20px; +} +.form-wrap .form-col-group { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; +} + +.form-wrap .form-item .form-tit { + padding: 0 10px; + min-width: 120px; + font-weight: 500; +} +.form-wrap .form-item .form-tit .require { + color: #fb3c00; +} +.form-wrap .form-item select, +.form-wrap .form-item .input-text, +.form-wrap .form-item .text-area { + border: 1px solid #d0d3db; + border-radius: 3px; + font-size: 16px; + padding: 5px; +} +.form-wrap .form-item .select-sm { + width: 100%; + max-width: 160px; +} +.form-wrap .form-item .input-text { + height: 40px; +} +.form-wrap .form-item .text-area { + width: 100%; + height: 300px; + resize: vertical; +} +.form-wrap .form-item .edit-area { + width: 100%; + border: 1px solid #d0d3db; + border-radius: 3px; + min-height: 480px; + overflow: hidden; +} +.form-wrap .form-item label:has([type="checkbox"]) { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + cursor: pointer; +} +.form-wrap .form-item input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + width: 16px; + height: 16px; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.form-wrap .form-item input[type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} + +.form-wrap .form-item .ck-content { + min-height: 480px; +} +.form-wrap .form-item .attach-box { + display: flex; + align-items: center; + width: max-content; + column-gap: 16px; + flex-wrap: wrap; + max-width: 100%; +} +.form-wrap .form-item input[type="file"] { + width: max-content; + /* border: 1px solid #d0d3db;*/ + padding: 5px; + border-radius: 3px; + font-size: 14px; +} +.form-wrap .form-item .attach-box .info-msg { + white-space: nowrap; + font-size: 14px; + font-weight: 500; + color: #ff5c00; +} + +.tbl-area .tbl-item { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 16px; +} + +.faq .search-wrap { + display: flex; + justify-content: space-between; + padding-bottom: 40px; +} +.faq .search-wrap .qa-filters { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 32px; +} +.faq .search-wrap .qa-filters > div { + position: relative; + display: flex; + gap: 8px; +} +.faq .search-wrap .qa-filters strong { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + text-indent: -9999px; + z-index: -1; +} +.faq .search-wrap label [type="checkbox"] { + -webkit-appearance: none; + appearance: none; +} +.faq .search-wrap label:has(:checked) { + font-weight: 700; +} +.faq .search-wrap .check-group label { + position: relative; + height: 45px; + padding: 10px 15px; + background-color: #fff; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.1); + font-size: 16px; + cursor: pointer; +} + +.faq .search-wrap .check-group [type="checkbox"] { + position: absolute; +} +.faq .search-wrap .check-group label:has(:checked) { + background-color: #ffc600; +} + +.faq .search-wrap .check-box label { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + font-size: 14px; + cursor: pointer; +} + +.faq .search-wrap .check-box [type="checkbox"] { + width: 16px; + height: 16px; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.faq .search-wrap .check-box [type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} + +/* .faq .search-box { + display: flex; + align-items: center; + justify-content: flex-start; + max-width: 320px; + width: 100%; + gap: 8px; + align-self: flex-end; +} + +.faq .search-box input[type="text"], +.faq .search-box input[type="search"] { + width: 100%; + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 10px; +} +.faq .search-box .btn-search { + width: 88px; + height: 45px; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; + font-size: 16px; +} */ +/* 검색 영역 컨테이너 */ +.faq .search-box { + display: flex; + align-items: center; + justify-content: flex-start; + max-width: 450px; /* ✅ 더 넓게 */ + width: 100%; + gap: 6px; + align-self: flex-end; +} + +/* Q&A ID 입력 */ +.faq .search-box .qna-id-input { + width: 100px; + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 8px; + font-size: 14px; +} + +/* 이동 버튼 */ +.faq .search-box .btn-move { + height: 45px; + padding: 0 12px; + border: 1px solid #ddd; + border-radius: 3px; + background: #f4f4f4; + cursor: pointer; + font-size: 14px; + font-weight: 600; +} + +/* 검색 input */ +.faq .search-box input[type="text"], +.faq .search-box input[type="search"] { + flex: 1; /* ✅ 남은 공간 채우기 */ + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 10px; +} + +/* 검색 버튼 */ +.faq .search-box .btn-search { + width: 88px; + height: 45px; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; + font-size: 16px; + cursor: pointer; +} + +.faq .pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30px 0; + gap: 12px; +} + +.faq .pagination a, +.faq .pagination span { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; +} +.faq .pagination a, +.faq .pagination .current { + border-radius: 30px; +} +.faq .pagination .current { + background-color: var(--color-han_br); + color: #fff; +} +.faq .pagination .next, +.faq .pagination .prev { + width: 32px; + height: 32px; + text-indent: -9999px; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + background-size: auto; +} + +.faq .pagination .prev { + background-image: url(../img/ico_pg_left.svg); +} + +.faq .pagination .next { + background-image: url(../img/ico_pg_right.svg); +} + +.faq .search-box .faq .btn-area { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.faq .btn-area { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} +.faq .btn-group { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; +} + +.faq .btn-area > .btn, +.faq .btn-group > .btn { + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + font-size: 16px; + color: #000; + border-radius: 3px; + border: 1px solid #00000010; + transition: background-color 0.3s ease-out; +} +.faq .btn-cancel { + background-color: #eee; + font-weight: 500; +} +.faq .btn-area > .btn-save, +.faq .btn-group > .btn-save { + background: var(--color-han_gr); + color: #fff; + margin-top: 0; + font-weight: 700; +} + +.faq .btn-area > .btn-list, +.faq .btn-group > .btn-list, +.faq .btn-group > .btn-write { + width: 120px; + background: var(--color-han_br); + color: #fff; + column-gap: 12px; + font-weight: 700; +} + +.faq .btn-save:hover { + background-image: linear-gradient(120deg, #ffffff40 0%, #27241d00 80%); +} +.faq .tbl-wrap { + overflow-x: auto; +} +.faq .tbl-wrap .nolist { + height: 280px; +} + +/*Q&A 리스트 status style*/ +.faq .tbl-wrap [class^="status"] { + color: #777; +} +/* 답변완료 (연한 초록, 기존 유지) */ +.faq .tbl-wrap .status-done { + padding: 6px 10px; + color: #38b000; /* 연한 초록 */ + border-radius: 4px; + background: rgba(56, 176, 0, 0.08); /* 초록 파스텔 배경 */ + font-weight: 700; +} +/* 문의접수 (빨강 글씨 + 연한 빨강 배경) */ +.faq .tbl-wrap .status-new { + padding: 6px 10px; + color: #ef4444; /* 빨강 */ + background: rgba(239, 68, 68, 0.1); /* 연빨강 배경 */ + border-radius: 4px; + font-weight: 700; + display: inline-block; +} +/* 문의검토 / 정밀검토 / 패치예정 (회색 바탕, 검정 글씨) */ +.faq .tbl-wrap .status-review, +.faq .tbl-wrap .status-inspect, +.faq .tbl-wrap .status-patch { + padding: 6px 10px; + color: #777777; /* 검정 글씨 */ + background: #f0f0f0; /* 연회색 배경 */ + border-radius: 4px; + font-weight: 600; + display: inline-block; +} + +.faq .tbl-wrap + .btn-group { + margin: 30px 0; +} +.faq .tbl-wrap table { + table-layout: fixed; + min-width: 1024px; +} +.faq .tbl-wrap table thead th { + height: 48px; + font-weight: 500; + border-bottom: 1px solid #000; + border-top: 2px solid #000; + white-space: nowrap; + /* background: black; */ + /* color: white; */ +} + +.faq .tbl-wrap table tbody th, +.faq .tbl-wrap table tbody td { + color: #555; + height: 60px; + padding: 0 10px; + word-break: break-all; + text-align: center; + border-bottom: 1px solid #eee; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.faq .tbl-wrap table tbody tr:hover { + background-color: #fafafa; +} +/* .faq .tbl-wrap table tbody td.left { + text-align: left; +} */ +.faq .tbl-wrap table tbody td.right { + text-align: right; +} + +.faq .tbl-wrap table tbody td.left { + text-align: left; + max-width: 300px; /* 필요에 맞게 조정 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.faq .tbl-wrap table tbody td.left .title-text { + display: inline-block; + max-width: calc(100% - 120px); /* 뱃지 영역 확보 */ + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.faq .qa-view { + border: 1px solid #dde7e9; + border-radius: 3px; +} + +.faq .meta .tit { + font-size: 24px; + font-weight: 700; +} +.faq .meta .post { + display: none; +} +.faq .meta span i { + margin-right: 8px; +} +.faq .tbl-area { + display: flex; + flex-direction: column; + gap: 10px; + border-bottom: 1px solid #dde7e9; + padding: 20px; +} +.faq .tbl-area .tbl-group { + display: flex; + + justify-content: space-between; + align-items: center; +} +.faq .tbl-area .tbl-group.user-info { + flex-direction: row-reverse; + color: #555; + margin-top: 10px; +} +.faq .tbl-area .tbl-item .status, +.faq .tbl-area .tbl-item .cate { + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + min-width: max-content; + align-self: flex-start; +} +.faq .tbl-area .tbl-item .status { + padding: 0px 10px; +} +.faq .tbl-area .tbl-item .cate { + border-radius: 3px; + height: 28px; + padding: 5px 10px; + background: rgba(0, 0, 0, 0.02); +} + +.faq .qa-detail .btn-group { + margin-top: 32px; +} + +.faq .content { + padding: 20px; +} +.faq .comment-section { + margin: 32px 0; +} +.faq .comment-section .comment-wrap { + margin-top: 8px; + border: 1px solid #dde7e9; + border-radius: 3px; +} + +.faq .comment-section .comment-list:has(.comment) { + display: flex; + padding: 0 16px; + flex-direction: column; + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-list .comment:not(:last-child) { + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-box { + display: flex; + gap: 16px; + width: 100%; + padding: 20px 10px; +} +.faq .comment-section .comment-box .admin-info { + display: flex; + flex-direction: column; +} +.faq .comment-section .comment-box .admin-info strong { + font-weight: 500; +} +.faq .comment-section .comment-box .admin-info span { + color: #666; + font-size: 14px; +} + +.faq .comment-section .comment-form { + display: flex; + padding: 10px 16px; + gap: 8px; +} +.faq .comment-section .comment-form .input-text { + flex-grow: 1; +} +.faq .comment-section .btn-save { + padding: 4px 20px; + height: 40px; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + + background-origin: border-box; + border: 1px solid transparent; + border-radius: 3px; + font-size: 16px; + font-weight: bold; + color: #fff; +} +.faq .comment-section .btn-save:hover { + background-color: var(--color-han_br); + background-image: linear-gradient(120deg, #ffffff40 0%, #27241d00 80%); +} + +/* 250801 1:1 문의하기 추가 END */ + +/* --------------------------------- */ +/* 구매하기 buy */ +/* --------------------------------- */ +.buy .intro .top { + background-image: url(../img/buy_intro_bg.png); +} +.buy .contents_wrap { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + margin-bottom: 160px; + padding: 0 200px; + gap: 100px; + position: relative; +} +.buy .contents_wrap::after { + content: ""; + background: #f8f7f5; + display: block; + position: absolute; + width: 100%; + height: 75%; + bottom: -50%; + left: 0; + z-index: -10; +} +.buy .contents_wrap .mid_tit { + display: block; + font-size: 42px; + position: relative; + font-weight: 400; + line-height: 120%; + color: #000000d9; +} +.buy .contents_wrap .mid_tit b { + color: #000000; +} +.buy .contents_wrap .ask_area a { + width: 100%; + height: 64px; + background-color: var(--color-han_br); + border-radius: 4px; + font-size: 22px; + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + color: #fff; +} +.buy .contents_wrap .ask_area a i { + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} +.buy .contents_wrap .ask_area { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + gap: 40px; +} +.buy .contents_wrap .ask_area .ask_l { + white-space: nowrap; +} +.buy .contents_wrap .ask_area .ask_r { + width: 100%; + max-width: 960px; +} +.buy .contents_wrap .ask_area .ask_btn { + display: flex; + flex-direction: row; + gap: 12px; +} +.buy .contents_wrap .ask_area .ask_btn a { + width: 20%; + height: 100px; + background: linear-gradient(0deg, #27241d 0%, #8d8269 100%); + box-shadow: 2px 2px 0px #27241d33 inset; + display: flex; + flex-direction: column; + gap: 0px; + font-weight: 500; + font-size: 20px; +} +.buy .contents_wrap .ask_area .ask_btn a.btn_ask { + width: 60%; + color: #fff; + flex-direction: row; + gap: 16px; + background: linear-gradient(180deg, #208769 0%, #051612 100%), + linear-gradient( + 180deg, + #006346 0%, + #07251d 9%, + #95fedf 44%, + #09201a 84%, + #0d4834 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; + box-shadow: none; + font-size: 28px; +} +.buy .contents_wrap .ask_area .ask_btn a i { + width: 20px; + aspect-ratio: 1/1; +} +.buy .contents_wrap .ask_area a.btn_ask i { + background-image: url(../img/ico_buy_ask.svg); + width: 32px; +} +.buy .contents_wrap .ask_area a.btn_brochure i { + background-image: url(../img/ico_buy_brochure.svg); +} +.buy .contents_wrap .ask_area a.btn_manual i { + background-image: url(../img/ico_buy_manual.svg); +} + +.buy .contents_wrap .ask_area .mid_tit::after { + position: absolute; + content: "Purchase"; + top: -60px; + left: 0px; + color: #000; + opacity: 0.03; + font-size: 120px; + font-weight: 900; + letter-spacing: -0.05em; +} +.buy .contents_wrap .ask_area .sub_text { + font-size: 18px; + position: relative; + padding-left: 28px; + margin-bottom: 12px; +} +.buy .contents_wrap .ask_area .sub_text::after { + position: absolute; + content: ""; + top: 6px; + left: 0; + width: 20px; + aspect-ratio: 1/1; + background-image: url(../img/ico_buy_alarm.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.buy .contents_wrap .video_area { + width: 100%; + display: flex; + align-items: center; + gap: 24px; +} +.buy .contents_wrap video { + width: 100%; +} +.buy .contents_wrap .contact_area { + display: flex; + flex-direction: column; + justify-content: center; + align-self: stretch; + background: #ffffff; + border-radius: 4px; + box-shadow: 10px 10px 20px #00000033; + padding: 0 32px; + white-space: nowrap; + gap: 24px; +} +.buy .contents_wrap .contact_area .mid_tit { + font-weight: 700; + color: #007243; + font-size: 28px; + margin-bottom: 8px; +} +.buy .contents_wrap .contact_area .sub_text { + width: 100%; + font-weight: 500; + color: #1d1d1d80; + font-size: 18px; +} +.buy .contents_wrap .contact_area .line { + width: 100%; + height: 1px; + border-bottom: 1px dashed #99999980; +} +.buy .contents_wrap .contact_area ul { + font-size: 20px; + font-weight: 700; + display: flex; + flex-direction: column; + gap: 16px; + line-height: initial; +} +.buy .contents_wrap .contact_area ul li { + display: flex; + align-items: center; + gap: 16px; +} +.buy .contents_wrap .contact_area ul li i { + width: 32px; + aspect-ratio: 1/1; +} +.buy .contents_wrap .contact_area ul li.tel i { + background-image: url(../img/ico_buy_tel.svg); +} +.buy .contents_wrap .contact_area ul li.mail i { + background-image: url(../img/ico_buy_mail.svg); +} + +/* --------------------------------- */ +/* 팝업 popup */ +/* --------------------------------- */ +/* 팝업 공통 */ +.popup_wrap { + display: none; + z-index: 1000; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.popup_wrap::before { + content: ""; + background: #000000aa; + display: block; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; +} +.popup_wrap i { + display: inline-block; + width: 32px; + aspect-ratio: 1/1; + margin-left: 24px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.popup_wrap i.id { + background-image: url(../img/ico_id.svg); +} +.popup_wrap i.pw { + background-image: url(../img/ico_pw.svg); +} +.popup_wrap i.arrow_r { + width: 16px; + height: 16px; + margin-left: 8px; + background-image: url(../img/arrow_r.svg); +} +.popup_wrap i.signout { + background-image: url(../img/ico_signout.svg); +} +.popup_wrap i.phone { + background-image: url(../img/ico_phone.svg); +} +.popup_wrap i.email { + background-image: url(../img/ico_email.svg); +} +.popup_wrap i.company { + background-image: url(../img/ico_company.svg); +} +.popup_wrap i.send { + background-image: url(../img/ico_send_email.svg); +} +.popup_wrap i.complete { + background-image: url(../img/ico_complete.svg); +} +.popup_in { + width: 100%; + height: 100%; + position: relative; +} +.popup_in .btn_close { + position: fixed; + top: 28px; + right: 86px; + z-index: 10000; + width: 107px; + height: 48px; + background: transparent; + background-image: url("../img/bg_close.png"); + background-size: cover; + background-repeat: no-repeat; + border: none; +} +.popup_in .close_div { + text-align: right; + margin-right: 26px; +} +.popup_container { + width: 1140px; + height: 725px; + position: absolute; + top: 72px; + right: 86px; + box-shadow: 20px -20px 50px #000000cc; + border: 4px solid #0e3c2e; + border-radius: 5px 0 5px 5px; + display: flex; + z-index: 100; + overflow: hidden; + background: linear-gradient(0deg, #ffffff00 0%, #eee7dd 100%), + linear-gradient(90deg, #d4cbbd 0%, #d4cbbd 100%); +} +.popup_container::after, +.popup_container::before { + position: absolute; + top: -40px; + left: 75px; + font-size: 180px; + font-weight: 900; + color: #fff; + white-space: nowrap; + letter-spacing: -0.06em; + mix-blend-mode: overlay; + opacity: 0.5; + z-index: 1; +} +.popup_container::before { + left: 407px; +} +.popup_container .popup_tit { + min-width: 420px; + display: flex; + flex-direction: column; + padding: 120px 0 90px 48px; + position: relative; + background-image: url("../img/bg_pop.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: top left; +} +.popup_container .popup_tit .h_1 { + font-size: 80px; + font-weight: 900; + margin-bottom: 38px; + color: #ffffff; +} +.popup_container .popup_tit .h_3 { + color: #222; + color: #ffffff; +} +.popup_contents_wrap { + width: 100%; + height: 100%; + margin: 0 auto; + padding: 80px 24px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + overflow-y: auto; + box-shadow: -20px 20px 50px #00000011; + z-index: 1; +} +.popup_contents_wrap > * { + max-width: 480px; +} +.popup_contents_wrap .tbl_wrap { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; +} +.popup_contents_wrap form { + width: 100%; + height: 100%; + font-size: 20px; + color: #000; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: center; +} +.popup_contents_wrap table { + background: none; + border: none; + border-collapse: separate; + border-spacing: 0 20px; +} +.popup_contents_wrap table tr { + height: 42px; +} +.popup_contents_wrap table th { + text-align: left; + font-weight: 600; + vertical-align: top; + width: 25%; + padding-top: 7px; +} +.popup_contents_wrap table td { + text-align: left; + _width: 75%; +} +.popup_contents_wrap table td div { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + position: relative; + gap: 8px; +} +.popup_contents_wrap td button { + width: 75px; + background: #27241d; + color: #fff; + padding: 4px 8px; + border-radius: 2px; + font-size: 16px; + position: absolute; + right: 0; +} +.popup_contents_wrap input { + border: none; + border-bottom: 1px solid #777; + padding: 8px 0 8px 4px; + width: 100%; + font-size: 18px; + background: none; + border-radius: 0; + box-shadow: none; +} +.popup_contents_wrap input[readonly] { + border-bottom: 1px solid #777; +} +.popup_contents_wrap input[readonly]:focus { + border-bottom: 1px solid #777; +} +.popup_contents_wrap input::placeholder { + color: #777; + font-size: inherit; + font-weight: normal; +} +.popup_contents_wrap select { + border-bottom: 1px solid #777; + padding: 8px 0px 8px 4px; + width: 100%; + font-size: 18px; +} +.popup_contents_wrap option { + color: #777; + font-size: 18px; +} +.popup_contents_wrap .important_msg { + font-size: 12px; + color: #fb3c00; + font-weight: normal; +} +.popup_contents_wrap th .important_msg { + font-size: inherit; + padding: 0 3px; +} +.popup_contents_wrap .select_msg { + font-size: 12px; + color: #999; + padding: 0 3px; +} +.popup_contents_wrap .pop_notice { + width: 100%; + text-align: right; + margin-bottom: 16px; +} +.domain_list { + height: 42px; + padding-bottom: 8px; +} +.email_wrap .e_id { + width: 120px; +} +.timer { + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); + font-weight: 500; + font-size: 12px; + text-align: center; + padding: 0 80px; + color: #fb3c00; +} +.check.complete { + background-color: #777; + color: #ddd; + cursor: default; +} +.messages { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + width: 100%; +} +.messages i.send { + display: block; + width: 88px; + height: 88px; + text-align: center; + margin-left: 0; + padding-bottom: 18px; +} +.messages i.complete { + display: block; + width: 88px; + height: 88px; + text-align: center; + margin-left: 0; + padding-bottom: 18px; +} +.messages span { + border-bottom: 2px solid #777; + border-top: 2px solid #777; + padding: 24px 0; +} +.messages span em { + color: var(--color-pointPurple); +} +.join_btn_wrap { + width: 100%; + display: flex; + gap: 16px; +} +.join_btn_wrap button:hover { + background: linear-gradient(90deg, #8e7339 0%, #a57839 100%), + linear-gradient( + 90deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} +.join_btn_wrap button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + line-height: 80px; + color: #fff; +} +.join_btn_wrap .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.join_btn_wrap .btn_cancel:hover { + background: #7a7165; + color: #fff; +} +.btn_confirm { + width: 100%; + display: flex; + gap: 16px; +} +.btn_confirm button:hover { + background: linear-gradient(90deg, #8e7339 0%, #a57839 100%), + linear-gradient( + 90deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} +.btn_confirm button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + margin-top: 12px; + line-height: 80px; + color: #fff; +} +.btn_confirm .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.btn_confirm .btn_cancel:hover { + background: #7a7165; + color: #fff; +} +.verify_wrap { + display: flex; + flex-direction: column; + gap: 16px; +} +.verify_wrap .code_input { + display: flex; + gap: 8px; +} +.verify_wrap .code_input input { + max-width: 56px; + max-height: 56px; + width: 14vw; + height: 14vw; + font-size: 24px; + text-align: center; + background-color: #fff; + border: 1px solid #00000033; + border-radius: 8px; + padding: 0; +} +.verify_wrap .important_msg { + float: left; + padding-top: 2px; +} +.verify_wrap button.btn_send { + float: right; + font-size: 14px; + color: #777; +} +.popup_contents_wrap .guide_txt { + font-size: 20px; +} +.popup_contents_wrap .guide_txt p { + margin-bottom: 24px; + font-weight: 700; + font-size: 28px; +} +.radio_wrap { + width: 100%; + display: grid !important; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + padding-top: 8px; + align-items: center; +} +.radio_wrap label { + display: flex; + justify-content: start; + align-items: center; + font-size: 18px; + font-weight: 400; + cursor: pointer; + gap: 8px; +} +.radio_wrap input[type="radio"] { + appearance: none; + width: 24px; + aspect-ratio: 1/1; + border: 2px solid #aaa; + padding: 0; + border-radius: 50%; + position: relative; + outline: none; + cursor: pointer; +} +.radio_wrap input[type="radio"]:checked { + border: 2px solid #583c1c; +} +.radio_wrap input[type="radio"]:checked::before { + content: ""; + display: block; + width: 70%; + aspect-ratio: 1/1; + background-color: #583c1c; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.btn_back { + width: 100%; + text-align: left; + font-size: 18px; + font-weight: 500; + opacity: 0.7; + position: relative; +} +.btn_back::before { + content: ""; + width: 10px; + height: 10px; + display: inline-block; + margin-right: 12px; + border: 2px solid; + border-width: 0 0 2px 2px; + transform: rotate(45deg) translateY(-2px); +} +.btn_back::after { + content: ""; + width: 14px; + height: 1px; + position: absolute; + left: 0; + border-top: 2px solid; + top: 50%; + transform: translateY(-50%); +} +.btn_back:hover { + opacity: 1; +} + +/* 로그인 */ +.login::after { + content: "Logi"; +} +.login::before { + content: "n"; +} +.login input { + border-bottom: none; + padding: 0; +} +.login form { + gap: 24px; +} +.login .input_wrap { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + border-bottom: 1px solid #000; + padding: 16px 0; +} +.login .input_wrap span { + width: 150px; + font-size: 18px; + font-weight: 600; + text-align: left; +} +.login .inquiry { + width: 100%; + font-size: 14px; + color: #777; + text-align: right; + margin-top: 24px; +} +.login .btn_go { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} +.login .btn_go div a { + display: flex; + align-items: center; +} +.login .btn_go div a span { + color: #555; + font-size: 18px; + font-weight: 600; +} +.login .join_btn_wrap { + margin-top: 24px; +} + +/* 회원가입 */ +.register::after { + content: "Sign u"; + left: -70px; +} +.register::before { + content: "p"; +} +.register br.brk { + display: none; +} +.register .popup_tit { + justify-content: space-between; +} +.register .popup_tit .join_step { + display: flex; + column-gap: 12px; + margin-top: 24px; + font-weight: 300; + color: #ffffff44; +} +.register .popup_tit .join_step:first-child { + margin-top: 0; +} +.register .popup_tit .join_step.on { + color: #fff; +} +.register .popup_tit .join_step.on h4.txt { + font-weight: 600; +} +.register .popup_contents_wrap form { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-between; +} +.register .checkbox_wrap { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + cursor: pointer; +} +.register .checkbox_wrap h4 { + font-size: 18px; +} +.register .checkbox_wrap.all h4 { + font-size: 20px; +} +.register .checkbox_wrap .important_msg { + font-size: 18px; + padding: 0 3px; +} +.register .terms_wrap { + width: 100%; +} +.register .terms { + width: 100%; + height: 128px; + border-radius: 4px; + padding: 8px 16px; + margin-top: 8px; + font-size: 14px; + text-align: left; + box-sizing: border-box; + background-color: #ffffff55; + overflow-y: auto; +} +.register input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 28px; + aspect-ratio: 1/1; + border-radius: 2px; + position: relative; + cursor: pointer; + border-bottom: 0; + background-color: #ffffffaa; + box-shadow: inset 0px 0px 1px #00000022; + padding: 0; + display: inline-block; +} +.register input[type="checkbox"]:checked { + background-color: var(--color-green); +} +.register input[type="checkbox"]:checked::before { + content: "✔"; + font-size: 16px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #ffffff !important; +} +.register .popup_contents_wrap fieldset { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +/* 아이디/비밀번호 찾기 */ +.search::after { + content: "PW"; + left: 186px; +} +.search .popup_tit .h_1 { + line-height: 128%; +} +.search .popup_contents_wrap { + gap: 24px; + justify-content: flex-start; +} +.search .inquiry { + width: 100%; + font-size: 14px; + color: #777; + text-align: right; +} + +/* 마이페이지 */ +.mypage::after, +.mypage::before { + font-size: 168px; +} +.mypage::after { + content: "My pa"; + left: -30px; +} +.mypage::before { + content: "ge"; + left: 414px; +} +.mypage.log { + width: 1140px; +} +.mypage.log form { + gap: 24px; +} +.mypage { + width: 1300px; +} +.mypage .popup_contents_wrap { + gap: 24px; +} +.mypage .popup_contents_wrap > div { + max-width: initial; +} +.mypage .my_info { + width: 100%; + font-size: 20px; + display: flex; + flex-direction: column; +} +.mypage .my_info h4 { + font-size: 24px; +} +.mypage .my_info i { + width: 24px; + aspect-ratio: 1/1; + margin: 0; + margin-right: 8px; +} +.mypage .my_info .name { + display: flex; + justify-content: right; + align-items: center; + gap: 16px; + padding-bottom: 24px; +} +.mypage .my_info .name h4 { + font-size: 36px; +} +.mypage .my_info .name h4 span { + font-weight: 500; + color: #777; + padding-bottom: 0; +} +.mypage .my_info .name button { + padding: 6px 24px; + margin-top: 6px; + background-color: var(--color-green); + border-radius: 4px; + font-weight: 600; + font-size: 16px; + color: #ffffff; +} +.mypage .my_info .name button:hover { + background-color: var(--color-han_gr); +} +.mypage .my_info .detail { + display: flex; + justify-content: right; +} +.mypage .my_info .detail li { + text-align: right; + border-right: 1px solid #aaa; + padding: 0 48px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.mypage .my_info .detail li:last-child { + border-right: none; + padding-right: 0; +} +.mypage .my_info .detail li:nth-child(3) { + max-width: 500px; +} +.mypage .my_info .detail li div { + display: flex; + align-items: center; + justify-content: right; + padding-bottom: 8px; + font-size: 16px; + font-weight: 500; + color: #777; +} +.mypage .my_info .detail li.license { + display: none; +} +.mypage .my_qna { + width: 100%; +} +.mypage .my_qna h4 { + font-size: 24px; + padding-bottom: 16px; + text-align: left; + width: 100%; + border-bottom: 3px solid #000; +} +.mypage .my_qna table { + border-collapse: collapse; + border: 1px solid #00000020; +} +.mypage .my_qna thead tr { + border-bottom: 1px solid #000; + background: #ffffff80; +} +.mypage .my_qna thead tr th { + padding: 10px 0; + font-size: 18px; + text-align: center; + white-space: nowrap; +} +.mypage .my_qna tbody tr { + border-bottom: 1px solid #777; + background: #ffffff33; +} +.mypage .my_qna tbody tr:last-child { + border-bottom: none; +} +.mypage .my_qna tbody tr td { + padding: 16px 0; + color: #00000080; + font-weight: 500; + text-align: center; +} +.mypage .my_qna tbody tr td em { + color: var(--color-orange); +} +.mypage .my_qna tbody tr td.td_name { + padding: 10px 8px; + color: #000; + text-align: left; +} +.mypage .my_qna tbody tr td.td_stat .txt_done { + color: var(--color-orange); +} +.mypage .my_qna tbody tr td.td_stat .txt_rdy { + color: var(--color-green); +} +.mypage .my_qna tbody tr td .bo_cate_link { + float: none; + margin-right: 0; + background: transparent; + color: #000; + height: auto; + padding: 8px; + display: inline-block; + border-radius: 5px; + line-height: 10px; +} +.mypage .my_qna tbody tr.answer td em { + color: #00000080; + font-weight: 500; +} +.mypage .my_qna tbody tr.answer { + background-color: #ffdd0022; +} +.mypage .my_qna tbody tr.answer td.tit a { + display: flex; + justify-content: left; + align-items: center; + gap: 8px; +} +.mypage .my_qna i.answer { + width: 18px; + height: 18px; + background-image: url(../img/ico_answer.svg); + margin-right: 0; + margin-bottom: 10px; +} +.mypage .my_qna i.lock { + width: 18px; + height: 18px; + background-image: url(../img/ico_lock.svg); + margin-left: 0; +} +.mypage .my_qna button.btn_prev { + width: 18px; + height: 18px; + background-image: url(../img/ico_pg_left.svg); +} +.mypage .my_qna button.btn_next { + width: 18px; + height: 18px; + background-image: url(../img/ico_pg_right.svg); +} +.mypage .my_qna .pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; + font-size: 18px; + font-weight: 500; +} +.mypage .my_qna .pagination .pagination_list { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; +} +.mypage .my_qna .pagination .pagination_list li.on { + width: 30px; + height: 30px; + background-color: var(--color-han_br); + border-radius: 50%; +} +.mypage .my_qna .pagination .pagination_list li.on a { + color: #fff; +} +.mypage.edit { + width: 1140px; +} +.mypage.edit .popup_tit .h_1 { + font-size: 72px; +} +.mypage.edit input::placeholder { + color: #000; +} +.mypage.edit .name_wrap input::placeholder, +.mypage.edit .id_wrap input::placeholder { + color: #999; +} +.mypage.edit .sign_out a { + display: flex; + justify-content: right; + align-items: center; + gap: 8px; + font-weight: 500; + color: #777; + padding-top: 16px; + font-size: 16px; +} +.mypage.edit .sign_out i { + width: 24px; +} + +/* 개인정보보호정책 */ +.popup_in:has(.privacy) { + position: absolute; + width: 800px; + height: 700px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.popup_in:has(.privacy) .btn_close { + top: -22px; + right: 0; +} +/* .privacy { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + height: 662px; +} */ +.privacy .contents_wrap { + width: 100%; + height: 100%; + gap: 0; + padding-bottom: 40px; + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + background-size: cover; + background-repeat: no-repeat; + z-index: 9; + background-color: #00000003; + background-image: url("../img/bg_pop.png"); + overflow: hidden; +} +.privacy .tab_wrap { + width: 100%; + min-height: 67px; + padding: 4px; + border-radius: 4px; + box-sizing: border-box; + background-color: #eee7dd; + display: flex; + gap: 4px; +} +.privacy .tab_wrap li { + position: relative; + width: 50%; + height: 100%; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.privacy .tab_wrap li:not(.on):hover { + background-color: #dbcbb4; +} +.privacy .tab_wrap li span { + font-size: 18px; + font-weight: 600; +} +.privacy .tab_wrap li.on { + background-color: var(--color-han_br); + color: #fff; +} +.privacy .content { + display: none; + position: relative; + width: 100%; + border-radius: 4px; + padding: 40px; + font-size: 16px; + text-align: left; + box-sizing: border-box; + overflow-y: scroll; +} +.privacy .content.show { + display: block; +} +.privacy .content.show li { + color: #ffffff; +} +.privacy .tit { + font-size: 18px; + font-weight: 500; +} +.privacy .list_1 > li { + margin-bottom: 40px; +} +.privacy .list_2 { + margin-top: 16px; +} +.privacy .list_2 > li { + list-style: square; + padding-left: 8px; + margin-left: 32px; + margin-bottom: 16px; +} +.privacy .list_3 { + margin-left: 8px; + margin-top: 8px; +} +.privacy .list_3 > li { + list-style-type: "- "; + margin-bottom: 4px; +} +/* 메인 팝업 */ +.popup_wrap.popup-notice { + position: fixed; + width: 100%; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background: none; + z-index: 99; +} + +.popup_wrap.popup-notice .popup_in { + max-width: 420px; + height: auto; + position: absolute; + width: calc(100% - 40px); + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 8px; + overflow: hidden; +} + +.popup_container.notice { + height: auto; + position: relative; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + width: 100%; + max-width: 100%; + background: none; + border: none; + top: auto; + right: auto; + box-shadow: none; + border-radius: 0; +} + +.popup_container.notice img { + width: 100%; + + height: auto; + display: block; +} + +.popup_container.notice .btn-wrap { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + width: 100%; + padding: 0 16px; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + background-color: #fff; +} + +.popup_container.notice .btn-wrap button { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 48px; + font-size: 16px; + color: rgba(0, 0, 0, 0.7); + border: none; + background: none; + cursor: pointer; + padding: 0 8px; +} + +@media (min-width: 992px) { + .popup_wrap.popup-notice { + left: 168px; + -ms-transform: translate(0%, -50%); + -webkit-transform: translate(0%, -50%); + transform: translate(0%, -50%); + max-width: max-content; + } +} + +@media (min-width: 721px) { + .popup_wrap.popup-notice { + max-width: max-content; + overflow: hidden; + height: auto; + } + + .popup_wrap.popup-notice .popup_in { + position: relative; + top: auto; + left: auto; + -ms-transform: none; + -webkit-transform: none; + transform: none; + width: 100%; + max-width: 100%; + border-radius: 4px; + } + + /* 그라데이션 테두리 효과 */ + .popup_wrap.popup-notice .border-effect { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 180deg, + #f3dba8 0%, + #423625 46%, + #f3dba8 55%, + #0e0b06 84%, + #574b30 100% + ); + pointer-events: none; + border-radius: 8px; + z-index: 999; + } + + .popup_wrap.popup-notice .popup_container.notice { + position: relative; + border-radius: 8px; + z-index: 1000; + width: 100%; + padding: 2px; + } + + .popup_container.notice .btn-wrap { + padding: 0 30px; + height: 60px; + } +} + +/* 사이트맵 */ +.popup_sitemap { + position: fixed; + width: 100%; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + top: 0; + right: 0; + display: none; + z-index: 1000; + overflow: hidden; + background-color: #111; +} +.popup_sitemap header .menu_my, +.popup_sitemap header .language { + display: none; +} +.popup_sitemap header .btn_map_close { + background: none; + border: none; + z-index: 1; +} +.popup_sitemap header .btn_map_close a div:nth-child(1) { + animation: btn-close-bar1 0.5s ease both; +} +.popup_sitemap header .btn_map_close a div:nth-child(2) { + animation: btn-close-bar2 0.5s ease both; +} +.popup_sitemap header .btn_map_close a div:nth-child(3) { + animation: btn-close-bar3 0.5s ease both; +} +@keyframes btn-close-bar1 { + from { + top: 7px; + } + to { + top: 15px; + transform: rotate(45deg); + } +} +@keyframes btn-close-bar2 { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes btn-close-bar3 { + from { + bottom: 7px; + } + to { + bottom: 15px; + transform: rotate(-45deg); + } +} +.sitemap { + width: 100%; + height: 100%; + background-color: #111; + display: flex; + justify-content: center; + overflow: hidden; + width: 100%; + position: relative; + gap: 16px; + padding: 20px; + pointer-events: none; + animation: enableHover 0.8s forwards; + animation-delay: 0.3s; +} +@keyframes enableHover { + to { + pointer-events: auto; + } +} +.sitemap div[class*="bg_line"] { + position: relative; + width: 1px; + height: 100%; + background-color: #fff; + animation-duration: 0.8s; + animation-timing-function: ease-out; + animation-fill-mode: both; +} +.sitemap .bg_line1, +.sitemap .bg_line3 { + animation-name: slideDown; +} +.sitemap .bg_line2 { + animation-name: slideup; +} +@keyframes slideDown { + 0% { + top: -1000px; + opacity: 80%; + } + 100% { + top: 0; + opacity: 20%; + } +} +@keyframes slideup { + 0% { + bottom: -1000px; + opacity: 80%; + } + 100% { + bottom: 0; + opacity: 20%; + } +} +.sitemap div[class*="menu"] { + background-size: cover; + background-position: center; + position: relative; + overflow: hidden; + cursor: pointer; + transition: all 0.5s; + width: calc(100% / 4); + z-index: 1; +} +.sitemap div[class*="menu"]::before, +.sitemap div[class*="menu"]:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.sitemap div[class*="menu"]::before { + background-color: #00000077; + transition: 0.5s ease; + z-index: -1; +} +.sitemap div[class*="menu"]:after { + background-color: #111; + z-index: 1; + animation: slideRight 0.5s ease-in forwards; + animation-delay: 0.1s; +} +@keyframes slideRight { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(100%); + } +} +.sitemap div[class*="menu"] a { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + padding-left: 24px; + padding-top: 20px; + width: 100%; + height: 100%; + font-size: 42px; + font-weight: 900; + color: #fff; + white-space: nowrap; + transform-origin: left; +} +.sitemap div[class*="menu"] a span { + position: relative; +} +.sitemap div[class*="menu"] a span:after { + position: absolute; + top: -100px; + left: 0px; + width: 100%; + height: 100%; + opacity: 0.2; + font-weight: 900; + line-height: 80%; + font-size: 80px; + display: none; +} +.sitemap div[class*="menu"] a .sub_text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + height: 100px; +} +.sitemap div[class*="menu"] a em { + font-weight: 700; + color: #fff; +} + +.sitemap .menu1 a span::after { + content: "\AValue of"; + white-space: pre; +} +.sitemap .menu2 a span:after { + content: "\AInterface"; + white-space: pre; +} +.sitemap .menu3 a span:after { + content: "Key \A Features"; + white-space: pre; +} +.sitemap .menu4 a span:after { + content: "Drawing \A management"; + white-space: pre; +} +.sitemap .menu5 a span:after { + content: "Cross \A Check"; + white-space: pre; +} +.sitemap .menu1 { + background-image: url(../img/sitemap_menu01.png); +} +.sitemap .menu2 { + background-image: url(../img/sitemap_menu02.png); +} +.sitemap .menu3 { + background-image: url(../img/sitemap_menu03.png); +} +.sitemap .menu4 { + background-image: url(../img/sitemap_menu04.png); +} +.sitemap .menu5 { + background-image: url(../img/sitemap_menu05.png); +} +.sitemap div[class*="menu"]:hover { + width: 60%; +} +.sitemap div[class*="menu"]:hover::before { + display: none; +} +.sitemap div[class*="menu"]:hover a { + opacity: 1; + transform: scale(1.3); +} +.sitemap div[class*="menu"]:hover a span::after { + display: initial; +} +.sitemap div[class*="menu"]:hover a em { + color: var(--color-yellow); +} + +@media (max-width: 1600px) { + .sitemap div[class*="menu"] a { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + padding-left: 24px; + padding-top: 20px; + width: 100%; + height: 100%; + font-weight: 600; + color: #fff; + white-space: nowrap; + transform-origin: left; + } + .sitemap div[class*="menu"] a span { + font-size: 38px; + font-weight: 900; + position: relative; + } + .sitemap div[class*="menu"] a .sub_text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + height: 100px; + } + .sitemap div[class*="menu"] a .sub_text br.brk { + display: initial; + } + .sitemap div[class*="menu"] a span:after { + font-size: 60px; + top: -80px; + } + + .main .pagination_main { + right: 24px; + } + .main .pagination_main li span { + display: none; + } + + .interface .route .fix { + padding: 0 64px; + } + .interface .route .content { + gap: 56px; + } + .interface .route .subs { + min-width: 440px; + padding-top: 0px; + } + .interface .route .subs li .sub_tit { + font-size: 100px; + top: -40px; + right: -72px; + } + .interface .route .subs li .mid_tit { + font-size: 48px; + } + .interface .dual .detail .subs { + flex-direction: column; + } + + .primary .route .fix > * { + width: 1120px; + } + .primary .route .subs li .mid_tit { + font-size: 68px; + } + .primary .route .content { + height: 520px; + transform: translateX(-1.5%); + } + .primary .route .tabs { + transform: scale(0.8); + transform-origin: center right; + } + .primary .process .left { + padding-left: 120px; + min-width: 450px; + } + .primary .process .left .mid_tit { + font-size: 38px; + } + .primary .process .left .mid_tit.on { + text-indent: -62px; + } + .primary .process .right { + padding: 200px 120px 100px 64px; + } + .primary .process .right .style .sub_figs { + height: 320px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 320px; + } + + .floorplan .key .left { + padding-left: 120px; + min-width: 520px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 120px); + } + .floorplan .key .left .mid_tit span { + left: 120px; + } + .floorplan .key .right { + padding-right: 120px; + } + .floorplan .info .left .mid_tit { + left: calc(96px - 12px); + width: calc(100vw - 96px); + } + .floorplan .find .find03 .sub_figs .find_03_move { + padding: 24px 0 16px; + } + + .forbim .intro .visual { + height: 400px; + } + .forbim .process .left { + min-width: 450px; + padding-left: 120px; + } + .forbim .process .left .mid_tit { + font-size: 38px; + } + .forbim .process .right { + padding: 200px 120px 100px 64px; + } + + .buy .contents_wrap .contact_area { + gap: 12px; + } + .buy .contents_wrap .contact_area .mid_tit { + font-size: 24px; + margin-bottom: 4px; + } + .buy .contents_wrap .contact_area .sub_text { + font-size: 16px; + } + .buy .contents_wrap .contact_area ul { + font-size: 18px; + gap: 8px; + } + .buy .contents_wrap .contact_area ul li { + gap: 8px; + } + .buy .contents_wrap .contact_area ul li i { + width: 24px; + } +} + +@media (max-width: 1400px) { + footer .footer_menu { + display: none; + } + footer .comp_contact { + width: initial; + min-width: 30%; + justify-content: end; + } + h2 { + font-size: 64px; + } + .h_4 { + font-size: 16px; + } + .grand_tit { + font-size: 48px; + } + .sub_tit { + font-size: 28px; + } + .sub_text { + font-size: 18px; + line-height: 28px !important; + } + .sitemap div[class*="menu"] a { + padding-left: 16px; + gap: 8px; + } + .sitemap div[class*="menu"] a span { + font-size: 32px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 42px; + top: -52px; + } + .floating_menu { + width: 64px; + height: 340px; + padding: 36px 0 40px 0; + top: 56px; + } + .floating_menu li span { + font-size: 12px; + line-height: 170%; + } + + .popup_container, + .mypage.log, + .mypage.edit { + width: calc(100% - (86px * 2)); + height: calc(100% - 140px); + } + .popup_container .popup_tit { + min-width: 340px; + padding: 64px 0 48px 24px; + } + .popup_container .popup_tit .h_1 { + font-size: 64px; + margin-bottom: 8px; + } + .popup_container::after, + .popup_container::before { + font-size: 100px; + top: -20px; + } + .join_btn_wrap button { + font-size: 20px; + line-height: 68px; + } + .btn_confirm button { + font-size: 20px; + line-height: 68px; + } + .login::after { + left: 148px; + } + .login::before { + left: 333px; + } + .search::after { + left: 146px; + } + .search::before { + left: 338px; + } + .search .popup_tit .h_1 { + font-size: 54px; + } + .search .popup_contents_wrap { + padding: 80px 48px 16px; + } + .register::after { + left: 64px; + } + .register::before { + left: 332px; + } + .register .popup_contents_wrap { + justify-content: flex-start; + } + .mypage.edit .popup_tit .h_1 { + font-size: 56px; + } + .mypage::after { + left: 73px; + } + .mypage::before { + left: 335px; + } + .mypage .my_info .name h4 { + font-size: 28px; + } + .mypage .my_info .detail li { + padding: 0 24px; + } + .popup_in:has(.privacy) { + width: 70%; + height: 70%; + } + .privacy { + width: 100%; + height: 100%; + } + .popup_in:has(.privacy) .btn_close { + top: -42px; + } + + .intro { + padding-bottom: 80px; + } + .intro .top { + height: 360px; + gap: 8px; + } + .value .features { + padding: 90px 10px 10px 10px; + gap: 20px; + } + .value .features .f_wrap { + padding: 100px 24px 24px 24px; + pointer-events: none; + transform: none !important; + } + .value .features .f_wrap .sub_text { + color: #fff; + } + .value .system { + height: 1150px; + } + .value .system .system_tit { + padding: 0; + padding-left: 32px; + } + + .interface .route .subs li .mid_tit { + font-size: 40px; + } + .interface .route .subs li .sub_text { + font-size: 18px; + margin-top: 20px; + } + .interface .route .subs li .sub_text ul { + margin-top: 12px; + } + + .primary .route .fix { + gap: 20px; + } + .primary .route .fix > * { + width: 1040px; + } + .primary .route .content { + height: 460px; + transform: translateX(-1.5%); + } + .primary .route .tabs { + transform: scale(0.7); + } + .primary .route .subs li .sub_tit { + font-size: 24px; + margin-bottom: 12px; + } + .primary .route .subs li .mid_tit { + font-size: 56px; + margin-right: 16px; + letter-spacing: -0.06em; + } + .primary .route .subs li .sub_text { + font-size: 18px; + } + .primary .process .left { + min-width: 360px; + padding-left: 88px; + } + .primary .process .left .mid_tit { + font-size: 34px; + } + .primary .process .left .mid_tit.on { + text-indent: -48px; + } + .primary .process .right { + padding: 160px 80px 100px 42px; + } + .primary .process .right .style .sub_figs { + gap: 0; + height: 360px; + } + .primary .process .right .style .text { + padding: 0 20px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 320px; + } + + .floorplan .key .left { + padding-left: 80px; + min-width: 450px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 80px); + height: 360px; + transform: translateY(-200px); + } + .floorplan .key .left .mid_tit span { + left: 80px; + bottom: -66px; + font-size: 48px; + } + .floorplan .key .left ul { + padding-top: 160px; + } + .floorplan .key .right { + padding-right: 100px; + padding-top: 255px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: initial; + } + .floorplan .key .right .sub_text br { + display: none; + } + .floorplan .key .right .sub_figs .text br { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 88%; + } + .floorplan .info .left .mid_tit { + left: calc(56px - 12px); + width: calc(100vw - 56px); + } + .floorplan .info .left .mid_tit span { + left: 56px; + } + .floorplan .find .find03 .sub_figs .find_03_move { + padding: 24px 0 16px; + } + .floorplan .print .right .sub_figs .imgs img { + object-fit: cover; + } + + .forbim .process .left { + min-width: 360px; + padding-left: 88px; + } + .forbim .process .left .mid_tit { + font-size: 34px; + } + .forbim .process .left .mid_tit.on { + text-indent: -38px; + } + .forbim .process .right { + padding: 120px 96px 120px 56px; + } + + .buy .contents_wrap { + padding: 0 80px; + gap: 80px; + } + .buy .contents_wrap .mid_tit { + font-size: 34px; + } + .buy .contents_wrap .ask_area .mid_tit::after { + top: -42px; + font-size: 92px; + } + .buy .contents_wrap .ask_area .ask_btn { + gap: 8px; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 18px; + height: 80px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 24px; + } + + .faq #container { + padding: 0 80px; + } +} + +@media (max-width: 1200px) { + header { + height: 48px; + padding: 0 8px 0 16px; + } + header h1 a { + width: 140px; + } + header .menu_my, + header .menu_ham, + header .menu_admin { + padding: 6px; + } + header .menu_my_list { + left: initial; + right: 0; + } + header .menu_my_list::before { + left: initial; + right: 15px; + } + footer { + padding: 12px 32px; + } + footer .footer_wrap { + gap: 24px; + } + footer .comp_info .logo_baron { + min-width: 200px; + } + footer .btn_privacy { + font-size: 16px; + } + footer .comp_copy { + flex-direction: column; + } + footer .copyright { + font-size: 13px; + } + footer .footer_sitemap .family_wrap { + margin: 0; + } + h2 { + font-size: 56px; + } + .floating_menu { + width: 46px; + height: 150px; + padding: 26px 0 30px 0; + background: none; + } + + .floating_menu::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 76px; + background: url(../img/floating_bg_r4.png) center top / 100% auto no-repeat; + z-index: -1; + } + + .floating_menu::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 76px; + background: url(../img/floating_bg_r4.png) center bottom / 100% auto + no-repeat; + z-index: -1; + } + .floating_menu .floating_guide, + .floating_menu .floating_download { + display: none; + } + .floating_menu li a i { + width: 24px; + } + .floating_menu li span { + font-size: 10px; + line-height: initial; + display: none; + } + .floating_menu li.floating_faq i { + margin-top: 6px; + } + .floating_menu li.floating_guide i { + margin-top: 4px; + } + + .intro { + padding-bottom: 80px; + } + .intro .top { + height: 320px; + gap: 16px; + } + .intro .keyword span { + font-size: 28px; + } + + .popup_in:not(:has(.privacy)) .btn_close { + top: 0; + right: 0; + background: none; + } + .popup_container { + width: 100%; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + top: 0; + right: 0; + left: 0; + transform: initial; + border: 0; + border-radius: 0; + } + .radio_wrap label { + font-size: 16px; + } + .register input[type="checkbox"] { + width: 24px; + } + .register .checkbox_wrap.all h4 { + font-size: 18px; + } + .popup_contents_wrap input { + font-size: 16px; + } + .popup_in:has(.privacy) { + width: 80%; + height: 80%; + } + .popup_in:has(.privacy) .btn_close { + top: -46px; + right: -3px; + } + + .sitemap { + flex-direction: column; + padding: 0; + } + .sitemap div[class*="bg_line"] { + display: none; + } + .sitemap div[class*="menu"] { + width: 100%; + height: 100%; + } + .sitemap div[class*="menu"] a { + padding: 0; + text-align: center; + } + .sitemap div[class*="menu"] a span { + font-size: 38px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 60px; + top: -20px; + left: 20px; + text-align: left; + opacity: 0.1; + display: initial; + } + .sitemap .menu1 a span::after { + content: " Value of EG-BIM"; + } + .sitemap .menu2 a span:after { + content: "Interface"; + } + .sitemap .menu3 a span:after { + content: "Key Features"; + } + .sitemap .menu4 a span:after { + content: "Drawing management"; + } + .sitemap .menu5 a span:after { + content: "Cross Check"; + } + .sitemap div[class*="menu"] a .sub_text { + display: none; + } + .sitemap div[class*="menu"]:hover { + width: 100%; + } + .sitemap div[class*="menu"]:hover a { + opacity: 1; + transform: scale(1); + } + + .main .pagination_main { + right: 24px; + gap: 16px; + font-size: 16px; + } + .main .pagination_main li span { + font-size: 17px; + margin-left: 4px; + } + + .value .intro .top { + margin-top: 64px; + } + .value .intro .keyword span br.brk { + display: initial; + } + .value .intro .dia_li { + width: 200px; + padding: 10px; + } + .value .intro .dia_element_wrap { + gap: 80px; + } + .value .intro .dia_element { + flex-direction: column !important; + } + .value .intro .dia_element .dia_line { + width: 1px; + height: 10px; + } + .value .intro .dia_element:nth-child(2) { + margin-top: 300px; + } + .value .intro .dia_element:nth-child(3) .dia_li li:nth-child(3) br { + display: none; + } + .value .intro .dia_element:nth-child(3) .dia_li li:nth-child(3) br.brk { + display: initial; + } + .value .intro .dia_appendix { + height: 40%; + bottom: -200px; + gap: 140px; + } + .value .intro .dia_appendix .app_etc { + transform: translate(-20px, 20px); + } + .value .intro .dia_appendix .app_bg:nth-child(2) .app_etc { + transform: translate(20px, 20px); + } + .value .features { + flex-direction: column; + align-items: center; + height: auto; + padding: 16px; + padding-bottom: 48px; + gap: 20px; + } + .value .feature_bg { + width: 100%; + position: sticky; + top: 0; + z-index: -2; + } + .value .feature_bg::after { + position: absolute; + content: ""; + width: 100%; + height: 100vh; + background-image: url(../img/value_feature_bg.png); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; + } + .value .feature_intro { + background: none; + } + .value .feature_intro p { + font-size: 18px; + } + .value .feature_intro .line, + .value .feature_intro .dot { + display: none; + } + .value .features .lines { + display: none; + } + .value .features .f_wrap { + max-width: 640px; + height: 340px; + border-radius: 24px; + gap: 16px; + justify-content: flex-end; + padding: 32px; + } + .value .features .f_wrap i { + width: 32px; + } + .value .features .f_wrap .sub_tit br { + display: none; + } + .value .features .f_wrap .sub_text { + line-height: 24px; + height: initial; + } + .value .system .diagram_wrap { + right: 52%; + transform: translateX(50%); + } + + .interface .route .fix { + padding: 0 48px; + } + .interface .route .subs { + min-width: 340px; + } + .interface .route .subs li .sub_tit { + font-size: 80px; + } + .interface .route .subs li .mid_tit { + font-size: 32px; + } + .interface .route .subs li .sub_text { + font-size: 16px; + line-height: 26px !important; + margin-top: 12px; + } + .interface .dual .dual_top { + padding: 120px 80px 0; + } + .interface .dual .detail .subs { + padding: 0 80px; + } + + .primary .intro::before { + right: 48px; + font-size: 100px; + } + .primary .route .fix > * { + width: 920px; + } + .primary .route .content { + height: 420px; + transform: translateX(-3%); + } + .primary .route .tabs { + transform: scale(0.65); + } + .primary .route .subs li .mid_tit { + font-size: 48px; + } + .primary .route .subs li .sub_text { + font-size: 16px; + line-height: 26px !important; + } + + .primary .process { + flex-direction: column; + gap: 80px; + } + .primary .process .left { + display: none; + } + .primary .process .right { + padding: 0; + padding-bottom: 80px; + gap: 64px; + } + .primary .process .right > div { + padding: 0 64px 32px; + } + .primary .process .right .mid_tit.m { + position: sticky; + top: 0; + left: 0; + display: flex !important; + width: 100%; + height: 120px; + box-shadow: 0 8px 8px #00000011; + align-items: flex-end; + padding: 0 0 12px 64px; + font-size: 32px; + font-weight: 700; + background-color: #fff; + z-index: 1; + } + .primary .process .right .mid_tit.m .num { + margin-right: 10px; + font-weight: 300; + } + .primary .process .right .sub_tit { + font-size: 24px; + } + .primary .process .right .sub_figs { + min-height: initial; + border-radius: 4px; + overflow: hidden; + } + .primary .process .right .sub_figs .text { + padding: 16px; + } + .primary .process .right .sub_figs .text li { + font-size: 16px; + padding-left: 12px; + margin-bottom: 4px; + } + .primary .process .right .sub_figs .text b { + font-size: 18px; + } + .primary .process .right .sub_figs .text li::before { + top: 10px; + } + .primary .process .right .style .text { + width: 64%; + padding: 32px; + gap: 12px; + } + .primary .process .right .style .sub_figs { + height: 280px; + } + .primary .process .right .style .sub_figs:last-child { + margin-bottom: 0; + } + .primary .process .right .style .sub_figs .text li { + margin-bottom: 4px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 280px; + } + .primary .process .right .print_area .sub_figs .imgs > div { + height: 280px; + } + + .floorplan .key { + margin-bottom: 40px; + } + .floorplan .key .left { + min-width: 350px; + padding-left: 64px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 64px); + } + .floorplan .key .left .mid_tit span { + font-size: 40px; + line-height: 52px; + bottom: -50px; + left: 64px; + } + .floorplan .key .left ul { + padding-top: 140px; + gap: 16px; + } + .floorplan .key .left ul li { + font-size: 16px; + } + .floorplan .key .left ul li.on { + font-size: 18px; + } + .floorplan .key .right { + padding-right: 76px; + padding-top: 240px; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: block !important; + } + .floorplan .info .left .mid_tit { + left: calc(64px - 12px); + } + + .forbim .theorys .diagram_wrap { + width: 480px; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + gap: 125%; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 24px; + } + .forbim .process .left { + min-width: 320px; + } + .forbim .process .left .mid_tit::after { + left: -20px; + } + .forbim .process .right .sub_tit img { + width: 40px; + margin-bottom: 16px; + } + .forbim .process .right .sub_figs > div span { + font-size: 14px; + } + .forbim .process .link .sub_figs .fig04 span { + font-size: 16px; + padding: 0 24px; + height: 32px; + } + + .buy .contents_wrap { + padding: 0 64px; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 16px; + height: 72px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 20px; + } + .buy .contents_wrap .video_area { + flex-direction: column; + } + .buy .contents_wrap .contact_area { + flex-direction: row; + padding: 24px 0px; + gap: 64px; + } + .buy .contents_wrap .contact_area .line { + width: 1px; + height: inherit; + border-left: 1px dashed #99999980; + border-bottom: 0; + } + + .faq #container { + padding: 0 64px; + } + .faq .sub_tab { + height: 52px; + } +} + +@media (max-width: 992px) { + .btn_top { + display: none; + } + .mouse_mark { + display: none !important; + } + h2 { + font-size: 48px; + } + .h_4 { + font-size: 16px; + } + .grand_tit { + font-size: 38px; + } + + .intro { + gap: 56px; + padding-bottom: 56px; + } + .intro .top span { + font-size: 14px; + } + .container .intro .top { + margin-top: 0; + height: 220px; + gap: 8px; + } + .intro .keyword { + gap: 24px; + } + .value .intro { + padding-bottom: 320px; + } + i.egbim_obj { + width: 48px !important; + } + .keyword span { + font-size: 20px !important; + } + .keyword p { + font-size: 16px !important; + line-height: 140%; + } + + .popup_in:not(:has(.privacy)) .close_div { + margin-right: 16px; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) + brightness(106%) contrast(100%); + } + .popup_container { + flex-direction: column; + } + .popup_container::after, + .popup_container::before { + display: none; + } + .popup_container .popup_tit { + width: 100%; + min-width: initial; + min-height: 160px; + padding: 0; + text-align: center; + justify-content: center; + gap: 16px; + } + .popup_container .popup_tit br { + display: none; + } + .popup_container .popup_tit .h_1 { + font-size: 34px !important; + margin: 0; + } + .popup_container .popup_tit .h_3 { + font-size: 14px; + } + .popup_contents_wrap { + padding: 48px 16px 24px !important; + justify-content: flex-start; + position: relative; + } + .popup_contents_wrap input { + font-size: 16px; + } + .popup_contents_wrap table th { + _width: 32%; + padding-top: 8px; + } + .popup_contents_wrap select { + font-size: 16px; + } + .popup_contents_wrap .pop_notice { + position: absolute; + top: 8px; + right: 8px; + } + .login .popup_tit .h_3 br { + display: none; + } + .login input { + font-size: 18px; + } + .login .btn_go div a span { + font-size: 16px; + } + .search .popup_tit .h_1 { + line-height: 130%; + } + .search .popup_tit .h_3 { + display: none; + } + .search .btn_wrap { + min-height: 56px; + } + .search .btn_wrap li span { + font-size: 16px; + } + .radio_wrap label { + font-size: 16px; + gap: 4px; + } + .radio_wrap input[type="radio"], + .radio_wrap input[type="radio"]:checked, + .radio_wrap input[type="radio"]:checked::before { + all: initial; + -webkit-appearance: radio; + } + .radio_wrap .text_m { + display: block !important; + } + .register .popup_tit .h_3 { + flex-grow: initial; + } + .register .popup_tit .h_3 br { + display: none; + } + .register .checkbox_wrap.all h4 { + font-size: 16px; + } + .register .popup_tit ul { + display: none; + } + .register .checkbox_wrap h4 { + font-size: 16px; + } + .register input[type="checkbox"], + .register input[type="checkbox"]:checked, + .register input[type="checkbox"]:checked::before { + /*all: initial;*/ + -webkit-appearance: checkbox; + } + .register .addinfo-side-notice { + background: #1c3b2d; + } + + .mypage h4 { + font-size: 20px !important; + } + .mypage.log, + .mypage.edit { + width: 100% !important; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + } + .mypage .popup_tit .h_3 br { + display: none; + } + .mypage .popup_contents_wrap { + gap: 48px; + } + .mypage .my_info { + font-size: 18px; + } + .mypage .my_info .name { + justify-content: flex-start; + padding-bottom: 16px; + } + .mypage .my_info .name button { + font-size: 14px; + padding: 4px 16px; + } + .mypage .my_info .detail { + flex-direction: column; + justify-content: flex-start; + gap: 8px; + } + .mypage .my_info .detail li { + padding: 0; + text-align: initial; + display: flex; + border: 0; + gap: 4px; + } + .mypage .my_info .detail li div { + min-width: 120px; + justify-content: flex-start; + gap: 4px; + padding: 0; + font-size: 14px; + } + .mypage .my_info i { + margin: 0; + width: 18px; + } + .mypage .my_qna thead tr { + height: 28px; + } + .mypage .my_qna thead tr th { + font-size: 14px; + padding: 2px 0; + } + .mypage .my_qna thead tr th:nth-child(1) { + width: 8% !important; + } + + .intro_wrap .intro_txt .txt_mask span { + font-size: 34px; + } + .intro_wrap .intro_txt .txt_mask font { + font-size: 26px; + } + @keyframes clip_play { + 0% { + clip-path: inset(50% 50% round 10px 10px 10px 10px); + top: -100px; + } + 30% { + clip-path: inset(49.5% 45% round 10px 10px 10px 10px); + top: -100px; + } + 60% { + clip-path: inset(45% 45% round 10px 10px 10px 10px); + top: -140px; + } + 100% { + clip-path: inset(0% 0% round 0px 0px 0px 0px); + top: 0; + } + } + + .value .system_bg::after { + height: 1100px; + } + .value .system { + height: 1000px; + } + .value .system .system_tit { + padding: 0; + height: 246px; + } + .value .system .system_tit span { + font-size: 72px; + padding-left: 32px; + } + .value .system .diagram_wrap { + width: 280px; + bottom: 150px; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -65%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -14%; + right: 124%; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -14%; + left: 124%; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: 29%; + left: 118%; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_core + span:nth-child(4) { + top: 8%; + right: -15%; + } + + .interface .route .keyword { + gap: 16px; + } + .interface .route .fix { + background-size: 150%; + } + .interface .route .content { + flex-direction: column; + padding-top: 0; + gap: 24px; + justify-content: center; + align-items: center; + } + .interface .route .subs { + width: 100%; + min-width: initial; + min-height: 210px; + } + .interface .route .subs li .sub_tit { + font-size: 80px; + display: none; + } + .interface .route .subs li .mid_tit { + font-size: 36px; + line-height: 120%; + } + .interface .route .subs li .mid_tit br { + display: none; + } + .interface .route .subs li .sub_text { + margin-top: 20px; + } + .interface .route .subs li .sub_text br.brk { + display: initial; + } + .interface .route .subs li .sub_text ul { + margin-top: 8px; + } + .interface .route .subs li .sub_text ul li { + font-size: 14px; + text-indent: 16px; + line-height: 150%; + } + .interface .route .subs li .sub_text ul li::before { + top: 8px; + left: 2px; + } + .interface .route .imgs { + max-height: 420px; + width: 100%; + } + .interface .route .imgs::before, + .interface .route .imgs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 50%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .interface .route .imgs::before { + bottom: -8%; + } + .interface .route .imgs::after { + bottom: calc(-8% - 8px); + animation-delay: 0.5s; + } + .interface .route .imgs li:nth-child(1) span:nth-child(1) { + top: -30px; + left: 20px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(2) { + top: -30px; + right: 100px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(3) { + top: initial; + bottom: -16px; + left: 10px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(4) { + top: initial; + bottom: -16px; + right: 80px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(5) { + top: 44%; + left: 50%; + transform: translate(-50%, -50%); + } + .interface .route .imgs li:nth-child(2) span:nth-child(1) { + top: -30px; + left: 37%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(1)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); + } + .interface .route .imgs li:nth-child(2) span:nth-child(2) { + top: 26%; + left: 44%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(2)::after { + transform: rotate(-90deg); + top: -7px; + left: calc(50% - 7px); + } + .interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 75%; + left: 5%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 75%; + right: 20%; + } + .interface .route .imgs li:nth-child(3) span { + top: 8%; + right: 24.5%; + } + .interface .route .imgs:has(li:nth-child(3).on)::before, + .interface .route .imgs:has(li:nth-child(3).on)::after { + display: none; + } + .interface .dual .dual_top { + padding: 0; + overflow-x: hidden; + } + .interface .dual .dual_top .sub_tit { + margin-top: 120px; + } + .interface .dual .dual_top .sub_tit br.brk { + display: initial; + } + .interface .dual .dual_top #myimg { + width: 120%; + margin-left: -10%; + margin-top: 24px; + } + .interface .dual .detail { + padding: 0; + margin-top: 80px; + } + .interface .dual .detail .subs { + padding: 40px; + margin-bottom: 24px; + } + .interface .dual .detail .sub_tit { + margin-bottom: 0; + } + .interface .dual .detail .exam img { + width: 100%; + } + .interface .dual .detail .exam span { + font-size: 16px; + } + .interface .dual .detail .sub_text { + font-size: 16px; + } + .interface .dual .detail .element { + padding: 24px 32px; + } + + .primary .intro { + padding-bottom: 120px; + } + .primary .intro .diagram_wrap { + width: 360px; + } + .diagram_wrap .dia_element .dia_tit { + font-size: 16px; + } + .primary .intro .diagram_wrap .e01 { + left: -24%; + } + .primary .intro .diagram_wrap .e02 { + bottom: 0; + left: -45%; + } + .primary .intro .diagram_wrap .e03 { + bottom: 30%; + right: -38%; + } + .primary .route .fix > * { + width: 760px; + } + .primary .route .subs li .mid_tit { + display: block; + margin-bottom: 40px; + font-size: 64px; + } + .primary .route .tabs { + transform: scale(0.55); + } + .primary .route .content { + height: 360px; + } + .primary .route .imgs::before, + .primary .route .imgs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 55%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .primary .route .imgs::before { + bottom: -8%; + } + .primary .route .imgs::after { + bottom: calc(-8% - 8px); + animation-delay: 0.5s; + } + + .floorplan .intro::before { + font-size: 90px; + bottom: 16px; + } + .floorplan .intro .diagram_wrap { + margin: 150px 0; + } + .floorplan .intro .dia_element i { + width: 40px; + } + .floorplan .intro .dia_element .dia_tit { + font-size: 16px; + } + .floorplan .intro .dia_element01 { + top: -45%; + } + .floorplan .intro .dia_element02 { + bottom: -9%; + left: -24%; + } + .floorplan .intro .dia_element03 { + bottom: -9%; + right: -24%; + } + .floorplan .key { + flex-direction: column; + padding: 0; + margin-bottom: 120px; + } + .floorplan .key .left { + width: 100%; + min-width: initial; + height: 100px; + padding: 0; + box-shadow: 0 8px 8px #00000011; + } + .floorplan .key .left .mid_tit { + transform: initial; + width: 100%; + height: 100%; + left: initial; + background: #fff !important; + color: #000; + } + .floorplan .key .left .mid_tit span { + left: 48px; + font-size: 34px; + bottom: 8px; + } + .floorplan .key .left .mid_tit span em { + color: #000; + } + .floorplan .key .left .mid_tit span br { + display: none; + } + .floorplan .key .left ul { + display: none; + } + .floorplan .key .right { + padding: 0 48px 48px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: 2.5fr 1fr; + } + .floorplan .key .right .sub_figs .text { + padding: 24px 0; + font-size: 16px; + } + .floorplan .key .right .sub_figs .text br { + display: initial; + } + .floorplan .key .right .sub_figs .text br.brk { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 40%; + } + .floorplan .key .right .sub_figs .bottom img { + width: 30px; + } + .floorplan .info .left .mid_tit span { + left: 48px !important; + } + .floorplan .print { + margin-bottom: 40px; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: none !important; + } + .floorplan .find .find03 .sub_figs .find_03_move img:nth-child(2) { + margin-bottom: 4%; + } + + .forbim .intro .visual { + height: 240px; + } + .forbim .intro .visual img { + width: 80%; + } + .forbim .theorys .mid_tit { + font-size: 32px; + } + .forbim .theorys .diagram_wrap { + width: 380px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap::before { + top: -10%; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + gap: 130%; + } + .forbim .process { + flex-direction: column; + gap: 80px; + } + .forbim .process .left { + display: none; + } + .forbim .process .right { + padding: 0; + padding-bottom: 80px; + gap: 64px; + } + .forbim .process .right > div { + padding: 0 64px 32px; + } + .forbim .process .right .mid_tit.m { + position: sticky; + top: 0; + left: 0; + display: flex !important; + width: 100%; + height: 120px; + box-shadow: 0 8px 8px #00000011; + align-items: flex-end; + padding: 0 0 12px 64px; + font-size: 32px; + font-weight: 700; + background-color: #fff; + z-index: 1; + } + .forbim .process .right .mid_tit.m .num { + margin-right: 10px; + font-weight: 300; + } + .forbim .process .right .sub_tit { + font-size: 24px; + } + + .buy .contents_wrap .ask_area { + flex-direction: column; + align-items: initial; + margin-top: 24px; + } + .buy .contents_wrap::after { + bottom: -40%; + } + + .faq .sub_tab { + height: 42px; + } + .faq .sub_tab li a { + font-size: 14px; + } + .faq #bo_list #fqalist tbody .td_stat span { + width: 100%; + padding: 0; + } +} + +@media (max-width: 768px) { + .main footer.footer_on { + display: none; + } + footer { + height: initial; + padding: 40px 32px; + } + footer * { + font-size: 14px !important; + } + footer .footer_wrap { + flex-direction: column; + gap: 20px; + } + footer .comp_inner { + display: grid; + grid-template-columns: 100%; + gap: 16px; + } + footer .comp_copy { + margin-left: 0; + gap: 4px; + } + footer .comp_copy > * { + margin: 0; + } + footer .ceo { + margin-top: 8px; + } + footer .comp_info { + width: 100%; + } + footer .comp_info .logo_baron { + width: 200px; + } + footer .address em.tel { + margin: 0; + } + footer .comp_contact { + max-width: 400px; + grid-row: 3; + } + footer .footer_sitemap { + width: 100%; + } + footer .footer_sitemap .family_wrap { + width: 100%; + margin: 0; + } + footer .footer_sitemap .family_btn { + width: 100%; + } + footer .btn_privacy em::after { + font-size: 12px; + } + footer .copyright { + font-size: 12px !important; + } + .sub_tit { + font-size: 28px; + } + .sub_text { + font-size: 16px; + line-height: 26px !important; + } + .main .pagination_main { + bottom: calc((60 / 1080) * 100%); + } + .mypage .my_qna thead tr th:nth-child(1), + .mypage .my_qna tbody tr td:nth-child(1) { + display: none; + } + .mypage .my_qna thead tr th:nth-child(2), + .mypage .my_qna tbody tr td:nth-child(2) { + display: none; + } + .sitemap { + gap: 8px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 48px; + bottom: -55px; + } + .popup_in:has(.privacy) { + width: 100%; + height: 100%; + top: 0; + left: 0; + transform: initial; + } + .popup_in:has(.privacy) .btn_close { + top: 0; + right: 0; + background: none; + } + .popup_in:has(.privacy) .close_div { + margin-right: 16px; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) + brightness(106%) contrast(100%); + } + .privacy { + top: 0; + left: 0; + transform: initial; + border: 0; + } + .privacy .contents_wrap { + padding: 56px 16px 16px; + gap: 16px; + } + .privacy .content { + padding: 8px; + } + .btn_back { + font-size: 16px; + } + .btn_back::before { + width: 8px; + height: 8px; + } + + .value .intro .summarys_wrap .dia_element_wrap { + gap: 8px; + margin-top: 75px; + } + .value .intro .summarys_wrap .dia_element .dia_tit { + width: 96px; + font-size: 14px; + } + .value .intro .summarys_wrap .dia_element .dia_tit br.brk { + display: initial !important; + } + .value .intro .summarys_wrap .dia_tit span { + padding: 0; + } + .value .intro .summarys_wrap .dia_element:nth-child(1) { + margin-top: 2px; + } + .value .intro .summarys_wrap .dia_element:nth-child(2) { + margin-top: 152px; + } + .value .intro .summarys_wrap .dia_li { + width: 148px; + padding: 8px; + display: flex; + flex-direction: column; + gap: 4px; + } + .value .intro .summarys_wrap .dia_li li { + font-size: 14px; + line-height: 120%; + margin: 0; + list-style: none; + } + .value .intro .summarys_wrap .dia_li li.dia_li_tit { + font-size: 16px; + margin-bottom: 8px; + } + .value .intro .summarys_wrap .dia_li li:not(li.dia_li_tit) { + margin-left: 8px; + } + .value .intro .summarys_wrap .dia_li li:not(li.dia_li_tit)::after { + position: absolute; + content: ""; + top: 6px; + left: -6px; + width: 3px; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #fff; + } + .value .intro .summarys_wrap .dia_circles_wrap { + width: 240px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core { + width: 85%; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core img { + width: 100px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_dots.move .dot { + transform-origin: 8px 96px; + } + .value .intro .summarys_wrap .dia_appendix { + height: 42%; + font-size: 14px; + gap: 132px; + bottom: -162px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg { + width: 120px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg .app_etc { + transform: initial !important; + padding: 4px 12px; + font-size: 10px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg:nth-child(1) .app_etc { + margin-right: 28px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg:nth-child(2) .app_etc { + transform: translateX(16px) !important; + } + .value .system { + height: 1200px; + } + .value .system .diagram_wrap { + bottom: 260px; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -70%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -48%; + left: -33%; + right: initial; + text-align: left; + } + .value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: -30%; + left: 30%; + right: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -37%; + right: -38%; + left: initial; + text-align: right; + } + .value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: -30%; + right: 30%; + left: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: -20%; + right: -28%; + left: initial; + text-align: right; + } + .value .system .diagram_wrap .dia_element:nth-child(4) .line { + width: 1px; + height: 80px; + top: 120%; + left: 50%; + } + + .interface .route .subs li .sub_text br.brk { + display: none; + } + .interface .route .subs li:nth-child(2) .mid_tit br { + display: initial; + } + + .primary .intro { + padding-bottom: 180px; + } + .primary .intro::before { + font-size: 80px; + right: 0; + } + .primary .intro .diagram_wrap { + margin-top: 64px; + } + .primary .intro .diagram_wrap .dia_element { + flex-direction: column-reverse; + align-items: flex-end; + gap: 4px; + } + .primary .intro .diagram_wrap .e01 { + top: -14%; + left: -8%; + } + .primary .intro .diagram_wrap .e02 { + bottom: -22%; + left: -6%; + flex-direction: column; + } + .primary .intro .diagram_wrap .e02 br.brk { + display: initial; + } + .primary .intro .diagram_wrap .e03 { + right: -16%; + text-align: right; + } + .primary .route { + margin-bottom: 0; + } + .primary .route .fix { + padding: 72px 0 0; + background-image: none; + overflow: hidden; + background-color: #faf9f6; + } + .primary .route .fix > * { + transform: initial; + } + .primary .route .subs { + margin: 0; + padding: 0 48px; + width: initial; + min-height: 220px; + position: relative; + } + .primary .route .subs::before, + .primary .route .subs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 50%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .primary .route .subs::before { + bottom: 2%; + } + .primary .route .subs::after { + bottom: calc(2% - 8px); + animation-delay: 0.5s; + } + .primary .route .subs:has(li:nth-child(3).on)::before, + .primary .route .subs:has(li:nth-child(3).on)::after { + display: none; + } + .primary .route .subs li .sub_tit { + font-size: 20px; + margin-bottom: 16px; + line-height: 140%; + } + .primary .route .subs li .mid_tit { + font-size: 56px; + margin-bottom: 16px; + } + .primary .route .subs li .sub_text { + font-size: 16px; + margin-top: 24px; + } + .primary .route .subs li .sub_text br { + display: none; + } + .primary .route .content { + margin: 0 auto; + height: 100%; + width: 100%; + overflow: hidden; + border-radius: 16px 16px 0 0; + position: relative; + background-color: #0c271e; + z-index: -1; + } + .primary .route .content::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: linear-gradient( + 90deg, + #00000055 0%, + transparent 10%, + transparent 90%, + #00000055 100% + ); + z-index: -1; + } + .primary .route .tabs { + display: none; + background: none; + } + .primary .route .imgs { + border-radius: 0; + min-width: initial; + padding: 16px; + } + .primary .route .imgs::before, + .primary .route .imgs::after { + display: none; + } + .primary .route .imgs li a { + overflow-y: hidden; + overflow-x: auto; + padding: 0; + } + .primary .route .imgs li a img { + width: fit-content; + object-fit: cover; + } + .primary .process .right .sub_figs { + padding: 0; + gap: 0; + height: max-content !important; + } + .primary .process .right .sub_tit br.brk { + display: initial; + } + .primary .process .right .sub_figs .text li { + font-size: 14px; + } + .primary .process .right .sub_figs .text b { + font-size: 16px; + } + .primary .process .right .style .text { + width: 100%; + padding: 16px; + } + .primary .process .right .style .sub_figs { + flex-direction: column; + } + .primary .process .right .style .sub_figs:last-child { + margin-bottom: 0; + } + .primary .process .right .style .sub_figs .text li { + margin-bottom: 4px; + } + .primary .process .right .block .sub_text br { + display: none; + } + .primary .process .right .block .sub_figs .imgs { + gap: 8px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 200px; + } + .primary .process .right .block .sub_figs .imgs i { + width: 32px; + } + .primary .process .right .print_area .sub_figs .imgs { + flex-direction: column; + gap: 8px; + } + .primary .process .right .print_area .sub_figs .imgs > div { + height: 200px; + } + + .floorplan .intro::before { + font-size: 72px; + left: 4px; + } + .floorplan .intro .keyword br.brk { + display: initial; + } + .floorplan .key .right .sub_tit { + font-size: 22px; + margin-bottom: 12px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: initial; + } + .floorplan .key .right .sub_figs .text { + min-width: initial; + } + .floorplan .key .right .sub_figs .text br { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 80%; + } + + .forbim .intro .keyword { + padding: 0 24px; + } + .forbim .intro .visual { + height: 240px; + background-size: cover; + overflow: hidden; + } + .forbim .intro .visual img { + width: 100%; + transform: translate(0%, -24%); + } + .forbim .theorys .mid_tit br.brk { + display: initial; + } + .forbim .theorys .diagram_wrap { + width: 70%; + margin-bottom: 120px; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + top: 116%; + gap: 36%; + } + .forbim .theorys .diagram_wrap .dia_element { + justify-content: flex-start; + } + .forbim .theorys .diagram_wrap .dia_element .dia_text { + font-size: 16px; + } + .forbim .theorys .diagram_wrap .dia_element:last-child ul { + transform: initial; + _text-align: right; + } + .forbim .theorys .diagram_wrap .dia_element .line { + display: none; + } + .forbim .theorys .diagram_wrap .dia_element:first-child .line { + left: 0; + } + .forbim .theorys .diagram_wrap .dia_element:last-child .line { + right: 0; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap::before { + font-size: 16px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 20px; + } + + .buy .contents_wrap { + padding: 0; + gap: 64px; + margin-bottom: 80px; + } + .buy .contents_wrap .ask_area { + gap: 24px; + padding: 0 24px; + } + .buy .contents_wrap .ask_area .mid_tit { + font-size: 28px; + } + .buy .contents_wrap .ask_area .mid_tit::after { + top: -35px; + font-size: 64px; + } + .buy .contents_wrap .ask_area .sub_text { + font-size: 16px; + padding-left: 24px; + } + .buy .contents_wrap .ask_area .sub_text::after { + width: 16px; + } + .buy .contents_wrap .ask_area .ask_btn a { + gap: 2px; + min-width: 100px; + height: 64px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + gap: 6px; + } + .buy .contents_wrap .contact_area { + background-color: initial; + box-shadow: initial; + gap: 0; + justify-content: space-between; + padding: 0 24px; + } + + .faq .sub_tab li a { + width: 100%; + } + .faq #container { + padding: 0 24px; + } + .faq .sub_tit { + margin-top: 48px; + } + .faq #faq_sch { + max-width: 240px; + } + .faq #faq_sch .btn_submit { + gap: 0; + font-size: 0; + width: 45px; + min-width: 45px; + width: 45px; + } + .faq #bo_list #bo_btn_top { + max-width: 240px; + } + .faq #bo_list #bo_btn_top .bo_sch .sch_btn { + gap: 0; + width: 45px; + min-width: 45px; + width: 45px; + } + .faq #bo_list #bo_btn_top .bo_sch .sch_btn .sound_only { + font-size: 0; + } + .faq #bo_list #fqalist tbody .bo_cate_link { + display: none; + } + + /*20250801 1:1 문의 추가 */ + .faq .sub_tab li:not(:first-child, :last-child) { + width: 100%; + } + + .faq .search-wrap { + flex-direction: column; + gap: 20px; + } + .faq .search-wrap .qa-filters > div { + gap: 16px; + } + .form-wrap .form-group { + grid-template-columns: 1fr; + } + .form-wrap .form-item { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 10px; + padding: 12px 0; + } + .form-wrap .form-item .form-tit { + padding: 0; + } + + .faq .btn-area > .btn:not(.btn-write), + .faq .btn-group > .btn:not(.btn-write) { + width: 100px; + padding: 0 10px; + } + + .faq .tbl-wrap .tbl-group.user-info { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 4px; + } + .faq .comment-section .comment-list:has(.comment) { + padding: 0 16px; + } + .faq .comment-section .comment-form { + flex-direction: row; + } +} + +@media (max-width: 576px) { + br.brk { + display: initial !important; + } + h2 { + font-size: 36px; + } + .grand_tit { + font-size: 28px; + } + .sub_tit { + font-size: 22px; + } + + .intro .keyword { + gap: 16px; + } + + .popup_sitemap header h1 { + visibility: hidden; + } + .sitemap div[class*="menu"] a span { + font-size: 28px; + } + .sitemap div[class*="menu"] a span:after { + display: none; + } + + .popup_contents_wrap { + padding-top: 32px !important; + } + .popup_contents_wrap table th { + font-size: 14px; + width: 30%; + padding-top: 9px; + } + .popup_contents_wrap td button { + font-size: 14px; + } + .popup_container .popup_tit { + min-height: 140px; + } + .popup_container .popup_tit .h_3 { + display: none; + } + .popup_contents_wrap .guide_txt { + font-size: 16px; + } + .popup_contents_wrap .guide_txt p { + font-size: 22px; + margin-bottom: 16px; + } + .register input[type="checkbox"] { + width: 20px; + } + .register input[type="checkbox"]:checked::before { + font-size: 14px; + } + .register .checkbox_wrap.all h4 { + font-size: 16px; + } + .register .terms_wrap { + padding-bottom: 0px; + } + .search .btn_wrap { + min-height: 48px; + } + .login .btn_go div a span { + font-size: 14px; + } + .join_btn_wrap button { + line-height: 56px; + } + .btn_confirm button { + line-height: 56px; + } + .mypage.edit .sign_out a { + font-size: 14px; + } + .mypage.edit .sign_out i { + width: 20px; + } + .mypage .my_qna thead tr th:nth-child(4), + .mypage .my_qna thead tr th:nth-child(5) { + width: 20% !important; + } + .privacy .tab_wrap { + min-height: 56px; + } + .privacy .tab_wrap li span { + font-size: 16px; + } + .privacy .content { + padding: 0; + font-size: 14px; + } + .privacy .tit { + font-size: 14px; + } + .privacy .list_1 > li { + margin-bottom: 24px; + } + .privacy .list_2 { + margin-top: 8px; + } + .privacy .list_2 > li { + padding: 0; + margin-bottom: 8px; + margin-left: 24px; + } + .verify_wrap .code_input { + gap: 4px; + } + + .main .pagination_main { + font-size: 14px; + } + .main .pagination_main li span { + font-size: 15px; + margin: 0; + } + .main .pagination_main li div::after { + margin-top: 2px; + } + + .value .intro .summarys_wrap .dia_element_wrap { + gap: 2px; + margin-top: 56px; + } + .value .intro .summarys_wrap .dia_element .dia_tit { + width: 80px; + font-size: 14px; + } + .value .intro .summarys_wrap .dia_tit span { + border-width: 4px; + } + .value .intro .summarys_wrap .dia_element:nth-child(2) { + margin-top: 118px; + } + .value .intro .summarys_wrap .dia_li { + width: 116px; + padding: 6px; + } + .value .intro .summarys_wrap .dia_li li.dia_li_tit { + font-size: 12px; + margin-bottom: 4px; + } + .value .intro .summarys_wrap .dia_li li { + font-size: 11px; + line-height: 120%; + margin: 0; + list-style: none; + } + .value .intro .summarys_wrap .dia_circles_wrap { + width: 186px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core img { + width: 80px; + } + .value .intro .summarys_wrap .dia_appendix { + font-size: 12px; + gap: 80px; + bottom: -130px; + } + .value .feature_intro p { + font-size: 16px; + } + .value .feature_intro p br { + display: none; + } + .value .features { + flex-direction: column; + height: auto; + padding: 20px; + gap: 20px; + } + .value .features .f_wrap { + height: 280px; + border-radius: 24px; + gap: 16px; + justify-content: flex-end; + padding: 18px; + } + .value .features .f_wrap i { + width: 32px; + } + .value .features .f_wrap .sub_text { + line-height: 24px; + height: initial; + } + .value .system_bg::after { + height: 880px; + } + .value .system { + height: 860px; + } + .value .system .system_tit { + padding: 0; + height: 176px; + } + .value .system .system_tit span { + font-size: 52px; + padding-left: 16px; + } + .value .system .diagram_wrap { + width: 220px; + bottom: 180px; + right: 50%; + } + .value .system .diagram_wrap .dia_circles_wrap::after { + width: 110%; + } + .value .system .diagram_wrap .dia_circles_wrap .circle_core span { + font-size: 12px; + } + .value .system .diagram_wrap .dia_circles_wrap .circle_core span b { + font-size: 16px; + line-height: 100%; + } + .value .system .diagram_wrap .dia_element ul { + display: flex; + gap: 4px 16px; + flex-direction: column; + } + .value .system .diagram_wrap .dia_element ul li { + font-size: 14px; + line-height: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -72%; + } + .value .system .diagram_wrap .dia_element:nth-child(1) .line { + height: 60px; + bottom: -70px; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -52%; + left: -25%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: -40%; + left: 0; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -51%; + right: -25%; + } + .value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: -40%; + right: 0; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: -16%; + right: -21%; + } + .value .system .diagram_wrap .dia_element:nth-child(4) .line { + left: 55%; + height: 60px; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_core + span:nth-child(4) + _ { + right: -13%; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_dots + .dot:nth-child(4) { + right: -5%; + } + + .interface .route .fix { + background-size: 280%; + padding: 24px; + } + .interface .route .subs li .sub_tit { + font-size: 64px; + } + .interface .route .subs li .mid_tit { + font-size: 28px; + } + .interface .route .subs li .mid_tit br { + display: initial; + } + .interface .route .subs li .sub_text { + margin-top: 8px; + } + .interface .route .subs li .sub_text br { + display: none !important; + } + .interface .route .subs li:nth-child(1) .mid_tit br { + display: none; + } + .interface .route .subs li:nth-child(3) .mid_tit br { + display: none; + } + .interface .route .imgs { + max-height: 260px; + } + .interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 68%; + left: 5%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 68%; + right: 20%; + } + .interface .dual .sub_tit { + font-size: 20px; + } + .interface .dual .detail .subs { + padding: 24px; + } + .interface .dual .detail .sub_tit { + margin-bottom: 0; + } + .interface .dual .detail .sub_text br { + display: none; + } + .interface .dual .detail .exam span { + font-size: 14px; + } + + .primary .intro .keyword br { + display: none; + } + .primary .intro .diagram_wrap { + width: 260px; + } + .primary .intro .diagram_wrap .circle_core span { + font-size: 18px; + line-height: 22px; + } + .primary .intro .diagram_wrap .dia_element i { + width: 30px; + } + .primary .intro .diagram_wrap .dia_element .dia_tit { + font-size: 14px; + } + .primary .intro .diagram_wrap .e01 { + top: -20%; + left: -16%; + } + .primary .intro .diagram_wrap .e02 { + bottom: -26%; + left: -12%; + flex-direction: column; + } + .primary .intro .diagram_wrap .e03 { + right: -16%; + text-align: right; + } + .primary .route .fix { + padding-top: 56px; + } + .primary .route .subs { + padding: 0 24px; + min-height: 230px; + } + .primary .route .subs li .sub_tit { + margin-bottom: 4px; + } + .primary .route .subs li .mid_tit { + font-size: 42px; + } + .primary .route .subs li .sub_text { + margin-top: 0; + } + .primary .process .right { + gap: 32px; + } + .primary .process .right > div { + padding: 0 24px 24px; + } + .primary .process .right .mid_tit.m { + padding-left: 24px; + font-size: 26px; + height: 88px; + } + .primary .process .right .sub_tit { + font-size: 22px; + } + .primary .process .right .block .sub_figs .imgs { + flex-direction: column; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 200px; + } + .primary .process .right .block .sub_figs .imgs .fig02 { + display: flex; + align-items: flex-end; + } + + .floorplan .intro::before { + font-size: 52px; + } + .floorplan .intro .keyword { + padding: 0 32px; + } + .floorplan .intro .keyword br { + display: none !important; + } + .floorplan .intro .diagram_wrap { + margin: 100px 0; + } + .floorplan .intro .dia_element i { + width: 30px; + } + .floorplan .intro .dia_element .dia_tit { + font-size: 14px; + } + .floorplan .intro .dia_element .line { + width: 32px; + } + .floorplan .intro .dia_element01 { + top: -56%; + } + .floorplan .intro .dia_element02 { + bottom: -18%; + left: -32%; + } + .floorplan .intro .dia_element03 { + bottom: -18%; + right: -32%; + } + .floorplan .intro .diagram_wrap .dia_circles_wrap { + width: 200px; + } + .floorplan .intro .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 24px; + } + .floorplan .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 16px; + } + .floorplan .key .left .mid_tit { + height: 100px; + } + .floorplan .key .left .mid_tit span { + left: 24px; + font-size: 26px; + bottom: 0; + } + .floorplan .key .right { + padding: 0 24px; + } + .floorplan .key .right .sub_tit { + font-size: 20px; + } + .floorplan .info .left .mid_tit span { + left: 24px !important; + } + .floorplan .key .right .info01 .sub_figs .text .bottom br { + display: initial; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: initial !important; + } + + .forbim .theorys .mid_tit { + font-size: 24px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + gap: 4px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core i { + width: 70%; + } + .forbim .process { + gap: 48px; + } + .forbim .process .right { + gap: 32px; + } + .forbim .process .right > div { + padding: 0 24px 24px; + } + .forbim .process .right .mid_tit.m { + padding-left: 24px; + font-size: 26px; + height: 88px; + } + .forbim .process .right .sub_tit { + font-size: 22px; + } + .forbim .process .right .sub_tit img { + width: 30px; + margin-bottom: 8px; + } + .forbim .process .right .sub_figs > div span { + font-size: 14px; + } + .forbim .process .link .sub_figs .fig04 span { + font-size: 14px; + padding: 0 24px; + height: 28px; + bottom: -14px; + } + + .buy .intro { + margin-bottom: 24px; + } + .buy .contents_wrap .ask_area { + gap: 24px; + padding: 0 16px; + } + .buy .contents_wrap .ask_area .ask_btn { + display: grid; + grid-template-columns: 1fr 1fr; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 14px; + height: 56px; + min-width: initial; + width: 100%; + } + .buy .contents_wrap .ask_area .ask_btn a i { + width: 14px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 18px; + grid-column: span 2; + width: 100%; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask i { + width: 20px; + } + + .buy .contents_wrap .contact_area { + flex-direction: column; + gap: 16px; + } + .buy .contents_wrap .contact_area .mid_tit { + font-size: 22px; + } + .buy .contents_wrap .contact_area .line { + display: none; + } + .buy .contents_wrap .contact_area ul { + gap: 8px; + } + + .faq .sub_tab li a { + width: 100%; + } + .faq #container { + padding: 0 16px; + } + .faq #bo_cate { + display: none; + } + .faq #faq_sch { + grid-column: span 2; + grid-row: 2; + width: 100%; + } + .faq #bo_list #bo_btn_top { + grid-column: span 2; + grid-row: 2; + } + .faq #bo_list #fqalist { + row-gap: 16px; + } + .faq #bo_list #fqalist thead th { + font-size: 14px; + height: 32px; + } + .faq #bo_list #fqalist tbody tr td { + font-size: 15px; + } + .faq #bo_list #fqalist tbody .td_subject { + display: table-cell; + } + + .faq #bo_list #fqalist thead th:nth-child(3), + .faq #bo_list #fqalist tbody tr td:nth-child(3) { + display: none; + } + .faq #bo_list #fqalist thead th:nth-child(4), + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(5) { + width: 32%; + } + .faq #bo_list #fqalist thead th:nth-child(5), + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(6) { + width: 24%; + } + .faq #bo_list #fqalist tbody .td_stat span { + font-size: 12px; + } + + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(2), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(2) { + width: 20%; + } + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(3), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(3) { + display: table-cell; + } + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(4), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(5) { + font-size: 13px; + } + + /*250804 1:1 문의 추가 */ + .faq .search-wrap .qa-filters { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .faq .search-wrap .qa-filters > div { + width: max-content; + } + + .faq .tbl-area .tbl-group.user-info .tbl-item { + flex-direction: column; + gap: 4px; + } + + .faq .comment-section .comment-box { + flex-direction: column; + padding: 20px 0; + } +} + +/*250808 공지사항 추가*/ +/* 배경을 진한 그린톤으로, 살짝 투명 */ +.notice-backdrop { + position: fixed; + inset: 0; + background: linear-gradient( + 145deg, + rgba(4, 28, 22, 0.88), + rgba(8, 40, 32, 0.88) + ); + z-index: 9999; + display: none; +} +/* 팝업 본체도 다크톤, 테두리 살짝 */ +.notice-box { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: min(520px, 92%); + background: #0f2a24; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + padding: 28px 24px; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); + color: #fff; + z-index: 10000; + display: none; +} +.notice-box h3 { + margin: 0 0 8px; + font-size: 20px; + color: #fff; +} +.notice-box p { + margin: 0 0 18px; + line-height: 1.7; + color: #f2f6f5; +} +.notice-box p b, +.notice-box p strong { + color: #ffd166; +} /* 강조 색 살짝 */ +.notice-close { + position: absolute; + right: 10px; + top: 10px; + border: 0; + background: transparent; + font-size: 22px; + color: #fff; + opacity: 0.8; + cursor: pointer; +} +.notice-close:hover { + opacity: 1; +} + +.notice-actions { + display: flex; + gap: 10px; + justify-content: flex-end; +} +.notice-actions button { + padding: 10px 14px; + border-radius: 10px; + cursor: pointer; + font-size: 14px; +} +/* 오늘 안보기: 투명+화이트 보더 */ +.btn-today { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.35); + color: #fff; +} +.btn-today:hover { + border-color: #fff; +} +/* 확인: 브랜드 느낌의 그린, 텍스트는 화이트 */ +.btn-ok { + background: #1ea67a; + border: 1px solid #1ea67a; + color: #fff; +} +.btn-ok:hover { + filter: brightness(1.06); +} + +/* Q&A 공지사항 : 행 전체 Bold */ +.tbl-wrap table tr.row-notice td, +.tbl-wrap table tr.row-notice a { + font-weight: 700; +} + +/* Q&A 공지사항 : 가벼운 강조 배경 */ +.tbl-wrap table tr.row-notice td { + background: #f0f0f0; +} + +/* Q&A 댓글 스타일 적용 250820*/ +/* 댓글 섹션 */ +.comment-section { + margin-top: 20px; + border: 1px solid #ddd; + border-radius: 6px; + background: #ffffff; + padding: 15px; +} + +/* 댓글 헤더 */ +.comment-section h4 { + margin: 0 0 15px; + font-size: 14px; + font-weight: bold; +} + +/* 댓글 목록 */ +.comment-list { + margin-bottom: 15px; +} +.comment-list > .comment:nth-child(odd) { + background-color: #ffffff; +} /* 홀수 댓글 */ +.comment-list > .comment:nth-child(even) { + background-color: #f9f9f9; +} /* 짝수 댓글 */ +.comment-list > .comment { + padding: 10px; + border-bottom: 1px solid #e0e0e0; +} + +/* 개별 댓글 */ +.comment { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 10px 0; + border-bottom: 1px solid #eee; +} +.comment:last-child { + border-bottom: none; +} + +/* 댓글 본문 */ +.comment-body { + margin-bottom: 12px; +} + +/* 댓글 텍스트 */ +.comment-text, +.edit-input { + flex: 1; + margin-bottom: 5px; /* 본문과 이름/일자 사이 간격 */ + line-height: 1.6; +} + +/* 작성자+날짜 영역 */ +.comment-meta { + display: inline-flex; /* ✅ 가로로 한 줄 정렬 */ + align-items: center; + gap: 6px; /* 이름과 날짜 간격 */ + margin-top: 4px; + font-size: 0.9em; + color: #333; + background: #e8f4ff; /* 파스텔톤 파란색 배경 */ + padding: 3px 8px; + border-radius: 4px; + white-space: nowrap; /* ✅ 줄바꿈 방지 */ + width: fit-content; /* 내용 길이에 맞게 배경 */ +} + +/* 작성자 */ +.comment-meta .comment-author { + font-weight: bold; + color: #333; + margin: 0; +} + +/* 작성일 */ +.comment-meta .comment-date { + color: #999; + font-size: 0.85em; + margin: 0; +} + +.comment-body strong { + display: block; + font-weight: bold; + color: #333; + margin-bottom: 0px; + font-size: 15px; +} +.comment-body .comment-text { + margin: 2px 0; + line-height: 1.4; + font-size: 15px; +} +.comment-body small { + display: block; + margin-top: 3px; + font-size: 12px; + color: #999; +} + +/* 오른쪽 버튼 */ +.comment-actions { + display: flex; + gap: 5px; + margin-left: 15px; + white-space: nowrap; + align-items: center; +} +.comment-actions button { + padding: 3px 8px; + font-size: 12px; + cursor: pointer; + border: 1px solid #ccc; + background: #f9f9f9; + border-radius: 3px; +} +.comment-actions button:hover { + background: #eee; +} + +/* 댓글 입력 영역 */ +/* 댓글 입력칸 + 저장 버튼 → 같은 줄 유지 251113 추가*/ +.comment-form { + display: flex; + align-items: flex-start !important; + gap: 8px; + width: 100%; +} + +/* textarea가 전체 너비 차지하도록 */ +.comment-form .input-text { + flex: 1 !important; + width: auto !important; + display: block; +} +.comment-form .btn-save { + padding: 8px 16px; + background-color: #4a3f2f; + color: #fff; + border: none; + border-radius: 4px; + font-size: 14px; + cursor: pointer; +} +.comment-form .btn-save:hover { + background-color: #332a1e; +} + +.comment .comment-text { + padding: 8px 0; + line-height: 1.5; +} + +/* 댓글 입력 textarea 스타일 복원 */ +.comment-row textarea.input-text { + border: 1px solid #ccc !important; + border-radius: 4px !important; + padding: 10px !important; + width: 90% !important; + flex: 1 !important; + background: #fff !important; + min-height: 40px !important; + box-sizing: border-box !important; + margin-left: 12px !important; +} + +/* textarea 커서 조절 핸들 정상 처리 */ +.comment-row textarea.input-text:focus { + outline: none !important; + border-color: #999 !important; +} + +/* 버튼과 높이 균형 맞추기 */ +.comment-row { + display: flex; + align-items: flex-start !important; + gap: 12px; + width: 100%; + padding-right: 6px !important; +} + +/* 업로드 영역은 textarea 아래 줄에 단독 배치 */ +.upload-wrap { + display: block; + width: 100%; + margin-top: 8px; + margin-left: 12px !important; + margin-right: 12px !important; +} + +/* 미리보기 영역 정렬 */ +#previewArea { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 6px; +} + +#previewArea img { + width: 80px; + height: 80px; + border-radius: 6px; + object-fit: cover; +} + +#previewArea div { + display: inline-block; + width: 80px; + margin-right: 8px; + text-align: center; +} + +#previewArea div img { + border-radius: 6px; +} + +/*댓글 이미지 업로드 추가 20251114*/ +#commentImages { + display: none !important; +} + +.img-upload-btn { + display: inline-block; + padding: 6px 12px; + background: #005bac; + color: white; + font-size: 13px; + border-radius: 4px; + cursor: pointer; + border: 1px solid #004a8a; +} +.img-upload-btn:hover { + background: #004a8a; +} +.file-name { + margin-left: 8px; + font-size: 13px; + color: #666; +} + +/*Q&A 첨부파일 250821*/ +.attachments { + margin: 25px 0; + padding: 15px; + background: #f9fafc; + border: 1px solid #e1e4e8; + border-radius: 8px; +} +.attachments h3 { + margin: 0 0 12px; + font-size: 16px; + font-weight: 600; + color: #333; +} +.attachments ul { + list-style: none; + padding: 0; + margin: 0; +} +.attachments li { + margin-bottom: 8px; + padding: 6px 10px; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.2s; +} +.attachments li:hover { + background: #f0f7ff; +} +.attachments a { + text-decoration: none; + color: #0073e6; + font-weight: 500; +} +.attachments a:hover { + text-decoration: underline; +} +.attachments .meta { + font-size: 12px; + color: #777; + margin-left: 10px; +} + +/*Q&A 삭제버튼*/ +.post-actions { + margin-top: 20px; +} +.post-actions a, +.post-actions .btn-delete { + display: inline-block; + padding: 6px 14px; + border: 1px solid #ccc; + border-radius: 5px; + background: #f9f9f9; + color: #333; + text-decoration: none; + font-size: 14px; + margin-right: 6px; + cursor: pointer; + transition: background 0.2s; +} +.post-actions a:hover, +.post-actions .btn-delete:hover { + background: #f0f0f0; +} + +.edit-input { + background: #fff; + border: 1px solid #ccc; + padding: 5px; + border-radius: 4px; + width: 990px; /* 고정 길이로 꽉 채우기 */ + box-sizing: border-box; /* padding 포함 길이 계산 */ +} + +/*첨부파일 drag*/ +.drop-zone { + border: 2px dashed #bbb; + border-radius: 5px; + padding: 20px; + text-align: center; + color: #999; + cursor: pointer; +} +.drop-zone.dragover { + border-color: #333; + background: #f0f0f0; +} +#file-list { + list-style: none; + margin-top: 10px; + padding: 0; +} +#file-list li { + padding: 5px; + border-bottom: 1px solid #eee; + font-size: 14px; +} + +/*Q&A detail status select box 위치 수정 250826*/ +.title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.title-left { + display: flex; + align-items: center; + gap: 8px; /* 카테고리와 제목 사이 간격 */ +} + +.title-left .cate { + display: inline-block; + padding: 2px 6px; + font-size: 0.85rem; + color: #666; + border: 1px solid #ccc; + border-radius: 4px; + background: #f8f8f8; + margin-top: 3px; + padding-right: 1px; +} + +.title-left .tit { + font-size: 1.2rem; + font-weight: bold; +} + +.title-right { + margin-left: auto; +} + +.faq .tbl-area .title-right .status { + flex-direction: row-reverse; + color: #555; + margin-top: 10px; + display: flex; + align-items: right; + justify-content: center; + font-size: 15px; + min-width: max-content; + align-self: flex-start; + padding-right: 1px; +} + +/*status 색상 구분*/ +.status-select { + font-weight: 600; +} + +/* 상태 select 박스 스타일 */ +.status-select.status-new { + color: #ef4444; /* 빨강 글씨 */ +} + +.status-select.status-review, +.status-select.status-inspect, +.status-select.status-patch { + color: #111827; /* 검정 글씨 */ +} + +.status-select.status-done { + color: #38b000; /* 연초록 */ +} + +/*Q&A 이미지 업로드 시 비율 고정 250827*/ +.qa-detail .content img { + max-width: 100%; /* 부모 영역 너비를 넘지 않게 */ + height: auto; /* 비율 유지 */ + display: block; /* 블록 요소로 */ + margin: 10px 0; /* 위아래 여백 */ +} + +/*새글 new 표시 250828*/ +.new-label { + font-size: 0.75rem; + font-weight: bold; + color: #ff9800; /* 오렌지 색상 */ + margin-left: 4px; + vertical-align: middle; +} + +/*upload page delete effect*/ +.deleted-row td:nth-child(-n + 6) { + background-color: #f8d7da !important; /* 연한 빨강 */ +} +.deleted-label { + font-weight: bold; + color: #d00; +} + +/* ✅ 업로드 버튼 전용 스타일 */ +.menu_upload { + display: inline-block; + margin-left: 12px; + vertical-align: middle; +} +.menu_upload img { + width: 24px; + height: 24px; + cursor: pointer; + transition: opacity 0.2s ease; +} +.menu_upload img:hover { + opacity: 0.7; +} + +/*회원가입 추가정보 입력 안내 팝업창*/ +#join_step_3 { + position: relative; /* 기준 잡기 */ +} + +.warn-popup { + position: absolute; /* 부모 기준 */ + top: 50%; /* 세로 중앙 */ + left: 50%; /* 가로 중앙 */ + transform: translate(-50%, -50%); + background: #1c3b2d; + color: #fff; + padding: 20px 25px; + border-radius: 8px; + max-width: 400px; + width: 90%; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + z-index: 500; /* fieldset 위에 */ + text-align: center; +} +.warn-popup h3 { + margin: 0 0 10px; + font-size: 15px; + font-weight: bold; + text-align: center; +} +.warn-popup p { + margin: 0; + font-size: 14px; + line-height: 1.6; + text-align: center; +} +.warn-popup .btn-close-warn { + position: absolute; + top: 8px; + right: 12px; + background: none; + border: none; + color: #fff; /* 👈 흰색으로 변경 */ + font-size: 20px; + font-weight: bold; + cursor: pointer; + line-height: 1; +} +.warn-popup .btn-close-warn:hover { + opacity: 0.8; +} +.warn-popup.show { + opacity: 1; +} + +/*회원가입 회원정보 미입력 안내문구 250908*/ +.addinfo-side-notice { + position: absolute; + left: 10px; /* 왼쪽 위치 */ + bottom: 300px; /* 아래 위치 */ + width: 390px; + max-width: calc(100% - 20px); + background: rgba(199, 15, 15, 0.6); + color: #fff; + padding: 15px; + border-radius: 8px; + font-size: 14px; + line-height: 1.5; + z-index: 9; +} +.addinfo-side-notice .btn-close-warn { + position: absolute; + top: 8px; + right: 12px; + background: none; + border: none; + color: #fff; + font-size: 20px; + font-weight: bold; + cursor: pointer; + line-height: 1; + z-index: 9; +} +.addinfo-side-notice h3 { + font-size: 15px; + margin-bottom: 8px; + font-weight: bold; +} +.addinfo-side-notice p { + word-break: keep-all; +} +/* pagination.css */ + +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30px 0; + gap: 12px; +} + +.pagination a, +.pagination span { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + text-decoration: none; + color: #333; + font-size: 14px; +} + +.pagination a:hover { + background-color: #f0f0f0; + border-radius: 30px; +} + +.pagination .current { + background-color: #000; /* 🔥 원하는 색상으로 */ + color: #fff; + border-radius: 30px; +} + +.pagination .prev, +.pagination .next { + width: 32px; + height: 32px; + text-indent: -9999px; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + background-size: auto; +} + +.pagination .prev { + background-image: url("../img/ico_pg_left.svg"); +} + +.pagination .next { + background-image: url("../img/ico_pg_right.svg"); +} + +/*영업관리 버튼 20251114*/ +.btn-sales { + padding: 7px 12px; + background: #0074d9; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 13px; + margin-left: 10px; +} +.btn-sales:hover { + background: #005fa3; +} diff --git a/kngil/css/faq/faq_theme_style.css b/kngil/css/faq/faq_theme_style.css new file mode 100644 index 0000000..68b933a --- /dev/null +++ b/kngil/css/faq/faq_theme_style.css @@ -0,0 +1,33 @@ +@charset "utf-8"; + +#bo_cate {margin-bottom:28px} +#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} +#bo_cate ul {zoom:1} +#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""} +#bo_cate li {display:inline-block;padding:2px} +#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3} +#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff} +#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd; +-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202); +-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202); +box-shadow:inset 0 2px 5px rgb(33, 135, 202)} + +#faq_wrap {margin:10px 0 30px} +#faq_wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} +.faq_admin {text-align:right} +#faq_wrap ol {margin:0;padding:0;list-style:none} +#faq_wrap li {border-bottom:1px solid #ececec;background:#fff;position:relative} +#faq_wrap li:first-child {border-top:1px solid #ececec} +#faq_wrap li h3 {min-height:50px;line-height:30px;padding:15px;padding-left:50px;position:relative} +#faq_wrap li h3 .tit_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#c5cdd8;font-size:1.2em} +#faq_wrap li h3 .tit_bg {display:inline-block;position:absolute;top:15px;left:15px;text-align:center;color:#000;font-size:1.6em} +#faq_wrap li h3.faq_li_open a {color:#3a8afd} + +#faq_con .con_inner {display:none;padding:5px 5px 20px 50px} +#faq_con .con_inner .tit_bg {display:inline-block;position:absolute;top:10px;left:10px;text-align:center;background:#777;color:#fff;border-radius:50%;width:30px;line-height:30px;height:30px} +#faq_con .con_inner .closer_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#3a8afd;font-size:1.2em} + +#faq_sch {background:#f7f7f7;padding:30px;text-align:center;margin:0 0 10px} +#faq_sch .sch_tit {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} +#faq_sch .frm_input {border:1px solid #d0d3db;width:300px;height:45px;border-radius:0;border-radius:3px} +#faq_sch .btn_submit {padding:0 10px;height:45px;width:88px;font-size:1.083em;font-weight:bold;color:#fff;background:#434a54} diff --git a/kngil/css/lib/aos.min.css b/kngil/css/lib/aos.min.css new file mode 100644 index 0000000..66923fe --- /dev/null +++ b/kngil/css/lib/aos.min.css @@ -0,0 +1 @@ +[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} \ No newline at end of file diff --git a/kngil/css/lib/jquery.mCustomScrollbar.min.css b/kngil/css/lib/jquery.mCustomScrollbar.min.css new file mode 100644 index 0000000..6cd1177 --- /dev/null +++ b/kngil/css/lib/jquery.mCustomScrollbar.min.css @@ -0,0 +1 @@ +.mCustomScrollbar{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}.mCustomScrollbar.mCS_no_scrollbar,.mCustomScrollbar.mCS_touch_action{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:0;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside>.mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)} \ No newline at end of file diff --git a/kngil/css/lib/lenis.min.css b/kngil/css/lib/lenis.min.css new file mode 100644 index 0000000..f8b4ffd --- /dev/null +++ b/kngil/css/lib/lenis.min.css @@ -0,0 +1 @@ +html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto !important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-smooth iframe{pointer-events:none} \ No newline at end of file diff --git a/kngil/css/lib/swiper11.min.css b/kngil/css/lib/swiper11.min.css new file mode 100644 index 0000000..97443ed --- /dev/null +++ b/kngil/css/lib/swiper11.min.css @@ -0,0 +1,13 @@ +/** + * Swiper 11.2.5 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * https://swiperjs.com + * + * Copyright 2014-2025 Vladimir Kharlampidi + * + * Released under the MIT License + * + * Released on: March 3, 2025 + */ + + @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} \ No newline at end of file diff --git a/kngil/css/qa/font-awesome.min.css b/kngil/css/qa/font-awesome.min.css new file mode 100644 index 0000000..3ae811f --- /dev/null +++ b/kngil/css/qa/font-awesome.min.css @@ -0,0 +1,4 @@ +/*! + * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */@font-face{font-family:'FontAwesome';src:url('/kngil/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('/kngil/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('/kngil/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('/kngil/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('/kngil/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('/kngil/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} diff --git a/kngil/css/qa/qa_font.css b/kngil/css/qa/qa_font.css new file mode 100644 index 0000000..096ea3f --- /dev/null +++ b/kngil/css/qa/qa_font.css @@ -0,0 +1,49 @@ +@charset "utf-8"; +@font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 100; + src: url(/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff2) format('woff2'), + url(/kngil/fonts/qa/font/NotoKR-Thin/notokr-thin.woff) format('woff'), + url(/kngil/fonts/qa/font/NotoKR-Thin/notokr-thin.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 300; + src: url(/kngil/fonts/qa/NotoKR-Light/notokr-light.woff2) format('woff2'), + url(/kngil/fonts/qa/NotoKR-Light/notokr-light.woff) format('woff'), + url(/kngil/fonts/qa/NotoKR-Light/notokr-light.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 400; + src: url(/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff2) format('woff2'), + url(/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff) format('woff'), + url(/kngil/fonts/qa/NotoKR-Regular/notokr-regular.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 500; + src: url(/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff2) format('woff2'), + url(/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff) format('woff'), + url(/kngil/fonts/qa/NotoKR-Medium/notokr-medium.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 700; + src: url(/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff2) format('woff2'), + url(/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff) format('woff'), + url(/kngil/fonts/qa/NotoKR-Bold/notokr-bold.otf) format('opentype'); + } + @font-face { + font-family: 'Noto Sans KR'; + font-style: normal; + font-weight: 900; + src: url(/kngil/fonts/qa/NotoKR-Black/notokr-black.woff2) format('woff2'), + url(/kngil/fonts/qa/NotoKR-Black/notokr-black.woff) format('woff'), + url(/kngil/fonts/qa/NotoKR-Black/notokr-black.otf) format('opentype'); + } diff --git a/kngil/css/qa/qa_reset.css b/kngil/css/qa/qa_reset.css new file mode 100644 index 0000000..d7d8cb6 --- /dev/null +++ b/kngil/css/qa/qa_reset.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +/* Reset */ +* {box-sizing: border-box;} +html, body, h1, h2, h3, h4, h5, h6, div, p, pre, code, address, ul, ol, li, menu, nav, section, article, aside, +dl ,dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption {margin:0; padding:0;} +html, body {width:100%; height:100%; font-family: 'Noto Sans KR', sans-serif; } +body {background:#fff; min-width:360px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;} +body, input, select, textarea, button {background:none; border:none;} +button {background: none; cursor: pointer; user-select: none;} +ul, ol, li {list-style:none;} +table {width:100%;border-spacing:0;border-collapse:collapse;} +img, fieldset {border:0;} +address, cite, code {font-style:normal;font-weight:normal;} +em {font-style:normal;font-weight:bold;} +i {font-style: normal;} +label, img, input, select, textarea, button {font-family:inherit; vertical-align:middle;} +caption, legend {line-height:0;font-size:1px;overflow:hidden;} +hr{display:none;} +main, header, section, nav, footer, aside, article, figure {display:block;} +a {color:inherit; text-decoration:none;} +a:hover {text-decoration:none;} +/* Form */ +input[type=text]::placeholder, input::-webkit-input-placeholder{font-weight:500; color:#bdbdbd;} +select:focus, +textarea:focus, +input:focus {border: 1; outline: none;} +input[type=text][readonly], +input[type=text][readonly]:focus {border:1;} +input[type=tel][readonly], +input[type=password][readonly], +input[type=email][readonly], +input[type=search][readonly], +input[type=tel][disabled], +input[type=text][disabled], +input[type=password][disabled], +input[type=search][disabled], +input[type=email][disabled] {border-color:#c0c0c0; color:#666; -webkit-appearance:none; font-size:16px;} +textarea[readonly], +textarea[disabled] {padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;} +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + + diff --git a/kngil/css/qa/qa_style.css b/kngil/css/qa/qa_style.css new file mode 100644 index 0000000..a9d9208 --- /dev/null +++ b/kngil/css/qa/qa_style.css @@ -0,0 +1,10333 @@ +@charset "utf-8"; +/* -------------공통적용------------- */ +/* 죄우 여백 필요시 최소 200px 입니다 (200px 이하 여백 사용 X -- 플로팅과 겹쳐요). */ +/* "js__"로 시작하는 클래스는 only 자바스크립트용입니다.*/ +/* XXXX js__넣어서 css 작성 금지 XXXX */ +/* --------------------------------- */ + +/* 공통적용 - 컬러 */ +:root { + --color-yellow: #ffc600; + --color-green: #007243; + --color-orange: #ff5c00; + --color-han_gr: #0e3c2e; + --color-han_br: #27241d; + --color-han_bgbr: #f6f4f2; + --color-primary: #1b7f63; + + --gradient-han_gr: linear-gradient( + 180deg, + #08251c 0%, + #208769 37%, + #08241c 81%, + #051612 100% + ); + --gradient-han_yelllow_border: linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} + +/* 공통적용 - 페이지설정 */ +html { + overflow-y: auto; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + letter-spacing: -0.04em; + scroll-behavior: smooth; + user-select: auto; +} +.wrapper { + width: 100%; +} +.container { + width: 100%; + max-width: 1920px; + margin: 0 auto !important; +} +.brk { + display: none; +} +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + transition: background-color 5000s ease-in-out 0s; + -webkit-transition: background-color 9999s ease-out; + -webkit-box-shadow: 0 0 0px 1000px #ffffff00 inset !important; +} +video::-webkit-media-controls { + display: none !important; +} + +/* 공통적용 - 스크롤 */ +::-webkit-scrollbar { + width: 12px; + height: 12px; +} +::-webkit-scrollbar-thumb { + background-color: #bbb; + background-clip: padding-box; + border: 2px solid transparent; + border-radius: 10px; +} + +/* 공통적용 - 텍스트 관련 */ +a { + color: inherit; +} +h2 { + font-size: 70px; + color: #fff; +} +.h_3 { + font-size: 20px; + font-weight: 400; + letter-spacing: -1px; +} +.h_4 { + font-size: 18px; + font-weight: 300; + letter-spacing: -1px; +} +.grand_tit { + font-size: 64px; + font-weight: 700; +} +.mid_tit { + font-size: 52px; + font-weight: 700; +} +.sub_tit { + font-size: 32px; + font-weight: 700; + color: var(--color-accent); + display: block; +} +.sub_text { + font-size: 20px; + line-height: 30px; + display: block; +} +font.egbim { + color: transparent; + background-repeat: no-repeat; + background-position: bottom 48% right; + margin-right: 2px; + padding: 0 1%; + white-space: nowrap; +} +.txt_border { + filter: drop-shadow(-1px 0 0 #000) drop-shadow(0 -1px 0 #000) + drop-shadow(1px 0 0 #000) drop-shadow(0 1px 0 #000); +} + +/* 공통적용 - ul li */ +ul { + line-height: 160%; +} +.value ul li { + position: relative; + text-indent: 16px; +} +.value ul li::before { + position: absolute; + content: ""; + top: 14px; + left: 0; + width: 5px; + height: 4px; + background-color: var(--color-accent); + transform: skew(-40deg); +} + +/* 공통적용 - 아이콘 관련 i */ +i { + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +i.egbim.k, +font.egbim.k { + background-image: url(../img/egbim_k.svg); +} +i.egbim.w, +font.egbim.w { + background-image: url(../img/egbim_w.svg); +} +i.egbim_obj.w { + background-image: url(../img/egbim_obj_w.svg); + width: 77px; + min-height: 12px; +} +i.egbim_obj.k { + background-image: url(../img/egbim_obj_k.svg); + width: 77px; + min-height: 12px; +} + +/* 공통적용 - 다이어그램 diagram_wrap */ +.diagram_wrap { + position: relative; +} +.diagram_wrap .dia_element { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +.diagram_wrap .dia_element .dia_tit { + font-size: 20px; + font-weight: 500; +} +.diagram_wrap .dia_element .dia_text { + font-size: 18px; + font-weight: 500; +} +.diagram_wrap .dia_element .line { + background-color: #ffffff; + position: absolute; +} +.diagram_wrap .dia_circles_wrap { + position: relative; + width: 300px; + aspect-ratio: 1/1; + z-index: 1; +} +.diagram_wrap .dia_circles_wrap::after { + position: absolute; + content: ""; + width: 110%; + aspect-ratio: 1/1; + border-radius: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px dashed var(--color-accent); + opacity: 0.5; + z-index: -1; +} +.diagram_wrap .dia_circles_wrap div[class^="circle_"] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.diagram_wrap .dia_circles_wrap .circle_belt { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + border: 1px solid #b6d0c9; + background: #f0f7f5; +} +.diagram_wrap .dia_circles_wrap .circle_core { + width: 80%; + aspect-ratio: 1/1; + border-radius: 50%; + background: linear-gradient(0deg, #123328 0%, #296b55 100%); + box-shadow: inset 0 0 0 1px #00000022; + filter: drop-shadow(-4px 8px 8px #00000033); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 32px; + font-weight: 700; + text-align: center; + color: #ffffff; +} +.diagram_wrap .dia_circles_wrap .circle_dash { + border: 1px dashed #b6d0c9; + width: 110%; + height: 110%; + border-radius: 50%; +} +.diagram_wrap .dia_circles_wrap .circle_dots { + width: 100%; + height: 100%; +} +.diagram_wrap .dia_circles_wrap .circle_dots.move { + top: 0; + left: 0; + opacity: 0.3; + animation-duration: 12s; + animation-iteration-count: infinite; + animation-name: dot-rotate; +} +.diagram_wrap .dia_circles_wrap .circle_dots.move .dot::after { + display: none; +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot { + position: absolute; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #3838384d; +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 50%; + left: -4px; + right: initial; + transform: translateY(-50%); +} +.diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: 50%; + left: initial; + right: -4px; + transform: translateY(-50%); +} +@keyframes dot-rotate { + 0% { + transform: rotate(0); + } + 25% { + transform: rotate(90deg); + } + 50% { + transform: rotate(180deg); + } + 75% { + transform: rotate(270deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* 공통적용 - 헤더 header */ +header { + width: 100%; + height: 100px; + padding: 0 48px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + background: linear-gradient(180deg, #00000033, transparent); +} +header h1 { + flex: 1; +} +header h1 a { + display: block; + width: 190px; + height: 36px; + background: url(../img/egbim_w.svg) center no-repeat; + background-size: contain; +} +header .menu_my, +header .menu_ham, +header .menu_admin { + padding: 10px; + position: relative; +} +header .menu_my_list { + display: flex; + background: #fff; + border-radius: 4px; + box-sizing: border-box; + border: 1px solid #131313; + position: absolute; + left: calc(25% - 60px); + top: 50px; + padding: 4px; +} +header .menu_my_list li { + width: 68px; + height: 32px; + text-align: center; + font-size: 13px; + font-weight: 500; + cursor: pointer; +} +header .menu_my_list li:hover { + background: var(--color-yellow); +} +header .menu_my_list li a { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +header .menu_my_list::before { + content: ""; + background: url(../img/tri_img.svg) no-repeat; + background-size: cover; + width: 12px; + height: 10px; + position: absolute; + top: -9px; + left: calc(50% - 6px); +} +header .menu_ham { + cursor: pointer; +} +header .menu_ham a { + display: block; + width: 32px; + height: 32px; + position: relative; +} +header .menu_ham a div { + width: 24px; + height: 2px; + position: absolute; + left: 4px; + background-color: #fff; + transition: 0.2s; +} +header .menu_ham a div:nth-child(1) { + top: 7px; +} +header .menu_ham a div:nth-child(2) { + top: 15px; +} +header .menu_ham a div:nth-child(3) { + bottom: 7px; +} + +/* 공통적용 - 플로팅메뉴 floating_menu */ +.floating_menu { + width: 82px; + height: 424px; + position: fixed; + top: 96px; + right: 0px; + z-index: 20; + background: url("../img/floating_bg_r4.png"); + background-size: cover; + padding: 52px 0 44px; +} +.floating_menu ul { + width: 100%; + height: 100%; + display: flex; + justify-content: space-evenly; + align-items: stretch; + flex-direction: column; +} +.floating_menu li { + height: 100%; + display: flex; + align-items: center; +} +.floating_menu li a { + width: 100%; + text-align: center; + display: block; + padding-left: 6px; +} +.floating_menu li span { + display: block; + color: #ffffff; + font-weight: 400; + text-align: center; + font-size: 14px; +} +.floating_menu li a:hover span { + color: var(--color-yellow); + font-weight: 500; +} +.floating_menu li a i { + width: 28px; + aspect-ratio: 1/1; + margin: 0 auto; +} +.floating_menu li.floating_buy a i { + background-image: url(../img/ico_floating_buy.svg); +} +.floating_menu li.floating_faq a i { + background-image: url(../img/ico_floating_faq.svg); +} +.floating_menu li.floating_download a i { + background-image: url(../img/ico_floating_download.svg); +} +.floating_menu li.floating_guide a i { + background-image: url(../img/ico_floating_book.svg); +} +.floating_menu li.floating_download a:hover i { + background-image: url(../img/ico_floating_download_on.svg); +} +.floating_menu li.floating_buy a:hover i { + background-image: url(../img/ico_floating_buy_on.svg); +} +.floating_menu li.floating_faq a:hover i { + background-image: url(../img/ico_floating_faq_on.svg); +} +.floating_menu li.floating_guide a:hover i { + background-image: url(../img/ico_floating_book_on.svg); +} + +/* 공통적용 - 푸터 footer */ +footer { + width: 100%; + background: #14100c; + padding: 16px 60px; + box-sizing: border-box; + color: #fff; +} +footer.footer_on { + display: block; + animation: footer_up 0.3s ease forwards; + position: relative; + z-index: 100; +} +footer .footer_wrap { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + gap: 40px; +} +footer .ceo { + font-size: 14px; + color: #ffffff80; +} +footer .ceo em { + font-weight: 500; + font-size: 18px; + margin-left: 4px; +} +footer .comp_inner { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + width: 100%; + gap: 8px; +} +footer .comp_box { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; +} +footer .btn_privacy { + font-size: 18px; + color: #ffffff80; + font-weight: 500; +} +footer .btn_privacy em { + margin-right: 40px; + position: relative; + font-weight: 500; + color: #ffffff; + opacity: 0.9; +} +footer .btn_privacy em::after { + position: absolute; + content: "|"; + font-weight: 300; + font-size: 16px; + color: #aaa; + top: 1px; + right: -22px; +} +footer .btn_privacy a:hover { + color: #ffffff; +} +footer .footer_menu { + display: flex; + gap: 32px; + align-items: center; +} +footer .footer_menu li { + color: #fff; + font-weight: 500; + font-size: 20px; + white-space: nowrap; +} +footer .footer_menu li a:hover { + color: var(--color-primary); +} +footer .footer_sitemap { + font-size: 18px; + color: #ccc; + display: flex; + gap: 12px; + align-items: center; +} +footer .footer_sitemap .tova_sns { + display: flex; + gap: 8px; + margin-left: 26px; +} +footer .footer_sitemap .tova_sns a { + width: 40px; + height: 40px; + background-color: #2c2121; + border-radius: 40px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} +footer .footer_sitemap .tova_sns a img { + opacity: 0.5; +} +footer .footer_sitemap .tova_sns a:hover { + background-color: #3d2d2d; +} +footer .footer_sitemap .tova_sns a:hover img { + opacity: 1; +} +footer .footer_sitemap .family_wrap { + position: relative; + display: flex; + flex-direction: column-reverse; +} +footer .footer_sitemap .family_btn { + background: #2c2121; + color: #fff; + font-size: 16px; + font-weight: 500; + padding: 8px 12px; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + width: 160px; +} +footer .footer_sitemap .family_btn i { + width: 12px; + aspect-ratio: 1/1; + background-image: url(../img/ico_angle.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transform: scaleY(-1); + transition: 0.2s; +} +footer .footer_sitemap:has(.family_on) .family_btn i { + transform: scaleY(1); +} +footer .footer_sitemap .family_list { + background: #fff; + width: 100%; + border-radius: 4px 4px 0 0; + padding: 0 10px; + box-sizing: border-box; + box-shadow: 0px -2px 10px #00000022; + display: none; + position: absolute; + bottom: 100%; +} +footer .footer_sitemap .family_list.family_on { + display: block; + z-index: 10000; +} +footer .footer_sitemap .family_list li { + padding: 4px 0; + border-bottom: 1px solid #ddd; +} +footer .footer_sitemap .family_list li { + color: #777; + width: 100%; + display: block; + font-size: 12px; +} +footer .footer_sitemap .family_list li a:hover { + color: #000; + font-weight: 500; +} +footer .comp_info { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 40%; + max-width: 240px; +} +footer .comp_info .logo_baron { + width: 100%; + min-width: 200px; + max-width: 200px; + height: 45px; + opacity: 0.8; +} +footer .comp_contact { + display: flex; + flex-direction: row; + justify-content: space-between; + width: max-content; + gap: 56px; +} +footer .copyright { + grid-row: 4; + color: #ffffff80; + font-size: 16px; + align-self: flex-start; + letter-spacing: 0; +} +footer .comp_copy { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 0px; + width: 100%; + white-space: nowrap; +} +footer .address { + color: #ffffffaa; + font-size: 16px; + display: flex; + flex-wrap: wrap; + gap: 2px 24px; + min-width: 60%; +} +footer .address em { + font-weight: normal; +} +footer .address em.tel { + letter-spacing: 0; +} + +@keyframes footer_up { + 0% { + bottom: -80px; + opacity: 0.8; + } + 100% { + bottom: 0px; + opacity: 1; + } +} +@keyframes footer_down { + 0% { + bottom: 0px; + opacity: 1; + } + 100% { + bottom: -100px; + opacity: 0; + display: none; + } +} +.btn_top { + position: fixed; + bottom: 60px; + right: 60px; + z-index: 10; + width: 60px; + height: 60px; + background-color: #14100c; + cursor: pointer; + border-radius: 50%; + opacity: 0; +} +.btn_top::before { + content: ""; + background: #fff; + width: 30px; + height: 2px; + display: block; + position: absolute; + top: 12px; + left: calc(50% - 15px); + border-radius: 20px; +} +.btn_top .arrow { + width: 2px; + height: 32px; + background-color: #fff; + position: absolute; + bottom: 8px; + left: 50%; + border-radius: 20px; +} +.btn_top .arrow::after, +.btn_top .arrow::before { + position: absolute; + content: ""; + width: 16px; + height: 2px; + background-color: #fff; + top: 6px; + left: 50%; +} +.btn_top .arrow::after { + transform: translateX(calc(-50% + 6px)) rotate(45deg); +} +.btn_top .arrow::before { + transform: translateX(calc(-50% - 6px)) rotate(-45deg); +} +.btn_top:hover .arrow { + bottom: 14px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn_top:hover:before { + background: var(--color-yellow); +} +.btn_top:hover .arrow::after, +.btn_top:hover .arrow::before { + bottom: 8px; + background-color: var(--color-yellow); + transition: 0.2s; +} +.btn_top.topbtn_off { + transition: opacity 0.3s; + opacity: 0; +} +.btn_top.topbtn_on { + transition: opacity 0.3s; + opacity: 1; +} + +.main .btn_top.topbtn_off { + visibility: hidden; +} + +/* 공통적용 - 인트로 intro */ +.intro { + display: flex; + flex-direction: column; + gap: 96px; + padding-bottom: 120px; + position: relative; +} +.intro::after { + position: absolute; + white-space: pre; + font-weight: 900; + letter-spacing: -0.04em; + line-height: 85%; +} +.intro .top { + width: 100%; + height: 480px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.intro .top span { + color: #fff; + font-size: 22px; +} +.intro .keyword { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 42px; + text-align: center; +} +.intro .keyword span { + font-weight: 700; + font-size: 32px; +} +.intro .keyword p { + font-size: 20px; +} + +/* 공통적용 - 왼쪽고정페이지 */ +.layout_fix_left { + width: 100%; + display: flex; + position: relative; +} +.layout_fix_left .left { + min-width: 700px; + height: 200%; /* height: 100vh; */ + padding: 100px 0 0 200px; + position: sticky; + top: 0; + left: 0; + overflow: hidden; +} +.layout_fix_left .left .bg { + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 0; + left: 0; + z-index: -2; +} +.layout_fix_left .left .bg.on { + z-index: -1; +} +.layout_fix_left .left .mid_tit { + color: #fff; + display: block; + opacity: 0.5; +} +.layout_fix_left .left .mid_tit.on { + opacity: 1; +} +.layout_fix_left .right { + width: 100%; + max-width: 1373px; +} + +/* 공통적용 - 마우스 스크롤 마크 */ +.mouse_mark { + position: fixed; + width: 64px !important; + height: 64px !important; + display: flex; + justify-content: center; + align-items: center; + background-color: #007243cc; + border-radius: 50%; + transform: translate(-65%, -65%) !important; + pointer-events: none; + z-index: 100; + transition: opacity 0.2s; +} +.mouse_mark span { + position: relative; + letter-spacing: 0.07rem; + font-size: 10px; + font-weight: 700; + color: #fff; +} +.mouse_mark span::before, +.mouse_mark span::after { + content: ""; + width: 4px; + height: 4px; + display: block; + position: absolute; + left: calc(50% - 2px); + border: solid #ffffff; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 1.5s infinite ease; +} +.mouse_mark span::before { + bottom: -10px; +} +.mouse_mark span::after { + bottom: -16px; + animation-delay: 0.35s; +} +@keyframes arrow { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + margin-top: 10px; + } +} + +/* 여기서부터 개별페이지 */ +/* --------------------------------- */ +/* 메인 index */ +/* --------------------------------- */ +.wrapper:has(.main) { + overflow: hidden; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.intro_wrap { + position: absolute; + width: 100%; + height: 100%; + background: #fff; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} +.intro_wrap .intro_txt .txt_mask { + overflow: hidden; +} +.intro_wrap .intro_txt .txt_mask span { + display: block; + font-size: 56px; + text-align: center; + position: relative; + top: 80px; +} +.intro_wrap .intro_txt .txt_mask font { + font-size: 36px; +} +.intro_wrap .intro_txt .txt_mask:nth-child(1) span { + animation: txt_mask 1s ease 0s forwards; +} +.intro_wrap .intro_txt .txt_mask:nth-child(2) span { + animation: txt_mask 1s ease 0.1s forwards; +} +.intro_wrap .intro_txt .txt_mask:nth-child(3) span { + animation: txt_mask 1s ease 0.2s forwards; +} +@keyframes txt_mask { + 0% { + top: 80px; + opacity: 0; + } + 100% { + top: 0px; + opacity: 1; + } +} +.main_mask { + position: absolute; + width: 100%; + height: 100%; + z-index: 100; + top: -150px; + clip-path: inset(50% 50% round 10px 10px 10px 10px); + animation: clip_play 2.5s ease 1s 1 forwards; +} +@keyframes clip_play { + 0% { + clip-path: inset(50% 50% round 10px 10px 10px 10px); + top: -150px; + } + 30% { + clip-path: inset(49.5% 45% round 10px 10px 10px 10px); + top: -150px; + } + 60% { + clip-path: inset(45% 45% round 10px 10px 10px 10px); + top: -193px; + } + 100% { + clip-path: inset(0% 0% round 0px 0px 0px 0px); + top: 0; + } +} +.main_mask.skip { + animation: none; + clip-path: none; + top: 0; +} +.main { + width: 100%; + height: 100%; +} +.main .pagination_main { + display: flex; + flex-direction: column; + gap: 24px; + color: #fff; + font-weight: 700; + font-size: 17px; + text-align: center; + position: absolute; + bottom: calc((130 / 1080) * 100%); + right: 24px; + z-index: 1; + text-indent: 0; + transition: bottom 0.2s ease; +} +.main .pagination_main::before { + content: " "; + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + display: block; + width: calc(100% + 54px); + height: calc(100% + 48px); + pointer-events: none; + + /* 중앙 0.4, 외곽으로 투명하게 */ + background: radial-gradient( + ellipse at center, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.2) 50%, + rgba(0, 0, 0, 0.2) 95%, + rgba(0, 0, 0, 0) 105% + ); + filter: blur(20px); + border-radius: 20px; + mix-blend-mode: multiply; +} +.main .pagination_main li { + display: flex; + justify-content: flex-end; + width: 100%; + gap: 8px; +} +.main .pagination_main li div { + width: max-content; + cursor: pointer; + position: relative; + text-align: right; +} +.main .pagination_main li img { + height: 1em; +} +.main .pagination_main li span { + display: block; + width: 1.5em; + font-size: 20px; + color: #ffffff99; + font-weight: 300; + margin-left: 8px; +} +.main .pagination_main li div::after { + content: ""; + display: block; + height: 2px; + background: var(--color-yellow); + margin-top: 6px; + opacity: 0; + position: absolute; + left: 0; +} +.main .pagination_main li .page_on::after { + opacity: 1; +} +.main .main_link { + width: 100%; + height: 100%; +} +.main .main_link a { + width: 100%; + height: 100%; + display: none; +} +.main .main_link .link_on { + display: block; +} +.main .bg_video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: -1; + background: #000; +} +.main .bg_video video { + height: 100%; + width: 100%; + object-fit: cover; +} +.main footer.footer_on { + position: absolute; + bottom: 0; + z-index: 100; + background: #14100ccc; +} +.main footer.footer_off { + animation: footer_down 0.2s ease forwards; + display: none; +} +.main footer .footer_close { + background: url("../img/ico_footer_close.svg") no-repeat; + background-size: cover; + background-position: center; + position: absolute; + width: 40px; + height: 36px; + top: -36px; + left: 0; + cursor: pointer; +} +/* 페이지네이션 재생바 - 영상별로 재생시간 각각 설정해야함 */ +.main .pagination_main .page_01.page_on::after { + animation: page_play 16s linear 1 forwards; +} +.main .pagination_main .page_02.page_on::after { + animation: page_play 11s linear 1 forwards; +} +.main .pagination_main .page_03.page_on::after { + animation: page_play 24s linear 1 forwards; +} +.main .pagination_main .page_04.page_on::after { + animation: page_play 16s linear 1 forwards; +} +.main .pagination_main .page_05.page_on::after { + animation: page_play 13s linear 1 forwards; +} +.main .pagination_main.m .page_01.page_on::after { + animation: page_play 15s linear 1 forwards; +} +.main .pagination_main.m .page_02.page_on::after { + animation: page_play 07s linear 1 forwards; +} +.main .pagination_main.m .page_03.page_on::after { + animation: page_play 19s linear 1 forwards; +} +.main .pagination_main.m .page_04.page_on::after { + animation: page_play 13s linear 1 forwards; +} +.main .pagination_main.m .page_05.page_on::after { + animation: page_play 10s linear 1 forwards; +} +@keyframes page_play { + 0% { + width: 0%; + } + 100% { + width: 100%; + } +} + +/* --------------------------------- */ +/* TOVA소개 value */ +/* --------------------------------- */ +.value .intro { + background-image: url(../img/value_introbg.png); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + color: #fff; + padding-bottom: 370px; +} +.value .intro .top { + height: 240px; + margin-top: 150px; +} +.value .intro .keyword i.egbim_obj.w { + width: 77px; + height: 12px; +} + +.value .intro .diagram_wrap { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; + position: relative; +} +.value .intro .dia_element_wrap { + width: 100%; + position: absolute; + display: flex; + gap: 50px; + z-index: 10; + top: 0; + justify-content: center; + align-items: flex-start; + margin-top: 150px; +} +.value .intro .dia_element { + display: flex; +} +.value .intro .dia_element:nth-child(1) { + flex-direction: row-reverse; + margin-top: 7px; +} +.value .intro .dia_element:nth-child(2) { + flex-direction: column; + margin-top: 260px; +} +.value .intro .dia_element:nth-child(3) { + flex-direction: row; +} +.value .intro .dia_element .dia_tit { + width: 150px; + aspect-ratio: 1/1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} +.value .intro .dia_element:nth-child(1) .dia_tit { + background: linear-gradient(180deg, #fde0c080 0%, #b0917000 100%), + url(../img/dia_valuebg01.png), + linear-gradient(180deg, #583c1c 0%, #583c1c 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_element:nth-child(2) .dia_tit { + background: linear-gradient(180deg, #48d7ac80 0%, #86b6a800 100%), + url(../img/dia_valuebg02.png), + linear-gradient(180deg, #119d49 0%, #119d49 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_element:nth-child(3) .dia_tit { + background: linear-gradient(180deg, #92929280 0%, #92929280 100%), + url(../img/dia_valuebg03.png), + linear-gradient(180deg, #ed7d31 0%, #ed7d31 100%); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: hard-light, multiply, normal; +} +.value .intro .dia_tit span { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; + line-height: 120%; + border: 6px solid #00000033; + border-radius: 50%; + padding: 0 20px; +} +.value .intro .dia_li { + padding: 16px; + border-radius: 10px; + width: 248px; +} +.value .intro .dia_element:nth-child(1) .dia_li { + background: linear-gradient(180deg, #583c1cb3 0%, #583c1c 100%); +} +.value .intro .dia_element:nth-child(2) .dia_li { + background: linear-gradient(180deg, #00583e 0%, #00583e99 100%); + border: 1px solid #08181399; +} +.value .intro .dia_element:nth-child(3) .dia_li { + background: linear-gradient(180deg, #bb5f09 0%, #bb5f09cc 100%); +} +.value .intro .dia_element .dia_line { + height: 1px; + width: 10px; + display: block; +} +.value .intro .dia_element:nth-child(1) .dia_line { + background: #583c1c; +} +.value .intro .dia_element:nth-child(2) .dia_line { + background: #01593e; + width: 1px; + height: 10px; +} +.value .intro .dia_element:nth-child(3) .dia_line { + background: #df6c01; +} +.value .intro .dia_li li { + list-style: disc; + text-indent: 0; + font-size: 18px; + line-height: 28px; + margin-left: 24px; + margin-bottom: 4px; +} +.value .intro .dia_li li::before { + display: none; +} +.value .intro .dia_li li:last-child { + margin-bottom: 0; +} +.value .intro .dia_li li.dia_li_tit { + list-style: none; + font-weight: 500; + font-size: 20px; + margin-left: 0; + margin-bottom: 10px; +} +.value .intro .dia_appendix { + position: absolute; + bottom: -170px; + width: 100%; + height: 60%; + display: flex; + justify-content: center; + gap: 280px; +} +.value .intro .dia_appendix .app_bg { + width: 300px; + height: 100%; + background-repeat: no-repeat; + background-position: 50% bottom; + background-size: contain; + background-image: url(../img/value_arc.svg); + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} +.value .intro .dia_appendix .app_bg:nth-child(2) { + background-image: url(../img/value_arc_r.svg); +} +.value .intro .dia_appendix .app_etc { + background: linear-gradient(90deg, #583c1c 0%, #015e42 100%); + padding: 10px 32px; + border-radius: 50px; + border: 1px solid #000000cc; + display: inline-block; + transform: translate(-50px, 30px); +} +.value .intro .dia_appendix .app_bg:nth-child(2) .app_etc { + background: linear-gradient(90deg, #015e42 0%, #df6c00 100%); + transform: translate(50px, 30px); +} + +.value .intro .dia_circles_wrap { + width: 490px; + padding: 25px; + box-sizing: border-box; + border: 1px solid #ffffff33; + border-radius: 50%; +} +.value .intro .dia_circles_wrap .circle_dash { + border: none; +} +.value .intro .dia_circles_wrap .circle_belt { + background: none; +} +.value .intro .dia_circles_wrap .circle_core { + width: 90%; + line-height: 95%; + background: linear-gradient(-45deg, #ffffff10 0%, #ffffff00 100%), + linear-gradient(180deg, #007f5bb6 0%, #81410040 70%); + border: 1px dashed #ffffff66; +} +.value .intro .dia_circles_wrap .circle_core img { + width: 196px; +} +.value .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 20px; + font-weight: 400; +} +.value .intro .dia_circles_wrap .circle_dots { + opacity: 0; +} +.value .intro .dia_circles_wrap .circle_dots .dot { + background-color: #ffffff; + top: -4px; + right: 49%; + left: initial; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(1) { + animation-name: dot-rotate-road1; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(2) { + animation-name: dot-rotate-road2; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot:nth-child(3) { + animation-name: dot-rotate-road3; +} +.value .intro .dia_circles_wrap .circle_dots.move .dot { + animation-duration: 9s; + animation-iteration-count: infinite; + animation-timing-function: ease-out; + transform-origin: 2px 248px; +} +.value .intro .dia_circles_wrap .circle_dots.move { + opacity: 0.5; + animation: none; + left: 50%; + top: 50%; +} +@keyframes dot-rotate-road1 { + 0% { + transform: rotate(90deg); + } + 33% { + transform: rotate(180deg); + } + 66% { + transform: rotate(270deg); + } + 100% { + transform: rotate(450deg); + } +} + +@keyframes dot-rotate-road2 { + 0% { + transform: rotate(180deg); + } + 33% { + transform: rotate(270deg); + } + 66% { + transform: rotate(450deg); + } + 100% { + transform: rotate(540deg); + } +} + +@keyframes dot-rotate-road3 { + 0% { + transform: rotate(270deg); + } + 33% { + transform: rotate(450deg); + } + 66% { + transform: rotate(540deg); + } + 100% { + transform: rotate(630deg); + } +} + +.value .feature_intro { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + text-align: center; + position: relative; + overflow: hidden; + scroll-snap-align: center; + scroll-snap-stop: always; + background-image: url(../img/value_feature_bg.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.value .feature_intro .grand_tit { + width: 100%; +} +.value .feature_intro p { + font-size: 24px; + line-height: 160%; +} +.value .feature_intro .line { + width: 1px; + height: 500px; + position: absolute; + top: 65%; + left: calc(50% - 1px); + background-color: #aaa; +} +.value .feature_intro .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #555; + position: absolute; + top: 65%; + left: calc(50% - 3px); +} +.value .features { + width: 100%; + height: 100vh; + display: flex; + gap: 40px; + padding: 100px 20px 20px; + position: relative; + overflow: hidden; +} +.value .features .f_wrap { + width: 100%; + height: 100%; + border-radius: 0px; + padding: 0px 48px 32px 36px; + display: flex; + flex-direction: column; + gap: 24px; + justify-content: flex-end; + position: relative; + overflow: hidden; + transition: all 1s; + background-color: #000; + z-index: 1; +} +.value .features .f_wrap::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: all 1s; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + -webkit-mask-image: linear-gradient(#000000bb 0%, #00000011 100%); +} +.value .features .f_wrap i { + width: 48px; + aspect-ratio: 1/1; +} +.value .features .f_wrap .sub_tit { + color: #fff; +} +.value .features .f_wrap .sub_text { + width: 100%; + height: 240px; + color: #ffffff55; + font-weight: normal; + text-align: justify; + line-height: 32px; + transition: all 1s; +} +.value .features .f_wrap:hover { + padding-bottom: 100px; +} +.value .features .f_wrap:hover::before { + transform: scale(1.03); +} +.value .features .f_wrap:hover .sub_text { + color: #ffffff; +} +.value .features .interface::before { + background-image: url(../img/value_feature_interface_bg.png); +} +.value .features .tool::before { + background-image: url(../img/value_feature_tool_bg.png); +} +.value .features .floorplan::before { + background-image: url(../img/value_feature_floorplan_bg.png); +} +.value .features .bim::before { + background-image: url(../img/value_feature_bim_bg.png); +} +.value .features .interface i { + background-image: url(../img/ico_value_interface_w.svg); +} +.value .features .tool i { + background-image: url(../img/ico_value_tool_w.svg); +} +.value .features .floorplan i { + background-image: url(../img/ico_value_floorplan_w.svg); +} +.value .features .bim i { + background-image: url(../img/ico_value_bim_w.svg); +} +.value .features .lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} +.value .features .lines.move_ani * { + animation-duration: 1s; + animation-fill-mode: both; + position: absolute; +} +.value .features .lines.move_ani div[class^="v"] { + top: 80px; + border-left: 1px solid #aaa; + width: 1px; + height: 0; +} +.value .features .lines.move_ani div[class^="d"] { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #555; +} +.value .features .lines.move_ani .h { + border: 1px solid #aaa; + top: 80px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: calc(100% - 80px); + border-left: 0; + border-right: 0; + animation-name: h-draw; +} +.value .features .lines.move_ani .v1 { + left: calc(50% - 1px); + animation-name: v-center; +} +.value .features .lines.move_ani .v2 { + left: 25%; + animation-name: v-side; +} +.value .features .lines.move_ani .v3 { + left: 75%; + animation-name: v-side; +} +.value .features .lines.move_ani .d1 { + animation-name: dot-center; +} +.value .features .lines.move_ani .d2 { + animation-name: dot-side-left; +} +.value .features .lines.move_ani .d3 { + animation-name: dot-side-right; +} +@keyframes h-draw { + 0% { + width: 0; + } + 30% { + width: 0; + } + 70% { + width: 50%; + } + 100% { + width: 100%; + } +} + +@keyframes v-center { + 0% { + top: 0; + } + 30% { + top: 0; + height: 80px; + } + 100% { + top: 0; + height: 100%; + } +} + +@keyframes v-side { + 0% { + height: 0; + } + 70% { + height: 0; + } + 100% { + height: 100%; + } +} + +@keyframes dot-center { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } +} + +@keyframes dot-side-left { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 70% { + top: calc(80px - 3px); + left: calc(25% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(25% - 3px); + } +} + +@keyframes dot-side-right { + 0% { + top: 0; + left: calc(50% - 3px); + } + 30% { + top: calc(80px - 3px); + left: calc(50% - 3px); + } + 70% { + top: calc(80px - 3px); + left: calc(75% - 3px); + } + 100% { + top: calc(80px - 3px); + left: calc(75% - 3px); + } +} + +.value .system_bg { + width: 100%; + height: 0; + position: sticky; + top: 0; + left: 0; + z-index: -1; +} +.value .system_bg::after { + position: absolute; + content: ""; + width: 100%; + height: 1200px; + background-image: url(../img/value_system_bg.png); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; +} +.value .system { + width: 100%; + height: 1100px; + overflow: hidden; + position: relative; +} +.value .system .system_tit { + width: 100%; + height: 300px; + background-color: #fff; + padding-left: 200px; +} +.value .system .system_tit span { + display: block; + transform: translateY(141%); + font-size: 88px; + line-height: 90%; + font-weight: 900; + color: #3c3631; +} +.value .system .system_tit span em { + color: #fff; +} +.value .system .diagram_wrap { + width: 360px; + aspect-ratio: 1/1; + position: absolute; + bottom: 130px; + right: 24%; +} +.value .system .diagram_wrap .dia_circles_wrap { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; +} +.value .system .diagram_wrap .dia_circles_wrap::after { + border: 1px solid #fff; + background-color: #604f324d; + mix-blend-mode: color-burn; + width: 120%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_belt { + background: none; + border: 1px dashed #ffffff66; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core { + background: none; + box-shadow: none; + width: 100%; + height: 100%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 0px; + font-size: 20px; + font-weight: 300; + line-height: 70%; + border-radius: 50%; + width: 50%; + height: 50%; + color: #fff; + box-shadow: 0 1px 4px #00000077; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span b { + font-size: 24px; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(1) { + background: linear-gradient(180deg, #296b55 0%, #124133cc 100%); + border: 2px solid #17503dcc; + top: 0; + z-index: 2; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(2) { + background: linear-gradient(180deg, #352d1dcc 0%, #1d1810 100%); + border: 2px solid #352d1dcc; + bottom: 11%; + left: 4%; + z-index: 0; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(3) { + background: linear-gradient(-60deg, #eb5f00 0%, #bc4c0080 100%); + border: 2px solid #f67a2780; + bottom: 11%; + right: 4%; + z-index: 1; + background-clip: content-box; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_core span:nth-child(4) { + top: 7%; + right: -18%; + box-shadow: none; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot { + background-color: #fff; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots.move { + animation-name: dot-rotate3; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 0; + left: calc(50% - 4px); +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: initial; + bottom: 23%; + left: 6%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(3) { + top: initial; + bottom: 23%; + right: 6%; +} +.value .system .diagram_wrap .dia_circles_wrap .circle_dots .dot:nth-child(4) { + top: 32%; + left: initial; + right: -9%; +} +@keyframes dot-rotate3 { + 0% { + transform: rotate(0); + } + 35% { + transform: rotate(120deg); + } + 70% { + transform: rotate(240deg); + } + 100% { + transform: rotate(360deg); + } +} +.value .system .diagram_wrap .dia_element { + position: absolute; + display: initial; +} +.value .system .diagram_wrap .dia_element .dia_text { + color: #fff; +} +.value .system .diagram_wrap .dia_element .dia_text li { + text-indent: 0; +} +.value .system .diagram_wrap .dia_element .dia_text li::before { + display: none; +} +.value .system .diagram_wrap .dia_element:nth-child(1) .dia_text { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 24px; + text-align: right; + width: max-content; +} +.value .system .diagram_wrap .dia_element:nth-child(1) { + width: max-content; + top: -50%; + left: 50%; + transform: translateX(-50%); +} +.value .system .diagram_wrap .dia_element:nth-child(2) { + width: max-content; + bottom: -6%; + right: 118%; + text-align: right; +} +.value .system .diagram_wrap .dia_element:nth-child(3) { + width: max-content; + bottom: -6%; + left: 118%; +} +.value .system .diagram_wrap .dia_element:nth-child(4) { + width: max-content; + top: 29.5%; + left: 117%; +} +.value .system .diagram_wrap .dia_element .line { + position: absolute; + width: 80px; + height: 1px; + background-color: #fff; + z-index: 10; +} +.value .system .diagram_wrap .dia_element:nth-child(1) .line { + width: 1px; + height: 80px; + bottom: -80px; + left: 50%; + transform: translateX(-50%); +} +.value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: 51px; + right: -94px; + transform: rotate(-30deg); +} +.value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: 26px; + left: -94px; + transform: rotate(30deg); +} +.value .system .diagram_wrap .dia_element:nth-child(4) .line { + width: 24px; + top: 12px; + left: -30px; +} + +/* --------------------------------- */ +/* 인터페이스 interface */ +/* --------------------------------- */ +.interface .sub_text { + text-align: justify; + line-height: 1.4em; +} +.interface .intro .top { + background-image: url(../img/interface_intro_bg.png); +} + +.interface .route { + width: 100%; + height: 100%; + position: relative; +} +.interface .route .fix { + position: sticky; + top: 0; + left: 0; + z-index: 0; + display: flex; + flex-direction: column; + align-items: center; + padding: 0px 120px; + background: url(../img/interface_route_bg.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + height: 100vh; + justify-content: space-around; +} +.interface .route .keyword { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + text-align: center; + height: max-content; +} +.interface .route .keyword span { + font-weight: 700; + font-size: 32px; +} +.interface .route .keyword p { + font-size: 20px; +} +.interface .route div { + width: 100%; + height: 100vh; + font-size: 30px; +} +.interface .route #sec1 { + height: 50vh; +} +.interface .route #sec2 { + height: 100vh; +} +.interface .route #sec3 { + height: 200vh; +} +.interface .route .content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + height: max-content; + gap: 64px; +} +.interface .route .subs { + width: 40%; + min-width: 470px; + height: max-content; + padding-top: 52px; +} +.interface .route .subs li .sub_tit { + font-size: 120px; + font-weight: 900; + color: #000000; + position: absolute; + right: -84px; + top: -56px; + text-align: right; + letter-spacing: -8px; + opacity: 0.05; + white-space: nowrap; +} +.interface .route .subs li .mid_tit { + font-size: 52px; + line-height: 120%; + display: inline-block; + height: fit-content; +} +.interface .route .subs li .mid_tit b { + color: var(--color-green); +} +.interface .route .subs li .sub_text { + margin-top: 32px; + line-height: 32px; + font-size: 20px; +} +.interface .route .subs li .sub_text ul { + margin-top: 24px; +} +.interface .route .subs li .sub_text ul li { + display: block; + text-indent: 16px; +} +.interface .route .subs li .sub_text ul li::before { + position: absolute; + content: ""; + top: 14px; + left: 0; + width: 5px; + height: 4px; + background-color: var(--color-green); + transform: skew(-40deg); +} +.interface .route .subs li { + display: none; + position: relative; +} +.interface .route .subs li.on { + display: block; + animation: scrollUp 0.5s ease-in; +} +.interface .route .imgs { + width: 100%; + max-width: 960px; + aspect-ratio: 7/4; + display: flex; + justify-content: center; + position: relative; + background: url(../img/interface_route_screen.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center top; +} +.interface .route .imgs li { + height: 100%; + aspect-ratio: 7/4; + display: none; + text-align: right; + background-repeat: no-repeat; + position: relative; +} +.interface .route .imgs li.on { + display: block; + animation: scrollUp 0.5s ease-in; +} +.interface .route .imgs li span { + display: block; + width: fit-content; + height: fit-content; + background-color: var(--color-yellow); + border-radius: 4px; + padding: 2px 8px; + font-size: 14px; + font-weight: 700; + line-height: initial; + position: absolute; + text-align: center; + z-index: 1; +} +.interface .route .imgs li span::after { + position: absolute; + content: "●"; + width: 14px; + height: 1px; + top: 50%; + left: 100%; + background-color: var(--color-yellow); + color: var(--color-yellow); + font-size: 6px; + display: flex; + justify-content: flex-end; + align-items: center; +} +.interface .route .imgs li .img_box { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0%; + overflow: hidden; +} +.interface .route .imgs li .img_box object { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.interface .route .imgs li:nth-child(1) .img_box object { + top: -4%; + left: -1.5%; + height: 101%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(1) { + top: -4.2%; + left: 15%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(2) { + top: -4.2%; + right: 30%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(1)::after, +.interface .route .imgs li:nth-child(1) span:nth-child(2)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(1) span:nth-child(3) { + top: 94.5%; + left: 7.5%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(4) { + top: 94.5%; + right: 29.2%; +} +.interface .route .imgs li:nth-child(1) span:nth-child(3)::after, +.interface .route .imgs li:nth-child(1) span:nth-child(4)::after { + transform: rotate(-90deg); + top: -7px; + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(1) span:nth-child(5) { + top: 40.5%; + left: 42%; + background-color: #1f1e19; + color: #fff; + font-size: 24px; +} +.interface .route .imgs li:nth-child(1) span:nth-child(5)::after { + display: none; +} +.interface .route .imgs li:nth-child(2) .img_box object { + top: -2%; + left: -9.5%; + width: 107%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(1) { + top: 2.5%; + left: -10.8%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(2) { + top: 13.5%; + left: -4.1%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 77.5%; + left: 10%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 77.5%; + right: 30%; +} +.interface .route .imgs li:nth-child(2) span:nth-child(3)::after, +.interface .route .imgs li:nth-child(2) span:nth-child(4)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); +} +.interface .route .imgs li:nth-child(3) .img_box object { + top: 4%; + left: 8%; +} +.interface .route .imgs li:nth-child(3) span { + top: 18%; + right: 23.3%; +} + +@keyframes scrollUp { + 0% { + transform: translateY(40px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} + +.interface .dual { + width: 100%; +} +.interface .dual { + position: sticky; + top: 0; + left: 0; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + background-image: url(../img/interface_dual_bg.png); + background-size: contain; + background-position: top center; + background-repeat: no-repeat; +} +.interface .dual .dual_top #myimg { + width: 100%; + margin-top: 42px; + border-radius: 16px; +} +.interface .dual .sub_tit { + text-align: center; +} +.interface .dual .sub_tit b { + color: var(--color-green); +} + +.interface .dual .dual_top { + width: 100%; + padding: 160px 200px 0 200px; +} +.interface .dual .detail { + margin-top: 200px; + width: 100%; +} +.interface .dual .detail .sub_tit { + margin-bottom: 60px; +} +.interface .dual .detail .subs { + display: flex; + width: 100%; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0 200px; + margin-bottom: 120px; + gap: 24px; +} +.interface .dual .detail .element { + width: 100%; + padding: 28px 40px; + background: var(--color-han_bgbr); + border-radius: 12px; +} +.interface .dual .detail .exam { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + gap: 12px; +} +.interface .dual .detail .exam span { + font-size: 20px; + color: var(--color-green); + font-weight: 500; + margin-bottom: 8px; + display: block; +} +.interface .dual .detail .sub_text { + text-align: center; + margin-top: 24px; + font-size: 18px; + opacity: 0.85; +} + +/* --------------------------------- */ +/* 주요기능 primary */ +/* --------------------------------- */ +.primary .sub_text { + text-align: justify; + line-height: 1.4em; +} +.primary .intro::before { + position: absolute; + bottom: -4px; + right: 200px; + content: "Key\A Features"; + font-size: 120px; + opacity: 0.03; + text-align: right; + font-weight: 900; + white-space: pre; + line-height: 0.8em; + letter-spacing: -0.04em; +} +.primary .intro .top { + background-image: url(../img/primary_intro_bg.png); +} +.primary .intro .diagram_wrap { + width: 480px; + aspect-ratio: 1/1; + margin: 0 auto; + position: relative; + background-image: url(../img/atom_obj.svg); + background-repeat: no-repeat; + background-position: top center; + background-size: contain; +} +.primary .intro .diagram_wrap::after { + content: ""; + position: absolute; + width: 102.2%; + aspect-ratio: 1/1; + top: -6px; + left: 0; + background-image: url(../img/atom_line.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + mix-blend-mode: soft-light; +} +.primary .intro .diagram_wrap .dia_circles_wrap { + width: 100%; + z-index: -1; +} +.primary .intro .diagram_wrap .circle_core { + width: 52%; + aspect-ratio: 1/1; +} +.primary .intro .diagram_wrap .circle_core span { + font-size: 30px; + line-height: 36px; + width: 100%; + font-weight: 700; +} +.primary .intro .diagram_wrap .circle_dots .dot { + display: flex; + justify-content: center; + align-items: center; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(1) { + background: #afd7ca; + color: #afd7ca; + top: 7%; + left: 39%; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(2) { + background: #eaddce; + color: #eaddce; + top: 80.5%; + left: 20%; +} +.primary .intro .diagram_wrap .circle_dots .dot:nth-child(3) { + background: #f1d1c1; + color: #f1d1c1; + top: 62.5%; + right: 7%; +} +.primary .intro .diagram_wrap .circle_dots .dot::before { + content: ""; + width: inherit; + height: inherit; + border-radius: inherit; + position: absolute; + z-index: -10; + opacity: 0; + animation: 2s expand cubic-bezier(0.29, 0, 0, 1) infinite; + border: 2px solid; +} +@keyframes expand { + 0% { + width: 0; + height: 0; + opacity: 1; + } + 99% { + width: 500%; + height: 500%; + opacity: 0; + } + 100% { + opacity: 0; + border-color: transparent; + } +} +.primary .intro .diagram_wrap .dia_element { + position: absolute; + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 16px; + text-align: right; + font-size: 16px; +} +.primary .intro .diagram_wrap .dia_element i { + width: 40px; + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.primary .intro .diagram_wrap .e01 { + top: 0%; + left: -18%; +} +.primary .intro .diagram_wrap .e02 { + bottom: 6%; + left: -39%; +} +.primary .intro .diagram_wrap .e03 { + bottom: 32%; + right: -26%; + flex-direction: row; + text-align: left; +} +.primary .intro .diagram_wrap .e01 i { + background-image: url(../img/ico_pripary_my.svg); +} +.primary .intro .diagram_wrap .e02 i { + background-image: url(../img/ico_pripary_command.svg); +} +.primary .intro .diagram_wrap .e03 i { + background-image: url(../img/ico_pripary_civil.svg); +} + +.primary .route { + width: 100%; + height: 100%; + position: relative; + margin-bottom: 120px; +} +.primary .route > div { + width: 100%; + height: 100vh; + font-size: 30px; +} +.primary .route #sec1 { + position: absolute; + top: 0; +} +.primary .route .fix { + position: sticky; + top: 0; + left: 0; + z-index: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + overflow: hidden; + background: linear-gradient(#faf9f6 50%, transparent 50%); +} +.primary .route .fix > * { + width: 1360px; +} +.primary .route .subs { + padding-left: 140px; +} +.primary .route .subs li .sub_tit { + font-size: 28px; + font-weight: 500; + color: #007243; + margin-bottom: 20px; +} +.primary .route .subs li .mid_tit { + font-size: 72px; + color: var(--color-green); + display: inline-block; + margin-right: 32px; + letter-spacing: -0.08em; +} +.primary .route .subs li .sub_text { + font-size: 20px; + display: inline-block; + line-height: 160%; +} +.primary .route .subs li { + display: none; +} +.primary .route .subs li.on { + display: initial; +} +.primary .route .content { + display: flex; + flex-direction: row; + align-items: center; + height: 640px; + margin: 0 auto; + position: relative; +} +.primary .route .content::after { + position: absolute; + content: ""; + width: 150%; + height: 80%; + top: 10%; + left: -25%; + background-image: url(../img/primary_route_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + z-index: -1; +} +.primary .route .content .scroll_m { + display: none; +} +.primary .route .tabs { + min-width: 150px; + height: fit-content; + padding: 28px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + background: url(../img/primary_menu_bg.png); + background-size: cover; + background-repeat: no-repeat; + margin-right: -2px; +} +.primary .route .tabs li { + width: 100%; + padding: 4px 0 8px 14px; + border-radius: 8px 0 0 8px; + cursor: pointer; +} +.primary .route .tabs li.on { + background: #ff7f1c1a; + border: 3px solid #ff7f1c; + border-right: none; + position: relative; +} +.primary .route .tabs li.on::before { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(-180deg, #ff7f1c00 0%, #ff7f1c 100%); + display: block; + position: absolute; + top: -35px; + right: 0; +} +.primary .route .tabs li.on::after { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(180deg, #ff7f1c 0%, #ff7f1c00 100%); + display: block; + position: absolute; + bottom: -35px; + right: 0; +} +.primary .route .tabs li a { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; + color: #fff; + border-radius: 4px; + font-size: 16px; +} +.primary .route .tabs li a b { + border-bottom: 1px solid #261f10dd; + position: relative; + font-size: 14px; + line-height: 32px; +} +.primary .route .tabs li a b::after { + content: ""; + background: #ffffff29; + width: 100%; + height: 1px; + position: absolute; + left: 0; + bottom: -2px; +} +.primary .route .tabs_li li { + color: #d7d2b0; + font-size: 12px; + padding: 0; + font-weight: 500; + border-radius: 4px 0 0 4px; + text-indent: 12px; + margin-bottom: 4px; +} +.primary .route .tabs_li.on li:first-child { + background: linear-gradient(180deg, #e4dbc9 0%, #e4dbc9 100%), + linear-gradient(90deg, #68593f 0%, #debd7e 16%, #68593f00 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; + color: #000; + font-size: 14px; + box-sizing: content-box; +} +.primary .route .imgs { + height: 100%; + width: 100%; + display: flex; + background: #e4dbc9; + border: 2px solid #5f5744; + border-radius: 16px; + box-sizing: border-box; + overflow: hidden; +} +.primary .route .imgs li { + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + border-radius: 8px; + opacity: 1; + display: none; +} +.primary .route .imgs li a { + display: block; + width: 100%; + height: 100%; + padding: 32px; + display: flex; + align-items: center; +} +.primary .route .imgs li a img { + width: 100%; + max-height: 100%; +} +.primary .route .imgs li.on { + width: 100%; + opacity: 1; + display: block; +} + +.primary .process .left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + min-width: 575px; + height: 100vh; + padding: 0; + padding-left: 200px; +} +.primary .process .left .bg { + background-size: cover; +} +.primary .process .left .bg:nth-child(1) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_style_bg.png); +} +.primary .process .left .bg:nth-child(2) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_block_bg.png); +} +.primary .process .left .bg:nth-child(3) { + background-image: linear-gradient(90deg, #00000000 0, #00000080 100%), + url(../img/primary_print_bg.png); +} +.primary .process .left .bg.on { + transform: scale(1); +} +.primary .process .left .mid_tit { + transform: scale(0.7) translate(-47%, 0%); + position: relative; + display: block; + font-size: 42px; + cursor: pointer; +} +.primary .process .left .mid_tit .num { + display: none; + font-weight: 300; + margin-right: 8px; +} +.primary .process .left .mid_tit::after { + position: absolute; + content: "●"; + top: 24px; + left: -20px; + font-size: 8px; + display: none; +} +.primary .process .left .mid_tit::before { + position: absolute; + content: ""; + top: 30px; + left: -123%; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent 50%, #fff 100%); + display: none; +} +.primary .process .left .mid_tit.on { + transform: initial; + text-indent: -66px; +} +.primary .process .left .mid_tit.on em, +.primary .process .left .mid_tit:hover em { + font-weight: 700; + color: var(--color-yellow); +} +.primary .process .left .mid_tit.on .num { + display: initial; +} +.primary .process .left .mid_tit.on::after, +.primary .process .left .mid_tit.on::before { + display: initial; +} +.primary .process .right { + padding: 200px 200px 100px 135px; + display: flex; + flex-direction: column; + gap: 160px; +} +.primary .process .right .sub_tit { + display: flex; + flex-direction: column; + font-size: 28px; + margin-bottom: 20px; + color: var(--color-green); +} +.primary .process .right .sub_tit img { + width: 48px; + margin-bottom: 20px; +} +.primary .process .right .sub_text { + margin-bottom: 32px; +} +.primary .process .right .sub_figs { + background: var(--color-han_bgbr); + width: 100%; + display: flex; + flex-direction: column-reverse; + border-radius: 4px; + margin-bottom: 32px; + padding: 24px 20px; + gap: 20px; +} +.primary .process .right .sub_figs .imgs { + width: 100%; +} +.primary .process .right .sub_figs .imgs img { + width: 100%; + object-fit: cover; + object-position: top left; +} +.primary .process .right .sub_figs .imgs { + display: flex; + gap: 16px; + position: relative; +} +.primary .process .right .sub_figs .imgs > div { + width: 100%; + box-shadow: inset 0 0 0 1px #00000022; + border-radius: 4px; + overflow: hidden; + position: relative; + background-position: top left; + background-repeat: no-repeat; + background-size: cover; +} +.primary .process .right .sub_figs .imgs > div span { + display: block; + width: 100%; + height: fit-content; + padding: 8px 0; + font-size: 16px; + font-weight: 500; + text-align: center; + color: #fff; + background-color: #000000aa; +} +.primary .process .right .sub_figs .imgs i { + background-color: var(--color-orange); + width: 48px; + aspect-ratio: 1/1; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-image: url(../img/block_img_ico.svg); + box-shadow: 0 2px 8px #000000aa; +} +.primary .process .right .sub_figs .text { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + font-size: 18px; + padding: 0 12px; +} +.primary .process .right .sub_figs .text b { + color: #000000; + font-size: 20px; + position: relative; +} +.primary .process .right .sub_figs .text li { + font-size: 16px; + position: relative; + line-height: 24px; + padding-left: 16px; + margin-bottom: 4px; +} +.primary .process .right .sub_figs .text li::before { + position: absolute; + content: ""; + top: 10px; + left: 2px; + width: 5px; + height: 4px; + background-color: var(--color-green); + transform: skew(-40deg); +} +.primary .process .right .style .text { + width: 45%; + padding: 0 32px; +} +.primary .process .right .style .sub_figs { + flex-direction: row; + padding: 0; + gap: 0; + height: 420px; +} +.primary .process .right .style .sub_figs .imgs img { + height: 100%; +} +.primary .process .right .style .sub_figs .text li { + margin-bottom: 12px; +} +.primary .process .right .block .sub_figs { + height: fit-content; + justify-content: flex-end; +} +.primary .process .right .block .sub_figs .imgs > div { + height: 400px; +} +.primary .process .right .block .sub_figs .imgs .fig01 { + background-image: url(../img/block_img_01.png); +} +.primary .process .right .block .sub_figs .imgs .fig02 { + background-image: url(../img/block_img_02.png); +} +.primary .process .right .print_area .sub_figs { + height: fit-content; + justify-content: flex-end; +} +.primary .process .right .print_area .sub_figs .imgs > div { + height: 240px; +} +.primary .process .right .print_area .sub_figs .imgs .fig01 { + background-image: url(../img/printarea_img_01.png); +} +.primary .process .right .print_area .sub_figs .imgs .fig02 { + background-image: url(../img/printarea_img_02.png); +} + +/* --------------------------------- */ +/* 도면관리 floorplan */ +/* --------------------------------- */ +.floorplan .intro { + align-items: center; +} +.floorplan .intro .top { + background-image: url(../img/floorplan_intro_bg.png); +} +.floorplan .intro::before { + position: absolute; + bottom: 0px; + left: 32px; + content: "Drawing\A management"; + font-size: 120px; + opacity: 0.03; + text-align: left; + font-weight: 900; + white-space: pre; + line-height: 0.8em; + letter-spacing: -0.04em; +} +.floorplan .intro .diagram_wrap { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 40px; + margin: 120px 0; + text-align: center; + position: relative; +} +.floorplan .intro .dia_elements_wrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.floorplan .intro .dia_element { + width: max-content; + gap: 12px; + position: absolute; +} +.floorplan .intro .dia_element .line { + width: 40px; + height: 1px; + background: var(--color-han_br); +} +.floorplan .intro .dia_element .dia_tit { + font-size: 18px; + line-height: 128%; + white-space: nowrap; +} +.floorplan .intro .dia_element i { + width: 48px; + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.floorplan .intro .dia_element01 i { + background-image: url(../img/ico_floorplan_dia_01.svg); +} +.floorplan .intro .dia_element02 i { + background-image: url(../img/ico_floorplan_dia_02.svg); +} +.floorplan .intro .dia_element03 i { + background-image: url(../img/ico_floorplan_dia_03.svg); +} +.floorplan .intro .dia_element01 { + top: -50%; + left: 50%; + transform: translateX(-50%); +} +.floorplan .intro .dia_element02 { + bottom: -14%; + left: -27%; +} +.floorplan .intro .dia_element03 { + bottom: -14%; + right: -27%; +} +.floorplan .intro .dia_element01 .line { + transform: rotate(90deg); + top: calc(100% + 20px); +} +.floorplan .intro .dia_element02 .line { + transform: rotate(-30deg); + bottom: 100%; + left: 100%; + z-index: 1; +} +.floorplan .intro .dia_element03 .line { + transform: rotate(30deg); + bottom: 100%; + right: 100%; +} +.floorplan .intro .circle_belt { + background: linear-gradient(180deg, #9469241a 0%, #94692433 100%); + border: 1px solid var(--color-han_br); +} +.floorplan .intro .circle_dash { + border: 1px dashed #d4cbbd; +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot { + background: var(--color-han_br); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(1) { + top: 0%; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(2) { + top: 75%; + left: 5.5%; + transform: translateY(-50%) rotate(120deg); +} +.floorplan .intro .dia_circles_wrap .circle_dots .dot:nth-child(3) { + top: 75%; + right: 5.5%; + transform: translateY(-50%) rotate(240deg); +} +.floorplan .intro .dia_circles_wrap .circle_dots.move { + animation-name: dot-rotate3; +} +@keyframes dot-rotate3 { + 0% { + transform: rotate(0deg); + } + 35% { + transform: rotate(120deg); + } + 70% { + transform: rotate(240deg); + } + 100% { + transform: rotate(360deg); + } +} +.floorplan .intro .dia_circles_wrap .circle_core { + line-height: 95%; +} +.floorplan .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 20px; + font-weight: 400; +} + +.floorplan .key { + margin-bottom: 160px; + padding-top: 320px; + gap: 48px; +} +.floorplan .key .left { + overflow: initial; + z-index: 10; + min-width: 600px; +} +.floorplan .key .left .mid_tit { + width: calc(100vw - 200px); + max-width: 1720px; + height: 500px; + transform: translateY(-320px); + opacity: 1; + position: absolute; + top: 0; + left: 0; + background-size: cover; + background-repeat: no-repeat; +} +.floorplan .key .left .mid_tit span { + position: absolute; + bottom: -70px; + left: 200px; +} +.floorplan .key .left .mid_tit span em { + color: #000; +} +.floorplan .key .left ul { + padding-top: 200px; + display: flex; + flex-direction: column; + gap: 24px; +} +.floorplan .key .left ul li { + font-size: 20px; + font-weight: 300; + white-space: nowrap; + cursor: pointer; +} +.floorplan .key .left ul li:hover, +.floorplan .key .left ul li.on { + font-size: 24px; + color: var(--color-green); + font-weight: 700; +} +.floorplan .key .left ul li em { + margin-right: 12px; + color: inherit; + font-weight: inherit; +} +.floorplan .key .right { + padding: 300px 200px 80px 0; + display: flex; + flex-direction: column; + gap: 100px; +} +.floorplan .key .right .sub_tit { + margin-bottom: 20px; + color: var(--color-green); +} +.floorplan .key .right .sub_text { + text-align: justify; + margin-bottom: 32px; +} +.floorplan .key .right .sub_figs { + background: var(--color-han_bgbr); + width: 100%; + border-radius: 4px; + display: grid; + grid-template-columns: 2.5fr 1fr; +} +.floorplan .key .right .sub_figs .imgs { + position: relative; + width: 100%; +} +.floorplan .key .right .sub_figs .imgs img, +.floorplan .key .right .sub_figs .imgs object { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center; +} +.floorplan .key .right .sub_figs .imgs .apx { + position: absolute; +} +.floorplan .key .right .sub_figs .text { + position: relative; + width: 100%; + min-width: 280px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + font-size: 18px; + padding: 24px 0; +} +.floorplan .key .right .sub_figs .top { + text-align: center; +} +.floorplan .key .right .sub_figs .line { + width: 40%; + border-top: 1px solid #000; + font-size: 0; + box-sizing: border-box; +} +.floorplan .key .right .sub_figs .line img { + margin: -1px auto 0; + display: block; +} +.floorplan .key .right .sub_figs .bottom { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + color: var(--color-green); +} +.floorplan .key .right .sub_figs .bottom img { + width: 40px; + object-fit: contain; +} + +.floorplan .find .left .mid_tit { + background-image: url(../img/floorplan_01.png); +} +.floorplan .find .find01 .sub_figs .imgs .apx { + top: -2%; + left: -35%; +} +.floorplan .find .find02 .sub_figs .imgs .apx { + width: 85%; + right: -2%; +} +.floorplan .find .find03 .sub_figs .imgs .apx { + width: 50%; + top: 24%; + z-index: 1; +} +.floorplan .find .find03 .sub_figs .find_03_move { + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + padding: 48px 0 24px; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(1) { + width: 14%; + margin-bottom: 15%; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(2) { + width: 40%; + margin-bottom: 10%; +} +.floorplan .find .find03 .sub_figs .find_03_move img:nth-child(3) { + width: 80%; + transform: translateX(-44%); +} +.floorplan .find .find03 .sub_figs .find_03_move .element { + animation: find_03_ani 2.5s ease-in infinite; +} +@keyframes find_03_ani { + 0% { + transform: translate(-40px, -28px) scale(100%); + opacity: 0.85; + } + 50% { + transform: translate(100px, -28px) scale(150%); + opacity: 0; + } + 100% { + opacity: 0; + } +} +.floorplan .info .left .mid_tit { + background-image: url(../img/floorplan_02.png); + left: calc(176px - 12px); + width: calc(100vw - 176px); + max-width: 1744px; +} +.floorplan .info .left .mid_tit span { + left: 24px !important; +} +.floorplan .info .info01 .sub_figs .imgs .apx { + width: fit-content; + height: 60%; + top: 24%; + right: 11%; +} +.floorplan .info .info02 .sub_figs .imgs .apx { + width: 50%; + right: 10%; +} +.floorplan .print .left .mid_tit { + background-image: url(../img/floorplan_03.png); +} +.floorplan .print .right .print02 .sub_figs .imgs img { + object-fit: cover; +} + +/* --------------------------------- */ +/* Forbim forbim */ +/* --------------------------------- */ +.forbim .sub_text { + text-align: justify; + line-height: 1.4em; +} +.forbim .intro { + padding-bottom: 0; +} +.forbim .intro .top { + background-image: url(../img/forbim_intro_bg.png); +} +.forbim .intro .visual { + width: 100%; + height: 500px; + text-align: center; + background: url(../img/forbim_visual_bg.png); + background-size: contain; + background-position: center bottom; + background-repeat: no-repeat; +} +.forbim .intro .visual img { + width: 70%; + transform: translateY(-24%); + margin: 0 auto; +} +.forbim .theorys { + width: 100%; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 80px; + background-image: url(../img/forbim_theorys_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: #fff; +} +.forbim .theorys .mid_tit { + text-align: center; + white-space: nowrap; + font-size: 42px; +} +.forbim .theorys .mid_tit .gr_txt { + color: #34daaa; +} +.forbim .theorys .mid_tit .og_txt { + color: #f87725; +} +.forbim .theorys .diagram_wrap { + width: 600px; + height: max-content; + position: relative; +} +.forbim .theorys .diagram_wrap .dia_elements_wrap { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + gap: 120%; + justify-content: center; +} +.forbim .theorys .diagram_wrap .dia_element { + white-space: nowrap; +} +.forbim .theorys .diagram_wrap .dia_element li { + list-style-type: disc; +} +.forbim .theorys .diagram_wrap .dia_element .line { + width: 40px; + height: 1px; + top: calc(50% - 1px); + background-color: #fff; + z-index: 100; +} +.forbim .theorys .diagram_wrap .dia_element:first-child .line { + left: 130%; +} +.forbim .theorys .diagram_wrap .dia_element:last-child .line { + right: 130%; +} +.forbim .theorys .diagram_wrap .dia_element:last-child ul { + transform: translateX(22px); +} + +.forbim .theorys .diagram_wrap .dia_circles_wrap { + width: 100%; + display: flex; + aspect-ratio: 2/1; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap::after { + width: 105%; + height: 105%; + border-color: #fff; + border-radius: 200px; + opacity: 1; + background-color: #00000055; + border: 1px dashed #ffffff80; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap::before { + position: absolute; + top: -8%; + left: 50%; + transform: translateX(-50%); + content: "정보연동"; + font-weight: 700; + filter: drop-shadow(0 0 2px #000); + font-size: 20px; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_belt { + display: none; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core i { + width: 80%; + aspect-ratio: 5/3; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_dots .dot { + background-color: #fff; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_dots.move { + opacity: 0.5; + animation-duration: 5s; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap > div { + width: 50%; + height: 100%; + position: relative; + transform: initial; + top: initial; + left: initial; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_dots.move { + animation-name: dot-rotate-modal; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_core { + background: linear-gradient(180deg, #296b55 0%, #124133 100%), + linear-gradient(180deg, #458f76 0%, #103126 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; +} +.forbim .theorys .diagram_wrap .dia_circles_wrap .circle_bim .circle_core i { + background-image: url(../img/forbim_theorys_bim.svg); +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_dots { + transform: translate(-50%, -50%) rotate(180deg); +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_dots.move { + animation-name: dot-rotate-algo; +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_core { + background: linear-gradient(180deg, #eb5f00 0%, #bc4c00 100%), + linear-gradient(180deg, #f8741a 0%, #ac5115 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; +} +.forbim + .theorys + .diagram_wrap + .dia_circles_wrap + .circle_floorplan + .circle_core + i { + background-image: url(../img/forbim_theorys_plan.svg); +} +@keyframes dot-rotate-modal { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(180deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes dot-rotate-algo { + 0% { + transform: rotate(-180deg); + } + 50% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } +} + +.forbim .process .left { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + min-width: 575px; + height: 100vh; + padding: 0; + padding-left: 280px; +} +.forbim .process .left .bg:nth-child(1) { + background-image: url(../img/forbim_process_bg.png); + background-size: cover; +} +.forbim .process .left .bg:nth-child(2) { + background-image: url(../img/forbim_process_bg02.png); + background-size: cover; +} +.forbim .process .left .bg.on { + transform: scale(1); +} +.forbim .process .left .mid_tit { + transform: scale(0.7) translate(-47%, 0%); + position: relative; + display: block; + font-size: 42px; + line-height: 52px; + font-weight: 500; + line-height: 120%; + cursor: pointer; +} +.forbim .process .left .mid_tit .num { + display: none; + font-weight: 300; + margin-right: 8px; +} +.forbim .process .left .mid_tit::after { + position: absolute; + content: "●"; + top: 24px; + left: -32px; + font-size: 8px; + display: none; + line-height: 14px; +} +.forbim .process .left .mid_tit::before { + position: absolute; + content: ""; + top: 30px; + left: -123%; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent 50%, #fff 100%); + display: none; +} +.forbim .process .left .mid_tit.on { + transform: initial; + text-indent: -42px; +} +.forbim .process .left .mid_tit:hover em, +.forbim .process .left .mid_tit.on em { + font-weight: 700; + color: var(--color-yellow); +} +.forbim .process .left .mid_tit.on .num { + display: initial; +} +.forbim .process .left .mid_tit.on::after, +.forbim .process .left .mid_tit.on::before { + display: initial; +} +.forbim .process .right { + padding: 200px 200px 200px 135px; + display: flex; + flex-direction: column; + gap: 200px; +} +.forbim .process .right .sub_tit { + display: flex; + flex-direction: column; + font-size: 32px; + margin-bottom: 20px; + color: var(--color-green); +} +.forbim .process .right .sub_tit img { + width: 48px; + margin-bottom: 32px; +} +.forbim .process .right .sub_text { + margin-bottom: 32px; +} +.forbim .process .right .sub_figs { + width: 100%; + aspect-ratio: 2.4/1; + position: relative; +} +.forbim .process .right .sub_figs > div { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-radius: 4px; + overflow: hidden; +} +.forbim .process .right .sub_figs > div span { + width: 100%; + height: fit-content; + display: block; + position: absolute; + top: 0; + left: 0; + background-color: #000000aa; + text-align: center; + padding: 4px; + font-size: 16px; + color: #fff; + font-weight: 500; +} +.forbim .process .link .sub_figs > div { + width: 42%; + aspect-ratio: 1.2/1; + position: absolute; +} +.forbim .process .link .sub_figs .fig01 { + top: 0; + left: 0; + background-image: url(../img/forbim_process_01_1.png); +} +.forbim .process .link .sub_figs .fig02 { + top: 0; + left: 43%; + background-image: url(../img/forbim_process_01_2.png); +} +.forbim .process .link .sub_figs .fig03 { + width: 24%; + aspect-ratio: 1/1.25; + bottom: 0; + right: 0; + background-image: url(../img/forbim_process_01_3.png); + box-shadow: 0px 2px 8px #00000055; +} +.forbim .process .link .sub_figs .fig04 { + width: 58%; + aspect-ratio: 4/1; + bottom: 0%; + left: 8%; + border: 1px solid var(--color-orange); + border-top: 0; + border-radius: 0; + overflow: initial; +} +.forbim .process .link .sub_figs .fig04::after, +.forbim .process .link .sub_figs .fig04::before { + position: absolute; + content: "●"; + font-size: 10px; + color: var(--color-orange); + top: -5px; + left: -5px; +} +.forbim .process .link .sub_figs .fig04::before { + left: initial; + right: -5px; +} +.forbim .process .link .sub_figs .fig04 span { + color: var(--color-orange); + font-weight: 700; + width: fit-content; + height: 40px; + position: absolute; + top: initial; + display: flex; + align-items: center; + bottom: -20px; + left: 50%; + transform: translateX(-50%); + padding: 0 40px; + border-radius: 100px; + font-size: 20px; + color: var(--color-orange); + background-color: #fff; + border: 1px solid var(--color-orange); + white-space: nowrap; +} +.forbim .process .info .sub_figs { + aspect-ratio: 1.6/1; + border-radius: 4px; + overflow: hidden; +} +.forbim .process .info .sub_figs div { + width: 100%; + height: 100%; + background-image: url(../img/forbim_process_02.png); + background-position: top center; +} +.forbim .process .info .sub_figs div span { + top: initial; + bottom: 0; +} + +/* --------------------------------- */ +/* FAQ 그누보드 */ +/* --------------------------------- */ +/* 자주하는 질문 faq */ +.faq .intro { + padding: 0; +} +.faq .intro .top { + background-image: url(/kngil/img/faq_intro_bg.png); +} +.faq .sub_tab { + display: flex; + width: 100%; + height: 64px; + position: absolute; + bottom: 0; + background-color: #00000077; +} +.faq .sub_tab li { + width: 100%; + height: 100%; + color: #fff; +} +.faq .sub_tab li a { + width: 25vw; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} +.faq .sub_tab li:not(:first-child, :last-child) { + width: max-content; +} + +.faq .sub_tab li:nth-child(1) a { + justify-self: flex-end; +} +.faq .sub_tab li a:hover { + color: var(--color-yellow); +} +.faq .sub_tab li.on { + background: linear-gradient( + 90deg, + rgba(29, 132, 103, 0) 0%, + #1d8467 35%, + #1d8467 65%, + rgba(29, 132, 103, 0) 100% + ); + font-weight: 700; + color: var(--color-yellow); + border-left: none; + border-right: none; +} +.faq .sub_tab li:first-child.on { + background: linear-gradient(270deg, #1d8467 0%, #051612 100%); +} +.faq .sub_tab li:last-child.on { + background: linear-gradient(90deg, #1d8467 0%, #051612 100%); +} + +.faq .sub_tit { + display: flex; + justify-content: center; + align-items: center; + margin-top: 60px; + color: #000; +} +.faq .sch_word { + background: var(--color-yellow); + color: #000; +} +.faq #hd_login_msg { + display: none; +} +.faq #wrapper { + min-width: initial !important; +} +.faq #container_wr { + width: 100%; + margin: 40px 0 120px; + min-height: auto; +} +.faq #container_wr * { + font-size: 16px; + box-shadow: none !important; +} +.faq #container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + float: initial; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 40px; + min-height: auto; +} +.faq #container::after { + display: none; +} +.faq #container_title { + display: none; +} +.faq #faq_hhtml { + display: none; +} +.faq #faq_thtml { + display: none; +} +.faq #faq_sch { + grid-column: 2; + padding: 0; + margin: 0; + background-color: initial; + justify-self: flex-end; + width: 100%; + max-width: 320px; +} +.faq #faq_sch form { + display: flex; + gap: 8px; +} +.faq #faq_sch form input { + width: 100%; + border: 1px solid #ddd; +} +.faq #faq_sch .btn_submit { + background-color: var(--color-han_br); + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + width: 88px; + padding: 0; +} +.faq #bo_cate { + grid-area: 1/1; + padding: 0; + margin: 0; +} +/* .faq #bo_cate {background-color: red;} */ +.faq #bo_cate h2 { + display: none; +} +.faq #bo_cate ul { + display: flex; + gap: 8px; +} +.faq #bo_cate li { + padding: 0; +} +.faq #bo_cate li a { + border: 1px solid #00000022 !important; + color: #555; + border-radius: 3px; + height: 45px; + display: flex; + align-items: center; +} +.faq #bo_cate li a:hover { + background-color: #fafafa; + color: #000; +} +.faq #bo_cate #bo_cate_on { + background-color: var(--color-yellow); + color: #000; +} +.faq #faq_wrap { + margin: 0; + grid-column: span 2; +} +.faq #faq_con li h3 { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + padding: 16px 56px 16px 16px; + width: 100%; + height: fit-content; + min-height: 64px; + font-size: 16px; + font-weight: initial; + margin-bottom: 0; +} +.faq #faq_con li h3 .tit_bg { + font-weight: 700; + font-size: 20px; + position: initial; + font-size: 16px; + color: #555; + align-self: flex-start; +} +.faq #faq_con li h3 a { + flex: 1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + font-weight: 500; +} +.faq #faq_con li h3 .tit_btn { + background: none; +} +.faq #faq_con li:hover h3 .tit_btn { + color: #000; +} +.faq #faq_con li:has(.faq_li_open), +.faq #faq_con li:hover { + background-color: #fafafa; +} +.faq #faq_con li .faq_li_open a { + color: #000 !important; +} +.faq #faq_con .con_inner .closer_btn { + border-radius: 3px; + border: 1px solid #00000011; + background-color: var(--color-green); + color: #ffffff; +} + +/* 1:1문의하기 q&a_list */ +.faq #container:has(#bo_list) { + display: block; +} + +.faq #bo_list { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 40px; +} +.faq #bo_list #bo_btn_top { + grid-column: 2; + margin: 0; + width: 100%; + max-width: 320px; + justify-self: flex-end; +} +.faq #bo_list #bo_btn_top #bo_list_total { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch_wrap { + display: block; + position: initial; +} +.faq #bo_list #bo_btn_top .btn_bo_user { + width: 100%; +} +.faq #bo_list #bo_btn_top .btn_bo_user li { + margin: 0; + width: 100%; +} +.faq #bo_list #bo_btn_top .btn_bo_user li:first-child .btn_bo_sch { + display: none; +} +.faq #bo_list #bo_btn_top .btn_bo_user li:last-child { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch { + position: initial; + margin: 0; + border: none; + background: none; + width: 100%; +} +.faq #bo_list #bo_btn_top .bo_sch h3 { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch form { + padding: 0; +} +.faq #bo_list #bo_btn_top .bo_sch form #sfl { + display: none; +} +.faq #bo_list #bo_btn_top .bo_sch form .sch_bar { + margin: 0; + height: 45px; + width: 100%; + border: none; + display: flex; + gap: 8px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_input { + width: 100%; + height: 100%; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_input::placeholder { + color: transparent; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_btn { + width: 88px; + height: 100%; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; +} +.faq #bo_list #bo_btn_top .bo_sch .sch_btn .sound_only { + position: initial; + width: initial; + height: initial; + overflow: visible !important; + font-size: 16px; +} +.faq #bo_list #bo_btn_top .bo_sch form .bo_sch_cls { + display: none; +} + +.faq #bo_list #fqalist { + grid-column: span 2; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + row-gap: 40px; +} +.faq #bo_list::after { + display: none; +} +.faq #bo_list #fqalist .tbl_wrap { + margin: 0; + grid-column: span 3; +} +.faq #bo_list #fqalist table { + table-layout: fixed; + border: none; +} +.faq #bo_list #fqalist caption { + display: none; +} +.faq #bo_list #fqalist thead th { + height: 48px; + padding: 0; + font-weight: 500; + border-bottom: 1px solid #000; + border-top: 2px solid #000; + white-space: nowrap; +} +.faq #bo_list #fqalist tbody td { + color: #555; + height: 60px; + word-break: break-all; + text-align: center; + border-bottom: 1px solid#eee; +} +.faq #bo_list #fqalist tbody tr td { + background: none; +} +.faq #bo_list #fqalist tbody tr:hover td { + background: #fafafa; +} +.faq #bo_list #fqalist tbody .td_subject { + display: flex; + align-items: center; + border-top: none; + gap: 16px; +} +.faq #bo_list #fqalist tbody .bo_tit { + text-align: left; + width: 100%; + text-decoration: none; + font-weight: 500; +} +.faq #bo_list #fqalist tbody .bo_cate_link { + width: 58px; + height: 28px; + font-size: 14px; + font-weight: 500 !important; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + color: #000; + background: none; + position: relative; + overflow: hidden; +} +.faq #bo_list #fqalist tbody .bo_cate_link::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: transparent; +} +.faq #bo_list #fqalist tbody .td_stat span { + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: 500; + color: #555; + width: 80px; + margin: 0 auto; + border: 1px solid #00000011; +} +.faq #bo_list #fqalist tbody .td_stat .txt_rdy { + background-color: #fafafa; +} +.faq #bo_list #fqalist tbody .td_stat .txt_done { + background-color: var(--color-green); + color: #fff; +} +.faq #bo_list #fqalist .pg_wrap { + grid-column: 2; +} +.faq #bo_list #fqalist .pg_wrap .pg { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + width: 100%; + height: 100%; +} +.faq #bo_list #fqalist .pg_wrap .pg * { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 30px; + background: none; + border: none; + color: #000; + margin: 0; + padding: 0; + background-position: center; + background-repeat: no-repeat; +} +.faq #bo_list #fqalist .pg_wrap .pg .sound_only { + display: none !important; +} +.faq #bo_list #fqalist .pg_wrap .pg_current { + background-color: var(--color-han_br); + color: #fff; +} +.faq #bo_list #fqalist .pg_wrap .pg_start { + background-image: url(../img/ico_pg_left.svg); +} +.faq #bo_list #fqalist .pg_wrap .pg_end { + background-image: url(../img/ico_pg_right.svg); +} +.faq #bo_list #fqalist .bo_fx { + grid-column: span 3; + margin: 0; +} +.faq #bo_list #fqalist .btn_bo_user li:nth-child(1) { + display: none; +} +.faq #bo_list #fqalist .btn_bo_user .btn_b01 { + background-color: var(--color-han_br); + color: #fff; + border-radius: 3px; + width: 120px; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; +} +.faq #bo_list #fqalist .btn_bo_user .btn_b01 .sound_only { + position: initial; + width: initial; + height: initial; + overflow: visible !important; +} + +/* 답변등록 q&a_reply */ +.faq #container:has(#bo_v) { + display: block; +} +.faq header { + position: initial; + padding: initial; + height: initial; +} +.faq header #bo_v_title { + width: 100%; + display: flex; + align-items: center; + gap: 8px; + font-size: 24px; + color: #000; +} +.faq header #bo_v_title .bo_v_cate { + width: 58px; + height: 28px; + font-size: 14px; + font-weight: 500 !important; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + color: #000; + background: none; + position: relative; + overflow: hidden; +} +.faq header #bo_v_title .bo_v_cate::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.02; +} +.faq #bo_v_info h2 { + display: none; +} +.faq #bo_v_top .bo_v_com > li:nth-child(1) { + display: none; +} +.faq #bo_v_top .bo_v_com > li:nth-child(2) { + display: none; +} +.faq #bo_v_top .bo_v_com .more_opt li { + width: 80px; +} +.faq #bo_v_top .bo_v_com .more_opt li i { + margin-right: 4px; +} +.faq #bo_v_atc h2 { + display: none; +} +.faq .bo_v_bottom { + display: flex; + align-items: center; + justify-content: space-between; +} +.faq .bo_v_bottom .bo_v_nb li { + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 3px; + border: 1px solid #eee; + height: 45px; + width: 100px; +} +.faq .bo_v_bottom .bo_v_nb li a { + width: 100%; + color: #000000b5; + font-weight: 500; + height: 45px; + line-height: 45px; +} +.faq .bo_v_bottom .bo_v_nb li i.fa-chevron-left { + margin-right: 8px; +} +.faq .bo_v_bottom .bo_v_nb li i.fa-chevron-right { + margin-left: 8px; +} +.faq .bo_v_bottom .bo_v_nb li:hover { + background: #eeeeee; +} +.faq .bo_v_bottom .list_btn { + background: var(--color-han_br); + color: #fff; + border-radius: 3px; + width: 120px; + display: flex; + justify-content: center; + align-items: center; + height: 45px; +} +.faq .bo_v_bottom .list_btn a { + color: #fff; + width: 100%; +} +.faq .bo_v_bottom .list_btn a i { + margin-right: 12px; +} +.faq #container_wr .bo_v_bottom, +.faq #container_wr #bo_v_ans_form { + margin-top: 24px; +} +.faq #container_wr table tbody td { + padding: 0; +} +.faq #bo_v_ans header { + background: none; + border-bottom: 1px solid #f1f1f1; +} +.faq #bo_v_ans #ans_datetime { + border: 0; +} +.faq #bo_v_ans h2 span { + padding: 2px 12px; + height: auto; + border-radius: 4px; + font-size: 14px; +} + +.faq #bo_v_ans_form h2 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin: 32px 0 16px; +} +.faq #bo_v_ans_form .btn_cke_sc { + display: none; +} +.faq #bo_v_ans_form .btn_submit { + background-color: var(--color-han_br); + color: #fff; +} + +.btn_confirm_re { + width: 120px; + display: flex; + gap: 16px; + float: right; +} +.btn_confirm_re button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + margin-top: 12px; + color: #fff; +} +.btn_confirm_re .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.btn_confirm_re .btn_cancel:hover { + background: #7a7165; + color: #fff; +} + +/* 1:1문의등록 q&a_write */ +.faq #container:has(#bo_w) { + display: block; +} +.faq #bo_w h2 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin-bottom: 16px; +} +.faq #bo_w .cke_sc { + display: none; +} +.faq #bo_w .write_div { + display: flex; + justify-content: flex-end; + gap: 8px; +} +.faq #bo_w .write_div .btn { + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + color: #000; +} +.faq #bo_w .write_div .btn_cancel { + background-color: #eee; +} +.faq #bo_w .write_div.btn_confirm button.btn_submit { + background: var(--color-han_gr); + color: #fff; + margin-top: 0; +} +.faq .btn_submit:hover { + background-image: linear-gradient( + 120deg, + #ffffff40 0%, + #27241d00 80% + ) !important; + color: #fff !important; +} +.faq .form_01 .bo_w_flie .lb_icon .fa-download { + line-height: 38px; +} +.faq .form_01::after { + content: "* 업로드 파일 용량제한 : 30MB이하"; + color: var(--color-orange); + font-weight: 500; + font-size: 16px; + text-align: left; +} +.faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(1), +.faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(1) { + display: none; +} +.faq #bo_list #fqalist:has(th.all_chk) .btn_bo_user li:nth-child(2) { + display: none; +} + +/* 250801 1:1 문의하기 추가 */ +.faq .contents { + width: 100%; + max-width: 1248px; + margin: 40px auto 120px; + padding: 0 24px; +} +.faq h3 { + display: flex; + color: #000; + overflow: visible; + position: initial; + font-size: 24px; + line-height: initial; + margin-bottom: 16px; +} + +.form-wrap .form-area:not(:last-child) { + margin-bottom: 30px; +} +.form-wrap .form-group { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.form-wrap .form-item { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + min-height: 45px; + padding: 5px 0px; + gap: 20px; +} +.form-wrap .form-col-group { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; +} + +.form-wrap .form-item .form-tit { + padding: 0 10px; + min-width: 120px; + font-weight: 500; +} +.form-wrap .form-item .form-tit .require { + color: #fb3c00; +} +.form-wrap .form-item select, +.form-wrap .form-item .input-text, +.form-wrap .form-item .text-area { + border: 1px solid #d0d3db; + border-radius: 3px; + font-size: 16px; + padding: 5px; +} +.form-wrap .form-item .select-sm { + width: 100%; + max-width: 160px; +} +.form-wrap .form-item .input-text { + height: 40px; +} +.form-wrap .form-item .text-area { + width: 100%; + height: 300px; + resize: vertical; +} +.form-wrap .form-item .edit-area { + width: 100%; + border: 1px solid #d0d3db; + border-radius: 3px; + min-height: 480px; + overflow: hidden; +} +.form-wrap .form-item label:has([type="checkbox"]) { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + cursor: pointer; +} +.form-wrap .form-item input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + width: 16px; + height: 16px; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.form-wrap .form-item input[type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} + +.form-wrap .form-item .ck-content { + min-height: 480px; +} +.form-wrap .form-item .attach-box { + display: flex; + align-items: center; + width: max-content; + column-gap: 16px; + flex-wrap: wrap; + max-width: 100%; +} +.form-wrap .form-item input[type="file"] { + width: max-content; + /* border: 1px solid #d0d3db;*/ + padding: 5px; + border-radius: 3px; + font-size: 14px; +} +.form-wrap .form-item .attach-box .info-msg { + white-space: nowrap; + font-size: 14px; + font-weight: 500; + color: #ff5c00; +} + +.tbl-area .tbl-item { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 16px; +} + +.faq .search-wrap { + display: flex; + justify-content: space-between; + padding-bottom: 40px; +} +.faq .search-wrap .qa-filters { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 32px; +} +.faq .search-wrap .qa-filters > div { + position: relative; + display: flex; + gap: 8px; +} +.faq .search-wrap .qa-filters strong { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + text-indent: -9999px; + z-index: -1; +} +.faq .search-wrap label [type="checkbox"] { + -webkit-appearance: none; + appearance: none; +} +/* .faq .search-wrap label:has(:checked) { + font-weight: 700; +} */ +.faq .search-wrap .check-group label { + position: relative; + height: 45px; + padding: 10px 15px; + background-color: #fff; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.1); + font-size: 16px; + cursor: pointer; +} + +.faq .search-wrap .check-group [type="checkbox"] { + position: absolute; +} +.faq .search-wrap .check-group label:has(:checked) { + background-color: #ffc600; +} + +.faq .search-wrap .check-box label { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + font-size: 14px; + cursor: pointer; +} + +.faq .search-wrap .check-box [type="checkbox"] { + width: 16px; + height: 16px; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.faq .search-wrap .check-box [type="checkbox"]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} + +/* .faq .search-box { + display: flex; + align-items: center; + justify-content: flex-start; + max-width: 320px; + width: 100%; + gap: 8px; + align-self: flex-end; +} + +.faq .search-box input[type="text"], +.faq .search-box input[type="search"] { + width: 100%; + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 10px; +} +.faq .search-box .btn-search { + width: 88px; + height: 45px; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; + font-size: 16px; +} */ +/* 검색 영역 컨테이너 */ +.faq .search-box { + display: flex; + align-items: center; + justify-content: flex-start; + max-width: 450px; /* ✅ 더 넓게 */ + width: 100%; + gap: 6px; + align-self: flex-end; +} + +/* Q&A ID 입력 */ +.faq .search-box .qna-id-input { + width: 100px; + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 8px; + font-size: 14px; +} + +/* 이동 버튼 */ +.faq .search-box .btn-move { + height: 45px; + padding: 0 12px; + border: 1px solid #ddd; + border-radius: 3px; + background: #f4f4f4; + cursor: pointer; + font-size: 14px; + font-weight: 600; +} + +/* 검색 input */ +.faq .search-box input[type="text"], +.faq .search-box input[type="search"] { + flex: 1; /* ✅ 남은 공간 채우기 */ + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 10px; +} + +/* 검색 버튼 */ +.faq .search-box .btn-search { + width: 88px; + height: 45px; + background-color: var(--color-han_br); + color: #fff; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + border-radius: 3px; + font-size: 16px; + cursor: pointer; +} + +.faq .pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30px 0; + gap: 12px; +} + +.faq .pagination a, +.faq .pagination span { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; +} +.faq .pagination a, +.faq .pagination .current { + border-radius: 30px; +} +.faq .pagination .current { + background-color: var(--color-han_br); + color: #fff; +} +.faq .pagination .next, +.faq .pagination .prev { + width: 32px; + height: 32px; + text-indent: -9999px; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + background-size: auto; +} + +.faq .pagination .prev { + background-image: url(../img/ico_pg_left.svg); +} + +.faq .pagination .next { + background-image: url(../img/ico_pg_right.svg); +} + +.faq .search-box .faq .btn-area { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.faq .btn-area { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} +.faq .btn-group { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; +} + +.faq .btn-area > .btn, +.faq .btn-group > .btn { + display: flex; + justify-content: center; + align-items: center; + width: max-content; + height: 45px; + padding: 0 16px; + font-size: 16px; + color: #000; + border-radius: 3px; + border: 1px solid #00000010; + transition: background-color 0.3s ease-out; +} +.faq .btn-cancel { + background-color: #eee; + font-weight: 500; +} +.faq .btn-area > .btn-save, +.faq .btn-group > .btn-save { + background: var(--color-han_gr); + color: #fff; + margin-top: 0; + font-weight: 700; +} + +.faq .btn-area > .btn-list, +.faq .btn-group > .btn-list, +.faq .btn-group > .btn-write { + width: 120px; + background: var(--color-han_br); + color: #fff; + column-gap: 12px; + font-weight: 700; +} + +.faq .btn-save:hover { + background-image: linear-gradient(120deg, #ffffff40 0%, #27241d00 80%); +} +.faq .tbl-wrap { + overflow-x: auto; +} +.faq .tbl-wrap .nolist { + height: 280px; +} + +/*Q&A 리스트 status style*/ +.faq .tbl-wrap [class^="status"] { + color: #777; +} +/* 답변완료 (연한 초록, 기존 유지) */ +.faq .tbl-wrap .status-done { + padding: 6px 10px; + color: #38b000; /* 연한 초록 */ + border-radius: 4px; + background: rgba(56, 176, 0, 0.08); /* 초록 파스텔 배경 */ + font-weight: 700; +} +/* 문의접수 (빨강 글씨 + 연한 빨강 배경) */ +.faq .tbl-wrap .status-new { + padding: 6px 10px; + color: #ef4444; /* 빨강 */ + background: rgba(239, 68, 68, 0.1); /* 연빨강 배경 */ + border-radius: 4px; + font-weight: 700; + display: inline-block; +} +/* 문의검토 / 정밀검토 / 패치예정 (회색 바탕, 검정 글씨) */ +.faq .tbl-wrap .status-review, +.faq .tbl-wrap .status-inspect, +.faq .tbl-wrap .status-patch { + padding: 6px 10px; + color: #777777; /* 검정 글씨 */ + background: #f0f0f0; /* 연회색 배경 */ + border-radius: 4px; + font-weight: 600; + display: inline-block; +} + +.faq .tbl-wrap + .btn-group { + margin: 30px 0; +} +.faq .tbl-wrap table { + table-layout: fixed; + min-width: 1024px; +} +.faq .tbl-wrap table thead th { + height: 48px; + font-weight: 500; + border-bottom: 1px solid #000; + border-top: 2px solid #000; + white-space: nowrap; + /* background: black; */ + /* color: white; */ +} + +.faq .tbl-wrap table tbody th, +.faq .tbl-wrap table tbody td { + color: #555; + height: 60px; + padding: 0 10px; + word-break: break-all; + text-align: center; + border-bottom: 1px solid #eee; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.faq .tbl-wrap table tbody tr:hover { + background-color: #fafafa; +} +/* .faq .tbl-wrap table tbody td.left { + text-align: left; +} */ +.faq .tbl-wrap table tbody td.right { + text-align: right; +} + +.faq .tbl-wrap table tbody td.left { + text-align: left; + max-width: 300px; /* 필요에 맞게 조정 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.faq .tbl-wrap table tbody td.left .title-text { + display: inline-block; + max-width: calc(100% - 120px); /* 뱃지 영역 확보 */ + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.faq .qa-view { + border: 1px solid #dde7e9; + border-radius: 3px; +} + +.faq .meta .tit { + font-size: 24px; + font-weight: 700; +} +.faq .meta .post { + display: none; +} +.faq .meta span i { + margin-right: 8px; +} +.faq .tbl-area { + display: flex; + flex-direction: column; + gap: 10px; + border-bottom: 1px solid #dde7e9; + padding: 20px; +} +.faq .tbl-area .tbl-group { + display: flex; + + justify-content: space-between; + align-items: center; +} +.faq .tbl-area .tbl-group.user-info { + flex-direction: row-reverse; + color: #555; + margin-top: 10px; +} +.faq .tbl-area .tbl-item .status, +.faq .tbl-area .tbl-item .cate { + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + min-width: max-content; + align-self: flex-start; +} +.faq .tbl-area .tbl-item .status { + padding: 0px 10px; +} +.faq .tbl-area .tbl-item .cate { + border-radius: 3px; + height: 28px; + padding: 5px 10px; + background: rgba(0, 0, 0, 0.02); +} + +.faq .qa-detail .btn-group { + margin-top: 32px; +} + +.faq .content { + padding: 20px; +} +.faq .comment-section { + margin: 32px 0; +} +.faq .comment-section .comment-wrap { + margin-top: 8px; + border: 1px solid #dde7e9; + border-radius: 3px; +} + +.faq .comment-section .comment-list:has(.comment) { + display: flex; + padding: 0 16px; + flex-direction: column; + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-list .comment:not(:last-child) { + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-box { + display: flex; + gap: 16px; + width: 100%; + padding: 20px 10px; +} +.faq .comment-section .comment-box .admin-info { + display: flex; + flex-direction: column; +} +.faq .comment-section .comment-box .admin-info strong { + font-weight: 500; +} +.faq .comment-section .comment-box .admin-info span { + color: #666; + font-size: 14px; +} + +.faq .comment-section .comment-form { + display: flex; + padding: 10px 16px; + gap: 8px; +} +.faq .comment-section .comment-form .input-text { + flex-grow: 1; +} +.faq .comment-section .btn-save { + padding: 4px 20px; + height: 40px; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + + background-origin: border-box; + border: 1px solid transparent; + border-radius: 3px; + font-size: 16px; + font-weight: bold; + color: #fff; +} +.faq .comment-section .btn-save:hover { + background-color: var(--color-han_br); + background-image: linear-gradient(120deg, #ffffff40 0%, #27241d00 80%); +} + +/* 250801 1:1 문의하기 추가 END */ + +/* --------------------------------- */ +/* 구매하기 buy */ +/* --------------------------------- */ +.buy .intro .top { + background-image: url(../img/buy_intro_bg.png); +} +.buy .contents_wrap { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + margin-bottom: 160px; + padding: 0 200px; + gap: 100px; + position: relative; +} +.buy .contents_wrap::after { + content: ""; + background: #f8f7f5; + display: block; + position: absolute; + width: 100%; + height: 75%; + bottom: -50%; + left: 0; + z-index: -10; +} +.buy .contents_wrap .mid_tit { + display: block; + font-size: 42px; + position: relative; + font-weight: 400; + line-height: 120%; + color: #000000d9; +} +.buy .contents_wrap .mid_tit b { + color: #000000; +} +.buy .contents_wrap .ask_area a { + width: 100%; + height: 64px; + background-color: var(--color-han_br); + border-radius: 4px; + font-size: 22px; + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + color: #fff; +} +.buy .contents_wrap .ask_area a i { + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} +.buy .contents_wrap .ask_area { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + gap: 40px; +} +.buy .contents_wrap .ask_area .ask_l { + white-space: nowrap; +} +.buy .contents_wrap .ask_area .ask_r { + width: 100%; + max-width: 960px; +} +.buy .contents_wrap .ask_area .ask_btn { + display: flex; + flex-direction: row; + gap: 12px; +} +.buy .contents_wrap .ask_area .ask_btn a { + width: 20%; + height: 100px; + background: linear-gradient(0deg, #27241d 0%, #8d8269 100%); + box-shadow: 2px 2px 0px #27241d33 inset; + display: flex; + flex-direction: column; + gap: 0px; + font-weight: 500; + font-size: 20px; +} +.buy .contents_wrap .ask_area .ask_btn a.btn_ask { + width: 60%; + color: #fff; + flex-direction: row; + gap: 16px; + background: linear-gradient(180deg, #208769 0%, #051612 100%), + linear-gradient( + 180deg, + #006346 0%, + #07251d 9%, + #95fedf 44%, + #09201a 84%, + #0d4834 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; + box-shadow: none; + font-size: 28px; +} +.buy .contents_wrap .ask_area .ask_btn a i { + width: 20px; + aspect-ratio: 1/1; +} +.buy .contents_wrap .ask_area a.btn_ask i { + background-image: url(../img/ico_buy_ask.svg); + width: 32px; +} +.buy .contents_wrap .ask_area a.btn_brochure i { + background-image: url(../img/ico_buy_brochure.svg); +} +.buy .contents_wrap .ask_area a.btn_manual i { + background-image: url(../img/ico_buy_manual.svg); +} + +.buy .contents_wrap .ask_area .mid_tit::after { + position: absolute; + content: "Purchase"; + top: -60px; + left: 0px; + color: #000; + opacity: 0.03; + font-size: 120px; + font-weight: 900; + letter-spacing: -0.05em; +} +.buy .contents_wrap .ask_area .sub_text { + font-size: 18px; + position: relative; + padding-left: 28px; + margin-bottom: 12px; +} +.buy .contents_wrap .ask_area .sub_text::after { + position: absolute; + content: ""; + top: 6px; + left: 0; + width: 20px; + aspect-ratio: 1/1; + background-image: url(../img/ico_buy_alarm.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.buy .contents_wrap .video_area { + width: 100%; + display: flex; + align-items: center; + gap: 24px; +} +.buy .contents_wrap video { + width: 100%; +} +.buy .contents_wrap .contact_area { + display: flex; + flex-direction: column; + justify-content: center; + align-self: stretch; + background: #ffffff; + border-radius: 4px; + box-shadow: 10px 10px 20px #00000033; + padding: 0 32px; + white-space: nowrap; + gap: 24px; +} +.buy .contents_wrap .contact_area .mid_tit { + font-weight: 700; + color: #007243; + font-size: 28px; + margin-bottom: 8px; +} +.buy .contents_wrap .contact_area .sub_text { + width: 100%; + font-weight: 500; + color: #1d1d1d80; + font-size: 18px; +} +.buy .contents_wrap .contact_area .line { + width: 100%; + height: 1px; + border-bottom: 1px dashed #99999980; +} +.buy .contents_wrap .contact_area ul { + font-size: 20px; + font-weight: 700; + display: flex; + flex-direction: column; + gap: 16px; + line-height: initial; +} +.buy .contents_wrap .contact_area ul li { + display: flex; + align-items: center; + gap: 16px; +} +.buy .contents_wrap .contact_area ul li i { + width: 32px; + aspect-ratio: 1/1; +} +.buy .contents_wrap .contact_area ul li.tel i { + background-image: url(../img/ico_buy_tel.svg); +} +.buy .contents_wrap .contact_area ul li.mail i { + background-image: url(../img/ico_buy_mail.svg); +} + +/* --------------------------------- */ +/* 팝업 popup */ +/* --------------------------------- */ +/* 팝업 공통 */ +.popup_wrap { + display: none; + z-index: 1000; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.popup_wrap::before { + content: ""; + background: #000000aa; + display: block; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; +} +.popup_wrap i { + display: inline-block; + width: 32px; + aspect-ratio: 1/1; + margin-left: 24px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.popup_wrap i.id { + background-image: url(../img/ico_id.svg); +} +.popup_wrap i.pw { + background-image: url(../img/ico_pw.svg); +} +.popup_wrap i.arrow_r { + width: 16px; + height: 16px; + margin-left: 8px; + background-image: url(../img/arrow_r.svg); +} +.popup_wrap i.signout { + background-image: url(../img/ico_signout.svg); +} +.popup_wrap i.phone { + background-image: url(../img/ico_phone.svg); +} +.popup_wrap i.email { + background-image: url(../img/ico_email.svg); +} +.popup_wrap i.company { + background-image: url(../img/ico_company.svg); +} +.popup_wrap i.send { + background-image: url(../img/ico_send_email.svg); +} +.popup_wrap i.complete { + background-image: url(../img/ico_complete.svg); +} +.popup_in { + width: 100%; + height: 100%; + position: relative; +} +.popup_in .btn_close { + position: fixed; + top: 28px; + right: 86px; + z-index: 10000; + width: 107px; + height: 48px; + background: transparent; + background-image: url("../img/bg_close.png"); + background-size: cover; + background-repeat: no-repeat; + border: none; +} +.popup_in .close_div { + text-align: right; + margin-right: 26px; +} +.popup_container { + width: 1140px; + height: 725px; + position: absolute; + top: 72px; + right: 86px; + box-shadow: 20px -20px 50px #000000cc; + border: 4px solid #0e3c2e; + border-radius: 5px 0 5px 5px; + display: flex; + z-index: 100; + overflow: hidden; + background: linear-gradient(0deg, #ffffff00 0%, #eee7dd 100%), + linear-gradient(90deg, #d4cbbd 0%, #d4cbbd 100%); +} +.popup_container::after, +.popup_container::before { + position: absolute; + top: -40px; + left: 75px; + font-size: 180px; + font-weight: 900; + color: #fff; + white-space: nowrap; + letter-spacing: -0.06em; + mix-blend-mode: overlay; + opacity: 0.5; + z-index: 1; +} +.popup_container::before { + left: 407px; +} +.popup_container .popup_tit { + min-width: 420px; + display: flex; + flex-direction: column; + padding: 120px 0 90px 48px; + position: relative; + background-image: url("../img/bg_pop.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: top left; +} +.popup_container .popup_tit .h_1 { + font-size: 80px; + font-weight: 900; + margin-bottom: 38px; + color: #ffffff; +} +.popup_container .popup_tit .h_3 { + color: #222; + color: #ffffff; +} +.popup_contents_wrap { + width: 100%; + height: 100%; + margin: 0 auto; + padding: 80px 24px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + overflow-y: auto; + box-shadow: -20px 20px 50px #00000011; + z-index: 1; +} +.popup_contents_wrap > * { + max-width: 480px; +} +.popup_contents_wrap .tbl_wrap { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; +} +.popup_contents_wrap form { + width: 100%; + height: 100%; + font-size: 20px; + color: #000; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: center; +} +.popup_contents_wrap table { + background: none; + border: none; + border-collapse: separate; + border-spacing: 0 20px; +} +.popup_contents_wrap table tr { + height: 42px; +} +.popup_contents_wrap table th { + text-align: left; + font-weight: 600; + vertical-align: top; + width: 25%; + padding-top: 7px; +} +.popup_contents_wrap table td { + text-align: left; + _width: 75%; +} +.popup_contents_wrap table td div { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + position: relative; + gap: 8px; +} +.popup_contents_wrap td button { + width: 75px; + background: #27241d; + color: #fff; + padding: 4px 8px; + border-radius: 2px; + font-size: 16px; + position: absolute; + right: 0; +} +.popup_contents_wrap input { + border: none; + border-bottom: 1px solid #777; + padding: 8px 0 8px 4px; + width: 100%; + font-size: 18px; + background: none; + border-radius: 0; + box-shadow: none; +} +.popup_contents_wrap input[readonly] { + border-bottom: 1px solid #777; +} +.popup_contents_wrap input[readonly]:focus { + border-bottom: 1px solid #777; +} +.popup_contents_wrap input::placeholder { + color: #777; + font-size: inherit; + font-weight: normal; +} +.popup_contents_wrap select { + border-bottom: 1px solid #777; + padding: 8px 0px 8px 4px; + width: 100%; + font-size: 18px; +} +.popup_contents_wrap option { + color: #777; + font-size: 18px; +} +.popup_contents_wrap .important_msg { + font-size: 12px; + color: #fb3c00; + font-weight: normal; +} +.popup_contents_wrap th .important_msg { + font-size: inherit; + padding: 0 3px; +} +.popup_contents_wrap .select_msg { + font-size: 12px; + color: #999; + padding: 0 3px; +} +.popup_contents_wrap .pop_notice { + width: 100%; + text-align: right; + margin-bottom: 16px; +} +.domain_list { + height: 42px; + padding-bottom: 8px; +} +.email_wrap .e_id { + width: 120px; +} +.timer { + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); + font-weight: 500; + font-size: 12px; + text-align: center; + padding: 0 80px; + color: #fb3c00; +} +.check.complete { + background-color: #777; + color: #ddd; + cursor: default; +} +.messages { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + width: 100%; +} +.messages i.send { + display: block; + width: 88px; + height: 88px; + text-align: center; + margin-left: 0; + padding-bottom: 18px; +} +.messages i.complete { + display: block; + width: 88px; + height: 88px; + text-align: center; + margin-left: 0; + padding-bottom: 18px; +} +.messages span { + border-bottom: 2px solid #777; + border-top: 2px solid #777; + padding: 24px 0; +} +.messages span em { + color: var(--color-pointPurple); +} +.join_btn_wrap { + width: 100%; + display: flex; + gap: 16px; +} +.join_btn_wrap button:hover { + background: linear-gradient(90deg, #8e7339 0%, #a57839 100%), + linear-gradient( + 90deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} +.join_btn_wrap button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + line-height: 80px; + color: #fff; +} +.join_btn_wrap .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.join_btn_wrap .btn_cancel:hover { + background: #7a7165; + color: #fff; +} +.btn_confirm { + width: 100%; + display: flex; + gap: 16px; +} +.btn_confirm button:hover { + background: linear-gradient(90deg, #8e7339 0%, #a57839 100%), + linear-gradient( + 90deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} +.btn_confirm button { + width: 100%; + background: linear-gradient(90deg, #53472e 0%, #3b3123 100%), + linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); + background-origin: border-box; + background-clip: content-box, border-box; + border: 1px solid transparent; + font-size: 24px; + font-weight: 700; + padding: 0px 0; + border-radius: 4px; + margin-top: 12px; + line-height: 80px; + color: #fff; +} +.btn_confirm .btn_cancel { + background: #8b8276; + width: 30%; + border: 1px solid #00000010; + color: #ffffffb0; + font-weight: 500; +} +.btn_confirm .btn_cancel:hover { + background: #7a7165; + color: #fff; +} +.verify_wrap { + display: flex; + flex-direction: column; + gap: 16px; +} +.verify_wrap .code_input { + display: flex; + gap: 8px; +} +.verify_wrap .code_input input { + max-width: 56px; + max-height: 56px; + width: 14vw; + height: 14vw; + font-size: 24px; + text-align: center; + background-color: #fff; + border: 1px solid #00000033; + border-radius: 8px; + padding: 0; +} +.verify_wrap .important_msg { + float: left; + padding-top: 2px; +} +.verify_wrap button.btn_send { + float: right; + font-size: 14px; + color: #777; +} +.popup_contents_wrap .guide_txt { + font-size: 20px; +} +.popup_contents_wrap .guide_txt p { + margin-bottom: 24px; + font-weight: 700; + font-size: 28px; +} +.radio_wrap { + width: 100%; + display: grid !important; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + padding-top: 8px; + align-items: center; +} +.radio_wrap label { + display: flex; + justify-content: start; + align-items: center; + font-size: 18px; + font-weight: 400; + cursor: pointer; + gap: 8px; +} +.radio_wrap input[type="radio"] { + appearance: none; + width: 24px; + aspect-ratio: 1/1; + border: 2px solid #aaa; + padding: 0; + border-radius: 50%; + position: relative; + outline: none; + cursor: pointer; +} +.radio_wrap input[type="radio"]:checked { + border: 2px solid #583c1c; +} +.radio_wrap input[type="radio"]:checked::before { + content: ""; + display: block; + width: 70%; + aspect-ratio: 1/1; + background-color: #583c1c; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.btn_back { + width: 100%; + text-align: left; + font-size: 18px; + font-weight: 500; + opacity: 0.7; + position: relative; +} +.btn_back::before { + content: ""; + width: 10px; + height: 10px; + display: inline-block; + margin-right: 12px; + border: 2px solid; + border-width: 0 0 2px 2px; + transform: rotate(45deg) translateY(-2px); +} +.btn_back::after { + content: ""; + width: 14px; + height: 1px; + position: absolute; + left: 0; + border-top: 2px solid; + top: 50%; + transform: translateY(-50%); +} +.btn_back:hover { + opacity: 1; +} + +/* 로그인 */ +/* .login::after { + content: "Logi"; +} */ +/* .login::before { + content: "n"; +} */ +.login input { + border-bottom: none; + padding: 0; +} +.login form { + gap: 24px; +} +.login .input_wrap { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + border-bottom: 1px solid #000; + padding: 16px 0; +} +.login .input_wrap span { + width: 150px; + font-size: 18px; + font-weight: 600; + text-align: left; +} +.login .inquiry { + width: 100%; + font-size: 14px; + color: #777; + text-align: right; + margin-top: 24px; +} +.login .btn_go { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} +.login .btn_go div a { + display: flex; + align-items: center; +} +.login .btn_go div a span { + color: #555; + font-size: 18px; + font-weight: 600; +} +.login .join_btn_wrap { + margin-top: 24px; +} + +/* 회원가입 */ +.register::after { + content: "Sign u"; + left: -70px; +} +.register::before { + content: "p"; +} +.register br.brk { + display: none; +} +.register .popup_tit { + justify-content: space-between; +} +.register .popup_tit .join_step { + display: flex; + column-gap: 12px; + margin-top: 24px; + font-weight: 300; + color: #ffffff44; +} +.register .popup_tit .join_step:first-child { + margin-top: 0; +} +.register .popup_tit .join_step.on { + color: #fff; +} +.register .popup_tit .join_step.on h4.txt { + font-weight: 600; +} +.register .popup_contents_wrap form { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + justify-content: space-between; +} +.register .checkbox_wrap { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + cursor: pointer; +} +.register .checkbox_wrap h4 { + font-size: 18px; +} +.register .checkbox_wrap.all h4 { + font-size: 20px; +} +.register .checkbox_wrap .important_msg { + font-size: 18px; + padding: 0 3px; +} +.register .terms_wrap { + width: 100%; +} +.register .terms { + width: 100%; + height: 128px; + border-radius: 4px; + padding: 8px 16px; + margin-top: 8px; + font-size: 14px; + text-align: left; + box-sizing: border-box; + background-color: #ffffff55; + overflow-y: auto; +} +.register input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + width: 28px; + aspect-ratio: 1/1; + border-radius: 2px; + position: relative; + cursor: pointer; + border-bottom: 0; + background-color: #ffffffaa; + box-shadow: inset 0px 0px 1px #00000022; + padding: 0; + display: inline-block; +} +.register input[type="checkbox"]:checked { + background-color: var(--color-green); +} +.register input[type="checkbox"]:checked::before { + content: "✔"; + font-size: 16px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #ffffff !important; +} +.register .popup_contents_wrap fieldset { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +/* 아이디/비밀번호 찾기 */ +.search::after { + content: "PW"; + left: 186px; +} +.search .popup_tit .h_1 { + line-height: 128%; +} +.search .popup_contents_wrap { + gap: 24px; + justify-content: flex-start; +} +.search .inquiry { + width: 100%; + font-size: 14px; + color: #777; + text-align: right; +} + +/* 마이페이지 */ +.mypage::after, +.mypage::before { + font-size: 168px; +} +.mypage::after { + content: "My pa"; + left: -30px; +} +.mypage::before { + content: "ge"; + left: 414px; +} +.mypage.log { + width: 1140px; +} +.mypage.log form { + gap: 24px; +} +.mypage { + width: 1300px; +} +.mypage .popup_contents_wrap { + gap: 24px; +} +.mypage .popup_contents_wrap > div { + max-width: initial; +} +.mypage .my_info { + width: 100%; + font-size: 20px; + display: flex; + flex-direction: column; +} +.mypage .my_info h4 { + font-size: 24px; +} +.mypage .my_info i { + width: 24px; + aspect-ratio: 1/1; + margin: 0; + margin-right: 8px; +} +.mypage .my_info .name { + display: flex; + justify-content: right; + align-items: center; + gap: 16px; + padding-bottom: 24px; +} +.mypage .my_info .name h4 { + font-size: 36px; +} +.mypage .my_info .name h4 span { + font-weight: 500; + color: #777; + padding-bottom: 0; +} +.mypage .my_info .name button { + padding: 6px 24px; + margin-top: 6px; + background-color: var(--color-green); + border-radius: 4px; + font-weight: 600; + font-size: 16px; + color: #ffffff; +} +.mypage .my_info .name button:hover { + background-color: var(--color-han_gr); +} +.mypage .my_info .detail { + display: flex; + justify-content: right; +} +.mypage .my_info .detail li { + text-align: right; + border-right: 1px solid #aaa; + padding: 0 48px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.mypage .my_info .detail li:last-child { + border-right: none; + padding-right: 0; +} +.mypage .my_info .detail li:nth-child(3) { + max-width: 500px; +} +.mypage .my_info .detail li div { + display: flex; + align-items: center; + justify-content: right; + padding-bottom: 8px; + font-size: 16px; + font-weight: 500; + color: #777; +} +.mypage .my_info .detail li.license { + display: none; +} +.mypage .my_qna { + width: 100%; +} +.mypage .my_qna h4 { + font-size: 24px; + padding-bottom: 16px; + text-align: left; + width: 100%; + border-bottom: 3px solid #000; +} +.mypage .my_qna table { + border-collapse: collapse; + border: 1px solid #00000020; +} +.mypage .my_qna thead tr { + border-bottom: 1px solid #000; + background: #ffffff80; +} +.mypage .my_qna thead tr th { + padding: 10px 0; + font-size: 18px; + text-align: center; + white-space: nowrap; +} +.mypage .my_qna tbody tr { + border-bottom: 1px solid #777; + background: #ffffff33; +} +.mypage .my_qna tbody tr:last-child { + border-bottom: none; +} +.mypage .my_qna tbody tr td { + padding: 16px 0; + color: #00000080; + font-weight: 500; + text-align: center; +} +.mypage .my_qna tbody tr td em { + color: var(--color-orange); +} +.mypage .my_qna tbody tr td.td_name { + padding: 10px 8px; + color: #000; + text-align: left; +} +.mypage .my_qna tbody tr td.td_stat .txt_done { + color: var(--color-orange); +} +.mypage .my_qna tbody tr td.td_stat .txt_rdy { + color: var(--color-green); +} +.mypage .my_qna tbody tr td .bo_cate_link { + float: none; + margin-right: 0; + background: transparent; + color: #000; + height: auto; + padding: 8px; + display: inline-block; + border-radius: 5px; + line-height: 10px; +} +.mypage .my_qna tbody tr.answer td em { + color: #00000080; + font-weight: 500; +} +.mypage .my_qna tbody tr.answer { + background-color: #ffdd0022; +} +.mypage .my_qna tbody tr.answer td.tit a { + display: flex; + justify-content: left; + align-items: center; + gap: 8px; +} +.mypage .my_qna i.answer { + width: 18px; + height: 18px; + background-image: url(../img/ico_answer.svg); + margin-right: 0; + margin-bottom: 10px; +} +.mypage .my_qna i.lock { + width: 18px; + height: 18px; + background-image: url(../img/ico_lock.svg); + margin-left: 0; +} +.mypage .my_qna button.btn_prev { + width: 18px; + height: 18px; + background-image: url(../img/ico_pg_left.svg); +} +.mypage .my_qna button.btn_next { + width: 18px; + height: 18px; + background-image: url(../img/ico_pg_right.svg); +} +.mypage .my_qna .pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; + font-size: 18px; + font-weight: 500; +} +.mypage .my_qna .pagination .pagination_list { + display: flex; + justify-content: center; + align-items: center; + gap: 40px; +} +.mypage .my_qna .pagination .pagination_list li.on { + width: 30px; + height: 30px; + background-color: var(--color-han_br); + border-radius: 50%; +} +.mypage .my_qna .pagination .pagination_list li.on a { + color: #fff; +} +.mypage.edit { + width: 1140px; +} +.mypage.edit .popup_tit .h_1 { + font-size: 72px; +} +.mypage.edit input::placeholder { + color: #000; +} +.mypage.edit .name_wrap input::placeholder, +.mypage.edit .id_wrap input::placeholder { + color: #999; +} +.mypage.edit .sign_out a { + display: flex; + justify-content: right; + align-items: center; + gap: 8px; + font-weight: 500; + color: #777; + padding-top: 16px; + font-size: 16px; +} +.mypage.edit .sign_out i { + width: 24px; +} + +/* 개인정보보호정책 */ +.popup_in:has(.privacy) { + position: absolute; + width: 800px; + height: 700px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.popup_in:has(.privacy) .btn_close { + top: -22px; + right: 0; +} +/* .privacy { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + height: 662px; +} */ +.privacy .contents_wrap { + width: 100%; + height: 100%; + gap: 0; + padding-bottom: 40px; + margin: 0 auto; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + background-size: cover; + background-repeat: no-repeat; + z-index: 9; + background-color: #00000003; + background-image: url("../img/bg_pop.png"); + overflow: hidden; +} +.privacy .tab_wrap { + width: 100%; + min-height: 67px; + padding: 4px; + border-radius: 4px; + box-sizing: border-box; + background-color: #eee7dd; + display: flex; + gap: 4px; +} +.privacy .tab_wrap li { + position: relative; + width: 50%; + height: 100%; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.privacy .tab_wrap li:not(.on):hover { + background-color: #dbcbb4; +} +.privacy .tab_wrap li span { + font-size: 18px; + font-weight: 600; +} +.privacy .tab_wrap li.on { + background-color: var(--color-han_br); + color: #fff; +} +.privacy .content { + display: none; + position: relative; + width: 100%; + border-radius: 4px; + padding: 40px; + font-size: 16px; + text-align: left; + box-sizing: border-box; + overflow-y: scroll; +} +.privacy .content.show { + display: block; +} +.privacy .content.show li { + color: #ffffff; +} +.privacy .tit { + font-size: 18px; + font-weight: 500; +} +.privacy .list_1 > li { + margin-bottom: 40px; +} +.privacy .list_2 { + margin-top: 16px; +} +.privacy .list_2 > li { + list-style: square; + padding-left: 8px; + margin-left: 32px; + margin-bottom: 16px; +} +.privacy .list_3 { + margin-left: 8px; + margin-top: 8px; +} +.privacy .list_3 > li { + list-style-type: "- "; + margin-bottom: 4px; +} +/* 메인 팝업 */ +.popup_wrap.popup-notice { + position: fixed; + width: 100%; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background: none; + z-index: 99; +} + +.popup_wrap.popup-notice .popup_in { + max-width: 420px; + height: auto; + position: absolute; + width: calc(100% - 40px); + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 8px; + overflow: hidden; +} + +.popup_container.notice { + height: auto; + position: relative; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + width: 100%; + max-width: 100%; + background: none; + border: none; + top: auto; + right: auto; + box-shadow: none; + border-radius: 0; +} + +.popup_container.notice img { + width: 100%; + + height: auto; + display: block; +} + +.popup_container.notice .btn-wrap { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + width: 100%; + padding: 0 16px; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + background-color: #fff; +} + +.popup_container.notice .btn-wrap button { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 48px; + font-size: 16px; + color: rgba(0, 0, 0, 0.7); + border: none; + background: none; + cursor: pointer; + padding: 0 8px; +} + +@media (min-width: 992px) { + .popup_wrap.popup-notice { + left: 168px; + -ms-transform: translate(0%, -50%); + -webkit-transform: translate(0%, -50%); + transform: translate(0%, -50%); + max-width: max-content; + } +} + +@media (min-width: 721px) { + .popup_wrap.popup-notice { + max-width: max-content; + overflow: hidden; + height: auto; + } + + .popup_wrap.popup-notice .popup_in { + position: relative; + top: auto; + left: auto; + -ms-transform: none; + -webkit-transform: none; + transform: none; + width: 100%; + max-width: 100%; + border-radius: 4px; + } + + /* 그라데이션 테두리 효과 */ + .popup_wrap.popup-notice .border-effect { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 180deg, + #f3dba8 0%, + #423625 46%, + #f3dba8 55%, + #0e0b06 84%, + #574b30 100% + ); + pointer-events: none; + border-radius: 8px; + z-index: 999; + } + + .popup_wrap.popup-notice .popup_container.notice { + position: relative; + border-radius: 8px; + z-index: 1000; + width: 100%; + padding: 2px; + } + + .popup_container.notice .btn-wrap { + padding: 0 30px; + height: 60px; + } +} + +/* 사이트맵 */ +.popup_sitemap { + position: fixed; + width: 100%; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + top: 0; + right: 0; + display: none; + z-index: 1000; + overflow: hidden; + background-color: #111; +} +.popup_sitemap header .menu_my, +.popup_sitemap header .language { + display: none; +} +.popup_sitemap header .btn_map_close { + background: none; + border: none; + z-index: 1; +} +.popup_sitemap header .btn_map_close a div:nth-child(1) { + animation: btn-close-bar1 0.5s ease both; +} +.popup_sitemap header .btn_map_close a div:nth-child(2) { + animation: btn-close-bar2 0.5s ease both; +} +.popup_sitemap header .btn_map_close a div:nth-child(3) { + animation: btn-close-bar3 0.5s ease both; +} +@keyframes btn-close-bar1 { + from { + top: 7px; + } + to { + top: 15px; + transform: rotate(45deg); + } +} +@keyframes btn-close-bar2 { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes btn-close-bar3 { + from { + bottom: 7px; + } + to { + bottom: 15px; + transform: rotate(-45deg); + } +} +.sitemap { + width: 100%; + height: 100%; + background-color: #111; + display: flex; + justify-content: center; + overflow: hidden; + width: 100%; + position: relative; + gap: 16px; + padding: 20px; + pointer-events: none; + animation: enableHover 0.8s forwards; + animation-delay: 0.3s; +} +@keyframes enableHover { + to { + pointer-events: auto; + } +} +.sitemap div[class*="bg_line"] { + position: relative; + width: 1px; + height: 100%; + background-color: #fff; + animation-duration: 0.8s; + animation-timing-function: ease-out; + animation-fill-mode: both; +} +.sitemap .bg_line1, +.sitemap .bg_line3 { + animation-name: slideDown; +} +.sitemap .bg_line2 { + animation-name: slideup; +} +@keyframes slideDown { + 0% { + top: -1000px; + opacity: 80%; + } + 100% { + top: 0; + opacity: 20%; + } +} +@keyframes slideup { + 0% { + bottom: -1000px; + opacity: 80%; + } + 100% { + bottom: 0; + opacity: 20%; + } +} +.sitemap div[class*="menu"] { + background-size: cover; + background-position: center; + position: relative; + overflow: hidden; + cursor: pointer; + transition: all 0.5s; + width: calc(100% / 4); + z-index: 1; +} +.sitemap div[class*="menu"]::before, +.sitemap div[class*="menu"]:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.sitemap div[class*="menu"]::before { + background-color: #00000077; + transition: 0.5s ease; + z-index: -1; +} +.sitemap div[class*="menu"]:after { + background-color: #111; + z-index: 1; + animation: slideRight 0.5s ease-in forwards; + animation-delay: 0.1s; +} +@keyframes slideRight { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(100%); + } +} +.sitemap div[class*="menu"] a { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + padding-left: 24px; + padding-top: 20px; + width: 100%; + height: 100%; + font-size: 42px; + font-weight: 900; + color: #fff; + white-space: nowrap; + transform-origin: left; +} +.sitemap div[class*="menu"] a span { + position: relative; +} +.sitemap div[class*="menu"] a span:after { + position: absolute; + top: -100px; + left: 0px; + width: 100%; + height: 100%; + opacity: 0.2; + font-weight: 900; + line-height: 80%; + font-size: 80px; + display: none; +} +.sitemap div[class*="menu"] a .sub_text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + height: 100px; +} +.sitemap div[class*="menu"] a em { + font-weight: 700; + color: #fff; +} + +.sitemap .menu1 a span::after { + content: "\AValue of"; + white-space: pre; +} +.sitemap .menu2 a span:after { + content: "\AInterface"; + white-space: pre; +} +.sitemap .menu3 a span:after { + content: "Key \A Features"; + white-space: pre; +} +.sitemap .menu4 a span:after { + content: "Drawing \A management"; + white-space: pre; +} +.sitemap .menu5 a span:after { + content: "Cross \A Check"; + white-space: pre; +} +.sitemap .menu1 { + background-image: url(../img/sitemap_menu01.png); +} +.sitemap .menu2 { + background-image: url(../img/sitemap_menu02.png); +} +.sitemap .menu3 { + background-image: url(../img/sitemap_menu03.png); +} +.sitemap .menu4 { + background-image: url(../img/sitemap_menu04.png); +} +.sitemap .menu5 { + background-image: url(../img/sitemap_menu05.png); +} +.sitemap div[class*="menu"]:hover { + width: 60%; +} +.sitemap div[class*="menu"]:hover::before { + display: none; +} +.sitemap div[class*="menu"]:hover a { + opacity: 1; + transform: scale(1.3); +} +.sitemap div[class*="menu"]:hover a span::after { + display: initial; +} +.sitemap div[class*="menu"]:hover a em { + color: var(--color-yellow); +} + +@media (max-width: 1600px) { + .sitemap div[class*="menu"] a { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + padding-left: 24px; + padding-top: 20px; + width: 100%; + height: 100%; + font-weight: 600; + color: #fff; + white-space: nowrap; + transform-origin: left; + } + .sitemap div[class*="menu"] a span { + font-size: 38px; + font-weight: 900; + position: relative; + } + .sitemap div[class*="menu"] a .sub_text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + height: 100px; + } + .sitemap div[class*="menu"] a .sub_text br.brk { + display: initial; + } + .sitemap div[class*="menu"] a span:after { + font-size: 60px; + top: -80px; + } + + .main .pagination_main { + right: 24px; + } + .main .pagination_main li span { + display: none; + } + + .interface .route .fix { + padding: 0 64px; + } + .interface .route .content { + gap: 56px; + } + .interface .route .subs { + min-width: 440px; + padding-top: 0px; + } + .interface .route .subs li .sub_tit { + font-size: 100px; + top: -40px; + right: -72px; + } + .interface .route .subs li .mid_tit { + font-size: 48px; + } + .interface .dual .detail .subs { + flex-direction: column; + } + + .primary .route .fix > * { + width: 1120px; + } + .primary .route .subs li .mid_tit { + font-size: 68px; + } + .primary .route .content { + height: 520px; + transform: translateX(-1.5%); + } + .primary .route .tabs { + transform: scale(0.8); + transform-origin: center right; + } + .primary .process .left { + padding-left: 120px; + min-width: 450px; + } + .primary .process .left .mid_tit { + font-size: 38px; + } + .primary .process .left .mid_tit.on { + text-indent: -62px; + } + .primary .process .right { + padding: 200px 120px 100px 64px; + } + .primary .process .right .style .sub_figs { + height: 320px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 320px; + } + + .floorplan .key .left { + padding-left: 120px; + min-width: 520px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 120px); + } + .floorplan .key .left .mid_tit span { + left: 120px; + } + .floorplan .key .right { + padding-right: 120px; + } + .floorplan .info .left .mid_tit { + left: calc(96px - 12px); + width: calc(100vw - 96px); + } + .floorplan .find .find03 .sub_figs .find_03_move { + padding: 24px 0 16px; + } + + .forbim .intro .visual { + height: 400px; + } + .forbim .process .left { + min-width: 450px; + padding-left: 120px; + } + .forbim .process .left .mid_tit { + font-size: 38px; + } + .forbim .process .right { + padding: 200px 120px 100px 64px; + } + + .buy .contents_wrap .contact_area { + gap: 12px; + } + .buy .contents_wrap .contact_area .mid_tit { + font-size: 24px; + margin-bottom: 4px; + } + .buy .contents_wrap .contact_area .sub_text { + font-size: 16px; + } + .buy .contents_wrap .contact_area ul { + font-size: 18px; + gap: 8px; + } + .buy .contents_wrap .contact_area ul li { + gap: 8px; + } + .buy .contents_wrap .contact_area ul li i { + width: 24px; + } +} + +@media (max-width: 1400px) { + footer .footer_menu { + display: none; + } + footer .comp_contact { + width: initial; + min-width: 30%; + justify-content: end; + } + h2 { + font-size: 64px; + } + .h_4 { + font-size: 16px; + } + .grand_tit { + font-size: 48px; + } + .sub_tit { + font-size: 28px; + } + .sub_text { + font-size: 18px; + line-height: 28px !important; + } + .sitemap div[class*="menu"] a { + padding-left: 16px; + gap: 8px; + } + .sitemap div[class*="menu"] a span { + font-size: 32px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 42px; + top: -52px; + } + .floating_menu { + width: 64px; + height: 340px; + padding: 36px 0 40px 0; + top: 56px; + } + .floating_menu li span { + font-size: 12px; + line-height: 170%; + } + + .popup_container, + .mypage.log, + .mypage.edit { + width: calc(100% - (86px * 2)); + height: calc(100% - 140px); + } + .popup_container .popup_tit { + min-width: 340px; + padding: 64px 0 48px 24px; + } + .popup_container .popup_tit .h_1 { + font-size: 64px; + margin-bottom: 8px; + } + .popup_container::after, + .popup_container::before { + font-size: 100px; + top: -20px; + } + .join_btn_wrap button { + font-size: 20px; + line-height: 68px; + } + .btn_confirm button { + font-size: 20px; + line-height: 68px; + } + .login::after { + left: 148px; + } + .login::before { + left: 333px; + } + .search::after { + left: 146px; + } + .search::before { + left: 338px; + } + .search .popup_tit .h_1 { + font-size: 54px; + } + .search .popup_contents_wrap { + padding: 80px 48px 16px; + } + .register::after { + left: 64px; + } + .register::before { + left: 332px; + } + .register .popup_contents_wrap { + justify-content: flex-start; + } + .mypage.edit .popup_tit .h_1 { + font-size: 56px; + } + .mypage::after { + left: 73px; + } + .mypage::before { + left: 335px; + } + .mypage .my_info .name h4 { + font-size: 28px; + } + .mypage .my_info .detail li { + padding: 0 24px; + } + .popup_in:has(.privacy) { + width: 70%; + height: 70%; + } + .privacy { + width: 100%; + height: 100%; + } + .popup_in:has(.privacy) .btn_close { + top: -42px; + } + + .intro { + padding-bottom: 80px; + } + .intro .top { + height: 360px; + gap: 8px; + } + .value .features { + padding: 90px 10px 10px 10px; + gap: 20px; + } + .value .features .f_wrap { + padding: 100px 24px 24px 24px; + pointer-events: none; + transform: none !important; + } + .value .features .f_wrap .sub_text { + color: #fff; + } + .value .system { + height: 1150px; + } + .value .system .system_tit { + padding: 0; + padding-left: 32px; + } + + .interface .route .subs li .mid_tit { + font-size: 40px; + } + .interface .route .subs li .sub_text { + font-size: 18px; + margin-top: 20px; + } + .interface .route .subs li .sub_text ul { + margin-top: 12px; + } + + .primary .route .fix { + gap: 20px; + } + .primary .route .fix > * { + width: 1040px; + } + .primary .route .content { + height: 460px; + transform: translateX(-1.5%); + } + .primary .route .tabs { + transform: scale(0.7); + } + .primary .route .subs li .sub_tit { + font-size: 24px; + margin-bottom: 12px; + } + .primary .route .subs li .mid_tit { + font-size: 56px; + margin-right: 16px; + letter-spacing: -0.06em; + } + .primary .route .subs li .sub_text { + font-size: 18px; + } + .primary .process .left { + min-width: 360px; + padding-left: 88px; + } + .primary .process .left .mid_tit { + font-size: 34px; + } + .primary .process .left .mid_tit.on { + text-indent: -48px; + } + .primary .process .right { + padding: 160px 80px 100px 42px; + } + .primary .process .right .style .sub_figs { + gap: 0; + height: 360px; + } + .primary .process .right .style .text { + padding: 0 20px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 320px; + } + + .floorplan .key .left { + padding-left: 80px; + min-width: 450px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 80px); + height: 360px; + transform: translateY(-200px); + } + .floorplan .key .left .mid_tit span { + left: 80px; + bottom: -66px; + font-size: 48px; + } + .floorplan .key .left ul { + padding-top: 160px; + } + .floorplan .key .right { + padding-right: 100px; + padding-top: 255px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: initial; + } + .floorplan .key .right .sub_text br { + display: none; + } + .floorplan .key .right .sub_figs .text br { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 88%; + } + .floorplan .info .left .mid_tit { + left: calc(56px - 12px); + width: calc(100vw - 56px); + } + .floorplan .info .left .mid_tit span { + left: 56px; + } + .floorplan .find .find03 .sub_figs .find_03_move { + padding: 24px 0 16px; + } + .floorplan .print .right .sub_figs .imgs img { + object-fit: cover; + } + + .forbim .process .left { + min-width: 360px; + padding-left: 88px; + } + .forbim .process .left .mid_tit { + font-size: 34px; + } + .forbim .process .left .mid_tit.on { + text-indent: -38px; + } + .forbim .process .right { + padding: 120px 96px 120px 56px; + } + + .buy .contents_wrap { + padding: 0 80px; + gap: 80px; + } + .buy .contents_wrap .mid_tit { + font-size: 34px; + } + .buy .contents_wrap .ask_area .mid_tit::after { + top: -42px; + font-size: 92px; + } + .buy .contents_wrap .ask_area .ask_btn { + gap: 8px; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 18px; + height: 80px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 24px; + } + + .faq #container { + padding: 0 80px; + } +} + +@media (max-width: 1200px) { + header { + height: 48px; + padding: 0 8px 0 16px; + } + header h1 a { + width: 140px; + } + header .menu_my, + header .menu_ham, + header .menu_admin { + padding: 6px; + } + header .menu_my_list { + left: initial; + right: 0; + } + header .menu_my_list::before { + left: initial; + right: 15px; + } + footer { + padding: 12px 32px; + } + footer .footer_wrap { + gap: 24px; + } + footer .comp_info .logo_baron { + min-width: 200px; + } + footer .btn_privacy { + font-size: 16px; + } + footer .comp_copy { + flex-direction: column; + } + footer .copyright { + font-size: 13px; + } + footer .footer_sitemap .family_wrap { + margin: 0; + } + h2 { + font-size: 56px; + } + .floating_menu { + width: 46px; + height: 150px; + padding: 26px 0 30px 0; + background: none; + } + + .floating_menu::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 76px; + background: url(../img/floating_bg_r4.png) center top / 100% auto no-repeat; + z-index: -1; + } + + .floating_menu::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 76px; + background: url(../img/floating_bg_r4.png) center bottom / 100% auto + no-repeat; + z-index: -1; + } + .floating_menu .floating_guide, + .floating_menu .floating_download { + display: none; + } + .floating_menu li a i { + width: 24px; + } + .floating_menu li span { + font-size: 10px; + line-height: initial; + display: none; + } + .floating_menu li.floating_faq i { + margin-top: 6px; + } + .floating_menu li.floating_guide i { + margin-top: 4px; + } + + .intro { + padding-bottom: 80px; + } + .intro .top { + height: 320px; + gap: 16px; + } + .intro .keyword span { + font-size: 28px; + } + + .popup_in:not(:has(.privacy)) .btn_close { + top: 0; + right: 0; + background: none; + } + .popup_container { + width: 100%; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + top: 0; + right: 0; + left: 0; + transform: initial; + border: 0; + border-radius: 0; + } + .radio_wrap label { + font-size: 16px; + } + .register input[type="checkbox"] { + width: 24px; + } + .register .checkbox_wrap.all h4 { + font-size: 18px; + } + .popup_contents_wrap input { + font-size: 16px; + } + .popup_in:has(.privacy) { + width: 80%; + height: 80%; + } + .popup_in:has(.privacy) .btn_close { + top: -46px; + right: -3px; + } + + .sitemap { + flex-direction: column; + padding: 0; + } + .sitemap div[class*="bg_line"] { + display: none; + } + .sitemap div[class*="menu"] { + width: 100%; + height: 100%; + } + .sitemap div[class*="menu"] a { + padding: 0; + text-align: center; + } + .sitemap div[class*="menu"] a span { + font-size: 38px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 60px; + top: -20px; + left: 20px; + text-align: left; + opacity: 0.1; + display: initial; + } + .sitemap .menu1 a span::after { + content: " Value of EG-BIM"; + } + .sitemap .menu2 a span:after { + content: "Interface"; + } + .sitemap .menu3 a span:after { + content: "Key Features"; + } + .sitemap .menu4 a span:after { + content: "Drawing management"; + } + .sitemap .menu5 a span:after { + content: "Cross Check"; + } + .sitemap div[class*="menu"] a .sub_text { + display: none; + } + .sitemap div[class*="menu"]:hover { + width: 100%; + } + .sitemap div[class*="menu"]:hover a { + opacity: 1; + transform: scale(1); + } + + .main .pagination_main { + right: 24px; + gap: 16px; + font-size: 16px; + } + .main .pagination_main li span { + font-size: 17px; + margin-left: 4px; + } + + .value .intro .top { + margin-top: 64px; + } + .value .intro .keyword span br.brk { + display: initial; + } + .value .intro .dia_li { + width: 200px; + padding: 10px; + } + .value .intro .dia_element_wrap { + gap: 80px; + } + .value .intro .dia_element { + flex-direction: column !important; + } + .value .intro .dia_element .dia_line { + width: 1px; + height: 10px; + } + .value .intro .dia_element:nth-child(2) { + margin-top: 300px; + } + .value .intro .dia_element:nth-child(3) .dia_li li:nth-child(3) br { + display: none; + } + .value .intro .dia_element:nth-child(3) .dia_li li:nth-child(3) br.brk { + display: initial; + } + .value .intro .dia_appendix { + height: 40%; + bottom: -200px; + gap: 140px; + } + .value .intro .dia_appendix .app_etc { + transform: translate(-20px, 20px); + } + .value .intro .dia_appendix .app_bg:nth-child(2) .app_etc { + transform: translate(20px, 20px); + } + .value .features { + flex-direction: column; + align-items: center; + height: auto; + padding: 16px; + padding-bottom: 48px; + gap: 20px; + } + .value .feature_bg { + width: 100%; + position: sticky; + top: 0; + z-index: -2; + } + .value .feature_bg::after { + position: absolute; + content: ""; + width: 100%; + height: 100vh; + background-image: url(../img/value_feature_bg.png); + background-position: center bottom; + background-size: cover; + background-repeat: no-repeat; + } + .value .feature_intro { + background: none; + } + .value .feature_intro p { + font-size: 18px; + } + .value .feature_intro .line, + .value .feature_intro .dot { + display: none; + } + .value .features .lines { + display: none; + } + .value .features .f_wrap { + max-width: 640px; + height: 340px; + border-radius: 24px; + gap: 16px; + justify-content: flex-end; + padding: 32px; + } + .value .features .f_wrap i { + width: 32px; + } + .value .features .f_wrap .sub_tit br { + display: none; + } + .value .features .f_wrap .sub_text { + line-height: 24px; + height: initial; + } + .value .system .diagram_wrap { + right: 52%; + transform: translateX(50%); + } + + .interface .route .fix { + padding: 0 48px; + } + .interface .route .subs { + min-width: 340px; + } + .interface .route .subs li .sub_tit { + font-size: 80px; + } + .interface .route .subs li .mid_tit { + font-size: 32px; + } + .interface .route .subs li .sub_text { + font-size: 16px; + line-height: 26px !important; + margin-top: 12px; + } + .interface .dual .dual_top { + padding: 120px 80px 0; + } + .interface .dual .detail .subs { + padding: 0 80px; + } + + .primary .intro::before { + right: 48px; + font-size: 100px; + } + .primary .route .fix > * { + width: 920px; + } + .primary .route .content { + height: 420px; + transform: translateX(-3%); + } + .primary .route .tabs { + transform: scale(0.65); + } + .primary .route .subs li .mid_tit { + font-size: 48px; + } + .primary .route .subs li .sub_text { + font-size: 16px; + line-height: 26px !important; + } + + .primary .process { + flex-direction: column; + gap: 80px; + } + .primary .process .left { + display: none; + } + .primary .process .right { + padding: 0; + padding-bottom: 80px; + gap: 64px; + } + .primary .process .right > div { + padding: 0 64px 32px; + } + .primary .process .right .mid_tit.m { + position: sticky; + top: 0; + left: 0; + display: flex !important; + width: 100%; + height: 120px; + box-shadow: 0 8px 8px #00000011; + align-items: flex-end; + padding: 0 0 12px 64px; + font-size: 32px; + font-weight: 700; + background-color: #fff; + z-index: 1; + } + .primary .process .right .mid_tit.m .num { + margin-right: 10px; + font-weight: 300; + } + .primary .process .right .sub_tit { + font-size: 24px; + } + .primary .process .right .sub_figs { + min-height: initial; + border-radius: 4px; + overflow: hidden; + } + .primary .process .right .sub_figs .text { + padding: 16px; + } + .primary .process .right .sub_figs .text li { + font-size: 16px; + padding-left: 12px; + margin-bottom: 4px; + } + .primary .process .right .sub_figs .text b { + font-size: 18px; + } + .primary .process .right .sub_figs .text li::before { + top: 10px; + } + .primary .process .right .style .text { + width: 64%; + padding: 32px; + gap: 12px; + } + .primary .process .right .style .sub_figs { + height: 280px; + } + .primary .process .right .style .sub_figs:last-child { + margin-bottom: 0; + } + .primary .process .right .style .sub_figs .text li { + margin-bottom: 4px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 280px; + } + .primary .process .right .print_area .sub_figs .imgs > div { + height: 280px; + } + + .floorplan .key { + margin-bottom: 40px; + } + .floorplan .key .left { + min-width: 350px; + padding-left: 64px; + } + .floorplan .key .left .mid_tit { + width: calc(100vw - 64px); + } + .floorplan .key .left .mid_tit span { + font-size: 40px; + line-height: 52px; + bottom: -50px; + left: 64px; + } + .floorplan .key .left ul { + padding-top: 140px; + gap: 16px; + } + .floorplan .key .left ul li { + font-size: 16px; + } + .floorplan .key .left ul li.on { + font-size: 18px; + } + .floorplan .key .right { + padding-right: 76px; + padding-top: 240px; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: block !important; + } + .floorplan .info .left .mid_tit { + left: calc(64px - 12px); + } + + .forbim .theorys .diagram_wrap { + width: 480px; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + gap: 125%; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 24px; + } + .forbim .process .left { + min-width: 320px; + } + .forbim .process .left .mid_tit::after { + left: -20px; + } + .forbim .process .right .sub_tit img { + width: 40px; + margin-bottom: 16px; + } + .forbim .process .right .sub_figs > div span { + font-size: 14px; + } + .forbim .process .link .sub_figs .fig04 span { + font-size: 16px; + padding: 0 24px; + height: 32px; + } + + .buy .contents_wrap { + padding: 0 64px; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 16px; + height: 72px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 20px; + } + .buy .contents_wrap .video_area { + flex-direction: column; + } + .buy .contents_wrap .contact_area { + flex-direction: row; + padding: 24px 0px; + gap: 64px; + } + .buy .contents_wrap .contact_area .line { + width: 1px; + height: inherit; + border-left: 1px dashed #99999980; + border-bottom: 0; + } + + .faq #container { + padding: 0 64px; + } + .faq .sub_tab { + height: 52px; + } +} + +@media (max-width: 992px) { + .btn_top { + display: none; + } + .mouse_mark { + display: none !important; + } + h2 { + font-size: 48px; + } + .h_4 { + font-size: 16px; + } + .grand_tit { + font-size: 38px; + } + + .intro { + gap: 56px; + padding-bottom: 56px; + } + .intro .top span { + font-size: 14px; + } + .container .intro .top { + margin-top: 0; + height: 220px; + gap: 8px; + } + .intro .keyword { + gap: 24px; + } + .value .intro { + padding-bottom: 320px; + } + i.egbim_obj { + width: 48px !important; + } + .keyword span { + font-size: 20px !important; + } + .keyword p { + font-size: 16px !important; + line-height: 140%; + } + + .popup_in:not(:has(.privacy)) .close_div { + margin-right: 16px; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) + brightness(106%) contrast(100%); + } + .popup_container { + flex-direction: column; + } + .popup_container::after, + .popup_container::before { + display: none; + } + .popup_container .popup_tit { + width: 100%; + min-width: initial; + min-height: 160px; + padding: 0; + text-align: center; + justify-content: center; + gap: 16px; + } + .popup_container .popup_tit br { + display: none; + } + .popup_container .popup_tit .h_1 { + font-size: 34px !important; + margin: 0; + } + .popup_container .popup_tit .h_3 { + font-size: 14px; + } + .popup_contents_wrap { + padding: 48px 16px 24px !important; + justify-content: flex-start; + position: relative; + } + .popup_contents_wrap input { + font-size: 16px; + } + .popup_contents_wrap table th { + _width: 32%; + padding-top: 8px; + } + .popup_contents_wrap select { + font-size: 16px; + } + .popup_contents_wrap .pop_notice { + position: absolute; + top: 8px; + right: 8px; + } + .login .popup_tit .h_3 br { + display: none; + } + .login input { + font-size: 18px; + } + .login .btn_go div a span { + font-size: 16px; + } + .search .popup_tit .h_1 { + line-height: 130%; + } + .search .popup_tit .h_3 { + display: none; + } + .search .btn_wrap { + min-height: 56px; + } + .search .btn_wrap li span { + font-size: 16px; + } + .radio_wrap label { + font-size: 16px; + gap: 4px; + } + .radio_wrap input[type="radio"], + .radio_wrap input[type="radio"]:checked, + .radio_wrap input[type="radio"]:checked::before { + all: initial; + -webkit-appearance: radio; + } + .radio_wrap .text_m { + display: block !important; + } + .register .popup_tit .h_3 { + flex-grow: initial; + } + .register .popup_tit .h_3 br { + display: none; + } + .register .checkbox_wrap.all h4 { + font-size: 16px; + } + .register .popup_tit ul { + display: none; + } + .register .checkbox_wrap h4 { + font-size: 16px; + } + .register input[type="checkbox"], + .register input[type="checkbox"]:checked, + .register input[type="checkbox"]:checked::before { + /*all: initial;*/ + -webkit-appearance: checkbox; + } + .register .addinfo-side-notice { + background: #1c3b2d; + } + + .mypage h4 { + font-size: 20px !important; + } + .mypage.log, + .mypage.edit { + width: 100% !important; + height: 100vh; + height: -webkit-fill-available; + height: fill-available; + } + .mypage .popup_tit .h_3 br { + display: none; + } + .mypage .popup_contents_wrap { + gap: 48px; + } + .mypage .my_info { + font-size: 18px; + } + .mypage .my_info .name { + justify-content: flex-start; + padding-bottom: 16px; + } + .mypage .my_info .name button { + font-size: 14px; + padding: 4px 16px; + } + .mypage .my_info .detail { + flex-direction: column; + justify-content: flex-start; + gap: 8px; + } + .mypage .my_info .detail li { + padding: 0; + text-align: initial; + display: flex; + border: 0; + gap: 4px; + } + .mypage .my_info .detail li div { + min-width: 120px; + justify-content: flex-start; + gap: 4px; + padding: 0; + font-size: 14px; + } + .mypage .my_info i { + margin: 0; + width: 18px; + } + .mypage .my_qna thead tr { + height: 28px; + } + .mypage .my_qna thead tr th { + font-size: 14px; + padding: 2px 0; + } + .mypage .my_qna thead tr th:nth-child(1) { + width: 8% !important; + } + + .intro_wrap .intro_txt .txt_mask span { + font-size: 34px; + } + .intro_wrap .intro_txt .txt_mask font { + font-size: 26px; + } + @keyframes clip_play { + 0% { + clip-path: inset(50% 50% round 10px 10px 10px 10px); + top: -100px; + } + 30% { + clip-path: inset(49.5% 45% round 10px 10px 10px 10px); + top: -100px; + } + 60% { + clip-path: inset(45% 45% round 10px 10px 10px 10px); + top: -140px; + } + 100% { + clip-path: inset(0% 0% round 0px 0px 0px 0px); + top: 0; + } + } + + .value .system_bg::after { + height: 1100px; + } + .value .system { + height: 1000px; + } + .value .system .system_tit { + padding: 0; + height: 246px; + } + .value .system .system_tit span { + font-size: 72px; + padding-left: 32px; + } + .value .system .diagram_wrap { + width: 280px; + bottom: 150px; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -65%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -14%; + right: 124%; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -14%; + left: 124%; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: 29%; + left: 118%; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_core + span:nth-child(4) { + top: 8%; + right: -15%; + } + + .interface .route .keyword { + gap: 16px; + } + .interface .route .fix { + background-size: 150%; + } + .interface .route .content { + flex-direction: column; + padding-top: 0; + gap: 24px; + justify-content: center; + align-items: center; + } + .interface .route .subs { + width: 100%; + min-width: initial; + min-height: 210px; + } + .interface .route .subs li .sub_tit { + font-size: 80px; + display: none; + } + .interface .route .subs li .mid_tit { + font-size: 36px; + line-height: 120%; + } + .interface .route .subs li .mid_tit br { + display: none; + } + .interface .route .subs li .sub_text { + margin-top: 20px; + } + .interface .route .subs li .sub_text br.brk { + display: initial; + } + .interface .route .subs li .sub_text ul { + margin-top: 8px; + } + .interface .route .subs li .sub_text ul li { + font-size: 14px; + text-indent: 16px; + line-height: 150%; + } + .interface .route .subs li .sub_text ul li::before { + top: 8px; + left: 2px; + } + .interface .route .imgs { + max-height: 420px; + width: 100%; + } + .interface .route .imgs::before, + .interface .route .imgs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 50%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .interface .route .imgs::before { + bottom: -8%; + } + .interface .route .imgs::after { + bottom: calc(-8% - 8px); + animation-delay: 0.5s; + } + .interface .route .imgs li:nth-child(1) span:nth-child(1) { + top: -30px; + left: 20px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(2) { + top: -30px; + right: 100px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(3) { + top: initial; + bottom: -16px; + left: 10px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(4) { + top: initial; + bottom: -16px; + right: 80px; + } + .interface .route .imgs li:nth-child(1) span:nth-child(5) { + top: 44%; + left: 50%; + transform: translate(-50%, -50%); + } + .interface .route .imgs li:nth-child(2) span:nth-child(1) { + top: -30px; + left: 37%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(1)::after { + transform: rotate(90deg); + top: calc(100% + 7px); + left: calc(50% - 7px); + } + .interface .route .imgs li:nth-child(2) span:nth-child(2) { + top: 26%; + left: 44%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(2)::after { + transform: rotate(-90deg); + top: -7px; + left: calc(50% - 7px); + } + .interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 75%; + left: 5%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 75%; + right: 20%; + } + .interface .route .imgs li:nth-child(3) span { + top: 8%; + right: 24.5%; + } + .interface .route .imgs:has(li:nth-child(3).on)::before, + .interface .route .imgs:has(li:nth-child(3).on)::after { + display: none; + } + .interface .dual .dual_top { + padding: 0; + overflow-x: hidden; + } + .interface .dual .dual_top .sub_tit { + margin-top: 120px; + } + .interface .dual .dual_top .sub_tit br.brk { + display: initial; + } + .interface .dual .dual_top #myimg { + width: 120%; + margin-left: -10%; + margin-top: 24px; + } + .interface .dual .detail { + padding: 0; + margin-top: 80px; + } + .interface .dual .detail .subs { + padding: 40px; + margin-bottom: 24px; + } + .interface .dual .detail .sub_tit { + margin-bottom: 0; + } + .interface .dual .detail .exam img { + width: 100%; + } + .interface .dual .detail .exam span { + font-size: 16px; + } + .interface .dual .detail .sub_text { + font-size: 16px; + } + .interface .dual .detail .element { + padding: 24px 32px; + } + + .primary .intro { + padding-bottom: 120px; + } + .primary .intro .diagram_wrap { + width: 360px; + } + .diagram_wrap .dia_element .dia_tit { + font-size: 16px; + } + .primary .intro .diagram_wrap .e01 { + left: -24%; + } + .primary .intro .diagram_wrap .e02 { + bottom: 0; + left: -45%; + } + .primary .intro .diagram_wrap .e03 { + bottom: 30%; + right: -38%; + } + .primary .route .fix > * { + width: 760px; + } + .primary .route .subs li .mid_tit { + display: block; + margin-bottom: 40px; + font-size: 64px; + } + .primary .route .tabs { + transform: scale(0.55); + } + .primary .route .content { + height: 360px; + } + .primary .route .imgs::before, + .primary .route .imgs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 55%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .primary .route .imgs::before { + bottom: -8%; + } + .primary .route .imgs::after { + bottom: calc(-8% - 8px); + animation-delay: 0.5s; + } + + .floorplan .intro::before { + font-size: 90px; + bottom: 16px; + } + .floorplan .intro .diagram_wrap { + margin: 150px 0; + } + .floorplan .intro .dia_element i { + width: 40px; + } + .floorplan .intro .dia_element .dia_tit { + font-size: 16px; + } + .floorplan .intro .dia_element01 { + top: -45%; + } + .floorplan .intro .dia_element02 { + bottom: -9%; + left: -24%; + } + .floorplan .intro .dia_element03 { + bottom: -9%; + right: -24%; + } + .floorplan .key { + flex-direction: column; + padding: 0; + margin-bottom: 120px; + } + .floorplan .key .left { + width: 100%; + min-width: initial; + height: 100px; + padding: 0; + box-shadow: 0 8px 8px #00000011; + } + .floorplan .key .left .mid_tit { + transform: initial; + width: 100%; + height: 100%; + left: initial; + background: #fff !important; + color: #000; + } + .floorplan .key .left .mid_tit span { + left: 48px; + font-size: 34px; + bottom: 8px; + } + .floorplan .key .left .mid_tit span em { + color: #000; + } + .floorplan .key .left .mid_tit span br { + display: none; + } + .floorplan .key .left ul { + display: none; + } + .floorplan .key .right { + padding: 0 48px 48px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: 2.5fr 1fr; + } + .floorplan .key .right .sub_figs .text { + padding: 24px 0; + font-size: 16px; + } + .floorplan .key .right .sub_figs .text br { + display: initial; + } + .floorplan .key .right .sub_figs .text br.brk { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 40%; + } + .floorplan .key .right .sub_figs .bottom img { + width: 30px; + } + .floorplan .info .left .mid_tit span { + left: 48px !important; + } + .floorplan .print { + margin-bottom: 40px; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: none !important; + } + .floorplan .find .find03 .sub_figs .find_03_move img:nth-child(2) { + margin-bottom: 4%; + } + + .forbim .intro .visual { + height: 240px; + } + .forbim .intro .visual img { + width: 80%; + } + .forbim .theorys .mid_tit { + font-size: 32px; + } + .forbim .theorys .diagram_wrap { + width: 380px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap::before { + top: -10%; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + gap: 130%; + } + .forbim .process { + flex-direction: column; + gap: 80px; + } + .forbim .process .left { + display: none; + } + .forbim .process .right { + padding: 0; + padding-bottom: 80px; + gap: 64px; + } + .forbim .process .right > div { + padding: 0 64px 32px; + } + .forbim .process .right .mid_tit.m { + position: sticky; + top: 0; + left: 0; + display: flex !important; + width: 100%; + height: 120px; + box-shadow: 0 8px 8px #00000011; + align-items: flex-end; + padding: 0 0 12px 64px; + font-size: 32px; + font-weight: 700; + background-color: #fff; + z-index: 1; + } + .forbim .process .right .mid_tit.m .num { + margin-right: 10px; + font-weight: 300; + } + .forbim .process .right .sub_tit { + font-size: 24px; + } + + .buy .contents_wrap .ask_area { + flex-direction: column; + align-items: initial; + margin-top: 24px; + } + .buy .contents_wrap::after { + bottom: -40%; + } + + .faq .sub_tab { + height: 42px; + } + .faq .sub_tab li a { + font-size: 14px; + } + .faq #bo_list #fqalist tbody .td_stat span { + width: 100%; + padding: 0; + } +} + +@media (max-width: 768px) { + .main footer.footer_on { + display: none; + } + footer { + height: initial; + padding: 40px 32px; + } + footer * { + font-size: 14px !important; + } + footer .footer_wrap { + flex-direction: column; + gap: 20px; + } + footer .comp_inner { + display: grid; + grid-template-columns: 100%; + gap: 16px; + } + footer .comp_copy { + margin-left: 0; + gap: 4px; + } + footer .comp_copy > * { + margin: 0; + } + footer .ceo { + margin-top: 8px; + } + footer .comp_info { + width: 100%; + } + footer .comp_info .logo_baron { + width: 200px; + } + footer .address em.tel { + margin: 0; + } + footer .comp_contact { + max-width: 400px; + grid-row: 3; + } + footer .footer_sitemap { + width: 100%; + } + footer .footer_sitemap .family_wrap { + width: 100%; + margin: 0; + } + footer .footer_sitemap .family_btn { + width: 100%; + } + footer .btn_privacy em::after { + font-size: 12px; + } + footer .copyright { + font-size: 12px !important; + } + .sub_tit { + font-size: 28px; + } + .sub_text { + font-size: 16px; + line-height: 26px !important; + } + .main .pagination_main { + bottom: calc((60 / 1080) * 100%); + } + .mypage .my_qna thead tr th:nth-child(1), + .mypage .my_qna tbody tr td:nth-child(1) { + display: none; + } + .mypage .my_qna thead tr th:nth-child(2), + .mypage .my_qna tbody tr td:nth-child(2) { + display: none; + } + .sitemap { + gap: 8px; + } + .sitemap div[class*="menu"] a span:after { + font-size: 48px; + bottom: -55px; + } + .popup_in:has(.privacy) { + width: 100%; + height: 100%; + top: 0; + left: 0; + transform: initial; + } + .popup_in:has(.privacy) .btn_close { + top: 0; + right: 0; + background: none; + } + .popup_in:has(.privacy) .close_div { + margin-right: 16px; + filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(82deg) + brightness(106%) contrast(100%); + } + .privacy { + top: 0; + left: 0; + transform: initial; + border: 0; + } + .privacy .contents_wrap { + padding: 56px 16px 16px; + gap: 16px; + } + .privacy .content { + padding: 8px; + } + .btn_back { + font-size: 16px; + } + .btn_back::before { + width: 8px; + height: 8px; + } + + .value .intro .summarys_wrap .dia_element_wrap { + gap: 8px; + margin-top: 75px; + } + .value .intro .summarys_wrap .dia_element .dia_tit { + width: 96px; + font-size: 14px; + } + .value .intro .summarys_wrap .dia_element .dia_tit br.brk { + display: initial !important; + } + .value .intro .summarys_wrap .dia_tit span { + padding: 0; + } + .value .intro .summarys_wrap .dia_element:nth-child(1) { + margin-top: 2px; + } + .value .intro .summarys_wrap .dia_element:nth-child(2) { + margin-top: 152px; + } + .value .intro .summarys_wrap .dia_li { + width: 148px; + padding: 8px; + display: flex; + flex-direction: column; + gap: 4px; + } + .value .intro .summarys_wrap .dia_li li { + font-size: 14px; + line-height: 120%; + margin: 0; + list-style: none; + } + .value .intro .summarys_wrap .dia_li li.dia_li_tit { + font-size: 16px; + margin-bottom: 8px; + } + .value .intro .summarys_wrap .dia_li li:not(li.dia_li_tit) { + margin-left: 8px; + } + .value .intro .summarys_wrap .dia_li li:not(li.dia_li_tit)::after { + position: absolute; + content: ""; + top: 6px; + left: -6px; + width: 3px; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: #fff; + } + .value .intro .summarys_wrap .dia_circles_wrap { + width: 240px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core { + width: 85%; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core img { + width: 100px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_dots.move .dot { + transform-origin: 8px 96px; + } + .value .intro .summarys_wrap .dia_appendix { + height: 42%; + font-size: 14px; + gap: 132px; + bottom: -162px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg { + width: 120px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg .app_etc { + transform: initial !important; + padding: 4px 12px; + font-size: 10px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg:nth-child(1) .app_etc { + margin-right: 28px; + } + .value .intro .summarys_wrap .dia_appendix .app_bg:nth-child(2) .app_etc { + transform: translateX(16px) !important; + } + .value .system { + height: 1200px; + } + .value .system .diagram_wrap { + bottom: 260px; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -70%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -48%; + left: -33%; + right: initial; + text-align: left; + } + .value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: -30%; + left: 30%; + right: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -37%; + right: -38%; + left: initial; + text-align: right; + } + .value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: -30%; + right: 30%; + left: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: -20%; + right: -28%; + left: initial; + text-align: right; + } + .value .system .diagram_wrap .dia_element:nth-child(4) .line { + width: 1px; + height: 80px; + top: 120%; + left: 50%; + } + + .interface .route .subs li .sub_text br.brk { + display: none; + } + .interface .route .subs li:nth-child(2) .mid_tit br { + display: initial; + } + + .primary .intro { + padding-bottom: 180px; + } + .primary .intro::before { + font-size: 80px; + right: 0; + } + .primary .intro .diagram_wrap { + margin-top: 64px; + } + .primary .intro .diagram_wrap .dia_element { + flex-direction: column-reverse; + align-items: flex-end; + gap: 4px; + } + .primary .intro .diagram_wrap .e01 { + top: -14%; + left: -8%; + } + .primary .intro .diagram_wrap .e02 { + bottom: -22%; + left: -6%; + flex-direction: column; + } + .primary .intro .diagram_wrap .e02 br.brk { + display: initial; + } + .primary .intro .diagram_wrap .e03 { + right: -16%; + text-align: right; + } + .primary .route { + margin-bottom: 0; + } + .primary .route .fix { + padding: 72px 0 0; + background-image: none; + overflow: hidden; + background-color: #faf9f6; + } + .primary .route .fix > * { + transform: initial; + } + .primary .route .subs { + margin: 0; + padding: 0 48px; + width: initial; + min-height: 220px; + position: relative; + } + .primary .route .subs::before, + .primary .route .subs::after { + content: ""; + width: 8px; + height: 8px; + display: block; + position: absolute; + left: 50%; + transform: translateX(-50%); + border: solid var(--color-green); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + animation: arrow 2s infinite ease; + } + .primary .route .subs::before { + bottom: 2%; + } + .primary .route .subs::after { + bottom: calc(2% - 8px); + animation-delay: 0.5s; + } + .primary .route .subs:has(li:nth-child(3).on)::before, + .primary .route .subs:has(li:nth-child(3).on)::after { + display: none; + } + .primary .route .subs li .sub_tit { + font-size: 20px; + margin-bottom: 16px; + line-height: 140%; + } + .primary .route .subs li .mid_tit { + font-size: 56px; + margin-bottom: 16px; + } + .primary .route .subs li .sub_text { + font-size: 16px; + margin-top: 24px; + } + .primary .route .subs li .sub_text br { + display: none; + } + .primary .route .content { + margin: 0 auto; + height: 100%; + width: 100%; + overflow: hidden; + border-radius: 16px 16px 0 0; + position: relative; + background-color: #0c271e; + z-index: -1; + } + .primary .route .content::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: linear-gradient( + 90deg, + #00000055 0%, + transparent 10%, + transparent 90%, + #00000055 100% + ); + z-index: -1; + } + .primary .route .tabs { + display: none; + background: none; + } + .primary .route .imgs { + border-radius: 0; + min-width: initial; + padding: 16px; + } + .primary .route .imgs::before, + .primary .route .imgs::after { + display: none; + } + .primary .route .imgs li a { + overflow-y: hidden; + overflow-x: auto; + padding: 0; + } + .primary .route .imgs li a img { + width: fit-content; + object-fit: cover; + } + .primary .process .right .sub_figs { + padding: 0; + gap: 0; + height: max-content !important; + } + .primary .process .right .sub_tit br.brk { + display: initial; + } + .primary .process .right .sub_figs .text li { + font-size: 14px; + } + .primary .process .right .sub_figs .text b { + font-size: 16px; + } + .primary .process .right .style .text { + width: 100%; + padding: 16px; + } + .primary .process .right .style .sub_figs { + flex-direction: column; + } + .primary .process .right .style .sub_figs:last-child { + margin-bottom: 0; + } + .primary .process .right .style .sub_figs .text li { + margin-bottom: 4px; + } + .primary .process .right .block .sub_text br { + display: none; + } + .primary .process .right .block .sub_figs .imgs { + gap: 8px; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 200px; + } + .primary .process .right .block .sub_figs .imgs i { + width: 32px; + } + .primary .process .right .print_area .sub_figs .imgs { + flex-direction: column; + gap: 8px; + } + .primary .process .right .print_area .sub_figs .imgs > div { + height: 200px; + } + + .floorplan .intro::before { + font-size: 72px; + left: 4px; + } + .floorplan .intro .keyword br.brk { + display: initial; + } + .floorplan .key .right .sub_tit { + font-size: 22px; + margin-bottom: 12px; + } + .floorplan .key .right .sub_figs { + grid-template-columns: initial; + } + .floorplan .key .right .sub_figs .text { + min-width: initial; + } + .floorplan .key .right .sub_figs .text br { + display: none; + } + .floorplan .key .right .sub_figs .line { + width: 80%; + } + + .forbim .intro .keyword { + padding: 0 24px; + } + .forbim .intro .visual { + height: 240px; + background-size: cover; + overflow: hidden; + } + .forbim .intro .visual img { + width: 100%; + transform: translate(0%, -24%); + } + .forbim .theorys .mid_tit br.brk { + display: initial; + } + .forbim .theorys .diagram_wrap { + width: 70%; + margin-bottom: 120px; + } + .forbim .theorys .diagram_wrap .dia_elements_wrap { + top: 116%; + gap: 36%; + } + .forbim .theorys .diagram_wrap .dia_element { + justify-content: flex-start; + } + .forbim .theorys .diagram_wrap .dia_element .dia_text { + font-size: 16px; + } + .forbim .theorys .diagram_wrap .dia_element:last-child ul { + transform: initial; + _text-align: right; + } + .forbim .theorys .diagram_wrap .dia_element .line { + display: none; + } + .forbim .theorys .diagram_wrap .dia_element:first-child .line { + left: 0; + } + .forbim .theorys .diagram_wrap .dia_element:last-child .line { + right: 0; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap::before { + font-size: 16px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 20px; + } + + .buy .contents_wrap { + padding: 0; + gap: 64px; + margin-bottom: 80px; + } + .buy .contents_wrap .ask_area { + gap: 24px; + padding: 0 24px; + } + .buy .contents_wrap .ask_area .mid_tit { + font-size: 28px; + } + .buy .contents_wrap .ask_area .mid_tit::after { + top: -35px; + font-size: 64px; + } + .buy .contents_wrap .ask_area .sub_text { + font-size: 16px; + padding-left: 24px; + } + .buy .contents_wrap .ask_area .sub_text::after { + width: 16px; + } + .buy .contents_wrap .ask_area .ask_btn a { + gap: 2px; + min-width: 100px; + height: 64px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + gap: 6px; + } + .buy .contents_wrap .contact_area { + background-color: initial; + box-shadow: initial; + gap: 0; + justify-content: space-between; + padding: 0 24px; + } + + .faq .sub_tab li a { + width: 100%; + } + .faq #container { + padding: 0 24px; + } + .faq .sub_tit { + margin-top: 48px; + } + .faq #faq_sch { + max-width: 240px; + } + .faq #faq_sch .btn_submit { + gap: 0; + font-size: 0; + width: 45px; + min-width: 45px; + width: 45px; + } + .faq #bo_list #bo_btn_top { + max-width: 240px; + } + .faq #bo_list #bo_btn_top .bo_sch .sch_btn { + gap: 0; + width: 45px; + min-width: 45px; + width: 45px; + } + .faq #bo_list #bo_btn_top .bo_sch .sch_btn .sound_only { + font-size: 0; + } + .faq #bo_list #fqalist tbody .bo_cate_link { + display: none; + } + + /*20250801 1:1 문의 추가 */ + .faq .sub_tab li:not(:first-child, :last-child) { + width: 100%; + } + + .faq .search-wrap { + flex-direction: column; + gap: 20px; + } + .faq .search-wrap .qa-filters > div { + gap: 16px; + } + .form-wrap .form-group { + grid-template-columns: 1fr; + } + .form-wrap .form-item { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 10px; + padding: 12px 0; + } + .form-wrap .form-item .form-tit { + padding: 0; + } + + .faq .btn-area > .btn:not(.btn-write), + .faq .btn-group > .btn:not(.btn-write) { + width: 100px; + padding: 0 10px; + } + + .faq .tbl-wrap .tbl-group.user-info { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 4px; + } + .faq .comment-section .comment-list:has(.comment) { + padding: 0 16px; + } + .faq .comment-section .comment-form { + flex-direction: row; + } +} + +@media (max-width: 576px) { + br.brk { + display: initial !important; + } + h2 { + font-size: 36px; + } + .grand_tit { + font-size: 28px; + } + .sub_tit { + font-size: 22px; + } + + .intro .keyword { + gap: 16px; + } + + .popup_sitemap header h1 { + visibility: hidden; + } + .sitemap div[class*="menu"] a span { + font-size: 28px; + } + .sitemap div[class*="menu"] a span:after { + display: none; + } + + .popup_contents_wrap { + padding-top: 32px !important; + } + .popup_contents_wrap table th { + font-size: 14px; + width: 30%; + padding-top: 9px; + } + .popup_contents_wrap td button { + font-size: 14px; + } + .popup_container .popup_tit { + min-height: 140px; + } + .popup_container .popup_tit .h_3 { + display: none; + } + .popup_contents_wrap .guide_txt { + font-size: 16px; + } + .popup_contents_wrap .guide_txt p { + font-size: 22px; + margin-bottom: 16px; + } + .register input[type="checkbox"] { + width: 20px; + } + .register input[type="checkbox"]:checked::before { + font-size: 14px; + } + .register .checkbox_wrap.all h4 { + font-size: 16px; + } + .register .terms_wrap { + padding-bottom: 0px; + } + .search .btn_wrap { + min-height: 48px; + } + .login .btn_go div a span { + font-size: 14px; + } + .join_btn_wrap button { + line-height: 56px; + } + .btn_confirm button { + line-height: 56px; + } + .mypage.edit .sign_out a { + font-size: 14px; + } + .mypage.edit .sign_out i { + width: 20px; + } + .mypage .my_qna thead tr th:nth-child(4), + .mypage .my_qna thead tr th:nth-child(5) { + width: 20% !important; + } + .privacy .tab_wrap { + min-height: 56px; + } + .privacy .tab_wrap li span { + font-size: 16px; + } + .privacy .content { + padding: 0; + font-size: 14px; + } + .privacy .tit { + font-size: 14px; + } + .privacy .list_1 > li { + margin-bottom: 24px; + } + .privacy .list_2 { + margin-top: 8px; + } + .privacy .list_2 > li { + padding: 0; + margin-bottom: 8px; + margin-left: 24px; + } + .verify_wrap .code_input { + gap: 4px; + } + + .main .pagination_main { + font-size: 14px; + } + .main .pagination_main li span { + font-size: 15px; + margin: 0; + } + .main .pagination_main li div::after { + margin-top: 2px; + } + + .value .intro .summarys_wrap .dia_element_wrap { + gap: 2px; + margin-top: 56px; + } + .value .intro .summarys_wrap .dia_element .dia_tit { + width: 80px; + font-size: 14px; + } + .value .intro .summarys_wrap .dia_tit span { + border-width: 4px; + } + .value .intro .summarys_wrap .dia_element:nth-child(2) { + margin-top: 118px; + } + .value .intro .summarys_wrap .dia_li { + width: 116px; + padding: 6px; + } + .value .intro .summarys_wrap .dia_li li.dia_li_tit { + font-size: 12px; + margin-bottom: 4px; + } + .value .intro .summarys_wrap .dia_li li { + font-size: 11px; + line-height: 120%; + margin: 0; + list-style: none; + } + .value .intro .summarys_wrap .dia_circles_wrap { + width: 186px; + } + .value .intro .summarys_wrap .dia_circles_wrap .circle_core img { + width: 80px; + } + .value .intro .summarys_wrap .dia_appendix { + font-size: 12px; + gap: 80px; + bottom: -130px; + } + .value .feature_intro p { + font-size: 16px; + } + .value .feature_intro p br { + display: none; + } + .value .features { + flex-direction: column; + height: auto; + padding: 20px; + gap: 20px; + } + .value .features .f_wrap { + height: 280px; + border-radius: 24px; + gap: 16px; + justify-content: flex-end; + padding: 18px; + } + .value .features .f_wrap i { + width: 32px; + } + .value .features .f_wrap .sub_text { + line-height: 24px; + height: initial; + } + .value .system_bg::after { + height: 880px; + } + .value .system { + height: 860px; + } + .value .system .system_tit { + padding: 0; + height: 176px; + } + .value .system .system_tit span { + font-size: 52px; + padding-left: 16px; + } + .value .system .diagram_wrap { + width: 220px; + bottom: 180px; + right: 50%; + } + .value .system .diagram_wrap .dia_circles_wrap::after { + width: 110%; + } + .value .system .diagram_wrap .dia_circles_wrap .circle_core span { + font-size: 12px; + } + .value .system .diagram_wrap .dia_circles_wrap .circle_core span b { + font-size: 16px; + line-height: 100%; + } + .value .system .diagram_wrap .dia_element ul { + display: flex; + gap: 4px 16px; + flex-direction: column; + } + .value .system .diagram_wrap .dia_element ul li { + font-size: 14px; + line-height: initial; + } + .value .system .diagram_wrap .dia_element:nth-child(1) { + top: -72%; + } + .value .system .diagram_wrap .dia_element:nth-child(1) .line { + height: 60px; + bottom: -70px; + } + .value .system .diagram_wrap .dia_element:nth-child(2) { + bottom: -52%; + left: -25%; + } + .value .system .diagram_wrap .dia_element:nth-child(2) .line { + top: -40%; + left: 0; + } + .value .system .diagram_wrap .dia_element:nth-child(3) { + bottom: -51%; + right: -25%; + } + .value .system .diagram_wrap .dia_element:nth-child(3) .line { + top: -40%; + right: 0; + } + .value .system .diagram_wrap .dia_element:nth-child(4) { + top: -16%; + right: -21%; + } + .value .system .diagram_wrap .dia_element:nth-child(4) .line { + left: 55%; + height: 60px; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_core + span:nth-child(4) + _ { + right: -13%; + } + .value + .system + .diagram_wrap + .dia_circles_wrap + .circle_dots + .dot:nth-child(4) { + right: -5%; + } + + .interface .route .fix { + background-size: 280%; + padding: 24px; + } + .interface .route .subs li .sub_tit { + font-size: 64px; + } + .interface .route .subs li .mid_tit { + font-size: 28px; + } + .interface .route .subs li .mid_tit br { + display: initial; + } + .interface .route .subs li .sub_text { + margin-top: 8px; + } + .interface .route .subs li .sub_text br { + display: none !important; + } + .interface .route .subs li:nth-child(1) .mid_tit br { + display: none; + } + .interface .route .subs li:nth-child(3) .mid_tit br { + display: none; + } + .interface .route .imgs { + max-height: 260px; + } + .interface .route .imgs li:nth-child(2) span:nth-child(3) { + top: 68%; + left: 5%; + } + .interface .route .imgs li:nth-child(2) span:nth-child(4) { + top: 68%; + right: 20%; + } + .interface .dual .sub_tit { + font-size: 20px; + } + .interface .dual .detail .subs { + padding: 24px; + } + .interface .dual .detail .sub_tit { + margin-bottom: 0; + } + .interface .dual .detail .sub_text br { + display: none; + } + .interface .dual .detail .exam span { + font-size: 14px; + } + + .primary .intro .keyword br { + display: none; + } + .primary .intro .diagram_wrap { + width: 260px; + } + .primary .intro .diagram_wrap .circle_core span { + font-size: 18px; + line-height: 22px; + } + .primary .intro .diagram_wrap .dia_element i { + width: 30px; + } + .primary .intro .diagram_wrap .dia_element .dia_tit { + font-size: 14px; + } + .primary .intro .diagram_wrap .e01 { + top: -20%; + left: -16%; + } + .primary .intro .diagram_wrap .e02 { + bottom: -26%; + left: -12%; + flex-direction: column; + } + .primary .intro .diagram_wrap .e03 { + right: -16%; + text-align: right; + } + .primary .route .fix { + padding-top: 56px; + } + .primary .route .subs { + padding: 0 24px; + min-height: 230px; + } + .primary .route .subs li .sub_tit { + margin-bottom: 4px; + } + .primary .route .subs li .mid_tit { + font-size: 42px; + } + .primary .route .subs li .sub_text { + margin-top: 0; + } + .primary .process .right { + gap: 32px; + } + .primary .process .right > div { + padding: 0 24px 24px; + } + .primary .process .right .mid_tit.m { + padding-left: 24px; + font-size: 26px; + height: 88px; + } + .primary .process .right .sub_tit { + font-size: 22px; + } + .primary .process .right .block .sub_figs .imgs { + flex-direction: column; + } + .primary .process .right .block .sub_figs .imgs > div { + height: 200px; + } + .primary .process .right .block .sub_figs .imgs .fig02 { + display: flex; + align-items: flex-end; + } + + .floorplan .intro::before { + font-size: 52px; + } + .floorplan .intro .keyword { + padding: 0 32px; + } + .floorplan .intro .keyword br { + display: none !important; + } + .floorplan .intro .diagram_wrap { + margin: 100px 0; + } + .floorplan .intro .dia_element i { + width: 30px; + } + .floorplan .intro .dia_element .dia_tit { + font-size: 14px; + } + .floorplan .intro .dia_element .line { + width: 32px; + } + .floorplan .intro .dia_element01 { + top: -56%; + } + .floorplan .intro .dia_element02 { + bottom: -18%; + left: -32%; + } + .floorplan .intro .dia_element03 { + bottom: -18%; + right: -32%; + } + .floorplan .intro .diagram_wrap .dia_circles_wrap { + width: 200px; + } + .floorplan .intro .diagram_wrap .dia_circles_wrap .circle_core { + font-size: 24px; + } + .floorplan .intro .dia_circles_wrap .circle_core span:first-child { + font-size: 16px; + } + .floorplan .key .left .mid_tit { + height: 100px; + } + .floorplan .key .left .mid_tit span { + left: 24px; + font-size: 26px; + bottom: 0; + } + .floorplan .key .right { + padding: 0 24px; + } + .floorplan .key .right .sub_tit { + font-size: 20px; + } + .floorplan .info .left .mid_tit span { + left: 24px !important; + } + .floorplan .key .right .info01 .sub_figs .text .bottom br { + display: initial; + } + .floorplan .key .right .print02 .sub_figs .text br.brk { + display: initial !important; + } + + .forbim .theorys .mid_tit { + font-size: 24px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core { + gap: 4px; + } + .forbim .theorys .diagram_wrap .dia_circles_wrap .circle_core i { + width: 70%; + } + .forbim .process { + gap: 48px; + } + .forbim .process .right { + gap: 32px; + } + .forbim .process .right > div { + padding: 0 24px 24px; + } + .forbim .process .right .mid_tit.m { + padding-left: 24px; + font-size: 26px; + height: 88px; + } + .forbim .process .right .sub_tit { + font-size: 22px; + } + .forbim .process .right .sub_tit img { + width: 30px; + margin-bottom: 8px; + } + .forbim .process .right .sub_figs > div span { + font-size: 14px; + } + .forbim .process .link .sub_figs .fig04 span { + font-size: 14px; + padding: 0 24px; + height: 28px; + bottom: -14px; + } + + .buy .intro { + margin-bottom: 24px; + } + .buy .contents_wrap .ask_area { + gap: 24px; + padding: 0 16px; + } + .buy .contents_wrap .ask_area .ask_btn { + display: grid; + grid-template-columns: 1fr 1fr; + } + .buy .contents_wrap .ask_area .ask_btn a { + font-size: 14px; + height: 56px; + min-width: initial; + width: 100%; + } + .buy .contents_wrap .ask_area .ask_btn a i { + width: 14px; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask { + font-size: 18px; + grid-column: span 2; + width: 100%; + } + .buy .contents_wrap .ask_area .ask_btn a.btn_ask i { + width: 20px; + } + + .buy .contents_wrap .contact_area { + flex-direction: column; + gap: 16px; + } + .buy .contents_wrap .contact_area .mid_tit { + font-size: 22px; + } + .buy .contents_wrap .contact_area .line { + display: none; + } + .buy .contents_wrap .contact_area ul { + gap: 8px; + } + + .faq .sub_tab li a { + width: 100%; + } + .faq #container { + padding: 0 16px; + } + .faq #bo_cate { + display: none; + } + .faq #faq_sch { + grid-column: span 2; + grid-row: 2; + width: 100%; + } + .faq #bo_list #bo_btn_top { + grid-column: span 2; + grid-row: 2; + } + .faq #bo_list #fqalist { + row-gap: 16px; + } + .faq #bo_list #fqalist thead th { + font-size: 14px; + height: 32px; + } + .faq #bo_list #fqalist tbody tr td { + font-size: 15px; + } + .faq #bo_list #fqalist tbody .td_subject { + display: table-cell; + } + + .faq #bo_list #fqalist thead th:nth-child(3), + .faq #bo_list #fqalist tbody tr td:nth-child(3) { + display: none; + } + .faq #bo_list #fqalist thead th:nth-child(4), + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(5) { + width: 32%; + } + .faq #bo_list #fqalist thead th:nth-child(5), + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(6) { + width: 24%; + } + .faq #bo_list #fqalist tbody .td_stat span { + font-size: 12px; + } + + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(2), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(2) { + width: 20%; + } + .faq #bo_list #fqalist:has(th.all_chk) thead th:nth-child(3), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(3) { + display: table-cell; + } + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(4), + .faq #bo_list #fqalist:has(th.all_chk) tbody tr td:nth-child(5) { + font-size: 13px; + } + + /*250804 1:1 문의 추가 */ + .faq .search-wrap .qa-filters { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .faq .search-wrap .qa-filters > div { + width: max-content; + } + + .faq .tbl-area .tbl-group.user-info .tbl-item { + flex-direction: column; + gap: 4px; + } + + .faq .comment-section .comment-box { + flex-direction: column; + padding: 20px 0; + } +} + +/*250808 공지사항 추가*/ +/* 배경을 진한 그린톤으로, 살짝 투명 */ +.notice-backdrop { + position: fixed; + inset: 0; + background: linear-gradient( + 145deg, + rgba(4, 28, 22, 0.88), + rgba(8, 40, 32, 0.88) + ); + z-index: 9999; + display: none; +} +/* 팝업 본체도 다크톤, 테두리 살짝 */ +.notice-box { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: min(520px, 92%); + background: #0f2a24; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + padding: 28px 24px; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); + color: #fff; + z-index: 10000; + display: none; +} +.notice-box h3 { + margin: 0 0 8px; + font-size: 20px; + color: #fff; +} +.notice-box p { + margin: 0 0 18px; + line-height: 1.7; + color: #f2f6f5; +} +.notice-box p b, +.notice-box p strong { + color: #ffd166; +} /* 강조 색 살짝 */ +.notice-close { + position: absolute; + right: 10px; + top: 10px; + border: 0; + background: transparent; + font-size: 22px; + color: #fff; + opacity: 0.8; + cursor: pointer; +} +.notice-close:hover { + opacity: 1; +} + +.notice-actions { + display: flex; + gap: 10px; + justify-content: flex-end; +} +.notice-actions button { + padding: 10px 14px; + border-radius: 10px; + cursor: pointer; + font-size: 14px; +} +/* 오늘 안보기: 투명+화이트 보더 */ +.btn-today { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.35); + color: #fff; +} +.btn-today:hover { + border-color: #fff; +} +/* 확인: 브랜드 느낌의 그린, 텍스트는 화이트 */ +.btn-ok { + background: #1ea67a; + border: 1px solid #1ea67a; + color: #fff; +} +.btn-ok:hover { + filter: brightness(1.06); +} + +/* Q&A 공지사항 : 행 전체 Bold */ +.tbl-wrap table tr.row-notice td, +.tbl-wrap table tr.row-notice a { + font-weight: 700; +} + +/* Q&A 공지사항 : 가벼운 강조 배경 */ +.tbl-wrap table tr.row-notice td { + background: #f0f0f0; +} + +/* Q&A 댓글 스타일 적용 250820*/ +/* 댓글 섹션 */ +.comment-section { + margin-top: 20px; + border: 1px solid #ddd; + border-radius: 6px; + background: #ffffff; + padding: 15px; +} + +/* 댓글 헤더 */ +.comment-section h4 { + margin: 0 0 15px; + font-size: 14px; + font-weight: bold; +} + +/* 댓글 목록 */ +.comment-list { + margin-bottom: 15px; +} +.comment-list > .comment:nth-child(odd) { + background-color: #ffffff; +} /* 홀수 댓글 */ +.comment-list > .comment:nth-child(even) { + background-color: #f9f9f9; +} /* 짝수 댓글 */ +.comment-list > .comment { + padding: 10px; + border-bottom: 1px solid #e0e0e0; +} + +/* 개별 댓글 */ +.comment { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 10px 0; + border-bottom: 1px solid #eee; +} +.comment:last-child { + border-bottom: none; +} + +/* 댓글 본문 */ +.comment-body { + margin-bottom: 12px; +} + +/* 댓글 텍스트 */ +.comment-text, +.edit-input { + flex: 1; + margin-bottom: 5px; /* 본문과 이름/일자 사이 간격 */ + line-height: 1.6; +} + +/* 작성자+날짜 영역 */ +.comment-meta { + display: inline-flex; /* ✅ 가로로 한 줄 정렬 */ + align-items: center; + gap: 6px; /* 이름과 날짜 간격 */ + margin-top: 4px; + font-size: 0.9em; + color: #333; + background: #e8f4ff; /* 파스텔톤 파란색 배경 */ + padding: 3px 8px; + border-radius: 4px; + white-space: nowrap; /* ✅ 줄바꿈 방지 */ + width: fit-content; /* 내용 길이에 맞게 배경 */ +} + +/* 작성자 */ +.comment-meta .comment-author { + font-weight: bold; + color: #333; + margin: 0; +} + +/* 작성일 */ +.comment-meta .comment-date { + color: #999; + font-size: 0.85em; + margin: 0; +} + +.comment-body strong { + display: block; + font-weight: bold; + color: #333; + margin-bottom: 0px; + font-size: 15px; +} +.comment-body .comment-text { + margin: 2px 0; + line-height: 1.4; + font-size: 15px; +} +.comment-body small { + display: block; + margin-top: 3px; + font-size: 12px; + color: #999; +} + +/* 오른쪽 버튼 */ +.comment-actions { + display: flex; + gap: 5px; + margin-left: 15px; + white-space: nowrap; + align-items: center; +} +.comment-actions button { + padding: 3px 8px; + font-size: 12px; + cursor: pointer; + border: 1px solid #ccc; + background: #f9f9f9; + border-radius: 3px; +} +.comment-actions button:hover { + background: #eee; +} + +/* 댓글 입력 영역 */ +/* 댓글 입력칸 + 저장 버튼 → 같은 줄 유지 251113 추가*/ +.comment-form { + display: flex; + align-items: flex-start !important; + gap: 8px; + width: 100%; +} + +/* textarea가 전체 너비 차지하도록 */ +.comment-form .input-text { + flex: 1 !important; + width: auto !important; + display: block; +} +.comment-form .btn-save { + padding: 8px 16px; + background-color: #4a3f2f; + color: #fff; + border: none; + border-radius: 4px; + font-size: 14px; + cursor: pointer; +} +.comment-form .btn-save:hover { + background-color: #332a1e; +} + +.comment .comment-text { + padding: 8px 0; + line-height: 1.5; +} + +/* 댓글 입력 textarea 스타일 복원 */ +.comment-row textarea.input-text { + border: 1px solid #ccc !important; + border-radius: 4px !important; + padding: 10px !important; + width: 90% !important; + flex: 1 !important; + background: #fff !important; + min-height: 40px !important; + box-sizing: border-box !important; + margin-left: 12px !important; +} + +/* textarea 커서 조절 핸들 정상 처리 */ +.comment-row textarea.input-text:focus { + outline: none !important; + border-color: #999 !important; +} + +/* 버튼과 높이 균형 맞추기 */ +.comment-row { + display: flex; + align-items: flex-start !important; + gap: 12px; + width: 100%; + padding-right: 6px !important; +} + +/* 업로드 영역은 textarea 아래 줄에 단독 배치 */ +.upload-wrap { + display: block; + width: 100%; + margin-top: 8px; + margin-left: 12px !important; + margin-right: 12px !important; +} + +/* 미리보기 영역 정렬 */ +#previewArea { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 6px; +} + +#previewArea img { + width: 80px; + height: 80px; + border-radius: 6px; + object-fit: cover; +} + +#previewArea div { + display: inline-block; + width: 80px; + margin-right: 8px; + text-align: center; +} + +#previewArea div img { + border-radius: 6px; +} + +/*댓글 이미지 업로드 추가 20251114*/ +#commentImages { + display: none !important; +} + +.img-upload-btn { + display: inline-block; + padding: 6px 12px; + background: #005bac; + color: white; + font-size: 13px; + border-radius: 4px; + cursor: pointer; + border: 1px solid #004a8a; +} +.img-upload-btn:hover { + background: #004a8a; +} +.file-name { + margin-left: 8px; + font-size: 13px; + color: #666; +} + +/*Q&A 첨부파일 250821*/ +.attachments { + margin: 25px 0; + padding: 15px; + background: #f9fafc; + border: 1px solid #e1e4e8; + border-radius: 8px; +} +.attachments h3 { + margin: 0 0 12px; + font-size: 16px; + font-weight: 600; + color: #333; +} +.attachments ul { + list-style: none; + padding: 0; + margin: 0; +} +.attachments li { + margin-bottom: 8px; + padding: 6px 10px; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.2s; +} +.attachments li:hover { + background: #f0f7ff; +} +.attachments a { + text-decoration: none; + color: #0073e6; + font-weight: 500; +} +.attachments a:hover { + text-decoration: underline; +} +.attachments .meta { + font-size: 12px; + color: #777; + margin-left: 10px; +} + +/*Q&A 삭제버튼*/ +.post-actions { + margin-top: 20px; +} +.post-actions a, +.post-actions .btn-delete { + display: inline-block; + padding: 6px 14px; + border: 1px solid #ccc; + border-radius: 5px; + background: #f9f9f9; + color: #333; + text-decoration: none; + font-size: 14px; + margin-right: 6px; + cursor: pointer; + transition: background 0.2s; +} +.post-actions a:hover, +.post-actions .btn-delete:hover { + background: #f0f0f0; +} + +.edit-input { + background: #fff; + border: 1px solid #ccc; + padding: 5px; + border-radius: 4px; + width: 990px; /* 고정 길이로 꽉 채우기 */ + box-sizing: border-box; /* padding 포함 길이 계산 */ +} + +/*첨부파일 drag*/ +.drop-zone { + border: 2px dashed #bbb; + border-radius: 5px; + padding: 20px; + text-align: center; + color: #999; + cursor: pointer; +} +.drop-zone.dragover { + border-color: #333; + background: #f0f0f0; +} +#file-list { + list-style: none; + margin-top: 10px; + padding: 0; +} +#file-list li { + padding: 5px; + border-bottom: 1px solid #eee; + font-size: 14px; +} + +/*Q&A detail status select box 위치 수정 250826*/ +.title-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.title-left { + display: flex; + align-items: center; + gap: 8px; /* 카테고리와 제목 사이 간격 */ +} + +.title-left .cate { + display: inline-block; + padding: 2px 6px; + font-size: 0.85rem; + color: #666; + border: 1px solid #ccc; + border-radius: 4px; + background: #f8f8f8; + margin-top: 3px; + padding-right: 1px; +} + +.title-left .tit { + font-size: 1.2rem; + font-weight: bold; +} + +.title-right { + margin-left: auto; +} + +.faq .tbl-area .title-right .status { + flex-direction: row-reverse; + color: #555; + margin-top: 10px; + display: flex; + align-items: right; + justify-content: center; + font-size: 15px; + min-width: max-content; + align-self: flex-start; + padding-right: 1px; +} + +/*status 색상 구분*/ +.status-select { + font-weight: 600; +} + +/* 상태 select 박스 스타일 */ +.status-select.status-new { + color: #ef4444; /* 빨강 글씨 */ +} + +.status-select.status-review, +.status-select.status-inspect, +.status-select.status-patch { + color: #111827; /* 검정 글씨 */ +} + +.status-select.status-done { + color: #38b000; /* 연초록 */ +} + +/*Q&A 이미지 업로드 시 비율 고정 250827*/ +.qa-detail .content img { + max-width: 100%; /* 부모 영역 너비를 넘지 않게 */ + height: auto; /* 비율 유지 */ + display: block; /* 블록 요소로 */ + margin: 10px 0; /* 위아래 여백 */ +} + +/*새글 new 표시 250828*/ +.new-label { + font-size: 0.75rem; + font-weight: bold; + color: #ff9800; /* 오렌지 색상 */ + margin-left: 4px; + vertical-align: middle; +} + +/*upload page delete effect*/ +.deleted-row td:nth-child(-n + 6) { + background-color: #f8d7da !important; /* 연한 빨강 */ +} +.deleted-label { + font-weight: bold; + color: #d00; +} + +/* ✅ 업로드 버튼 전용 스타일 */ +.menu_upload { + display: inline-block; + margin-left: 12px; + vertical-align: middle; +} +.menu_upload img { + width: 24px; + height: 24px; + cursor: pointer; + transition: opacity 0.2s ease; +} +.menu_upload img:hover { + opacity: 0.7; +} + +/*회원가입 추가정보 입력 안내 팝업창*/ +#join_step_3 { + position: relative; /* 기준 잡기 */ +} + +.warn-popup { + position: absolute; /* 부모 기준 */ + top: 50%; /* 세로 중앙 */ + left: 50%; /* 가로 중앙 */ + transform: translate(-50%, -50%); + background: #1c3b2d; + color: #fff; + padding: 20px 25px; + border-radius: 8px; + max-width: 400px; + width: 90%; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + z-index: 500; /* fieldset 위에 */ + text-align: center; +} +.warn-popup h3 { + margin: 0 0 10px; + font-size: 15px; + font-weight: bold; + text-align: center; +} +.warn-popup p { + margin: 0; + font-size: 14px; + line-height: 1.6; + text-align: center; +} +.warn-popup .btn-close-warn { + position: absolute; + top: 8px; + right: 12px; + background: none; + border: none; + color: #fff; /* 👈 흰색으로 변경 */ + font-size: 20px; + font-weight: bold; + cursor: pointer; + line-height: 1; +} +.warn-popup .btn-close-warn:hover { + opacity: 0.8; +} +.warn-popup.show { + opacity: 1; +} + +/*회원가입 회원정보 미입력 안내문구 250908*/ +.addinfo-side-notice { + position: absolute; + left: 10px; /* 왼쪽 위치 */ + bottom: 300px; /* 아래 위치 */ + width: 390px; + max-width: calc(100% - 20px); + background: rgba(199, 15, 15, 0.6); + color: #fff; + padding: 15px; + border-radius: 8px; + font-size: 14px; + line-height: 1.5; + z-index: 9; +} +.addinfo-side-notice .btn-close-warn { + position: absolute; + top: 8px; + right: 12px; + background: none; + border: none; + color: #fff; + font-size: 20px; + font-weight: bold; + cursor: pointer; + line-height: 1; + z-index: 9; +} +.addinfo-side-notice h3 { + font-size: 15px; + margin-bottom: 8px; + font-weight: bold; +} +.addinfo-side-notice p { + word-break: keep-all; +} +/* pagination.css */ + +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30px 0; + gap: 12px; +} + +.pagination a, +.pagination span { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + text-decoration: none; + color: #333; + font-size: 14px; +} + +.pagination a:hover { + background-color: #f0f0f0; + border-radius: 30px; +} + +.pagination .current { + background-color: #000; /* 🔥 원하는 색상으로 */ + color: #fff; + border-radius: 30px; +} + +.pagination .prev, +.pagination .next { + width: 32px; + height: 32px; + text-indent: -9999px; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + background-size: auto; +} + +.pagination .prev { + background-image: url("../img/ico_pg_left.svg"); +} + +.pagination .next { + background-image: url("../img/ico_pg_right.svg"); +} + +/*영업관리 버튼 20251114*/ +.btn-sales { + padding: 7px 12px; + background: #0074d9; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 13px; + margin-left: 10px; +} +.btn-sales:hover { + background: #005fa3; +} diff --git a/kngil/css/style.css b/kngil/css/style.css new file mode 100644 index 0000000..076fd01 --- /dev/null +++ b/kngil/css/style.css @@ -0,0 +1,7249 @@ +@charset "UTF-8"; +:root { + --min-height: 814px; + --page-tail-size: 6.4rem; + /* text */ + --text-base: #000; + --text-primary: #007243; + --text-secondary: #003675; + --text-tertiary: #8e8e8e; + --text-accent: #fb3c00; + --text-success: #00832A; + --text-warning: #ffa500; + --text-danger: #ff0000; + --text-title:#1d1d1d; + --text-sub:#171717; + --text-body: #555; + --text-white: #fff; + --text-disabled: #e4e4e4; + --text-placeholder: #8e8e8e; + --text-link:#246beb; + /* 배경 */ + --bg-base: #ffffff; + --bg-primary: #f8f8f8; + --bg-secondary: #f0f0f0; + --bg-tertiary: #e5e5e5; + --bg-quaternary: #bfbfbf; + --bg-quinary: #808080; + --bg-senary: #404040; + --bg-septenary: #000000; + --bg-opacity-10: #e5e5e5; + --bg-opacity-25: #bfbfbf; + --bg-opacity-50: #808080; + --bg-opacity-75: #404040; + --bg-opacity-100: #000; + /* border */ + --border-base:#c6c6c6; + --border-gra-tail: linear-gradient(180deg, #209f79 0%, transparent 100%); + --border-gra-depth01: linear-gradient(179deg, #196d54 0%, transparent 8%); + --border-accent: #eb5f00; + /* stroke */ + --text-stroke: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, + 1px 1px 0 #000; + /* SHADOW */ + --bg-shadow: drop-shadow(0 -8px 15px rgba(0, 0, 0, 0.05)); + --text-shadow: drop-shadow(0 0 0.5px #000); + --btn-shadow: drop-shadow(0 2px 2px #000000aa) + drop-shadow(0 -1px 1px #000000aa); + --depth01-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.25); + /* mask content */ + --mask-contents: linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + /* gradient */ + --gra-tail-bg: linear-gradient(180deg, #0f5a44 0%, #0f3227 86.31%); + /* 공통적용 - 컬러 */ + --color-yellow: #ffc600; + --color-green: #007243; + --color-orange: #ff5c00; + --color-han-gr: #0e3c2e; + --color-han-br: #27241d; + --color-han-bgbr: #f6f4f2; + --color-primary: #1b7f63; + --color-accent: #fb3c00; + --gradient-han-gr: linear-gradient( + 180deg, + #08251c 0%, + #208769 37%, + #08241c 81%, + #051612 100% + ); + --gradient-han-yelllow-border: linear-gradient( + 180deg, + #886d35 0%, + #423625 9%, + #f3dba8 26%, + #0e0b06 84%, + #574b30 100% + ); +} + +.main-mask { + position: absolute; + width: 100%; + height: 100%; + z-index: 100; + top: -150px; + clip-path: inset(50% 50% round 10px 10px 10px 10px); + animation: clip_play 2.5s ease 1s 1 forwards; +} +.main-mask.skip { + animation: none; + clip-path: none; + width: 100%; + top: 0; +} + +body:has(.wrap.main), +html:has(.wrap.main) { + height: var(--window-inner-height); + overflow: hidden; +} + +.wrap.main { + max-width: 100%; +} + +.main { + height: var(--window-inner-height); + overflow: hidden; +} +.main .container { + max-width: 100%; + height: var(--window-inner-height); + overflow: hidden; +} +.main-link { + display: block; + width: 100%; + height: 100%; + text-decoration: none; + outline: none; +} +.main-link:focus-visible { + outline: 2px solid var(--color-yellow); + outline-offset: 2px; +} +.main-pagination { + color: var(--text-white); + font-weight: 700; + font-size: 17px; + text-align: center; + position: absolute; + bottom: 12.037037037%; + right: 24px; + z-index: 1; + text-indent: 0; + transition: bottom 0.2s ease; + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} +.main-pagination ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 24px; +} +.main-pagination li { + display: flex; + justify-content: flex-end; + width: 100%; + gap: 8px; +} +.main-pagination button { + width: max-content; + cursor: pointer; + position: relative; + text-align: right; + background: none; + border: none; + color: inherit; + font: inherit; + padding: 0; + margin: 0; + outline: none; +} +.main-pagination button:focus-visible { + outline: 2px solid var(--color-yellow); + outline-offset: 2px; + border-radius: 2px; +} +.main-pagination button::after { + content: ""; + display: block; + height: 2px; + background: var(--color-yellow); + margin-top: 6px; + opacity: 0; + position: absolute; + left: 0; + transition: opacity 0.3s ease; +} +.main-pagination button img { + height: 1em; + vertical-align: middle; + display: inline-block; +} +.main-pagination .page-number { + display: block; + width: 1.5em; + font-size: 20px; + color: rgba(255, 255, 255, 0.6); + font-weight: 300; + margin-left: 8px; +} +.main-pagination .page-on::after { + opacity: 1; +} +.main-pagination .page-01.page-on::after { + animation: page_play 16s linear 1 forwards; +} +.main-pagination .page-02.page-on::after { + animation: page_play 11s linear 1 forwards; +} +.main-pagination .page-03.page-on::after { + animation: page_play 24s linear 1 forwards; +} +.main-pagination .page-04.page-on::after { + animation: page_play 16s linear 1 forwards; +} +.main-pagination .page-05.page-on::after { + animation: page_play 13s linear 1 forwards; +} +.main-pagination.m .page-01.page-on::after { + animation: page_play 15s linear 1 forwards; +} +.main-pagination.m .page-02.page-on::after { + animation: page_play 7s linear 1 forwards; +} +.main-pagination.m .page-03.page-on::after { + animation: page_play 19s linear 1 forwards; +} +.main-pagination.m .page-04.page-on::after { + animation: page_play 13s linear 1 forwards; +} +.main-pagination.m .page-05.page-on::after { + animation: page_play 10s linear 1 forwards; +} +.main .bg-video { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: var(--bg-septenary); + z-index: 0; + pointer-events: none; +} +.main .bg-video a { + display: block; + width: 100%; + height: 100%; + pointer-events: auto; +} +.main .bg-video video { + height: 100%; + width: 100%; + object-fit: cover; + display: block; + background: var(--bg-septenary); +} +.main .btn-top { + display: none; +} + +@keyframes page_play { + 0% { + width: 0%; + } + 100% { + width: 100%; + } +} +.intro-wrap { + position: absolute; + width: 100%; + height: 100%; + background: var(--bg-base); + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} +.intro-wrap .intro-txt { + display: flex; + flex-direction: column; + gap: 24px; +} +.intro-wrap .txt-mask { + overflow: hidden; +} +.intro-wrap .txt-mask:nth-child(1) span { + animation: txt_mask 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0ss forwards; +} +.intro-wrap .txt-mask:nth-child(2) span { + animation: txt_mask 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1ss forwards; +} +.intro-wrap .txt-mask:nth-child(3) span { + animation: txt_mask 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2ss forwards; +} +.intro-wrap .txt-mask span { + display: block; + font-size: 56px; + text-align: center; + position: relative; + top: 80px; +} + +/** + * 반응형 폰트 크기 (responsive font) + * @param {number} $min-px - 최소 폰트 크기 (px) + * @param {number} $max-px - 최대 폰트 크기 (px) + * @param {number} $min-vw - 최소 뷰포트 너비 (기본값: 375px) + * @param {number} $max-vw - 최대 뷰포트 너비 (기본값: 1920px) + */ +/** + * 박스 그림자 (box-shadow) + * @param {number} $x - X 오프셋 (기본값: 0px) + * @param {number} $y - Y 오프셋 (기본값: 3px) + * @param {number} $blur - 블러 반경 (기본값: 6px) + * @param {number} $spread - 확산 반경 (기본값: 0px) + * @param {color} $color - 색상 (기본값: rgba(0, 0, 0, 0.25)) + * @param {boolean} $important - !important 사용 여부 (기본값: false) + */ +/** + * 텍스트 그림자(text-shadow) + * @param {number} $x - X 오프셋 (기본값: 0px) + * @param {number} $y - Y 오프셋 (기본값: 1px) + * @param {number} $blur - 블러 반경 (기본값: 0px) + * @param {color} $color - 색상 (기본값: rgba(0, 0, 0, 0.25)) + * @param {boolean} $important - !important 사용 여부 (기본값: false) + */ +/** + * 미디어 쿼리 mixin + * @param {string|number} $width - 브레이크포인트 이름 또는 픽셀 값 + * @param {string} $type - 'min' 또는 'max' + * @example + * @include mq('desktop') { ... } + * @include mq(1920px) { ... } + * @include mq('tablet', 'max') { ... } + */ +/** + * 배경 이미지 커버 + * @param {string} $url - 배경 이미지 경로 + */ +/** + * 그라디언트 박스 + * @param {number|string} $direction - 그라디언트 방향 (기본값: 90deg) + * @param {color} $color1 - 시작 색상 + * @param {color} $color2 - 끝 색상 + */ +/** + * 리스트 불릿 스타일 + * @param {number} $padding-left - 왼쪽 패딩 (기본값: 20px) + * @param {color} $color - 불릿 색상 (기본값: #fff) + * @param {number} $opacity - 불릿 투명도 (기본값: 0.6) + */ +@keyframes value-dot-center { + 0% { + top: 0; + left: calc(50% - 3.5px); + } + 30% { + top: -3.5px; + left: calc(50% - 3.5px); + } + 100% { + top: -3.5px; + left: calc(50% - 3.5px); + } +} +@keyframes value-dot-side-left { + 0% { + top: 0; + left: calc(50% - 3.5px); + } + 30% { + top: -3.5px; + left: calc(50% - 3.5px); + } + 70% { + top: -3.5px; + left: calc(25% - 3.5px); + } + 100% { + top: -3.5px; + left: calc(25% - 3.5px); + } +} +@keyframes value-dot-side-right { + 0% { + top: 0; + left: calc(50% - 3.5px); + } + 30% { + top: -3.5px; + left: calc(50% - 3.5px); + } + 70% { + top: -3.5px; + left: calc(75% - 3.5px); + } + 100% { + top: -3.5px; + left: calc(75% - 3.5px); + } +} +@keyframes icoArrowMove { + 0% { + top: 0; + opacity: 1; + } + 100% { + top: 565px; + opacity: 0.4; + } +} +.value .visual { + background-image: url("../img/value/bg_value_visual.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + color: #fff; + text-align: center; +} +.value .sub-header { + background: none; +} +.value .sub-content { + padding: 190px 24px 150px 24px; +} +@media only screen and (max-width: 1439px) { + .value .sub-content { + padding: 120px 24px 100px 24px; + } +} +@media only screen and (max-width: 767px) { + .value .sub-content { + padding: 80px 16px 60px 16px; + } +} +.value .sub-content .sub-tit-box { + margin-bottom: 160px; +} +@media only screen and (max-width: 1439px) { + .value .sub-content .sub-tit-box { + margin-bottom: 80px; + } +} +@media only screen and (max-width: 767px) { + .value .sub-content .sub-tit-box { + margin-bottom: 40px; + } +} +.value .sub-content .sub-tit-box::before { + background: url(../img/ico_title_obj_w.svg) no-repeat center center; +} +@media only screen and (max-width: 767px) { + .value .sub-content .sub-tit-box::before { + background-size: contain; + } +} +.value .sub-content .sub-tit-box .sub-tit { + font-size: 24px; + margin-bottom: 46px; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 1439px) { + .value .sub-content .sub-tit-box .sub-tit { + font-size: 2rem; + margin-bottom: 32px; + } +} +@media only screen and (max-width: 767px) { + .value .sub-content .sub-tit-box .sub-tit { + font-size: 1.6rem; + line-height: 1.6; + margin-bottom: 24px; + } +} +.value .slogan-box { + max-width: 627px; + margin: 0 auto; +} +@media only screen and (max-width: 767px) { + .value .slogan-box { + max-width: 100%; + padding: 0 16px; + } +} +.value .slogan-box img { + width: 100%; + height: auto; + object-fit: contain; +} +.value .summary { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + text-align: center; + position: relative; + background-image: url("../img/value/bg_value_feature.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + scroll-snap-align: center; + scroll-snap-stop: always; +} +@media only screen and (max-width: 1439px) { + .value .summary { + height: auto; + min-height: 60vh; + padding: 60px 24px; + } +} +@media only screen and (max-width: 767px) { + .value .summary { + min-height: 50vh; + padding: 40px 16px; + gap: 24px; + } +} +.value .summary .logo-c { + display: inline-block; + width: 220px; + height: 54px; +} +@media only screen and (max-width: 767px) { + .value .summary .logo-c { + width: 160px; + height: 40px; + } +} +.value .summary dl { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +} +@media only screen and (max-width: 767px) { + .value .summary dl { + gap: 24px; + } +} +.value .summary dt { + gap: 20px; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 767px) { + .value .summary dt { + font-size: 2.8rem; + gap: 4px; + } +} +.value .summary dd { + font-size: 24px; + line-height: 160%; +} +@media only screen and (max-width: 1439px) { + .value .summary dd { + font-size: 2rem; + } +} +@media only screen and (max-width: 767px) { + .value .summary dd { + font-size: 1.6rem; + line-height: 1.6; + padding: 0 16px; + text-wrap: balance; + } +} +.value .summary .line { + width: 1px; + height: 480px; + position: absolute; + top: 65%; + left: calc(50% - 1px); + background-color: #aaa; +} +@media only screen and (max-width: 767px) { + .value .summary .line { + display: none; + } +} +.value .summary .dot { + width: 6px; + height: 6px; + border-radius: 50px; + background-color: #555; + position: absolute; + top: 65%; + left: calc(50% - 3.5px); +} +@media only screen and (max-width: 767px) { + .value .summary .dot { + display: none; + } +} + +.value .service { + max-width: 1400px; + margin: 0 auto; +} +@media only screen and (max-width: 767px) { + .value .service { + padding: 0 16px; + } +} +.value .service.aos-animate { + transform: none; +} +@media only screen and (max-width: 767px) { + .value .service .step-list { + margin-bottom: 40px; + } +} +.value .service .step-list .step-desc { + font-size: 26px; + color: #fff; + line-height: 1.5; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-desc { + margin-bottom: 36px; + font-size: 2rem; + } +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-desc { + text-wrap: balance; + font-size: 1.6rem; + line-height: 1.6; + padding: 0 16px; + } +} +.value .service .step-list .step-desc .bg-yellow { + padding: 0 6px 4px; + border-radius: 4px; + background: linear-gradient(180deg, #CCA700 0%, rgba(254, 119, 1, 0.7) 100%); +} +.value .service .step-list .step-flow { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + gap: 38px; + flex-wrap: wrap; + list-style: none; + padding-right: 38px; + margin: 0; +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-flow { + gap: 24px; + padding-right: 0; + justify-content: center; + } +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow { + flex-direction: column; + gap: 16px; + padding-right: 0; + } +} +.value .service .step-list .step-flow:before { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 1164px; + height: 100%; + background: linear-gradient(to left, rgba(217, 217, 217, 0.5) 0%, rgba(115, 115, 115, 0.7) 100%); + opacity: 0.9; + mix-blend-mode: multiply; + border-radius: 0 20px 20px 0; + clip-path: path("M155.018 31.6207C75.8577 31.6207 61 29.1207 18 0L0 242C55.5 227.129 46.5 208 155.018 208L939.5 208.002H941.358H1154.72C1160.24 208.002 1164.72 203.525 1164.72 198.002V41.6208C1164.72 36.0979 1160.24 31.6207 1154.72 31.6208L939.5 31.6224C674.455 31.6224 234.178 31.6207 155.018 31.6207Z"); +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-flow:before { + display: none; + } +} +.value .service .step-list .step-flow .step-item { + position: relative; + min-width: 232px; + flex: 0 0 auto; + z-index: 1; +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-flow .step-item { + min-width: 200px; + flex: 1 1 auto; + } +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item { + width: 100%; + min-width: auto; + } +} +.value .service .step-list .step-flow .step-item.active { + border-radius: 21px; + background: linear-gradient(180deg, #C9AF00 0%, #FF7700 100%); + padding: 6px; + box-shadow: 18.559px 0 9.368px 0 rgba(0, 0, 0, 0.25); +} +.value .service .step-list .step-flow .step-item.active::after { + right: -38px; + background: url(../img/value/ico_step_arrow.svg) no-repeat center center; +} +.value .service .step-list .step-flow .step-item.active .step-box { + width: 270px; + height: 232px; + border-radius: 21px; + background: #FFFDF5; + flex-direction: column; + display: flex; + align-items: center; + justify-content: space-between; +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-flow .step-item.active .step-box { + width: 100%; + height: auto; + min-height: 200px; + } +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item.active .step-box { + width: 100%; + max-width: 100%; + min-height: 180px; + } +} +.value .service .step-list .step-flow .step-item.active .step-box .step-title { + display: flex; + align-items: center; + justify-content: center; + width: 184px; + height: 48px; + margin-bottom: 0; + color: #fff; + font-size: 26px; + font-weight: 700; + background: url(../img/value/bg_step_tit.svg); + background-position: top center; + background-repeat: no-repeat; +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item.active .step-box .step-title { + width: 160px; + height: 40px; + font-size: 1.8rem; + background-size: contain; + } +} +.value .service .step-list .step-flow .step-item:not(:last-child)::after { + content: " "; +} +.value .service .step-list .step-flow .step-item:not(:last-child):nth-child(4)::after { + right: -48px; +} +.value .service .step-list .step-flow .step-item:not(:last-child)::after { + content: " "; + position: absolute; + top: 50%; + right: -38px; + width: 38px; + height: 64px; + background: url("../img/value/ico_step_arrow_sub.svg") no-repeat center center; + translate: 0 -50%; +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item:not(:last-child)::after, .value .service .step-list .step-flow .step-item::after { + display: none; + } +} +.value .service .step-list .step-flow .step-item .step-box { + text-align: center; + transition: all 0.3s; +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box { + width: 100%; + padding: 16px; + } +} +.value .service .step-list .step-flow .step-item .step-box .step-icon { + max-width: 121px; +} +@media only screen and (max-width: 1439px) { + .value .service .step-list .step-flow .step-item .step-box .step-icon { + max-width: 100px; + } +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box .step-icon { + max-width: 80px; + margin: 0 auto 12px; + } +} +.value .service .step-list .step-flow .step-item .step-box .step-icon img { + width: 100%; + height: auto; + object-fit: contain; +} +.value .service .step-list .step-flow .step-item .step-box .step-title { + font-size: 20px; + font-weight: 600; + margin-bottom: 8px; + color: rgba(255, 255, 255, 0.5); + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box .step-title { + font-size: 1.4rem; + margin-bottom: 6px; + } +} +.value .service .step-list .step-flow .step-item .step-box .step-title strong { + display: block; + font-size: 22px; + color: rgba(255, 255, 255, 0.86); +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box .step-title strong { + font-size: 1.8rem; + } +} +.value .service .step-list .step-flow .step-item .step-box .step-subtitle { + font-size: 28px; + color: rgba(21, 21, 21, 0.8); +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box .step-subtitle { + font-size: 1.8rem; + } +} +.value .service .step-list .step-flow .step-item .step-box .step-subtitle strong { + display: block; + font-size: 32px; + font-weight: 900; + color: #151515; +} +@media only screen and (max-width: 767px) { + .value .service .step-list .step-flow .step-item .step-box .step-subtitle strong { + font-size: 2.2rem; + } +} + +.value .service .data-comparison { + position: relative; + padding-top: 80px; + display: flex; + flex-direction: column; + gap: 24px; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison { + padding-top: 60px; + gap: 50px; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison { + padding-top: 40px; + gap: 50px; + } +} +.value .service .data-comparison .bg-line { + position: absolute; + top: 0; +} +@media only screen and (min-width: 1440px) { + .value .service .data-comparison .bg-line { + left: 136px; + width: 2px; + height: 619px; + background: url(../img/value/bg_line.svg) no-repeat center center; + } + .value .service .data-comparison .bg-line::before { + content: " "; + position: absolute; + top: 113px; + left: -8px; + width: 16px; + height: 66px; + background: #4A5022; + pointer-events: none; + z-index: 1; + } + .value .service .data-comparison .bg-line::after { + content: " "; + position: absolute; + top: 360px; + left: -8px; + width: 16px; + height: 66px; + background: #52461D; + pointer-events: none; + z-index: 1; + } +} +.value .service .data-comparison .bg-line .ico-arrow { + width: 16px; + height: 14px; + aspect-ratio: 8/7; + background: url(../img/value/ico_move_arrow.svg) no-repeat center center; + background-size: contain; + position: absolute; + top: 0px; + left: 50%; + translate: -50% 0; + animation: icoArrowMove 4s ease-in-out infinite; +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .bg-line .ico-arrow { + display: none; + } +} +.value .service .data-comparison .comparison-item { + display: grid; + width: 100%; + grid-template-columns: 360px 522px 522px; + align-items: center; + z-index: 1; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item { + grid-template-columns: 1fr 1fr; + row-gap: 24px; + } +} +@media only screen and (max-width: 991px) { + .value .service .data-comparison .comparison-item { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: center; + gap: 0px; + } +} +.value .service .data-comparison .comparison-item .data { + color: #EADD83; +} +.value .service .data-comparison .comparison-item .report { + color: #FFA23A; +} +.value .service .data-comparison .comparison-item .fw-big { + font-weight: 900; +} +.value .service .data-comparison .comparison-item .comparison-label { + position: relative; + font-size: 26px; + line-height: 1.26; + margin-bottom: 0; + color: #fff; + text-align: left; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .comparison-label { + grid-column: span 2; + font-size: 2rem; + line-height: 1.4; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .comparison-label { + margin-bottom: 24px; + font-size: 2rem; + line-height: 1.5; + padding: 0 16px; + } +} +.value .service .data-comparison .comparison-item .data-type-box { + position: relative; + border-radius: 20px; + padding: 20px 50px; + margin-bottom: 0; + height: 100%; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .data-type-box { + padding: 20px 20px; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .data-type-box { + padding: 20px 20px; + width: 100%; + } +} +.value .service .data-comparison .comparison-item .data-type-box.analog { + background: linear-gradient(90deg, #5E5C20 0%, #60591D 100%); +} +.value .service .data-comparison .comparison-item .data-type-box.analog::after { + position: absolute; + top: 0; + right: -5px; + content: ""; + width: 30px; + height: 100%; + border-radius: 0 20px 20px 0; + opacity: 0.2; + background: linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, #737373 100%); + mix-blend-mode: multiply; + pointer-events: none; +} +.value .service .data-comparison .comparison-item .data-type-box.analog .data-type-list { + color: #CFCDBB; +} +.value .service .data-comparison .comparison-item .data-type-box.digital { + background: linear-gradient(90deg, #6E6421 0%, #77691E 100%); +} +.value .service .data-comparison .comparison-item .data-type-box.digital::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.3; + background: linear-gradient(180deg, #EDA831 0%, rgba(237, 168, 49, 0) 34%, rgba(237, 168, 49, 0) 68%, #EDA831 100%); + box-sizing: border-box; + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; + padding: 2px; +} +.value .service .data-comparison .comparison-item .data-type-box.digital::after { + content: " "; + position: absolute; + top: 0; + left: -8px; + width: 50px; + height: 100%; + opacity: 0.3; + background: url(../img/value/ico_data_arrow.svg) no-repeat center center; + background-blend-mode: multiply; + mix-blend-mode: multiply; +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .data-type-box.digital::after { + display: none; + } +} +.value .service .data-comparison .comparison-item .data-type-box.digital .data-type-list span:before { + opacity: 1; +} +.value .service .data-comparison .comparison-item .data-type-box .data-type-title { + font-size: 28px; + font-weight: 400; + margin-bottom: 12px; + color: #fff; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .data-type-box .data-type-title { + font-size: 1.8rem; + margin-bottom: 10px; + } +} +.value .service .data-comparison .comparison-item .data-type-box .data-type-list { + display: flex; + align-items: center; + justify-content: center; +} +.value .service .data-comparison .comparison-item .data-type-box .data-type-list li { + min-width: 50%; + font-size: 20px; + line-height: 1.8; +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .data-type-box .data-type-list li { + font-size: 1.4rem; + } +} +.value .service .data-comparison .comparison-item .data-type-box .data-type-list li span { + position: relative; + padding-left: 20px; +} +.value .service .data-comparison .comparison-item .data-type-box .data-type-list li span::before { + content: "•"; + position: absolute; + left: 0; + color: #fff; + opacity: 0.6; +} +.value .service .data-comparison .comparison-item .work-method-box { + position: relative; + border-radius: 20px; + padding: 30px 50px; + text-align: center; + height: 100%; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .work-method-box { + padding: 30px 20px; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box { + padding: 20px; + width: 100%; + } +} +.value .service .data-comparison .comparison-item .work-method-box.manual { + background: linear-gradient(90deg, #7D5412 0%, #7C5212 100%); +} +.value .service .data-comparison .comparison-item .work-method-box.manual::after { + position: absolute; + top: 0; + right: -5px; + content: ""; + width: 30px; + height: 100%; + border-radius: 0 20px 20px 0; + opacity: 0.2; + background: linear-gradient(90deg, rgba(115, 115, 115, 0) 0%, #737373 100%); + mix-blend-mode: multiply; + pointer-events: none; +} +.value .service .data-comparison .comparison-item .work-method-box.manual span { + color: #E6DDD0; +} +.value .service .data-comparison .comparison-item .work-method-box.automated { + background: linear-gradient(90deg, #A35E0B 0%, #BC6405 100%); +} +.value .service .data-comparison .comparison-item .work-method-box.automated::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.3; + background: linear-gradient(180deg, #F3D7B1 0%, rgba(243, 215, 177, 0) 34%, rgba(243, 215, 177, 0) 68%, #F3D7B1 100%); + box-sizing: border-box; + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; + padding: 2px; +} +.value .service .data-comparison .comparison-item .work-method-box.automated::after { + content: " "; + position: absolute; + top: 0; + left: -8px; + width: 50px; + height: 100%; + opacity: 0.3; + background: url(../img/value/ico_report_arrow.svg) no-repeat center center; + background-blend-mode: multiply; + mix-blend-mode: multiply; +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box.automated::after { + display: none; + } +} +.value .service .data-comparison .comparison-item .work-method-box.automated .work-method-list span:before { + opacity: 1; +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-title { + font-size: 28px; + font-weight: 400; + margin-bottom: 20px; + color: #fff; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-title { + font-size: 1.8rem; + margin-bottom: 16px; + } +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list { + width: 100%; + gap: 3px; + display: flex; + align-items: flex-start; + justify-content: center; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list { + justify-content: space-around; + } +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li { + display: flex; + flex-direction: column; + width: 100%; + gap: 12px; + font-size: 16px; + line-height: 1.6; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 10px; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li { + max-width: max-content; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li { + width: 100%; + margin-bottom: 0; + align-items: center; + } +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li:last-child { + margin-bottom: 0; +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li .work-image { + flex-shrink: 0; + font-size: 32px; + width: auto; + height: 115px; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 1439px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li .work-image { + max-width: max-content; + } +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li .work-image { + height: 80px; + } + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li .work-image img { + max-width: 100%; + height: auto; + } +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li span { + position: relative; + padding-left: 20px; +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li span::before { + content: "•"; + position: absolute; + left: 0; + color: #fff; + opacity: 0.6; +} +.value .service .data-comparison .comparison-item .work-method-box .work-method-list li span { + flex: 1; + text-align: left; + font-size: 20px; +} +@media only screen and (max-width: 767px) { + .value .service .data-comparison .comparison-item .work-method-box .work-method-list li span { + text-align: center; + font-size: 1.4rem; + } +} + +.value .value-features { + width: 100%; + height: calc(var(--window-inner-height) - 40px); + display: flex; + align-items: stretch; + gap: 40px; + padding: 20px; + position: relative; + margin-top: 30px; + margin-bottom: 60px; + z-index: 1; +} +@media only screen and (max-width: 1439px) { + .value .value-features { + display: grid; + grid-template-columns: 1fr 1fr; + height: auto; + min-height: auto; + gap: 24px; + padding: 20px 24px; + margin-top: 20px; + margin-bottom: 40px; + } +} +@media only screen and (max-width: 767px) { + .value .value-features { + display: flex; + flex-direction: column; + height: auto; + min-height: auto; + gap: 12px; + padding: 20px 16px; + margin-top: 20px; + margin-bottom: 30px; + } +} +.value .value-features .feature-card { + width: 100%; + height: 100%; + position: relative; + border-radius: 4px; + overflow: hidden; + background-color: #000; + backdrop-filter: blur(10px); + transition: all 1s; + padding: 200px 30px 0 30px; + display: flex; + flex-direction: column; + justify-content: center; + min-height: calc(var(--window-inner-height) * 0.5); +} +@media only screen and (max-width: 1439px) { + .value .value-features .feature-card { + border-radius: 20px; + } +} +@media only screen and (max-width: 767px) { + .value .value-features .feature-card { + padding: 40px 16px 20px 16px; + min-height: auto; + height: auto; + } +} +.value .value-features .feature-card::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -2; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + transition: transform 1s ease; +} +@media only screen and (min-width: 1440px) { + .value .value-features .feature-card:hover { + padding-top: 100px; + } +} +.value .value-features .feature-card:hover::before { + transform: scale(1.03); +} +.value .value-features .feature-card dl { + display: flex; + flex-direction: column; + gap: 24px; +} +@media only screen and (max-width: 767px) { + .value .value-features .feature-card dl { + gap: 20px; + } +} +.value .value-features .feature-card dt { + color: #fff; + gap: 12px; + word-break: keep-all; + text-wrap: balance; + flex-direction: column; + font-size: 32px; + font-weight: 700; + display: flex; + align-items: flex-start; + justify-content: center; +} +@media only screen and (max-width: 767px) { + .value .value-features .feature-card dt { + font-size: 2rem; + gap: 20px; + } +} +.value .value-features .feature-card dt i { + display: block; + width: 48px; + height: 48px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.value .value-features .feature-card dt i:after { + content: ""; + display: block; + clear: both; +} +@media only screen and (max-width: 767px) { + .value .value-features .feature-card dt i { + width: 3.2rem; + height: 3.2rem; + } +} +.value .value-features .feature-card dd { + width: 100%; + min-height: 240px; + flex: 1; + color: rgba(255, 255, 255, 0.3333333333); + font-weight: normal; + transition: all 1s; + text-wrap: balance; + display: flex; + align-items: flex-start; + font-size: 20px; +} +@media only screen and (max-width: 991px) { + .value .value-features .feature-card dd { + min-height: auto; + font-size: 1.6rem; + color: #ffffff; + } +} +.value .value-features .feature-card:hover dd { + color: #fff; +} +.value .value-features .feature-gis::before { + background-image: url(../img/value/bg_value_gis.jpg); +} +.value .value-features .feature-gis dt i { + width: 54px; + height: 32px; + background-image: url(../img/ico/ico_value_gis.svg); +} +.value .value-features .feature-data::before { + background-image: url(../img/value/bg_value_data.png); +} +.value .value-features .feature-data dt i { + width: 42px; + height: 42px; + background-image: url(../img/ico/ico_value_data.svg); +} +.value .value-features .feature-map::before { + background-image: url(../img/value/bg_value_map.jpg); +} +.value .value-features .feature-map dt i { + width: 48px; + height: 48px; + background-image: url(../img/ico/ico_value_map.svg); +} +.value .value-features .feature-custom::before { + background-image: url(../img/value/bg_value_custom.jpg); +} +.value .value-features .feature-custom dt i { + width: 48px; + height: 48px; + background-image: url(../img/ico/ico_value_filter.svg); +} +.value .value-features .lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} +@media only screen and (max-width: 767px) { + .value .value-features .lines { + display: none; + } +} +.value .value-features .lines.move-ani * { + animation-duration: 1s; + animation-fill-mode: both; + position: absolute; +} +.value .value-features .lines.move-ani div[class^=v] { + top: 0px; + border-left: 1px solid #aaa; + width: 1px; + height: 0; +} +@media only screen and (max-width: 1439px) { + .value .value-features .lines.move-ani div[class^=v].v2 { + border: 1px solid #aaa; + top: 50%; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 100%; + border-left: 0; + border-right: 0; + animation-name: h-draw; + } +} +.value .value-features .lines.move-ani div[class^=d] { + width: 6px; + height: 6px; + border-radius: 50px; + background-color: #555; +} +.value .value-features .lines.move-ani .h { + border: 1px solid #aaa; + top: 0px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 100%; + border-left: 0; + border-right: 0; + animation-name: h-draw; +} +.value .value-features .lines.move-ani .v1 { + left: calc(50% - 1px); + animation-name: v-center; +} +.value .value-features .lines.move-ani .v2 { + left: 25%; + animation-name: v-side; +} +.value .value-features .lines.move-ani .v3 { + left: 75%; + animation-name: v-side; +} +@media only screen and (max-width: 1439px) { + .value .value-features .lines.move-ani .v3 { + display: none; + } +} +.value .value-features .lines.move-ani .d1 { + animation-name: value-dot-center; +} +.value .value-features .lines.move-ani .d2 { + animation-name: value-dot-side-left; +} +@media only screen and (max-width: 1439px) { + .value .value-features .lines.move-ani .d2 { + display: none; + } +} +.value .value-features .lines.move-ani .d3 { + animation-name: value-dot-side-right; +} +@media only screen and (max-width: 1439px) { + .value .value-features .lines.move-ani .d3 { + display: none; + } +} + +@keyframes moveBullet { + to { + offset-distance: 100%; + } +} +.wrap:has(.container.provided) { + overflow: visible; +} + +.provided .sub-header { + background: url(../img/provided/bg_provided_title.jpg) no-repeat center center; + background-size: cover; +} +@media only screen and (max-width: 767px) { + .provided .sub-header { + background-size: cover; + background-position: center; + } +} +.provided .sub-content::before { + content: "Provided Data"; + bottom: 6px; + letter-spacing: -0.06em; +} +@media only screen and (max-width: 1023px) { + .provided .sub-content::before { + content: "Provided\a Data"; + } +} + +.provided .intro .top { + background-image: url(../img/primary_intro_bg.png); +} +.provided .intro .condition { + margin: 0 auto; + text-align: center; + width: 100%; + max-width: 416px; + position: relative; +} +.provided .intro .condition::before { + position: absolute; + bottom: 3px; + right: 200px; + content: "Key\a Features"; + font-size: 120px; + opacity: 0.03; + text-align: right; + font-weight: 900; + white-space: pre; + line-height: 0.8em; + letter-spacing: -0.04em; +} +@media only screen and (max-width: 1439px) { + .provided .intro .condition::before { + font-size: 80px; + right: 100px; + } +} +@media only screen and (max-width: 767px) { + .provided .intro .condition::before { + font-size: 40px; + right: 20px; + opacity: 0.02; + } +} +.provided .intro .condition .diagram-wrap { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 40px; + margin: 0 0 0px 0; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap { + gap: 24px; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top { + position: absolute; + width: 100%; + height: 100%; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top { + position: relative; + width: auto; + height: auto; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element01 { + position: absolute; + left: -50px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + align-content: center; + align-items: center; + gap: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element01 { + position: relative; + left: auto; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element01 .dia-tit { + text-align: right; + font-size: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element01 .dia-tit { + font-size: 14px; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element01 i { + background-image: url(../img/ico_pripary_my.svg); +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element02 { + position: absolute; + top: calc(100% - 75px); + left: -162px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + align-content: center; + align-items: center; + gap: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element02 { + position: relative; + top: auto; + left: auto; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element02 .dia-tit { + text-align: right; + font-size: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element02 .dia-tit { + font-size: 14px; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element02 i { + background-image: url(../img/ico_pripary_command.svg); +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element03 { + position: absolute; + top: calc(100% - 200px); + right: -140px; + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + align-items: center; + gap: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element03 { + position: relative; + top: auto; + right: auto; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element03 .dia-tit { + text-align: left; + font-size: 16px; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element-top .dia-element03 .dia-tit { + font-size: 14px; + } +} +.provided .intro .condition .diagram-wrap .dia-element-top .dia-element03 i { + background-image: url(../img/ico_pripary_civil.svg); +} +.provided .intro .condition .diagram-wrap .dia-element i { + width: 40px; + height: 40px; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-element i { + width: 32px; + height: 32px; + } +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap { + position: absolute; + background: none; + width: 100%; + height: 100%; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-circles-wrap { + position: relative; + width: auto; + height: auto; + } +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap::after { + display: none; +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core { + width: 240px; + height: 240px; + line-height: 95%; +} +@media only screen and (max-width: 1439px) { + .provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core { + width: 180px; + height: 180px; + } +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core { + width: 150px; + height: 150px; + } +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core span { + font-size: 30px; + line-height: 36px; + width: 100%; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core span { + font-size: 24px; + line-height: 28px; + } +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-core span { + font-size: 20px; + line-height: 24px; + } +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot { + background: #b8afd2; + display: flex; + justify-content: center; + align-items: center; +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot::before { + content: ""; + width: inherit; + height: inherit; + border-radius: inherit; + position: absolute; + z-index: -10; + opacity: 0; + animation: 2s expand cubic-bezier(0.29, 0, 0, 1) infinite; +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(1) { + background: #AFD7CA; + top: 32px; + left: calc(50% - 52px); + transform: translateY(-50%); +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(1)::before { + border: 5px solid #AFD7CA; +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(2) { + background: #EADDCE; + top: calc(100% - 92px); + left: 68px; + transform: translateY(-50%) rotate(120deg); +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(2)::before { + border: 5px solid #EADDCE; +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(3) { + background: #F1D1C1; + top: calc(100% - 175px); + right: 6px; + transform: translateY(-50%) rotate(240deg); +} +.provided .intro .condition .diagram-wrap .dia-circles-wrap .circle-dots .dot:nth-child(3)::before { + border: 5px solid #F1D1C1; +} +.provided .intro .condition .diagram-wrap .quantum-wrap { + width: 100%; +} +.provided .intro .condition .diagram-wrap .quantum { + position: relative; + width: 100%; +} +.provided .intro .condition .diagram-wrap .quantum:after { + content: ""; + position: absolute; + width: 105%; + height: 105%; + right: -4%; + top: -4px; + background: url(../img/atom_line.svg) 0 0/contain no-repeat; + background-size: 100%; + z-index: 9; + mix-blend-mode: soft-light; +} +@media only screen and (max-width: 767px) { + .provided .intro .condition .diagram-wrap .quantum:after { + display: none; + } +} + +.provided .route { + width: 100%; + height: 100%; + position: relative; + margin-bottom: 120px; +} +@media only screen and (max-width: 1439px) { + .provided .route { + margin-bottom: 80px; + } +} +@media only screen and (max-width: 767px) { + .provided .route { + margin-bottom: 60px; + } +} +.provided .route div { + width: 100%; + height: 100vh; + font-size: 30px; +} +@media only screen and (max-width: 767px) { + .provided .route div { + height: auto; + font-size: 24px; + } +} +.provided .route #sec1 { + position: absolute; + top: 0; +} +.provided .route .fix { + position: sticky; + top: 0; + left: 0; + z-index: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 50px 210px; + background: url(../img/primary_route_bg.png); + background-size: 100%; + background-position: 0 top; + background-repeat: no-repeat; + gap: 40px; +} +@media only screen and (max-width: 1439px) { + .provided .route .fix { + padding: 40px 100px; + gap: 32px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .fix { + position: relative; + padding: 30px 16px; + flex-direction: column; + gap: 24px; + } +} +.provided .route .subs { + width: 100%; + margin-left: 150px; +} +@media only screen and (max-width: 1439px) { + .provided .route .subs { + margin-left: 80px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .subs { + margin-left: 0; + width: 100%; + } +} +.provided .route .subs li { + display: none; +} +.provided .route .subs li.on { + display: initial; +} +.provided .route .subs li .sub-tit { + font-size: 28px; + font-weight: 500; + color: #00832A; + margin-bottom: 20px; +} +@media only screen and (max-width: 1439px) { + .provided .route .subs li .sub-tit { + font-size: 24px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .subs li .sub-tit { + font-size: 20px; + margin-bottom: 16px; + } +} +.provided .route .subs li .mid-tit { + font-size: 72px; + color: var(--color-green); + display: inline-block; + margin-right: 32px; +} +@media only screen and (max-width: 1439px) { + .provided .route .subs li .mid-tit { + font-size: 56px; + margin-right: 24px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .subs li .mid-tit { + font-size: 36px; + margin-right: 16px; + display: block; + margin-bottom: 8px; + } +} +.provided .route .subs li .sub-text { + font-size: 20px; + display: inline-block; + line-height: 160%; +} +@media only screen and (max-width: 1439px) { + .provided .route .subs li .sub-text { + font-size: 18px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .subs li .sub-text { + font-size: 16px; + display: block; + line-height: 1.6; + } +} +.provided .route .content { + display: flex; + flex-direction: row; + width: 100%; + height: 80%; + min-height: 680px; +} +@media only screen and (max-width: 1439px) { + .provided .route .content { + min-height: 500px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .content { + flex-direction: column; + height: auto; + min-height: auto; + } +} +.provided .route .tabs { + width: 150px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + align-self: flex-end; + gap: 4px; + background: url(../img/primary_menu_bg.png); + background-size: cover; + background-repeat: no-repeat; + padding: 40px 0; + margin-right: -2px; +} +@media only screen and (max-width: 1439px) { + .provided .route .tabs { + width: 120px; + padding: 30px 0; + } +} +@media only screen and (max-width: 767px) { + .provided .route .tabs { + width: 100%; + height: auto; + flex-direction: row; + align-self: auto; + padding: 16px; + margin-right: 0; + overflow-x: auto; + gap: 8px; + } +} +.provided .route .tabs li { + width: 100%; + padding: 4px 0 8px 14px; + border-radius: 8px 0 0 8px; + cursor: pointer; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li { + width: auto; + min-width: 100px; + padding: 8px 12px; + border-radius: 8px; + } +} +.provided .route .tabs li.on { + background: rgba(255, 127, 28, 0.1019607843); + border: 3px solid #ff7f1c; + border-right: none; + position: relative; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li.on { + border-right: 3px solid #ff7f1c; + } +} +.provided .route .tabs li.on::before { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(-180deg, rgba(255, 127, 28, 0) 0%, #FF7F1C 100%); + display: block; + position: absolute; + top: -35px; + right: 0; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li.on::before { + display: none; + } +} +.provided .route .tabs li.on::after { + content: ""; + height: 35px; + width: 2px; + background: linear-gradient(180deg, #FF7F1C 0%, rgba(255, 127, 28, 0) 100%); + display: block; + position: absolute; + bottom: -35px; + right: 0; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li.on::after { + display: none; + } +} +.provided .route .tabs li a { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: left; + gap: 4px; + color: #fff; + border-radius: 4px; + font-size: 16px; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li a { + font-size: 14px; + align-items: center; + } +} +.provided .route .tabs li a b { + border-bottom: 1px solid rgba(38, 31, 16, 0.8666666667); + position: relative; + font-size: 14px; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs li a b { + font-size: 12px; + } +} +.provided .route .tabs li a b::after { + content: ""; + background: rgba(255, 255, 255, 0.1607843137); + width: 100%; + height: 1px; + position: absolute; + left: 0; + bottom: -2px; +} +.provided .route .tabs-li li { + color: #D7D2B0; + font-size: 12px; + padding: 0; + font-weight: 500; + border-radius: 4px 0 0 4px; + text-indent: 12px; + margin-bottom: 4px; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs-li li { + border-radius: 4px; + text-indent: 0; + padding: 4px 8px; + } +} +.provided .route .tabs-li.on li:first-child { + background: linear-gradient(180deg, #0C271E 0%, #0C271E 100%), linear-gradient(90deg, #68593f 0%, #debd7e 16%, rgba(104, 89, 63, 0) 100%); + background-origin: border-box; + background-clip: content-box, border-box; + border: 2px solid transparent; + color: var(--color-yellow); + font-size: 14px; + box-sizing: content-box; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8) inset; +} +@media only screen and (max-width: 767px) { + .provided .route .tabs-li.on li:first-child { + font-size: 12px; + } +} +.provided .route .imgs { + height: 100%; + width: 100%; + display: flex; + min-width: 1334px; + background: #0c271e; + border-radius: 16px; + box-sizing: border-box; + overflow: hidden; +} +@media only screen and (max-width: 1439px) { + .provided .route .imgs { + min-width: 100%; + } +} +@media only screen and (max-width: 767px) { + .provided .route .imgs { + min-width: 100%; + border-radius: 8px; + } +} +.provided .route .imgs li { + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + border-radius: 8px; + opacity: 1; + display: none; +} +.provided .route .imgs li.on { + width: 100%; + opacity: 1; + display: block; +} +.provided .route .imgs li a { + display: block; + width: 100%; + height: 100%; + padding: 32px; +} +@media only screen and (max-width: 1439px) { + .provided .route .imgs li a { + padding: 24px; + } +} +@media only screen and (max-width: 767px) { + .provided .route .imgs li a { + padding: 16px; + } +} +.provided .route .imgs li a img { + width: 100%; + max-height: 100%; +} + +.provided .process { + overflow: visible; /* 조상 overflow:hidden이면 position:sticky 비동작 */ +} +@media only screen and (max-width: 767px) { + .provided .process { + flex-direction: column; /* 모바일에서 .left가 min-width:100%면 .right에 공간이 남지 않음 → 세로 배치로 .right 노출 */ + } +} +.provided .process .left { + align-self: flex-start; /* flex stretch 시 sticky 무효화 방지 */ + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + min-width: 575px; + padding: 0; + padding-left: 200px; + height: auto; /* _layout-fix height: 200% 오버라이드 */ + min-height: var(--window-inner-height); + position: sticky; + top: 0; + left: 0; + z-index: 1; + overflow: visible; /* _layout-fix overflow: hidden 오버라이드 (hidden이면 sticky 비동작) */ +} +@media only screen and (max-width: 1439px) { + .provided .process .left { + min-width: 400px; + padding-left: 100px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .left { + position: relative; + min-width: 100%; + padding: 20px 16px; + min-height: auto; + gap: 16px; + } +} +.provided .process .left .bg:nth-child(1) { + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5019607843) 100%), url(../img/provided/bg_provided_natural.png); + background-size: cover; + background-position: bottom center; +} +.provided .process .left .bg:nth-child(2) { + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5019607843) 100%), url(../img/provided/bg_provided_social.png); + background-size: cover; + background-position: bottom center; +} +.provided .process .left .bg.on { + transform: scale(1); +} +.provided .process .left .mid-tit { + transform: scale(0.7) translate(-47%, 0%); + position: relative; + display: block; + font-size: 42px; +} +@media only screen and (max-width: 1439px) { + .provided .process .left .mid-tit { + font-size: 36px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .left .mid-tit { + font-size: 28px; + transform: none; + text-indent: 0; + } +} +.provided .process .left .mid-tit .num { + display: none; + font-weight: 300; + margin-right: 8px; +} +.provided .process .left .mid-tit::after { + position: absolute; + content: "●"; + top: 24px; + left: -20px; + font-size: 8px; + display: none; +} +.provided .process .left .mid-tit::before { + position: absolute; + content: ""; + top: 30px; + left: -123%; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent 50%, #fff 100%); + display: none; +} +.provided .process .left .mid-tit.on { + transform: initial; + text-indent: -66px; +} +@media only screen and (max-width: 767px) { + .provided .process .left .mid-tit.on { + text-indent: 0; + } +} +.provided .process .left .mid-tit.on strong { + font-weight: 700; + color: var(--color-yellow); +} +.provided .process .left .mid-tit.on .num { + display: initial; +} +.provided .process .left .mid-tit.on::after, .provided .process .left .mid-tit.on::before { + display: initial; +} +@media only screen and (max-width: 767px) { + .provided .process .left .mid-tit.on::after, .provided .process .left .mid-tit.on::before { + display: none; + } +} +.provided .process .right { + padding: 200px 170px 100px 135px; + display: flex; + flex-direction: column; + gap: 450px; +} +@media only screen and (max-width: 1439px) { + .provided .process .right { + padding: 120px 80px 60px 80px; + gap: 300px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right { + padding: 40px 16px; + gap: 80px; + } +} +.provided .process .right .sub-tit { + /* font-size: 28px; */ + font-weight: 500; + margin-bottom: 40px; + color: var(--color-green); +} +@media only screen and (max-width: 1439px) { + .provided .process .right .sub-tit { + font-size: 24px; + margin-bottom: 32px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-tit { + font-size: 20px; + margin-bottom: 24px; + line-height: 1.5; + } +} +.provided .process .right .sub-tit .ico-natural { + width: 64px; + height: 64px; + margin-bottom: 32px; + background: url(../img/ico/ico_natural.svg) no-repeat center center; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-tit .ico-natural { + width: 48px; + height: 48px; + margin-bottom: 20px; + } +} +.provided .process .right .sub-tit .ico-social { + width: 64px; + height: 64px; + margin-bottom: 32px; + background: url(../img/ico/ico_social.svg) no-repeat center center; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-tit .ico-social { + width: 48px; + height: 48px; + margin-bottom: 20px; + } +} +.provided .process .right .sub-tit img { + width: 48px; + margin-bottom: 20px; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-tit img { + width: 40px; + margin-bottom: 16px; + } +} +.provided .process .right .sub-text { + margin-bottom: 32px; +} +.provided .process .right .natural .cont-list { + grid-template-columns: 1fr 1fr 1fr; +} +.provided .process .right .natural .cont-list .cont-item { + gap: 28px; +} +.provided .process .right .cont-list { + list-style: none; + padding: 0; + margin: 0; + position: relative; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 12px; +} +@media only screen and (max-width: 1439px) { + .provided .process .right .cont-list { + grid-template-columns: 1fr 1fr; + gap: 16px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list { + grid-template-columns: 1fr; + gap: 20px; + } +} +.provided .process .right .cont-list::before { + content: ""; + position: absolute; + left: 50%; + bottom: 42%; + width: 437px; + height: 89px; + translate: -50% 0; + background: url(../img/provided/img_arrow_natural.svg) no-repeat center bottom; + background-size: 100% auto; + pointer-events: none; + z-index: 2; +} +@media only screen and (max-width: 1439px) { + .provided .process .right .cont-list::before { + width: 300px; + height: 60px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list::before { + display: none; + } +} +.provided .process .right .cont-list .cont-item { + position: relative; + z-index: 1; /* cont-list::before( wave ) 위에 보이도록 */ + flex-direction: column; + gap: 68px; + display: flex; + align-items: center; + justify-content: space-between; + border: 2px solid transparent; + border-radius: 6px; + transition: border-color 0.25s ease; +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list .cont-item { + gap: 20px; + } +} +.provided .process .right .cont-list .cont-item::before { + content: " "; + width: calc(100% - 4px); + height: 12px; + position: absolute; + top: 2px; + left: 2px; + z-index: 1; + border: 2px solid #00832A; + border-bottom: none; + box-sizing: border-box; +} +.provided .process .right .cont-list dl { + padding: 24px 12px; + width: 100%; + background: linear-gradient(180deg, #EAFFF1 0%, rgba(255, 255, 255, 0) 101.39%); + gap: 18px; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list dl { + padding: 20px 12px; + gap: 16px; + } +} +.provided .process .right .cont-list dl dt { + font-size: 22px; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .provided .process .right .cont-list dl dt { + font-size: 20px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list dl dt { + font-size: 18px; + } +} +.provided .process .right .cont-list dl dt i { + display: block; + width: 47px; + height: 47px; + margin-left: auto; + margin-right: auto; + margin-bottom: 4px; +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list dl dt i { + width: 40px; + height: 40px; + } +} +.provided .process .right .cont-list dl dt i.ico-location { + background: url(../img/ico/ico_location.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-weather { + background: url(../img/ico/ico_weather.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-eco { + background: url(../img/ico/ico_eco.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-city { + background: url(../img/ico/ico_city.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-population { + background: url(../img/ico/ico_population.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-land { + background: url(../img/ico/ico_land.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-building { + background: url(../img/ico/ico_building.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dt i.ico-society { + background: url(../img/ico/ico_society.svg) no-repeat center center; +} +.provided .process .right .cont-list dl dd { + position: relative; + width: 100%; + height: 196px; + padding: 16px 12px; + background-color: #fff; + border-radius: 4px; + word-break: keep-all; +} +@media only screen and (max-width: 1439px) { + .provided .process .right .cont-list dl dd { + height: auto; + min-height: 150px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list dl dd { + height: auto; + min-height: 120px; + padding: 12px; + } +} +.provided .process .right .cont-list dl dd::before { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(180deg, #DADADA 0%, rgba(218, 218, 218, 0) 100%); + box-sizing: border-box; + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; +} +.provided .process .right .cont-list dl dd ul { + list-style: none; + padding: 0; + margin: 0; +} +.provided .process .right .cont-list dl dd li { + margin: 12px 0; + text-align: center; + font-weight: 500; + letter-spacing: -0.05em; +} +@media only screen and (max-width: 767px) { + .provided .process .right .cont-list dl dd li { + margin: 8px 0; + font-size: 14px; + } +} +.provided .process .right .natural .sub-tit { + color: #00832A; +} +.provided .process .right .natural .cont-list dl dt { + color: #00832A; +} +.provided .process .right .social .sub-tit { + color: #A55500; +} +.provided .process .right .social .cont-list::before { + background-image: url(../img/provided/img_arrow_social.svg); +} +.provided .process .right .social .cont-list .cont-item::before { + border-color: #A55500; +} +.provided .process .right .social .cont-list dl { + background: linear-gradient(180deg, #FFF2E5 0%, rgba(255, 255, 255, 0) 101.39%); +} +.provided .process .right .social .cont-list dl dt { + color: #A55500; +} +.provided .process .right .social .sub-figs .fig-caption { + background: linear-gradient(90deg, rgba(165, 85, 0, 0.5) 0%, rgba(165, 85, 0, 0) 100%), #6E412A; +} +.provided .process .right .sub-figs { + background: var(--color-han-bgbr); + width: 100%; + border-radius: 4px; + overflow: hidden; +} +.provided .process .right .sub-figs .imgs { + width: 100%; +} +.provided .process .right .sub-figs .imgs img { + width: 100%; +} +.provided .process .right .sub-figs .fig-caption { + width: 100%; + height: 40px; + padding: 5px 10px; + font-size: 18px; + font-weight: 700; + text-align: center; + color: #fff; + background: linear-gradient(90deg, var(--L_Green, rgba(0, 131, 42, 0.5)) 0%, rgba(0, 131, 42, 0) 100%), var(--D_green, #1A543D); + background-blend-mode: screen, normal; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs .fig-caption { + height: auto; + min-height: 36px; + font-size: 16px; + padding: 8px; + } +} +.provided .process .right .sub-figs .text { + width: 100%; + display: flex; + flex-direction: column; + align-items: left; + justify-content: center; + gap: 16px; + font-size: 18px; + padding: 0 12px; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs .text { + font-size: 16px; + gap: 12px; + padding: 0 8px; + } +} +.provided .process .right .sub-figs .text b { + color: #000000; + font-size: 20px; + position: relative; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs .text b { + font-size: 18px; + } +} +.provided .process .right .sub-figs .text li { + font-size: 16px; + position: relative; + line-height: 24px; + margin-left: 8px; + padding-left: 16px; + margin-bottom: 4px; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs .text li { + font-size: 14px; + line-height: 20px; + margin-left: 4px; + padding-left: 12px; + } +} +.provided .process .right .sub-figs .text li::before { + position: absolute; + content: ""; + top: 14px; + left: 0; + width: 5px; + height: 4px; + background-color: var(--color-green); + transform: skew(-40deg); +} +.provided .process .right .sub-figs.style .text { + width: 45%; + padding: 0 32px; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs.style .text { + width: 100%; + padding: 0 12px; + } +} +.provided .process .right .sub-figs.style .sub-figs { + flex-direction: row; + padding: 0; +} +@media only screen and (max-width: 767px) { + .provided .process .right .sub-figs.style .sub-figs { + flex-direction: column; + } +} +.provided .process .right .sub-figs.style .sub-figs .imgs img { + height: 100%; +} +.provided .process .right .sub-figs.style .sub-figs .text li { + margin-bottom: 12px; +} +.provided .process .right .style, +.provided .process .right .block { + margin-bottom: 120px; +} +@media only screen and (max-width: 1439px) { + .provided .process .right .style, + .provided .process .right .block { + margin-bottom: 80px; + } +} +@media only screen and (max-width: 767px) { + .provided .process .right .style, + .provided .process .right .block { + margin-bottom: 60px; + } +} + +.provided .data-wrap { + position: relative; +} +.provided .data-wrap .data-core { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; +} +@media only screen and (max-width: 767px) { + .provided .data-wrap .data-core { + position: relative; + top: auto; + left: auto; + transform: none; + } +} +.provided .data-wrap .data-core .core-oval { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10; + width: max-content; + font-size: 22px; + color: #0C4B32; + line-height: 1.2; + text-align: center; +} +.provided .data-wrap .data-core .core-oval strong { + display: block; + font-size: 30px; + font-weight: 700; +} +@media only screen and (max-width: 1439px) { + .provided .data-wrap .data-core .core-oval strong { + font-size: 24px; + } +} +@media only screen and (max-width: 767px) { + .provided .data-wrap .data-core .core-oval strong { + font-size: 20px; + } +} +.provided .data-provision { + position: relative; + padding: 20px; + border-radius: 150px; + max-width: 720px; + max-height: 270px; + margin: 0 auto; + border: 1px solid #B9A279; + background: linear-gradient(270deg, #FAF5EF 0%, #FFFDF9 25%, rgba(244, 246, 242, 0) 50%, #E9EFEB 75%, #E9EFEB 100%); + box-shadow: 0 0 14.1px 0 rgba(0, 0, 0, 0.25); + display: flex; + align-items: center; + justify-content: space-between; + overflow: visible; +} +.provided .data-provision::before { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(90deg, #178C5E 0%, #B9A279 100%); + box-sizing: border-box; + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; +} +.provided .data-provision .data-bullet { + position: absolute; + top: 0; + left: 0; + width: 12px; + height: 12px; + background: #357863; + border-radius: 50%; + box-shadow: 0 0 8px rgba(38, 140, 100, 0.6); + offset-path: path("M 135,0 L 585,0 A 135 135 0 0 1 720 135 A 135 135 0 0 1 585 270 L 135,270 A 135 135 0 0 1 0 135 A 135 135 0 0 1 135 0 Z"); + offset-rotate: 0deg; + animation: moveBullet 10s linear infinite; + z-index: 20; + pointer-events: none; + opacity: 0.5; +} +.provided .data-provision .data-bullet.bullet-2 { + background: #886018; + box-shadow: 0 0 8px rgba(167, 116, 24, 0.6); + animation-delay: -5s; +} +.provided .data-provision .data-categories { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + gap: 220px; + width: 100%; +} +.provided .data-provision .data-categories .category-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + position: relative; +} +.provided .data-provision .data-categories .category-item.spatial .category-circle { + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13.19%, rgba(0, 0, 0, 0.3) 87.92%), linear-gradient(0deg, rgba(26, 84, 61, 0) 15%, #1A543D 100%), linear-gradient(0deg, #1A543D 0%, #1A543D 100%); +} +.provided .data-provision .data-categories .category-item.spatial .category-images { + left: -100px; +} +.provided .data-provision .data-categories .category-item.statistical .category-circle { + background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 74.74%), linear-gradient(0deg, #654A19 0%, #A77418 100%), linear-gradient(0deg, #1A543D 0%, #1A543D 100%); + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); +} +.provided .data-provision .data-categories .category-item.statistical .category-images { + right: -100px; +} +.provided .data-provision .data-categories .category-item .category-circle { + width: 234px; + height: 234px; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); + position: relative; +} +.provided .data-provision .data-categories .category-item .category-circle::before { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + box-sizing: border-box; + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; + padding: 4px; +} +.provided .data-provision .data-categories .category-item .category-circle .category-icon { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} +.provided .data-provision .data-categories .category-item .category-circle .category-icon img { + width: 56px; + height: 56px; + object-fit: contain; +} +.provided .data-provision .data-categories .category-item .category-circle .category-title { + font-size: 24px; + font-weight: 700; + color: #fff; + z-index: 2; +} +.provided .data-provision .data-categories .category-item .category-images { + position: absolute; + top: 50%; + height: 270px; + display: flex; + flex-direction: column; + gap: 15px; + width: 100%; + max-width: 300px; + translate: 0 -50%; + z-index: -1; +} +.provided .data-provision .data-categories .category-item .category-images .image-item { + width: auto; + overflow: hidden; + position: relative; + z-index: 0; + transition: transform 0.3s ease; + display: flex; + align-items: center; + gap: 15px; +} +.provided .data-provision .data-categories .category-item .category-images .image-item::before { + content: ""; + position: absolute; + top: 50%; + left: -20px; + transform: translateY(-50%); + width: 20px; + height: 2px; + background: rgba(0, 0, 0, 0.3); + z-index: 1; +} +.provided .data-provision .data-categories .category-item .category-images .image-item:hover { + transform: scale(1.05); +} +.provided .data-provision .data-categories .category-item .category-images .image-item img { + width: 100%; + height: 100%; + flex-shrink: 0; +} +.provided .data-provision .data-categories .category-item .category-images ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 15px; + position: absolute; + left: -120px; + right: auto; + top: 0; + height: 100%; + justify-content: space-between; + align-items: flex-start; + z-index: 1; + user-select: text; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories .category-item .category-images ul { + position: relative; + left: auto; + right: auto; + top: auto; + height: auto; + align-items: center; + } +} +.provided .data-provision .data-categories .category-item .category-images ul li { + position: relative; + padding-left: 20px; + font-size: 16px; + color: #000; + font-weight: 700; + white-space: nowrap; + opacity: 0; + transform: translateX(-10px); + animation: fadeInRight 0.5s ease forwards; + opacity: 0.9; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories .category-item .category-images ul li { + padding-left: 0; + padding-right: 20px; + font-size: 14px; + white-space: normal; + } +} +.provided .data-provision .data-categories .category-item .category-images ul li:nth-child(1) { + animation-delay: 0.1s; +} +.provided .data-provision .data-categories .category-item .category-images ul li:nth-child(2) { + animation-delay: 0.2s; +} +.provided .data-provision .data-categories .category-item .category-images ul li:nth-child(3) { + animation-delay: 0.3s; +} +.provided .data-provision .data-categories .category-item .category-images ul li:nth-child(4) { + animation-delay: 0.4s; +} +.provided .data-provision .data-categories .category-item .category-images ul li::before { + content: ""; + position: absolute; + top: 50%; + transform: translateY(-50%) skew(-40deg); + width: 40px; + height: 1px; + border-bottom: 1px dashed #268C64; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories .category-item .category-images ul li::before { + right: 0; + left: auto; + transform: translateY(-50%) skew(40deg); + } +} +.provided .data-provision .data-categories-list .spatial.fix { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 15px; + position: absolute; + left: -194px; + right: auto; + top: 50%; + width: 0; + height: 270px; + translate: 0 -50%; + justify-content: space-between; + align-items: flex-start; + z-index: 1; + user-select: text; + list-style: none; +} +.provided .data-provision .data-categories-list .spatial.fix > li { + display: flex; + align-items: center; + position: relative; + opacity: 0; + animation: fadeInRight 0.5s ease forwards; +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(1) { + align-self: flex-start; + margin-left: 40px; + animation-delay: 0.1s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix > li:nth-child(1) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(1) .dot { + top: calc(50% + 4px); + transform: skewY(20deg); +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(1) .dot::before { + transform: translate(50%, -50%) skewY(-20deg); +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(2) { + align-self: flex-start; + margin-left: -24px; + animation-delay: 0.2s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix > li:nth-child(2) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(3) { + align-self: flex-start; + animation-delay: 0.3s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix > li:nth-child(3) { + align-self: center; + } +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(4) { + align-self: flex-start; + margin-left: 4px; + animation-delay: 0.4s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix > li:nth-child(4) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(4) .dot { + top: -50%; + transform: skewY(-20deg); +} +.provided .data-provision .data-categories-list .spatial.fix > li:nth-child(4) .dot::before { + transform: translate(50%, -50%) skewY(20deg); +} +.provided .data-provision .data-categories-list .spatial.fix [class^=fix-] { + order: 1; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix [class^=fix-] { + order: 2; + } +} +.provided .data-provision .data-categories-list .spatial.fix [class^=fix-] p { + margin: 0; + padding-right: 12px; + font-size: 16px; + font-weight: 700; + white-space: nowrap; + display: flex; + flex-direction: column; + align-items: flex-start; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix [class^=fix-] p { + padding-right: 0; + padding-left: 12px; + align-items: flex-end; + font-size: 14px; + white-space: normal; + } +} +.provided .data-provision .data-categories-list .spatial.fix [class^=fix-] p span { + font-size: 11px; + font-weight: 500; + color: #268C64; + opacity: 0.75; + margin-top: 2px; +} +.provided .data-provision .data-categories-list .spatial.fix .dot { + order: 2; + position: relative; + flex-shrink: 0; + width: 50px; + height: 0; + border-top: 1px dashed #268C64; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix .dot { + order: 1; + width: 40px; + } +} +.provided .data-provision .data-categories-list .spatial.fix .dot::before { + content: ""; + position: absolute; + right: 0; + top: 50%; + width: 6px; + height: 6px; + border-radius: 50%; + background: #1A543D; + border: 2px solid #268C64; + box-shadow: 0 0 0 2px rgba(38, 140, 100, 0.2); + transform: translate(50%, -50%); +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .spatial.fix .dot::before { + left: 0; + right: auto; + transform: translate(-50%, -50%); + } +} +.provided .data-provision .data-categories-list .statistical.fix { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 15px; + position: absolute; + right: -72px; + left: auto; + top: 50%; + width: 0; + list-style: none; + height: 270px; + translate: 0 -50%; + justify-content: space-between; + align-items: flex-start; + z-index: 1; + user-select: text; +} +.provided .data-provision .data-categories-list .statistical.fix > li { + display: flex; + align-items: center; + position: relative; + opacity: 0; + animation: fadeInRight 0.5s ease forwards; +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(1) { + align-self: flex-start; + margin-left: -40px; + animation-delay: 0.1s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix > li:nth-child(1) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(1) .dot { + top: calc(50% + 4px); + transform: skewY(-20deg); +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(1) .dot::before { + transform: translate(-50%, -50%) skewY(20deg); +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(2) { + align-self: flex-start; + margin-left: -2px; + animation-delay: 0.2s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix > li:nth-child(2) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(3) { + align-self: flex-start; + animation-delay: 0.3s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix > li:nth-child(3) { + align-self: center; + } +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(4) { + align-self: flex-start; + margin-left: -36px; + animation-delay: 0.4s; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix > li:nth-child(4) { + align-self: center; + margin-left: 0; + } +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(4) .dot { + top: -50%; + transform: skewY(20deg); +} +.provided .data-provision .data-categories-list .statistical.fix > li:nth-child(4) .dot::before { + transform: translate(-50%, -50%) skewY(-20deg); +} +.provided .data-provision .data-categories-list .statistical.fix [class^=fix-] { + order: 2; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix [class^=fix-] { + order: 1; + } +} +.provided .data-provision .data-categories-list .statistical.fix [class^=fix-] p { + margin: 0; + padding-left: 12px; + font-size: 16px; + color: #000; + font-weight: 700; + white-space: nowrap; + display: flex; + flex-direction: column; + align-items: flex-end; +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix [class^=fix-] p { + padding-left: 0; + padding-right: 12px; + align-items: flex-start; + font-size: 14px; + white-space: normal; + } +} +.provided .data-provision .data-categories-list .statistical.fix [class^=fix-] p span { + font-size: 11px; + font-weight: 500; + color: #8D6318; + opacity: 0.85; + margin-top: 2px; +} +.provided .data-provision .data-categories-list .statistical.fix .dot { + order: 1; + position: relative; + flex-shrink: 0; + width: 50px; + height: 0; + border-top: 1px dashed #8D6318; + transform: skew(-40deg); +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix .dot { + order: 2; + width: 40px; + } +} +.provided .data-provision .data-categories-list .statistical.fix .dot::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + width: 6px; + height: 6px; + border-radius: 50%; + background: #805B18; + border: 2px solid #8D6318; + box-shadow: 0 0 0 2px rgba(141, 99, 24, 0.2); + transform: translate(-50%, -50%) skew(40deg); +} +@media only screen and (max-width: 767px) { + .provided .data-provision .data-categories-list .statistical.fix .dot::before { + right: 0; + left: auto; + transform: translate(50%, -50%) skew(-40deg); + } +} + +@keyframes expand-primary { + 0% { + width: 0; + height: 0; + opacity: 1; + } + 99% { + width: 500%; + height: 500%; + opacity: 0; + } + 100% { + opacity: 0; + border-color: transparent; + } +} +@keyframes areaDimLayer { + 0%, 1.99% { + opacity: 0; + } + 2%, 74.99% { + opacity: 1; + } + 75%, 100% { + opacity: 0; + } +} +@keyframes areaApx01 { + 0%, 1.99% { + opacity: 0; + } + 2%, 74.99% { + opacity: 1; + } + 75%, 100% { + opacity: 0; + } +} +@keyframes areaApx02 { + 0%, 24.99% { + opacity: 0; + } + 25%, 74.99% { + opacity: 1; + } + 75%, 100% { + opacity: 0; + } +} +@keyframes areaRectBox { + 0%, 24.99% { + opacity: 0; + } + 25%, 74.99% { + opacity: 1; + } + 75%, 100% { + opacity: 0; + } +} +@keyframes areaKeyPoint { + 0%, 24.99% { + opacity: 0; + } + 25%, 74.99% { + opacity: 1; + } + 75%, 100% { + opacity: 0; + } +} +@keyframes progressApx01 { + 0%, 49.99% { + opacity: 1; + } + 50%, 100% { + opacity: 0; + } +} +@keyframes progressApx02 { + 0%, 49.99% { + opacity: 0; + } + 50%, 62.99% { + opacity: 1; + } + 63%, 100% { + opacity: 0; + } +} +@keyframes progressApx03 { + 0%, 62.99% { + opacity: 0; + } + 63%, 100% { + opacity: 1; + } +} +@keyframes progressSlideItem1 { + 0%, 12.49% { + opacity: 1; + } + 12.5%, 100% { + opacity: 0; + } +} +@keyframes progressSlideItem2 { + 0%, 12.49% { + opacity: 0; + } + 12.5%, 24.99% { + opacity: 1; + } + 25%, 100% { + opacity: 0; + } +} +@keyframes progressSlideItem3 { + 0%, 24.99% { + opacity: 0; + } + 25%, 37.49% { + opacity: 1; + } + 37.5%, 100% { + opacity: 0; + } +} +@keyframes progressSlideItem4 { + 0%, 37.49% { + opacity: 0; + } + 37.5%, 49.99% { + opacity: 1; + } + 50%, 100% { + opacity: 0; + } +} +@keyframes progressKeyPoint { + 0%, 54.99% { + opacity: 0; + } + 55% { + opacity: 1; + } + 100% { + opacity: 1; + } +} +@keyframes costDimLayer { + 0%, 100% { + opacity: 1; + } +} +@keyframes costApx01 { + 0%, 32.99% { + opacity: 1; + } + 33%, 100% { + opacity: 0; + } +} +@keyframes costZoomBox01 { + 0%, 8% { + opacity: 0; + transform: scale(0); + } + 10% { + opacity: 1; + transform: scale(0.95); + } + 32.99% { + opacity: 1; + transform: scale(0.95); + } + 33%, 100% { + opacity: 0; + transform: scale(0); + } +} +@keyframes costApx02 { + 0%, 32.99% { + opacity: 0; + } + 33%, 65.99% { + opacity: 1; + } + 66%, 100% { + opacity: 0; + } +} +@keyframes costZoomBox02 { + 0%, 32.99% { + opacity: 0; + } + 33%, 65.99% { + opacity: 1; + } + 66%, 100% { + opacity: 0; + } +} +@keyframes costApx03 { + 0%, 65.99% { + opacity: 0; + } + 66%, 99.99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes costZoomBox03 { + 0%, 65.99% { + opacity: 0; + } + 66%, 99.99% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes dataApx01 { + 0%, 30% { + opacity: 0; + } + 35%, 100% { + opacity: 1; + } +} +@keyframes dataApx02 { + 0%, 65% { + opacity: 0; + } + 70%, 100% { + opacity: 1; + } +} +.wrap:has(.container.primary) { + overflow: visible; +} + +.primary .sub-header { + background-image: url(../img/primary/bg_primary_title.jpg); +} +.primary .sub-content::before { + content: "Key\a Features"; +} +.primary .sub-content .sub-tit-box { + text-align: center; +} +.primary .sub-content .diagram-wrap { + width: 59.7222%; + max-width: 480px; + aspect-ratio: 1/1; + margin: 30px auto 60px auto; + position: relative; + overflow: visible; + background-image: url(../img/bg_atom_obj.svg); + background-repeat: no-repeat; + background-position: top center; + background-size: contain; +} +.primary .sub-content .diagram-wrap::after { + content: ""; + position: absolute; + width: 100%; + aspect-ratio: 1/1; + top: 0; + left: 0; + background-image: url(../img/bg_atom_line.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} +.primary .sub-content .diagram-wrap .dia-circles-wrap { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + aspect-ratio: 1/1; +} +.primary .sub-content .diagram-wrap .dia-circles-wrap::after { + display: none; +} +.primary .sub-content .diagram-wrap .circle-core { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 52%; + aspect-ratio: 1/1; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(0deg, #1A543D 0%, #00832A 100%); + line-height: 95%; +} +.primary .sub-content .diagram-wrap .circle-core span { + font-size: 28px; + width: 100%; + font-weight: 700; +} +.primary .sub-content .diagram-wrap .circle-core span:first-child { + font-size: 20px; + font-weight: 400; +} +.primary .sub-content .diagram-wrap .circle-dots .dot { + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + background: #116436; +} +.primary .sub-content .diagram-wrap .circle-dots .dot:nth-child(1) { + color: #afd7ca; + top: 5.41666%; + left: 38.3333%; + transform: translateY(-50%); +} +.primary .sub-content .diagram-wrap .circle-dots .dot:nth-child(2) { + background: rgba(100, 83, 60, 0.2); + color: #eaddce; + top: 24.25%; + left: 92.5%; + transform: translateY(-50%) rotate(240deg); +} +.primary .sub-content .diagram-wrap .circle-dots .dot:nth-child(3) { + color: #f1d1c1; + top: 67.70833%; + left: 16px; + transform: translateY(-50%) rotate(120deg); +} +.primary .sub-content .diagram-wrap .circle-dots .dot:nth-child(4) { + color: var(--color-han-br); + top: 62.5%; + right: 24px; + transform: translateY(-50%) rotate(240deg); +} +.primary .sub-content .diagram-wrap .circle-dots .dot::before { + content: ""; + width: inherit; + height: inherit; + border-radius: inherit; + position: absolute; + z-index: -10; + opacity: 0; + animation: 2s expand-primary cubic-bezier(0.29, 0, 0, 1) infinite; + border: 2px solid; +} +.primary .sub-content .diagram-wrap .circle-dots.move { + animation-name: dot-rotate3; +} +.primary .sub-content .diagram-wrap .dia-element { + position: absolute; + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 16px; + text-align: right; + font-size: 16px; +} +@media only screen and (max-width: 1023px) { + .primary .sub-content .diagram-wrap .dia-element { + gap: 8px; + } +} +.primary .sub-content .diagram-wrap .dia-element i { + width: 40px; + aspect-ratio: 1/1; + flex-shrink: 0; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +@media only screen and (max-width: 1023px) { + .primary .sub-content .diagram-wrap .dia-element i { + width: 3rem; + } +} +.primary .sub-content .diagram-wrap .dia-element.e01 { + top: 0; + left: -14%; +} +@media only screen and (max-width: 1023px) { + .primary .sub-content .diagram-wrap .dia-element.e01 { + top: -16%; + left: 24%; + flex-direction: column-reverse; + align-items: flex-start; + } + .primary .sub-content .diagram-wrap .dia-element.e01 .dia-tit { + text-align: left; + } +} +.primary .sub-content .diagram-wrap .dia-element.e02 { + bottom: 27%; + left: -52%; +} +@media only screen and (max-width: 1279px) { + .primary .sub-content .diagram-wrap .dia-element.e02 { + bottom: 13%; + left: -38%; + flex-direction: column; + align-items: flex-end; + } +} +@media only screen and (max-width: 1023px) { + .primary .sub-content .diagram-wrap .dia-element.e02 { + bottom: 8%; + left: -8%; + align-items: flex-start; + } + .primary .sub-content .diagram-wrap .dia-element.e02 .dia-tit { + text-align: left; + } +} +.primary .sub-content .diagram-wrap .dia-element.e03 { + bottom: 33%; + right: -59%; + flex-direction: row; + text-align: left; +} +@media only screen and (max-width: 1279px) { + .primary .sub-content .diagram-wrap .dia-element.e03 { + bottom: 20%; + right: -50%; + flex-direction: column; + align-items: flex-start; + } +} +@media only screen and (max-width: 1023px) { + .primary .sub-content .diagram-wrap .dia-element.e03 { + bottom: 14%; + right: -8%; + align-items: flex-end; + } + .primary .sub-content .diagram-wrap .dia-element.e03 .dia-tit { + text-align: right; + } +} +.primary .sub-content .diagram-wrap .dia-element.e01 i { + background-image: url(../img/ico/ico_zone.svg); +} +.primary .sub-content .diagram-wrap .dia-element.e02 i { + background-image: url(../img/ico/ico_setting.svg); +} +.primary .sub-content .diagram-wrap .dia-element.e03 i { + background-image: url(../img/ico/ico_check_list.svg); +} +.primary .sub-content .diagram-wrap .dia-element .dia-tit { + opacity: 0.9; +} +@media only screen and (max-width: 991px) { + .primary .sub-content .diagram-wrap .dia-element .dia-tit { + font-size: 1.4rem; + } +} + +.primary .key { + margin-bottom: 160px; + padding-top: 320px; + gap: 48px; + max-width: 1920px; +} +.primary .key .left { + overflow: initial; + z-index: 10; + min-width: 600px; +} +.primary .key .left .mid-tit { + width: calc(100vw - 200px); + max-width: 1720px; + height: 500px; + transform: translateY(-320px); + opacity: 1; + position: absolute; + top: 0; + left: 0; + background-size: cover; + background-repeat: no-repeat; +} +.primary .key .left .mid-tit span { + position: absolute; + bottom: -120px; + left: 200px; + line-height: 1.2; +} +.primary .key .left .mid-tit span strong { + color: #000; +} +.primary .key .left ul { + padding-top: 240px; + display: flex; + flex-direction: column; + gap: 24px; +} +.primary .key .left ul li { + font-size: 20px; + font-weight: 300; + white-space: nowrap; + cursor: pointer; + transition: all 0.15s linear; +} +.primary .key .left ul li:hover, .primary .key .left ul li.on { + font-size: 24px; + color: var(--color-green); + font-weight: 700; +} +.primary .key .left ul li strong { + margin-right: 12px; + color: inherit; + font-weight: inherit; +} +.primary .key .right { + padding: 300px 200px 80px 0; + display: flex; + flex-direction: column; + gap: 140px; +} +.primary .key .right .sub-tit { + margin-bottom: 20px; + color: var(--color-green); +} +.primary .key .right .sub-text { + text-align: justify; + margin-bottom: 42px; +} +.primary .key .right .sub-figs { + position: relative; + background: var(--color-han-bgbr); + width: 100%; + max-width: max-content; + border-radius: 4px; + display: flex; + flex-direction: row; +} +.primary .key .right .sub-figs .dim-layer { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} +.primary .key .right .sub-figs .apx { + position: absolute; +} +.primary .key .right .sub-figs .apx img, .primary .key .right .sub-figs .apx svg { + width: 100%; + height: 100%; +} +.primary .key .right .sub-figs.area { + overflow: visible; + will-change: contents; + transform: translateZ(0); + -webkit-font-smoothing: antialiased; + aspect-ratio: 1030/357; +} +.primary .key .right .sub-figs.area > img { + opacity: 1; +} +.primary .key .right .sub-figs.area .dim-layer { + opacity: 0; + z-index: 1; + will-change: opacity; + backface-visibility: hidden; + transform: translateZ(0); + animation: areaDimLayer 3s ease-in-out infinite; +} +.primary .key .right .sub-figs.area .apx-01 { + top: 1.1204481793%; + left: 6.3106796117%; + width: 27.4757281553%; + height: 102.8011204482%; + box-shadow: -3.9px -3.9px 11.467px 0 rgba(0, 0, 0, 0.25); + opacity: 0; + z-index: 2; + will-change: opacity; + backface-visibility: hidden; + transform: translateZ(0); + animation: areaApx01 3s ease-in-out infinite; +} +.primary .key .right .sub-figs.area .apx-01 .rect-box { + position: absolute; + display: block; + border: 4px solid #FF5917; + width: 94.6996466431%; + height: 21.2534059946%; + border-radius: 4px; + top: 2.1798365123%; + right: 2.8268551237%; + opacity: 0; + z-index: 3; + will-change: opacity; + backface-visibility: hidden; + transform: translateZ(0); + animation: areaRectBox 3s ease-in-out infinite; + box-sizing: border-box; + min-width: 1px; + min-height: 1px; +} +.primary .key .right .sub-figs.area .apx-01 .key-point { + position: absolute; + top: 15.8038147139%; + right: 4.9469964664%; + width: 12.7208480565%; + height: 10.8991825613%; + opacity: 0; + z-index: 3; + will-change: opacity, transform; + backface-visibility: hidden; + transform: translateZ(0); + animation: areaKeyPoint 3s ease-in-out infinite; +} +.primary .key .right .sub-figs.area .apx-01 .key-point img { + will-change: transform; + backface-visibility: hidden; + transform: translateZ(0); + animation: pulseCircle 2s ease-in-out 1.2s infinite; +} +.primary .key .right .sub-figs.area .apx-01 .key-point svg circle { + will-change: transform; + animation: pulseCircle 2s ease-in-out 1.2s infinite; + transform-origin: center; +} +.primary .key .right .sub-figs.area .apx-02 { + position: absolute; + top: -1.6806722689%; + left: 48.932038835%; + width: 31.8446601942%; + height: 99.4397759104%; + opacity: 0; + z-index: 3; + will-change: opacity; + backface-visibility: hidden; + transform: translateZ(0); + animation: areaApx02 3s ease-in-out infinite; +} +.primary .key .right .sub-figs.report { + aspect-ratio: 1030/423; +} +.primary .key .right .sub-figs.report .apx-01 { + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: dataApx01 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.report .apx-02 { + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: dataApx02 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.progress { + aspect-ratio: 1030/357; +} +.primary .key .right .sub-figs.progress .apx-01 { + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: progressApx01 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.progress .apx-02 { + top: 0; + left: 0; + width: 100%; + height: 100%; + animation: progressApx02 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.progress .apx-03 { + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + animation: progressApx03 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.progress .sub-apx-slide { + position: absolute; + top: 13.0308123249%; + left: 6.5048543689%; + width: 31.8446601942%; + height: 59.943977591%; + overflow: hidden; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + box-shadow: -5.363px -5.363px 16.089px 0 rgba(0, 0, 0, 0.25); + animation-duration: 6s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item img { + width: 100%; + height: 100%; + object-fit: contain; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item:nth-child(1) { + animation-name: progressSlideItem1; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item:nth-child(2) { + animation-name: progressSlideItem2; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item:nth-child(3) { + animation-name: progressSlideItem3; +} +.primary .key .right .sub-figs.progress .sub-apx-slide-item:nth-child(4) { + animation-name: progressSlideItem4; +} +.primary .key .right .sub-figs.cost { + aspect-ratio: 1030/423; +} +.primary .key .right .sub-figs.cost .dim-layer { + animation: costDimLayer 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx { + top: 0.4728132388%; + left: 5.8252427184%; + width: 22.5242718447%; + height: 96.4539007092%; + opacity: 1; +} +.primary .key .right .sub-figs.cost .apx::before { + content: " "; + position: absolute; + border-radius: 2px; + top: 0.9803921569%; + left: -0.3590664273%; + width: 96.9696969697%; + height: 98.0392156863%; + border: 1px dashed #FF5917; + z-index: 1; +} +.primary .key .right .sub-figs.cost .apx .zoom-box { + position: absolute; + top: -11.2745098039%; + left: -2.5862068966%; + width: 179.3103448276%; + height: 120.8333333333%; + opacity: 0; + z-index: 2; + will-change: opacity, transform; + backface-visibility: hidden; + transform: translateZ(0); + transform-origin: center left; + box-sizing: border-box; + min-width: 1px; + min-height: 1px; + transform: scale(0.95); +} +.primary .key .right .sub-figs.cost .apx-01 { + animation: costApx01 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx-01 .zoom-box { + animation: costZoomBox01 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx-02 { + animation: costApx02 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx-02 .zoom-box { + animation: costZoomBox02 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx-03 { + animation: costApx03 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.cost .apx-03 .zoom-box { + animation: costZoomBox03 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.data { + aspect-ratio: 1030/357; +} +.primary .key .right .sub-figs.data > img { + opacity: 1; +} +.primary .key .right .sub-figs.data .apx-01 { + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + animation: dataApx01 6s ease-in-out infinite; +} +.primary .key .right .sub-figs.data .apx-02 { + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + animation: dataApx02 6s ease-in-out infinite; +} +.primary .key .right .sub-figs .text { + position: relative; + width: 100%; + min-width: 280px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + font-size: 18px; + padding: 24px 0; +} +.primary .key .right .sub-figs .top { + text-align: center; +} +.primary .key .right .sub-figs .line { + width: 40%; + border-top: 1px solid #000; + font-size: 0; + box-sizing: border-box; +} +.primary .key .right .sub-figs .line img { + margin: -1px auto 0; + display: block; +} +.primary .key .right .sub-figs .bottom { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + color: var(--color-green); +} +.primary .key .right .sub-figs .bottom img { + width: 40px; + object-fit: contain; +} +.primary .key .right .sub-figs img:not(.apx) { + max-width: 100%; + height: auto; + object-fit: contain; +} +.primary .key.key .left .mid-tit { + background-image: url(../img/primary/bg_key_title.png); +} + +@media (max-width: 1600px) { + .primary .key .left { + padding-left: 120px; + min-width: 520px; + } + .primary .key .left .mid-tit { + width: calc(100vw - 120px); + } + .primary .key .left .mid-tit span { + left: 120px; + } + .primary .key .right { + padding-right: 120px; + } +} +@media (max-width: 1400px) { + .primary .key .left { + padding-left: 80px; + min-width: 450px; + } + .primary .key .left .mid-tit { + width: calc(100vw - 80px); + height: 360px; + transform: translateY(-200px); + } + .primary .key .left .mid-tit span { + left: 80px; + bottom: -110px; + font-size: 48px; + } + .primary .key .left ul { + padding-top: 204px; + } + .primary .key .right { + padding-right: 100px; + padding-top: 255px; + } + .primary .key .right .sub-figs { + grid-template-columns: initial; + } + .primary .key .right .sub-text br { + display: none; + } + .primary .key .right .sub-figs .text br { + display: none; + } + .primary .key .right .sub-figs .line { + width: 88%; + } +} +@media (max-width: 1200px) { + .primary .key { + margin-bottom: 40px; + } + .primary .key .left { + min-width: 350px; + padding-left: 64px; + } + .primary .key .left .mid-tit { + width: calc(100vw - 64px); + } + .primary .key .left .mid-tit span { + font-size: 40px; + bottom: -90px; + left: 64px; + } + .primary .key .left .mid-tit strong { + display: block; + } + .primary .key .left ul { + padding-top: 180px; + gap: 16px; + } + .primary .key .left ul li { + font-size: 16px; + } + .primary .key .left ul li.on { + font-size: 18px; + } + .primary .key .right { + padding-right: 76px; + padding-top: 240px; + } + .primary .key .right .sub-figs { + grid-template-columns: initial; + } +} +@media (max-width: 992px) { + .primary .key { + flex-direction: column; + padding: 0; + margin-bottom: 120px; + } + .primary .key .left { + width: 100%; + height: 100px; + padding: 0; + box-shadow: 0 8px 8px rgba(0, 0, 0, 0.0666666667); + } + .primary .key .left .mid-tit { + transform: initial; + width: 100%; + height: 100%; + left: initial; + background: #fff !important; + color: #000; + } + .primary .key .left .mid-tit span { + left: 48px; + font-size: 34px; + bottom: 8px; + } + .primary .key .left .mid-tit span strong { + color: #000; + } + .primary .key .left .mid-tit span br { + display: none; + } + .primary .key .left ul { + display: none; + } + .primary .key .right { + padding: 0 48px 48px; + } + .primary .key .right .sub-figs { + grid-template-columns: 2.5fr 1fr; + } + .primary .key .right .sub-figs .text { + padding: 24px 0; + font-size: 16px; + } + .primary .key .right .sub-figs .text br { + display: initial; + } + .primary .key .right .sub-figs .text br.brk { + display: none; + } + .primary .key .right .sub-figs .line { + width: 40%; + } + .primary .key .right .sub-figs .bottom img { + width: 30px; + } + .primary .key .right .sub-figs img:not(.apx) { + width: 100%; + } +} +@media (max-width: 768px) { + .primary .sub-content::before { + font-size: 72px; + left: 4px; + } + .primary .key .right .sub-tit { + font-size: 22px; + margin-bottom: 12px; + } + .primary .key .right .sub-figs { + grid-template-columns: initial; + } + .primary .key .right .sub-figs .text { + min-width: initial; + } + .primary .key .right .sub-figs .text br { + display: none; + } + .primary .key .right .sub-figs .line { + width: 80%; + } + .primary .key .right .sub-figs img:not(.apx) { + width: 100%; + } +} +@media (max-width: 576px) { + .primary .key .left .mid-tit { + height: 100px; + } + .primary .key .left .mid-tit span { + left: 24px; + font-size: 26px; + bottom: 0; + } + .primary .key .right { + padding: 0 24px; + } + .primary .key .right .sub-tit { + font-size: 20px; + } +} +@keyframes spatial-03-ani { + 0% { + transform: translate(-40px, -28px) scale(100%); + opacity: 0.85; + } + 50% { + transform: translate(100px, -28px) scale(150%); + opacity: 0; + } + 100% { + opacity: 0; + } +} +@keyframes apxWidthToggle { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} +.wrap:has(.container.analysis) { + overflow: visible; +} + +.analysis .sub-header { + background-image: url(../img/analysis/bg_analysis_title.jpg); +} +.analysis .sub-content::before { + content: "Data Analysis"; +} +@media only screen and (max-width: 1023px) { + .analysis .sub-content::before { + content: "Data\a Analysis"; + } +} +.analysis .sub-content .dia-element-ring { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + z-index: 2; + pointer-events: none; +} +.analysis .sub-content .dia-element-ring .dia-element { + width: max-content; + gap: 12px; + position: absolute; + left: 0; + top: 0; + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-210px) rotate(calc(-1 * var(--angle, 0deg))); + display: flex; + flex-direction: column; + align-items: center; + pointer-events: auto; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element { + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-170px) rotate(calc(-1 * var(--angle, 0deg))); + } +} +@media only screen and (max-width: 575px) { + .analysis .sub-content .dia-element-ring .dia-element { + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-140px) rotate(calc(-1 * var(--angle, 0deg))); + } +} +.analysis .sub-content .dia-element-ring .dia-element .line { + width: 0; + height: 38px; + border-left: 1px dashed #046A50; + position: relative; + flex-shrink: 0; + transform: rotate(var(--angle, 0deg)); + transform-origin: center top; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element .line { + height: 32px; + } +} +.analysis .sub-content .dia-element-ring .dia-element .dia-tit { + font-size: 18px; + line-height: 1.25; + white-space: nowrap; +} +@media only screen and (max-width: 575px) { + .analysis .sub-content .dia-element-ring .dia-element .dia-tit { + font-size: 1.2rem; + } +} +.analysis .sub-content .dia-element-ring .dia-element i { + width: 48px; + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element i { + width: 3.2rem; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element01 { + top: -20px; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element01 { + top: -16px; + } + .analysis .sub-content .dia-element-ring .dia-element.dia-element01 .dia-tit { + flex-direction: column-reverse; + } +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element01 { + top: -10px; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element01 i { + background-image: url(../img/ico/ico_statistic.svg); +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element02 { + top: 10px; + margin-left: 60px; + flex-direction: row-reverse; + display: flex; + align-items: flex-end; + justify-content: flex-start; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element02 { + top: -24px; + margin-left: 24px; + } +} +@media only screen and (max-width: 575px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element02 { + top: -14px; + margin-left: 24px; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element02 .dia-tit { + flex-direction: row; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element02 .dia-tit { + flex-direction: column; + align-items: flex-start; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element02 .dia-tit span { + text-align: left; +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element02 i { + background-image: url(../img/ico/ico_mind_map.svg); +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element03 { + top: 10px; + margin-left: -60px; + flex-direction: row; + display: flex; + align-items: flex-end; + justify-content: flex-start; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element03 { + top: -24px; + margin-left: -24px; + } +} +@media only screen and (max-width: 575px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element03 { + top: -14px; + margin-left: -24px; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element03 .dia-tit { + flex-direction: row-reverse; + text-align: left; +} +@media only screen and (max-width: 767px) { + .analysis .sub-content .dia-element-ring .dia-element.dia-element03 .dia-tit { + flex-direction: column; + align-items: flex-end; + } +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element03 .dia-tit span { + text-align: right; +} +.analysis .sub-content .dia-element-ring .dia-element.dia-element03 i { + background-image: url(../img/ico/ico_graph_box.svg); +} +.analysis .sub-content .dia-circles-wrap .circle-belt { + background: #F0F7F5; + border: 1px solid #B6D0C9; +} +.analysis .sub-content .dia-circles-wrap .circle-dash { + border: 1px dashed #B6D0C9; +} +.analysis .sub-content .dia-circles-wrap .circle-dots.move .dot { + background: #046A50; +} +.analysis .sub-content .dia-circles-wrap .circle-dots .dot { + background: #046A50; +} +.analysis .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(1) { + top: 0%; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.analysis .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(2) { + top: 75%; + left: 5.5%; + transform: translateY(-50%) rotate(120deg); +} +.analysis .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(3) { + top: 75%; + right: 5.5%; + transform: translateY(-50%) rotate(240deg); +} +.analysis .sub-content .dia-circles-wrap .circle-dots.move { + animation-name: dot-rotate3; +} +.analysis .sub-content .dia-circles-wrap .circle-core::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%); + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; + padding: 4px; +} +.analysis .sub-content .dia-circles-wrap .circle-core span { + line-height: 1.2; +} +.analysis .sub-content .dia-circles-wrap .circle-core span:first-child { + font-size: 20px; + font-weight: 400; +} + +.analysis .key { + padding-bottom: 160px; + padding-top: 320px; + gap: 48px; + max-width: 1920px; + margin: 0 auto; +} +.analysis .key .left { + overflow: initial; + z-index: 10; + min-width: 600px; +} +.analysis .key .left .mid-tit { + width: calc(100vw - 200px); + max-width: 1720px; + height: 500px; + transform: translateY(-320px); + opacity: 1; + position: absolute; + top: 0; + left: 0; + background-size: cover; + background-repeat: no-repeat; +} +.analysis .key .left .mid-tit span { + position: absolute; + bottom: -70px; + left: 200px; +} +.analysis .key .left .mid-tit span strong { + color: #000; +} +.analysis .key .left ul { + padding-top: 200px; + display: flex; + flex-direction: column; + gap: 24px; +} +.analysis .key .left ul li { + font-size: 20px; + font-weight: 300; + white-space: nowrap; + cursor: pointer; +} +.analysis .key .left ul li:hover, .analysis .key .left ul li.on { + font-size: 24px; + color: var(--color-green); + font-weight: 700; +} +.analysis .key .left ul li strong { + margin-right: 12px; + color: inherit; + font-weight: inherit; +} +.analysis .key .right { + padding: 300px 200px 80px 0; + display: flex; + flex-direction: column; + gap: 100px; +} +.analysis .key .right .sub-tit { + margin-bottom: 20px; + color: var(--color-green); +} +.analysis .key .right .sub-text { + word-break: keep-all; + text-align: left; + margin-bottom: 32px; +} +.analysis .key .right .sub-figs { + position: relative; + background: var(--color-han_bgbr); + width: 100%; + max-width: max-content; + border-radius: 4px; +} +.analysis .key .right .sub-figs .apx { + position: absolute; +} +.analysis .key .right .sub-figs .apx img, .analysis .key .right .sub-figs .apx svg { + width: 100%; + height: 100%; +} +.analysis .key .right .sub-figs .text { + position: relative; + width: 100%; + min-width: 280px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + font-size: 18px; + padding: 24px 0; +} +.analysis .key .right .sub-figs .top { + text-align: center; +} +.analysis .key .right .sub-figs .line { + width: 40%; + border-top: 1px solid #000; + font-size: 0; + box-sizing: border-box; +} +.analysis .key .right .sub-figs .line img { + margin: -1px auto 0; + display: block; +} +.analysis .key .right .sub-figs .bottom { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + color: var(--color-green); +} +.analysis .key .right .sub-figs .bottom img { + width: 40px; + object-fit: contain; +} + +.analysis .spatial .sub-figs { + position: relative; +} +.analysis .spatial .left .mid-tit { + background-image: url(../img/analysis/bg_spatial_title.png); +} +.analysis .spatial .spatial01 .sub-figs .apx { + top: 0; + left: 0; + width: 0; + height: 100%; + overflow: hidden; + animation: apxWidthToggle 4s ease-in-out 1 forwards; +} +.analysis .spatial .spatial01 .sub-figs .apx img, .analysis .spatial .spatial01 .sub-figs .apx svg { + position: absolute; + width: auto; + height: 100%; + max-width: max-content; + object-fit: contain; + object-position: left center; +} +.analysis .spatial .spatial02 .sub-figs .apx { + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.analysis .spatial .spatial02 .sub-figs .apx img { + width: 100%; + height: 100%; +} +.analysis .spatial .spatial03 .sub-figs .apx { + top: 0; + left: 0.12%; + width: 100%; + height: 100%; +} +.analysis .spatial .spatial03 .sub-figs .apx img { + width: 100%; + height: 100%; +} +.analysis .spatial .spatial03 .sub-figs .spatial-03-move { + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + padding: 48px 0 24px; +} +.analysis .spatial .spatial03 .sub-figs .spatial-03-move img:nth-child(1) { + width: 14%; + margin-bottom: 15%; +} +.analysis .spatial .spatial03 .sub-figs .spatial-03-move img:nth-child(2) { + width: 40%; + margin-bottom: 10%; +} +.analysis .spatial .spatial03 .sub-figs .spatial-03-move img:nth-child(3) { + width: 80%; + transform: translateX(-44%); +} +.analysis .spatial .spatial03 .sub-figs .spatial-03-move .element { + animation: spatial-03-ani 2.5s ease-in infinite; +} + +.analysis .statistics .left .mid-tit { + background-image: url(../img/analysis/bg_statistics_title.png); + left: 164px; + width: calc(100vw - 176px); + max-width: 1744px; +} +.analysis .statistics .left .mid-tit span { + left: 24px !important; +} +.analysis .statistics .statistics01 .sub-figs .apx { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.analysis .statistics .statistics01 .sub-figs .apx img, .analysis .statistics .statistics01 .sub-figs .apx svg { + width: 100%; + height: 100%; +} +.analysis .statistics .statistics02 .sub-figs .apx { + position: absolute; + top: 10.084%; + left: 11.4674%; + width: 83.8678%; +} +.analysis .statistics .statistics03 .sub-figs .apx { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.analysis .attribute .left .mid-tit { + background-image: url(../img/analysis/bg_attribute_title.png); +} +.analysis .attribute .right .attribute02 .sub-figs .imgs img, +.analysis .attribute .right .attribute03 .sub-figs .imgs img { + object-fit: cover; +} + +@media (max-width: 1600px) { + .analysis .key .left { + padding-left: 120px; + min-width: 520px; + } + .analysis .key .left .mid-tit { + width: calc(100vw - 120px); + } + .analysis .key .left .mid-tit span { + left: 120px; + } + .analysis .key .right { + padding-right: 120px; + } + .analysis .statistics .left .mid-tit { + left: 84px; + width: calc(100vw - 96px); + } +} +@media (max-width: 1400px) { + .analysis .key .left { + padding-left: 80px; + min-width: 450px; + } + .analysis .key .left .mid-tit { + width: calc(100vw - 80px); + height: 360px; + transform: translateY(-200px); + } + .analysis .key .left .mid-tit span { + left: 80px; + bottom: -66px; + font-size: 48px; + } + .analysis .key .left ul { + padding-top: 160px; + } + .analysis .key .right { + padding-right: 100px; + padding-top: 255px; + } + .analysis .key .right .sub-figs { + grid-template-columns: initial; + } + .analysis .key .right .sub-text br { + display: none; + } + .analysis .key .right .sub-figs .text br { + display: none; + } + .analysis .key .right .sub-figs .line { + width: 88%; + } + .analysis .statistics .left .mid-tit { + left: 44px; + width: calc(100vw - 56px); + } + .analysis .statistics .left .mid-tit span { + left: 56px; + } + .analysis .spatial .spatial03 .sub-figs .spatial-03-move { + padding: 24px 0 16px; + } + .analysis .attribute .right .sub-figs .imgs img { + object-fit: cover; + } +} +@media (max-width: 1200px) { + .analysis .key { + margin-bottom: 40px; + } + .analysis .key .left { + min-width: 350px; + padding-left: 64px; + } + .analysis .key .left .mid-tit { + width: calc(100vw - 64px); + } + .analysis .key .left .mid-tit span { + font-size: 40px; + line-height: 52px; + bottom: -50px; + left: 64px; + } + .analysis .key .left ul { + padding-top: 140px; + gap: 16px; + } + .analysis .key .left ul li { + font-size: 16px; + } + .analysis .key .left ul li.on { + font-size: 18px; + } + .analysis .key .right { + padding-right: 76px; + padding-top: 240px; + } + .analysis .key .right .attribute02 .sub-figs .text br.brk { + display: block !important; + } + .analysis .statistics .left .mid-tit { + left: 52px; + } +} +@media (max-width: 992px) { + .analysis .key { + flex-direction: column; + padding: 0; + margin-bottom: 120px; + } + .analysis .key .left { + width: 100%; + min-width: initial; + height: 100px; + padding: 0; + box-shadow: 0 8px 8px rgba(0, 0, 0, 0.0666666667); + } + .analysis .key .left .mid-tit { + transform: initial; + width: 100%; + height: 100%; + left: initial; + background: #fff !important; + color: #000; + } + .analysis .key .left .mid-tit span { + left: 48px; + font-size: 34px; + bottom: 8px; + } + .analysis .key .left .mid-tit span strong { + color: #000; + } + .analysis .key .left .mid-tit span br { + display: none; + } + .analysis .key .left ul { + display: none; + } + .analysis .key .right { + padding: 0 48px 48px; + } + .analysis .key .right .sub-figs { + grid-template-columns: 2.5fr 1fr; + } + .analysis .key .right .sub-figs .text { + padding: 24px 0; + font-size: 16px; + } + .analysis .key .right .sub-figs .text br { + display: initial; + } + .analysis .key .right .sub-figs .text br.brk { + display: none; + } + .analysis .key .right .sub-figs .line { + width: 40%; + } + .analysis .key .right .sub-figs .bottom img { + width: 30px; + } + .analysis .statistics .left .mid-tit span { + left: 48px !important; + } + .analysis .attribute { + margin-bottom: 40px; + } + .analysis .key .right .attribute02 .sub-figs .text br.brk { + display: none !important; + } + .analysis .spatial .spatial03 .sub-figs .spatial-03-move img:nth-child(2) { + margin-bottom: 4%; + } +} +@media (max-width: 768px) { + .analysis .sub-content .keyword br.brk { + display: initial; + } + .analysis .key .right .sub-tit { + font-size: 22px; + margin-bottom: 12px; + } + .analysis .key .right .sub-figs { + grid-template-columns: initial; + } + .analysis .key .right .sub-figs .text { + min-width: initial; + } + .analysis .key .right .sub-figs .text br { + display: none; + } + .analysis .key .right .sub-figs .line { + width: 80%; + } +} +@media (max-width: 576px) { + .analysis .key .left .mid-tit { + height: 100px; + } + .analysis .key .left .mid-tit span { + left: 24px; + font-size: 26px; + bottom: 0; + } + .analysis .key .right { + padding: 0 24px; + } + .analysis .key .right .sub-tit { + font-size: 20px; + } + .analysis .statistics .left .mid-tit span { + left: 24px !important; + } + .analysis .key .right .statistics01 .sub-figs .text .bottom br { + display: initial; + } + .analysis .key .right .attribute02 .sub-figs .text br.brk { + display: initial !important; + } +} +.results .sub-header { + background-image: url(../img/results/bg_results_title.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +@media only screen and (max-width: 767px) { + .results .sub-header { + background-position: center top; + } +} +.results .sub-content::before { + content: "Exploration\aResults"; +} +.results .sub-content .dia-circles-wrap .circle-belt { + background: #F0F7F5; + border: 1px solid #B6D0C9; +} +.results .sub-content .dia-circles-wrap .circle-dash { + border: 1px dashed #B6D0C9; +} +.results .sub-content .dia-circles-wrap .circle-dots.move .dot { + background: #046A50; +} +.results .sub-content .dia-circles-wrap .circle-dots.move .dot:nth-child(2) { + top: 100%; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot { + background: #046A50; +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(1) { + top: 0%; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(2) { + top: 75%; + left: 5.5%; + transform: translateY(-50%) rotate(120deg); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(3) { + top: 75%; + right: 5.5%; + transform: translateY(-50%) rotate(240deg); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(4) { + bottom: -8px; + left: calc(50% - 4px); + transform: translateY(-50%); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(5) { + top: 25%; + left: 5.5%; + transform: translateY(-50%) rotate(120deg); +} +.results .sub-content .dia-circles-wrap .circle-dots .dot:nth-child(6) { + top: 25%; + right: 5.5%; + transform: translateY(-50%) rotate(240deg); +} +.results .sub-content .dia-circles-wrap .circle-dots.move { + animation-name: dot-rotate3; +} +.results .sub-content .dia-circles-wrap .circle-core::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%); + inset: 0; + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + border-radius: inherit; + padding: 1px; + padding: 4px; +} +.results .sub-content .dia-circles-wrap .circle-core span { + line-height: 1.2; +} +.results .sub-content .dia-circles-wrap .dia-element-ring { + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + z-index: 2; + pointer-events: none; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element { + position: absolute; + left: 0; + top: 0; + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-210px) rotate(calc(-1 * var(--angle, 0deg))); + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + pointer-events: auto; +} +@media only screen and (max-width: 767px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element { + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-170px) rotate(calc(-1 * var(--angle, 0deg))); + } +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element { + transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateY(-140px) rotate(calc(-1 * var(--angle, 0deg))); + gap: 0; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element .dia-tit { + font-size: 16px; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element i { + aspect-ratio: 1/1; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element .dot { + width: 0; + height: 32px; + border-left: 1px dashed #046A50; + position: relative; + flex-shrink: 0; + transform: rotate(var(--angle, 0deg)); + transform-origin: center top; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-1 { + gap: 4px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 { + margin-left: 24px; + flex-direction: row-reverse; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 { + margin-left: 6px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 .dia-tit { + flex-direction: row; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 .dot { + top: 24px; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 .dot { + top: 20px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 { + margin-left: 44px; + flex-direction: row-reverse; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 { + margin-left: 20px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 .dia-tit { + flex-direction: row; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 .dot { + top: 10px; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 .dot { + top: 12px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-4 { + flex-direction: column-reverse; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-4 { + gap: 4px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-4 .dot { + transform: rotate(0); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 { + margin-left: -50px; + flex-direction: row; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 { + margin-left: -24px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 .dia-tit { + flex-direction: row-reverse; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 .dot { + top: 10px; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 .dot { + top: 12px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 { + margin-left: -30px; + flex-direction: row; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 { + margin-left: -8px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 .dia-tit { + flex-direction: row-reverse; +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 .dot { + top: 22px; +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 .dot { + top: 20px; + } +} +@media only screen and (max-width: 575px) { + .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 .dia-tit, .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 .dia-tit, .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 .dia-tit, .results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 .dia-tit { + flex-direction: column; + gap: 4px; + } +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-1 i { + width: 26px; + background-image: url(../img/results/ico_map.svg); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-2 i { + width: 30px; + background-image: url(../img/results/ico_people.svg); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-3 i { + width: 32px; + background-image: url(../img/results/ico_facility.svg); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-4 i { + width: 25px; + background-image: url(../img/results/ico_city.svg); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-5 i { + width: 36px; + background-image: url(../img/results/ico_eco.svg); +} +.results .sub-content .dia-circles-wrap .dia-element-ring .dia-element.dia-pos-6 i { + width: 33px; + background-image: url(../img/results/ico_weather.svg); +} + +.txt-line { + display: block; +} +@media only screen and (max-width: 767px) { + .txt-line { + display: inline; + } + .txt-line + .txt-line::before { + content: " "; + } +} + +@media only screen and (max-width: 767px) { + .results .sub-header .sub-txt .txt-line, + .results .sub-content .sub-tit-box .sub-tit .txt-line { + display: block; + } +} + +.sub-category { + width: 100%; + height: 100%; + position: relative; +} + +.results-wrap { + position: sticky; + top: 0; + left: 0; + display: flex; + flex-direction: column; + padding-top: 120px; + min-height: var(--window-inner-height); +} +@media only screen and (max-width: 1023px) { + .results-wrap { + padding-top: 60px; + min-height: auto; + } +} +.results-wrap::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 183px; + background: linear-gradient(0deg, rgba(247, 247, 246, 0) 0%, #F7F7F6 80%); + pointer-events: none; +} +.results-wrap .tab-panels { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + width: 100%; +} +.results-wrap nav { + z-index: 1; +} +.results-wrap .tab-list { + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0 0 60px; +} +@media only screen and (max-width: 767px) { + .results-wrap .tab-list { + margin: 0; + } +} +@media only screen and (max-width: 575px) { + .results-wrap .tab-list { + padding: 0 2.4rem; + justify-content: flex-start; + } +} +.results-wrap .tab-list li a { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 14px 28px; + min-width: 224px; + border-radius: 10px; + font-size: 18px; + font-weight: 600; + color: rgba(0, 0, 0, 0.5); + border: 1px solid #E5E5E5; + background: #E5E5E5; + text-decoration: none; + transition: background 0.25s, color 0.25s; +} +@media only screen and (max-width: 1023px) { + .results-wrap .tab-list li a { + padding: 10px 20px; + min-width: auto; + font-size: 1.2rem; + } +} +@media only screen and (max-width: 575px) { + .results-wrap .tab-list li a { + width: 3.2rem; + height: 3.2rem; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 0; + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; + } +} +.results-wrap .tab-list li.on a { + color: #FFF; + border: 1px solid rgba(114, 80, 31, 0.5); + background: #BCA17B; +} +.results-wrap .tab-list li.on a i { + opacity: 1; + background-color: #fff; +} +.results-wrap .tab-list .ico-nature { + width: 18px; + height: 18px; + opacity: 0.5; + background-color: #000; + -webkit-mask-image: url("../img/results/ico_tab_natural.svg"); + mask-image: url("../img/results/ico_tab_natural.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.results-wrap .tab-list .ico-social { + width: 16px; + height: 16px; + opacity: 0.5; + background-color: #000; + -webkit-mask-image: url("../img/results/ico_tab_social.svg"); + mask-image: url("../img/results/ico_tab_social.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.results-wrap .tab-list .ico-cost { + width: 16px; + height: 10px; + opacity: 0.5; + background-color: #000; + -webkit-mask-image: url("../img/results/ico_tab_cost.svg"); + mask-image: url("../img/results/ico_tab_cost.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.results-wrap .tab-content { + position: relative; + display: none; + width: 100%; + overflow: visible; + flex: 1; + background-repeat: no-repeat, no-repeat; + background-position: left bottom, right bottom; + background-image: url(../img/results/bg_natural_left.png), url(../img/results/bg_grid.png); + background-size: 70.5729% auto, 100% auto; +} +@media only screen and (max-width: 1023px) { + .results-wrap .tab-content { + padding-bottom: 60px; + } +} +.results-wrap .tab-content.social { + background-image: url(../img/results/bg_social_left.png), url(../img/results/bg_grid.png); + background-size: 60.15625% auto, 100% auto; +} +.results-wrap .tab-content.cost { + background-image: url(../img/results/bg_cost_left.png), url(../img/results/bg_grid.png); + background-size: 31.927% auto, 100% auto; +} +.results-wrap .tab-content.on { + display: flex; + flex-direction: column; +} +.results-wrap .tab-content.on .report-page { + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} +.results-wrap .section-hero { + position: relative; + z-index: 1; + flex: 1; + min-height: 0; + display: flex; + align-items: center; + justify-content: center; + align-items: center; + gap: 60px; + max-width: 1500px; + margin: 0 auto; +} +@media only screen and (max-width: 1439px) { + .results-wrap .section-hero { + flex-direction: column; + align-items: flex-start; + gap: 64px; + } +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero { + padding: 60px 2.4rem; + max-width: 100%; + gap: 100px; + overflow: hidden; + } +} +@media only screen and (max-width: 575px) { + .results-wrap .section-hero { + width: 100%; + } +} +@media only screen and (min-width: 1440px) { + .results-wrap .section-hero-left { + padding-bottom: 160px; + } +} +.results-wrap .section-hero-left .section-title-large { + position: relative; + font-size: 52px; + font-weight: 700; + margin-bottom: 24px; + color: #1a1a1a; +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-left .section-title-large { + margin-bottom: 14px; + font-size: 2rem; + color: #013C42; + } +} +.results-wrap .section-hero-left .section-title-large .watermark { + position: absolute; + bottom: 20px; + left: -10px; + display: block; + font-size: 120px; + font-weight: 900; + line-height: 1; + opacity: 0.08; + color: #666; + margin-bottom: 4px; +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-left .section-title-large .watermark { + display: none; + } +} +.results-wrap .section-hero-left .section-desc { + font-size: 20px; + font-weight: 400; + color: rgba(0, 0, 0, 0.8); +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-left .section-desc { + font-size: 1.4rem; + } +} +.results-wrap .section-hero-right { + position: relative; + min-height: 330px; +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-right { + padding-left: 38px; + min-height: auto; + } +} +.results-wrap .section-hero-right .report-stack { + position: relative; + width: 100%; + display: flex; +} +.results-wrap .section-hero-right .report-page { + position: relative; + flex-shrink: 0; + width: 246px; + height: 330px; + overflow: hidden; + z-index: var(--index); + opacity: 0; + transform: translateY(120px); +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-right .report-page { + width: 226px; + height: 310px; + } +} +@media only screen and (max-width: 991px) { + .results-wrap .section-hero-right .report-page { + width: 195px; + height: 260px; + } +} +@media only screen and (max-width: 575px) { + .results-wrap .section-hero-right .report-page { + width: 175px; + height: 234px; + } +} +.results-wrap .section-hero-right .report-page:first-child { + overflow: visible; +} +.results-wrap .section-hero-right .report-page:first-child::before { + content: ""; + position: absolute; + z-index: -1; + left: -12px; + top: -10px; + width: 270px; + height: 350px; + border-radius: 6px; + background: linear-gradient(170deg, rgba(227, 227, 227, 0.24) 4.48%, rgba(0, 0, 0, 0.4) 92.19%), #242D2B; +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-right .report-page:first-child::before { + width: 250px; + height: 334px; + } +} +@media only screen and (max-width: 991px) { + .results-wrap .section-hero-right .report-page:first-child::before { + width: 219px; + height: 284px; + } +} +@media only screen and (max-width: 575px) { + .results-wrap .section-hero-right .report-page:first-child::before { + width: 199px; + height: 258px; + } +} +.results-wrap .section-hero-right .report-page:not(:first-child) { + margin-left: -84px; + box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2); +} +@media only screen and (max-width: 1439px) { + .results-wrap .section-hero-right .report-page:not(:first-child) { + margin-left: -120px; + } +} +@media only screen and (max-width: 1023px) { + .results-wrap .section-hero-right .report-page:not(:first-child) { + margin-left: -140px; + } +} +.results-wrap .section-hero-right .report-page .report-pick { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + z-index: 1; + width: 80px; + height: 16px; + border-radius: 2px; + background: #D9D9D9; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25); +} +.results-wrap .section-hero-right .report-page .report-pick::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 6px; + border-radius: 2px 2px 0 0; + opacity: 0.6; + background: linear-gradient(180deg, #D9D9D9 0%, #BCBCBC 50.96%, #D9D9D9 98.56%); +} +.results-wrap .section-hero-right .report-page .report-pick::after { + content: ""; + position: absolute; + top: 2px; + left: 50%; + transform: translateX(-50%); + width: 76px; + height: 1px; + opacity: 0.42; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFF 45.67%, rgba(255, 255, 255, 0) 100%); +} +.results-wrap .section-hero-right .report-page img { + display: block; + width: 100%; + height: auto; + object-fit: cover; +} + +/* 페이지 로드 중 스크롤 복원으로 인한 깜빡임 방지 */ +html.loading { + overflow: hidden; +} + +/* results-wrap pin 영역 정규화 */ +.results-wrap { + position: relative; + z-index: 1; +} + +/* sub-content와의 간격 확보 */ +.results .sub-content { + position: relative; + z-index: 0; + margin-bottom: 60px; /* results-wrap과의 간격 확보 */ +} + +/* ScrollTrigger pin 시 발생하는 spacer 요소 정리 */ +.pin-spacer { + position: relative; + z-index: 1; +} + +/* 새로고침 시 일시적으로 보이지 않게 처리 */ +body:not(.loaded) .results-wrap { + visibility: hidden; +} + +body.loaded .results-wrap { + visibility: visible; +} + +.faq .sub-header { + background-image: url(../img/bg_faq_title.png); +} +.faq .sub-tab { + display: flex; + width: 100%; + height: 64px; + padding: 0; + position: absolute; + bottom: 0; + background-color: rgba(0, 0, 0, 0.4666666667); +} +.faq .sub-tab li { + width: 100%; + height: 100%; + color: #fff; +} +.faq .sub-tab li:not(:first-child, :last-child) { + width: max-content; +} +.faq .sub-tab li a { + width: 25vw; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; +} +.faq .sub-tab li a:hover { + color: var(--color-yellow); +} +.faq .sub-tab li:nth-child(1) a { + justify-self: flex-end; +} +.faq .sub-tab li.on { + background: linear-gradient(90deg, rgba(29, 132, 103, 0) 0%, #1d8467 35%, #1d8467 65%, rgba(29, 132, 103, 0) 100%); + font-weight: 700; + color: var(--color-yellow); + border-left: none; + border-right: none; +} +.faq .sub-tab li.on:first-child { + background: linear-gradient(270deg, #1d8467 0%, #051612 100%); +} +.faq .sub-tab li.on:last-child { + background: linear-gradient(90deg, #1d8467 0%, #051612 100%); +} +.faq .sub-content { + max-width: 1280px; + padding: 60px 16px 120px; + margin: 0 auto; + gap: 40px; +} +.faq .sub-content .sub-tit { + color: #000; + margin-bottom: 40px; + display: flex; + align-items: center; + justify-content: center; +} +.faq legend { + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} +.faq .sound-only { + text-indent: -9999px; + color: transparent; + font-size: 1px; + overflow: hidden; +} +.faq form { + display: flex; + gap: 8px; + width: 100%; + flex-direction: column; +} +.faq .search-box { + padding: 0; + border: none; + background: none; + width: 100%; + max-width: 450px; + margin-inline-start: auto; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} +.faq .search-box form { + flex-direction: row; +} +.faq .search-box input { + width: 100%; + border: 1px solid #ddd; + padding: 0 16px; + height: 45px; + font-size: 16px; + color: #000; + border-radius: 3px; +} +.faq .search-box .btn-submit { + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + min-width: 88px; + width: 88px; + height: 45px; + padding: 0; + font-size: 16px; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + font-weight: bold; +} +.faq .search-box .btn-submit:hover { + opacity: 0.9; +} +.faq .search-box .ico-search { + width: 24px; + height: 24px; + background-image: url(../img/ico/ico_search.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.faq .faq-list { + width: 100%; + margin-top: 0; + list-style: none; + padding: 0; +} +.faq .faq-item { + border-bottom: 1px solid #e0e0e0; + margin-bottom: 0; +} +.faq .faq-item:first-child { + border-top: 1px solid #e0e0e0; +} +.faq .faq-question { + display: flex; + align-items: center; + padding: 24px 20px; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 0; + position: relative; + text-align: left; +} +.faq .faq-question:hover { + background-color: #f8f8f8; +} +.faq .faq-question .tit-bg { + display: inline-flex; + align-items: center; + justify-content: center; + color: #000; + font-weight: 700; + font-size: 18px; + border-radius: 50%; + margin-right: 16px; + flex-shrink: 0; +} +.faq .faq-question .faq-link { + flex: 1; + text-decoration: none; + color: #000; + font-size: 18px; + font-weight: 500; + transition: color 0.3s ease; + pointer-events: none; +} +.faq .faq-question .faq-link:hover { + font-weight: 700; +} +.faq .faq-question .faq-icon { + display: inline-flex; + width: 30px; + height: 30px; + align-items: center; + justify-content: center; + margin-left: 16px; + color: #666; + flex-shrink: 0; + border: none; + background: none; + border-radius: 3px; + pointer-events: none; + cursor: pointer; +} +.faq .faq-question .faq-icon .ico-plus { + position: relative; + display: block; + width: 16px; + height: 16px; + font-size: 0; +} +.faq .faq-question .faq-icon .ico-plus::before, .faq .faq-question .faq-icon .ico-plus::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + background-color: rgb(197, 205, 216); +} +.faq .faq-question .faq-icon .ico-plus::before { + width: 100%; + height: 2px; + transform: translate(-50%, -50%); +} +.faq .faq-question .faq-icon .ico-plus::after { + width: 2px; + height: 100%; + transform: translate(-50%, -50%); +} +.faq .faq-question:hover .faq-icon .ico-plus::before, .faq .faq-question:hover .faq-icon .ico-plus::after { + background-color: #000; +} +.faq .faq-item.active .faq-question { + background-color: #f8f8f8; +} +.faq .faq-item.active .faq-question .faq-link { + font-weight: 700; +} +.faq .faq-item.active .faq-question .faq-icon { + background-color: var(--color-green); +} +.faq .faq-item.active .faq-question .faq-icon .ico-plus::after { + opacity: 0; + transform: translate(-50%, -50%) scaleY(0); +} +.faq .faq-item.active .faq-question .faq-icon .ico-plus:before { + background-color: #fff; +} +.faq .faq-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); + background-color: #fafafa; + text-align: left; +} +.faq .faq-item.active .faq-answer { + max-height: 1000px; +} +.faq .con-inner { + padding: 24px 20px 24px 46px; + position: relative; +} +.faq .con-inner p { + margin: 0 0 16px; + line-height: 1.8; + color: #333; + font-size: 16px; +} +.faq .con-inner p:last-child { + margin-bottom: 0; +} +@media only screen and (max-width: 767px) { + .faq .faq-question { + padding: 20px 16px; + } + .faq .faq-question .tit-bg { + font-size: 16px; + margin-right: 12px; + } + .faq .faq-question .faq-link { + font-size: 16px; + } + .faq .faq-question .faq-icon { + margin-left: 12px; + } + .faq .faq-question .faq-icon .fa { + font-size: 18px; + } + .faq .con-inner { + padding: 20px 16px 20px 34px; + } + .faq .con-inner p { + font-size: 15px; + } +} +.faq .qa-controls { + width: 100%; +} +.faq .search-wrap { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} +.faq .search-wrap .filters { + display: flex; + align-items: center; + gap: 8px; +} +.faq .search-wrap .check-group { + gap: 4px; + display: flex; + align-items: center; + justify-content: center; +} +.faq .search-wrap .check-group label { + background-color: #fff; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.1); +} +.faq .search-wrap .check-group label:has(:checked) { + background-color: #ffc600; +} +.faq .search-wrap .check-group [type=checkbox] { + position: absolute; + -webkit-appearance: none; + appearance: none; + opacity: 0; +} +.faq .search-wrap label { + position: relative; + height: 45px; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; +} +.faq .search-wrap .qna-id-input { + width: 100px; + height: 45px; + border: 1px solid #ddd; + border-radius: 3px; + padding: 4px 8px; + font-size: 14px; +} +.faq .search-wrap .btn-move { + height: 45px; + padding: 0 12px; + border: 1px solid #ddd; + border-radius: 3px; + background: #f4f4f4; + cursor: pointer; + font-size: 14px; + font-weight: 600; +} +.faq .board-list table tr { + cursor: pointer; +} +.faq .qa-detail { + width: 100%; + text-align: left; +} +.faq .qa-view { + border: 1px solid #dde7e9; + border-radius: 3px; +} +.faq .qa-view .content { + padding: 20px; +} +.faq .qa-view-header { + display: flex; + flex-direction: column; + gap: 10px; + border-bottom: 1px solid #dde7e9; + padding: 20px; +} +.faq .qa-view-header .title-area { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + margin-bottom: 8px; +} +.faq .qa-view-header .title-area .title-left { + display: flex; + align-items: center; + gap: 8px; +} +.faq .qa-view-header .title-area .title { + font-size: 24px; + font-weight: 700; +} +.faq .qa-view-header .title-area .cate { + border-radius: 3px; + height: 28px; + padding: 5px 10px; + background: rgba(0, 0, 0, 0.02); + font-size: 14px; + line-height: 1; +} +.faq .qa-view-header .title-area .status { + color: #555; + font-size: 15px; + min-width: max-content; + align-self: flex-start; + padding-right: 1px; +} +.faq .qa-view-header .user-info { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row-reverse; + gap: 16px; + color: #555; + font-size: 16px; +} +.faq .qa-view-header .user-info .user-item { + display: flex; + align-items: center; + gap: 16px; +} +.faq .form-area { + font-size: 16px; + text-align: left; +} +.faq .form-area:not(:last-child) { + margin-bottom: 30px; +} +.faq .form-area .form-group { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +.faq .form-area .form-col-group { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; +} +.faq .form-area .form-item { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + min-height: 45px; + padding: 5px 0; + gap: 20px; +} +.faq .form-area .form-item .form-tit { + padding: 0 10px; + min-width: 120px; + font-weight: 500; +} +.faq .form-area .form-item .form-tit .require { + color: #fb3c00; +} +.faq .form-area .form-item select, +.faq .form-area .form-item .input-text, +.faq .form-area .form-item .text-area { + border: 1px solid #d0d3db; + border-radius: 3px; + font-size: 16px; + padding: 5px; +} +.faq .form-area .form-item .select-sm { + width: 100%; + max-width: 160px; +} +.faq .form-area .form-item .input-text { + height: 40px; +} +.faq .form-area .form-item .text-area { + width: 100%; + height: 300px; + resize: vertical; +} +.faq .form-area .form-item .edit-area { + width: 100%; + border: 1px solid #d0d3db; + border-radius: 3px; + min-height: 480px; + overflow: hidden; +} +.faq .form-area .form-item .ck-content { + min-height: 480px; +} +.faq .form-area .form-item label:has([type=checkbox]) { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + cursor: pointer; +} +.faq .form-area .form-item input[type=checkbox] { + -webkit-appearance: none; + appearance: none; + width: 16px; + height: 16px; + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.828125' y='1.33093' width='14.3382' height='14.3382' rx='0.642857' stroke='black' stroke-opacity='0.13'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.faq .form-area .form-item input[type=checkbox]:checked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Crect x='0.328125' y='0.830933' width='15.3382' height='15.3382' rx='1.14286' fill='%231B7F63'/%3E%3Cpath d='M11.6885 6.51624C11.6612 6.57757 11.6218 6.63277 11.5726 6.67855L7.0693 11.1759C6.97555 11.2695 6.84847 11.3221 6.71597 11.3221C6.58346 11.3221 6.45638 11.2695 6.36263 11.1759L4.53263 9.34522C4.44431 9.25043 4.39623 9.12507 4.39852 8.99554C4.4008 8.866 4.45328 8.74241 4.54488 8.6508C4.63649 8.55919 4.76008 8.50672 4.88962 8.50443C5.01915 8.50215 5.14452 8.55023 5.2393 8.63855L6.7173 10.1159L10.866 5.97188C10.9117 5.92276 10.9669 5.88336 11.0283 5.85603C11.0896 5.8287 11.1558 5.81401 11.2229 5.81282C11.2901 5.81164 11.3568 5.82399 11.419 5.84913C11.4813 5.87428 11.5378 5.91171 11.5853 5.95919C11.6328 6.00667 11.6702 6.06323 11.6954 6.12548C11.7205 6.18774 11.7329 6.25443 11.7317 6.32156C11.7305 6.3887 11.7158 6.45491 11.6885 6.51624Z' fill='white'/%3E%3C/svg%3E"); +} +.faq .form-area .form-item .attach-box { + display: flex; + align-items: center; + width: max-content; + column-gap: 16px; + flex-wrap: wrap; + max-width: 100%; +} +.faq .form-area .form-item .attach-box .info-msg { + white-space: nowrap; + font-size: 14px; + font-weight: 500; + color: #ff5c00; +} +.faq .form-area .form-item input[type=file] { + width: max-content; + padding: 5px; + border-radius: 3px; + font-size: 14px; +} +.faq { + /*첨부파일 drag*/ +} +.faq .drop-zone { + border: 2px dashed #bbb; + border-radius: 5px; + padding: 20px; + text-align: center; + color: #999; + cursor: pointer; +} +.faq .drop-zone.dragover { + border-color: #333; + background: #f0f0f0; +} +.faq #file-list { + list-style: none; + margin-top: 10px; + padding: 0; +} +.faq #file-list li { + padding: 5px; + border-bottom: 1px solid #eee; + font-size: 14px; +} +.faq { + /* Q&A 첨부파일 250821 */ +} +.faq .attachments { + margin-top: 20px; + padding: 15px; + background: #f9fafc; + border: 1px solid #e1e4e8; + border-radius: 8px; +} +.faq .attachments h3 { + margin: 0 0 12px; + font-size: 16px; + font-weight: 600; + color: #333; +} +.faq .attachments ul { + list-style: none; + padding: 0; + margin: 0; +} +.faq .attachments li { + margin-bottom: 8px; + padding: 6px 10px; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 5px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.2s; +} +.faq .attachments li:hover { + background: #f0f7ff; +} +.faq .attachments a { + text-decoration: none; + color: #0073e6; + font-weight: 500; +} +.faq .attachments a:hover { + text-decoration: underline; +} +.faq .attachments .meta { + font-size: 12px; + color: #777; + margin-left: 10px; +} +.faq .comment-section { + width: 100%; + margin-top: 20px; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + padding: 15px; + font-size: 16px; + text-align: left; +} +.faq .comment-section h4 { + margin: 0 0 15px; + font-size: 14px; + font-weight: bold; +} +.faq .comment-section .comment-title { + font-size: 14px; + font-weight: 700; +} +.faq .comment-section .comment-wrap { + margin-top: 8px; + border: 1px solid #dde7e9; + border-radius: 3px; +} +.faq .comment-section .comment-list { + margin-bottom: 15px; +} +.faq .comment-section .comment-list:has(.comment) { + display: flex; + padding: 0 16px; + flex-direction: column; + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-list > .comment { + padding: 10px; + border-bottom: 1px solid #e0e0e0; +} +.faq .comment-section .comment-list > .comment:nth-child(odd) { + background-color: #fff; +} +.faq .comment-section .comment-list > .comment:nth-child(even) { + background-color: #f9f9f9; +} +.faq .comment-section .comment-list > .comment:not(:last-child) { + border-bottom: 1px solid #dde7e9; +} +.faq .comment-section .comment-list > .comment:last-child { + border-bottom: none; +} +.faq .comment-section .comment { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 10px 0; + border-bottom: 1px solid #eee; +} +.faq .comment-section .comment:last-child { + border-bottom: none; +} +.faq .comment-section .comment .comment-text { + padding: 8px 0; + line-height: 1.5; +} +.faq .comment-section .comment-box { + display: flex; + gap: 16px; + width: 100%; + padding: 20px 10px; +} +.faq .comment-section .comment-box .admin-info { + display: flex; + flex-direction: column; +} +.faq .comment-section .comment-box .admin-info strong { + font-weight: 500; +} +.faq .comment-section .comment-box .admin-info span { + color: #666; + font-size: 14px; +} +.faq .comment-section .comment-body { + margin-bottom: 12px; +} +.faq .comment-section .comment-body strong { + display: block; + font-weight: bold; + color: #333; + margin-bottom: 0; + font-size: 15px; +} +.faq .comment-section .comment-body .comment-text { + margin: 2px 0; + line-height: 1.4; + font-size: 15px; +} +.faq .comment-section .comment-body small { + display: block; + margin-top: 3px; + font-size: 12px; + color: #999; +} +.faq .comment-section .comment-text, +.faq .comment-section .edit-input { + flex: 1; + margin-bottom: 5px; + line-height: 1.6; +} +.faq .comment-section .comment-meta { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 4px; + font-size: 0.9em; + color: #333; + background: #e8f4ff; + padding: 3px 8px; + border-radius: 4px; + white-space: nowrap; + width: fit-content; +} +.faq .comment-section .comment-meta .comment-author { + font-weight: bold; + color: #333; + margin: 0; +} +.faq .comment-section .comment-meta .comment-date { + color: #999; + font-size: 0.85em; + margin: 0; +} +.faq .comment-section .comment-actions { + display: flex; + gap: 5px; + margin-left: 15px; + white-space: nowrap; + align-items: center; +} +.faq .comment-section .comment-actions button { + padding: 3px 8px; + font-size: 12px; + cursor: pointer; + border: 1px solid #ccc; + background: #f9f9f9; + border-radius: 3px; +} +.faq .comment-section .comment-actions button:hover { + background: #eee; +} +.faq .comment-section .comment-form { + display: flex; + align-items: flex-start !important; + gap: 8px; + width: 100%; + padding: 10px 16px; +} +.faq .comment-section .comment-form .input-text { + flex: 1 !important; + flex-grow: 1; + width: auto !important; + display: block; +} +.faq .comment-section .comment-form .btn-save { + padding: 8px 16px; + background-color: #4a3f2f; + color: #fff; + border: none; + border-radius: 4px; + font-size: 14px; + cursor: pointer; +} +.faq .comment-section .comment-form .btn-save:hover { + background-color: #332a1e; +} +.faq .comment-section .comment-row { + display: flex; + align-items: flex-start !important; + gap: 12px; + width: 100%; + padding-right: 6px !important; +} +.faq .comment-section .comment-row textarea.input-text { + border: 1px solid #ccc !important; + border-radius: 4px !important; + padding: 10px !important; + width: 90% !important; + flex: 1 !important; + background: #fff !important; + min-height: 40px !important; + box-sizing: border-box !important; + margin-left: 12px !important; +} +.faq .comment-section .comment-row textarea.input-text:focus { + outline: none !important; + border-color: #999 !important; +} +.faq { + /* 업로드 영역은 textarea 아래 줄에 단독 배치 */ +} +.faq .upload-wrap { + display: block; + width: 100%; + padding: 8px 12px; +} +.faq { + /* 미리보기 영역 정렬 */ +} +.faq #previewArea { + width: 100%; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + margin-top: 6px; + font-size: 14px; +} +.faq #previewArea img { + width: 80px; + height: 80px; + border-radius: 6px; + object-fit: cover; +} +.faq #previewArea div { + display: inline-block; + width: 80px; + margin-right: 8px; + text-align: center; +} +.faq #previewArea div img { + border-radius: 6px; +} +.faq { + /* 댓글 이미지 업로드 20251114 */ +} +.faq #commentImages, +.faq .upload-wrap input[type=file] { + display: none !important; +} +.faq .img-upload-btn { + display: inline-block; + padding: 6px 12px; + background: #005bac; + color: #fff; + font-size: 13px; + border-radius: 4px; + cursor: pointer; + border: 1px solid #004a8a; +} +.faq .img-upload-btn:hover { + background: #004a8a; +} +.faq .file-name { + margin-left: 8px; + font-size: 13px; + color: #666; +} + +.board-list { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-direction: column; + gap: 30px; +} +.board-list table { + table-layout: fixed; + min-width: 1024px; + width: 100%; + font-size: 16px; +} +.board-list table thead tr th { + height: 48px; + font-weight: 500; + border-bottom: 1px solid #000; + border-top: 2px solid #000; + white-space: nowrap; +} +.board-list table tbody tr:hover { + background-color: #fafafa; +} +.board-list table tbody tr td, .board-list table tbody tr th { + color: #555; + height: 60px; + padding: 0 10px; + word-break: break-all; + text-align: center; + border-bottom: 1px solid #eee; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.board-list table .right { + text-align: right; +} +.board-list table .left { + text-align: left; + max-width: 300px; /* 필요에 맞게 조정 */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.board-list table .title-text { + display: inline-block; + max-width: calc(100% - 120px); /* 뱃지 영역 확보 */ + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.board-list table .row-notice td { + background: #f0f0f0; +} +.board-list table small { + color: #999; + font-size: 0.8em; + vertical-align: bottom; +} +.board-list [class^=status] { + color: #777; +} +.board-list { + /* 답변완료 (연한 초록, 기존 유지) */ +} +.board-list .status-done { + padding: 6px 10px; + color: #38b000; /* 연한 초록 */ + border-radius: 4px; + background: rgba(56, 176, 0, 0.08); /* 초록 파스텔 배경 */ + font-weight: 700; +} +.board-list { + /* 문의접수 (빨강 글씨 + 연한 빨강 배경) */ +} +.board-list .status-wait { + padding: 6px 10px; + color: #ef4444; /* 빨강 */ + background: rgba(239, 68, 68, 0.1); /* 연빨강 배경 */ + border-radius: 4px; + font-weight: 700; + display: inline-block; +} +.board-list { + /* 문의검토 / 정밀검토 / 패치예정 (회색 바탕, 검정 글씨) */ +} +.board-list .status-review, +.board-list .status-deep, +.board-list .status-patch { + padding: 6px 10px; + color: #777777; /* 검정 글씨 */ + background: #f0f0f0; /* 연회색 배경 */ + border-radius: 4px; + font-weight: 600; + display: inline-block; +} +.board-list .pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30px 0; + gap: 12px; +} +.board-list .pagination a, .board-list .pagination span { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + font-size: 14px; + border-radius: 30px; +} +.board-list .pagination a:hover { + background-color: #f0f0f0; +} +.board-list .pagination .current { + background-color: #000; + color: #fff; +} +.board-list .pagination .next, +.board-list .pagination .prev { + width: 32px; + height: 32px; + text-indent: -9999px; + overflow: hidden; + background-repeat: no-repeat; + background-position: center; + background-size: auto; +} +.board-list .pagination .prev { + background-image: url(../img/ico/ico_arrow_page_left.svg); +} +.board-list .pagination .next { + background-image: url(../img/ico/ico_arrow_page_right.svg); +} +.board-list .btn-write { + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + align-self: flex-end; + gap: 4px; + height: 45px; + padding: 0 16px; + font-size: 16px; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + font-weight: bold; +} + +.buy .sub-header { + background-image: url(../img/buy/bg_buy_title.jpg); +} +.buy .intro .top { + background-image: url(../img/buy_intro_bg.png); +} +.buy .contents-wrap { + width: 100%; + height: 100%; + position: relative; + background: linear-gradient(180deg, rgba(255, 255, 255, 0) 47.78%, #FFF 100%), url("../img/buy/bg_buy_content.png") center/cover no-repeat; + overflow: hidden; +} +.buy .contents-wrap .inner { + max-width: 1520px; + margin: 0 auto; + padding: 194px 0 150px 0; +} +.buy .contents-wrap .cont-wrapper { + display: flex; + gap: 24px; + align-items: flex-start; + position: relative; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-wrapper { + flex-direction: column; + gap: 30px; + } +} +.buy .contents-wrap .cont-left { + flex: 1; + position: relative; +} +.buy .contents-wrap .cont-left::before { + content: ""; + position: absolute; + top: 54.3333333333%; + left: 50%; + width: 114.7245762712%; + height: 191px; + background-image: url(../img/buy/bg_grid.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + translate: -50% 0; +} +.buy .contents-wrap .cont-left::after { + content: ""; + position: absolute; + bottom: -18px; + height: 24px; + left: 50%; + width: 98.1641468683%; + border-radius: 909px; + opacity: 0.4; + background: #5F8277; + filter: blur(9.7794113159px); + translate: -50% -50%; + mix-blend-mode: multiply; +} +.buy .contents-wrap .cont-left .cont-tit, +.buy .contents-wrap .cont-left .feature-list { + position: relative; + z-index: 1; +} +.buy .contents-wrap .cont-tit { + position: relative; + font-size: 40px; + font-weight: 400; + color: var(--text-title); + margin-bottom: 0; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-tit { + font-size: 28px; + } +} +.buy .contents-wrap .cont-tit::before { + content: "Purchase"; + position: absolute; + top: -102px; + left: -12px; + font-size: 120px; + font-weight: 700; + color: rgba(0, 0, 0, 0.03); + z-index: 0; + pointer-events: none; + line-height: 1; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-tit::before { + font-size: 80px; + top: -60px; + } +} +.buy .contents-wrap .logo-c { + display: inline-block; + width: 177px; + height: 44px; +} +.buy .contents-wrap .feature-list { + display: flex; + list-style: none; + padding: 0; + gap: 0; + border-radius: 12px; + border-bottom: 1px solid #FFF; + background: linear-gradient(180deg, rgba(6, 120, 46, 0) 0%, rgba(6, 120, 46, 0.05) 100%), linear-gradient(91deg, #FCFCFC -0.91%, #F7F8F8 99.01%); + background-blend-mode: color-burn, normal; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + min-height: 300px; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .feature-list { + flex-direction: column; + border-radius: 20px; + margin-top: 40px; + } +} +.buy .contents-wrap .feature-list .feature-item { + flex: 1; + position: relative; + flex-direction: column; + transition: background 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .feature-list .feature-item { + padding: 30px 20px; + } +} +.buy .contents-wrap .feature-list .feature-item:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 70%; + border-right: 1px dashed rgba(10, 91, 64, 0.4); +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .feature-list .feature-item:not(:last-child)::after { + display: none; + } +} +.buy .contents-wrap .feature-list .feature-item:hover { + background: rgb(255, 255, 255); +} +.buy .contents-wrap .feature-list .feature-icon { + position: relative; + margin-bottom: 16px; + display: flex; + justify-content: center; + align-items: center; + height: 60px; +} +.buy .contents-wrap .feature-list .feature-icon i { + width: 60px; + height: 60px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.buy .contents-wrap .feature-list .feature-icon i.ico-natural { + background-image: url(../img/buy/ico_natural.svg); +} +.buy .contents-wrap .feature-list .feature-icon i.ico-gis { + background-image: url(../img/buy/ico_gis.svg); +} +.buy .contents-wrap .feature-list .feature-icon i.ico-data { + background-image: url(../img/buy/ico_data.svg); +} +.buy .contents-wrap .feature-list .feature-icon i.ico-coordinate { + background-image: url(../img/buy/ico_coordinate.svg); +} +.buy .contents-wrap .feature-list .feature-icon i.ico-standard { + background-image: url(../img/buy/ico_standard.svg); +} +.buy .contents-wrap .feature-list .feature-decoration { + width: 48px; + height: 12px; + margin: 0 auto 12px; + background-color: #1A543D; + -webkit-mask-image: url("../img/ico_title_obj.svg"); + mask-image: url("../img/ico_title_obj.svg"); + background-size: cover; + -webkit-background-size: cover; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.buy .contents-wrap .feature-list .feature-title { + position: relative; + font-size: 18px; + font-weight: 700; + color: #1A543D; + margin: 0 0 12px 0; + line-height: 1.4; + width: max-content; + margin: 0 auto 12px auto; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .feature-list .feature-title { + font-size: 16px; + margin-bottom: 8px; + } +} +.buy .contents-wrap .feature-list .feature-title::before { + content: " "; + position: absolute; + bottom: -2px; + left: -6px; + display: block; + width: calc(100% + 12px); + height: 12px; + background-color: #00832A; + border-radius: 2px; + opacity: 0.1; +} +.buy .contents-wrap .feature-list .feature-desc { + font-size: 14px; + color: #4C4C4C; + margin: 0; + text-align: center; + text-wrap: balance; + word-break: keep-all; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .feature-list .feature-desc { + font-size: 13px; + } +} +.buy .contents-wrap .cont-right { + flex-shrink: 0; + width: 554px; + margin-top: -16px; + position: relative; + flex-direction: column; + gap: 20px; + z-index: 1; + display: flex; + align-items: space-between; + justify-content: flex-start; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right { + width: 100%; + } +} +.buy .contents-wrap .cont-right .contact-area { + position: relative; + padding: 24px 0px; + color: #fff; + flex-direction: column; + gap: 15px; + display: flex; + align-items: space-between; + justify-content: flex-start; +} +.buy .contents-wrap .cont-right .contact-area::before { + content: ""; + position: absolute; + top: 0; + left: -40px; + width: 794px; + height: 100%; + border-radius: 8px 0 0 8px; + border: 1px solid rgba(255, 255, 255, 0.4); + background: linear-gradient(270deg, rgba(255, 255, 255, 0) 94.39%, rgba(255, 255, 255, 0.2) 100.62%), linear-gradient(101deg, var(--L_Green, #00832A) 0.75%, var(--D_green, #1A543D) 100.95%); + background-blend-mode: overlay, normal; + box-shadow: 2px 2px 4px 0 rgba(0, 67, 30, 0.1), 4px 4px 8px 0 rgba(40, 83, 59, 0.2), 12px 12px 16px 0 rgba(0, 67, 30, 0.1); +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .contact-area { + padding: 30px 20px; + } +} +.buy .contents-wrap .cont-right .contact-area .tit-box { + position: relative; + z-index: 1; + gap: 8px; + display: flex; + align-items: center; + justify-content: flex-start; +} +.buy .contents-wrap .cont-right .contact-area .tit-box .tit { + font-size: 28px; + font-weight: 600; + color: #fff; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .contact-area .tit-box .tit { + font-size: 2rem; + } +} +.buy .contents-wrap .cont-right .contact-area .tit-box .sub-text { + font-size: 18px; + color: #fff; + opacity: 0.8; + align-self: flex-end; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .contact-area .tit-box .sub-text { + font-size: 13px; + margin-bottom: 24px; + } +} +.buy .contents-wrap .cont-right .contact-area .contact-info { + list-style: none; + padding: 0; + z-index: 1; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .contact-area .contact-info { + margin-bottom: 24px; + } +} +.buy .contents-wrap .cont-right .contact-area .contact-info li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + font-size: 16px; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .contact-area .contact-info li { + font-size: 15px; + margin-bottom: 12px; + } +} +.buy .contents-wrap .cont-right .contact-area .contact-info li:last-child { + margin-bottom: 0; +} +.buy .contents-wrap .cont-right .contact-area .contact-info li i { + width: 32px; + height: 32px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + flex-shrink: 0; + filter: drop-shadow(0 2px 4px rgba(140, 161, 151, 0.3)); +} +.buy .contents-wrap .cont-right .contact-area .contact-info li.tel i { + background-image: url(../img/buy/ico_tel.svg); +} +.buy .contents-wrap .cont-right .contact-area .contact-info li.mail i { + background-image: url(../img/buy/ico_mail.svg); +} +.buy .contents-wrap .cont-right .contact-area .contact-info li strong { + color: #fff; + font-size: 24px; +} +.buy .contents-wrap .cont-right .btn-wrap { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 367fr 179fr; + gap: 8px; +} +.buy .contents-wrap .cont-right .btn-wrap a { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + height: 74px; + padding: 0 20px; + border-radius: 4px; + color: #fff; + font-size: 22px; + font-weight: 700; + text-decoration: none; + transition: all 0.3s ease; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .btn-wrap a { + height: 44px; + font-size: 14px; + } +} +.buy .contents-wrap .cont-right .btn-wrap a i { + width: 24px; + height: 24px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +.buy .contents-wrap .cont-right .btn-wrap a:hover { + opacity: 0.9; + transform: translateY(-2px); +} +.buy .contents-wrap .cont-right .btn-wrap a.btn-contact { + border: 1px solid rgba(81, 74, 58, 0.5); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(180deg, #877D65 0%, #514A3A 100%); +} +.buy .contents-wrap .cont-right .btn-wrap a.btn-contact i { + background-image: url(../img/buy/ico_contact.svg); +} +.buy .contents-wrap .cont-right .btn-wrap a.btn-brochure { + border: 1px solid rgba(81, 74, 58, 0.5); + background: linear-gradient(180deg, #877D65 0%, #514A3A 100%); +} +.buy .contents-wrap .cont-right .btn-wrap a.btn-brochure i { + background-image: url(../img/buy/ico_brochure.svg); +} +.buy .contents-wrap .cont-right .info-msg { + display: flex; + align-items: center; + gap: 8px; + border-radius: 6px; + font-size: 18px; + color: #423D2F; + position: relative; + z-index: 1; +} +@media only screen and (max-width: 767px) { + .buy .contents-wrap .cont-right .info-msg { + font-size: 12px; + padding: 10px; + margin-top: 15px; + } +} +.buy .contents-wrap .cont-right .info-msg i { + width: 16px; + height: 16px; + display: block; + background-image: url(../img/buy/ico-alert.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + flex-shrink: 0; +} +.buy .contents-wrap .cont-right .info-msg strong { + color: #553E00; +} \ No newline at end of file diff --git a/kngil/fonts/FontAwesome.otf b/kngil/fonts/FontAwesome.otf new file mode 100644 index 0000000..401ec0f Binary files /dev/null and b/kngil/fonts/FontAwesome.otf differ diff --git a/kngil/fonts/NotoKR-Black/generator_config.txt b/kngil/fonts/NotoKR-Black/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Black/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Black/notokr-black-demo.html b/kngil/fonts/NotoKR-Black/notokr-black-demo.html new file mode 100644 index 0000000..d3bb227 --- /dev/null +++ b/kngil/fonts/NotoKR-Black/notokr-black-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Black Specimen + + + + + + +

+ +

+ + +

+ +

본고딕-Black

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body

body

+ bodyNotoKR-Black +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Black in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Black in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Black/notokr-black.eot b/kngil/fonts/NotoKR-Black/notokr-black.eot new file mode 100644 index 0000000..64b77a0 Binary files /dev/null and b/kngil/fonts/NotoKR-Black/notokr-black.eot differ diff --git a/kngil/fonts/NotoKR-Black/notokr-black.svg b/kngil/fonts/NotoKR-Black/notokr-black.svg new file mode 100644 index 0000000..4e5212b --- /dev/null +++ b/kngil/fonts/NotoKR-Black/notokr-black.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Black/notokr-black.ttf b/kngil/fonts/NotoKR-Black/notokr-black.ttf new file mode 100644 index 0000000..4912c75 Binary files /dev/null and b/kngil/fonts/NotoKR-Black/notokr-black.ttf differ diff --git a/kngil/fonts/NotoKR-Black/notokr-black.woff b/kngil/fonts/NotoKR-Black/notokr-black.woff new file mode 100644 index 0000000..4195bc9 Binary files /dev/null and b/kngil/fonts/NotoKR-Black/notokr-black.woff differ diff --git a/kngil/fonts/NotoKR-Black/notokr-black.woff2 b/kngil/fonts/NotoKR-Black/notokr-black.woff2 new file mode 100644 index 0000000..a99d007 Binary files /dev/null and b/kngil/fonts/NotoKR-Black/notokr-black.woff2 differ diff --git a/kngil/fonts/NotoKR-Black/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Black/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Black/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Black/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Black/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Black/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Black/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Black/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Black/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Black/stylesheet.css b/kngil/fonts/NotoKR-Black/stylesheet.css new file mode 100644 index 0000000..96d4ab0 --- /dev/null +++ b/kngil/fonts/NotoKR-Black/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-black'; + src: url('notokr-black.eot'); + src: url('notokr-black.eot?#iefix') format('embedded-opentype'), + url('notokr-black.woff2') format('woff2'), + url('notokr-black.woff') format('woff'), + url('notokr-black.ttf') format('truetype'), + url('notokr-black.svg#notokr-black') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Bold/generator_config.txt b/kngil/fonts/NotoKR-Bold/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold-demo.html b/kngil/fonts/NotoKR-Bold/notokr-bold-demo.html new file mode 100644 index 0000000..e7ba0d7 --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/notokr-bold-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Bold Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Bold

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Bold +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Bold in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold.eot b/kngil/fonts/NotoKR-Bold/notokr-bold.eot new file mode 100644 index 0000000..4537996 Binary files /dev/null and b/kngil/fonts/NotoKR-Bold/notokr-bold.eot differ diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold.svg b/kngil/fonts/NotoKR-Bold/notokr-bold.svg new file mode 100644 index 0000000..61b5f90 --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/notokr-bold.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold.ttf b/kngil/fonts/NotoKR-Bold/notokr-bold.ttf new file mode 100644 index 0000000..7915a91 Binary files /dev/null and b/kngil/fonts/NotoKR-Bold/notokr-bold.ttf differ diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold.woff b/kngil/fonts/NotoKR-Bold/notokr-bold.woff new file mode 100644 index 0000000..fc151f8 Binary files /dev/null and b/kngil/fonts/NotoKR-Bold/notokr-bold.woff differ diff --git a/kngil/fonts/NotoKR-Bold/notokr-bold.woff2 b/kngil/fonts/NotoKR-Bold/notokr-bold.woff2 new file mode 100644 index 0000000..dccc40d Binary files /dev/null and b/kngil/fonts/NotoKR-Bold/notokr-bold.woff2 differ diff --git a/kngil/fonts/NotoKR-Bold/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Bold/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Bold/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Bold/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Bold/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Bold/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Bold/stylesheet.css b/kngil/fonts/NotoKR-Bold/stylesheet.css new file mode 100644 index 0000000..63dcd8d --- /dev/null +++ b/kngil/fonts/NotoKR-Bold/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-bold'; + src: url('notokr-bold.eot'); + src: url('notokr-bold.eot?#iefix') format('embedded-opentype'), + url('notokr-bold.woff2') format('woff2'), + url('notokr-bold.woff') format('woff'), + url('notokr-bold.ttf') format('truetype'), + url('notokr-bold.svg#notokr-bold') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-DemiLight/generator_config.txt b/kngil/fonts/NotoKR-DemiLight/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight-demo.html b/kngil/fonts/NotoKR-DemiLight/notokr-demilight-demo.html new file mode 100644 index 0000000..d437e89 --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/notokr-demilight-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-DemiLight Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-DemiLight

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-DemiLight +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-DemiLight in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-DemiLight in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight.eot b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.eot new file mode 100644 index 0000000..e3bf3f3 Binary files /dev/null and b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.eot differ diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight.svg b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.svg new file mode 100644 index 0000000..bf534fd --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight.ttf b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.ttf new file mode 100644 index 0000000..5734bd9 Binary files /dev/null and b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.ttf differ diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff new file mode 100644 index 0000000..c6469b4 Binary files /dev/null and b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff differ diff --git a/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff2 b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff2 new file mode 100644 index 0000000..6d09542 Binary files /dev/null and b/kngil/fonts/NotoKR-DemiLight/notokr-demilight.woff2 differ diff --git a/kngil/fonts/NotoKR-DemiLight/specimen_files/easytabs.js b/kngil/fonts/NotoKR-DemiLight/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-DemiLight/stylesheet.css b/kngil/fonts/NotoKR-DemiLight/stylesheet.css new file mode 100644 index 0000000..23d5fc0 --- /dev/null +++ b/kngil/fonts/NotoKR-DemiLight/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-demilight'; + src: url('notokr-demilight.eot'); + src: url('notokr-demilight.eot?#iefix') format('embedded-opentype'), + url('notokr-demilight.woff2') format('woff2'), + url('notokr-demilight.woff') format('woff'), + url('notokr-demilight.ttf') format('truetype'), + url('notokr-demilight.svg#notokr-demilight') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Light/generator_config.txt b/kngil/fonts/NotoKR-Light/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Light/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Light/notokr-light-demo.html b/kngil/fonts/NotoKR-Light/notokr-light-demo.html new file mode 100644 index 0000000..4646c9f --- /dev/null +++ b/kngil/fonts/NotoKR-Light/notokr-light-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕 Light Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Light

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Light +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Light in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Light in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Light/notokr-light.eot b/kngil/fonts/NotoKR-Light/notokr-light.eot new file mode 100644 index 0000000..b100da0 Binary files /dev/null and b/kngil/fonts/NotoKR-Light/notokr-light.eot differ diff --git a/kngil/fonts/NotoKR-Light/notokr-light.svg b/kngil/fonts/NotoKR-Light/notokr-light.svg new file mode 100644 index 0000000..6dd081a --- /dev/null +++ b/kngil/fonts/NotoKR-Light/notokr-light.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Light/notokr-light.ttf b/kngil/fonts/NotoKR-Light/notokr-light.ttf new file mode 100644 index 0000000..c014882 Binary files /dev/null and b/kngil/fonts/NotoKR-Light/notokr-light.ttf differ diff --git a/kngil/fonts/NotoKR-Light/notokr-light.woff b/kngil/fonts/NotoKR-Light/notokr-light.woff new file mode 100644 index 0000000..132ebbf Binary files /dev/null and b/kngil/fonts/NotoKR-Light/notokr-light.woff differ diff --git a/kngil/fonts/NotoKR-Light/notokr-light.woff2 b/kngil/fonts/NotoKR-Light/notokr-light.woff2 new file mode 100644 index 0000000..b751735 Binary files /dev/null and b/kngil/fonts/NotoKR-Light/notokr-light.woff2 differ diff --git a/kngil/fonts/NotoKR-Light/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Light/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Light/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Light/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Light/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Light/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Light/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Light/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Light/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Light/stylesheet.css b/kngil/fonts/NotoKR-Light/stylesheet.css new file mode 100644 index 0000000..1ca6735 --- /dev/null +++ b/kngil/fonts/NotoKR-Light/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-light'; + src: url('notokr-light.eot'); + src: url('notokr-light.eot?#iefix') format('embedded-opentype'), + url('notokr-light.woff2') format('woff2'), + url('notokr-light.woff') format('woff'), + url('notokr-light.ttf') format('truetype'), + url('notokr-light.svg#notokr-light') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Medium/generator_config.txt b/kngil/fonts/NotoKR-Medium/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium-demo.html b/kngil/fonts/NotoKR-Medium/notokr-medium-demo.html new file mode 100644 index 0000000..eecbf0a --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/notokr-medium-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Medium Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Medium

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Medium +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Medium in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Medium in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium.eot b/kngil/fonts/NotoKR-Medium/notokr-medium.eot new file mode 100644 index 0000000..fdfa4ce Binary files /dev/null and b/kngil/fonts/NotoKR-Medium/notokr-medium.eot differ diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium.svg b/kngil/fonts/NotoKR-Medium/notokr-medium.svg new file mode 100644 index 0000000..a723cd5 --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/notokr-medium.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium.ttf b/kngil/fonts/NotoKR-Medium/notokr-medium.ttf new file mode 100644 index 0000000..5e94df0 Binary files /dev/null and b/kngil/fonts/NotoKR-Medium/notokr-medium.ttf differ diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium.woff b/kngil/fonts/NotoKR-Medium/notokr-medium.woff new file mode 100644 index 0000000..fbacb0c Binary files /dev/null and b/kngil/fonts/NotoKR-Medium/notokr-medium.woff differ diff --git a/kngil/fonts/NotoKR-Medium/notokr-medium.woff2 b/kngil/fonts/NotoKR-Medium/notokr-medium.woff2 new file mode 100644 index 0000000..54c7ded Binary files /dev/null and b/kngil/fonts/NotoKR-Medium/notokr-medium.woff2 differ diff --git a/kngil/fonts/NotoKR-Medium/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Medium/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Medium/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Medium/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Medium/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Medium/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Medium/stylesheet.css b/kngil/fonts/NotoKR-Medium/stylesheet.css new file mode 100644 index 0000000..9ab12f4 --- /dev/null +++ b/kngil/fonts/NotoKR-Medium/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-medium'; + src: url('notokr-medium.eot'); + src: url('notokr-medium.eot?#iefix') format('embedded-opentype'), + url('notokr-medium.woff2') format('woff2'), + url('notokr-medium.woff') format('woff'), + url('notokr-medium.ttf') format('truetype'), + url('notokr-medium.svg#notokr-medium') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Regular/generator_config.txt b/kngil/fonts/NotoKR-Regular/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular-demo.html b/kngil/fonts/NotoKR-Regular/notokr-regular-demo.html new file mode 100644 index 0000000..b11bb6a --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/notokr-regular-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Regular Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Regular

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Regular Regular +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Regular Regular in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Regular Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular.eot b/kngil/fonts/NotoKR-Regular/notokr-regular.eot new file mode 100644 index 0000000..47f6cec Binary files /dev/null and b/kngil/fonts/NotoKR-Regular/notokr-regular.eot differ diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular.svg b/kngil/fonts/NotoKR-Regular/notokr-regular.svg new file mode 100644 index 0000000..d4453cd --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/notokr-regular.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular.ttf b/kngil/fonts/NotoKR-Regular/notokr-regular.ttf new file mode 100644 index 0000000..9e3297d Binary files /dev/null and b/kngil/fonts/NotoKR-Regular/notokr-regular.ttf differ diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular.woff b/kngil/fonts/NotoKR-Regular/notokr-regular.woff new file mode 100644 index 0000000..a5a4551 Binary files /dev/null and b/kngil/fonts/NotoKR-Regular/notokr-regular.woff differ diff --git a/kngil/fonts/NotoKR-Regular/notokr-regular.woff2 b/kngil/fonts/NotoKR-Regular/notokr-regular.woff2 new file mode 100644 index 0000000..2ced143 Binary files /dev/null and b/kngil/fonts/NotoKR-Regular/notokr-regular.woff2 differ diff --git a/kngil/fonts/NotoKR-Regular/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Regular/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Regular/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Regular/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Regular/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Regular/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Regular/stylesheet.css b/kngil/fonts/NotoKR-Regular/stylesheet.css new file mode 100644 index 0000000..6f4e02d --- /dev/null +++ b/kngil/fonts/NotoKR-Regular/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-regular'; + src: url('notokr-regular.eot'); + src: url('notokr-regular.eot?#iefix') format('embedded-opentype'), + url('notokr-regular.woff2') format('woff2'), + url('notokr-regular.woff') format('woff'), + url('notokr-regular.ttf') format('truetype'), + url('notokr-regular.svg#notokr-regular') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Thin/generator_config.txt b/kngil/fonts/NotoKR-Thin/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin-demo.html b/kngil/fonts/NotoKR-Thin/notokr-thin-demo.html new file mode 100644 index 0000000..70faa93 --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/notokr-thin-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Thin Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Thin

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Thin +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Thin in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Thin in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin.eot b/kngil/fonts/NotoKR-Thin/notokr-thin.eot new file mode 100644 index 0000000..4276bf4 Binary files /dev/null and b/kngil/fonts/NotoKR-Thin/notokr-thin.eot differ diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin.svg b/kngil/fonts/NotoKR-Thin/notokr-thin.svg new file mode 100644 index 0000000..cffd81c --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/notokr-thin.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin.ttf b/kngil/fonts/NotoKR-Thin/notokr-thin.ttf new file mode 100644 index 0000000..9456462 Binary files /dev/null and b/kngil/fonts/NotoKR-Thin/notokr-thin.ttf differ diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin.woff b/kngil/fonts/NotoKR-Thin/notokr-thin.woff new file mode 100644 index 0000000..57f52f2 Binary files /dev/null and b/kngil/fonts/NotoKR-Thin/notokr-thin.woff differ diff --git a/kngil/fonts/NotoKR-Thin/notokr-thin.woff2 b/kngil/fonts/NotoKR-Thin/notokr-thin.woff2 new file mode 100644 index 0000000..8fbb23a Binary files /dev/null and b/kngil/fonts/NotoKR-Thin/notokr-thin.woff2 differ diff --git a/kngil/fonts/NotoKR-Thin/specimen_files/easytabs.js b/kngil/fonts/NotoKR-Thin/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Thin/specimen_files/grid_12-825-55-15.css b/kngil/fonts/NotoKR-Thin/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/NotoKR-Thin/specimen_files/specimen_stylesheet.css b/kngil/fonts/NotoKR-Thin/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/NotoKR-Thin/stylesheet.css b/kngil/fonts/NotoKR-Thin/stylesheet.css new file mode 100644 index 0000000..9e60668 --- /dev/null +++ b/kngil/fonts/NotoKR-Thin/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-thin'; + src: url('notokr-thin.eot'); + src: url('notokr-thin.eot?#iefix') format('embedded-opentype'), + url('notokr-thin.woff2') format('woff2'), + url('notokr-thin.woff') format('woff'), + url('notokr-thin.ttf') format('truetype'), + url('notokr-thin.svg#notokr-thin') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Black/generator_config.txt b/kngil/fonts/faq/NotoKR-Black/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black-demo.html b/kngil/fonts/faq/NotoKR-Black/notokr-black-demo.html new file mode 100644 index 0000000..d3bb227 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/notokr-black-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Black Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Black

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Black +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Black in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Black in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black.eot b/kngil/fonts/faq/NotoKR-Black/notokr-black.eot new file mode 100644 index 0000000..93cfa76 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Black/notokr-black.eot differ diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black.svg b/kngil/fonts/faq/NotoKR-Black/notokr-black.svg new file mode 100644 index 0000000..4e5212b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/notokr-black.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black.ttf b/kngil/fonts/faq/NotoKR-Black/notokr-black.ttf new file mode 100644 index 0000000..38c4fab Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Black/notokr-black.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black.woff b/kngil/fonts/faq/NotoKR-Black/notokr-black.woff new file mode 100644 index 0000000..fe25b43 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Black/notokr-black.woff differ diff --git a/kngil/fonts/faq/NotoKR-Black/notokr-black.woff2 b/kngil/fonts/faq/NotoKR-Black/notokr-black.woff2 new file mode 100644 index 0000000..e0e9462 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Black/notokr-black.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Black/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Black/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Black/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Black/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Black/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Black/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Black/stylesheet.css b/kngil/fonts/faq/NotoKR-Black/stylesheet.css new file mode 100644 index 0000000..96d4ab0 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Black/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-black'; + src: url('notokr-black.eot'); + src: url('notokr-black.eot?#iefix') format('embedded-opentype'), + url('notokr-black.woff2') format('woff2'), + url('notokr-black.woff') format('woff'), + url('notokr-black.ttf') format('truetype'), + url('notokr-black.svg#notokr-black') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Bold/generator_config.txt b/kngil/fonts/faq/NotoKR-Bold/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold-demo.html b/kngil/fonts/faq/NotoKR-Bold/notokr-bold-demo.html new file mode 100644 index 0000000..e7ba0d7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/notokr-bold-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Bold Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Bold

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Bold +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Bold in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold.eot b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.eot new file mode 100644 index 0000000..4b3212a Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.eot differ diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold.svg b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.svg new file mode 100644 index 0000000..61b5f90 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold.ttf b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.ttf new file mode 100644 index 0000000..94e878e Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff new file mode 100644 index 0000000..82eb37a Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff differ diff --git a/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff2 b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff2 new file mode 100644 index 0000000..bcae199 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Bold/notokr-bold.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Bold/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Bold/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Bold/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Bold/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Bold/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Bold/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Bold/stylesheet.css b/kngil/fonts/faq/NotoKR-Bold/stylesheet.css new file mode 100644 index 0000000..63dcd8d --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Bold/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-bold'; + src: url('notokr-bold.eot'); + src: url('notokr-bold.eot?#iefix') format('embedded-opentype'), + url('notokr-bold.woff2') format('woff2'), + url('notokr-bold.woff') format('woff'), + url('notokr-bold.ttf') format('truetype'), + url('notokr-bold.svg#notokr-bold') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-DemiLight/generator_config.txt b/kngil/fonts/faq/NotoKR-DemiLight/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight-demo.html b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight-demo.html new file mode 100644 index 0000000..d437e89 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-DemiLight Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-DemiLight

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-DemiLight +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-DemiLight in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-DemiLight in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.eot b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.eot new file mode 100644 index 0000000..a8b908b Binary files /dev/null and b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.eot differ diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.svg b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.svg new file mode 100644 index 0000000..bf534fd --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.ttf b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.ttf new file mode 100644 index 0000000..e8f19a6 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.ttf differ diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff new file mode 100644 index 0000000..813ac3f Binary files /dev/null and b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff differ diff --git a/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff2 b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff2 new file mode 100644 index 0000000..3b842e9 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-DemiLight/notokr-demilight.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-DemiLight/stylesheet.css b/kngil/fonts/faq/NotoKR-DemiLight/stylesheet.css new file mode 100644 index 0000000..23d5fc0 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-DemiLight/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-demilight'; + src: url('notokr-demilight.eot'); + src: url('notokr-demilight.eot?#iefix') format('embedded-opentype'), + url('notokr-demilight.woff2') format('woff2'), + url('notokr-demilight.woff') format('woff'), + url('notokr-demilight.ttf') format('truetype'), + url('notokr-demilight.svg#notokr-demilight') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Light/generator_config.txt b/kngil/fonts/faq/NotoKR-Light/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light-demo.html b/kngil/fonts/faq/NotoKR-Light/notokr-light-demo.html new file mode 100644 index 0000000..4646c9f --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/notokr-light-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕 Light Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Light

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Light +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Light in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Light in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light.eot b/kngil/fonts/faq/NotoKR-Light/notokr-light.eot new file mode 100644 index 0000000..913c15e Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Light/notokr-light.eot differ diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light.svg b/kngil/fonts/faq/NotoKR-Light/notokr-light.svg new file mode 100644 index 0000000..6dd081a --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/notokr-light.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light.ttf b/kngil/fonts/faq/NotoKR-Light/notokr-light.ttf new file mode 100644 index 0000000..9b39e37 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Light/notokr-light.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light.woff b/kngil/fonts/faq/NotoKR-Light/notokr-light.woff new file mode 100644 index 0000000..7f534d5 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Light/notokr-light.woff differ diff --git a/kngil/fonts/faq/NotoKR-Light/notokr-light.woff2 b/kngil/fonts/faq/NotoKR-Light/notokr-light.woff2 new file mode 100644 index 0000000..cfe8a78 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Light/notokr-light.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Light/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Light/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Light/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Light/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Light/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Light/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Light/stylesheet.css b/kngil/fonts/faq/NotoKR-Light/stylesheet.css new file mode 100644 index 0000000..1ca6735 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Light/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-light'; + src: url('notokr-light.eot'); + src: url('notokr-light.eot?#iefix') format('embedded-opentype'), + url('notokr-light.woff2') format('woff2'), + url('notokr-light.woff') format('woff'), + url('notokr-light.ttf') format('truetype'), + url('notokr-light.svg#notokr-light') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Medium/generator_config.txt b/kngil/fonts/faq/NotoKR-Medium/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium-demo.html b/kngil/fonts/faq/NotoKR-Medium/notokr-medium-demo.html new file mode 100644 index 0000000..eecbf0a --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/notokr-medium-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Medium Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Medium

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Medium +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Medium in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Medium in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium.eot b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.eot new file mode 100644 index 0000000..82cffc5 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.eot differ diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium.svg b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.svg new file mode 100644 index 0000000..a723cd5 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium.ttf b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.ttf new file mode 100644 index 0000000..717ad24 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff new file mode 100644 index 0000000..53cbaee Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff differ diff --git a/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff2 b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff2 new file mode 100644 index 0000000..8450f5c Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Medium/notokr-medium.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Medium/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Medium/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Medium/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Medium/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Medium/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Medium/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Medium/stylesheet.css b/kngil/fonts/faq/NotoKR-Medium/stylesheet.css new file mode 100644 index 0000000..9ab12f4 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Medium/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-medium'; + src: url('notokr-medium.eot'); + src: url('notokr-medium.eot?#iefix') format('embedded-opentype'), + url('notokr-medium.woff2') format('woff2'), + url('notokr-medium.woff') format('woff'), + url('notokr-medium.ttf') format('truetype'), + url('notokr-medium.svg#notokr-medium') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Regular/generator_config.txt b/kngil/fonts/faq/NotoKR-Regular/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular-demo.html b/kngil/fonts/faq/NotoKR-Regular/notokr-regular-demo.html new file mode 100644 index 0000000..b11bb6a --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/notokr-regular-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Regular Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Regular

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Regular Regular +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Regular Regular in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Regular Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular.eot b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.eot new file mode 100644 index 0000000..10a6953 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.eot differ diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular.svg b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.svg new file mode 100644 index 0000000..d4453cd --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular.ttf b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.ttf new file mode 100644 index 0000000..c1fde18 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff new file mode 100644 index 0000000..53384d9 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff differ diff --git a/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff2 b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff2 new file mode 100644 index 0000000..2a205a3 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Regular/notokr-regular.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Regular/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Regular/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Regular/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Regular/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Regular/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Regular/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Regular/stylesheet.css b/kngil/fonts/faq/NotoKR-Regular/stylesheet.css new file mode 100644 index 0000000..6f4e02d --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Regular/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-regular'; + src: url('notokr-regular.eot'); + src: url('notokr-regular.eot?#iefix') format('embedded-opentype'), + url('notokr-regular.woff2') format('woff2'), + url('notokr-regular.woff') format('woff'), + url('notokr-regular.ttf') format('truetype'), + url('notokr-regular.svg#notokr-regular') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Thin/generator_config.txt b/kngil/fonts/faq/NotoKR-Thin/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin-demo.html b/kngil/fonts/faq/NotoKR-Thin/notokr-thin-demo.html new file mode 100644 index 0000000..70faa93 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/notokr-thin-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Thin Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Thin

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Thin +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Thin in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Thin in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin.eot b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.eot new file mode 100644 index 0000000..99d38a6 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.eot differ diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin.svg b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.svg new file mode 100644 index 0000000..cffd81c --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin.ttf b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.ttf new file mode 100644 index 0000000..4369eb7 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.ttf differ diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff new file mode 100644 index 0000000..9c30f6f Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff differ diff --git a/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff2 b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff2 new file mode 100644 index 0000000..460a7c7 Binary files /dev/null and b/kngil/fonts/faq/NotoKR-Thin/notokr-thin.woff2 differ diff --git a/kngil/fonts/faq/NotoKR-Thin/specimen_files/easytabs.js b/kngil/fonts/faq/NotoKR-Thin/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Thin/specimen_files/grid_12-825-55-15.css b/kngil/fonts/faq/NotoKR-Thin/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/faq/NotoKR-Thin/specimen_files/specimen_stylesheet.css b/kngil/fonts/faq/NotoKR-Thin/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/faq/NotoKR-Thin/stylesheet.css b/kngil/fonts/faq/NotoKR-Thin/stylesheet.css new file mode 100644 index 0000000..9e60668 --- /dev/null +++ b/kngil/fonts/faq/NotoKR-Thin/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-thin'; + src: url('notokr-thin.eot'); + src: url('notokr-thin.eot?#iefix') format('embedded-opentype'), + url('notokr-thin.woff2') format('woff2'), + url('notokr-thin.woff') format('woff'), + url('notokr-thin.ttf') format('truetype'), + url('notokr-thin.svg#notokr-thin') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/fontawesome-webfont.eot b/kngil/fonts/fontawesome-webfont.eot new file mode 100644 index 0000000..e9f60ca Binary files /dev/null and b/kngil/fonts/fontawesome-webfont.eot differ diff --git a/kngil/fonts/fontawesome-webfont.svg b/kngil/fonts/fontawesome-webfont.svg new file mode 100644 index 0000000..855c845 --- /dev/null +++ b/kngil/fonts/fontawesome-webfont.svg @@ -0,0 +1,2671 @@ + + + diff --git a/kngil/fonts/fontawesome-webfont.ttf b/kngil/fonts/fontawesome-webfont.ttf new file mode 100644 index 0000000..35acda2 Binary files /dev/null and b/kngil/fonts/fontawesome-webfont.ttf differ diff --git a/kngil/fonts/fontawesome-webfont.woff b/kngil/fonts/fontawesome-webfont.woff new file mode 100644 index 0000000..400014a Binary files /dev/null and b/kngil/fonts/fontawesome-webfont.woff differ diff --git a/kngil/fonts/fontawesome-webfont.woff2 b/kngil/fonts/fontawesome-webfont.woff2 new file mode 100644 index 0000000..4d13fc6 Binary files /dev/null and b/kngil/fonts/fontawesome-webfont.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Black/generator_config.txt b/kngil/fonts/qa/NotoKR-Black/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black-demo.html b/kngil/fonts/qa/NotoKR-Black/notokr-black-demo.html new file mode 100644 index 0000000..d3bb227 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/notokr-black-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Black Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Black

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Black +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Black in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Black in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black.eot b/kngil/fonts/qa/NotoKR-Black/notokr-black.eot new file mode 100644 index 0000000..93cfa76 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Black/notokr-black.eot differ diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black.svg b/kngil/fonts/qa/NotoKR-Black/notokr-black.svg new file mode 100644 index 0000000..4e5212b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/notokr-black.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black.ttf b/kngil/fonts/qa/NotoKR-Black/notokr-black.ttf new file mode 100644 index 0000000..38c4fab Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Black/notokr-black.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black.woff b/kngil/fonts/qa/NotoKR-Black/notokr-black.woff new file mode 100644 index 0000000..fe25b43 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Black/notokr-black.woff differ diff --git a/kngil/fonts/qa/NotoKR-Black/notokr-black.woff2 b/kngil/fonts/qa/NotoKR-Black/notokr-black.woff2 new file mode 100644 index 0000000..e0e9462 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Black/notokr-black.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Black/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Black/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Black/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Black/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Black/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Black/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Black/stylesheet.css b/kngil/fonts/qa/NotoKR-Black/stylesheet.css new file mode 100644 index 0000000..96d4ab0 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Black/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-black'; + src: url('notokr-black.eot'); + src: url('notokr-black.eot?#iefix') format('embedded-opentype'), + url('notokr-black.woff2') format('woff2'), + url('notokr-black.woff') format('woff'), + url('notokr-black.ttf') format('truetype'), + url('notokr-black.svg#notokr-black') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Bold/generator_config.txt b/kngil/fonts/qa/NotoKR-Bold/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold-demo.html b/kngil/fonts/qa/NotoKR-Bold/notokr-bold-demo.html new file mode 100644 index 0000000..e7ba0d7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/notokr-bold-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Bold Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Bold

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Bold +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Bold in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold.eot b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.eot new file mode 100644 index 0000000..4b3212a Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.eot differ diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold.svg b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.svg new file mode 100644 index 0000000..61b5f90 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold.ttf b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.ttf new file mode 100644 index 0000000..94e878e Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff new file mode 100644 index 0000000..82eb37a Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff differ diff --git a/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff2 b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff2 new file mode 100644 index 0000000..bcae199 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Bold/notokr-bold.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Bold/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Bold/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Bold/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Bold/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Bold/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Bold/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Bold/stylesheet.css b/kngil/fonts/qa/NotoKR-Bold/stylesheet.css new file mode 100644 index 0000000..63dcd8d --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Bold/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-bold'; + src: url('notokr-bold.eot'); + src: url('notokr-bold.eot?#iefix') format('embedded-opentype'), + url('notokr-bold.woff2') format('woff2'), + url('notokr-bold.woff') format('woff'), + url('notokr-bold.ttf') format('truetype'), + url('notokr-bold.svg#notokr-bold') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-DemiLight/generator_config.txt b/kngil/fonts/qa/NotoKR-DemiLight/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight-demo.html b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight-demo.html new file mode 100644 index 0000000..d437e89 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-DemiLight Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-DemiLight

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-DemiLight +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-DemiLight in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-DemiLight in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.eot b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.eot new file mode 100644 index 0000000..a8b908b Binary files /dev/null and b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.eot differ diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.svg b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.svg new file mode 100644 index 0000000..bf534fd --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.ttf b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.ttf new file mode 100644 index 0000000..e8f19a6 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.ttf differ diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff new file mode 100644 index 0000000..813ac3f Binary files /dev/null and b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff differ diff --git a/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff2 b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff2 new file mode 100644 index 0000000..3b842e9 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-DemiLight/notokr-demilight.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-DemiLight/stylesheet.css b/kngil/fonts/qa/NotoKR-DemiLight/stylesheet.css new file mode 100644 index 0000000..23d5fc0 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-DemiLight/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-demilight'; + src: url('notokr-demilight.eot'); + src: url('notokr-demilight.eot?#iefix') format('embedded-opentype'), + url('notokr-demilight.woff2') format('woff2'), + url('notokr-demilight.woff') format('woff'), + url('notokr-demilight.ttf') format('truetype'), + url('notokr-demilight.svg#notokr-demilight') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Light/generator_config.txt b/kngil/fonts/qa/NotoKR-Light/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light-demo.html b/kngil/fonts/qa/NotoKR-Light/notokr-light-demo.html new file mode 100644 index 0000000..4646c9f --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/notokr-light-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕 Light Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Light

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Light +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Light in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Light in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light.eot b/kngil/fonts/qa/NotoKR-Light/notokr-light.eot new file mode 100644 index 0000000..913c15e Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Light/notokr-light.eot differ diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light.svg b/kngil/fonts/qa/NotoKR-Light/notokr-light.svg new file mode 100644 index 0000000..6dd081a --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/notokr-light.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light.ttf b/kngil/fonts/qa/NotoKR-Light/notokr-light.ttf new file mode 100644 index 0000000..9b39e37 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Light/notokr-light.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light.woff b/kngil/fonts/qa/NotoKR-Light/notokr-light.woff new file mode 100644 index 0000000..7f534d5 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Light/notokr-light.woff differ diff --git a/kngil/fonts/qa/NotoKR-Light/notokr-light.woff2 b/kngil/fonts/qa/NotoKR-Light/notokr-light.woff2 new file mode 100644 index 0000000..cfe8a78 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Light/notokr-light.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Light/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Light/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Light/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Light/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Light/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Light/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Light/stylesheet.css b/kngil/fonts/qa/NotoKR-Light/stylesheet.css new file mode 100644 index 0000000..1ca6735 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Light/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-light'; + src: url('notokr-light.eot'); + src: url('notokr-light.eot?#iefix') format('embedded-opentype'), + url('notokr-light.woff2') format('woff2'), + url('notokr-light.woff') format('woff'), + url('notokr-light.ttf') format('truetype'), + url('notokr-light.svg#notokr-light') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Medium/generator_config.txt b/kngil/fonts/qa/NotoKR-Medium/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium-demo.html b/kngil/fonts/qa/NotoKR-Medium/notokr-medium-demo.html new file mode 100644 index 0000000..eecbf0a --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/notokr-medium-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Medium Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Medium

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Medium +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Medium in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Medium in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium.eot b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.eot new file mode 100644 index 0000000..82cffc5 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.eot differ diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium.svg b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.svg new file mode 100644 index 0000000..a723cd5 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium.ttf b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.ttf new file mode 100644 index 0000000..717ad24 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff new file mode 100644 index 0000000..53cbaee Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff differ diff --git a/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff2 b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff2 new file mode 100644 index 0000000..8450f5c Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Medium/notokr-medium.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Medium/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Medium/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Medium/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Medium/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Medium/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Medium/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Medium/stylesheet.css b/kngil/fonts/qa/NotoKR-Medium/stylesheet.css new file mode 100644 index 0000000..9ab12f4 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Medium/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-medium'; + src: url('notokr-medium.eot'); + src: url('notokr-medium.eot?#iefix') format('embedded-opentype'), + url('notokr-medium.woff2') format('woff2'), + url('notokr-medium.woff') format('woff'), + url('notokr-medium.ttf') format('truetype'), + url('notokr-medium.svg#notokr-medium') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Regular/generator_config.txt b/kngil/fonts/qa/NotoKR-Regular/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular-demo.html b/kngil/fonts/qa/NotoKR-Regular/notokr-regular-demo.html new file mode 100644 index 0000000..b11bb6a --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/notokr-regular-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Regular Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Regular

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Regular Regular +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Regular Regular in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Regular Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular.eot b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.eot new file mode 100644 index 0000000..10a6953 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.eot differ diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular.svg b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.svg new file mode 100644 index 0000000..d4453cd --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular.ttf b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.ttf new file mode 100644 index 0000000..c1fde18 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff new file mode 100644 index 0000000..53384d9 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff differ diff --git a/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff2 b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff2 new file mode 100644 index 0000000..2a205a3 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Regular/notokr-regular.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Regular/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Regular/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Regular/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Regular/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Regular/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Regular/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Regular/stylesheet.css b/kngil/fonts/qa/NotoKR-Regular/stylesheet.css new file mode 100644 index 0000000..6f4e02d --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Regular/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-regular'; + src: url('notokr-regular.eot'); + src: url('notokr-regular.eot?#iefix') format('embedded-opentype'), + url('notokr-regular.woff2') format('woff2'), + url('notokr-regular.woff') format('woff'), + url('notokr-regular.ttf') format('truetype'), + url('notokr-regular.svg#notokr-regular') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Thin/generator_config.txt b/kngil/fonts/qa/NotoKR-Thin/generator_config.txt new file mode 100644 index 0000000..fa60335 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/generator_config.txt @@ -0,0 +1,5 @@ +# Font Squirrel Font-face Generator Configuration File +# Upload this file to the generator to recreate the settings +# you used to create these fonts. + +{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin-demo.html b/kngil/fonts/qa/NotoKR-Thin/notokr-thin-demo.html new file mode 100644 index 0000000..70faa93 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/notokr-thin-demo.html @@ -0,0 +1,2827 @@ + + + + + + + + + + + + + 본고딕-Thin Specimen + + + + + + +

+ +

Specimen
Sample Layout
Glyphs & Languages
Installing Webfonts

+ +

+ + +

+ +

본고딕-Thin

+ +

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

+ + + + + + + + + + + + + + + + +

10	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90	다람쥐헌쳇바퀴에타고파ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

+ +

+ + + +

+ + +

body

+ bodyNotoKR-Thin +

+ bodyArial +

+ bodyVerdana +

+ bodyGeorgia +

+ + + +

+ + +

+ +

+ + + +

+ +

+ + + + +

+ +

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Cras mattis consectetur

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+ +

Maecenas sed diam eget risus varius.

+ +

+ + + +

+ +

+ + + + + + +

+ +

Language Support

The subset of NotoKR-Thin in this kit supports the following languages:
+ + English

Glyph Chart

The subset of NotoKR-Thin in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+ +

(

)

;

[

]

{

}

가

각

간

갇

갈

갉

갊

감

갑

값

갓

갔

강

갖

갗

같

갚

갛

개

객

갠

갤

갬

갭

갯

갰

갱

갸

갹

갼

걀

걋

걍

걔

걘

걜

거

걱

건

걷

걸

걺

검

겁

것

겄

겅

겆

겉

겊

겋

게

겐

겔

겜

겝

겟

겠

겡

겨

격

겪

견

겯

결

겸

겹

겻

겼

경

곁

계

곈

곌

곕

곗

고

곡

곤

곧

골

곪

곬

곯

곰

곱

곳

공

곶

과

곽

관

괄

괆

괌

괍

괏

광

괘

괜

괠

괩

괬

괭

괴

괵

괸

괼

굄

굅

굇

굉

교

굔

굘

굡

굣

구

국

군

굳

굴

굵

굶

굻

굼

굽

굿

궁

궂

궈

궉

권

궐

궜

궝

궤

궷

귀

귁

귄

귈

귐

귑

귓

규

균

귤

그

극

근

귿

글

긁

금

급

긋

긍

긔

기

긱

긴

긷

길

긺

김

깁

깃

깅

깆

깊

까

깍

깎

깐

깔

깖

깜

깝

깟

깠

깡

깥

깨

깩

깬

깰

깸

깹

깻

깼

깽

꺄

꺅

꺌

꺼

꺽

꺾

껀

껄

껌

껍

껏

껐

껑

께

껙

껜

껨

껫

껭

껴

껸

껼

꼇

꼈

꼍

꼐

꼬

꼭

꼰

꼲

꼴

꼼

꼽

꼿

꽁

꽂

꽃

꽈

꽉

꽐

꽜

꽝

꽤

꽥

꽹

꾀

꾄

꾈

꾐

꾑

꾕

꾜

꾸

꾹

꾼

꿀

꿇

꿈

꿉

꿋

꿍

꿎

꿔

꿜

꿨

꿩

꿰

꿱

꿴

꿸

뀀

뀁

뀄

뀌

뀐

뀔

뀜

뀝

뀨

끄

끅

끈

끊

끌

끎

끓

끔

끕

끗

끙

끝

끼

끽

낀

낄

낌

낍

낏

낑

나

낙

낚

난

낟

날

낡

낢

남

납

낫

났

낭

낮

낯

낱

낳

내

낵

낸

낼

냄

냅

냇

냈

냉

냐

냑

냔

냘

냠

냥

너

넉

넋

넌

널

넒

넓

넘

넙

넛

넜

넝

넣

네

넥

넨

넬

넴

넵

넷

넸

넹

녀

녁

년

녈

념

녑

녔

녕

녘

녜

녠

노

녹

논

놀

놂

놈

놉

놋

농

높

놓

놔

놘

놜

놨

뇌

뇐

뇔

뇜

뇝

뇟

뇨

뇩

뇬

뇰

뇹

뇻

뇽

누

눅

눈

눋

눌

눔

눕

눗

눙

눠

눴

눼

뉘

뉜

뉠

뉨

뉩

뉴

뉵

뉼

늄

늅

늉

느

늑

는

늘

늙

늚

늠

늡

늣

능

늦

늪

늬

늰

늴

니

닉

닌

닐

닒

님

닙

닛

닝

닢

다

닥

닦

단

닫

달

닭

닮

닯

닳

담

답

닷

닸

당

닺

닻

닿

대

댁

댄

댈

댐

댑

댓

댔

댕

댜

더

덕

덖

던

덛

덜

덞

덟

덤

덥

덧

덩

덫

덮

데

덱

덴

델

뎀

뎁

뎃

뎄

뎅

뎌

뎐

뎔

뎠

뎡

뎨

뎬

도

독

돈

돋

돌

돎

돐

돔

돕

돗

동

돛

돝

돠

돤

돨

돼

됐

되

된

될

됨

됩

됫

됴

두

둑

둔

둘

둠

둡

둣

둥

둬

뒀

뒈

뒝

뒤

뒨

뒬

뒵

뒷

뒹

듀

듄

듈

듐

듕

드

득

든

듣

들

듦

듬

듭

듯

등

듸

디

딕

딘

딛

딜

딤

딥

딧

딨

딩

딪

따

딱

딴

딸

땀

땁

땃

땄

땅

땋

때

땍

땐

땔

땜

땝

땟

땠

땡

떠

떡

떤

떨

떪

떫

떰

떱

떳

떴

떵

떻

떼

떽

뗀

뗄

뗌

뗍

뗏

뗐

뗑

뗘

뗬

또

똑

똔

똘

똥

똬

똴

뙈

뙤

뙨

뚜

뚝

뚠

뚤

뚫

뚬

뚱

뛔

뛰

뛴

뛸

뜀

뜁

뜅

뜨

뜩

뜬

뜯

뜰

뜸

뜹

뜻

띄

띈

띌

띔

띕

띠

띤

띨

띰

띱

띳

띵

라

락

란

랄

람

랍

랏

랐

랑

랒

랖

랗

래

랙

랜

랠

램

랩

랫

랬

랭

랴

략

랸

럇

량

러

럭

런

럴

럼

럽

럿

렀

렁

렇

레

렉

렌

렐

렘

렙

렛

렝

려

력

련

렬

렴

렵

렷

렸

령

례

롄

롑

롓

로

록

론

롤

롬

롭

롯

롱

롸

롼

뢍

뢨

뢰

뢴

뢸

룀

룁

룃

룅

료

룐

룔

룝

룟

룡

루

룩

룬

룰

룸

룹

룻

룽

뤄

뤘

뤠

뤼

뤽

륀

륄

륌

륏

륑

류

륙

륜

률

륨

륩

륫

륭

르

륵

른

를

름

릅

릇

릉

릊

릍

릎

리

릭

린

릴

림

립

릿

링

마

막

만

많

맏

말

맑

맒

맘

맙

맛

망

맞

맡

맣

매

맥

맨

맬

맴

맵

맷

맸

맹

맺

먀

먁

먈

먕

머

먹

먼

멀

멂

멈

멉

멋

멍

멎

멓

메

멕

멘

멜

멤

멥

멧

멨

멩

며

멱

면

멸

몃

몄

명

몇

몌

모

목

몫

몬

몰

몲

몸

몹

못

몽

뫄

뫈

뫘

뫙

뫼

묀

묄

묍

묏

묑

묘

묜

묠

묩

묫

무

묵

묶

문

묻

물

묽

묾

뭄

뭅

뭇

뭉

뭍

뭏

뭐

뭔

뭘

뭡

뭣

뭬

뮈

뮌

뮐

뮤

뮨

뮬

뮴

뮷

므

믄

믈

믐

믓

미

믹

민

믿

밀

밂

밈

밉

밋

밌

밍

및

밑

바

박

밖

밗

반

받

발

밝

밞

밟

밤

밥

밧

방

밭

배

백

밴

밸

뱀

뱁

뱃

뱄

뱅

뱉

뱌

뱍

뱐

뱝

버

벅

번

벋

벌

벎

범

법

벗

벙

벚

베

벡

벤

벧

벨

벰

벱

벳

벴

벵

벼

벽

변

별

볍

볏

볐

병

볕

볘

볜

보

복

볶

본

볼

봄

봅

봇

봉

봐

봔

봤

봬

뵀

뵈

뵉

뵌

뵐

뵘

뵙

뵤

뵨

부

북

분

붇

불

붉

붊

붐

붑

붓

붕

붙

붚

붜

붤

붰

붸

뷔

뷕

뷘

뷜

뷩

뷰

뷴

뷸

븀

븃

븅

브

븍

븐

블

븜

븝

븟

비

빅

빈

빌

빎

빔

빕

빗

빙

빚

빛

빠

빡

빤

빨

빪

빰

빱

빳

빴

빵

빻

빼

빽

뺀

뺄

뺌

뺍

뺏

뺐

뺑

뺘

뺙

뺨

뻐

뻑

뻔

뻗

뻘

뻠

뻣

뻤

뻥

뻬

뼁

뼈

뼉

뼘

뼙

뼛

뼜

뼝

뽀

뽁

뽄

뽈

뽐

뽑

뽕

뾔

뾰

뿅

뿌

뿍

뿐

뿔

뿜

뿟

뿡

쀼

쁑

쁘

쁜

쁠

쁨

쁩

삐

삑

삔

삘

삠

삡

삣

삥

사

삭

삯

산

삳

살

삵

삶

삼

삽

삿

샀

상

샅

새

색

샌

샐

샘

샙

샛

샜

생

샤

샥

샨

샬

샴

샵

샷

샹

섀

섄

섈

섐

섕

서

석

섞

섟

선

섣

설

섦

섧

섬

섭

섯

섰

성

섶

세

섹

센

셀

셈

셉

셋

셌

셍

셔

셕

션

셜

셤

셥

셧

셨

셩

셰

셴

셸

솅

소

속

솎

손

솔

솖

솜

솝

솟

송

솥

솨

솩

솬

솰

솽

쇄

쇈

쇌

쇔

쇗

쇘

쇠

쇤

쇨

쇰

쇱

쇳

쇼

쇽

숀

숄

숌

숍

숏

숑

수

숙

순

숟

술

숨

숩

숫

숭

숯

숱

숲

숴

쉈

쉐

쉑

쉔

쉘

쉠

쉥

쉬

쉭

쉰

쉴

쉼

쉽

쉿

슁

슈

슉

슐

슘

슛

슝

스

슥

슨

슬

슭

슴

습

슷

승

시

식

신

싣

실

싫

심

십

싯

싱

싶

싸

싹

싻

싼

쌀

쌈

쌉

쌌

쌍

쌓

쌔

쌕

쌘

쌜

쌤

쌥

쌨

쌩

썅

써

썩

썬

썰

썲

썸

썹

썼

썽

쎄

쎈

쎌

쏀

쏘

쏙

쏜

쏟

쏠

쏢

쏨

쏩

쏭

쏴

쏵

쏸

쐈

쐐

쐤

쐬

쐰

쐴

쐼

쐽

쑈

쑤

쑥

쑨

쑬

쑴

쑵

쑹

쒀

쒔

쒜

쒸

쒼

쓩

쓰

쓱

쓴

쓸

쓺

쓿

씀

씁

씌

씐

씔

씜

씨

씩

씬

씰

씸

씹

씻

씽

아

악

안

앉

않

알

앍

앎

앓

암

압

앗

았

앙

앝

앞

애

액

앤

앨

앰

앱

앳

앴

앵

야

약

얀

얄

얇

얌

얍

얏

양

얕

얗

얘

얜

얠

얩

어

억

언

얹

얻

얼

얽

얾

엄

업

없

엇

었

엉

엊

엌

엎

에

엑

엔

엘

엠

엡

엣

엥

여

역

엮

연

열

엶

엷

염

엽

엾

엿

였

영

옅

옆

옇

예

옌

옐

옘

옙

옛

옜

오

옥

온

올

옭

옮

옰

옳

옴

옵

옷

옹

옻

와

왁

완

왈

왐

왑

왓

왔

왕

왜

왝

왠

왬

왯

왱

외

왹

왼

욀

욈

욉

욋

욍

요

욕

욘

욜

욤

욥

욧

용

우

욱

운

울

욹

욺

움

웁

웃

웅

워

웍

원

월

웜

웝

웠

웡

웨

웩

웬

웰

웸

웹

웽

위

윅

윈

윌

윔

윕

윗

윙

유

육

윤

율

윰

윱

윳

융

윷

으

윽

은

을

읊

음

읍

읏

응

읒

읓

읔

읕

읖

읗

의

읜

읠

읨

읫

이

익

인

일

읽

읾

잃

임

입

잇

있

잉

잊

잎

자

작

잔

잖

잗

잘

잚

잠

잡

잣

잤

장

잦

재

잭

잰

잴

잼

잽

잿

쟀

쟁

쟈

쟉

쟌

쟎

쟐

쟘

쟝

쟤

쟨

쟬

저

적

전

절

젊

점

접

젓

정

젖

제

젝

젠

젤

젬

젭

젯

젱

져

젼

졀

졈

졉

졌

졍

졔

조

족

존

졸

졺

좀

좁

좃

종

좆

좇

좋

좌

좍

좔

좝

좟

좡

좨

좼

좽

죄

죈

죌

죔

죕

죗

죙

죠

죡

죤

죵

주

죽

준

줄

줅

줆

줌

줍

줏

중

줘

줬

줴

쥐

쥑

쥔

쥘

쥠

쥡

쥣

쥬

쥰

쥴

쥼

즈

즉

즌

즐

즘

즙

즛

증

지

직

진

짇

질

짊

짐

집

짓

징

짖

짙

짚

짜

짝

짠

짢

짤

짧

짬

짭

짯

짰

짱

째

짹

짼

쨀

쨈

쨉

쨋

쨌

쨍

쨔

쨘

쨩

쩌

쩍

쩐

쩔

쩜

쩝

쩟

쩠

쩡

쩨

쩽

쪄

쪘

쪼

쪽

쫀

쫄

쫌

쫍

쫏

쫑

쫓

쫘

쫙

쫠

쫬

쫴

쬈

쬐

쬔

쬘

쬠

쬡

쭁

쭈

쭉

쭌

쭐

쭘

쭙

쭝

쭤

쭸

쭹

쮜

쮸

쯔

쯤

쯧

쯩

찌

찍

찐

찔

찜

찝

찡

찢

찧

차

착

찬

찮

찰

참

찹

찻

찼

창

찾

채

책

챈

챌

챔

챕

챗

챘

챙

챠

챤

챦

챨

챰

챵

처

척

천

철

첨

첩

첫

첬

청

체

첵

첸

첼

쳄

쳅

쳇

쳉

쳐

쳔

쳤

쳬

쳰

촁

초

촉

촌

촐

촘

촙

촛

총

촤

촨

촬

촹

최

쵠

쵤

쵬

쵭

쵯

쵱

쵸

춈

추

축

춘

출

춤

춥

춧

충

춰

췄

췌

췐

취

췬

췰

췸

췹

췻

췽

츄

츈

츌

츔

츙

츠

측

츤

츨

츰

츱

츳

층

치

칙

친

칟

칠

칡

침

칩

칫

칭

카

칵

칸

칼

캄

캅

캇

캉

캐

캑

캔

캘

캠

캡

캣

캤

캥

캬

캭

컁

커

컥

컨

컫

컬

컴

컵

컷

컸

컹

케

켁

켄

켈

켐

켑

켓

켕

켜

켠

켤

켬

켭

켯

켰

켱

켸

코

콕

콘

콜

콤

콥

콧

콩

콰

콱

콴

콸

쾀

쾅

쾌

쾡

쾨

쾰

쿄

쿠

쿡

쿤

쿨

쿰

쿱

쿳

쿵

쿼

퀀

퀄

퀑

퀘

퀭

퀴

퀵

퀸

퀼

큄

큅

큇

큉

큐

큔

큘

큠

크

큭

큰

클

큼

큽

킁

키

킥

킨

킬

킴

킵

킷

킹

타

탁

탄

탈

탉

탐

탑

탓

탔

탕

태

택

탠

탤

탬

탭

탯

탰

탱

탸

턍

터

턱

턴

털

턺

텀

텁

텃

텄

텅

테

텍

텐

텔

템

텝

텟

텡

텨

텬

텼

톄

톈

토

톡

톤

톨

톰

톱

톳

통

톺

톼

퇀

퇘

퇴

퇸

툇

툉

툐

투

툭

툰

툴

툼

툽

툿

퉁

퉈

퉜

퉤

튀

튁

튄

튈

튐

튑

튕

튜

튠

튤

튬

튱

트

특

튼

튿

틀

틂

틈

틉

틋

틔

틘

틜

틤

틥

티

틱

틴

틸

팀

팁

팃

팅

파

팍

팎

판

팔

팖

팜

팝

팟

팠

팡

팥

패

팩

팬

팰

팸

팹

팻

팼

팽

퍄

퍅

퍼

퍽

펀

펄

펌

펍

펏

펐

펑

페

펙

펜

펠

펨

펩

펫

펭

펴

편

펼

폄

폅

폈

평

폐

폘

폡

폣

포

폭

폰

폴

폼

폽

폿

퐁

퐈

퐝

푀

푄

표

푠

푤

푭

푯

푸

푹

푼

푿

풀

풂

품

풉

풋

풍

풔

풩

퓌

퓐

퓔

퓜

퓟

퓨

퓬

퓰

퓸

퓻

퓽

프

픈

플

픔

픕

픗

피

픽

핀

필

핌

핍

핏

핑

하

학

한

할

핥

함

합

핫

항

해

핵

핸

핼

햄

햅

햇

했

행

햐

향

허

헉

헌

헐

헒

험

헙

헛

헝

헤

헥

헨

헬

헴

헵

헷

헹

혀

혁

현

혈

혐

협

혓

혔

형

혜

혠

혤

혭

호

혹

혼

홀

홅

홈

홉

홋

홍

홑

화

확

환

활

홧

황

홰

홱

홴

횃

횅

회

획

횐

횔

횝

횟

횡

효

횬

횰

횹

횻

후

훅

훈

훌

훑

훔

훗

훙

훠

훤

훨

훰

훵

훼

훽

휀

휄

휑

휘

휙

휜

휠

휨

휩

휫

휭

휴

휵

휸

휼

흄

흇

흉

흐

흑

흔

흖

흗

흘

흙

흠

흡

흣

흥

흩

희

흰

흴

흼

흽

힁

히

힉

힌

힐

힘

힙

힛

힝

+ + +

+ +

Installing Webfonts

+ +

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+ + +


+@font-face{ 
+	font-family: 'MyWebFont';
+	src: url('WebFont.eot');
+	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+	     url('WebFont.woff') format('woff'),
+	     url('WebFont.ttf') format('truetype'),
+	     url('WebFont.svg#webfont') format('svg');
+}
+

+ +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+ +

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

Fonts not loading in iPhone or iPad

+ +

Fonts not loading in Firefox

+ +

Fonts not loading in IE

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+ +

+ + diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin.eot b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.eot new file mode 100644 index 0000000..99d38a6 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.eot differ diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin.svg b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.svg new file mode 100644 index 0000000..cffd81c --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.svg @@ -0,0 +1,2457 @@ + + + \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin.ttf b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.ttf new file mode 100644 index 0000000..4369eb7 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.ttf differ diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff new file mode 100644 index 0000000..9c30f6f Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff differ diff --git a/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff2 b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff2 new file mode 100644 index 0000000..460a7c7 Binary files /dev/null and b/kngil/fonts/qa/NotoKR-Thin/notokr-thin.woff2 differ diff --git a/kngil/fonts/qa/NotoKR-Thin/specimen_files/easytabs.js b/kngil/fonts/qa/NotoKR-Thin/specimen_files/easytabs.js new file mode 100644 index 0000000..167f53b --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/specimen_files/easytabs.js @@ -0,0 +1,7 @@ +(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} +if(typeof param.defaultContent=="number") +{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} +$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} +function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") +{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} +$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Thin/specimen_files/grid_12-825-55-15.css b/kngil/fonts/qa/NotoKR-Thin/specimen_files/grid_12-825-55-15.css new file mode 100644 index 0000000..3d6aef7 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/specimen_files/grid_12-825-55-15.css @@ -0,0 +1,129 @@ +/*Notes about grid: +Columns: 12 +Grid Width: 825px +Column Width: 55px +Gutter Width: 15px +-------------------------------*/ + + + +.section {margin-bottom: 18px; +} +.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} +.section {*zoom: 1;} + +.section .firstcolumn, +.section .firstcol {margin-left: 0;} + + +/* Border on left hand side of a column. */ +.border { + padding-left: 7px; + margin-left: 7px; + border-left: 1px solid #eee; +} + +/* Border with more whitespace, spans one column. */ +.colborder { + padding-left: 42px; + margin-left: 42px; + border-left: 1px solid #eee; +} + + + +/* The Grid Classes */ +.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 +{margin-left: 15px;float: left;display: inline; overflow: hidden;} + + +.width1, .grid1, .span-1 {width: 55px;} +.width1_2cols,.grid1_2cols {width: 20px;} +.width1_3cols,.grid1_3cols {width: 8px;} +.width1_4cols,.grid1_4cols {width: 2px;} +.input_width1 {width: 49px;} + +.width2, .grid2, .span-2 {width: 125px;} +.width2_3cols,.grid2_3cols {width: 31px;} +.width2_4cols,.grid2_4cols {width: 20px;} +.input_width2 {width: 119px;} + +.width3, .grid3, .span-3 {width: 195px;} +.width3_2cols,.grid3_2cols {width: 90px;} +.width3_4cols,.grid3_4cols {width: 37px;} +.input_width3 {width: 189px;} + +.width4, .grid4, .span-4 {width: 265px;} +.width4_3cols,.grid4_3cols {width: 78px;} +.input_width4 {width: 259px;} + +.width5, .grid5, .span-5 {width: 335px;} +.width5_2cols,.grid5_2cols {width: 160px;} +.width5_3cols,.grid5_3cols {width: 101px;} +.width5_4cols,.grid5_4cols {width: 72px;} +.input_width5 {width: 329px;} + +.width6, .grid6, .span-6 {width: 405px;} +.width6_4cols,.grid6_4cols {width: 90px;} +.input_width6 {width: 399px;} + +.width7, .grid7, .span-7 {width: 475px;} +.width7_2cols,.grid7_2cols {width: 230px;} +.width7_3cols,.grid7_3cols {width: 148px;} +.width7_4cols,.grid7_4cols {width: 107px;} +.input_width7 {width: 469px;} + +.width8, .grid8, .span-8 {width: 545px;} +.width8_3cols,.grid8_3cols {width: 171px;} +.input_width8 {width: 539px;} + +.width9, .grid9, .span-9 {width: 615px;} +.width9_2cols,.grid9_2cols {width: 300px;} +.width9_4cols,.grid9_4cols {width: 142px;} +.input_width9 {width: 609px;} + +.width10, .grid10, .span-10 {width: 685px;} +.width10_3cols,.grid10_3cols {width: 218px;} +.width10_4cols,.grid10_4cols {width: 160px;} +.input_width10 {width: 679px;} + +.width11, .grid11, .span-11 {width: 755px;} +.width11_2cols,.grid11_2cols {width: 370px;} +.width11_3cols,.grid11_3cols {width: 241px;} +.width11_4cols,.grid11_4cols {width: 177px;} +.input_width11 {width: 749px;} + +.width12, .grid12, .span-12 {width: 825px;} +.input_width12 {width: 819px;} + +/* Subdivided grid spaces */ +.emptycols_left1, .prepend-1 {padding-left: 70px;} +.emptycols_right1, .append-1 {padding-right: 70px;} +.emptycols_left2, .prepend-2 {padding-left: 140px;} +.emptycols_right2, .append-2 {padding-right: 140px;} +.emptycols_left3, .prepend-3 {padding-left: 210px;} +.emptycols_right3, .append-3 {padding-right: 210px;} +.emptycols_left4, .prepend-4 {padding-left: 280px;} +.emptycols_right4, .append-4 {padding-right: 280px;} +.emptycols_left5, .prepend-5 {padding-left: 350px;} +.emptycols_right5, .append-5 {padding-right: 350px;} +.emptycols_left6, .prepend-6 {padding-left: 420px;} +.emptycols_right6, .append-6 {padding-right: 420px;} +.emptycols_left7, .prepend-7 {padding-left: 490px;} +.emptycols_right7, .append-7 {padding-right: 490px;} +.emptycols_left8, .prepend-8 {padding-left: 560px;} +.emptycols_right8, .append-8 {padding-right: 560px;} +.emptycols_left9, .prepend-9 {padding-left: 630px;} +.emptycols_right9, .append-9 {padding-right: 630px;} +.emptycols_left10, .prepend-10 {padding-left: 700px;} +.emptycols_right10, .append-10 {padding-right: 700px;} +.emptycols_left11, .prepend-11 {padding-left: 770px;} +.emptycols_right11, .append-11 {padding-right: 770px;} +.pull-1 {margin-left: -70px;} +.push-1 {margin-right: -70px;margin-left: 18px;float: right;} +.pull-2 {margin-left: -140px;} +.push-2 {margin-right: -140px;margin-left: 18px;float: right;} +.pull-3 {margin-left: -210px;} +.push-3 {margin-right: -210px;margin-left: 18px;float: right;} +.pull-4 {margin-left: -280px;} +.push-4 {margin-right: -280px;margin-left: 18px;float: right;} \ No newline at end of file diff --git a/kngil/fonts/qa/NotoKR-Thin/specimen_files/specimen_stylesheet.css b/kngil/fonts/qa/NotoKR-Thin/specimen_files/specimen_stylesheet.css new file mode 100644 index 0000000..d4c8222 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/specimen_files/specimen_stylesheet.css @@ -0,0 +1,396 @@ +@import url('grid_12-825-55-15.css'); + +/* + CSS Reset by Eric Meyer - Released under Public Domain + http://meyerweb.com/eric/tools/css/reset/ +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, +caption, tbody, tfoot, thead, tr, th, td + {margin: 0;padding: 0;border: 0;outline: 0; + font-size: 100%;vertical-align: baseline; + background: transparent;} +body {line-height: 1;} +ol, ul {list-style: none;} +blockquote, q {quotes: none;} +blockquote:before, blockquote:after, +q:before, q:after {content: ''; content: none;} +:focus {outline: 0;} +ins {text-decoration: none;} +del {text-decoration: line-through;} +table {border-collapse: collapse;border-spacing: 0;} + + + + +body { + color: #000; + background-color: #dcdcdc; +} + +a { + text-decoration: none; + color: #1883ba; +} + +h1{ + font-size: 32px; + font-weight: normal; + font-style: normal; + margin-bottom: 18px; +} + +h2{ + font-size: 18px; +} + +#container { + width: 865px; + margin: 0px auto; +} + + +#header { + padding: 20px; + font-size: 36px; + background-color: #000; + color: #fff; +} + +#header span { + color: #666; +} +#main_content { + background-color: #fff; + padding: 60px 20px 20px; +} + + +#footer p { + margin: 0; + padding-top: 10px; + padding-bottom: 50px; + color: #333; + font: 10px Arial, sans-serif; +} + +.tabs { + width: 100%; + height: 31px; + background-color: #444; +} +.tabs li { + float: left; + margin: 0; + overflow: hidden; + background-color: #444; +} +.tabs li a { + display: block; + color: #fff; + text-decoration: none; + font: bold 11px/11px 'Arial'; + text-transform: uppercase; + padding: 10px 15px; + border-right: 1px solid #fff; +} + +.tabs li a:hover { + background-color: #00b3ff; + +} + +.tabs li.active a { + color: #000; + background-color: #fff; +} + + + +div.huge { + + font-size: 120px; + line-height: 1em; + padding: 0; + letter-spacing: -.02em; + overflow: hidden; +} +div.glyph_range { + font-size: 72px; + line-height: 1.1em; +} + +.size10{ font-size: 10px; } +.size11{ font-size: 11px; } +.size12{ font-size: 12px; } +.size13{ font-size: 13px; } +.size14{ font-size: 14px; } +.size16{ font-size: 16px; } +.size18{ font-size: 18px; } +.size20{ font-size: 20px; } +.size24{ font-size: 24px; } +.size30{ font-size: 30px; } +.size36{ font-size: 36px; } +.size48{ font-size: 48px; } +.size60{ font-size: 60px; } +.size72{ font-size: 72px; } +.size90{ font-size: 90px; } + + +.psample_row1 { height: 120px;} +.psample_row1 { height: 120px;} +.psample_row2 { height: 160px;} +.psample_row3 { height: 160px;} +.psample_row4 { height: 160px;} + +.psample { + overflow: hidden; + position: relative; +} +.psample p { + line-height: 1.3em; + display: block; + overflow: hidden; + margin: 0; +} + +.psample span { + margin-right: .5em; +} + +.white_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); + position: absolute; + bottom: 0; +} +.black_blend { + width: 100%; + height: 61px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); + position: absolute; + bottom: 0; +} +.fullreverse { + background: #000 !important; + color: #fff !important; + margin-left: -20px; + padding-left: 20px; + margin-right: -20px; + padding-right: 20px; + padding: 20px; + margin-bottom:0; +} + + +.sample_table td { + padding-top: 3px; + padding-bottom:5px; + padding-left: 5px; + vertical-align: middle; + line-height: 1.2em; +} + +.sample_table td:first-child { + background-color: #eee; + text-align: right; + padding-right: 5px; + padding-left: 0; + padding: 5px; + font: 11px/12px "Courier New", Courier, mono; +} + +code { + white-space: pre; + background-color: #eee; + display: block; + padding: 10px; + margin-bottom: 18px; + overflow: auto; +} + + +.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} + +.box { + padding: 18px; + margin-bottom: 18px; + background: #eee; +} + +.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} + +#bodycomparison { + position: relative; + overflow: hidden; + font-size: 72px; + height: 90px; + white-space: nowrap; +} + +#bodycomparison div{ + font-size: 72px; + line-height: 90px; + display: inline; + margin: 0 15px 0 0; + padding: 0; +} + +#bodycomparison div span{ + font: 10px Arial; + position: absolute; + left: 0; +} +#xheight { + float: none; + position: absolute; + color: #d9f3ff; + font-size: 72px; + line-height: 90px; +} + +.fontbody { + position: relative; +} +.arialbody{ + font-family: Arial; + position: relative; +} +.verdanabody{ + font-family: Verdana; + position: relative; +} +.georgiabody{ + font-family: Georgia; + position: relative; +} + +/* @group Layout page + */ + +#layout h1 { + font-size: 36px; + line-height: 42px; + font-weight: normal; + font-style: normal; +} + +#layout h2 { + font-size: 24px; + line-height: 23px; + font-weight: normal; + font-style: normal; +} + +#layout h3 { + font-size: 22px; + line-height: 1.4em; + margin-top: 1em; + font-weight: normal; + font-style: normal; +} + + +#layout p.byline { + font-size: 12px; + margin-top: 18px; + line-height: 12px; + margin-bottom: 0; +} +#layout p { + font-size: 14px; + line-height: 21px; + margin-bottom: .5em; +} + +#layout p.large{ + font-size: 18px; + line-height: 26px; +} + +#layout .sidebar p{ + font-size: 12px; + line-height: 1.4em; +} + +#layout p.caption { + font-size: 10px; + margin-top: -16px; + margin-bottom: 18px; +} + +/* @end */ + +/* @group Glyphs */ + +#glyph_chart div{ + background-color: #d9f3ff; + color: black; + float: left; + font-size: 36px; + height: 1.2em; + line-height: 1.2em; + margin-bottom: 1px; + margin-right: 1px; + text-align: center; + width: 1.2em; + position: relative; + padding: .6em .2em .2em; +} + +#glyph_chart div p { + position: absolute; + left: 0; + top: 0; + display: block; + text-align: center; + font: bold 9px Arial, sans-serif; + background-color: #3a768f; + width: 100%; + color: #fff; + padding: 2px 0; +} + + +#glyphs h1 { + font-family: Arial, sans-serif; +} +/* @end */ + +/* @group Installing */ + +#installing { + font: 13px Arial, sans-serif; +} + +#installing p, +#glyphs p{ + line-height: 1.2em; + margin-bottom: 18px; + font: 13px Arial, sans-serif; +} + + + +#installing h3{ + font-size: 15px; + margin-top: 18px; +} + +/* @end */ + +#rendering h1 { + font-family: Arial, sans-serif; +} +.render_table td { + font: 11px "Courier New", Courier, mono; + vertical-align: middle; +} + + diff --git a/kngil/fonts/qa/NotoKR-Thin/stylesheet.css b/kngil/fonts/qa/NotoKR-Thin/stylesheet.css new file mode 100644 index 0000000..9e60668 --- /dev/null +++ b/kngil/fonts/qa/NotoKR-Thin/stylesheet.css @@ -0,0 +1,16 @@ +/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */ + + + +@font-face { + font-family: 'notokr-thin'; + src: url('notokr-thin.eot'); + src: url('notokr-thin.eot?#iefix') format('embedded-opentype'), + url('notokr-thin.woff2') format('woff2'), + url('notokr-thin.woff') format('woff'), + url('notokr-thin.ttf') format('truetype'), + url('notokr-thin.svg#notokr-thin') format('svg'); + font-weight: normal; + font-style: normal; + +} \ No newline at end of file diff --git a/kngil/img/adm_home.svg b/kngil/img/adm_home.svg new file mode 100644 index 0000000..058e7e6 --- /dev/null +++ b/kngil/img/adm_home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/bg_close.png b/kngil/img/bg_close.png new file mode 100644 index 0000000..460ec4a Binary files /dev/null and b/kngil/img/bg_close.png differ diff --git a/kngil/img/bg_close.svg b/kngil/img/bg_close.svg new file mode 100644 index 0000000..b9593c9 --- /dev/null +++ b/kngil/img/bg_close.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/bg_faq_title.png b/kngil/img/bg_faq_title.png new file mode 100644 index 0000000..af4cc1e Binary files /dev/null and b/kngil/img/bg_faq_title.png differ diff --git a/kngil/img/bg_floating.png b/kngil/img/bg_floating.png new file mode 100644 index 0000000..80f2731 Binary files /dev/null and b/kngil/img/bg_floating.png differ diff --git a/kngil/img/bg_floating_menu.png b/kngil/img/bg_floating_menu.png new file mode 100644 index 0000000..511a32d Binary files /dev/null and b/kngil/img/bg_floating_menu.png differ diff --git a/kngil/img/bg_pop.png b/kngil/img/bg_pop.png new file mode 100644 index 0000000..cd78770 Binary files /dev/null and b/kngil/img/bg_pop.png differ diff --git a/kngil/img/ico/ico_add.svg b/kngil/img/ico/ico_add.svg new file mode 100644 index 0000000..4370fee --- /dev/null +++ b/kngil/img/ico/ico_add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_angle.svg b/kngil/img/ico/ico_angle.svg new file mode 100644 index 0000000..b42bb08 --- /dev/null +++ b/kngil/img/ico/ico_angle.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_arrow_back.svg b/kngil/img/ico/ico_arrow_back.svg new file mode 100644 index 0000000..1ea8776 --- /dev/null +++ b/kngil/img/ico/ico_arrow_back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_arrow_page_left.svg b/kngil/img/ico/ico_arrow_page_left.svg new file mode 100644 index 0000000..4e3f584 --- /dev/null +++ b/kngil/img/ico/ico_arrow_page_left.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_arrow_page_right.svg b/kngil/img/ico/ico_arrow_page_right.svg new file mode 100644 index 0000000..114eee3 --- /dev/null +++ b/kngil/img/ico/ico_arrow_page_right.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_arrow_r.svg b/kngil/img/ico/ico_arrow_r.svg new file mode 100644 index 0000000..f40383e --- /dev/null +++ b/kngil/img/ico/ico_arrow_r.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_building.svg b/kngil/img/ico/ico_building.svg new file mode 100644 index 0000000..7e07743 --- /dev/null +++ b/kngil/img/ico/ico_building.svg @@ -0,0 +1,10 @@ + diff --git a/kngil/img/ico/ico_chart_3d.svg b/kngil/img/ico/ico_chart_3d.svg new file mode 100644 index 0000000..649f79f --- /dev/null +++ b/kngil/img/ico/ico_chart_3d.svg @@ -0,0 +1,18 @@ + diff --git a/kngil/img/ico/ico_check.svg b/kngil/img/ico/ico_check.svg new file mode 100644 index 0000000..f229644 --- /dev/null +++ b/kngil/img/ico/ico_check.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_city.svg b/kngil/img/ico/ico_city.svg new file mode 100644 index 0000000..44c674e --- /dev/null +++ b/kngil/img/ico/ico_city.svg @@ -0,0 +1,29 @@ + diff --git a/kngil/img/ico/ico_close.svg b/kngil/img/ico/ico_close.svg new file mode 100644 index 0000000..1923e55 --- /dev/null +++ b/kngil/img/ico/ico_close.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_company.svg b/kngil/img/ico/ico_company.svg new file mode 100644 index 0000000..3248c1a --- /dev/null +++ b/kngil/img/ico/ico_company.svg @@ -0,0 +1,4 @@ + diff --git a/kngil/img/ico/ico_company_admin.svg b/kngil/img/ico/ico_company_admin.svg new file mode 100644 index 0000000..22cc393 --- /dev/null +++ b/kngil/img/ico/ico_company_admin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_eco.svg b/kngil/img/ico/ico_eco.svg new file mode 100644 index 0000000..3cc2faa --- /dev/null +++ b/kngil/img/ico/ico_eco.svg @@ -0,0 +1,9 @@ + diff --git a/kngil/img/ico/ico_floating_buy.svg b/kngil/img/ico/ico_floating_buy.svg new file mode 100644 index 0000000..9be513d --- /dev/null +++ b/kngil/img/ico/ico_floating_buy.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_floating_faq.svg b/kngil/img/ico/ico_floating_faq.svg new file mode 100644 index 0000000..58ac9f8 --- /dev/null +++ b/kngil/img/ico/ico_floating_faq.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_footer_close.svg b/kngil/img/ico/ico_footer_close.svg new file mode 100644 index 0000000..a4a30f4 --- /dev/null +++ b/kngil/img/ico/ico_footer_close.svg @@ -0,0 +1,4 @@ + diff --git a/kngil/img/ico/ico_id.svg b/kngil/img/ico/ico_id.svg new file mode 100644 index 0000000..b1fbf75 --- /dev/null +++ b/kngil/img/ico/ico_id.svg @@ -0,0 +1,7 @@ + diff --git a/kngil/img/ico/ico_land.svg b/kngil/img/ico/ico_land.svg new file mode 100644 index 0000000..ef69fd3 --- /dev/null +++ b/kngil/img/ico/ico_land.svg @@ -0,0 +1,15 @@ + diff --git a/kngil/img/ico/ico_location.svg b/kngil/img/ico/ico_location.svg new file mode 100644 index 0000000..ad1fdb1 --- /dev/null +++ b/kngil/img/ico/ico_location.svg @@ -0,0 +1,14 @@ + diff --git a/kngil/img/ico/ico_map_marker.svg b/kngil/img/ico/ico_map_marker.svg new file mode 100644 index 0000000..36caeee --- /dev/null +++ b/kngil/img/ico/ico_map_marker.svg @@ -0,0 +1,27 @@ + diff --git a/kngil/img/ico/ico_natural.svg b/kngil/img/ico/ico_natural.svg new file mode 100644 index 0000000..570250a --- /dev/null +++ b/kngil/img/ico/ico_natural.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_password.svg b/kngil/img/ico/ico_password.svg new file mode 100644 index 0000000..8d5f793 --- /dev/null +++ b/kngil/img/ico/ico_password.svg @@ -0,0 +1,4 @@ + diff --git a/kngil/img/ico/ico_people_del.svg b/kngil/img/ico/ico_people_del.svg new file mode 100644 index 0000000..1bb4915 --- /dev/null +++ b/kngil/img/ico/ico_people_del.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_phone.svg b/kngil/img/ico/ico_phone.svg new file mode 100644 index 0000000..fca9137 --- /dev/null +++ b/kngil/img/ico/ico_phone.svg @@ -0,0 +1,12 @@ + diff --git a/kngil/img/ico/ico_population.svg b/kngil/img/ico/ico_population.svg new file mode 100644 index 0000000..ae8dcce --- /dev/null +++ b/kngil/img/ico/ico_population.svg @@ -0,0 +1,10 @@ + diff --git a/kngil/img/ico/ico_pw.svg b/kngil/img/ico/ico_pw.svg new file mode 100644 index 0000000..28ed035 --- /dev/null +++ b/kngil/img/ico/ico_pw.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_remove.svg b/kngil/img/ico/ico_remove.svg new file mode 100644 index 0000000..ed87e30 --- /dev/null +++ b/kngil/img/ico/ico_remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_search.svg b/kngil/img/ico/ico_search.svg new file mode 100644 index 0000000..38ffc57 --- /dev/null +++ b/kngil/img/ico/ico_search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_sign_out.svg b/kngil/img/ico/ico_sign_out.svg new file mode 100644 index 0000000..8552f9b --- /dev/null +++ b/kngil/img/ico/ico_sign_out.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_social.svg b/kngil/img/ico/ico_social.svg new file mode 100644 index 0000000..555e79f --- /dev/null +++ b/kngil/img/ico/ico_social.svg @@ -0,0 +1,9 @@ + diff --git a/kngil/img/ico/ico_society.svg b/kngil/img/ico/ico_society.svg new file mode 100644 index 0000000..383b66f --- /dev/null +++ b/kngil/img/ico/ico_society.svg @@ -0,0 +1,10 @@ + diff --git a/kngil/img/ico/ico_super_admin.svg b/kngil/img/ico/ico_super_admin.svg new file mode 100644 index 0000000..062e95d --- /dev/null +++ b/kngil/img/ico/ico_super_admin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/kngil/img/ico/ico_tel.svg b/kngil/img/ico/ico_tel.svg new file mode 100644 index 0000000..d761dca --- /dev/null +++ b/kngil/img/ico/ico_tel.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_usage.svg b/kngil/img/ico/ico_usage.svg new file mode 100644 index 0000000..0cee83b --- /dev/null +++ b/kngil/img/ico/ico_usage.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_user.svg b/kngil/img/ico/ico_user.svg new file mode 100644 index 0000000..de6e0bb --- /dev/null +++ b/kngil/img/ico/ico_user.svg @@ -0,0 +1,7 @@ + diff --git a/kngil/img/ico/ico_value_data.svg b/kngil/img/ico/ico_value_data.svg new file mode 100644 index 0000000..20c4572 --- /dev/null +++ b/kngil/img/ico/ico_value_data.svg @@ -0,0 +1,18 @@ + diff --git a/kngil/img/ico/ico_value_filter.svg b/kngil/img/ico/ico_value_filter.svg new file mode 100644 index 0000000..811045d --- /dev/null +++ b/kngil/img/ico/ico_value_filter.svg @@ -0,0 +1,3 @@ + diff --git a/kngil/img/ico/ico_value_gis.svg b/kngil/img/ico/ico_value_gis.svg new file mode 100644 index 0000000..3fc8205 --- /dev/null +++ b/kngil/img/ico/ico_value_gis.svg @@ -0,0 +1,12 @@ + diff --git a/kngil/img/ico/ico_value_map.svg b/kngil/img/ico/ico_value_map.svg new file mode 100644 index 0000000..79d1a8b --- /dev/null +++ b/kngil/img/ico/ico_value_map.svg @@ -0,0 +1,12 @@ + diff --git a/kngil/img/ico/ico_weather.svg b/kngil/img/ico/ico_weather.svg new file mode 100644 index 0000000..4a84a9f --- /dev/null +++ b/kngil/img/ico/ico_weather.svg @@ -0,0 +1,9 @@ + diff --git a/kngil/img/loco_kngil_c.svg b/kngil/img/loco_kngil_c.svg new file mode 100644 index 0000000..26e9e70 --- /dev/null +++ b/kngil/img/loco_kngil_c.svg @@ -0,0 +1,17 @@ + diff --git a/kngil/img/logo_baron.svg b/kngil/img/logo_baron.svg new file mode 100644 index 0000000..40d4411 --- /dev/null +++ b/kngil/img/logo_baron.svg @@ -0,0 +1,21 @@ + diff --git a/kngil/img/logo_kngil.svg b/kngil/img/logo_kngil.svg new file mode 100644 index 0000000..6271381 --- /dev/null +++ b/kngil/img/logo_kngil.svg @@ -0,0 +1,14 @@ + diff --git a/kngil/img/provided/bg_provided_natural.png b/kngil/img/provided/bg_provided_natural.png new file mode 100644 index 0000000..9b254b6 Binary files /dev/null and b/kngil/img/provided/bg_provided_natural.png differ diff --git a/kngil/img/provided/bg_provided_social.png b/kngil/img/provided/bg_provided_social.png new file mode 100644 index 0000000..f47b6ca Binary files /dev/null and b/kngil/img/provided/bg_provided_social.png differ diff --git a/kngil/img/provided/bg_provided_title.jpg b/kngil/img/provided/bg_provided_title.jpg new file mode 100644 index 0000000..8e6196a Binary files /dev/null and b/kngil/img/provided/bg_provided_title.jpg differ diff --git a/kngil/img/provided/img_provided_natural_01.png b/kngil/img/provided/img_provided_natural_01.png new file mode 100644 index 0000000..6d8241e Binary files /dev/null and b/kngil/img/provided/img_provided_natural_01.png differ diff --git a/kngil/img/provided/img_provided_natural_02.png b/kngil/img/provided/img_provided_natural_02.png new file mode 100644 index 0000000..bf0355b Binary files /dev/null and b/kngil/img/provided/img_provided_natural_02.png differ diff --git a/kngil/img/provided/img_provided_natural_03.png b/kngil/img/provided/img_provided_natural_03.png new file mode 100644 index 0000000..c178c28 Binary files /dev/null and b/kngil/img/provided/img_provided_natural_03.png differ diff --git a/kngil/img/provided/img_provided_natural_04.png b/kngil/img/provided/img_provided_natural_04.png new file mode 100644 index 0000000..b665c15 Binary files /dev/null and b/kngil/img/provided/img_provided_natural_04.png differ diff --git a/kngil/img/provided/img_provided_social_01.png b/kngil/img/provided/img_provided_social_01.png new file mode 100644 index 0000000..57f555c Binary files /dev/null and b/kngil/img/provided/img_provided_social_01.png differ diff --git a/kngil/img/provided/img_provided_social_02.png b/kngil/img/provided/img_provided_social_02.png new file mode 100644 index 0000000..650313a Binary files /dev/null and b/kngil/img/provided/img_provided_social_02.png differ diff --git a/kngil/img/provided/img_provided_social_03.png b/kngil/img/provided/img_provided_social_03.png new file mode 100644 index 0000000..d133525 Binary files /dev/null and b/kngil/img/provided/img_provided_social_03.png differ diff --git a/kngil/img/provided/img_provided_social_04.png b/kngil/img/provided/img_provided_social_04.png new file mode 100644 index 0000000..1f28675 Binary files /dev/null and b/kngil/img/provided/img_provided_social_04.png differ diff --git a/kngil/img/provided/img_provided_spatial.png b/kngil/img/provided/img_provided_spatial.png new file mode 100644 index 0000000..8a6cd27 Binary files /dev/null and b/kngil/img/provided/img_provided_spatial.png differ diff --git a/kngil/img/provided/img_provided_stat.png b/kngil/img/provided/img_provided_stat.png new file mode 100644 index 0000000..14d64bd Binary files /dev/null and b/kngil/img/provided/img_provided_stat.png differ diff --git a/kngil/img/symbol.svg b/kngil/img/symbol.svg new file mode 100644 index 0000000..dac76b3 --- /dev/null +++ b/kngil/img/symbol.svg @@ -0,0 +1,199 @@ + diff --git a/kngil/img/tri_img.svg b/kngil/img/tri_img.svg new file mode 100644 index 0000000..1913b26 --- /dev/null +++ b/kngil/img/tri_img.svg @@ -0,0 +1,16 @@ + diff --git a/kngil/img/value/bg_value_custom.jpg b/kngil/img/value/bg_value_custom.jpg new file mode 100644 index 0000000..537b584 Binary files /dev/null and b/kngil/img/value/bg_value_custom.jpg differ diff --git a/kngil/img/value/bg_value_data.png b/kngil/img/value/bg_value_data.png new file mode 100644 index 0000000..5ff7541 Binary files /dev/null and b/kngil/img/value/bg_value_data.png differ diff --git a/kngil/img/value/bg_value_feature.jpg b/kngil/img/value/bg_value_feature.jpg new file mode 100644 index 0000000..564e266 Binary files /dev/null and b/kngil/img/value/bg_value_feature.jpg differ diff --git a/kngil/img/value/bg_value_gis.jpg b/kngil/img/value/bg_value_gis.jpg new file mode 100644 index 0000000..25f1024 Binary files /dev/null and b/kngil/img/value/bg_value_gis.jpg differ diff --git a/kngil/img/value/bg_value_map.jpg b/kngil/img/value/bg_value_map.jpg new file mode 100644 index 0000000..f3af60e Binary files /dev/null and b/kngil/img/value/bg_value_map.jpg differ diff --git a/kngil/img/value/img_document.png b/kngil/img/value/img_document.png new file mode 100644 index 0000000..9a4fc52 Binary files /dev/null and b/kngil/img/value/img_document.png differ diff --git a/kngil/img/video/main_1.mp4 b/kngil/img/video/main_1.mp4 new file mode 100644 index 0000000..1cc9c0e Binary files /dev/null and b/kngil/img/video/main_1.mp4 differ diff --git a/kngil/img/video/main_2.mp4 b/kngil/img/video/main_2.mp4 new file mode 100644 index 0000000..303bfbf Binary files /dev/null and b/kngil/img/video/main_2.mp4 differ diff --git a/kngil/img/video/main_3.mp4 b/kngil/img/video/main_3.mp4 new file mode 100644 index 0000000..6bf2e90 Binary files /dev/null and b/kngil/img/video/main_3.mp4 differ diff --git a/kngil/img/video/main_4.mp4 b/kngil/img/video/main_4.mp4 new file mode 100644 index 0000000..e758964 Binary files /dev/null and b/kngil/img/video/main_4.mp4 differ diff --git a/kngil/img/video/main_5.mp4 b/kngil/img/video/main_5.mp4 new file mode 100644 index 0000000..0ad95cd Binary files /dev/null and b/kngil/img/video/main_5.mp4 differ diff --git a/kngil/js/adm.js b/kngil/js/adm.js new file mode 100644 index 0000000..e340c80 --- /dev/null +++ b/kngil/js/adm.js @@ -0,0 +1,406 @@ +import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +import { setUserGridMode, loadData } from './adm_comp.js' + +export function destroyGrid(name) { + if (w2ui[name]) { + w2ui[name].destroy() + } +} + +/* ---------------------------------------- + Super Admin Grid 생성 (상단) +---------------------------------------- */ +export function createSuperAdminGrid(boxId) { + + destroyGrid('superGrid') +userGrid + const grid = new w2grid({ + name: 'superGrid', + box: boxId, + + show: { + // toolbar: true, + footer: true, + // toolbarReload: true, + // toolbarColumns: true, + // toolbarSearch: true + }, + + // multiSearch: true, + + // searches: [ + // { field: 'member_id', text: 'ID', type: 'text' }, + // { field: 'user_nm', text: '회원명', type: 'text' }, + // { field: 'co_nm', text: '회사명', type: 'text' }, + // { + // field: 'stat_bc', + // text: '회원상태', + // type: 'list', + // options: { + // items: [ + // { id: 'Y', text: '사용' }, + // { id: 'N', text: '미사용' } + // ] + // } + // } + // ], + + columns: [ + { field: 'recid', text: '#', size: '50px', attr: 'align=center', editable: false, resizable: true, sortable: true }, + { field: 'member_id', text: 'ID', size: '90px', editable: false, resizable: true, sortable: true }, + { field: 'user_nm', text: '회원명', size: '90px', editable: false, resizable: true, sortable: true }, + { field: 'tel_no', text: '연락처', size: '120px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'email', text: 'E-mail', size: '180px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'co_nm', text: '회사명', size: '120px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'bs_no', + text: '사업자번호', + size: '120px', + editable: { type: 'text' }, + resizable: true, + sortable: true + }, + { field: 'join_dt', text: '가입일', size: '100px', editable: false, resizable: true, sortable: true }, + { field: 'user_y', text: '사용자수', size: '80px', attr: 'align=right', editable: false, resizable: true, sortable: true }, + { field: 'buy_area', text: '제공면적', size: '100px', attr: 'align=right', editable: false, resizable: true, sortable: true }, + { field: 'use_area', text: '사용면적', size: '100px', attr: 'align=right', editable: false, resizable: true, sortable: true }, + { field: 'rem_area', text: '잔여면적', size: '100px', attr: 'align=right', editable: false, resizable: true, sortable: true }, + { + field: 'stat_bc', + text: '회원상태', + size: '80px', + resizable: true, + sortable: true, + editable: false, + render(record) { + switch (record.stat_bc) { + case 'SA100100': + return '사용중' + case 'SA100200': + return '탈퇴' + default: + return record.stat_bc || '' + } + } + }, + { field: 'memo', text: '메모', size: '100px', attr: 'align=right', editable: {type : 'text'}, resizable: true, sortable: true }, + + ], + + records: [], + + /* -------------------------------- + 상단 회사 클릭 → 하단 사용자 Grid 갱신 + -------------------------------- */ + onClick(event) { + if (!event.detail.recid) return + + const record = this.get(event.detail.recid) + if (!record) return + + // 하단 영역 표시 + document.getElementById('detailCard').style.display = 'block' + + // 하단 사용자 로드 + // fetch(`/kngil/bbs/adm.php?action=user_list&member_id=${record.member_id}`) + // .then(res => res.json()) + // .then(d => { + // if (d.status !== 'success') { + // w2alert('사용자 조회 실패') + // return + // } + + // const g = w2ui.detailGrid + // g.clear() + // g.add(d.records || []) + // }) + import('./adm_comp.js').then(m => { + m.loadUsersByMember(record.member_id) + }) + }, + onSelect(event) { + event.onComplete = () => { + const btn = document.getElementById('btnServiceRegister') + if (btn) btn.disabled = false + } + }, + + onUnselect(event) { + event.onComplete = () => { + const btn = document.getElementById('btnServiceRegister') + if (btn && !this.getSelection().length) { + btn.disabled = true + } + } + }, + // onEditField(event) { + // if (event.field !== 'bs_no') return + + // event.onComplete = () => { + // const input = event.input + // if (!input) return + + // input.addEventListener('input', () => { + // let v = input.value.replace(/\D/g, '').slice(0, 10) + + // if (v.length >= 6) { + // v = `${v.slice(0, 3)}-${v.slice(3, 5)}-${v.slice(5)}` + // } else if (v.length >= 4) { + // v = `${v.slice(0, 3)}-${v.slice(3)}` + // } + + // input.value = v + // }) + // } + // }, + onChange(event) { + event.onComplete = function (ev) { + let rec = grid.get(ev.recid); + if (!rec) return; + + let field = grid.columns[ev.column].field; + let val = ev.value_new; + + /* =============================== + 🔴 사업자번호(bs_no) 전용 처리 + =============================== */ + if (field === 'bs_no') { + + // 숫자만 추출 + let digits = String(val || '').replace(/\D/g, ''); + + // 🔥 입력 중에는 아무 것도 안 건드린다 + if (digits.length < 10) { + return; + } + + // 10자리 초과 방지 + digits = digits.slice(0, 10); + + // 최종 포맷 + let formatted = `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5)}`; + + // 🔥 여기서만 set + grid.set(ev.recid, { bs_no: formatted }); + grid.refreshRow(ev.recid); + return; + } + + /* =============================== + 🔵 기존 공통 로직 + =============================== */ + + if (typeof val === "object" && val !== null) { + val = val.text; + } + + grid.set(ev.recid, { [field]: val }); + + if (field === 'quantity' || field === 'unit_price' || field === 'discount') { + let qty = parseInt(rec.quantity) || 0; + let unit = parseInt(rec.unit_price) || 0; + let dc = parseInt(rec.discount) || 0; + let total = Math.max(0, qty * unit - dc); + + grid.set(ev.recid, { total_amount: total }); + } + + grid.refresh(); + }; + } + + + + + // onDblClick(event) { + // if (!event.detail.recid) return + // const record = this.get(event.detail.recid) + // if (!record) return + + // import('./adm_service.js').then(m => { + // m.openServiceRegisterPopup({ + // memberId: record.member_id, + // memberName: record.user_nm, + // company: record.co_nm, + // bizNo: record.bs_no + // }) + // }) + // } + }) + + loadCompanies() + return grid +} + +//사업자 번호 포맷 +function formatBizNo(value) { + const digits = String(value || '').replace(/\D/g, ''); + if (digits.length !== 10) return null; + return `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5)}`; +} + +/* ---------------------------------------- + 상단 회사 목록 로드 +---------------------------------------- */ +function loadCompanies() { + fetch('/kngil/bbs/adm.php') + .then(res => res.json()) + .then(json => { + if (!json.records) return + + w2ui.superGrid.clear() + w2ui.superGrid.add(json.records) + }) + .catch(err => { + console.error('회사 목록 로드 실패:', err) + }) +} + +// ========================= +// 서비스등록 버튼 +// ========================= +document.getElementById('btnServiceRegister') + .addEventListener('click', () => { + + const g = w2ui.superGrid + if (!g) return + + const sel = g.getSelection() + if (!sel.length) { + w2alert('서비스를 등록할 회원을 선택하세요.') + return + } + + const r = g.get(sel[0]) + + // 신규 행 방지 + if (!r.member_id || String(r.member_id).startsWith('new_')) { + w2alert('저장된 회원만 서비스 등록이 가능합니다.') + return + } + + import('/kngil/js/adm_service.js').then(m => { + m.openServiceRegisterPopup({ + memberId: r.member_id, + memberName: r.user_nm, + company: r.co_nm, + bizNo: r.bs_no + }) + }) + }) + +//저장 +let isSaveBound = false + +export function bindSaveButton() { + if (isSaveBound) return + isSaveBound = true + + const btn = document.getElementById('btnSave') + if (!btn) return + + btn.addEventListener('click', () => { + const g = w2ui.superGrid + if (!g) return + + document.activeElement?.blur() + g.finishEditing?.() + + const changes = g.getChanges() + + changes.forEach(ch => { + // bs_no가 변경 대상이면 + if ('bs_no' in ch) { + const formatted = formatBizNo(ch.bs_no); + + if (!formatted) { + w2alert('사업자번호는 숫자 10자리여야 합니다.\n예: 123-45-67890'); + throw new Error('invalid bs_no'); + } + + // 🔥 changes 객체를 직접 수정 + ch.bs_no = formatted; + } + }); + + if (!changes.length) { + w2alert('변경된 내용이 없습니다.') + return + } + + // 🔥 recid 기준으로 원본 record + 변경값 병합 + const updates = changes.map(c => { + const r = g.get(c.recid) + return { ...r, ...c } + }) + + // 🔥 member_id 필수 체크 + if (!updates[0]?.member_id) { + w2alert('member_id가 없습니다.') + return + } + + fetch('/kngil/bbs/adm.php?action=save', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + member_id: updates[0].member_id, // ✅ 핵심 + updates + }) + }) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error(json.message) + } + + updates.forEach(u => { + const r = g.get(u.recid); + if (r && u.bs_no) { + r.bs_no = u.bs_no; // 하이픈 포함 값 + g.refreshRow(u.recid); + } + }); + + // g.mergeChanges() + // changes 강제 제거 + g.changes = []; + + // 수정 상태 플래그 제거 + g.records.forEach(r => { + if (r.w2ui) delete r.w2ui.changes; + }); + + // 화면 다시 그리기 + g.refresh(); + w2alert('저장되었습니다.') + }) + .catch(err => { + console.error(err) + w2alert(err.message || '저장 실패') + }) + }) +} + + +export function createDetailGrid(boxId) { + + if (w2ui.detailGrid) w2ui.detailGrid.destroy() + + new w2grid({ + name: 'detailGrid', + box: boxId, + show: { + footer: true + }, + columns: [ + { field: 'recid', text: '#', size: '50px' }, + { field: 'user_id', text: 'ID', size: '120px' }, + { field: 'user_nm', text: '이름', size: '120px' }, + { field: 'dept_nm', text: '부서', size: '120px' }, + { field: 'email', text: 'E-mail', size: '200px' }, + { field: 'use_yn', text: '사용', size: '80px' } + ], + records: [] + }) +} diff --git a/kngil/js/adm_common.js b/kngil/js/adm_common.js new file mode 100644 index 0000000..d1eec14 --- /dev/null +++ b/kngil/js/adm_common.js @@ -0,0 +1,163 @@ +import { w2grid, w2ui, w2popup, w2alert , w2confirm} from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +export function bindProductPopupEvents() { + + const g = w2ui.productGrid + //행 추가 + document.getElementById('prodAdd').onclick = () => { + g.add({ + recid: g.records.length + 1, + name: '', + volume: 0, + price: 0, + use_yn: 'Y' + }) + } + //행 삭제 + document.getElementById('prodRemove').onclick = () => { + const sel = g.getSelection() + if (!sel.length) { + w2alert('삭제할 항목을 선택하세요.') + return + } + g.remove(...sel) + } + //저장 + document.getElementById('prodSave').onclick = () => { + console.log('상품 저장', g.records) + w2alert('저장 처리 예정') + } +} + +// [추가] 공통 함수 +export function commonAdd(gridName, defaultData = {}) { + const grid = w2ui[gridName]; + if (!grid) return; + + // 중복되지 않는 recid 생성 (신규 행 식별용) + const newRecid = 'new_' + Date.now(); + + grid.add({ + recid: newRecid, + is_new: true, // ★ 핵심: 이 플래그가 있어야 commonSave에서 검색됨 + ...defaultData // 아래 2번 단계에서 전달받은 초기값들이 여기에 들어감 + }); + + grid.scrollIntoView(newRecid); +} + +// [행 삭제] 공통 함수 (체크박스 선택 기준) +export function commonRemove(gridName) { + // 인자가 문자열이 아닌 객체로 들어오는지 확인용 + if (typeof gridName !== 'string') { + console.error("그리드 이름은 반드시 문자열이어야 합니다. 전달된 값:", gridName); + return; + } + + const grid = w2ui[gridName]; + if (!grid) { + console.error(`그리드 '${gridName}'을 찾을 수 없습니다.`, Object.keys(w2ui)); + return; + } + + const sel = grid.getSelection(); + if (sel.length === 0) { + w2alert('삭제할 항목을 선택하세요.'); + return; + } + + w2confirm(`${sel.length}건을 삭제하시겠습니까?`).yes(() => { + grid.remove(...sel); + }); +} + + +// /js/adm_common.js +export async function commonRemoveWithParams(gridName, deleteUrl) { + const grid = w2ui[gridName]; + + // 1. 그리드 존재 확인 (문자열로 잘 들어왔는지 체크) + if (!grid) { + console.error(`[삭제실패] ${gridName} 그리드를 찾을 수 없습니다.`, Object.keys(w2ui)); + return; + } + + const sel = grid.getSelection(); + if (sel.length === 0) { + w2alert('삭제할 항목을 선택하세요.'); + return; + } + + + + w2confirm(`${sel.length}건을 삭제하시겠습니까?`).yes(async () => { + try { + grid.lock('삭제 중...', true); + + // 2. 프로시저에 필요한 데이터(member_id, sq_no) 추출 + const selectedRows = sel.map(id => grid.get(id)); + + const response = await fetch(deleteUrl, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ items: selectedRows }) // 통째로 전달 + }); + + const responseText = await response.text(); // JSON 변환 전에 텍스트로 먼저 받음 + console.log("서버 실제 응답 원문:", responseText); // 여기서 HTML 에러 내용 확인 가능 + + const result = await response.json(); + if (result.status === 'success') { + grid.remove(...sel); + w2alert('성공적으로 삭제되었습니다.'); + } else { + throw new Error(result.message); + } + } catch (e) { + w2alert('삭제 오류: ' + e.message); + console.error("서버 응답이 JSON이 아닙니다:", responseText); + w2alert("서버 오류가 발생했습니다. 콘솔을 확인하세요."); + } finally { + grid.unlock(); + } + }); +} + + + +// [수정 및 저장] 공통 함수 +export async function commonSave(gridName, saveUrl) { + const grid = w2ui[gridName]; + if (!grid) { + console.error(`[저장 실패] '${gridName}' 그리드를 찾을 수 없습니다.`); + return; + } + + grid.save(); // 에디터에서 입력 중인 값 확정 + + // 변경된 내용이 있는지 확인 + if (grid.getChanges().length === 0) { + w2alert('변경사항이 없습니다.'); + return; + } + + try { + grid.lock('저장 중...', true); + const response = await fetch(saveUrl, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ items: grid.records }) // 전체 데이터를 보낼지 changes만 보낼지 선택 + }); + + const result = await response.json(); + if (result.status === 'success') { + w2alert('저장되었습니다.'); + grid.mergeChanges(); // 그리드의 변경 표시(빨간색) 제거 + } else { + throw new Error(result.message); + } + } catch (e) { + w2alert('저장 오류: ' + e.message); + } finally { + grid.unlock(); + } +} \ No newline at end of file diff --git a/kngil/js/adm_comp copy.js b/kngil/js/adm_comp copy.js new file mode 100644 index 0000000..b4e9589 --- /dev/null +++ b/kngil/js/adm_comp copy.js @@ -0,0 +1,506 @@ +import { w2grid, w2ui, w2popup, w2alert, w2confirm } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ +function destroyGrid(name) { + if (w2ui[name]) { + w2ui[name].destroy() + } +} + +function loadBaseCode(mainCd) { + return fetch(`/kngil/bbs/adm_comp.php?action=base_code&main_cd=${mainCd}`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error(json.message || '공통코드 로딩 실패') + } + return json.items + }) +} + +/* ------------------------------------------------- + 기업 관리자 페이지 Grid +------------------------------------------------- */ +export async function createUserGrid(boxId, options = {}) { + // 🔥 DB에서 권한 코드 로딩 + const authItems = await loadBaseCode('BS100') + const { loadSummary = true, memberId = null } = options + + destroyGrid('userGrid') + + const grid = new w2grid({ + name: boxId === '#detailGrid' ? 'detailGrid' : 'userGrid', + box: boxId, + + show: { + footer: true, + selectColumn: true, + }, + + columns: [ + { field: 'recid', text: '#', size: '50px', attr: 'align=center', editable: false, resizable: true, sortable: true }, + { field: 'user_id', text: 'ID', size: '90px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'user_pw', + text: 'PW', + size: '90px', + resizable: true, + sortable: false, + + editable: { + type: 'password' // ✅ 입력 시 ●●●● + }, + + render() { + return '********' // ✅ 항상 마스킹 + } + }, + { field: 'user_nm', text: '이름', size: '90px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'tel_no', text: '연락처', size: '120px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'email', text: 'E-mail', size: '180px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'dept_nm', text: '부서', size: '120px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'use_area', + text: '사용량(㎡)', + size: '120px', + attr: 'align=right', + editable: false, + resizable: true, + sortable: true, + + render(record) { + const v = Number(record.use_area) || 0 + return v.toLocaleString() // ✅ 1,000단위 콤마 + } + }, + { field: 'reg_date', text: '등록일', size: '100px', editable: false, resizable: true, sortable: true }, + { + field: 'use_yn', + text: '사용', + size: '80px', + attr: 'align=center', + resizable: true, + sortable: true, + + editable: { + type: 'list', + items: [ + { id: 'Y', text: 'Y' }, + { id: 'N', text: 'N' } + ] + }, + + render(record) { + return record.use_yn === 'Y' ? 'Y' : 'N' + } + }, + /* ✅ 권한 콤보 (DB 연동) */ + { + field: 'auth_bc', + text: '권한', + size: '120px', + editable: { + type: 'list', + items: authItems + }, + render(record) { + const item = authItems.find(i => i.id === record.auth_bc) + return item ? item.text : record.auth_bc + } + }, + { field: 'rmks', text: '비고', size: '120px', editable: { type: 'text' }, resizable: true, sortable: true } + ], + + onEditField(event) { + + const pwColIndex = this.getColumn('user_pw').index + + // 🔥 PW 컬럼일 때만 처리 + if (event.column !== pwColIndex) return + + event.onComplete = function () { + + // 🔥 현재 편집 세션의 input만 정확히 집기 + const box = event.box + if (!box) return + + const input = box.querySelector('input[type="password"]') + if (!input) return + + // PW만 초기화 + input.value = '' + input.placeholder = '변경 시에만 입력' + } + }, + + records: [], + }) + + loadData({ + loadSummary, + memberId + }) +} + +function loadUsers() { + fetch('/kngil/bbs/adm_comp.php') + .then(res => res.text()) // 🔥 먼저 text로 확인 + .then(text => { + try { + const json = JSON.parse(text) + w2ui.userGrid.clear() + w2ui.userGrid.add(json.records) + } catch (e) { + console.error('JSON 파싱 실패:', text) + } + }) +} + +export function loadUsersByMember(member_id) { + + if (!member_id) return + + // 🔥 실제 존재하는 grid 찾기 + const g = w2ui.detailGrid || w2ui.userGrid + if (!g) { + console.error('사용자 grid가 없습니다') + return + } + + fetch('/kngil/bbs/adm_comp.php') + .then(res => res.json()) + .then(json => { + g.clear() + g.add(json.records || []) + }) + .catch(err => { + console.error('사용자 로드 실패', err) + }) +} + +export function setUserGridMode(mode = 'view') { + const g = w2ui.userGrid + if (!g) return + + if (mode === 'view') { + g.show.toolbar = false + g.show.selectColumn = false + g.show.toolbarSave = false + } else { + g.show.toolbar = true + g.show.selectColumn = true + g.show.toolbarSave = true + } + + g.refresh() +} + +export function loadData({ loadSummary = true } = {}) { + + fetch('/kngil/bbs/adm_comp.php') + .then(res => res.json()) + .then(async d => { + + if (d.status !== 'success') { + w2alert('데이터 로딩 실패') + return + } + + const records = d.records || [] + const memberId = d.member_id // ⭐ 여기서 확정 + + if (loadSummary && memberId) { + const totalArea = await loadTotalArea(memberId) + + renderSummaryFromRecords({ + memberId, + records, + totalArea + }) + } + + const gridName = w2ui.detailGrid ? 'detailGrid' : 'userGrid' + w2ui[gridName].clear() + w2ui[gridName].add(records) + }) + .catch(err => { + console.error(err) + w2alert('서버 통신 오류') + }) +} + +function renderSummaryFromRecords({ memberId, records, totalArea }) { + + if (!records.length) return + + const first = records[0] + + const issuedCnt = Number(first.users_tot) || 0 + const usedCnt = Number(first.users_y) || 0 + const term = first.term || '' + + // 사용 중 면적 합계 + let usedArea = 0 + records.forEach(r => { + if (r.use_yn === 'Y') { + usedArea += Number(r.use_area || 0) + } + }) + + const percent = totalArea > 0 + ? Math.floor((usedArea / totalArea) * 100) + : 0 + + /* -------- 화면 바인딩 -------- */ + document.getElementById('memberId').textContent = memberId + document.getElementById('planName').textContent = 'Silver' + document.getElementById('dateRange').textContent = term + + document.getElementById('issuedCnt').textContent = issuedCnt + document.getElementById('usedCnt').textContent = usedCnt + + document.getElementById('usedArea').textContent = + usedArea.toLocaleString() + '㎡' + + document.getElementById('totalArea').textContent = + totalArea.toLocaleString() + '㎡' + + document.getElementById('usedBar').style.width = percent + '%' + document.getElementById('usedBar').textContent = percent + '%' + document.getElementById('remainBar').style.width = + (100 - percent) + '%' +} + + + +// =============================== +// 저장 버튼 +// =============================== +document.getElementById('btnSave_comp')?.addEventListener('click', () => { + + // 현재 사용 중인 grid + const g = w2ui.detailGrid || w2ui.userGrid + if (!g) return + + const changes = g.getChanges() + + if (!changes.length) { + w2alert('변경된 내용이 없습니다.') + return + } + + const inserts = [] + const updates = [] + + changes.forEach(c => { + const rec = g.get(c.recid) + if (!rec) return + + // 🔥 핵심: 원본 rec + 변경값 c 병합 + const merged = { ...rec, ...c } + + if (rec.__isNew) { + // INSERT → 전체 row 필요 + inserts.push(merged) + } else { + // UPDATE → PK + 변경 컬럼 + updates.push({ + member_id : merged.member_id, + user_id : merged.user_id, + + user_nm : merged.user_nm, + dept_nm : merged.dept_nm, + tel_no : merged.tel_no, + email : merged.email, + use_yn : merged.use_yn, + auth_bc : merged.auth_bc, + rmks : (merged.memo !== undefined ? merged.memo : '') + }) + } + }) + + console.log('INSERTS', inserts) + console.log('UPDATES', updates) + + fetch('/kngil/bbs/adm_comp.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'save', + member_id: g.records[0]?.member_id, + inserts, + updates + }) + }) + .then(res => res.text()) + .then(text => { + try { + const json = JSON.parse(text) + if (json.status === 'success') { + w2alert('저장 완료') + loadUsersByMember(g.records[0].member_id) + } else { + w2alert(json.message || '저장 실패') + } + } catch (e) { + console.error(text) + w2alert('서버 응답 오류 (JSON 아님)') + } + }) +}) + + +//추가(insert) +document.getElementById('btnAdd')?.addEventListener('click', () => { + + const g = w2ui.userGrid || w2ui.detailGrid + if (!g) return + + // 신규 row용 recid (음수로 충돌 방지) + const newRecid = -Date.now() + + g.add({ + recid: newRecid, + __isNew: true, // ⭐ 신규 플래그 + user_id: '', + user_pw: '', + user_nm: '', + tel_no: '', + email: '', + dept_nm: '', + use_area: 0, + use_yn: 'Y', + auth_bc: 'BS100400', + memo: '' + }, true) + + g.select(newRecid) + g.scrollIntoView(newRecid) +}) + +//삭제 +document.getElementById('btnDelete')?.addEventListener('click', () => { + + const g = w2ui.detailGrid || w2ui.userGrid + if (!g) return + + const sel = g.getSelection() + + if (!sel.length) { + w2alert('삭제할 사용자를 선택하세요.') + return + } + + // 선택된 user_id 수집 + const ids = sel + .map(recid => { + const r = g.get(recid) + return r?.user_id + }) + .filter(Boolean) + + if (!ids.length) { + w2alert('삭제 가능한 항목이 없습니다.') + return + } + + w2confirm(`선택한 ${ids.length}명의 사용자를 삭제하시겠습니까?`) + .yes(() => { + + fetch('/kngil/bbs/adm_comp.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'delete', + member_id: g.records[0]?.member_id, + ids + }) + }) + .then(res => res.text()) + .then(text => { + try { + const json = JSON.parse(text) + if (json.status === 'success') { + w2alert('삭제 완료') + loadUsersByMember(g.records[0].member_id) + } else { + w2alert(json.message || '삭제 실패') + } + } catch (e) { + console.error(text) + w2alert('서버 응답 오류 (JSON 아님)') + } + }) + }) +}) + +function loadTotalArea(memberId) { + return fetch(`/kngil/bbs/adm_comp.php?action=total_area&member_id=${memberId}`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error('총 구매면적 로딩 실패') + } + return Number(json.total_area || 0) + }) +} + +function doSearch() { + + const keyword = document.getElementById('schKeyword').value.trim() + const type = document.getElementById('schType').value + const useYn = document.getElementById('schUseYn').value + + let p_user_nm = '' + let p_dept_nm = '' + + // DB로 보낼 검색 조건 + if (type === 'name') { + p_user_nm = keyword + } else if (type === 'dept') { + p_dept_nm = keyword + } else if (type === '') { + // 전체 검색 → 이름 OR 부서 + p_user_nm = keyword + p_dept_nm = keyword + } + // ⚠️ type === 'id' 는 DB로 안 보냄 + + fetch(`/kngil/bbs/adm_comp.php?action=list` + + `&user_nm=${encodeURIComponent(p_user_nm)}` + + `&dept_nm=${encodeURIComponent(p_dept_nm)}` + + `&use_yn=${useYn}` + ) + .then(res => res.json()) + .then(d => { + + if (d.status !== 'success') { + w2alert('검색 실패') + return + } + + let records = d.records || [] + + // 🔥 ID 검색은 프론트 필터 + if (type === 'id' && keyword) { + records = records.filter(r => + (r.user_id || '').toLowerCase() + .includes(keyword.toLowerCase()) + ) + } + + const g = w2ui.detailGrid || w2ui.userGrid + g.clear() + g.add(records) + }) +} + + +document.getElementById('btnSearch') + ?.addEventListener('click', doSearch) + +document.getElementById('schKeyword') + ?.addEventListener('keydown', e => { + if (e.key === 'Enter') doSearch() + }) diff --git a/kngil/js/adm_comp.js b/kngil/js/adm_comp.js new file mode 100644 index 0000000..c7eadd8 --- /dev/null +++ b/kngil/js/adm_comp.js @@ -0,0 +1,798 @@ +import { w2grid, w2ui, w2popup, w2alert, w2confirm } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +let AUTH_ITEMS = [] +let CURRENT_MEMBER_ID = null; + +const USE_ITEMS = [ + { id: 'Y', text: '사용' }, + { id: 'N', text: '미사용' } +] +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ + +function getTargetMemberId() { + return document.getElementById('targetMemberId')?.value?.trim() +} + +function destroyGrid(name) { + if (w2ui[name]) { + w2ui[name].destroy() + } +} + +function loadBaseCode(mainCd) { + return fetch(`/kngil/bbs/adm_comp.php?action=base_code&main_cd=${mainCd}`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error(json.message || '공통코드 로딩 실패') + } + return json.items + }) +} + +function normalizeAuth(records) { + return records.map(r => { + const item = AUTH_ITEMS.find(a => a.id === r.auth_bc) + return { + ...r, + auth_bc: item || null //객체 복사 + } + }) +} + +function normalizeUseYn(records) { + return records.map(r => { + const item = USE_ITEMS.find(u => u.id === r.use_yn) + return { + ...r, + use_yn: item || null + } + }) +} + + +/* ------------------------------------------------- + 기업 관리자 페이지 Grid +------------------------------------------------- */ +export async function createUserGrid(boxId, options = {}) { + console.log('🔥 createUserGrid 호출됨:', boxId) + // 🔥 DB에서 권한 코드 로딩 + AUTH_ITEMS = (await loadBaseCode('BS100')).map(r => ({ + id: r.id, + text: r.text + })) + const { loadSummary = true, memberId = null } = options + + destroyGrid('userGrid') + + const grid = new w2grid({ + name: boxId === '#detailGrid' ? 'detailGrid' : 'userGrid', + box: boxId, + + show: { + footer: true, + lineNumbers: true, + selectColumn: true, + }, + + columns: [ + // { + // field: 'recid', + // text: '#', + // size: '50px', + // attr: 'align=center', + // sortable: true, + // }, + { field: 'user_id', text: 'ID', size: '90px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'user_pw', + text: 'PW', + size: '90px', + resizable: true, + sortable: false, + + editable: { + type: 'password' // ✅ 입력 시 ●●●● + }, + + render() { + return '********' // ✅ 항상 마스킹 + } + }, + { field: 'user_nm', text: '이름', size: '90px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'tel_no', + text: '연락처', + size: '120px', + editable: { type: 'text' }, + resizable: true, + sortable: true + }, + { field: 'email', text: 'E-mail', size: '180px', editable: {type : 'text'}, resizable: true, sortable: true }, + { field: 'dept_nm', text: '부서', size: '120px', editable: {type : 'text'}, resizable: true, sortable: true }, + { + field: 'use_area', + text: '사용량(㎡)', + size: '120px', + attr: 'align=right', + editable: false, + resizable: true, + sortable: true, + + render(record) { + const v = Number(record.use_area) || 0 + return v.toLocaleString() // ✅ 1,000단위 콤마 + } + }, + { field: 'cdt', text: '등록일', size: '100px', editable: false, resizable: true, sortable: true }, + { + field: 'use_yn', + text: '사용', + size: '90px', + attr: 'align=center', + sortable: true, + editable: { + type: 'list', + items: USE_ITEMS, + showAll: true, + openOnFocus: true + }, + + render(record, extra) { + return extra?.value?.text || '' + } + }, + /* ✅ 권한 콤보 (DB 연동) */ + { + field: 'auth_bc', + text: '권한', + size: '120px', + sortable: true, + editable: { + type: 'list', + items: AUTH_ITEMS, + showAll: true, + openOnFocus: true + }, + render(record, extra) { + return extra?.value?.text || '' + } + }, + { field: 'rmks', text: '비고', size: '120px', editable: { type: 'text' }, resizable: true, sortable: true } + ], + onEditField(event) { + + const pwColIndex = this.getColumn('user_pw').index + + // 🔥 PW 컬럼일 때만 처리 + if (event.column !== pwColIndex) return + + event.onComplete = function () { + + // 🔥 현재 편집 세션의 input만 정확히 집기 + const box = event.box + if (!box) return + + const input = box.querySelector('input[type="password"]') + if (!input) return + + // PW만 초기화 + input.value = '' + input.placeholder = '변경 시에만 입력' + } + }, + onChange(event) { + event.onComplete = function (ev) { + + const rec = grid.get(ev.recid); + if (!rec) return; + + const field = grid.columns[ev.column].field; + let val = ev.value_new; + + /* =============================== + 📞 전화번호(tel_no) 자동 하이픈 + =============================== */ + if (field === 'tel_no') { + + let digits = String(val || '').replace(/\D/g, ''); + + // 입력 중이면 건드리지 않음 + if (digits.length < 9) return; + + let formatted = digits; + + if (digits.length === 11) { + formatted = + `${digits.slice(0,3)}-${digits.slice(3,7)}-${digits.slice(7)}`; + } else if (digits.length === 10) { + formatted = + `${digits.slice(0,3)}-${digits.slice(3,6)}-${digits.slice(6)}`; + } + + // ✅ 화면 값 + grid.set(ev.recid, { tel_no: formatted }); + + // ✅ 변경사항으로 "확정" (이게 핵심) + grid.mergeChanges(ev.recid, { tel_no: formatted }); + + grid.refreshRow(ev.recid); + return; + } + + /* =============================== + 공통 처리 + =============================== */ + if (typeof val === 'object' && val !== null) { + val = val.text; + } + + grid.set(ev.recid, { [field]: val }); + grid.mergeChanges(ev.recid, { [field]: val }); + }; + }, + records: [], + }) + + loadData({ + loadSummary, + memberId + }) +} + +export function loadUsersByMember(memberId) { + + if (!memberId) return + + const g = w2ui.detailGrid + if (!g) { + console.error('detailGrid 없음') + return + } + + fetch(`/kngil/bbs/adm_comp.php?action=list&member_id=${memberId}`) + .then(res => res.json()) + .then(d => { + + if (d.status !== 'success') { + w2alert('사용자 조회 실패') + return + } + const records = normalizeAuth(d.records || []) + records = normalizeUseYn(records) + g.clear() + g.add(d.records) + }) + .catch(err => console.error(err)) +} + +export function setUserGridMode(mode = 'view') { + const g = w2ui.userGrid + if (!g) return + + if (mode === 'view') { + g.show.toolbar = false + g.show.selectColumn = false + g.show.toolbarSave = false + } else { + g.show.toolbar = true + g.show.selectColumn = true + g.show.toolbarSave = true + } + + g.refresh() +} + +export function loadData({ loadSummary = true } = {}) { + fetch('/kngil/bbs/adm_comp.php?action=list') + .then(res => res.json()) + .then(async d => { + + if (d.status !== 'success') return + + let records = normalizeAuth(d.records || []) + records = normalizeUseYn(records) + const gridName = w2ui.detailGrid ? 'detailGrid' : 'userGrid' + + w2ui[gridName].clear() + w2ui[gridName].add(records) + + if (loadSummary && d.member_id) { + const totalArea = await loadTotalArea() + renderSummaryFromRecords({ + memberId: d.member_id, + records, + totalArea + }) + } + }) +} + + + + +function renderSummaryFromRecords({ memberId, records, totalArea }) { + + if (!records.length) return + + const first = records[0] + + const issuedCnt = Number(first.users_tot) || 0 + const usedCnt = Number(first.users_y) || 0 + const term = first.term || '' + + // 사용 중 면적 합계 + let usedArea = 0 + records.forEach(r => { + if (r.use_yn?.id === 'Y') { + usedArea += Number(r.use_area || 0) + } + }) + + const percent = totalArea > 0 + ? Math.floor((usedArea / totalArea) * 100) + : 0 + + /* -------- 화면 바인딩 -------- */ + document.getElementById('memberId').textContent = memberId + document.getElementById('planName').textContent = first.itm_nm || '-' + document.getElementById('dateRange').textContent = term + + document.getElementById('issuedCnt').textContent = issuedCnt + document.getElementById('usedCnt').textContent = usedCnt + + document.getElementById('usedArea').textContent = + usedArea.toLocaleString() + '㎡' + + document.getElementById('totalArea').textContent = + totalArea.toLocaleString() + '㎡' + + /* -------- 사용량 바 -------- */ + const bar = document.getElementById('usedBar') + bar.style.width = percent + '%' +} + + + +// =============================== +// 저장 버튼 +// =============================== +document.getElementById('btnSave_comp')?.addEventListener('click', () => { + + // 현재 사용 중인 grid + const g = w2ui.detailGrid || w2ui.userGrid + if (!g) return + + const changes = g.getChanges() + + if (!changes.length) { + w2alert('변경된 내용이 없습니다.') + return + } + + const inserts = [] + const updates = [] + + changes.forEach(c => { + const rec = g.get(c.recid) + if (!rec) return + + // 🔥 핵심: 원본 rec + 변경값 c 병합 + const merged = { ...rec, ...c } + + if (rec.__isNew) { + // INSERT → 전체 row 필요 + inserts.push(merged) + } else { + // UPDATE → PK + 변경 컬럼 + updates.push({ + member_id : merged.member_id, + user_id : merged.user_id, + + user_nm : merged.user_nm, + dept_nm : merged.dept_nm, + tel_no : merged.tel_no, + email : merged.email, + use_yn : merged.use_yn?.id || merged.use_yn, + auth_bc : merged.auth_bc?.id || merged.auth_bc, + rmks : (merged.memo !== undefined ? merged.memo : '') + }) + } + }) + + console.log('INSERTS', inserts) + console.log('UPDATES', updates) + + fetch('/kngil/bbs/adm_comp.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'save', + // member_id: g.records[0]?.member_id, + inserts, + updates + }) + }) + .then(res => res.text()) + .then(text => { + try { + const json = JSON.parse(text) + if (json.status === 'success') { + w2alert('저장 완료') + loadData() + } else { + w2alert(json.message || '저장 실패') + } + } catch (e) { + console.error(text) + w2alert('서버 응답 오류 (JSON 아님)') + } + }) +}) + + +//추가(insert) +document.getElementById('btnAdd')?.addEventListener('click', () => { + + const g = w2ui.userGrid || w2ui.detailGrid + if (!g) return + const defaultAuth = AUTH_ITEMS.find(a => a.id === 'BS100500') // 일반 + // 신규 row용 recid (음수로 충돌 방지) + const newRecid = -Date.now() + + g.add({ + recid: newRecid, + __isNew: true, + user_id: '', + user_pw: '', + user_nm: '', + tel_no: '', + email: '', + dept_nm: '', + use_area: 0, + use_yn: USE_ITEMS[0], + auth_bc: defaultAuth || null, + memo: '' + }, true) + + g.select(newRecid) + g.scrollIntoView(newRecid) +}) + +//삭제 +document.getElementById('btnDelete')?.addEventListener('click', () => { + + const g = w2ui.detailGrid || w2ui.userGrid + if (!g) return + + const sel = g.getSelection() + + if (!sel.length) { + w2alert('삭제할 사용자를 선택하세요.') + return + } + + // 선택된 user_id 수집 + const ids = sel + .map(recid => { + const r = g.get(recid) + return r?.user_id + }) + .filter(Boolean) + + if (!ids.length) { + w2alert('삭제 가능한 항목이 없습니다.') + return + } + + w2confirm(`선택한 ${ids.length}명의 사용자를 삭제하시겠습니까?`) + .yes(() => { + + fetch('/kngil/bbs/adm_comp.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'delete', + // member_id: g.records[0]?.member_id, + ids + }) + }) + .then(res => res.text()) + .then(text => { + try { + const json = JSON.parse(text) + if (json.status === 'success') { + w2alert('삭제 완료') + loadData() + } else { + w2alert(json.message || '삭제 실패') + } + } catch (e) { + console.error(text) + w2alert('서버 응답 오류 (JSON 아님)') + } + }) + }) +}) + +function loadTotalArea(memberId) { + return fetch(`/kngil/bbs/adm_comp.php?action=total_area`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error('총 구매면적 로딩 실패') + } + return Number(json.total_area || 0) + }) +} + +function doSearch() { + + const keyword = document.getElementById('schKeyword').value.trim() + const type = document.getElementById('schType').value + const useYn = document.getElementById('schUseYn').value + + let p_user_nm = '' + let p_dept_nm = '' + + // DB로 보낼 검색 조건 + if (type === 'name') { + p_user_nm = keyword + } else if (type === 'dept') { + p_dept_nm = keyword + } else if (type === '') { + // 전체 검색 → 이름 OR 부서 + p_user_nm = keyword + p_dept_nm = keyword + } + // ⚠️ type === 'id' 는 DB로 안 보냄 + + fetch(`/kngil/bbs/adm_comp.php?action=list` + + `&user_nm=${encodeURIComponent(p_user_nm)}` + + `&dept_nm=${encodeURIComponent(p_dept_nm)}` + + `&use_yn=${useYn}` + ) + .then(res => res.json()) + .then(d => { + + if (d.status !== 'success') { + w2alert('검색 실패') + return + } + + let records = d.records || [] + + // ID 검색은 프론트 필터 + if (type === 'id' && keyword) { + records = records.filter(r => + (r.user_id || '').toLowerCase() + .includes(keyword.toLowerCase()) + ) + } + + const g = w2ui.detailGrid || w2ui.userGrid + records = normalizeAuth(records) + records = normalizeUseYn(records) + g.clear() + g.add(records) + }) +} + + +document.getElementById('btnSearch') + ?.addEventListener('click', () => { + + const memberInput = document.getElementById('targetMemberId'); + const memberId = memberInput ? memberInput.value.trim() : ''; + + if (memberInput && memberInput.style.display !== 'none') { + CURRENT_MEMBER_ID = memberId; // ⭐ 저장 + loadDataByMemberId(memberId); + return; + } + + doSearch(); +}); + +document.getElementById('schKeyword') + ?.addEventListener('keydown', e => { + if (e.key === 'Enter') doSearch() + }) + +document.getElementById('btnBulkCreate') + ?.addEventListener('click', () => { + + const memberId = getTargetMemberId() + + if (!memberId) { + w2alert('회원ID를 입력하세요.') + return + } + + // 🔥 여기서 CSV URL 팝업 띄움 + openBulkCreatePopup(memberId) +}) + +function openBulkCreatePopup(memberId) { + + // ⭐ 방어: 객체면 member_id만 사용 + if (typeof memberId === 'object' && memberId !== null) { + memberId = memberId.member_id || ''; + } + + if (!memberId) { + w2alert('회원ID가 올바르지 않습니다.'); + return; + } + + w2popup.open({ + title: '사용자 일괄 생성 (CSV)', + width: 520, + height: 220, + modal: true, + body: ` +

+ 대상 회원ID: ${memberId} +

+ + + +

+ +

+ `, + onOpen(event) { + event.onComplete = () => { + document + .getElementById('btnCsvRun') + .addEventListener('click', () => { + + const url = + document.getElementById('csvUrl').value.trim() + + if (!url) { + w2alert('CSV URL을 입력하세요.') + return + } + + runBulkCreate(memberId, url) + }) + } + } + }) +} + +function runBulkCreate(memberId, csvUrl) { + + fetch('/kngil/bbs/adm_comp.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'bulk_create', + member_id: memberId, + csv_url: csvUrl + }) + }) + .then(res => res.text()) + .then(text => { + + let d; + try { + d = JSON.parse(text); + } catch (e) { + w2alert({ + title: '서버 오류', + text: `

${text}

` + }); + return; + } + + const successCnt = Number(d.success_cnt || 0); + const failCnt = Number(d.fail_cnt || 0); + + let errors = d.errors || []; + // 배열이지만 요소가 객체일 수 있음 → 문자열로 강제 + errors = errors.map(e => { + if (typeof e === 'string') return e; + try { + return JSON.stringify(e); + } catch { + return String(e); + } + }); + + // // ⭐ 핵심: object → array 변환 + // if (!Array.isArray(errors) && typeof errors === 'object') { + // errors = Object.values(errors); + // } +console.log('errors raw =', d.errors); + // ❌ 전부 실패 + if (successCnt === 0) { + w2popup.close(); // ⭐ 먼저 CSV 팝업 닫기 + + w2alert(` +

+ 일괄 생성 실패

+ ${errors.map(e => `• ${e}`).join('
')} +

+ `); + return; + } + + // ✅ 성공 or 부분 성공 + let msg = ''; + msg += `✔ 성공: ${successCnt}명
`; + msg += `❌ 실패: ${failCnt}명`; + + if (errors.length > 0) { + msg += '

'; + msg += '

'; + errors.forEach(err => { + msg += `• ${err}
`; + }); + msg += '

'; + } + + w2alert({ + title: '일괄 생성 결과', + msg: msg + }); + + if (CURRENT_MEMBER_ID) { + loadDataByMemberId(CURRENT_MEMBER_ID); + } else { + loadData(); + } + w2popup.close(); + }) + .catch(err => { + console.error(err); + w2alert('서버 통신 중 오류가 발생했습니다.'); + }); +} + + + +function loadDataByMemberId(memberId) { + + if (!memberId) { + w2alert('회원ID를 입력하세요.'); + return; + } + + fetch(`/kngil/bbs/adm_comp.php?action=list&member_id=${encodeURIComponent(memberId)}`) + .then(res => res.json()) + .then(async d => { + + if (d.status !== 'success') { + w2alert(d.message || '조회 실패'); + return; + } + + let records = normalizeAuth(d.records || []); + records = normalizeUseYn(records); + + const gridName = w2ui.detailGrid ? 'detailGrid' : 'userGrid'; + w2ui[gridName].clear(); + w2ui[gridName].add(records); + + // ✅ 상단 요약 갱신 + const totalArea = await loadTotalArea(memberId); + renderSummaryFromRecords({ + memberId, + records, + totalArea + }); + }); +} diff --git a/kngil/js/adm_faq_popup.js b/kngil/js/adm_faq_popup.js new file mode 100644 index 0000000..fc59dc2 --- /dev/null +++ b/kngil/js/adm_faq_popup.js @@ -0,0 +1,285 @@ +import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' + + +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ +function destroyGrid(name) { + if (w2ui[name]) { + w2ui[name].destroy() + } +} + +function loadBaseCode(mainCd) { + return fetch(`/kngil/bbs/adm_comp.php?action=base_code&main_cd=${mainCd}`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error(json.message || '공통코드 로딩 실패') + } + return json.items + }) +} + +/* ================================================= + faq 팝업 (슈퍼관리자 전용) +================================================= */ +export function openfaqPopup() { + + if (w2ui.faqGrid) { + w2ui.faqGrid.destroy() + } + w2popup.open({ + title: 'FAQ 내용등록', + width: 900, + height: 600, + modal: true, + + body: ` + + `, + + + onOpen(event) { + event.onComplete = () => { + // 1. 그리드를 생성합니다. + createfaqGrid('#faqGrid'); + + + // 1. 추가 버튼 + document.getElementById('faqAdd').onclick = () => { + const g = w2ui.faqGrid + if (!g) return + // 신규 row용 recid (음수로 충돌 방지) + const newRecid = -Date.now() + g.add({ + fa_subject: '', + recid: newRecid, + __isNew: true, // ⭐ 신규 플래그 + fa_content: '' + }, true) + g.select(newRecid) + g.scrollIntoView(newRecid) + + }; + + + + // 삭제 버튼 이벤트 연결 + const removeBtn = document.getElementById('faqRemove'); + if (removeBtn) { + removeBtn.onclick = () => { + const g = w2ui.faqGrid; + if (!g) return; + + // 1. 선택된 행 가져오기 + const sel = g.getSelection(); + if (!sel.length) { + alert('삭제할 항목을 선택하세요.'); + return; + } + + // 2. faq 추출 + const ids = sel + .map(recid => g.get(recid)?.fa_id) + .filter(Boolean); + + if (!ids.length) { + alert('삭제 가능한 항목이 없습니다.'); + return; + } + + // 3. 브라우저 기본 확인창 사용 (가장 확실함) + if (confirm(`선택한 ${ids.length}개의 상품을 삭제하시겠습니까?`)) { + fetch('/kngil/bbs/adm_faq_popup_delete.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'delete', ids: ids }) + }) + .then(res => { + // 서버 응답이 오면 일단 텍스트로 받아서 확인 + return res.text(); + }) + .then(text => { + try { + const json = JSON.parse(text); + if (json.status === 'success') { + alert('삭제 완료'); + loadfaqData(); // 목록 새로고침 + } else { + alert(json.message || '삭제 실패'); + } + } catch (e) { + console.error('응답 파싱 에러:', text); + alert('서버 응답 처리 중 오류가 발생했습니다.'); + } + }) + .catch(err => { + console.error('통신 에러:', err); + alert('서버와 통신할 수 없습니다.'); + }); + } + }; + } + + + // 3. 저장 버튼 + document.getElementById('faqSave').onclick = () => { + + // 현재 사용 중인 grid + const g = w2ui.faqGrid + if (!g) return + const changes = g.getChanges() + if (!changes.length) { + w2alert('변경된 내용이 없습니다.') + return + } + const inserts = [] + const updates = [] + + changes.forEach(c => { + const rec = g.get(c.recid) + if (!rec) return + // 🔥 핵심: 원본 rec + 변경값 c 병합 + const merged = { ...rec, ...c } + if (rec.__isNew) { + // INSERT → 전체 row 필요 + inserts.push(merged) + } else { + // UPDATE → PK + 변경 컬럼 + updates.push({ + fa_id : merged.fa_id, + fa_subject : merged.fa_subject , + fa_content : merged.fa_content , + use_yn : merged.use_yn, + sq_no : merged.sq_no + }) + } + + }) + console.log('INSERTS', inserts) + console.log('UPDATES', updates) + + fetch('/kngil/bbs/adm_faq_popup_save.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'save', + inserts, + updates + }) + }) + + .then(res => { + // 서버가 준 응답이 괜찮은지 확인 + if (!res.ok) throw new Error('서버 응답 오류'); + return res.json(); // 처음부터 깔끔하게 데이터로 읽기 + }) + + .then(json => { + // 이제 json.status를 바로 쓸 수 있습니다. + if (json.status === 'success') { + w2alert('저장 완료'); + w2ui.faqGrid.save(); // 빨간 삼각형 없애기 + loadfaqData(); // 목록 새로고침 + } else { + w2alert(json.message || '저장 실패'); + } + }) + .catch(err => { + console.error('에러 발생:', err); + w2alert('처리 중 오류가 발생했습니다.'); + }); + + }; + } + } + }) +} +//faq 그리드 +export async function createfaqGrid(boxId) { + if (w2ui.faqGrid) w2ui.faqGrid.destroy(); + destroyGrid('faqGrid') + + const authItems = await loadBaseCode('BS210') + + const grid = new w2grid({ + + name: 'faqGrid', + box: boxId, + recordHeight: 80, // ⭐ 행 높이를 80px로 설정 (3줄 정도 높이) + show: { + footer: true, + selectColumn: true, + lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다. + }, + columns: [ + /* + { field: 'row_status', text: ' ', size: '30px', attr: 'align=center', + render: function (record) { + // 1. 신규 추가된 행 (recid가 임시값이거나 DB에 없는 경우) + if (record.is_new) return 'I'; + + // 2. 수정된 데이터 (w2ui.changes 객체가 존재하는 경우) + if (record.w2ui && record.w2ui.changes) return 'U'; + // 3. 일반 상태 + return ' '; + } + }, + */ + { field: 'fa_id', text: 'FAID', size: '60',attr: 'align=center',style: 'text-align: center', attr: 'align=center' ,hidden: true,sortable: true}, // name 아님! + { field: 'fa_subject', text: '질문', size: '300', editable: { type: 'text' } + ,render: function(record) { + if (!record.fa_content) return ''; + // 엔터값(\n)을 브라우저가 인식하는
로 바꿔서 리턴 + return record.fa_content.replace(/\n/g, '
'); + } + }, // name 아님! + { field: 'fa_content', text: '답글', size: '300', editable: { type: 'text' } }, // volume 아님! + { field: 'sq_no', text: '순번', size: '60', attr: 'align=center',style: 'text-align: center',render: 'number:0', editable: { type: 'int' } ,sortable: true}, // + { field: 'use_yn', text: '사용여부', size: '80px',attr: 'align=center',style: 'text-align: center', attr: 'align=center', + editable: { type: 'list', items: authItems, filter: false ,showAll: true } , + render(record) { + const item = authItems.find(i => i.id === record.use_yn) + return item ? item.text : record.use_yn + },sortable: true + }, + { field: 'rmks', text: '비고', size: '200px', attr: 'align=center', editable: { type: 'text' } } // memo 아님! + ], + records: [] // 처음엔 비워둠 + }); + + // 데이터 호출 함수 실행 + loadfaqData(); + + return grid; +} + + +// 데이터를 서버에서 불러오는 함수 +async function loadfaqData() { + try { + w2ui.faqGrid.lock('조회 중...', true); + + const response = await fetch('/kngil/bbs/adm_faq_popup.php'); // PHP 파일 호출 + const data = await response.json(); + + w2ui.faqGrid.clear(); + w2ui.faqGrid.add(data); + w2ui.faqGrid.unlock(); + + } catch (e) { + console.error(e); + w2ui.faqGrid.unlock(); + w2alert('데이터 로드 실패'); + } +} \ No newline at end of file diff --git a/kngil/js/adm_product_popup.js b/kngil/js/adm_product_popup.js new file mode 100644 index 0000000..8e522fc --- /dev/null +++ b/kngil/js/adm_product_popup.js @@ -0,0 +1,280 @@ +import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' + + +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ +function destroyGrid(name) { + if (w2ui[name]) { + w2ui[name].destroy() + } +} + +function loadBaseCode(mainCd) { + return fetch(`/kngil/bbs/adm_comp.php?action=base_code&main_cd=${mainCd}`) + .then(res => res.json()) + .then(json => { + if (json.status !== 'success') { + throw new Error(json.message || '공통코드 로딩 실패') + } + return json.items + }) +} + +/* ================================================= + 상품등록 팝업 (슈퍼관리자 전용) +================================================= */ +export function openProductPopup() { + + if (w2ui.productGrid) { + w2ui.productGrid.destroy() + } + w2popup.open({ + title: '상품등록', + width: 900, + height: 600, + modal: true, + + body: ` + + `, + + + onOpen(event) { + event.onComplete = () => { + // 1. 그리드를 생성합니다. + createProductGrid('#productGrid'); + + + // 1. 추가 버튼 + document.getElementById('prodAdd').onclick = () => { + const g = w2ui.productGrid + if (!g) return + // 신규 row용 recid (음수로 충돌 방지) + const newRecid = -Date.now() + g.add({ + row_status: 'I', + recid: newRecid, + __isNew: true, // ⭐ 신규 플래그 + use_yn: 'Y' + }, true) + g.select(newRecid) + g.scrollIntoView(newRecid) + + // commonAdd('productGrid', { use_yn: 'Y', itm_amt: 0, area: 0 }); + }; + + + + // 삭제 버튼 이벤트 연결 + const removeBtn = document.getElementById('prodRemove'); + if (removeBtn) { + removeBtn.onclick = () => { + const g = w2ui.productGrid; + if (!g) return; + + // 1. 선택된 행 가져오기 + const sel = g.getSelection(); + if (!sel.length) { + alert('삭제할 상품을 선택하세요.'); + return; + } + + // 2. 상품코드 추출 + const ids = sel + .map(recid => g.get(recid)?.itm_cd) + .filter(Boolean); + + if (!ids.length) { + alert('삭제 가능한 항목이 없습니다.'); + return; + } + + // 3. 브라우저 기본 확인창 사용 (가장 확실함) + if (confirm(`선택한 ${ids.length}개의 상품을 삭제하시겠습니까?`)) { + fetch('/kngil/bbs/adm_product_popup_delete.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'delete', ids: ids }) + }) + .then(res => { + // 서버 응답이 오면 일단 텍스트로 받아서 확인 + return res.text(); + }) + .then(text => { + try { + const json = JSON.parse(text); + if (json.status === 'success') { + alert('삭제 완료'); + loadProductData(); // 목록 새로고침 + } else { + alert(json.message || '삭제 실패'); + } + } catch (e) { + console.error('응답 파싱 에러:', text); + alert('서버 응답 처리 중 오류가 발생했습니다.'); + } + }) + .catch(err => { + console.error('통신 에러:', err); + alert('서버와 통신할 수 없습니다.'); + }); + } + }; + } + + + // 3. 저장 버튼 + document.getElementById('prodSave').onclick = () => { + + // 현재 사용 중인 grid + const g = w2ui.productGrid + if (!g) return + const changes = g.getChanges() + if (!changes.length) { + w2alert('변경된 내용이 없습니다.') + return + } + const inserts = [] + const updates = [] + + changes.forEach(c => { + const rec = g.get(c.recid) + if (!rec) return + // 🔥 핵심: 원본 rec + 변경값 c 병합 + const merged = { ...rec, ...c } + if (rec.__isNew) { + // INSERT → 전체 row 필요 + inserts.push(merged) + } else { + // UPDATE → PK + 변경 컬럼 + updates.push({ + itm_cd : merged.itm_cd, + itm_nm : merged.itm_nm, + area : merged.area, + itm_amt: merged.itm_amt, + use_yn : merged.use_yn, + rmks : merged.rmks + }) + } + + }) + console.log('INSERTS', inserts) + console.log('UPDATES', updates) + + fetch('/kngil/bbs/adm_product_popup_save.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'save', + inserts, + updates + }) + }) + + .then(res => { + // 서버가 준 응답이 괜찮은지 확인 + if (!res.ok) throw new Error('서버 응답 오류'); + return res.json(); // 처음부터 깔끔하게 데이터로 읽기 + }) + + .then(json => { + // 이제 json.status를 바로 쓸 수 있습니다. + if (json.status === 'success') { + w2alert('저장 완료'); + w2ui.productGrid.save(); // 빨간 삼각형 없애기 + loadProductData(); // 목록 새로고침 + } else { + w2alert(json.message || '저장 실패'); + } + }) + .catch(err => { + console.error('에러 발생:', err); + w2alert('처리 중 오류가 발생했습니다.'); + }); + + }; + } + } + }) +} +//상품등록 그리드 +export async function createProductGrid(boxId) { + if (w2ui.productGrid) w2ui.productGrid.destroy(); + destroyGrid('productGrid') + + const authItems = await loadBaseCode('BS210') + + const grid = new w2grid({ + + name: 'productGrid', + box: boxId, + show: { + footer: true, + selectColumn: true, + lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다. + }, + columns: [ + /* + { field: 'row_status', text: ' ', size: '30px', attr: 'align=center', + render: function (record) { + // 1. 신규 추가된 행 (recid가 임시값이거나 DB에 없는 경우) + if (record.is_new) return 'I'; + + // 2. 수정된 데이터 (w2ui.changes 객체가 존재하는 경우) + if (record.w2ui && record.w2ui.changes) return 'U'; + // 3. 일반 상태 + return ' '; + } + }, + */ + { field: 'itm_cd', text: '상품코드', size: '80px',attr: 'align=center',style: 'text-align: center', attr: 'align=center', editable: { type: 'text' } ,sortable: true}, // name 아님! + { field: 'itm_nm', text: '상품명', size: '120px', attr: 'align=center',style: 'text-align: center', editable: { type: 'text' } ,sortable: true}, // name 아님! + { field: 'area', text: '제공량', size: '100px', attr: 'align=center',render: 'number:0' , editable: { type: 'float' } ,sortable: true}, // volume 아님! + { field: 'itm_amt', text: '단가', size: '120px', attr: 'align=center',render: 'number:0', editable: { type: 'int' } ,sortable: true}, // + { field: 'use_yn', text: '사용여부', size: '80px',attr: 'align=center',style: 'text-align: center', attr: 'align=center', + editable: { type: 'list', items: authItems, filter: false ,showAll: true } , + render(record) { + const item = authItems.find(i => i.id === record.use_yn) + return item ? item.text : record.use_yn + },sortable: true + }, + { field: 'rmks', text: '비고', size: '200px', attr: 'align=center', editable: { type: 'text' } ,sortable: true} // memo 아님! + ], + records: [] // 처음엔 비워둠 + }); + + // 데이터 호출 함수 실행 + loadProductData(); + + return grid; +} + + +// 데이터를 서버에서 불러오는 함수 +async function loadProductData() { + try { + w2ui.productGrid.lock('조회 중...', true); + + const response = await fetch('/kngil/bbs/adm_product_popup.php'); // PHP 파일 호출 + const data = await response.json(); + + w2ui.productGrid.clear(); + w2ui.productGrid.add(data); + w2ui.productGrid.unlock(); + + } catch (e) { + console.error(e); + w2ui.productGrid.unlock(); + w2alert('데이터 로드 실패'); + } +} \ No newline at end of file diff --git a/kngil/js/adm_purch_popup.js b/kngil/js/adm_purch_popup.js new file mode 100644 index 0000000..2a44fc3 --- /dev/null +++ b/kngil/js/adm_purch_popup.js @@ -0,0 +1,144 @@ +import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +// 파일이 실제 존재하는지 확인 필수! 존재하지 않으면 아래 코드가 모두 멈춥니다. +import { bindProductPopupEvents } from '/kngil/js/adm_common.js' + + + +export function openPurchaseHistoryPopup(memberId = '',isSuperAdmin='') { + // 기존 그리드 안전하게 제거 + if (w2ui.purchaseHistoryGrid) { + w2ui.purchaseHistoryGrid.destroy(); + } + + w2popup.open({ + title: '서비스 구매 이력', + width: 1100, + height: 600, + modal: true, + body: + /* + ` +

+ */ + ` +

+ +

+ 회원 ID + + + +

+ +

+ + `, + onOpen(event) { + event.onComplete = () => { + const searchBtn = document.getElementById('btnSearchHistory'); + const searchInput = document.getElementById('searchMemberId'); + + // 조회 버튼 클릭 시 동작 + if (searchBtn) { + searchBtn.onclick = () => { + loadPurchaseHistoryData(searchInput.value); + }; + } + + // 엔터키 지원 + if (searchInput) { + searchInput.onkeydown = (e) => { + if (e.key === 'Enter') searchBtn.click(); + }; + } + + createPurchaseHistoryGrid(memberId); + loadPurchaseHistoryData(memberId); + } + } + }); +} + +function createPurchaseHistoryGrid(memberId) { + new w2grid({ + name: 'purchaseHistoryGrid', + box: '#purchaseHistoryGrid', + show: { + //toolbar: true, + footer: true, + lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다. + }, + columns: [ + // field 이름이 PHP에서 내려주는 JSON 키값과 정확히 일치해야 함! + { field: 'member_id', text: '회원ID', size: '80px',style: 'text-align: center', attr: 'align=center',sortable: true }, // name 아님! + { field: 'sq_no', text: '순번', size: '50px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'user_nm', text: '구매자', size: '80px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'co_nm', text: '회사명', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'bs_no', text: '사업자번호', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'buy_dt', text: '구입일자', size: '80px',style: 'text-align: center', attr: 'align=center',sortable: true }, // name 아님! + { field: 'itm_nm', text: '상품명', size: '80px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'area', text: '상품면적', size: '80px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'itm_qty', text: '수량', size: '80px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'itm_area', text: '면적', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'add_area', text: '추가면적', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'sum_area', text: '합계면적', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'itm_amt', text: '단가', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'dis_rt', text: '할인율', size: '80px', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'buy_amt', text: '공급금액', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'vat_amt', text: '부가세', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'sum_amt', text: '합계', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'end_dt', text: '종료일', size: '80px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'ok_yn', text: '승인여부', size: '80px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'rmks', text: '비고', size: '150px',style: 'text-align: center', attr: 'align=center' ,sortable: true} // name 아님! + + ] + }); +} + +async function loadPurchaseHistoryData(memberId) { + try { + const grid = w2ui.purchaseHistoryGrid; + if (!grid) return; + + grid.lock('조회 중...', true); + + const searchParams = new URLSearchParams(); + searchParams.append('member_id', memberId); + searchParams.append('member_nm', ''); + searchParams.append('fbuy_dt', ''); + searchParams.append('tbuy_dt', ''); + + const response = await fetch('/kngil/bbs/adm_purch_popup.php', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: searchParams + }); + + if (!response.ok) throw new Error(`서버 응답 오류: ${response.status}`); + + const data = await response.json(); + + if (!Array.isArray(data)) { + throw new Error('응답 데이터 형식 오류'); + } + + grid.clear(); + grid.add(data); + grid.unlock(); + + } catch (e) { + console.error(e); + if (w2ui.purchaseHistoryGrid) w2ui.purchaseHistoryGrid.unlock(); + w2alert('구매이력 조회 실패: ' + e.message); + } +} +//////////////////////////////////////////////////////////////////////// diff --git a/kngil/js/adm_service copy.js b/kngil/js/adm_service copy.js new file mode 100644 index 0000000..5b778a6 --- /dev/null +++ b/kngil/js/adm_service copy.js @@ -0,0 +1,237 @@ +import { w2grid, w2ui, w2popup, w2alert } +from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' + +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ +function destroyGrid(name) { + if (w2ui[name]) w2ui[name].destroy() +} + +/* ------------------------------------------------- + 서비스 등록 팝업 +------------------------------------------------- */ +export function openServiceRegisterPopup(ctx) { + + destroyGrid('serviceGrid') + destroyGrid('productList') + + w2popup.open({ + title: '서비스 등록', + width: 1300, + height: 720, + modal: true, + body: ` + + `, + onOpen(event) { + event.onComplete = () => { + createServiceGrid() + createProductList() + + // ✅ 구매일 조회 버튼 바인딩 (여기서!) + document.getElementById('btnSearchBuy').addEventListener('click', () => { + const buyDate = document.getElementById('buyDate').value + if (!buyDate) { + w2alert('구매일을 선택하세요') + return + } + loadExistingPurchase(ctx.memberId, buyDate) + }) + } + } + }) +} + +/* ------------------------------------------------- + 서비스 Grid +------------------------------------------------- */ +function createServiceGrid() { + + new w2grid({ + name: 'serviceGrid', + box: '#serviceGrid', + show: { + footer: true, + // selectColumn: true + }, + columns: [ + { field: 'recid', text: 'NO', size: '50px', attr: 'align=center' }, + { field: 'itm_cd', text: '상품명', size: '100px' }, + { field: 'itm_area', text: '면적(m²)', size: '100px', editable: { type: 'int' } }, + { field: 'itm_amt', text: '금액', size: '100px', attr: 'align=right' }, + { field: 'itm_qty', text: '수량', size: '80px', editable: { type: 'int' } }, + { field: 'dis_rt', text: '할인율', size: '80px', editable: { type: 'int' } }, + { field: 'supply', text: '공급가액', size: '120px', attr: 'align=right' }, + { field: 'vat_amt', text: '부가세', size: '100px', attr: 'align=right' }, + { field: 'sum_amt', text: '결제금액', size: '120px', attr: 'align=right' }, + { field: 'end_dt', text: '만료일자', size: '110px', editable: { type: 'date' } }, + { field: 'rmks', text: '비고', size: '150px', editable: { type: 'text' } } + ], + records: [], + onChange() { + calcSummary() + } + }) +} + +/* ------------------------------------------------- + 상품 목록 +------------------------------------------------- */ +function createProductList() { + + new w2grid({ + name: 'productList', + box: '#productList', + columns: [ + { field: 'name', text: '상품명', size: '120px' }, + { field: 'area', text: '제공량', size: '100px', attr: 'align=right' }, + { field: 'price', text: '단가', size: '100px', attr: 'align=right' } + ], + records: [ + { recid: 1, name: '다이아', area: 10000000, price: 10000000 }, + { recid: 2, name: '골드', area: 1000000, price: 5000000 }, + { recid: 3, name: '실버', area: 100000, price: 1000000 } + ], + onDblClick(event) { + const rec = this.get(event.recid) + addServiceFromProduct(rec) + } + }) +} + +/* ------------------------------------------------- + 상품 → 서비스 Grid 추가 +------------------------------------------------- */ +function addServiceFromProduct(p) { + + const g = w2ui.serviceGrid + const recid = g.records.length + 1 + + const supply = p.price + const vat = Math.floor(supply * 0.1) + const total = supply + vat + + g.add({ + recid, + itm_cd: p.name, + itm_area: p.area, + itm_amt: p.price, + itm_qty: 1, + dis_rt: 0, + supply, + vat_amt: vat, + sum_amt: total, + end_dt: '', + rmks: '' + }) + + calcSummary() +} + +/* ------------------------------------------------- + 기존 구매 불러오기 +------------------------------------------------- */ +function loadExistingPurchase(memberId, buyDate) { + + fetch(`/kngil/bbs/adm_service.php?member_id=${memberId}&buy_date=${buyDate}`) + .then(res => res.json()) + .then(json => { + + if (json.status !== 'success') { + w2alert(json.message || '조회 실패') + return + } + + const g = w2ui.serviceGrid + g.clear() + + json.records.forEach((r, i) => { + g.add({ + recid: i + 1, + itm_cd: r.itm_cd, + itm_area: Number(r.itm_area), + itm_amt: Number(r.itm_amt), + itm_qty: Number(r.itm_qty), + dis_rt: Number(r.dis_rt), + supply: Number(r.supply), + vat_amt: Number(r.vat_amt), + sum_amt: Number(r.sum_amt), + end_dt: r.end_dt, + rmks: r.rmks, + _existing: true + }) + + // 🔒 기존 구매 회색 처리 + g.set(i + 1, { + w2ui: { style: 'background:#f3f3f3;color:#555' } + }) + }) + + g.refresh() + calcSummary() + }) + .catch(err => { + console.error(err) + w2alert('서버 오류') + }) +} + +/* ------------------------------------------------- + 합계 계산 +------------------------------------------------- */ +function calcSummary() { + + let supply = 0 + let vat = 0 + let total = 0 + + w2ui.serviceGrid.records.forEach(r => { + supply += Number(r.supply || 0) + vat += Number(r.vat_amt || 0) + total += Number(r.sum_amt || 0) + }) + + document.getElementById('sumSupply').innerText = supply.toLocaleString() + document.getElementById('sumVat').innerText = vat.toLocaleString() + document.getElementById('sumTotal').innerText = total.toLocaleString() +} diff --git a/kngil/js/adm_service.js b/kngil/js/adm_service.js new file mode 100644 index 0000000..71a4c05 --- /dev/null +++ b/kngil/js/adm_service.js @@ -0,0 +1,678 @@ +import { w2grid, w2ui, w2popup, w2alert, w2confirm } +from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' + +/* ------------------------------------------------- + 공통 유틸 +------------------------------------------------- */ +function destroyGrid(name) { + if (w2ui[name]) w2ui[name].destroy() +} + +function fmtNum(val) { + return Number(val || 0).toLocaleString() +} + +function fmtPrice(val) { + const v = Number(val || 0) + return Number.isInteger(v) + ? v.toLocaleString() + : v.toLocaleString(undefined, { minimumFractionDigits: 2 }) +} + +/* ------------------------------------------------- + 서비스 등록 팝업 +------------------------------------------------- */ +export function openServiceRegisterPopup(ctx) { + + destroyGrid('serviceGrid') + destroyGrid('productList') + + w2popup.open({ + title: '서비스 등록', + width: 1300, + height: 720, + modal: true, + body: ` + + `, + onOpen(event) { + event.onComplete = () => { + + createServiceGrid() + createProductList() + + const buyDateInput = document.getElementById('buyDate') + const today = new Date().toISOString().slice(0, 10) + + // 기본 구매일 = 오늘 + buyDateInput.value = today + + // 자동 조회 + loadExistingPurchase(ctx.memberId, today) + + // 수동 조회 버튼 + document.getElementById('btnSearchBuy').addEventListener('click', () => { + const buyDate = buyDateInput.value + if (!buyDate) { + w2alert('구매일을 선택하세요') + return + } + loadExistingPurchase(ctx.memberId, buyDate) + }) + + document.getElementById('btnDeleteRow') + .addEventListener('click', deleteSelectedRows) + + document.getElementById('btnSaveService') + .addEventListener('click', () => saveService(ctx)) + } + } + }) +} + +/* ------------------------------------------------- + 서비스 Grid +------------------------------------------------- */ +function createServiceGrid() { + + new w2grid({ + name: 'serviceGrid', + box: '#serviceGrid', + show: { + footer: true, + selectColumn: true + }, + multiSelect: false, + + columns: [ + { field: 'recid', text: 'NO', size: '50px', attr: 'align=center' }, + { field: 'itm_nm', text: '상품명', size: '120px', editable: { type: 'text' } }, + { field: 'area', text: '제공량', size: '120px', editable: { type: 'text' } }, + { field: 'itm_cd', text: '상품코드', hidden: true }, + { + field: 'itm_amt', + text: '단가', + size: '100px', + attr: 'align=right', + render: r => fmtPrice(r.itm_amt) + }, + { + field: 'itm_qty', + text: '수량', + size: '80px', + attr: 'align=right', + editable: { type: 'int' }, + render: r => fmtNum(r.itm_qty) + }, + { + field: 'dis_rt', + text: '할인율', + size: '80px', + editable: { type: 'int' } + }, + { + field: 'supply', + text: '공급가액', + size: '120px', + attr: 'align=right', + render: r => fmtNum(r.supply) + }, + { + field: 'vat_amt', + text: '부가세', + size: '100px', + attr: 'align=right', + render: r => fmtNum(r.vat_amt) + }, + { + field: 'sum_amt', + text: '결제금액', + size: '120px', + attr: 'align=right', + render: r => fmtNum(r.sum_amt) + }, + { + field: 'itm_area', + text: '적용면적(m²)', + size: '100px', + attr: 'align=right', + editable: { type: 'int' }, + render: r => fmtNum(r.itm_area) + }, + { + field: 'add_area', + text: '추가면적(m²)', + size: '110px', + attr: 'align=right', + editable: { type: 'int' }, + render: r => fmtNum(r.add_area) + }, + { + field: 'sum_area', + text: '합계면적(m²)', + size: '110px', + attr: 'align=right', + editable: { type: 'int' }, + render: r => fmtNum(r.sum_area) + }, + { + field: 'end_dt', + text: '만료일자', + size: '110px', + editable: { type: 'date' } + }, + { + field: 'ok_yn', + text: '승인여부', + size: '80px', + attr: 'align=center', + editable: { + type: 'combo', + items: [ + { id: 'N', text: '미승인' }, + { id: 'Y', text: '승인' } + ], + openOnFocus: true + }, + render(record) { + if (record.ok_yn === 'Y') return '승인' + return '미승인' + } + }, + { field: 'rmks', text: '비고', size: '150px', editable: { type: 'text' } } + ], + + records: [], + + /* ----------------------------- + 일반 필드 처리 (date 제외) + ----------------------------- */ + onChange(event) { + event.onComplete = (ev) => { + const g = w2ui.serviceGrid + const field = g.columns[ev.column].field + + let val = ev.value_new + if (typeof val === 'object' && val !== null) val = val.id + + g.set(ev.recid, { [field]: val }) + + if (['itm_qty','dis_rt','add_area'].includes(field)) { + recalcRow(ev.recid) + } + } + }, + + /* ----------------------------- + 날짜 전용 처리 (핵심) + ----------------------------- */ + onEditField(event) { + if (event.field !== 'end_dt') return; + + event.onComplete = () => { + const g = w2ui.serviceGrid; + const recid = event.recid; + + const input = document.querySelector( + `#grid_${g.name}_edit input` + ); + if (!input) return; + + input.addEventListener('change', () => { + + // 🔥 날짜는 문자열 그대로 즉시 확정 + g.set(recid, { + end_dt: input.value // YYYY-MM-DD + }); + + // 🔥 w2ui 방식으로 edit 종료 + input.blur(); + + g.refreshRow(recid); + }); + }; + } + }); +} + + +/* ------------------------------------------------- + 상품 목록 +------------------------------------------------- */ +function createProductList() { + + new w2grid({ + name: 'productList', + box: '#productList', + url: '/kngil/bbs/adm_product_popup.php', + columns: [ + { field: 'itm_nm', text: '상품명', size: '120px' }, + { + field: 'area', + text: '제공량', + size: '100px', + attr: 'align=right', + render(record) { + return Number(record.area || 0).toLocaleString() + } + }, + { + field: 'itm_amt', + text: '단가', + size: '120px', + attr: 'align=right', + render(record) { + const v = Number(record.itm_amt || 0) + // 정수면 소수점 제거 + return Number.isInteger(v) + ? v.toLocaleString() + : v.toLocaleString(undefined, { minimumFractionDigits: 2 }) + } + } + ], + onDblClick(event) { + event.onComplete = () => { + const recid = event.detail?.recid + if (!recid) return + + const rec = this.get(recid) + if (!rec) return + + addServiceFromProduct(rec) + } + } + }) +} + + +/* ------------------------------------------------- + 상품 → 서비스 Grid 추가 +------------------------------------------------- */ +function addServiceFromProduct(p) { + + const g = w2ui.serviceGrid + const recid = g.records.length + 1 + + const qty = 1 + const area = Number(p.area || 0) + const unit = Number(p.itm_amt || 0) + + const today = new Date() + const endDt = `${today.getFullYear()}-12-31` + + g.add({ + recid, + itm_cd: p.itm_cd, + itm_nm: p.itm_nm, + + area: area, // 제공량 + itm_qty: qty, + itm_amt: unit, + dis_rt: 0, + + itm_area: area * qty, + add_area: 0, + sum_area: area * qty, + + supply: unit * qty, + vat_amt: Math.floor(unit * qty * 0.1), + sum_amt: Math.floor(unit * qty * 1.1), + + end_dt: endDt, + ok_yn: 'N', + rmks: '', + + _new: true + }) + + recalcRow(recid) +} + + + +/* ------------------------------------------------- + 행 삭제 +------------------------------------------------- */ +function deleteSelectedRows() { + + const g = w2ui.serviceGrid + const sel = g.getSelection() + + if (!sel.length) { + w2alert('삭제할 서비스를 선택하세요') + return + } + + const recid = sel[0] + const row = g.get(recid) + + if (!row || !row.sq_no) { + w2alert('삭제할 수 없는 항목입니다.') + return + } + + if (row.ok_yn === 'Y') { + w2alert('승인된 항목은 삭제할 수 없습니다.') + return + } + + w2confirm('선택한 서비스를 삭제하시겠습니까?') + .yes(() => { + deleteServiceImmediately(row) + }) +} + +function deleteServiceImmediately(row) { + console.log({ + action: 'delete', + member_id: row.member_id, + sq_no: row.sq_no + }) + + fetch('/kngil/bbs/adm_service.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'delete', + member_id: row.member_id, // ✅ 여기 중요 + sq_no: row.sq_no + }) + }) + .then(res => res.json()) + .then(res => { + if (res.status === 'success') { + w2alert('삭제되었습니다.') + w2ui.serviceGrid.remove(row.recid) + calcSummary() + } else { + w2alert(res.message || '삭제 실패') + } + }) + .catch(() => w2alert('서버 오류')) +} + + +function isServiceItem(r) { + return r.itm_cd && r.itm_cd.startsWith('ZET01') + || r.itm_nm === '서비스' +} + +/* ------------------------------------------------- + 기존 구매 불러오기 +------------------------------------------------- */ +function loadExistingPurchase(memberId, buyDate) { + + fetch('/kngil/bbs/adm_service.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'list', + member_id: memberId, + buy_date: buyDate + }) + }) + .then(res => res.json()) + .then(json => { + + if (json.status !== 'success') { + w2alert(json.message || '조회 실패') + return + } + + const g = w2ui.serviceGrid + g.clear() + + json.records.forEach((r, i) => { + g.add({ + recid: i + 1, + member_id: memberId, + sq_no: r.sq_no, + + itm_cd: r.itm_cd, + itm_nm: r.itm_nm, + itm_area: Number(r.itm_area || 0), + add_area: Number(r.add_area || 0), + itm_amt: Number(r.itm_amt), + itm_qty: Number(r.itm_qty), + + // area + area: isServiceItem(r) + ? 1 + : (r.itm_qty ? Number(r.itm_area) / Number(r.itm_qty) : 0), + + dis_rt: Number(r.dis_rt || 0), // 문자열 → 숫자 + supply: Number(r.buy_amt), + vat_amt: Number(r.vat_amt), + sum_amt: Number(r.sum_amt), + + end_dt: r.end_dt || '', + ok_yn: r.ok_yn || 'N', + rmks: r.rmks ?? '', // undefined 방지 + + _existing: true + }) + + g.set(i + 1, { + w2ui: { style: 'background:#f3f3f3;color:#555' } + }) + }) + + g.refresh() + // 🔥 모든 행 재계산 + g.records.forEach(r => { + if (!r._deleted) { + recalcRow(r.recid) + } + }) + calcSummary() + }) + .catch(() => w2alert('서버 오류')) +} + +/* ------------------------------------------------- + 행 단위 재계산 +------------------------------------------------- */ +function recalcRow(recid) { + + const g = w2ui.serviceGrid + const r = g.get(recid) + if (!r) return + + const qty = Number(r.itm_qty || 0) + const unit = Number(r.itm_amt || 0) + const rate = Number(r.dis_rt || 0) + const area = Number(r.area || 0) + const add = Number(r.add_area || 0) + + // 🔥 적용면적 = 제공량 * 수량 + r.itm_area = area * qty + + // 🔥 공급가액 = 단가 * 수량 * (1 - 할인율) + const base = unit * qty + const discount = Math.floor(base * (rate / 100)) + r.supply = base - discount + + // 🔥 부가세 / 결제금액 + r.vat_amt = Math.floor(r.supply * 0.1) + r.sum_amt = r.supply + r.vat_amt + + // 🔥 합계면적 + r.sum_area = r.itm_area + add + + g.refreshRow(recid) + calcSummary() +} + + + + + +/* ------------------------------------------------- + 합계 계산 +------------------------------------------------- */ +function calcSummary() { + + let supply = 0 + let vat = 0 + let total = 0 + + w2ui.serviceGrid.records.forEach(r => { + if (r._deleted) return + supply += Number(r.supply || 0) + vat += Number(r.vat_amt || 0) + total += Number(r.sum_amt || 0) + }) + + document.getElementById('sumSupply').innerText = supply.toLocaleString() + document.getElementById('sumVat').innerText = vat.toLocaleString() + document.getElementById('sumTotal').innerText = total.toLocaleString() +} + +function saveService(ctx) { + + const buyDate = document.getElementById('buyDate').value + if (!buyDate) { + w2alert('구매일을 선택하세요') + return + } + + const g = w2ui.serviceGrid + + // 🔥🔥🔥 핵심: 현재 편집중인 셀 강제 반영 + g.save() + + const items = g.records.map(r => ({ + sq_no: r.sq_no || null, + itm_cd: r.itm_cd, + itm_area: r.itm_area, + add_area: r.add_area || 0, + itm_amt: r.itm_amt, + itm_qty: r.itm_qty, + + dis_rt: r.dis_rt, + buy_amt: r.supply, + vat_amt: r.vat_amt, + sum_amt: r.sum_amt, + end_dt: dateToYMD(r.end_dt), + ok_yn: r.ok_yn || 'N', + rmks: r.rmks, + + _new: r._new || false, + _existing: r._existing || false, + _deleted: r._deleted || false + })) + + fetch('/kngil/bbs/adm_service.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'save', + member_id: ctx.memberId, + buy_date: buyDate, + items + }) + }) + .then(res => res.json()) + .then(res => { + if (res.status === 'success') { + w2alert('저장되었습니다.') + loadExistingPurchase(ctx.memberId, buyDate) + } else { + w2alert(res.message || '저장 실패') + } + }) +} + +function normalizeDate(val) { + if (!val) return null + + // 이미 YYYY-MM-DD면 그대로 + if (/^\d{4}-\d{2}-\d{2}$/.test(val)) { + return val + } + + // MM/DD/YYYY → YYYY-MM-DD + const d = new Date(val) + if (isNaN(d)) return null + + return d.toISOString().slice(0, 10) +} + + +function dateToYMD(val) { + if (!val) return null + + // Date 객체 + if (val instanceof Date) { + return [ + val.getFullYear(), + String(val.getMonth() + 1).padStart(2, '0'), + String(val.getDate()).padStart(2, '0') + ].join('-') + } + + // 문자열 (MM/DD/YYYY or YYYY-MM-DD) + if (typeof val === 'string') { + + // 이미 YYYY-MM-DD + if (/^\d{4}-\d{2}-\d{2}$/.test(val)) { + return val + } + + // MM/DD/YYYY + const d = new Date(val) + if (!isNaN(d)) { + return [ + d.getFullYear(), + String(d.getMonth() + 1).padStart(2, '0'), + String(d.getDate()).padStart(2, '0') + ].join('-') + } + } + + return null +} \ No newline at end of file diff --git a/kngil/js/adm_use_history.js b/kngil/js/adm_use_history.js new file mode 100644 index 0000000..206ae04 --- /dev/null +++ b/kngil/js/adm_use_history.js @@ -0,0 +1,158 @@ +import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js' +// 파일이 실제 존재하는지 확인 필수! 존재하지 않으면 아래 코드가 모두 멈춥니다. +import { bindProductPopupEvents } from '/kngil/js/adm_common.js' + + + +export function openuseHistoryPopup(memberId = '',isSuperAdmin='') { + // 기존 그리드 안전하게 제거 + if (w2ui.UseHistoryGrid) { + w2ui.UseHistoryGrid.destroy(); + } + + w2popup.open({ + title: '서비스 사용 이력', + width: 1100, + height: 600, + modal: true, + body: + /* + ` +

+ */ + ` +

+ +

+ 회원 ID + +

+ +

+ 성명 + +

+ +

+ 부서 + +

+ + +

+ +

+ + `, + onOpen(event) { + event.onComplete = () => { + const searchBtn = document.getElementById('btnSearchHistory'); + const searchInput = document.getElementById('searchMemberId'); + const inputUnm = document.getElementById('searchUserNm'); + const inputDnm = document.getElementById('searchDeptNm'); + + // 조회 버튼 클릭 시 동작 + if (searchBtn) { + searchBtn.onclick = () => { + loadUseHistoryData(searchInput.value,inputUnm,inputDnm); + }; + } + + // 엔터키 지원 + if (searchInput,inputUnm,inputDnm) { + searchInput.onkeydown = (e) => { + if (e.key === 'Enter') searchBtn.click(); + }; + } + + createUseHistoryGrid(memberId); + loadUseHistoryData(memberId); + } + } + }); +} + +function createUseHistoryGrid(memberId) { + new w2grid({ + name: 'UseHistoryGrid', + box: '#UseHistoryGrid', + show: { + //toolbar: true, + footer: true, + lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다. + }, + columns: [ + // field 이름이 PHP에서 내려주는 JSON 키값과 정확히 일치해야 함! + { field: 'member_id', text: '회원ID', size: '100px',style: 'text-align: center', attr: 'align=center',hidden: true }, // name 아님! + { field: 'use_dt', text: '사용일자', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'user_id', text: '사용자ID', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'sq_no', text: '순번', size: '100px',style: 'text-align: center', attr: 'align=center' ,hidden: true}, // name 아님! + { field: 'user_nm', text: '성명', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'dept_nm', text: '부서', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'posit_nm', text: '직위', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'use_yn', text: '사용여부', size: '80px', attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'use_area', text: '사용면적', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님! + { field: 'ser_bc', text: '서비스구분', size: '150px', attr: 'align=center' ,sortable: true}, // name 아님! + + + ] + }); +} + +async function loadUseHistoryData(memberId = ''){ + try { + const grid = w2ui.UseHistoryGrid; + if (!grid) return; + + // DOM에서 현재 입력된 값을 실시간으로 읽어옴 + const sMid = document.getElementById('searchMemberId')?.value || ''; + const sUnm = document.getElementById('searchUserNm')?.value || ''; + const sDnm = document.getElementById('searchDeptNm')?.value || ''; + + grid.lock('조회 중...', true); + + const searchParams = new URLSearchParams(); + searchParams.append('member_id', sMid); + searchParams.append('user_nm', sUnm); + searchParams.append('dept_nm', sDnm); + + const response = await fetch('/kngil/bbs/adm_use_history.php', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: searchParams + }); + + if (!response.ok) throw new Error(`서버 응답 오류: ${response.status}`); + + const data = await response.json(); + + if (!Array.isArray(data)) { + throw new Error('응답 데이터 형식 오류'); + } + + grid.clear(); + grid.add(data); + grid.unlock(); + + } catch (e) { + console.error(e); + if (w2ui.UseHistoryGrid) w2ui.UseHistoryGrid.unlock(); + w2alert('사용이력 조회 실패: ' + e.message); + } +} +//////////////////////////////////////////////////////////////////////// diff --git a/kngil/js/common.js b/kngil/js/common.js new file mode 100644 index 0000000..846129c --- /dev/null +++ b/kngil/js/common.js @@ -0,0 +1,4289 @@ +/** + * Common JavaScript + * 공통 기능 모음 + */ +(function() { + 'use strict'; + + // ============================================ + // Scroll Manager + // ============================================ + class ScrollManager { + constructor() { + this.scrollY = 0; + this.wrap = null; + this.isLocked = false; + } + + /** + * 스크린 높이 계산 및 CSS 변수 설정 + */ + syncHeight() { + try { + document.documentElement.style.setProperty( + '--window-inner-height', + `${window.innerHeight}px` + ); + } catch (error) { + console.error('[ScrollManager] syncHeight error:', error); + } + } + + /** + * 초기화 + */ + init() { + this.syncHeight(); + + // 윈도우 리사이즈 시 높이 재설정 + window.addEventListener('resize', () => { + this.syncHeight(); + }); + } + } + + // ScrollManager 인스턴스 생성 및 초기화 + const scrollManager = new ScrollManager(); + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + scrollManager.init(); + }); + } else { + scrollManager.init(); + } + + // 전역 노출 + window.ScrollManager = ScrollManager; + window.scrollManager = scrollManager; + + // ============================================ + // Include Handler + // ============================================ + class IncludeHandler { + /** + * 초기화 + */ + init() { + window.addEventListener('load', () => { + this.loadIncludes(); + }); + } + + /** + * data-include-path 속성을 가진 요소들의 HTML 포함 처리 + */ + loadIncludes() { + if (!document.querySelector('[data-include-path]')) return; + const allElements = document.getElementsByTagName('*'); + Array.prototype.forEach.call(allElements, (el) => { + const includePath = el.dataset.includePath; + if (includePath) { + this.loadInclude(el, includePath); + } + }); + } + + /** + * 개별 include 로드 + */ + loadInclude(element, path) { + const xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = () => { + if (xhttp.readyState === 4) { + if (xhttp.status === 200) { + element.outerHTML = xhttp.responseText; + } else { + console.error(`[IncludeHandler] Failed to load: ${path}`, xhttp.status); + } + } + }; + xhttp.open('GET', path, true); + xhttp.send(); + } + } + + const includeHandler = new IncludeHandler(); + includeHandler.init(); + + // ============================================ + // Popup Manager + // ============================================ + class PopupManager { + constructor() { + this.popupScriptLoaded = false; + this.currentPopupId = null; + this.popupMap = { + agreement: '#pop_agreement', + join: '#pop_join', + login: '#pop_login', + mypage01: '#pop_mypage01', + mypage02: '#pop_mypage02', + mypage03: '#pop_mypage03', + search: '#pop_search', + password: '#pop_password', + privacy: '#pop_privacy' + }; + } + + /** + * 팝업 스크롤 처리 (Lenis 중지) + */ + handlePopupScroll() { + $('body').css('overflow', 'hidden'); + $('body').on('wheel', function(e) { + e.stopPropagation(); + }); + + if (typeof window.lenis !== 'undefined' && window.lenis) { + window.lenis.stop(); + } else if (typeof lenis !== 'undefined' && lenis) { + lenis.stop(); + } + } + + /** + * 팝업 스크립트 로드 + */ + loadPopupScript(callback) { + if (this.popupScriptLoaded || typeof PopupController !== 'undefined') { + if (callback) callback(); + return; + } + + $.getScript('./assets/js/popup.js') + .done(() => { + this.popupScriptLoaded = true; + if (callback) callback(); + }) + .fail((jqxhr, settings, exception) => { + console.error('[PopupManager] Failed to load popup.js:', exception); + if (callback) callback(); + }); + } + + /** + * 팝업 열기 + */ + open(popupId) { + if (!popupId) { + console.warn('[PopupManager] Popup ID is required'); + return; + } + + if (this.currentPopupId && this.currentPopupId !== popupId) { + $(this.currentPopupId).hide(); + } + this.currentPopupId = popupId; + + const $popup = $(popupId); + if ($popup.length === 0) { + console.warn(`[PopupManager] Popup not found: ${popupId}`); + return; + } + + $popup.show(0, () => { + this.loadPopupScript(() => { + this.handlePopupScroll(); + }); + }); + } + + /** + * 개인정보 보호정책 팝업 열기 + */ + openPrivacy(type = 'privacy') { + var id = '#pop_privacy'; + if (this.currentPopupId && this.currentPopupId !== id) { + $(this.currentPopupId).hide(); + } + this.currentPopupId = id; + + const $popup = $(id); + if ($popup.length === 0) { + console.warn('[PopupManager] Privacy popup not found'); + return; + } + + $popup.show(0, () => { + this.loadPopupScript(() => { + this.handlePopupScroll(); + this.setPrivacyTab(type); + }); + }); + } + + /** + * 개인정보 보호정책 탭 설정 + */ + setPrivacyTab(type) { + const $privacyTab = $('#pop_privacy li.tab-privacy'); + const $agreementTab = $('#pop_privacy li.tab-agreement'); + const $priContent = $('.tab-content.pri'); + const $agrContent = $('.tab-content.agr'); + + if (type === 'privacy') { + $privacyTab.addClass('on'); + $agreementTab.removeClass('on'); + $priContent.addClass('show'); + $agrContent.removeClass('show'); + } else if (type === 'agreement') { + $agreementTab.addClass('on'); + $privacyTab.removeClass('on'); + $agrContent.addClass('show'); + $priContent.removeClass('show'); + } + + // 탭 콘텐츠 스크롤 처리 + $('#pop_privacy .tab-content').css('overflow', 'auto'); + $('#pop_privacy .tab-content').on('wheel', function(e) { + e.stopPropagation(); + }); + + // PrivacyTabController가 있으면 사용 + if (typeof PrivacyTabController !== 'undefined' && PrivacyTabController.switchTab) { + const $targetTab = type === 'privacy' ? $privacyTab : $agreementTab; + PrivacyTabController.switchTab($targetTab); + } + } + + /** + * 전역 함수 생성 + */ + createGlobalFunctions() { + // 일반 팝업 열기 함수들 + Object.keys(this.popupMap).forEach(key => { + if (key === 'privacy') return; // privacy는 별도 처리 + + window[key] = () => { + this.open(this.popupMap[key]); + }; + }); + + // 개인정보 보호정책 팝업 + window.privacy = (type) => { + this.openPrivacy(type); + }; + } + } + + const popupManager = new PopupManager(); + popupManager.createGlobalFunctions(); + + // 전역 노출 + window.PopupManager = PopupManager; + window.popupManager = popupManager; + + // ============================================ + // Lenis Manager + // ============================================ + class LenisManager { + constructor() { + this.lenisInstance = null; + this.isSitemapOpen = false; + } + + /** + * Lenis 초기화 + */ + init() { + if (this.isSitemapOpen) { + return; + } + + if (typeof Lenis === 'undefined') { + return; + } + + // 기존 lenis가 있으면 destroy + this.destroy(); + + // 새 lenis 인스턴스 생성 + this.lenisInstance = new Lenis({ + lerp: 0.1, + smoothWheel: true, + smoothTouch: false, + }); + + // 전역 변수로 설정 + window.lenis = this.lenisInstance; + + // 이벤트 리스너 추가 + this.lenisInstance.on('scroll', () => { + // 스크롤 이벤트 처리 + }); + + if (typeof ScrollTrigger !== 'undefined') { + this.lenisInstance.on('scroll', ScrollTrigger.update); + } + + if (typeof gsap !== 'undefined' && gsap.ticker) { + gsap.ticker.add((time) => { + if (this.lenisInstance && !this.isSitemapOpen) { + this.lenisInstance.raf(time * 1000); + } + }); + gsap.ticker.lagSmoothing(0); + } + } + + /** + * Lenis 제거 + */ + destroy() { + if (typeof window.lenis !== 'undefined' && window.lenis && window.lenis.destroy) { + try { + window.lenis.destroy(); + } catch (e) { + console.warn('[LenisManager] Destroy error:', e); + } + window.lenis = null; + } + + if (typeof lenis !== 'undefined' && lenis !== window.lenis && lenis && lenis.destroy) { + try { + lenis.destroy(); + } catch (e) { + console.warn('[LenisManager] Destroy error:', e); + } + } + + this.lenisInstance = null; + } + + /** + * Lenis 시작 + */ + start() { + if (this.lenisInstance && this.lenisInstance.start) { + this.lenisInstance.start(); + } + } + + /** + * Lenis 중지 + */ + stop() { + if (this.lenisInstance && this.lenisInstance.stop) { + this.lenisInstance.stop(); + } + } + + /** + * 사이트맵 열림 상태 설정 + */ + setSitemapOpen(isOpen) { + this.isSitemapOpen = isOpen; + } + } + + const lenisManager = new LenisManager(); + + // 전역 함수로 노출 (하위 호환성) + window.handleStartLenis = () => { + lenisManager.init(); + }; + + // 전역 노출 + window.LenisManager = LenisManager; + window.lenisManager = lenisManager; + + // ============================================ + // Sitemap Manager + // ============================================ + class SitemapManager { + constructor() { + this.isOpen = false; + this.preventScrollHandler = null; + this.scrollLockInterval = null; + this.savedScrollY = 0; + } + + /** + * 사이트맵 스크롤 처리 + */ + handleScroll(isOpen) { + this.isOpen = isOpen; + lenisManager.setSitemapOpen(isOpen); + + if (isOpen) { + this.lockScroll(); + } else { + this.unlockScroll(); + } + } + + /** + * 스크롤 잠금 + */ + lockScroll() { + // 현재 스크롤 위치 저장 + this.savedScrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; + document.body.setAttribute('data-scroll-y', this.savedScrollY); + document.body.style.position = 'fixed'; + document.body.style.top = `-${this.savedScrollY}px`; + document.body.style.width = '100%'; + document.body.style.overflow = 'hidden'; + document.documentElement.style.overflow = 'hidden'; + + // Lenis 제거 + lenisManager.destroy(); + + // Lenis.prototype.raf 오버라이드 + this.overrideLenisRaf(); + + // Lenis 클래스 제거 + document.documentElement.classList.remove('lenis-scrolling', 'lenis', 'lenis-smooth'); + document.body.classList.remove('lenis-scrolling', 'lenis', 'lenis-smooth'); + document.documentElement.classList.add('lenis-stopped'); + document.body.classList.add('lenis-stopped'); + + // 스크롤 이벤트 차단 + this.preventScrollHandler = (e) => { + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + return false; + }; + + const events = ['wheel', 'touchmove', 'scroll']; + events.forEach(eventType => { + document.addEventListener(eventType, this.preventScrollHandler, { passive: false, capture: true }); + window.addEventListener(eventType, this.preventScrollHandler, { passive: false, capture: true }); + }); + + // 스크롤 위치 강제 고정 + this.scrollLockInterval = setInterval(() => { + const savedScrollY = document.body.getAttribute('data-scroll-y'); + if (savedScrollY) { + const currentScrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; + if (Math.abs(currentScrollY - parseInt(savedScrollY)) > 1) { + window.scrollTo(0, parseInt(savedScrollY)); + } + } + }, 16); + + document.body.setAttribute('data-scroll-lock-interval', this.scrollLockInterval); + } + + /** + * Lenis raf 오버라이드 + */ + overrideLenisRaf() { + if (typeof Lenis !== 'undefined' && Lenis.prototype) { + if (!Lenis.prototype._originalRaf) { + Lenis.prototype._originalRaf = Lenis.prototype.raf; + } + Lenis.prototype.raf = (time) => { + if (this.isOpen) { + return false; + } + if (Lenis.prototype._originalRaf) { + return Lenis.prototype._originalRaf.call(this, time); + } + return false; + }; + } + + // 기존 lenis 인스턴스의 raf 메서드도 오버라이드 + const lenisInstances = []; + if (window.lenis) lenisInstances.push(window.lenis); + if (typeof lenis !== 'undefined' && lenis) lenisInstances.push(lenis); + + lenisInstances.forEach(instance => { + if (instance && !instance._rafOverridden) { + instance._originalRaf = instance.raf; + instance.raf = (time) => { + if (this.isOpen) { + return false; + } + if (instance._originalRaf) { + return instance._originalRaf.call(instance, time); + } + return false; + }; + instance._rafOverridden = true; + } + }); + } + + /** + * 스크롤 잠금 해제 + */ + unlockScroll() { + // 스크롤 위치 고정 인터벌 제거 + if (this.scrollLockInterval) { + clearInterval(this.scrollLockInterval); + this.scrollLockInterval = null; + document.body.removeAttribute('data-scroll-lock-interval'); + } + + // 이벤트 리스너 제거 + if (this.preventScrollHandler) { + const events = ['wheel', 'touchmove', 'scroll']; + events.forEach(eventType => { + document.removeEventListener(eventType, this.preventScrollHandler, { capture: true }); + window.removeEventListener(eventType, this.preventScrollHandler, { capture: true }); + }); + this.preventScrollHandler = null; + } + + // Lenis raf 오버라이드 복원 + this.restoreLenisRaf(); + + // Lenis 클래스 제거 + document.documentElement.classList.remove('lenis-stopped'); + document.body.classList.remove('lenis-stopped'); + + // 스타일 제거 + document.body.style.position = ''; + document.body.style.top = ''; + document.body.style.width = ''; + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; + + // 스크롤 위치 복원 + const scrollY = document.body.getAttribute('data-scroll-y'); + if (scrollY) { + window.scrollTo(0, parseInt(scrollY)); + } + + document.body.removeAttribute('data-scroll-y'); + + // Lenis 재생성 + lenisManager.init(); + } + + /** + * Lenis raf 복원 + */ + restoreLenisRaf() { + if (typeof Lenis !== 'undefined' && Lenis.prototype && Lenis.prototype._originalRaf) { + Lenis.prototype.raf = Lenis.prototype._originalRaf; + delete Lenis.prototype._originalRaf; + } + + const lenisInstances = []; + if (window.lenis) lenisInstances.push(window.lenis); + if (typeof lenis !== 'undefined' && lenis) lenisInstances.push(lenis); + + lenisInstances.forEach(instance => { + if (instance && instance._rafOverridden && instance._originalRaf) { + instance.raf = instance._originalRaf; + delete instance._originalRaf; + delete instance._rafOverridden; + } + }); + } + + /** + * 사이트맵 토글 + */ + toggle() { + const $sitemap = $('.sitemap'); + const $menuAll = $('.menu-all'); + const isOpen = $sitemap.hasClass('open'); + + $menuAll.toggleClass('open'); + $sitemap.toggleClass('open'); + + this.handleScroll(!isOpen); + } + } + + const sitemapManager = new SitemapManager(); + + // 전역 함수로 노출 (하위 호환성) + window.sitemap = () => { + sitemapManager.toggle(); + }; + + // 전역 노출 + window.SitemapManager = SitemapManager; + window.sitemapManager = sitemapManager; + + // ============================================ + // Top Button Controller + // ============================================ + class TopButtonController { + constructor() { + this.topButton = null; + this.bottomSpace = 230; + this.defaultBottom = '60px'; + } + + /** + * 초기화 + */ + init() { + // 메인 페이지가 아닐 때만 동작 + const isMainPage = document.querySelector('.wrap.main') || document.querySelector('.main'); + if (isMainPage) { + return; + } + + this.topButton = document.querySelector('.btn-top'); + if (!this.topButton) { + return; + } + + this.setupEventListeners(); + this.setupHeaderAnimation(); + } + + /** + * 이벤트 리스너 설정 + */ + setupEventListeners() { + window.addEventListener('scroll', () => this.adjustButtonPosition()); + window.addEventListener('load', () => this.adjustButtonPosition()); + } + + /** + * 탑 버튼 위치 조정 + */ + adjustButtonPosition() { + if (!this.topButton) return; + + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + + if (scrollY + windowHeight >= documentHeight - this.bottomSpace) { + this.topButton.style.bottom = `${this.bottomSpace + (scrollY + windowHeight - documentHeight)}px`; + } else { + this.topButton.style.bottom = this.defaultBottom; + } + } + + /** + * 헤더 애니메이션 설정 + */ + setupHeaderAnimation() { + if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') { + return; + } + + const header = document.querySelector('.header'); + if (!header) { + return; + } + + const showNav = gsap.from('.header', { + yPercent: -200, + paused: true, + duration: 0.2 + }).progress(1); + + ScrollTrigger.create({ + start: 'top top', + end: 99999, + onUpdate: (self) => { + self.direction === -1 ? showNav.play() : showNav.reverse(); + } + }); + } + } + + const topButtonController = new TopButtonController(); + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + topButtonController.init(); + }); + } else { + topButtonController.init(); + } + + // 전역 노출 + window.TopButtonController = TopButtonController; + window.topButtonController = topButtonController; + + // ============================================ + // Header Menu Controller + // ============================================ + class HeaderMenuController { + constructor() { + this.$menuAll = null; + this.$menuUser = null; + this.$menuList = null; + this.$menuBox = null; + } + + /** + * 초기화 + */ + init() { + if (typeof $ === 'undefined') { + console.warn('[HeaderMenuController] jQuery is required'); + return; + } + + this.$menuAll = $('.menu-all'); + this.$menuUser = $('.menu-user'); + this.$menuList = $('.menu-list'); + this.$menuBox = $('.menu-box'); + + if (this.$menuAll.length === 0 && this.$menuUser.length === 0) { + return; + } + + this.setupSitemapToggle(); + this.setupUserMenu(); + } + + /** + * 사이트맵 토글 설정 + */ + setupSitemapToggle() { + if (this.$menuAll.length === 0) return; + + this.$menuAll.on('click', (e) => { + e.preventDefault(); + if (typeof window.sitemap === 'function') { + window.sitemap(); + } + }); + } + + /** + * 사용자 메뉴 설정 + */ + setupUserMenu() { + if (this.$menuUser.length === 0 || this.$menuList.length === 0) return; + + // Hover 처리 + this.$menuBox.add(this.$menuList).hover( + () => { + this.$menuList.addClass('show'); + }, + (e) => { + const relatedTarget = e.relatedTarget; + if (!relatedTarget || + (!this.$menuBox.is(relatedTarget) && !this.$menuBox.find(relatedTarget).length && + !this.$menuList.is(relatedTarget) && !this.$menuList.find(relatedTarget).length)) { + this.$menuList.removeClass('show'); + } + } + ); + + // 클릭 처리 + this.$menuUser.on('click', (e) => { + e.stopPropagation(); + this.$menuList.toggleClass('show'); + }); + + // 키보드 접근성 지원 + this.$menuUser.on('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + e.stopPropagation(); + this.$menuList.toggleClass('show'); + } else if (e.key === 'Escape') { + this.$menuList.removeClass('show'); + $(e.target).focus(); + } + }); + + // 외부 클릭 시 메뉴 닫기 + $(document).on('click', (e) => { + if (!this.$menuUser.is(e.target) && !this.$menuUser.find(e.target).length && + !this.$menuList.is(e.target) && !this.$menuList.find(e.target).length) { + this.$menuList.removeClass('show'); + } + }); + } + } + + const headerMenuController = new HeaderMenuController(); + + if (typeof $ !== 'undefined') { + $(() => { + headerMenuController.init(); + }); + } + + // 전역 노출 + window.HeaderMenuController = HeaderMenuController; + window.headerMenuController = headerMenuController; + + // ============================================ + // Footer Controller + // ============================================ + class FooterController { + constructor() { + this.$btnFamily = null; + this.$familyList = null; + } + + /** + * 초기화 + */ + init() { + if (typeof $ === 'undefined') { + console.warn('[FooterController] jQuery is required'); + return; + } + + this.$btnFamily = $('.btn-family'); + this.$familyList = $('.family-list'); + + if (this.$btnFamily.length === 0) { + return; + } + + this.setupFamilyToggle(); + } + + /** + * 패밀리 사이트 토글 설정 + */ + setupFamilyToggle() { + this.$btnFamily.on('click', (e) => { + e.preventDefault(); + this.$familyList.toggleClass('open'); + this.$btnFamily.toggleClass('open'); + }); + } + } + + const footerController = new FooterController(); + + if (typeof $ !== 'undefined') { + $(() => { + footerController.init(); + }); + } + + // 전역 노출 + window.FooterController = FooterController; + window.footerController = footerController; + + // ============================================ + // AOS & Lenis Initializer (index.html 제외) + // ============================================ + class AOSLenisInitializer { + /** + * 초기화 + * index.html이 아닐 때만 실행 + */ + init() { + // index.html 체크: .wrap.main 클래스가 있으면 index.html + const isIndexPage = document.querySelector('.wrap.main'); + if (isIndexPage) { + return; + } + + // AOS 초기화 + if (typeof AOS !== 'undefined') { + AOS.init(); + } + + // Lenis 초기화 (LenisManager가 있으면 사용, 없으면 직접 초기화) + if (typeof window.handleStartLenis === 'function') { + window.handleStartLenis(); + } else if (typeof Lenis !== 'undefined') { + const lenis = new Lenis({ + lerp: 0.1, + smoothWheel: true, + smoothTouch: false, + }); + + window.lenis = lenis; + + lenis.on('scroll', (e) => { + // console.log(e) + }); + + if (typeof ScrollTrigger !== 'undefined') { + lenis.on('scroll', ScrollTrigger.update); + } + + if (typeof gsap !== 'undefined' && gsap.ticker) { + gsap.ticker.add((time) => { + lenis.raf(time * 1000); + }); + gsap.ticker.lagSmoothing(0); + } + } + } + } + + const aosLenisInitializer = new AOSLenisInitializer(); + + // DOMContentLoaded 또는 load 이벤트에서 초기화 + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + aosLenisInitializer.init(); + }); + } else { + // 이미 로드된 경우 즉시 실행 + aosLenisInitializer.init(); + } + + // 전역 노출 + window.AOSLenisInitializer = AOSLenisInitializer; + window.aosLenisInitializer = aosLenisInitializer; + +})(); // IIFE 종료 + +/** + * FAQ Accordion Module + * FAQ 아코디언 기능을 관리하는 모듈 + */ +(function() { + 'use strict'; + + class FAQAccordion { + constructor(containerSelector = '.faq-list') { + this.container = document.querySelector(containerSelector); + this.items = []; + this.activeItem = null; + + if (!this.container) { + console.warn('[FAQAccordion] Container not found:', containerSelector); + return; + } + + this.init(); + } + + /** + * 초기화 + */ + init() { + this.items = Array.from(this.container.querySelectorAll('.faq-item')); + + if (this.items.length === 0) { + return; + } + + this.items.forEach((item, index) => { + this.setupItem(item, index); + }); + + // 키보드 네비게이션 지원 + this.setupKeyboardNavigation(); + } + + /** + * 각 FAQ 항목 설정 + */ + setupItem(item, index) { + const question = item.querySelector('.faq-question'); + const answer = item.querySelector('.faq-answer'); + const icon = item.querySelector('.faq-icon .fa'); + const link = item.querySelector('.faq-link'); + + if (!question || !answer) { + return; + } + + // 접근성 속성 추가 + const itemId = `faq-item-${index}`; + const answerId = `faq-answer-${index}`; + + question.setAttribute('id', itemId); + question.setAttribute('role', 'button'); + question.setAttribute('aria-expanded', 'false'); + question.setAttribute('aria-controls', answerId); + question.setAttribute('tabindex', '0'); + + answer.setAttribute('id', answerId); + answer.setAttribute('role', 'region'); + answer.setAttribute('aria-labelledby', itemId); + answer.setAttribute('aria-hidden', 'true'); + + // 클릭 이벤트 + question.addEventListener('click', (e) => { + e.preventDefault(); + this.toggleItem(item); + }); + + // 키보드 이벤트 + question.addEventListener('keydown', (e) => { + this.handleKeydown(e, item, index); + }); + + // 링크 클릭 시에도 토글 + if (link) { + link.addEventListener('click', (e) => { + e.preventDefault(); + this.toggleItem(item); + }); + } + } + + /** + * 항목 토글 + */ + toggleItem(item) { + const isOpen = item.classList.contains('active'); + + if (isOpen) { + this.closeItem(item); + } else { + // 다른 항목들 닫기 (하나만 열리도록) + if (this.activeItem && this.activeItem !== item) { + this.closeItem(this.activeItem); + } + this.openItem(item); + } + } + + /** + * 항목 열기 + */ + openItem(item) { + const question = item.querySelector('.faq-question'); + const answer = item.querySelector('.faq-answer'); + const icon = item.querySelector('.faq-icon .fa'); + + item.classList.add('active'); + question.setAttribute('aria-expanded', 'true'); + answer.setAttribute('aria-hidden', 'false'); + + if (answer) { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } + + if (icon) { + icon.classList.remove('fa-plus'); + icon.classList.add('fa-minus'); + } + + this.activeItem = item; + } + + /** + * 항목 닫기 + */ + closeItem(item) { + const question = item.querySelector('.faq-question'); + const answer = item.querySelector('.faq-answer'); + const icon = item.querySelector('.faq-icon .fa'); + + item.classList.remove('active'); + question.setAttribute('aria-expanded', 'false'); + answer.setAttribute('aria-hidden', 'true'); + + if (answer) { + answer.style.maxHeight = null; + } + + if (icon) { + icon.classList.remove('fa-minus'); + icon.classList.add('fa-plus'); + } + + if (this.activeItem === item) { + this.activeItem = null; + } + } + + /** + * 키보드 네비게이션 처리 + */ + handleKeydown(e, currentItem, currentIndex) { + const { key } = e; + let targetItem = null; + let targetIndex = currentIndex; + + switch (key) { + case 'Enter': + case ' ': + e.preventDefault(); + this.toggleItem(currentItem); + break; + + case 'ArrowDown': + e.preventDefault(); + targetIndex = Math.min(currentIndex + 1, this.items.length - 1); + targetItem = this.items[targetIndex]; + if (targetItem) { + targetItem.querySelector('.faq-question').focus(); + } + break; + + case 'ArrowUp': + e.preventDefault(); + targetIndex = Math.max(currentIndex - 1, 0); + targetItem = this.items[targetIndex]; + if (targetItem) { + targetItem.querySelector('.faq-question').focus(); + } + break; + + case 'Home': + e.preventDefault(); + targetItem = this.items[0]; + if (targetItem) { + targetItem.querySelector('.faq-question').focus(); + } + break; + + case 'End': + e.preventDefault(); + targetItem = this.items[this.items.length - 1]; + if (targetItem) { + targetItem.querySelector('.faq-question').focus(); + } + break; + + case 'Escape': + if (this.activeItem) { + this.closeItem(this.activeItem); + this.activeItem.querySelector('.faq-question').focus(); + } + break; + } + } + + /** + * 컨테이너 레벨 키보드 네비게이션 설정 + */ + setupKeyboardNavigation() { + this.container.setAttribute('role', 'list'); + this.items.forEach(item => { + item.setAttribute('role', 'listitem'); + }); + } + + /** + * 모든 항목 닫기 + */ + closeAll() { + if (this.activeItem) { + this.closeItem(this.activeItem); + } + } + + /** + * 특정 항목 열기 + */ + openItemByIndex(index) { + if (index >= 0 && index < this.items.length) { + this.toggleItem(this.items[index]); + } + } + } + + // ============================================ + // 초기화 + // ============================================ + function init() { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + window.faqAccordion = new FAQAccordion(); + }); + } else { + window.faqAccordion = new FAQAccordion(); + } + } + + // 전역에서 접근 가능하도록 노출 + window.FAQAccordion = FAQAccordion; + + // 자동 초기화 + init(); + +})(); + +document.addEventListener("DOMContentLoaded", (event) => { + // --------------------------------------------- + // js-fixLeft 오른쪽에 따라 왼쪽 내용 변하기 + // 사용 클래스 : js-fixLeft-tit, js-fixLeft-bg, js-fixLeft-sec + // --------------------------------------------- + // forbim.html 페이지에서만 실행 + if (!document.querySelector(".js-fixLeft-tit")) { + return; + } + + if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') { + console.warn('GSAP or ScrollTrigger not loaded'); + return; + } + + gsap.registerPlugin(ScrollTrigger); + + const tits = document.querySelectorAll(".js-fixLeft-tit"); + const bgs = document.querySelectorAll(".js-fixLeft-bg"); + const sections = document.querySelectorAll(".js-fixLeft-secs > div"); + + + function bgOnEnter(element) { + gsap.to(element, { + transform: "scale(1.05)", + duration: 0.5 + }); + } + + function bgOnLeave(element) { + gsap.to(element, { + transform: "scale(1)", + duration: 0.5 + }); + } + + function titOnEnter(element) { + gsap.to(element, { + opacity: 1, + transform: "scale(1) translate(0%, 0%)", + duration: 0.5 + }); + } + + function titOnLeave(element) { + gsap.to(element, { + opacity: 0.5, + transform: "scale(0.7) translate(-47%, 0%)", + duration: 0.5 + }); + } + + function updateElements(index) { + bgs.forEach((bg, i) => { + if (i === index) { + bg.classList.add("on"); + bgOnEnter(bg); + } else { + bg.classList.remove("on"); + bgOnLeave(bg); + } + }); + + tits.forEach((tit, i) => { + if (i === index) { + tit.classList.add("on"); + titOnEnter(tit); + } else { + tit.classList.remove("on"); + titOnLeave(tit); + } + }); + } + + ScrollTrigger.create({ + trigger: sections[0], + start: "center top", + // markers: true, + onEnter: () => updateElements(0), + onLeaveBack: () => updateElements(0) + }); + + ScrollTrigger.create({ + trigger: sections[1], + start: "center center", + // markers: true, + onEnter: () => updateElements(1), + onLeaveBack: () => updateElements(1) + }); + + +}); + + + +/** + * MyPage Module + * 마이페이지 관련 공통 기능을 관리하는 모듈 + * - 타이머 관리 + * - 인증번호 발송 (AJAX 연동 준비) + * - 팝업 상태 초기화 + */ +(function() { + 'use strict'; + + // ============================================ + // Configuration + // ============================================ + const CONFIG = { + SELECTORS: { + timer: '.timer', + btnCode: '.btn-code', + btnClose: '.btn-close', + popupWrap: '.popup-wrap', + completeMsg: '.complete-msg', + codeRow: 'tr.code, tr.d-none', + infoBox: '.info-box' + }, + TIMER: { + DURATION: 60 * 3, // 3분 (180초) + INTERVAL: 1000 // 1초 + }, + AJAX: { + // AJAX 엔드포인트 설정 (나중에 실제 API로 변경) + SEND_CODE: '/api/auth/send-code', + VERIFY_CODE: '/api/auth/verify-code' + } + }; + + // ============================================ + // Timer Manager + // ============================================ + const TimerManager = { + intervals: {}, // 팝업별 타이머 관리 + + /** + * 타이머 시작 + * @param {jQuery} $timer - 타이머 요소 + * @param {string} popupId - 팝업 ID (옵션) + */ + start($timer, popupId) { + if (!$timer || !$timer.length) return; + + const timerId = popupId || $timer.closest('.popup-wrap').attr('id') || 'default'; + + // 기존 타이머 중지 + this.stop(timerId); + + let timer = CONFIG.TIMER.DURATION; + const $display = $timer; + + const updateTimer = () => { + const minutes = Math.floor(timer / 60); + const seconds = timer % 60; + const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes; + const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds; + + if ($display && $display.length) { + $display.text(`${formattedMinutes}:${formattedSeconds}`); + } + + if (--timer < 0) { + this.stop(timerId); + if ($display && $display.length) { + $display.text('00:00'); + } + // 타이머 종료 콜백 호출 + if (this.onTimerEnd) { + this.onTimerEnd(timerId, $display); + } + } + }; + + updateTimer(); + this.intervals[timerId] = setInterval(updateTimer, CONFIG.TIMER.INTERVAL); + }, + + /** + * 타이머 중지 + * @param {string} timerId - 타이머 ID + */ + stop(timerId) { + if (timerId && this.intervals[timerId]) { + clearInterval(this.intervals[timerId]); + delete this.intervals[timerId]; + } else if (!timerId) { + // 모든 타이머 중지 + Object.keys(this.intervals).forEach(id => { + clearInterval(this.intervals[id]); + }); + this.intervals = {}; + } + }, + + /** + * 타이머 초기화 + * @param {jQuery} $timer - 타이머 요소 + */ + reset($timer) { + if ($timer && $timer.length) { + $timer.addClass('d-none'); + $timer.text('03:00'); + } + } + }; + + // ============================================ + // Auth Code Manager (AJAX 연동 준비) + // ============================================ + const AuthCodeManager = { + /** + * 인증번호 발송 + * @param {Object} options - 옵션 객체 + * @param {string} options.phone - 휴대폰 번호 + * @param {string} options.type - 인증 타입 ('join', 'login', 'mypage' 등) + * @param {Function} options.onSuccess - 성공 콜백 + * @param {Function} options.onError - 실패 콜백 + */ + sendCode(options) { + const { + phone, + type = 'default', + onSuccess, + onError + } = options; + + // TODO: 실제 AJAX 요청으로 변경 + // 현재는 시뮬레이션 + const mockRequest = () => { + // 실제 구현 시: + /* + $.ajax({ + url: CONFIG.AJAX.SEND_CODE, + method: 'POST', + data: { + phone: phone, + type: type + }, + success: function(response) { + if (response.success) { + if (onSuccess) onSuccess(response); + } else { + if (onError) onError(response.message || '인증번호 발송에 실패했습니다.'); + } + }, + error: function(xhr, status, error) { + if (onError) onError('서버 오류가 발생했습니다.'); + } + }); + */ + + // 시뮬레이션: 성공으로 가정 + setTimeout(() => { + if (onSuccess) { + onSuccess({ + success: true, + message: '인증번호가 발송되었습니다.' + }); + } + }, 500); + }; + + mockRequest(); + }, + + /** + * 인증번호 확인 + * @param {Object} options - 옵션 객체 + * @param {string} options.phone - 휴대폰 번호 + * @param {string} options.code - 인증번호 + * @param {Function} options.onSuccess - 성공 콜백 + * @param {Function} options.onError - 실패 콜백 + */ + verifyCode(options) { + const { + phone, + code, + onSuccess, + onError + } = options; + + // TODO: 실제 AJAX 요청으로 변경 + const mockRequest = () => { + // 실제 구현 시: + /* + $.ajax({ + url: CONFIG.AJAX.VERIFY_CODE, + method: 'POST', + data: { + phone: phone, + code: code + }, + success: function(response) { + if (response.success) { + if (onSuccess) onSuccess(response); + } else { + if (onError) onError(response.message || '인증번호가 일치하지 않습니다.'); + } + }, + error: function(xhr, status, error) { + if (onError) onError('서버 오류가 발생했습니다.'); + } + }); + */ + + // 시뮬레이션: 성공으로 가정 + setTimeout(() => { + if (onSuccess) { + onSuccess({ + success: true, + message: '인증이 완료되었습니다.' + }); + } + }, 500); + }; + + mockRequest(); + } + }; + + // ============================================ + // Popup State Manager + // ============================================ + const PopupStateManager = { + /** + * 팝업 상태 초기화 + * @param {string|jQuery} popupSelector - 팝업 선택자 또는 jQuery 객체 + */ + reset(popupSelector) { + const $popup = typeof popupSelector === 'string' + ? $(popupSelector) + : popupSelector; + + if (!$popup || !$popup.length) return; + + const popupId = $popup.attr('id') || 'default'; + + // 타이머 중지 및 초기화 + TimerManager.stop(popupId); + $popup.find(CONFIG.SELECTORS.timer).each(function() { + TimerManager.reset($(this)); + }); + + // 버튼 초기화 + $popup.find(CONFIG.SELECTORS.btnCode).each(function() { + const $btn = $(this); + $btn.text('인증번호'); + $btn.removeClass('light'); + }); + + // 인증번호 입력 행 숨기기 + $popup.find(CONFIG.SELECTORS.codeRow).each(function() { + const $row = $(this); + if ($row.hasClass('d-none')) { + $row.hide(); + } else { + $row.hide(); + } + }); + + // 완료 메시지 숨기기 + $popup.find(CONFIG.SELECTORS.completeMsg).closest('tr').hide(); + } + }; + + // ============================================ + // Auth Button Handler + // ============================================ + const AuthButtonHandler = { + /** + * 인증번호 버튼 클릭 처리 + * @param {jQuery} $btn - 클릭된 버튼 + * @param {Object} options - 옵션 객체 + */ + handleClick($btn, options = {}) { + const { + onBeforeSend, + onSuccess, + onError + } = options; + + const $inputBox = $btn.closest('.input-box'); + const $timer = $inputBox.find(CONFIG.SELECTORS.timer); + const $popup = $btn.closest(CONFIG.SELECTORS.popupWrap); + const popupId = $popup.attr('id'); + + // 인증번호 입력 행 찾기 (다양한 케이스 대응) + const $currentRow = $btn.closest('tr'); + // tr.code 또는 tr.d-none 중 하나를 찾음 + let $codeRow = $currentRow.next('tr.code'); + if (!$codeRow.length) { + $codeRow = $currentRow.next('tr.d-none'); + } + + // 전화번호 가져오기 + const $phoneInput = $inputBox.find('input[type="tel"]'); + const phone = $phoneInput.val(); + + // 전화번호 유효성 검사 + if (!phone || !phone.match(/[0-9]{3}-[0-9]{4}-[0-9]{4}/)) { + alert('올바른 휴대폰 번호를 입력해주세요.'); + return; + } + + // 발송 전 콜백 + if (onBeforeSend) { + onBeforeSend(phone); + } + + // 인증번호 발송 + AuthCodeManager.sendCode({ + phone: phone, + type: popupId || 'default', + onSuccess: (response) => { + // 타이머 표시 및 시작 + if ($timer.length) { + $timer.removeClass('d-none'); + TimerManager.start($timer, popupId); + } + + // 인증번호 입력 행 표시 + if ($codeRow.length) { + $codeRow.removeClass('d-none').show(); + } + + // 버튼 텍스트 변경 및 클래스 추가 + $btn.text('재요청').addClass('light'); + + // 성공 콜백 + if (onSuccess) { + onSuccess(response); + } + }, + onError: (error) => { + alert(error || '인증번호 발송에 실패했습니다.'); + if (onError) { + onError(error); + } + } + }); + } + }; + + // ============================================ + // MyPage Controller + // ============================================ + const MyPageController = { + /** + * 초기화 + */ + init() { + this.initAuthButtons(); + this.initPopupClose(); + this.initFormSubmit(); + this.initMemberTypeToggle(); + }, + + /** + * 인증번호 버튼 이벤트 초기화 + */ + initAuthButtons() { + // 회원가입 팝업 + $(document).on('click', '#pop_join .btn-code', (e) => { + e.preventDefault(); + AuthButtonHandler.handleClick($(e.currentTarget), { + onSuccess: (response) => { + console.log('인증번호 발송 성공:', response); + } + }); + }); + + // 내 정보 수정 팝업 + $(document).on('click', '#pop_mypage03 .btn-code', (e) => { + e.preventDefault(); + AuthButtonHandler.handleClick($(e.currentTarget), { + onSuccess: (response) => { + console.log('인증번호 발송 성공:', response); + } + }); + }); + }, + + /** + * 팝업 닫기 이벤트 초기화 + */ + initPopupClose() { + // 팝업 닫기 버튼 클릭 + $(document).on('click', '.popup-wrap .btn-close', function() { + const $popup = $(this).closest(CONFIG.SELECTORS.popupWrap); + PopupStateManager.reset($popup); + }); + + // 팝업이 숨겨질 때 초기화 (MutationObserver) + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'style') { + const $popup = $(mutation.target); + if ($popup.hasClass('popup-wrap') && $popup.css('display') === 'none') { + PopupStateManager.reset($popup); + } + } + }); + }); + + // 모든 팝업 관찰 시작 + $(document).ready(() => { + $(CONFIG.SELECTORS.popupWrap).each(function() { + observer.observe(this, { + attributes: true, + attributeFilter: ['style'] + }); + }); + }); + }, + + /** + * 폼 제출 이벤트 초기화 + */ + initFormSubmit() { + // 로그인 팝업 - 휴대폰 인증 폼 제출 + $(document).on('submit', '#pop_login .tab-content.phone form', (e) => { + e.preventDefault(); + + const $form = $(e.currentTarget); + const $timer = $form.find(CONFIG.SELECTORS.timer); + const $infoBox = $form.find(CONFIG.SELECTORS.infoBox); + const $phoneInput = $form.find('#login_phone, input[name="userPhone"], input[type="tel"]').first(); + const phone = ($phoneInput.val() || '').replace(/\D/g, ''); + + // 전화번호 유효성 검사 (숫자 10~11자리) + if (phone.length < 10 || phone.length > 11) { + alert('올바른 휴대폰 번호를 입력해주세요.'); + return; + } + + // 인증번호 발송 + AuthCodeManager.sendCode({ + phone: phone, + type: 'login', + onSuccess: (response) => { + // 타이머와 info-box 표시 + $timer.removeClass('d-none'); + $infoBox.removeClass('d-none'); + + // 타이머 시작 + if ($timer.length) { + TimerManager.start($timer, 'pop_login'); + } + }, + onError: (error) => { + alert(error || '인증번호 발송에 실패했습니다.'); + } + }); + }); + }, + + /** + * 회원유형 라디오 버튼 변경 이벤트 초기화 + */ + initMemberTypeToggle() { + // 회원가입 팝업 및 내 정보 수정 팝업에서 회원유형 라디오 버튼 변경 시 + $(document).on('change', '#pop_join input[name="memberType"], #pop_mypage03 input[name="memberType"]', function() { + const memberType = $(this).val(); + const $table = $(this).closest('table'); + // 회사정보 행 찾기 (company-group 클래스를 가진 행) + const $companyRow = $table.find('tr.company-group'); + const $companyInputs = $companyRow.find('input[id="company_name"], input[id="department_name"]'); + + // member_type2 (개인회원, value="2") 선택 시 회사 정보 필드 비활성화 + if (memberType === '2') { + $companyInputs.prop('disabled', true).val(''); + $companyRow.addClass('disabled'); + } else { + // member_type1 (기업회원, value="1") 선택 시 회사 정보 필드 활성화 + $companyInputs.prop('disabled', false); + $companyRow.removeClass('disabled'); + } + }); + + // 초기 로드 시에도 상태 확인 + $(document).ready(() => { + const $memberTypeJoin = $('#pop_join input[name="memberType"]:checked'); + const $memberTypeEdit = $('#pop_mypage03 input[name="memberType"]:checked'); + + if ($memberTypeJoin.length) { + $memberTypeJoin.trigger('change'); + } + if ($memberTypeEdit.length) { + $memberTypeEdit.trigger('change'); + } + }); + } + }; + + // ============================================ + // Public API + // ============================================ + window.MyPageController = MyPageController; + window.TimerManager = TimerManager; + window.AuthCodeManager = AuthCodeManager; + window.PopupStateManager = PopupStateManager; + + // ============================================ + // Auto Initialize + // ============================================ + $(document).ready(() => { + MyPageController.init(); + }); + +})(); + +/** + * Popup Controller Module + * 팝업 관련 기능을 관리하는 모듈 + */ +(function() { + 'use strict'; + + // ============================================ + // Configuration + // ============================================ + const CONFIG = { + SELECTORS: { + btnClose: '.btn-close', + btnMapClose: '.btn-map-close', + popupWrap: '.popup-wrap', + popupSitemap: '.popup-sitemap', + domainList: '#domain-list', + customDomain: '#custom-domain', + certNumber: '.cert-number', + code: '.code', + check: '.check', + checkComplete: '.check.complete', + timer: '.timer', + findEmail: '.find-email', + findPh: '.find-ph', + btnId: '.btn-id', + btnPw: '.btn-pw', + contentId: '.content.id', + contentPw: '.content.pw', + termsWrap: '.terms-wrap', + checkboxWrap: '.checkbox-wrap.all', + joinBtnWrap: '.join-btn-wrap', + popInputWrap: '.pop-input-wrap', + joinProgress: '.join-progress', + joinStep: '.join-step', + tabPrivacy: '.tab-privacy', + tabAgreement: '.tab-agreement', + tabContentPri: '.tab-content.pri', + tabContentAgr: '.tab-content.agr', + tabWrap: '.tab-menu', + contentsWrap: '.contents_wrap', + messages: '.messages' + }, + TIMER: { + DURATION: 60 * 3, // 3분 + INTERVAL: 1000 // 1초 + }, + CLASSES: { + on: 'on', + none: 'none', + show: 'show', + hide: 'hide', + complete: 'complete' + } + }; + + // ============================================ + // Utility Functions + // ============================================ + const Utils = { + /** + * Lenis 스크롤 시작 + */ + startLenis() { + if (typeof lenis !== 'undefined' && lenis) { + lenis.start(); + } + }, + + /** + * 스크롤 복원 + */ + restoreScroll() { + $('body').css('overflow', ''); + this.startLenis(); + } + }; + + // ============================================ + // Popup Close Controller + // ============================================ + const PopupCloseController = { + init() { + // 팝업 닫기 버튼 + $(document).on('click', CONFIG.SELECTORS.btnClose, () => { + $(CONFIG.SELECTORS.popupWrap).hide(); + Utils.restoreScroll(); + }); + + // 사이트맵 닫기 버튼 + $(document).on('click', CONFIG.SELECTORS.btnMapClose, () => { + $(CONFIG.SELECTORS.popupSitemap).hide(); + Utils.restoreScroll(); + }); + } + }; + + // ============================================ + // Email Domain Controller + // ============================================ + const EmailDomainController = { + init() { + // ID 기반 선택자 (기존 호환성) + $(document).on('change', CONFIG.SELECTORS.domainList, function() { + const $select = $(this); + const $selectBox = $select.closest('.select-box'); + const $customDomain = $selectBox.find(CONFIG.SELECTORS.customDomain); + + if ($select.val() === 'type') { + // 직접입력 선택 시 d-none 클래스 제거 + $customDomain.removeClass('d-none').focus(); + } else { + // 다른 선택지 선택 시 d-none 클래스 추가 및 값 초기화 + $customDomain.addClass('d-none').val(''); + } + }); + + // 클래스 기반 선택자 (.domain-list) + $(document).on('change', '.domain-list', function() { + const $select = $(this); + const $inputBox = $select.closest('.input-box'); + const $customDomain = $inputBox.find('.domain-domain'); + + if ($select.val() === 'type') { + // 직접입력 선택 시 d-none 클래스 제거 + $customDomain.removeClass('d-none').focus(); + } else { + // 다른 선택지 선택 시 d-none 클래스 추가 및 값 초기화 + $customDomain.addClass('d-none').val(''); + } + }); + } + }; + + // ============================================ + // Timer Controller + // ============================================ + const TimerController = { + interval: null, + display: null, + + init() { + this.display = $(CONFIG.SELECTORS.timer); + + // 인증번호 버튼 클릭 시 + $(document).on('click', CONFIG.SELECTORS.certNumber, () => { + $(CONFIG.SELECTORS.code).show(); + this.start(); + }); + + // 확인 버튼 클릭 시 + $(document).on('click', CONFIG.SELECTORS.check, function() { + $(this).hide(); + $(CONFIG.SELECTORS.checkComplete).show(); + TimerController.stop(); + $(CONFIG.SELECTORS.timer).remove(); + }); + + // 로그인 페이지 휴대폰 인증 폼의 인증 링크 요청 버튼 클릭 시 + $(document).on('submit', '#pop_login .tab-content.phone form', (e) => { + e.preventDefault(); + const $form = $(e.target); + const $timer = $form.find('.timer'); + const $infoBox = $form.find('.info-box'); + + // 타이머와 info-box 표시 + $timer.removeClass('hide'); + $infoBox.removeClass('d-none'); + + // 타이머 시작 (해당 폼 내의 타이머만) + if ($timer.length) { + this.stop(); + this.display = $timer; + this.start(); + } + }); + + // 초기 타이머 시작 (다른 페이지에서 사용하는 경우를 위해) + // 숨겨지지 않은 타이머만 자동 시작 + const $visibleTimers = $(CONFIG.SELECTORS.timer).not('.hide').not('.d-none'); + if ($visibleTimers.length > 0) { + this.display = $visibleTimers.first(); + this.start(); + } + }, + + start() { + this.stop(); + this.startTimer(CONFIG.TIMER.DURATION, this.display); + }, + + stop() { + if (this.interval) { + clearInterval(this.interval); + this.interval = null; + } + }, + + startTimer(duration, display) { + let timer = duration; + + const updateTimer = () => { + const minutes = Math.floor(timer / 60); + const seconds = timer % 60; + const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes; + const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds; + + if (display && display.length) { + display.text(`${formattedMinutes}:${formattedSeconds}`); + } + + if (--timer < 0) { + this.stop(); + if (display && display.length) { + display.text('00:00'); + } + } + }; + + updateTimer(); + this.interval = setInterval(updateTimer, CONFIG.TIMER.INTERVAL); + } + }; + + // ============================================ + // Find Account Controller + // ============================================ + const FindAccountController = { + /** + * 라디오 버튼 전환 처리 + * @param {jQuery} $radio - 클릭된 라디오 버튼 + * @param {string} type - 'ph' 또는 'email' + */ + switchRadio($radio, type) { + const $radioWrap = $radio.closest('.radio-wrap'); + const $tabContent = $radioWrap.closest('.tab-content'); + + // 같은 라디오 그룹의 다른 라디오 버튼들 + const $otherRadio = type === 'ph' + ? $radioWrap.find(CONFIG.SELECTORS.findEmail) + : $radioWrap.find(CONFIG.SELECTORS.findPh); + + // 라디오 버튼 상태 변경 + $otherRadio.removeClass(CONFIG.CLASSES.on).prop('checked', false); + $radio.addClass(CONFIG.CLASSES.on).prop('checked', true); + + // 테이블 표시/숨김 (해당 탭 콘텐츠 내에서만) + if (type === 'ph') { + $tabContent.find('table.email').hide(); + $tabContent.find('table.ph').show(); + } else { + $tabContent.find('table.ph').hide(); + $tabContent.find('table.email').show(); + } + }, + + /** + * 초기 상태 설정 + */ + initRadioState() { + // 각 탭 콘텐츠별로 초기 상태 설정 + $('.tab-content').each(function() { + const $tabContent = $(this); + const $checkedRadio = $tabContent.find('.radio-wrap input[type="radio"]:checked'); + + if ($checkedRadio.length) { + if ($checkedRadio.hasClass('find-ph')) { + $tabContent.find('table.ph').show(); + $tabContent.find('table.email').hide(); + } else if ($checkedRadio.hasClass('find-email')) { + $tabContent.find('table.email').show(); + $tabContent.find('table.ph').hide(); + } + } + }); + }, + + init() { + // 이메일 찾기 라디오 버튼 클릭 + $(document).on('click', CONFIG.SELECTORS.findEmail, function(e) { + e.preventDefault(); + FindAccountController.switchRadio($(this), 'email'); + }); + + // 전화번호 찾기 라디오 버튼 클릭 + $(document).on('click', CONFIG.SELECTORS.findPh, function(e) { + e.preventDefault(); + FindAccountController.switchRadio($(this), 'ph'); + }); + + // 라디오 버튼 변경 이벤트 (체크 상태 동기화) + $(document).on('change', '.radio-wrap input[type="radio"]', function() { + const $radio = $(this); + if ($radio.hasClass('find-ph')) { + FindAccountController.switchRadio($radio, 'ph'); + } else if ($radio.hasClass('find-email')) { + FindAccountController.switchRadio($radio, 'email'); + } + }); + + // 초기 상태 설정 + this.initRadioState(); + } + }; + + // ============================================ + // Login Tab Controller + // ============================================ + const LoginTabController = { + init() { + // ID 찾기 탭 + $(document).on('click', CONFIG.SELECTORS.btnId, () => { + $(CONFIG.SELECTORS.btnId).addClass(CONFIG.CLASSES.on); + $(CONFIG.SELECTORS.btnPw).removeClass(CONFIG.CLASSES.on); + $(CONFIG.SELECTORS.contentId).show(); + $(CONFIG.SELECTORS.contentPw).hide(); + }); + + // 비밀번호 찾기 탭 + $(document).on('click', CONFIG.SELECTORS.btnPw, () => { + $(CONFIG.SELECTORS.btnPw).addClass(CONFIG.CLASSES.on); + $(CONFIG.SELECTORS.btnId).removeClass(CONFIG.CLASSES.on); + $(CONFIG.SELECTORS.contentPw).show(); + $(CONFIG.SELECTORS.contentId).hide(); + }); + + // 도메인 선택 (중복 제거) + $(CONFIG.SELECTORS.domainList).on('change', function() { + const $customDomain = $(CONFIG.SELECTORS.customDomain); + + if ($(this).val() === 'type') { + $customDomain.show(); + } else { + $customDomain.hide(); + } + }); + } + }; + + // ============================================ + // Terms Agreement Controller + // ============================================ + const TermsAgreementController = { + init() { + // 약관 동의 상태 업데이트 + this.updateJoinButton(); + + // 전체 동의 체크박스 (기존 호환성) + $(CONFIG.SELECTORS.checkboxWrap).find('input[type="checkbox"]').on('change', (e) => { + const isChecked = $(e.target).is(':checked'); + $(CONFIG.SELECTORS.termsWrap).find('input[type="checkbox"]').prop('checked', isChecked); + this.updateJoinButton(); + }); + + // .chk-all 클래스를 가진 체크박스 (전체 동의) + $(document).on('change click', '.chk-all', function(e) { + e.stopPropagation(); // 이벤트 전파 중지 + const $chkAll = $(this); + const isChecked = $chkAll.is(':checked'); + const $termsWrap = $chkAll.closest('.terms-wrap'); + + // .chk-all을 제외한 모든 체크박스 선택/해제 + $termsWrap.find('input[type="checkbox"]:not(.chk-all)').prop('checked', isChecked); + + // updateJoinButton 호출 시 무한 루프 방지를 위해 플래그 설정 + TermsAgreementController._updatingFromChkAll = true; + TermsAgreementController.updateJoinButton(); + TermsAgreementController._updatingFromChkAll = false; + }); + + // 개별 체크박스 + $(CONFIG.SELECTORS.termsWrap).find('input[type="checkbox"]').on('change', () => { + this.updateJoinButton(); + }); + + // .terms-wrap 내의 개별 체크박스 (chk-all 제외) + $(document).on('change', '.terms-wrap input[type="checkbox"]:not(.chk-all)', () => { + this.updateJoinButton(); + }); + }, + + updateJoinButton() { + // .terms-wrap 내의 모든 체크박스 확인 (chk-all 제외) + const $allTermsWraps = $('.terms-wrap'); + let allChecked = true; + + $allTermsWraps.each(function() { + const $checkboxes = $(this).find('input[type="checkbox"]:not(.chk-all)'); + const $checked = $checkboxes.filter(':checked'); + if ($checkboxes.length > 0 && $checkboxes.length !== $checked.length) { + allChecked = false; + return false; // break + } + }); + + // .chk-all 체크박스 상태 업데이트 (무한 루프 방지) + if (!TermsAgreementController._updatingFromChkAll) { + $('.chk-all').prop('checked', allChecked); + } + + // 전체 동의 체크박스 상태 업데이트 (기존 호환성) + $(CONFIG.SELECTORS.checkboxWrap).find('input[type="checkbox"]').prop('checked', allChecked); + + // 버튼 상태 업데이트 + const $joinBtnWrap = $(CONFIG.SELECTORS.joinBtnWrap); + if (allChecked) { + $joinBtnWrap.removeClass(CONFIG.CLASSES.none); + $joinBtnWrap.find('button').prop('disabled', false); + } else { + $joinBtnWrap.addClass(CONFIG.CLASSES.none); + $joinBtnWrap.find('button').prop('disabled', true); + } + } + }; + + // ============================================ + // Join Completion Controller + // ============================================ + const JoinCompletionController = { + init() { + // 전송완료 + $(document).on('click', '.pw ' + CONFIG.SELECTORS.joinBtnWrap + ' button', () => { + $(CONFIG.SELECTORS.contentsWrap).children().not(CONFIG.SELECTORS.messages).hide(); + $(CONFIG.SELECTORS.messages).show(); + }); + + // 가입완료 + $(document).on('click', '.join.completion ' + CONFIG.SELECTORS.joinBtnWrap + ' button', () => { + $(CONFIG.SELECTORS.popInputWrap).find('form').children().not(CONFIG.SELECTORS.messages).hide(); + $(CONFIG.SELECTORS.messages).show(); + + // 진행 단계 업데이트 + $(CONFIG.SELECTORS.joinProgress).find(CONFIG.SELECTORS.joinStep).removeClass(CONFIG.CLASSES.on); + $(CONFIG.SELECTORS.joinProgress).find(CONFIG.SELECTORS.joinStep).eq(2).addClass(CONFIG.CLASSES.on); + }); + } + }; + + // ============================================ + // Universal Tab Controller + // ============================================ + const TabController = { + /** + * 탭 클래스명에서 콘텐츠 클래스명 추출 + * @param {jQuery} $tab - 탭 요소 + * @returns {string} 콘텐츠 클래스명 + */ + getContentClass($tab) { + // 탭 클래스명에서 tab- 접두사 제거 + const tabClasses = $tab.attr('class').split(' '); + let contentClass = ''; + + for (let i = 0; i < tabClasses.length; i++) { + const className = tabClasses[i]; + if (className.startsWith('tab-')) { + const tabName = className.replace('tab-', ''); + + // 특수 케이스 매핑 + const specialCases = { + 'privacy': 'pri', + 'agreement': 'agr' + }; + + contentClass = specialCases[tabName] || tabName; + break; + } + } + + return contentClass; + }, + + /** + * 슬라이딩 인디케이터 위치 업데이트 (round 타입 탭 메뉴용) + * @param {jQuery} $tabMenu - 탭 메뉴 요소 + * @param {jQuery} $activeTab - 활성화된 탭 요소 + */ + updateSliderPosition($tabMenu, $activeTab) { + // round 클래스가 있는 경우에만 처리 + if (!$tabMenu.hasClass('round')) { + return; + } + + const $tabs = $tabMenu.find('li'); + const activeIndex = $tabs.index($activeTab); + const tabCount = $tabs.length; + + if (tabCount === 0) return; + + // 탭 메뉴의 실제 너비와 패딩 확인 + const tabMenuWidth = $tabMenu.width(); + const padding = 0; // padding: 4px + const gap = 4; // gap: 4px + + // 사용 가능한 너비 (패딩 제외) + const availableWidth = tabMenuWidth - (padding * 2); + + // 각 탭의 너비 계산 (gap 포함) + // gap은 탭 사이에만 있으므로, 탭 개수 - 1개의 gap이 있음 + const totalGapWidth = gap * (tabCount - 1); + const tabWidth = (availableWidth - totalGapWidth) / tabCount; + + // 인디케이터 위치 계산 (패딩 + 탭 너비 * 인덱스 + gap * 인덱스) + const indicatorPosition = padding + (tabWidth + gap) * activeIndex; + + // CSS 변수로 위치 설정 (픽셀 단위) + $tabMenu[0].style.setProperty('--tab-indicator-position', `${indicatorPosition}px`); + + // 인디케이터 너비도 동적으로 설정 + $tabMenu[0].style.setProperty('--tab-indicator-width', `${tabWidth}px`); + }, + + /** + * 탭 전환 처리 + * @param {jQuery} $clickedTab - 클릭된 탭 요소 + */ + switchTab($clickedTab) { + const $tabMenu = $clickedTab.closest(CONFIG.SELECTORS.tabWrap); + const $allTabs = $tabMenu.find('li'); + + // 콘텐츠 컨테이너 찾기 (pop-contents 또는 contents-wrap) + const $contentContainer = $clickedTab.closest('.pop-contents, .contents-wrap'); + const $allContents = $contentContainer.find('.tab-content'); + + // 모든 탭에서 on 클래스 제거 + $allTabs.removeClass(CONFIG.CLASSES.on); + + // 클릭된 탭에 on 클래스 추가 + $clickedTab.addClass(CONFIG.CLASSES.on); + + // 슬라이딩 인디케이터 위치 업데이트 (round 타입인 경우) + this.updateSliderPosition($tabMenu, $clickedTab); + + // 모든 콘텐츠 숨기기 + $allContents.removeClass(CONFIG.CLASSES.show); + + // 해당하는 콘텐츠만 표시 + const contentClass = this.getContentClass($clickedTab); + if (contentClass) { + const $targetContent = $contentContainer.find('.tab-content.' + contentClass); + if ($targetContent.length) { + $targetContent.addClass(CONFIG.CLASSES.show); + } + } + }, + + /** + * 탭 초기 상태 설정 + */ + initTabState() { + // 모든 tab-menu 찾기 + $(CONFIG.SELECTORS.tabWrap).each(function() { + const $tabMenu = $(this); + const $tabs = $tabMenu.find('li'); + const $contentContainer = $tabMenu.closest('.pop-contents, .contents-wrap'); + + if ($tabs.length === 0 || !$contentContainer.length) return; + + // 활성화된 탭 찾기 + const $activeTab = $tabs.filter('.' + CONFIG.CLASSES.on); + + if ($activeTab.length > 0) { + // 활성화된 탭이 있으면 해당 콘텐츠 표시 + TabController.switchTab($activeTab); + } else { + // 활성화된 탭이 없으면 첫 번째 탭 활성화 + const $firstTab = $tabs.first(); + $firstTab.addClass(CONFIG.CLASSES.on); + TabController.switchTab($firstTab); + } + + // 리사이즈 시 인디케이터 위치 재계산 + if ($tabMenu.hasClass('round')) { + $(window).on('resize.tabSlider', function() { + const $active = $tabMenu.find('li.' + CONFIG.CLASSES.on); + if ($active.length) { + TabController.updateSliderPosition($tabMenu, $active); + } + }); + } + }); + }, + + init() { + // 모든 tab-menu의 탭 클릭 이벤트 + $(document).on('click', CONFIG.SELECTORS.tabWrap + ' li', function(e) { + e.preventDefault(); + TabController.switchTab($(this)); + }); + + // 키보드 접근성 지원 (탭 + 엔터/스페이스) + $(document).on('keydown', CONFIG.SELECTORS.tabWrap + ' li', function(e) { + // Enter 또는 Space 키 + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + TabController.switchTab($(this)); + } + + // 화살표 키로 탭 전환 + const $tabMenu = $(this).closest(CONFIG.SELECTORS.tabWrap); + const $tabs = $tabMenu.find('li'); + const currentIndex = $tabs.index(this); + + if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { + e.preventDefault(); + let targetIndex; + + if (e.key === 'ArrowLeft') { + targetIndex = currentIndex > 0 ? currentIndex - 1 : $tabs.length - 1; + } else { + targetIndex = currentIndex < $tabs.length - 1 ? currentIndex + 1 : 0; + } + + const $targetTab = $tabs.eq(targetIndex); + $targetTab.focus(); + TabController.switchTab($targetTab); + } + }); + + // 초기 상태 설정 + this.initTabState(); + } + }; + + // ============================================ + // Privacy Tab Controller (하위 호환성 유지) + // ============================================ + const PrivacyTabController = { + switchTab: function($clickedTab) { + return TabController.switchTab.call(TabController, $clickedTab); + }, + init: function() { + return TabController.init.call(TabController); + }, + initTabState: function() { + return TabController.initTabState.call(TabController); + } + }; + + // ============================================ + // Main Initialization + // ============================================ + const PopupController = { + init() { + // DOM이 준비되면 초기화 + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + this.start(); + }); + } else { + this.start(); + } + }, + + start() { + PopupCloseController.init(); + EmailDomainController.init(); + TimerController.init(); + FindAccountController.init(); + LoginTabController.init(); + TermsAgreementController.init(); + JoinCompletionController.init(); + TabController.init(); + } + }; + + // ============================================ + // Start Application + // ============================================ + PopupController.init(); + + // ============================================ + // Global Functions + // ============================================ + // 전역에서 접근 가능하도록 함수 노출 + window.PopupController = PopupController; + window.TabController = TabController; + window.PrivacyTabController = PrivacyTabController; // 하위 호환성 유지 + +})(); + +document.addEventListener("DOMContentLoaded", (event) => { + + // --------------------------------------------- + // js__fixLeft 오른쪽에 따라 왼쪽 내용 변하기 + // 사용 클래스 : js__fixLeft_tit, js__fixLeft_bg, js__fixLeft_sec + // --------------------------------------------- + // floorplan.html 페이지에서만 실행 + const key1 = document.querySelector('.key.find'); + if (!key1) { + return; + } + + if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') { + console.warn('GSAP or ScrollTrigger not loaded'); + return; + } + + gsap.registerPlugin(ScrollTrigger); + + const key1Tits = key1.querySelectorAll(".js__fixLeft_tit > li"); + const key1Sections = key1.querySelectorAll(".js__fixLeft_secs > div"); + const key2 = document.querySelector('.key.info'); + const key2Tits = key2 ? key2.querySelectorAll(".js__fixLeft_tit > li") : []; + const key2Sections = key2 ? key2.querySelectorAll(".js__fixLeft_secs > div") : []; + const key3 = document.querySelector('.key.print'); + const key3Tits = key3 ? key3.querySelectorAll(".js__fixLeft_tit > li") : []; + const key3Sections = key3 ? key3.querySelectorAll(".js__fixLeft_secs > div") : []; + + + function titOnEnter(element) { + gsap.to(element, { + duration: 0.5 + }); + } + + function titOnLeave(element) { + gsap.to(element, { + duration: 0.5 + }); + } + + function key1UpdateTit(index) { + key1Tits.forEach((tit, i) => { + if (i === index) { + tit.classList.add("on"); + titOnEnter(tit); + } else { + tit.classList.remove("on"); + titOnLeave(tit); + } + }); + } + + function key2UpdateTit(index) { + key2Tits.forEach((tit, i) => { + if (i === index) { + tit.classList.add("on"); + titOnEnter(tit); + } else { + tit.classList.remove("on"); + titOnLeave(tit); + } + }); + } + + function key3UpdateTit(index) { + key3Tits.forEach((tit, i) => { + if (i === index) { + tit.classList.add("on"); + titOnEnter(tit); + } else { + tit.classList.remove("on"); + titOnLeave(tit); + } + }); + } + + ScrollTrigger.create({ + trigger: key1Sections[0], + start: "top 30%", + // markers: true, + onEnter: () => key1UpdateTit(0), + onLeaveBack: () => key1UpdateTit(0) + }); + + ScrollTrigger.create({ + trigger: key1Sections[1], + start: "center 70%", + // markers: true, + onEnter: () => key1UpdateTit(1), + onLeaveBack: () => key1UpdateTit(1) + }); + + ScrollTrigger.create({ + trigger: key1Sections[2], + start: "bottom bottom", + // markers: true, + onEnter: () => key1UpdateTit(2), + onLeaveBack: () => key1UpdateTit(2) + }); + + ScrollTrigger.create({ + trigger: key2Sections[0], + start: "top 30%", + // markers: true, + onEnter: () => key2UpdateTit(0), + onLeaveBack: () => key2UpdateTit(0) + }); + + ScrollTrigger.create({ + trigger: key2Sections[1], + start: "center 70%", + // markers: true, + onEnter: () => key2UpdateTit(1), + onLeaveBack: () => key2UpdateTit(1) + }); + + ScrollTrigger.create({ + trigger: key2Sections[2], + start: "bottom bottom", + // markers: true, + onEnter: () => key2UpdateTit(2), + onLeaveBack: () => key2UpdateTit(2) + }); + + ScrollTrigger.create({ + trigger: key2Sections[3], + start: "bottom bottom", + // markers: true, + onEnter: () => key2UpdateTit(3), + onLeaveBack: () => key2UpdateTit(3) + }); + + ScrollTrigger.create({ + trigger: key3Sections[0], + start: "top 30%", + // markers: true, + onEnter: () => key3UpdateTit(0), + onLeaveBack: () => key3UpdateTit(0) + }); + + ScrollTrigger.create({ + trigger: key3Sections[1], + start: "center 70%", + // markers: true, + onEnter: () => key3UpdateTit(1), + onLeaveBack: () => key3UpdateTit(1) + }); + + ScrollTrigger.create({ + trigger: key3Sections[2], + start: "bottom bottom", + // markers: true, + onEnter: () => key3UpdateTit(2), + onLeaveBack: () => key3UpdateTit(2) + }); + +}); +document.addEventListener('DOMContentLoaded', (event)=> { + + // --------------------------------------------- + // 주요기능의 라인 애니, 카드 애니 + // 사용 클래스 : js-ani + // --------------------------------------------- + let hasAnimationRun = false; + const valuesAni = document.querySelector('.js-ani'); + + if (!valuesAni) return; // 요소가 없으면 종료 + + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: [0, 0.7] // Observe both 0% and 70% visibility + }; + const observerCallback = (entries, observer) => { + entries.forEach(entry => { + if (!hasAnimationRun && entry.intersectionRatio >= 0.7) { + valuesAni.classList.add('card-ani'); + const linesElement = valuesAni.querySelector('.lines'); + if (linesElement) { + linesElement.classList.add('move-ani'); + } + setTimeout(() => { + valuesAni.classList.remove('card-ani'); + }, 1200); + hasAnimationRun = true; + observer.unobserve(valuesAni); + } + }); + }; + const observer = new IntersectionObserver(observerCallback, observerOptions); + observer.observe(valuesAni); + + +}) + +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AOS=t():e.AOS=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var i=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]&&arguments[0];if(e&&(k=!0),k)return w=(0,y.default)(w,j),(0,b.default)(w,j.once),w},_=function(){w=(0,h.default)(),O()},S=function(){w.forEach(function(e,t){e.node.removeAttribute("data-aos"),e.node.removeAttribute("data-aos-easing"),e.node.removeAttribute("data-aos-duration"),e.node.removeAttribute("data-aos-delay")})},z=function(e){return e===!0||"mobile"===e&&p.default.mobile()||"phone"===e&&p.default.phone()||"tablet"===e&&p.default.tablet()||"function"==typeof e&&e()===!0},A=function(e){return j=i(j,e),w=(0,h.default)(),z(j.disable)||x?S():(document.querySelector("body").setAttribute("data-aos-easing",j.easing),document.querySelector("body").setAttribute("data-aos-duration",j.duration),document.querySelector("body").setAttribute("data-aos-delay",j.delay),"DOMContentLoaded"===j.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1?O(!0):"load"===j.startEvent?window.addEventListener(j.startEvent,function(){O(!0)}):document.addEventListener(j.startEvent,function(){O(!0)}),window.addEventListener("resize",(0,f.default)(O,j.debounceDelay,!0)),window.addEventListener("orientationchange",(0,f.default)(O,j.debounceDelay,!0)),window.addEventListener("scroll",(0,u.default)(function(){(0,b.default)(w,j.once)},j.throttleDelay)),j.disableMutationObserver||(0,d.default)("[data-aos]",_),w)};e.exports={init:A,refresh:O,refreshHard:_}},function(e,t){},,,,,function(e,t){(function(t){"use strict";function n(e,t,n){function o(t){var n=b,o=v;return b=v=void 0,k=t,g=e.apply(o,n)}function r(e){return k=e,h=setTimeout(s,t),_?o(e):g}function a(e){var n=e-w,o=e-k,i=t-n;return S?j(i,y-o):i}function c(e){var n=e-w,o=e-k;return void 0===w||n>=t||n<0||S&&o>=y}function s(){var e=O();return c(e)?d(e):void(h=setTimeout(s,a(e)))}function d(e){return h=void 0,z&&b?o(e):(b=v=void 0,g)}function l(){void 0!==h&&clearTimeout(h),k=0,b=w=v=h=void 0}function p(){return void 0===h?g:d(O())}function m(){var e=O(),n=c(e);if(b=arguments,v=this,w=e,n){if(void 0===h)return r(w);if(S)return h=setTimeout(s,t),o(w)}return void 0===h&&(h=setTimeout(s,t)),g}var b,v,y,g,h,w,k=0,_=!1,S=!1,z=!0;if("function"!=typeof e)throw new TypeError(f);return t=u(t)||0,i(n)&&(_=!!n.leading,S="maxWait"in n,y=S?x(u(n.maxWait)||0,t):y,z="trailing"in n?!!n.trailing:z),m.cancel=l,m.flush=p,m}function o(e,t,o){var r=!0,a=!0;if("function"!=typeof e)throw new TypeError(f);return i(o)&&(r="leading"in o?!!o.leading:r,a="trailing"in o?!!o.trailing:a),n(e,t,{leading:r,maxWait:t,trailing:a})}function i(e){var t="undefined"==typeof e?"undefined":c(e);return!!e&&("object"==t||"function"==t)}function r(e){return!!e&&"object"==("undefined"==typeof e?"undefined":c(e))}function a(e){return"symbol"==("undefined"==typeof e?"undefined":c(e))||r(e)&&k.call(e)==d}function u(e){if("number"==typeof e)return e;if(a(e))return s;if(i(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=i(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(l,"");var n=m.test(e);return n||b.test(e)?v(e.slice(2),n?2:8):p.test(e)?s:+e}var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f="Expected a function",s=NaN,d="[object Symbol]",l=/^\s+|\s+$/g,p=/^[-+]0x[0-9a-f]+$/i,m=/^0b[01]+$/i,b=/^0o[0-7]+$/i,v=parseInt,y="object"==("undefined"==typeof t?"undefined":c(t))&&t&&t.Object===Object&&t,g="object"==("undefined"==typeof self?"undefined":c(self))&&self&&self.Object===Object&&self,h=y||g||Function("return this")(),w=Object.prototype,k=w.toString,x=Math.max,j=Math.min,O=function(){return h.Date.now()};e.exports=o}).call(t,function(){return this}())},function(e,t){(function(t){"use strict";function n(e,t,n){function i(t){var n=b,o=v;return b=v=void 0,O=t,g=e.apply(o,n)}function r(e){return O=e,h=setTimeout(s,t),_?i(e):g}function u(e){var n=e-w,o=e-O,i=t-n;return S?x(i,y-o):i}function f(e){var n=e-w,o=e-O;return void 0===w||n>=t||n<0||S&&o>=y}function s(){var e=j();return f(e)?d(e):void(h=setTimeout(s,u(e)))}function d(e){return h=void 0,z&&b?i(e):(b=v=void 0,g)}function l(){void 0!==h&&clearTimeout(h),O=0,b=w=v=h=void 0}function p(){return void 0===h?g:d(j())}function m(){var e=j(),n=f(e);if(b=arguments,v=this,w=e,n){if(void 0===h)return r(w);if(S)return h=setTimeout(s,t),i(w)}return void 0===h&&(h=setTimeout(s,t)),g}var b,v,y,g,h,w,O=0,_=!1,S=!1,z=!0;if("function"!=typeof e)throw new TypeError(c);return t=a(t)||0,o(n)&&(_=!!n.leading,S="maxWait"in n,y=S?k(a(n.maxWait)||0,t):y,z="trailing"in n?!!n.trailing:z),m.cancel=l,m.flush=p,m}function o(e){var t="undefined"==typeof e?"undefined":u(e);return!!e&&("object"==t||"function"==t)}function i(e){return!!e&&"object"==("undefined"==typeof e?"undefined":u(e))}function r(e){return"symbol"==("undefined"==typeof e?"undefined":u(e))||i(e)&&w.call(e)==s}function a(e){if("number"==typeof e)return e;if(r(e))return f;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(d,"");var n=p.test(e);return n||m.test(e)?b(e.slice(2),n?2:8):l.test(e)?f:+e}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c="Expected a function",f=NaN,s="[object Symbol]",d=/^\s+|\s+$/g,l=/^[-+]0x[0-9a-f]+$/i,p=/^0b[01]+$/i,m=/^0o[0-7]+$/i,b=parseInt,v="object"==("undefined"==typeof t?"undefined":u(t))&&t&&t.Object===Object&&t,y="object"==("undefined"==typeof self?"undefined":u(self))&&self&&self.Object===Object&&self,g=v||y||Function("return this")(),h=Object.prototype,w=h.toString,k=Math.max,x=Math.min,j=function(){return g.Date.now()};e.exports=n}).call(t,function(){return this}())},function(e,t){"use strict";function n(e,t){var n=new r(o);a=t,n.observe(i.documentElement,{childList:!0,subtree:!0,removedNodes:!0})}function o(e){e&&e.forEach(function(e){var t=Array.prototype.slice.call(e.addedNodes),n=Array.prototype.slice.call(e.removedNodes),o=t.concat(n).filter(function(e){return e.hasAttribute&&e.hasAttribute("data-aos")}).length;o&&a()})}Object.defineProperty(t,"__esModule",{value:!0});var i=window.document,r=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,a=function(){};t.default=n},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(){return navigator.userAgent||navigator.vendor||window.opera||""}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;ne.position?e.node.classList.add("aos-animate"):"undefined"!=typeof o&&("false"===o||!n&&"true"!==o)&&e.node.classList.remove("aos-animate")},o=function(e,t){var o=window.pageYOffset,i=window.innerHeight;e.forEach(function(e,r){n(e,i+o,t)})};t.default=o},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),r=o(i),a=function(e,t){return e.forEach(function(e,n){e.node.classList.add("aos-init"),e.position=(0,r.default)(e.node,t.offset)}),e};t.default=a},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(13),r=o(i),a=function(e,t){var n=0,o=0,i=window.innerHeight,a={offset:e.getAttribute("data-aos-offset"),anchor:e.getAttribute("data-aos-anchor"),anchorPlacement:e.getAttribute("data-aos-anchor-placement")};switch(a.offset&&!isNaN(a.offset)&&(o=parseInt(a.offset)),a.anchor&&document.querySelectorAll(a.anchor)&&(e=document.querySelectorAll(a.anchor)[0]),n=(0,r.default)(e).top,a.anchorPlacement){case"top-bottom":break;case"center-bottom":n+=e.offsetHeight/2;break;case"bottom-bottom":n+=e.offsetHeight;break;case"top-center":n+=i/2;break;case"bottom-center":n+=i/2+e.offsetHeight;break;case"center-center":n+=i/2+e.offsetHeight/2;break;case"top-top":n+=i;break;case"bottom-top":n+=e.offsetHeight+i;break;case"center-top":n+=e.offsetHeight/2+i}return a.anchorPlacement||a.offset||isNaN(t)||(o=t),n+o};t.default=a},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){for(var t=0,n=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)t+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent;return{top:n,left:t}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){return e=e||document.querySelectorAll("[data-aos]"),Array.prototype.map.call(e,function(e){return{node:e}})};t.default=n}])}); +/*! + * GSAP 3.12.5 + * https://gsap.com + * + * @license Copyright 2024, GreenSock. All rights reserved. + * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership. + * @author: Jack Doyle, jack@greensock.com + */ + +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Vt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Mt(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++ia;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&Ct(t,"onInterrupt"),t}function wb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Wt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(ze,i,_e)}else At.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1>16,e>>8&St,e&St]:0:zt.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),zt[e])p=zt[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=c=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3=U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*(Z(i)?i[0]:i).totalDuration()),1=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof $t?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=$t.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||X,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||Z(t)||$(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if(Z(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Nt,Gt,Wt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?re:te:Zt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(d=ka(p,n)+(Ya(p)||0))&&0!==d||(n=d))),!f||p!==n||Gt)return isNaN(p*n)||""===n?(c||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ka(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),D.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||Rt.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Gt=1,t.vars[e]="+=0",Qt(t,s),Gt=0,o?R(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ia(r)+Ya(h.e)),h.b&&(h.b=u.s+Ya(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Mt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa($t.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){$t[r]=function(){var t=new Xt,e=kt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Zt=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:Zt},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ae,this.d=s||this,this.set=o||Zt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=$t,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\$"+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\$|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\$"+M+"*((?:-\\d)?\\d*)"+M+"*\$|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&v(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!y||!y.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ve(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ye(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ve(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],y=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&y.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||y.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||y.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||y.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||y.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||y.push(".#.+[+~]"),e.querySelectorAll("\\\f"),y.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&y.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&y.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&y.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),y.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),y=y.length&&new RegExp(y.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),v=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&v(p,e)?-1:t==C||t.ownerDocument==p&&v(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!y||!y.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),v.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",v.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",v.option=!!ce.lastChild;var ge={thead:[1,"","

"],col:[2,"","

"],tr:[2,"","

"],td:[3,"","

"],_default:[0,"",""]};function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),v.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(v.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return B(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=_e(v.pixelPosition,function(e,t){if(t)return t=Be(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return B(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})}); +/* == malihu jquery custom scrollbar plugin == Version: 3.1.6, License: MIT License (MIT) */ +!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof module&&module.exports?module.exports=e:e(jQuery,window,document)}(function(e){var t,o,a,n,i,r,l,s,c,d,u,f,m,h,p,g,v,x,S,_,w,C,b,y,B,T,k,M,O,I,D,E,W,R,A,L,z,P,H,U,F,q,j,Y,X,N,V,Q,G,J,K,Z,$,ee,te,oe,ae,ne;oe="function"==typeof define&&define.amd,ae="undefined"!=typeof module&&module.exports,ne="https:"==document.location.protocol?"https:":"http:",oe||(ae?require("jquery-mousewheel")(e):e.event.special.mousewheel||e("head").append(decodeURI("%3Cscript src="+ne+"//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js%3E%3C/script%3E"))),o="mCustomScrollbar",a={setTop:0,setLeft:0,axis:"y",scrollbarPosition:"inside",scrollInertia:950,autoDraggerLength:!0,alwaysShowScrollbar:0,snapOffset:0,mouseWheel:{enable:!0,scrollAmount:"auto",axis:"y",deltaFactor:"auto",disableOver:["select","option","keygen","datalist","textarea"]},scrollButtons:{scrollType:"stepless",scrollAmount:"auto"},keyboard:{enable:!0,scrollType:"stepless",scrollAmount:"auto"},contentTouchScroll:25,documentTouchScroll:!0,advanced:{autoScrollOnFocus:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']",updateOnContentResize:!0,updateOnImageLoad:"auto",autoUpdateTimeout:60},theme:"light",callbacks:{onTotalScrollOffset:0,onTotalScrollBackOffset:0,alwaysTriggerOffsets:!0}},n=0,i={},r=window.attachEvent&&!window.addEventListener?1:0,l=!1,s=["mCSB_dragger_onDrag","mCSB_scrollTools_onDrag","mCS_img_loaded","mCS_disabled","mCS_destroyed","mCS_no_scrollbar","mCS-autoHide","mCS-dir-rtl","mCS_no_scrollbar_y","mCS_no_scrollbar_x","mCS_y_hidden","mCS_x_hidden","mCSB_draggerContainer","mCSB_buttonUp","mCSB_buttonDown","mCSB_buttonLeft","mCSB_buttonRight"],c={init:function(t){var t=e.extend(!0,{},a,t),o=d.call(this);if(t.live){var r=t.liveSelector||this.selector||".mCustomScrollbar",l=e(r);if("off"===t.live)return void f(r);i[r]=setTimeout(function(){l.mCustomScrollbar(t),"once"===t.live&&l.length&&f(r)},500)}else f(r);return t.setWidth=t.set_width?t.set_width:t.setWidth,t.setHeight=t.set_height?t.set_height:t.setHeight,t.axis=t.horizontalScroll?"x":m(t.axis),t.scrollInertia=t.scrollInertia>0&&t.scrollInertia<17?17:t.scrollInertia,"object"!=typeof t.mouseWheel&&1==t.mouseWheel&&(t.mouseWheel={enable:!0,scrollAmount:"auto",axis:"y",preventDefault:!1,deltaFactor:"auto",normalizeDelta:!1,invert:!1}),t.mouseWheel.scrollAmount=t.mouseWheelPixels?t.mouseWheelPixels:t.mouseWheel.scrollAmount,t.mouseWheel.normalizeDelta=t.advanced.normalizeMouseWheelDelta?t.advanced.normalizeMouseWheelDelta:t.mouseWheel.normalizeDelta,t.scrollButtons.scrollType=h(t.scrollButtons.scrollType),u(t),e(o).each(function(){var o=e(this);if(!o.data("mCS")){o.data("mCS",{idx:++n,opt:t,scrollRatio:{y:null,x:null},overflowed:null,contentReset:{y:null,x:null},bindEvents:!1,tweenRunning:!1,sequential:{},langDir:o.css("direction"),cbOffsets:null,trigger:null,poll:{size:{o:0,n:0},img:{o:0,n:0},change:{o:0,n:0}}});var a=o.data("mCS"),i=a.opt,r=o.data("mcs-axis"),l=o.data("mcs-scrollbar-position"),d=o.data("mcs-theme");r&&(i.axis=r),l&&(i.scrollbarPosition=l),d&&(i.theme=d,u(i)),p.call(this),a&&i.callbacks.onCreate&&"function"==typeof i.callbacks.onCreate&&i.callbacks.onCreate.call(this),e("#mCSB_"+a.idx+"_container img:not(."+s[2]+")").addClass(s[2]),c.update.call(null,o)}})},update:function(t,o){var a=t||d.call(this);return e(a).each(function(){var t=e(this);if(t.data("mCS")){var a=t.data("mCS"),n=a.opt,i=e("#mCSB_"+a.idx+"_container"),r=e("#mCSB_"+a.idx),l=[e("#mCSB_"+a.idx+"_dragger_vertical"),e("#mCSB_"+a.idx+"_dragger_horizontal")];if(!i.length)return;a.tweenRunning&&X(t),o&&a&&n.callbacks.onBeforeUpdate&&"function"==typeof n.callbacks.onBeforeUpdate&&n.callbacks.onBeforeUpdate.call(this),t.hasClass(s[3])&&t.removeClass(s[3]),t.hasClass(s[4])&&t.removeClass(s[4]),r.css("max-height","none"),r.height()!==t.height()&&r.css("max-height",t.height()),v.call(this),"y"===n.axis||n.advanced.autoExpandHorizontalScroll||i.css("width",g(i)),a.overflowed=C.call(this),T.call(this),n.autoDraggerLength&&S.call(this),_.call(this),y.call(this);var c=[Math.abs(i[0].offsetTop),Math.abs(i[0].offsetLeft)];"x"!==n.axis&&(a.overflowed[0]?l[0].height()>l[0].parent().height()?b.call(this):(N(t,c[0].toString(),{dir:"y",dur:0,overwrite:"none"}),a.contentReset.y=null):(b.call(this),"y"===n.axis?B.call(this):"yx"===n.axis&&a.overflowed[1]&&N(t,c[1].toString(),{dir:"x",dur:0,overwrite:"none"}))),"y"!==n.axis&&(a.overflowed[1]?l[1].width()>l[1].parent().width()?b.call(this):(N(t,c[1].toString(),{dir:"x",dur:0,overwrite:"none"}),a.contentReset.x=null):(b.call(this),"x"===n.axis?B.call(this):"yx"===n.axis&&a.overflowed[0]&&N(t,c[0].toString(),{dir:"y",dur:0,overwrite:"none"}))),o&&a&&(2===o&&n.callbacks.onImageLoad&&"function"==typeof n.callbacks.onImageLoad?n.callbacks.onImageLoad.call(this):3===o&&n.callbacks.onSelectorChange&&"function"==typeof n.callbacks.onSelectorChange?n.callbacks.onSelectorChange.call(this):n.callbacks.onUpdate&&"function"==typeof n.callbacks.onUpdate&&n.callbacks.onUpdate.call(this)),Y.call(this)}})},scrollTo:function(t,o){if(void 0!==t&&null!=t){var a=d.call(this);return e(a).each(function(){var a=e(this);if(a.data("mCS")){var n=a.data("mCS"),i=n.opt,r={trigger:"external",scrollInertia:i.scrollInertia,scrollEasing:"mcsEaseInOut",moveDragger:!1,timeout:60,callbacks:!0,onStart:!0,onUpdate:!0,onComplete:!0},l=e.extend(!0,{},r,o),s=q.call(this,t),c=l.scrollInertia>0&&l.scrollInertia<17?17:l.scrollInertia;s[0]=j.call(this,s[0],"y"),s[1]=j.call(this,s[1],"x"),l.moveDragger&&(s[0]*=n.scrollRatio.y,s[1]*=n.scrollRatio.x),l.dur=te()?0:c,setTimeout(function(){null!==s[0]&&void 0!==s[0]&&"x"!==i.axis&&n.overflowed[0]&&(l.dir="y",l.overwrite="all",N(a,s[0].toString(),l)),null!==s[1]&&void 0!==s[1]&&"y"!==i.axis&&n.overflowed[1]&&(l.dir="x",l.overwrite="none",N(a,s[1].toString(),l))},l.timeout)}})}},stop:function(){var t=d.call(this);return e(t).each(function(){var t=e(this);t.data("mCS")&&X(t)})},disable:function(t){var o=d.call(this);return e(o).each(function(){var o=e(this);o.data("mCS")&&(o.data("mCS"),Y.call(this,"remove"),B.call(this),t&&b.call(this),T.call(this,!0),o.addClass(s[3]))})},destroy:function(){var t=d.call(this);return e(t).each(function(){var a=e(this);if(a.data("mCS")){var n=a.data("mCS"),i=n.opt,r=e("#mCSB_"+n.idx),l=e("#mCSB_"+n.idx+"_container"),c=e(".mCSB_"+n.idx+"_scrollbar");i.live&&f(i.liveSelector||e(t).selector),Y.call(this,"remove"),B.call(this),b.call(this),a.removeData("mCS"),J(this,"mcs"),c.remove(),l.find("img."+s[2]).removeClass(s[2]),r.replaceWith(l.contents()),a.removeClass(o+" _mCS_"+n.idx+" "+s[6]+" "+s[7]+" "+s[5]+" "+s[3]).addClass(s[4])}})}},d=function(){return"object"!=typeof e(this)||e(this).length<1?".mCustomScrollbar":this},u=function(t){t.autoDraggerLength=!(e.inArray(t.theme,["rounded","rounded-dark","rounded-dots","rounded-dots-dark"])>-1)&&t.autoDraggerLength,t.autoExpandScrollbar=!(e.inArray(t.theme,["rounded-dots","rounded-dots-dark","3d","3d-dark","3d-thick","3d-thick-dark","inset","inset-dark","inset-2","inset-2-dark","inset-3","inset-3-dark"])>-1)&&t.autoExpandScrollbar,t.scrollButtons.enable=!(e.inArray(t.theme,["minimal","minimal-dark"])>-1)&&t.scrollButtons.enable,t.autoHideScrollbar=e.inArray(t.theme,["minimal","minimal-dark"])>-1||t.autoHideScrollbar,t.scrollbarPosition=e.inArray(t.theme,["minimal","minimal-dark"])>-1?"outside":t.scrollbarPosition},f=function(e){i[e]&&(clearTimeout(i[e]),J(i,e))},m=function(e){return"yx"===e||"xy"===e||"auto"===e?"yx":"x"===e||"horizontal"===e?"x":"y"},h=function(e){return"stepped"===e||"pixels"===e||"step"===e||"click"===e?"stepped":"stepless"},p=function(){var t=e(this),a=t.data("mCS"),n=a.opt,i=n.autoExpandScrollbar?" "+s[1]+"_expand":"",r=["

","

"],l="yx"===n.axis?"mCSB_vertical_horizontal":"x"===n.axis?"mCSB_horizontal":"mCSB_vertical",c="yx"===n.axis?r[0]+r[1]:"x"===n.axis?r[1]:r[0],d="yx"===n.axis?"

":"",u=n.autoHideScrollbar?" "+s[6]:"",f="x"!==n.axis&&"rtl"===a.langDir?" "+s[7]:"";n.setWidth&&t.css("width",n.setWidth),n.setHeight&&t.css("height",n.setHeight),n.setLeft="y"!==n.axis&&"rtl"===a.langDir?"989999px":n.setLeft,t.addClass(o+" _mCS_"+a.idx+u+f).wrapInner("

");var m=e("#mCSB_"+a.idx),h=e("#mCSB_"+a.idx+"_container");"y"===n.axis||n.advanced.autoExpandHorizontalScroll||h.css("width",g(h)),"outside"===n.scrollbarPosition?("static"===t.css("position")&&t.css("position","relative"),t.css("overflow","visible"),m.addClass("mCSB_outside").after(c)):(m.addClass("mCSB_inside").append(c),h.wrap(d)),x.call(this);var p=[e("#mCSB_"+a.idx+"_dragger_vertical"),e("#mCSB_"+a.idx+"_dragger_horizontal")];p[0].css("min-height",p[0].height()),p[1].css("min-width",p[1].width())},g=function(t){var o=[t[0].scrollWidth,Math.max.apply(Math,t.children().map(function(){return e(this).outerWidth(!0)}).get())],a=t.parent().width();return o[0]>a?o[0]:o[1]>a?o[1]:"100%"},v=function(){var t=e(this),o=t.data("mCS"),a=o.opt,n=e("#mCSB_"+o.idx+"_container");if(a.advanced.autoExpandHorizontalScroll&&"y"!==a.axis){n.css({width:"auto","min-width":0,"overflow-x":"scroll"});var i=Math.ceil(n[0].scrollWidth);3===a.advanced.autoExpandHorizontalScroll||2!==a.advanced.autoExpandHorizontalScroll&&i>n.parent().width()?n.css({width:i,"min-width":"100%","overflow-x":"inherit"}):n.css({"overflow-x":"inherit",position:"absolute"}).wrap("

" + ); +} + +function obj_movie(src, ids, width, height, autostart) { + var wh = ""; + if (parseInt(width) && parseInt(height)) + wh = " width='" + width + "' height='" + height + "' "; + if (!autostart) autostart = false; + return ( + "

" + ); +} + +function doc_write(cont) { + document.write(cont); +} + +var win_password_lost = function (href) { + window.open( + href, + "win_password_lost", + "left=50, top=50, width=617, height=330, scrollbars=1" + ); +}; + +$(document).ready(function () { + $("#login_password_lost, #ol_password_lost").click(function () { + win_password_lost(this.href); + return false; + }); +}); + +/** + * 포인트 창 + **/ +var win_point = function (href) { + var new_win = window.open( + href, + "win_point", + "left=100,top=100,width=600, height=600, scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 쪽지 창 + **/ +var win_memo = function (href) { + var new_win = window.open( + href, + "win_memo", + "left=100,top=100,width=620,height=500,scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 쪽지 창 + **/ +var check_goto_new = function (href, event) { + if (!(typeof g5_is_mobile != "undefined" && g5_is_mobile)) { + if ( + window.opener && + window.opener.document && + window.opener.document.getElementById + ) { + event.preventDefault + ? event.preventDefault() + : (event.returnValue = false); + window.open(href); + //window.opener.document.location.href = href; + } + } +}; + +/** + * 메일 창 + **/ +var win_email = function (href) { + var new_win = window.open( + href, + "win_email", + "left=100,top=100,width=600,height=580,scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 자기소개 창 + **/ +var win_profile = function (href) { + var new_win = window.open( + href, + "win_profile", + "left=100,top=100,width=620,height=510,scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 스크랩 창 + **/ +var win_scrap = function (href) { + var new_win = window.open( + href, + "win_scrap", + "left=100,top=100,width=600,height=600,scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 홈페이지 창 + **/ +var win_homepage = function (href) { + var new_win = window.open(href, "win_homepage", ""); + new_win.focus(); +}; + +/** + * 우편번호 창 + **/ +var win_zip = function ( + frm_name, + frm_zip, + frm_addr1, + frm_addr2, + frm_addr3, + frm_jibeon +) { + if (typeof daum === "undefined") { + alert("KAKAO 우편번호 서비스 postcode.v2.js 파일이 로드되지 않았습니다."); + return false; + } + + // 핀치 줌 현상 제거 + var vContent = + "width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10"; + $("#meta_viewport").attr("content", vContent + ",user-scalable=no"); + + var zip_case = 1; //0이면 레이어, 1이면 페이지에 끼워 넣기, 2이면 새창 + + var complete_fn = function (data) { + // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. + + // 각 주소의 노출 규칙에 따라 주소를 조합한다. + // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. + var fullAddr = ""; // 최종 주소 변수 + var extraAddr = ""; // 조합형 주소 변수 + + // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. + if (data.userSelectedType === "R") { + // 사용자가 도로명 주소를 선택했을 경우 + fullAddr = data.roadAddress; + } else { + // 사용자가 지번 주소를 선택했을 경우(J) + fullAddr = data.jibunAddress; + } + + // 사용자가 선택한 주소가 도로명 타입일때 조합한다. + if (data.userSelectedType === "R") { + //법정동명이 있을 경우 추가한다. + if (data.bname !== "") { + extraAddr += data.bname; + } + // 건물명이 있을 경우 추가한다. + if (data.buildingName !== "") { + extraAddr += + extraAddr !== "" ? ", " + data.buildingName : data.buildingName; + } + // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다. + extraAddr = extraAddr !== "" ? " (" + extraAddr + ")" : ""; + } + + // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다. + var of = document[frm_name]; + + of[frm_zip].value = data.zonecode; + + of[frm_addr1].value = fullAddr; + of[frm_addr3].value = extraAddr; + + if (of[frm_jibeon] !== undefined) { + of[frm_jibeon].value = data.userSelectedType; + } + + setTimeout(function () { + $("#meta_viewport").attr("content", vContent); + of[frm_addr2].focus(); + }, 100); + }; + + switch (zip_case) { + case 1: //iframe을 이용하여 페이지에 끼워 넣기 + var daum_pape_id = "daum_juso_page" + frm_zip, + element_wrap = document.getElementById(daum_pape_id), + currentScroll = Math.max( + document.body.scrollTop, + document.documentElement.scrollTop + ); + if (element_wrap == null) { + element_wrap = document.createElement("div"); + element_wrap.setAttribute("id", daum_pape_id); + element_wrap.style.cssText = + "display:none;border:1px solid;left:0;width:100%;height:300px;margin:5px 0;position:relative;-webkit-overflow-scrolling:touch;"; + element_wrap.innerHTML = + '

'; + jQuery('form[name="' + frm_name + '"]') + .find('input[name="' + frm_addr1 + '"]') + .before(element_wrap); + jQuery("#" + daum_pape_id) + .off("click", ".close_daum_juso") + .on("click", ".close_daum_juso", function (e) { + e.preventDefault(); + $("#meta_viewport").attr("content", vContent); + jQuery(this).parent().hide(); + }); + } + + new daum.Postcode({ + oncomplete: function (data) { + complete_fn(data); + // iframe을 넣은 element를 안보이게 한다. + element_wrap.style.display = "none"; + // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다. + document.body.scrollTop = currentScroll; + }, + // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. + // iframe을 넣은 element의 높이값을 조정한다. + onresize: function (size) { + element_wrap.style.height = size.height + "px"; + }, + maxSuggestItems: g5_is_mobile ? 6 : 10, + width: "100%", + height: "100%", + }).embed(element_wrap); + + // iframe을 넣은 element를 보이게 한다. + element_wrap.style.display = "block"; + break; + case 2: //새창으로 띄우기 + new daum.Postcode({ + oncomplete: function (data) { + complete_fn(data); + }, + }).open(); + break; + default: //iframe을 이용하여 레이어 띄우기 + var rayer_id = "daum_juso_rayer" + frm_zip, + element_layer = document.getElementById(rayer_id); + if (element_layer == null) { + element_layer = document.createElement("div"); + element_layer.setAttribute("id", rayer_id); + element_layer.style.cssText = + "display:none;border:5px solid;position:fixed;width:300px;height:460px;left:50%;margin-left:-155px;top:50%;margin-top:-235px;overflow:hidden;-webkit-overflow-scrolling:touch;z-index:10000"; + element_layer.innerHTML = + '

a",l.leadingWhitespace=3===a.firstChild.nodeType,l.tbody=!a.getElementsByTagName("tbody").length,l.htmlSerialize=!!a.getElementsByTagName("link").length,l.html5Clone="<:nav>"!==d.createElement("nav").cloneNode(!0).outerHTML,c.type="checkbox",c.checked=!0,b.appendChild(c),l.appendChecked=c.checked,a.innerHTML="",l.noCloneChecked=!!a.cloneNode(!0).lastChild.defaultValue,b.appendChild(a),c=d.createElement("input"),c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),a.appendChild(c),l.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,l.noCloneEvent=!!a.addEventListener,a[n.expando]=1,l.attributes=!a.getAttribute(n.expando)}();var da={option:[1,""],legend:[1,"

","

"],area:[1,"",""],param:[1,"

"],thead:[1,"","

"],tr:[2,"","

"],col:[2,"","

"],td:[3,"","

"],_default:l.htmlSerialize?[0,"",""]:[1,"X

","

"]};da.optgroup=da.option,da.tbody=da.tfoot=da.colgroup=da.caption=da.thead,da.th=da.td;function ea(a,b){var c,d,e=0,f="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||n.nodeName(d,b)?f.push(d):n.merge(f,ea(d,b));return void 0===b||b&&n.nodeName(a,b)?n.merge([a],f):f}function fa(a,b){for(var c,d=0;null!=(c=a[d]);d++)n._data(c,"globalEval",!b||n._data(b[d],"globalEval"))}var ga=/<|&#?\w+;/,ha=/r;r++)if(g=a[r],g||0===g)if("object"===n.type(g))n.merge(q,g.nodeType?[g]:g);else if(ga.test(g)){i=i||p.appendChild(b.createElement("div")),j=($.exec(g)||["",""])[1].toLowerCase(),m=da[j]||da._default,i.innerHTML=m[1]+n.htmlPrefilter(g)+m[2],f=m[0];while(f--)i=i.lastChild;if(!l.leadingWhitespace&&aa.test(g)&&q.push(b.createTextNode(aa.exec(g)[0])),!l.tbody){g="table"!==j||ha.test(g)?""!==m[1]||ha.test(g)?0:i:i.firstChild,f=g&&g.childNodes.length;while(f--)n.nodeName(k=g.childNodes[f],"tbody")&&!k.childNodes.length&&g.removeChild(k)}n.merge(q,i.childNodes),i.textContent="";while(i.firstChild)i.removeChild(i.firstChild);i=p.lastChild}else q.push(b.createTextNode(g));i&&p.removeChild(i),l.appendChecked||n.grep(ea(q,"input"),ia),r=0;while(g=q[r++])if(d&&n.inArray(g,d)>-1)e&&e.push(g);else if(h=n.contains(g.ownerDocument,g),i=ea(p.appendChild(g),"script"),h&&fa(i),c){f=0;while(g=i[f++])_.test(g.type||"")&&c.push(g)}return i=null,p}!function(){var b,c,e=d.createElement("div");for(b in{submit:!0,change:!0,focusin:!0})c="on"+b,(l[b]=c in a)||(e.setAttribute(c,"t"),l[b]=e.attributes[c].expando===!1);e=null}();var ka=/^(?:input|select|textarea)$/i,la=/^key/,ma=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,na=/^(?:focusinfocus|focusoutblur)$/,oa=/^([^.]*)(?:\.(.+)|)/;function pa(){return!0}function qa(){return!1}function ra(){try{return d.activeElement}catch(a){}}function sa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)sa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=qa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n._data(a);if(r){c.handler&&(i=c,c=i.handler,e=i.selector),c.guid||(c.guid=n.guid++),(g=r.events)||(g=r.events={}),(k=r.handle)||(k=r.handle=function(a){return"undefined"==typeof n||a&&n.event.triggered===a.type?void 0:n.event.dispatch.apply(k.elem,arguments)},k.elem=a),b=(b||"").match(G)||[""],h=b.length;while(h--)f=oa.exec(b[h])||[],o=q=f[1],p=(f[2]||"").split(".").sort(),o&&(j=n.event.special[o]||{},o=(e?j.delegateType:j.bindType)||o,j=n.event.special[o]||{},l=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},i),(m=g[o])||(m=g[o]=[],m.delegateCount=0,j.setup&&j.setup.call(a,d,p,k)!==!1||(a.addEventListener?a.addEventListener(o,k,!1):a.attachEvent&&a.attachEvent("on"+o,k))),j.add&&(j.add.call(a,l),l.handler.guid||(l.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,l):m.push(l),n.event.global[o]=!0);a=null}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n.hasData(a)&&n._data(a);if(r&&(k=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=oa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=k[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),i=f=m.length;while(f--)g=m[f],!e&&q!==g.origType||c&&c.guid!==g.guid||h&&!h.test(g.namespace)||d&&d!==g.selector&&("**"!==d||!g.selector)||(m.splice(f,1),g.selector&&m.delegateCount--,l.remove&&l.remove.call(a,g));i&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete k[o])}else for(o in k)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(k)&&(delete r.handle,n._removeData(a,"events"))}},trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(i=m=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!na.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),h=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),l=n.event.special[q]||{},f||!l.trigger||l.trigger.apply(e,c)!==!1)){if(!f&&!l.noBubble&&!n.isWindow(e)){for(j=l.delegateType||q,na.test(j+q)||(i=i.parentNode);i;i=i.parentNode)p.push(i),m=i;m===(e.ownerDocument||d)&&p.push(m.defaultView||m.parentWindow||a)}o=0;while((i=p[o++])&&!b.isPropagationStopped())b.type=o>1?j:l.bindType||q,g=(n._data(i,"events")||{})[b.type]&&n._data(i,"handle"),g&&g.apply(i,c),g=h&&i[h],g&&g.apply&&M(i)&&(b.result=g.apply(i,c),b.result===!1&&b.preventDefault());if(b.type=q,!f&&!b.isDefaultPrevented()&&(!l._default||l._default.apply(p.pop(),c)===!1)&&M(e)&&h&&e[q]&&!n.isWindow(e)){m=e[h],m&&(e[h]=null),n.event.triggered=q;try{e[q]()}catch(s){}n.event.triggered=void 0,m&&(e[h]=m)}return b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(n._data(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())a.rnamespace&&!a.rnamespace.test(g.namespace)||(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!=this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]","i"),va=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,wa=/\s*$/g,Aa=ca(d),Ba=Aa.appendChild(d.createElement("div"));function Ca(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function Da(a){return a.type=(null!==n.find.attr(a,"type"))+"/"+a.type,a}function Ea(a){var b=ya.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Fa(a,b){if(1===b.nodeType&&n.hasData(a)){var c,d,e,f=n._data(a),g=n._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)n.event.add(b,c,h[c][d])}g.data&&(g.data=n.extend({},g.data))}}function Ga(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!l.noCloneEvent&&b[n.expando]){e=n._data(b);for(d in e.events)n.removeEvent(b,d,e.handle);b.removeAttribute(n.expando)}"script"===c&&b.text!==a.text?(Da(b).text=a.text,Ea(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),l.html5Clone&&a.innerHTML&&!n.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&Z.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}}function Ha(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&xa.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),Ha(f,b,c,d)});if(o&&(k=ja(b,a[0].ownerDocument,!1,a,d),e=k.firstChild,1===k.childNodes.length&&(k=e),e||d)){for(i=n.map(ea(k,"script"),Da),h=i.length;o>m;m++)g=k,m!==p&&(g=n.clone(g,!0,!0),h&&n.merge(i,ea(g,"script"))),c.call(a[m],g,m);if(h)for(j=i[i.length-1].ownerDocument,n.map(i,Ea),m=0;h>m;m++)g=i[m],_.test(g.type||"")&&!n._data(g,"globalEval")&&n.contains(j,g)&&(g.src?n._evalUrl&&n._evalUrl(g.src):n.globalEval((g.text||g.textContent||g.innerHTML||"").replace(za,"")));k=e=null}return a}function Ia(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(ea(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&fa(ea(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(va,"<$1>")},clone:function(a,b,c){var d,e,f,g,h,i=n.contains(a.ownerDocument,a);if(l.html5Clone||n.isXMLDoc(a)||!ua.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(Ba.innerHTML=a.outerHTML,Ba.removeChild(f=Ba.firstChild)),!(l.noCloneEvent&&l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(d=ea(f),h=ea(a),g=0;null!=(e=h[g]);++g)d[g]&&Ga(e,d[g]);if(b)if(c)for(h=h||ea(a),d=d||ea(f),g=0;null!=(e=h[g]);g++)Fa(e,d[g]);else Fa(a,f);return d=ea(f,"script"),d.length>0&&fa(d,!i&&ea(a,"script")),d=h=e=null,f},cleanData:function(a,b){for(var d,e,f,g,h=0,i=n.expando,j=n.cache,k=l.attributes,m=n.event.special;null!=(d=a[h]);h++)if((b||M(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)m[e]?n.event.remove(d,e):n.removeEvent(d,e,g.handle);j[f]&&(delete j[f],k||"undefined"==typeof d.removeAttribute?d[i]=void 0:d.removeAttribute(i),c.push(f))}}}),n.fn.extend({domManip:Ha,detach:function(a){return Ia(this,a,!0)},remove:function(a){return Ia(this,a)},text:function(a){return Y(this,function(a){return void 0===a?n.text(this):this.empty().append((this[0]&&this[0].ownerDocument||d).createTextNode(a))},null,a,arguments.length)},append:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.appendChild(a)}})},prepend:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&n.cleanData(ea(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&n.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return Y(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(ta,""):void 0;if("string"==typeof a&&!wa.test(a)&&(l.htmlSerialize||!ua.test(a))&&(l.leadingWhitespace||!aa.test(a))&&!da[($.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ea(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ha(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(ea(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=0,e=[],f=n(a),h=f.length-1;h>=d;d++)c=d===h?this:this.clone(!0),n(f[d])[b](c),g.apply(e,c.get());return this.pushStack(e)}});var Ja,Ka={HTML:"block",BODY:"block"};function La(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function Ma(a){var b=d,c=Ka[a];return c||(c=La(a,b),"none"!==c&&c||(Ja=(Ja||n("'),c.attr("height",h),c.attr("width",g),"youtube"===f.type?c.attr("src","//www.youtube.com/embed/"+f.id+"?autoplay=1&rel=0&v="+f.id):"vimeo"===f.type?c.attr("src","//player.vimeo.com/video/"+f.id+"?autoplay=1"):"vzaar"===f.type&&c.attr("src","//view.vzaar.com/"+f.id+"/player?autoplay=true"),a(c).wrap('

').insertAfter(e.find(".owl-video")),this._playing=e.addClass("owl-video-playing"))},e.prototype.isInFullScreen=function(){var b=c.fullscreenElement||c.mozFullScreenElement||c.webkitFullscreenElement;return b&&a(b).parent().hasClass("owl-video-frame")},e.prototype.destroy=function(){var a,b;this._core.$element.off("click.owl.video");for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Video=e}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){var e=function(b){this.core=b,this.core.options=a.extend({},e.Defaults,this.core.options),this.swapping=!0,this.previous=d,this.next=d,this.handlers={"change.owl.carousel":a.proxy(function(a){a.namespace&&"position"==a.property.name&&(this.previous=this.core.current(),this.next=a.property.value)},this),"drag.owl.carousel dragged.owl.carousel translated.owl.carousel":a.proxy(function(a){a.namespace&&(this.swapping="translated"==a.type)},this),"translate.owl.carousel":a.proxy(function(a){a.namespace&&this.swapping&&(this.core.options.animateOut||this.core.options.animateIn)&&this.swap()},this)},this.core.$element.on(this.handlers)};e.Defaults={animateOut:!1, +animateIn:!1},e.prototype.swap=function(){if(1===this.core.settings.items&&a.support.animation&&a.support.transition){this.core.speed(0);var b,c=a.proxy(this.clear,this),d=this.core.$stage.children().eq(this.previous),e=this.core.$stage.children().eq(this.next),f=this.core.settings.animateIn,g=this.core.settings.animateOut;this.core.current()!==this.previous&&(g&&(b=this.core.coordinates(this.previous)-this.core.coordinates(this.next),d.one(a.support.animation.end,c).css({left:b+"px"}).addClass("animated owl-animated-out").addClass(g)),f&&e.one(a.support.animation.end,c).addClass("animated owl-animated-in").addClass(f))}},e.prototype.clear=function(b){a(b.target).css({left:""}).removeClass("animated owl-animated-out owl-animated-in").removeClass(this.core.settings.animateIn).removeClass(this.core.settings.animateOut),this.core.onTransitionEnd()},e.prototype.destroy=function(){var a,b;for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Animate=e}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){var e=function(b){this._core=b,this._call=null,this._time=0,this._timeout=0,this._paused=!0,this._handlers={"changed.owl.carousel":a.proxy(function(a){a.namespace&&"settings"===a.property.name?this._core.settings.autoplay?this.play():this.stop():a.namespace&&"position"===a.property.name&&this._paused&&(this._time=0)},this),"initialized.owl.carousel":a.proxy(function(a){a.namespace&&this._core.settings.autoplay&&this.play()},this),"play.owl.autoplay":a.proxy(function(a,b,c){a.namespace&&this.play(b,c)},this),"stop.owl.autoplay":a.proxy(function(a){a.namespace&&this.stop()},this),"mouseover.owl.autoplay":a.proxy(function(){this._core.settings.autoplayHoverPause&&this._core.is("rotating")&&this.pause()},this),"mouseleave.owl.autoplay":a.proxy(function(){this._core.settings.autoplayHoverPause&&this._core.is("rotating")&&this.play()},this),"touchstart.owl.core":a.proxy(function(){this._core.settings.autoplayHoverPause&&this._core.is("rotating")&&this.pause()},this),"touchend.owl.core":a.proxy(function(){this._core.settings.autoplayHoverPause&&this.play()},this)},this._core.$element.on(this._handlers),this._core.options=a.extend({},e.Defaults,this._core.options)};e.Defaults={autoplay:!1,autoplayTimeout:5e3,autoplayHoverPause:!1,autoplaySpeed:!1},e.prototype._next=function(d){this._call=b.setTimeout(a.proxy(this._next,this,d),this._timeout*(Math.round(this.read()/this._timeout)+1)-this.read()),this._core.is("interacting")||c.hidden||this._core.next(d||this._core.settings.autoplaySpeed)},e.prototype.read=function(){return(new Date).getTime()-this._time},e.prototype.play=function(c,d){var e;this._core.is("rotating")||this._core.enter("rotating"),c=c||this._core.settings.autoplayTimeout,e=Math.min(this._time%(this._timeout||c),c),this._paused?(this._time=this.read(),this._paused=!1):b.clearTimeout(this._call),this._time+=this.read()%c-e,this._timeout=c,this._call=b.setTimeout(a.proxy(this._next,this,d),c-e)},e.prototype.stop=function(){this._core.is("rotating")&&(this._time=0,this._paused=!0,b.clearTimeout(this._call),this._core.leave("rotating"))},e.prototype.pause=function(){this._core.is("rotating")&&!this._paused&&(this._time=this.read(),this._paused=!0,b.clearTimeout(this._call))},e.prototype.destroy=function(){var a,b;this.stop();for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.autoplay=e}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){"use strict";var e=function(b){this._core=b,this._initialized=!1,this._pages=[],this._controls={},this._templates=[],this.$element=this._core.$element,this._overrides={next:this._core.next,prev:this._core.prev,to:this._core.to},this._handlers={"prepared.owl.carousel":a.proxy(function(b){b.namespace&&this._core.settings.dotsData&&this._templates.push('

'+a(b.content).find("[data-dot]").addBack("[data-dot]").attr("data-dot")+"

")},this),"added.owl.carousel":a.proxy(function(a){a.namespace&&this._core.settings.dotsData&&this._templates.splice(a.position,0,this._templates.pop())},this),"remove.owl.carousel":a.proxy(function(a){a.namespace&&this._core.settings.dotsData&&this._templates.splice(a.position,1)},this),"changed.owl.carousel":a.proxy(function(a){a.namespace&&"position"==a.property.name&&this.draw()},this),"initialized.owl.carousel":a.proxy(function(a){a.namespace&&!this._initialized&&(this._core.trigger("initialize",null,"navigation"),this.initialize(),this.update(),this.draw(),this._initialized=!0,this._core.trigger("initialized",null,"navigation"))},this),"refreshed.owl.carousel":a.proxy(function(a){a.namespace&&this._initialized&&(this._core.trigger("refresh",null,"navigation"),this.update(),this.draw(),this._core.trigger("refreshed",null,"navigation"))},this)},this._core.options=a.extend({},e.Defaults,this._core.options),this.$element.on(this._handlers)};e.Defaults={nav:!1,navText:['‹','›'],navSpeed:!1,navElement:'button type="button" role="presentation"',navContainer:!1,navContainerClass:"owl-nav",navClass:["owl-prev","owl-next"],slideBy:1,dotClass:"owl-dot",dotsClass:"owl-dots",dots:!0,dotsEach:!1,dotsData:!1,dotsSpeed:!1,dotsContainer:!1},e.prototype.initialize=function(){var b,c=this._core.settings;this._controls.$relative=(c.navContainer?a(c.navContainer):a("

").addClass(c.navContainerClass).appendTo(this.$element)).addClass("disabled"),this._controls.$previous=a("<"+c.navElement+">").addClass(c.navClass[0]).html(c.navText[0]).prependTo(this._controls.$relative).on("click",a.proxy(function(a){this.prev(c.navSpeed)},this)),this._controls.$next=a("<"+c.navElement+">").addClass(c.navClass[1]).html(c.navText[1]).appendTo(this._controls.$relative).on("click",a.proxy(function(a){this.next(c.navSpeed)},this)),c.dotsData||(this._templates=[a('

","

"],col:[2,"","

"],tr:[2,"","

"],td:[3,"","

","

"],l="yx"===n.axis?"mCSB_vertical_horizontal":"x"===n.axis?"mCSB_horizontal":"mCSB_vertical",c="yx"===n.axis?r[0]+r[1]:"x"===n.axis?r[1]:r[0],d="yx"===n.axis?"

"],col:[2,"","

"],tr:[2,"","

"],td:[3,"","

'; + document.body.appendChild(element_layer); + jQuery("#" + rayer_id) + .off("click", ".close_daum_juso") + .on("click", ".close_daum_juso", function (e) { + e.preventDefault(); + $("#meta_viewport").attr("content", vContent); + jQuery(this).parent().hide(); + }); + } + + new daum.Postcode({ + oncomplete: function (data) { + complete_fn(data); + // iframe을 넣은 element를 안보이게 한다. + element_layer.style.display = "none"; + }, + maxSuggestItems: g5_is_mobile ? 6 : 10, + width: "100%", + height: "100%", + }).embed(element_layer); + + // iframe을 넣은 element를 보이게 한다. + element_layer.style.display = "block"; + } +}; + +/** + * 새로운 비밀번호 분실 창 : 101123 + **/ +win_password_lost = function (href) { + var new_win = window.open( + href, + "win_password_lost", + "width=617, height=330, scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 설문조사 결과 + **/ +var win_poll = function (href) { + var new_win = window.open( + href, + "win_poll", + "width=616, height=500, scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 쿠폰 + **/ +var win_coupon = function (href) { + var new_win = window.open( + href, + "win_coupon", + "left=100,top=100,width=700, height=600, scrollbars=1" + ); + new_win.focus(); +}; + +/** + * 스크린리더 미사용자를 위한 스크립트 - 지운아빠 2013-04-22 + * alt 값만 갖는 그래픽 링크에 마우스오버 시 title 값 부여, 마우스아웃 시 title 값 제거 + **/ +$(function () { + $("a img") + .mouseover(function () { + $a_img_title = $(this).attr("alt"); + $(this).attr("title", $a_img_title); + }) + .mouseout(function () { + $(this).attr("title", ""); + }); +}); + +/** + * 텍스트 리사이즈 + **/ +function font_resize(id, rmv_class, add_class, othis) { + var $el = $("#" + id); + + if ( + (typeof rmv_class !== "undefined" && rmv_class) || + (typeof add_class !== "undefined" && add_class) + ) { + $el.removeClass(rmv_class).addClass(add_class); + + set_cookie("ck_font_resize_rmv_class", rmv_class, 1, g5_cookie_domain); + set_cookie("ck_font_resize_add_class", add_class, 1, g5_cookie_domain); + } + + if (typeof othis !== "undefined") { + $(othis).addClass("select").siblings().removeClass("select"); + } +} + +/** + * 댓글 수정 토큰 + **/ +function set_comment_token(f) { + if (typeof f.token === "undefined") + $(f).prepend(''); + + $.ajax({ + url: g5_bbs_url + "/ajax.comment_token.php", + type: "GET", + dataType: "json", + async: false, + cache: false, + success: function (data, textStatus) { + f.token.value = data.token; + }, + }); +} + +$(function () { + $(".win_point").click(function () { + win_point(this.href); + return false; + }); + + $(".win_memo").click(function () { + win_memo(this.href); + return false; + }); + + $(".win_email").click(function () { + win_email(this.href); + return false; + }); + + $(".win_scrap").click(function () { + win_scrap(this.href); + return false; + }); + + $(".win_profile").click(function () { + win_profile(this.href); + return false; + }); + + $(".win_homepage").click(function () { + win_homepage(this.href); + return false; + }); + + $(".win_password_lost").click(function () { + win_password_lost(this.href); + return false; + }); + + /* + $(".win_poll").click(function() { + win_poll(this.href); + return false; + }); + */ + + $(".win_coupon").click(function () { + win_coupon(this.href); + return false; + }); + + // 사이드뷰 + var sv_hide = false; + $(".sv_member, .sv_guest").click(function () { + $(".sv").removeClass("sv_on"); + $(this).closest(".sv_wrap").find(".sv").addClass("sv_on"); + }); + + $(".sv, .sv_wrap").hover( + function () { + sv_hide = false; + }, + function () { + sv_hide = true; + } + ); + + $(".sv_member, .sv_guest").focusin(function () { + sv_hide = false; + $(".sv").removeClass("sv_on"); + $(this).closest(".sv_wrap").find(".sv").addClass("sv_on"); + }); + + $(".sv a").focusin(function () { + sv_hide = false; + }); + + $(".sv a").focusout(function () { + sv_hide = true; + }); + + // 셀렉트 ul + var sel_hide = false; + $(".sel_btn").click(function () { + $(".sel_ul").removeClass("sel_on"); + $(this).siblings(".sel_ul").addClass("sel_on"); + }); + + $(".sel_wrap").hover( + function () { + sel_hide = false; + }, + function () { + sel_hide = true; + } + ); + + $(".sel_a").focusin(function () { + sel_hide = false; + }); + + $(".sel_a").focusout(function () { + sel_hide = true; + }); + + $(document).click(function () { + if (sv_hide) { + // 사이드뷰 해제 + $(".sv").removeClass("sv_on"); + } + if (sel_hide) { + // 셀렉트 ul 해제 + $(".sel_ul").removeClass("sel_on"); + } + }); + + $(document).focusin(function () { + if (sv_hide) { + // 사이드뷰 해제 + $(".sv").removeClass("sv_on"); + } + if (sel_hide) { + // 셀렉트 ul 해제 + $(".sel_ul").removeClass("sel_on"); + } + }); + + $(document).on("keyup change", "textarea#wr_content[maxlength]", function () { + var str = $(this).val(); + var mx = parseInt($(this).attr("maxlength")); + if (str.length > mx) { + $(this).val(str.substr(0, mx)); + return false; + } + }); +}); + +function get_write_token(bo_table) { + var token = ""; + + $.ajax({ + type: "POST", + url: g5_bbs_url + "/write_token.php", + data: { bo_table: bo_table }, + cache: false, + async: false, + dataType: "json", + success: function (data) { + if (data.error) { + alert(data.error); + if (data.url) document.location.href = data.url; + + return false; + } + + token = data.token; + }, + }); + + return token; +} + +$(function () { + $(document).on( + "click", + "form[name=fwrite] input:submit, form[name=fwrite] button:submit, form[name=fwrite] input:image", + function () { + var f = this.form; + + if (typeof f.bo_table == "undefined") { + return; + } + + var bo_table = f.bo_table.value; + var token = get_write_token(bo_table); + + if (!token) { + alert("토큰 정보가 올바르지 않습니다."); + return false; + } + + var $f = $(f); + + if (typeof f.token === "undefined") + $f.prepend(''); + + $f.find("input[name=token]").val(token); + + return true; + } + ); +}); + +//디자인팀 작업 내용 추가 +// include.js +window.addEventListener("load", function () { + var allElements = document.getElementsByTagName("*"); + Array.prototype.forEach.call(allElements, function (el) { + var includePath = el.dataset.includePath; + if (includePath) { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + el.outerHTML = this.responseText; + } + }; + xhttp.open("GET", includePath, true); + xhttp.send(); + } + }); +}); + +$(function () { + document.querySelector("head title").textContent = "EG-BIM"; +}); + +// ★★ lenis 멈추기 ★★ +function handlePopupScroll(e) { + $("body").css("overflow", "hidden"); + $("body").on("wheel", function (e) { + e.stopPropagation(); + }); + $("body").on("touchmove", function (e) { + e.stopPropagation(); + }); + lenis.stop(); +} + +// 각 팝업창 불러오기 +function agreement() { + $(".popup_wrap").hide(); + $(".btn_close").show(); + $("#pop_agreement").show(0, function () { + //팝업창 열때 체크박스 모두 해제 + $("#fregister input[type=checkbox]").prop("checked", false); + $("#reg_mb_id").val(""); + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +//250813 송대일 추가 agreement() 수정 +// function agreement() { +// $(".popup_wrap").hide(); +// $(".btn_close").show(); + +// $("#pop_agreement").show(0, function () { +// // 팝업 열 때 체크박스 모두 해제 +// $("#fregister input[type=checkbox]").prop("checked", false); +// $("#reg_mb_id").val(""); + +// // ★ 동의 버튼 강제 활성화 (혹시 다른 스크립트가 disabled 걸었을 경우 대비) +// $('#btn_agree, #fregister button[type=submit]').prop('disabled', false) +// .css('pointer-events', 'auto'); + +// handlePopupScroll(); +// console.log("body stop 완료"); + +// // ★ 이 줄이 문제 가능성이 큽니다. 매번 popup.js를 다시 실행시키지 마세요. +// // $.getScript("../js/popup.js", function () {}); +// }); +// } + +function join() { + $(".popup_wrap").hide(); + $("#pop_join").show(0, function () { + //회원가입 입력창 비밀번호 자동 입력 제거 + $("#reg_mb_password").val(""); + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function login() { + $(".popup_wrap").hide(); + //새로고침 없이 다시 팝업창 열었을때 자동 입력된 id, pw 제거 + $("#login_id").val(""); + $("#login_pw").val(""); + $("#pop_login").show(0, function () { + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function mypage01() { + $(".popup_wrap").hide(); + $(".btn_close").show(); + $("#pop_mypage01").show(0, function () { + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function mypage02() { + $(".popup_wrap").hide(); + $("#pop_mypage02").show(0, function () { + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function mypage03() { + $(".popup_wrap").hide(); + $("#pop_mypage03").show(0, function () { + handlePopupScroll(); + // 팝업이 완전히 열릴 때마다 사용자 정보 재조회 + if (typeof loadDescopeUser === "function") { + loadDescopeUser(); + } + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function search() { + $(".popup_wrap").hide(); + $("#pop_search").show(0, function () { + handlePopupScroll(); + //비밀번호 재설정 입력창 아이디 자동입력 제거 + $("#txt_name").val(""); + //비밀번호 재설정 입력창 비밀번호 자동입력 제거 + $("#pw_reset1").val(""); + //비밀번호 재설정 버튼 클릭시 아이디 입력창 띄움 + $("#pop_search .popup_contents_wrap").hide(); + $("#pop_search .popup_contents_wrap").eq(0).show(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); +} + +function sitemap() { + const $popup = $(".popup_sitemap"); + + if ($popup.css("display") === "none") { + $("#sitemap").show(0, function () { + $(".menu_ham").addClass("btn_map_close"); + handlePopupScroll(); + console.log("body stop 완료"); + // $.getScript("../js/popup.js", function () {}); + }); + } else { + $(".popup_sitemap").hide(); + $(".menu_ham").removeClass("btn_map_close"); + $("body").css("overflow", ""); // 기본 스크롤 상태로 복귀 + lenis.start(); + } +} + +function privacy(type) { + $(".popup_wrap").hide(); + $("#pop_privacy").show(0, function () { + handlePopupScroll(); + console.log("body stop 완료"); + $.getScript("../js/popup.js", function () { + if (type === "privacy") { + $("#pop_privacy li.tab_privacy").addClass("on"); + $("#pop_privacy li.tab_agreement").removeClass("on"); + $(".content.pri").addClass("show").removeClass("hide"); + $(".content.agr").removeClass("show").addClass("hide"); + } else if (type === "agreement") { + $("#pop_privacy li.tab_agreement").addClass("on"); + $("#pop_privacy li.tab_privacy").removeClass("on"); + $(".content.agr").addClass("show").removeClass("hide"); + $(".content.pri").removeClass("show").addClass("hide"); + } + }); + }); +} + +// FOOTER - top버튼 위치 조정하기 +// document.addEventListener("DOMContentLoaded", (event) => { +// const topButton = document.querySelector(".btn_top"); + +// function adjustButtonPosition() { +// const scrollY = window.scrollY; // 현재 스크롤 위치 +// const windowHeight = window.innerHeight; // 윈도우 높이 +// const documentHeight = document.documentElement.scrollHeight; // 문서 전체 높이 + +// const bottomSpace = 220; // 탑 버튼이 아래에서 떨어져 있어야 하는 거리 +// // const buttonHeight = topButton.offsetHeight; // 탑 버튼의 높이 + +// // 문서의 맨 아래로부터 300px 떨어지기 위한 계산 +// if (scrollY + windowHeight >= documentHeight - bottomSpace) { +// topButton.style.bottom = `${ +// bottomSpace + (scrollY + windowHeight - documentHeight) +// }px`; +// } else { +// topButton.style.bottom = "60px"; // 원래의 위치 +// } +// } + +// window.addEventListener("scroll", adjustButtonPosition); +// window.addEventListener("load", adjustButtonPosition); + +// const showNav = gsap +// .from(".js__header", { +// yPercent: -200, +// paused: true, +// duration: 0.2, +// }) +// .progress(1); + +// ScrollTrigger.create({ +// start: "top top", +// end: 99999, +// onUpdate: (self) => { +// self.direction === -1 ? showNav.play() : showNav.reverse(); +// }, +// }); + +// // 새로운 코드 추가 - topButton의 표시/숨기기 로직 +// function toggleTopButtonClass() { +// if (window.scrollY === 0) { +// topButton.classList.remove("topbtn_on"); +// topButton.classList.add("topbtn_off"); // 스크롤이 맨 위일 때 topbtn_off 추가 +// } else { +// topButton.classList.remove("topbtn_off"); +// topButton.classList.add("topbtn_on"); // 스크롤이 내려가면 topbtn_on으로 변경 +// } +// } + +// window.addEventListener("scroll", toggleTopButtonClass); +// window.addEventListener("load", toggleTopButtonClass); // 페이지 로드 시 초기 상태 설정 +// }); + +//250812 송대일 수정 +document.addEventListener("DOMContentLoaded", () => { + const topButton = document.querySelector(".btn_top"); + + // rAF 스로틀링 + let scheduled = false; + const schedule = (fn) => { + if (scheduled) return; + scheduled = true; + requestAnimationFrame(() => { + fn(); + scheduled = false; + }); + }; + + function adjustButtonPosition() { + if (!topButton) return; // ← 가드 + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + const bottomSpace = 120; + + if (scrollY + windowHeight >= documentHeight - bottomSpace) { + topButton.style.bottom = `${ + bottomSpace + (scrollY + windowHeight - documentHeight) + }px`; + } else { + topButton.style.bottom = "60px"; + } + } + + function toggleTopButtonClass() { + if (!topButton) return; // ← 가드 + if (window.scrollY === 0) { + topButton.classList.remove("topbtn_on"); + topButton.classList.add("topbtn_off"); + } else { + topButton.classList.remove("topbtn_off"); + topButton.classList.add("topbtn_on"); + } + } + + // .btn_top 이 있을 때만 바인딩 + if (topButton) { + const onScroll = () => + schedule(() => { + adjustButtonPosition(); + toggleTopButtonClass(); + }); + window.addEventListener("scroll", onScroll, { passive: true }); + window.addEventListener("load", () => { + adjustButtonPosition(); + toggleTopButtonClass(); + }); + } + + // ── 헤더 애니메이션 (GSAP/ScrollTrigger가 있을 때만) + if (window.gsap) { + try { + if (window.ScrollTrigger && gsap.registerPlugin) { + gsap.registerPlugin(ScrollTrigger); + } + const showNav = gsap + .from(".js__header", { + yPercent: -200, + paused: true, + duration: 0.2, + }) + .progress(1); + + if (window.ScrollTrigger) { + ScrollTrigger.create({ + start: "top top", + end: 99999, + onUpdate: (self) => { + self.direction === -1 ? showNav.play() : showNav.reverse(); + }, + }); + } + } catch (e) { + console.error(e); + } + } +}); + +// FOOTER - 패밀리사이트 열고닫기 +$(function () { + $(".menu_my").mouseover(function () { + $(".menu_my_list").show(); + }); + + $(".menu_my").mouseout(function () { + $(".menu_my_list").hide(); + }); + + //footer family site toggle + $(".family_btn").click(function (event) { + event.stopPropagation(); // family_btn 클릭 시 이벤트 전파를 막음 + $(".family_list").toggleClass("family_on"); + $(".family_btn").toggleClass("family_on"); + }); + + // 화면 아무 곳이나 클릭했을 때 family_list를 제외한 영역 클릭 시 리스트 닫기 + $(document).click(function (event) { + if ( + !$(event.target).closest(".family_list").length && + !$(event.target).closest(".family_btn").length + ) { + // family_list와 family_btn 외의 영역을 클릭한 경우 + $(".family_list").removeClass("family_on"); + $(".family_btn").removeClass("family_on"); + } + }); +}); + +// 마우스 스크롤 마크 표시하기 +// 사용 클래스 : js__mouse_mark , js__mouse_area +// + TODO 진슬 추가_ addEventListener error debugging +window.onload = function () { + document.addEventListener("DOMContentLoaded", () => { + const mouseMark = document.querySelector(".js__mouse_mark"); + const mouseArea = document.querySelector(".js__mouse_area"); + const mouseNot = document.querySelector(".js__mouse_not"); + + mouseArea.addEventListener("mousemove", (e) => { + mouseMark.style.left = `${e.clientX}px`; + mouseMark.style.top = `${e.clientY}px`; + mouseMark.style.display = "flex"; + }); + + mouseArea.addEventListener( + "mouseleave", + () => (mouseMark.style.display = "none") + ); + + mouseNot.addEventListener( + "mouseover", + () => (mouseMark.style.opacity = "0") + ); + mouseNot.addEventListener( + "mouseleave", + () => (mouseMark.style.opacity = "1") + ); + }); + + document.addEventListener("DOMContentLoaded", () => { + const mouseMark02 = document.querySelector(".js__mouse_mark02"); + const mouseArea02 = document.querySelector(".js__mouse_area02"); + const mouseNot02 = document.querySelector(".js__mouse_not02"); + + mouseArea02.addEventListener("mousemove", (e) => { + mouseMark02.style.left = `${e.clientX}px`; + mouseMark02.style.top = `${e.clientY}px`; + mouseMark02.style.display = "flex"; + }); + + mouseArea02.addEventListener( + "mouseleave", + () => (mouseMark02.style.display = "none") + ); + + mouseNot02.addEventListener( + "mouseover", + () => (mouseMark02.style.opacity = "0") + ); + mouseNot02.addEventListener( + "mouseleave", + () => (mouseMark02.style.opacity = "1") + ); + }); +}; + +// 이메일 줄바꿈 +document.addEventListener("DOMContentLoaded", () => { + const emailSpan = document.getElementById("span_email"); + + function addBreakToEmail() { + if (!emailSpan) return; + // 요소의 width를 가져옴 + const emailWidth = emailSpan.offsetWidth; + + // width가 400px 이상일 때 + if (emailWidth >= 250) { + let emailText = emailSpan.textContent; // 현재 이메일 텍스트 + const emailParts = emailText.split("@"); // @를 기준으로 분리 + + if (emailParts.length === 2) { + // 유효한 이메일 형식인지 확인 + emailSpan.innerHTML = `${emailParts[0]}
@${emailParts[1]}`; // @ 앞에
태그 추가 + } + } + } + + // 페이지가 로드된 후 실행 + window.addEventListener("load", addBreakToEmail); +}); + +//refresh Token 설정 250827 +async function refreshSession() { + try { + const res = await fetch("/egbim/bbs/descope_refresh_session.php", { + method: "POST", + credentials: "include", + }); + const json = await res.json(); + if (json.status === "ok") { + sessionStorage.setItem("sessionJwt", json.sessionJwt); + console.log("세션 갱신 완료"); + } else { + console.warn("세션 갱신 실패", json); + } + } catch (e) { + console.error("갱신 에러", e); + } +} + +// ✅ 주기적 호출 (예: 5분마다) +setInterval(refreshSession, 5 * 60 * 1000); + +// sessionJwt 가져오기 +function getSessionJwt() { + return sessionStorage.getItem("sessionJwt"); +} + +// API 호출 헬퍼 +async function apiFetch(url, options = {}) { + // 기본 헤더 + options.headers = { + ...(options.headers || {}), + Authorization: "Bearer " + getSessionJwt(), + "Content-Type": "application/json", + }; + options.credentials = "include"; // 서버 세션 쿠키 포함 + + let res = await fetch(url, options); + + // ✅ 토큰 만료시 자동 갱신 + if (res.status === 401 || res.status === 403) { + console.warn("토큰 만료 → refresh_session.php 호출"); + + const refreshRes = await fetch("/egbim/bbs/refresh_session.php", { + method: "POST", + credentials: "include", + }); + + if (refreshRes.ok) { + const json = await refreshRes.json(); + if (json.sessionJwt) { + sessionStorage.setItem("sessionJwt", json.sessionJwt); + + // Authorization 헤더 갱신 후 재시도 + options.headers["Authorization"] = "Bearer " + json.sessionJwt; + res = await fetch(url, options); + } else { + alert("세션 갱신 실패 → 다시 로그인 필요"); + window.location.href = "/egbim/index.php?popup=login"; + } + } else { + alert("세션이 만료되었습니다. 다시 로그인해주세요."); + window.location.href = "/egbim/index.php?popup=login"; + } + } + + return res; +} + +// === 탭 닫을 때 서버 세션 종료 === +// window.addEventListener("beforeunload", function () { +// try { +// // sendBeacon은 비동기지만 브라우저 종료 시점에도 안전하게 전송됨 +// navigator.sendBeacon("/egbim/skin/member/basic/descope_logout.php"); +// } catch (e) { +// console.error("beforeunload logout error:", e); +// } +// }); diff --git a/kngil/js/qa/qa_index.js b/kngil/js/qa/qa_index.js new file mode 100644 index 0000000..d666b9c --- /dev/null +++ b/kngil/js/qa/qa_index.js @@ -0,0 +1,198 @@ +$(function () { + var obj = document.getElementById("video_play"); + var video = $("#video_play").get(0); + var i = 1; + + // 영상 소스를 비율에 맞게 설정하는 함수 + function updateVideoSource() { + var width = $(window).width(); + var height = $(window).height(); + var ratio = width / height; + + // 비율이 가로가 더 길면 기본 영상, 세로가 더 길면 '_v'가 붙은 영상 + if (ratio > 1) { + $("#video_play").attr("src", "img/main_" + i + ".mp4"); + $("ul.pagination_main").removeClass("m"); + } else { + $("#video_play").attr("src", "img/main_" + i + "_v.mp4"); + $("ul.pagination_main").addClass("m"); + } + + // 영상 로드 및 자동 재생 + video.load(); + video.play(); + } + + // 페이지 로드 시 비율에 맞는 영상 설정 + updateVideoSource(); + + // 화면 사이즈가 변경될 때마다 비율에 맞는 영상 설정 + $(window).resize(function () { + updateVideoSource(); + }); + console.log("리사이징 완료"); + + // 인트로 페이지 종료 후 첫 영상 실행 + video.pause(); + $(".pagination_main").hide(); + + if (sessionStorage.getItem("visited")) { + video.play(); + $(".pagination_main").show(); + } else { + setTimeout(function () { + video.play(); + $(".pagination_main").show(); + }, 2800); + } + + // 페이지 네이션 - 클릭하면 해당 영상 실행 + function setPageVideo(pageNum) { + i = pageNum; + updateVideoSource(); // 비율에 맞는 영상으로 설정 + $(".page_0" + i).addClass("page_on"); + $(".pagination_main div") + .not(".page_0" + i) + .removeClass("page_on"); + $(".main_link_0" + i).addClass("link_on"); + $(".main_link a") + .not(".main_link_0" + i) + .removeClass("link_on"); + } + + // 각 페이지 클릭 시 영상 변경 + $(".page_01").click(function () { + setPageVideo(1); + console.log("영상1 재생"); + }); + $(".page_02").click(function () { + setPageVideo(2); + console.log("영상2 재생"); + }); + $(".page_03").click(function () { + setPageVideo(3); + console.log("영상3 재생"); + }); + $(".page_04").click(function () { + setPageVideo(4); + console.log("영상4 재생"); + }); + $(".page_05").click(function () { + setPageVideo(5); + console.log("영상5 재생"); + }); + + // 영상 종료 후 다음 영상 실행 + $("#video_play").on("ended", function () { + if (i < 5) { + i = i + 1; + updateVideoSource(); + $(".page_0" + i).addClass("page_on"); + $(".pagination_main div") + .not(".page_0" + i) + .removeClass("page_on"); + $(".main_link_0" + i).addClass("link_on"); + $(".main_link a") + .not(".main_link_0" + i) + .removeClass("link_on"); + } else { + i = 1; + updateVideoSource(); + $(".page_0" + i).addClass("page_on"); + $(".pagination_main div") + .not(".page_0" + i) + .removeClass("page_on"); + $(".main_link_0" + i).addClass("link_on"); + $(".main_link a") + .not(".main_link_0" + i) + .removeClass("link_on"); + } + video.play(); // 영상 자동 재생 + }); +}); + +// index footer 동작 +$(function () { + let currentMode = null; + + // 디바이스 체크 함수 + function getDeviceType() { + const ua = navigator.userAgent.toLowerCase(); + const isMobile = + /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(ua); + const isTablet = /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/i.test( + ua + ); + + // 터치 지원 여부도 체크 + const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0; + + // 모바일 또는 태블릿이면서 터치 지원 + if ((isMobile || isTablet) && hasTouch) { + return "mo"; + } + + return "pc"; + } + + function setupFooterEvents() { + const newMode = getDeviceType(); + + // 모드가 변경되지 않았으면 리턴 + if (currentMode === newMode) return; + + currentMode = newMode; + + // 기존 이벤트 제거 + $(".main").off("wheel mousewheel touchmove"); + + if (newMode === "pc") { + // PC: 기본 footer_off 상태 + $("footer").addClass("footer_off").removeClass("footer_on"); + + // wheel 이벤트로 토글 + $(".main").on("wheel", function (e) { + if (e.originalEvent.deltaY < 0) { + // 위로 스크롤 + $("footer").addClass("footer_off").removeClass("footer_on"); + } else { + // 아래로 스크롤 + $("footer").addClass("footer_on").removeClass("footer_off"); + } + }); + } else { + // 모바일/태블릿: touchmove 시 footer_on + $(".main").on("touchmove", function () { + $("footer").addClass("footer_on").removeClass("footer_off"); + }); + } + } + + // 초기 설정 + setupFooterEvents(); + + // footer 닫기 + $(".footer_close") + .off("click") + .on("click", function () { + $("footer").addClass("footer_off").removeClass("footer_on"); + }); +}); + +// 인트로 없애기 +// 1. 홈페이지에 들어오면 sessionStorage에 visited 추가 +// 2. visited가 있는 동안에는 인트로 삭제 +// 3. 브라우저 종료 or 탭 닫으면 visited 자동 삭제 +document.addEventListener("DOMContentLoaded", function () { + const intro = document.querySelector(".intro_wrap"); + + if (sessionStorage.getItem("visited")) { + console.log("visited"); + intro.style.display = "none"; + document.querySelector(".main_mask").classList.add("skip"); + } else { + setTimeout(() => { + sessionStorage.setItem("visited", "true"); + }, 1000); + } +}); diff --git a/kngil/js/qa/qa_popup.js b/kngil/js/qa/qa_popup.js new file mode 100644 index 0000000..1cf9b88 --- /dev/null +++ b/kngil/js/qa/qa_popup.js @@ -0,0 +1,256 @@ +window.onload = function() { + $.ajax({ + url: "some_api_endpoint", + success: function(response) { + }, + complete: function() { + + // 팝업 닫기버튼 + $(document).ready(function() { + $('.btn_close').click(function() { + $('.popup_wrap').hide(); + $('body').css('overflow', ''); // 기본 스크롤 상태로 복귀 + lenis.start(); + console.log('lenis 재시작') + }); + }); + $(document).ready(function() { + $('.btn_map_close').click(function() { + $('.popup_sitemap').hide(); + $('body').css('overflow', ''); // 기본 스크롤 상태로 복귀 + lenis.start(); + console.log('lenis 재시작') + }); + }); + + + + // 이메일 직접입력 + $(document).ready(function() { + $('#domain-list').change(function() { + if ($(this).val() === 'type') { + $('#custom-domain').show().focus(); + } else { + $('#custom-domain').hide().val(''); + } + }); + }); + + // 인증번호 타이머 + $(document).ready(function() { + // 인증번호 버튼 클릭 시 + $('.cert_number').click(function() { + $('.code').show(); + }); + + // 확인 버튼 클릭 시 + $('.check').click(function() { + $(this).hide(); + $('.check.complete').show(); + clearInterval(interval); // 타이머 멈춤 + $('.timer').remove(); // 타이머 요소 삭제 + }); + + // 타이머 함수 + var interval; + function startTimer(duration, display) { + clearInterval(interval); + var timer = duration, minutes, seconds; + + function updateTimer() { + minutes = parseInt(timer / 60, 10); + seconds = parseInt(timer % 60, 10); + + minutes = minutes < 10 ? "0" + minutes : minutes; + seconds = seconds < 10 ? "0" + seconds : seconds; + + display.text(minutes + ":" + seconds); + + if (--timer < 0) { + clearInterval(interval); + display.text("00:00"); + } + } + + updateTimer(); + interval = setInterval(updateTimer, 1000); + } + + var threeMinutes = 60 * 3, + display = $('.timer'); + + startTimer(threeMinutes, display); + + $('.cert_number').click(function() { + startTimer(threeMinutes, display); + }); + }); + + // 아이디찾기 + $(document).ready(function(){ + $('.find_email').click(function(){ + $('.find_ph').removeClass('on').prop('checked', false); + $(this).addClass('on').prop('checked', true); + $('.ph').hide(); + $('.email').show(); + }); + + $('.find_ph').click(function(){ + $('.find_email').removeClass('on').prop('checked', false); + $(this).addClass('on').prop('checked', true); + $('.email').hide(); + $('.ph').show(); + }); + }); + + $(document).ready(function() { + $('.btn_id').on('click', function() { + $('.btn_id').addClass('on'); + $('.btn_pw').removeClass('on'); + $('.content.id').show(); + $('.content.pw').hide(); + }); + + $('.btn_pw').on('click', function() { + $('.btn_pw').addClass('on'); + $('.btn_id').removeClass('on'); + $('.content.pw').show(); + $('.content.id').hide(); + }); + + $('#domain-list').on('change', function() { + if ($(this).val() === 'type') { + $('#custom-domain').show(); + } else { + $('#custom-domain').hide(); + } + }); + }); + + // 전체약관동의 + // $(document).ready(function() { + // function toggleJoinButton() { + // // 모든 개별 체크박스가 체크되었는지 확인 + // var allChecked = $('.terms_wrap input[type="checkbox"]').length === $('.terms_wrap input[type="checkbox"]:checked').length; + + // // '약관에 모두 동의합니다' 체크박스 상태에 따라 조정 + // $('.checkbox_wrap.all input[type="checkbox"]').prop('checked', allChecked); + + // // 모든 체크박스가 체크되지 않은 경우 버튼에 'none' 클래스 추가하고 disabled 속성 추가 + // if (allChecked) { + // $('.join_btn_wrap').removeClass('none'); + // $('.join_btn_wrap button').prop('disabled', false); + // } else { + // $('.join_btn_wrap').addClass('none'); + // $('.join_btn_wrap button').prop('disabled', true); + // } + // } + + // // '약관에 모두 동의합니다' 체크박스의 변경 이벤트 + // $('.checkbox_wrap.all input[type="checkbox"]').on('change', function() { + // var isChecked = $(this).is(':checked'); + // $('.terms_wrap input[type="checkbox"]').prop('checked', isChecked); + // toggleJoinButton(); // 버튼 상태 업데이트 + // }); + + // // 각 terms_wrap의 개별 체크박스 변경 이벤트 + // $('.terms_wrap input[type="checkbox"]').on('change', function() { + // toggleJoinButton(); // 버튼 상태 업데이트 + // }); + + // // 초기 상태 설정 + // toggleJoinButton(); + // }); + + // 전체약관동의 수정 250813 + (function ($) { + if (window.__agreeBound) return; // 중복 바인딩 방지 + window.__agreeBound = true; + + const $container = $('#pop_agreement'); + const $items = $container.find('.terms_wrap input[type="checkbox"]'); // agree11, agree21 + const $all = $container.find('.checkbox_wrap.all input[type="checkbox"]'); + const $btn = $container.find('#btn_agree'); + + function syncAll() { + const allChecked = $items.length > 0 && $items.filter(':checked').length === $items.length; + $all.prop('checked', allChecked); + // 버튼은 disable 하지 않음 (스타일만 조정하고 싶다면 클래스만 토글) + // $('.join_btn_wrap').toggleClass('none', !allChecked); <-- 필요 없으면 제거 + } + + // 전체동의 → 개별 + $all.on('change', function () { + const on = $(this).is(':checked'); + $items.prop('checked', on); + syncAll(); + }); + + // 개별 → 전체동의 동기화 + $items.on('change', syncAll); + + // 동의 버튼 클릭 시에만 검사 + $btn.off('click.agree').on('click.agree', function (e) { + e.preventDefault(); + const allChecked = $items.filter(':checked').length === $items.length; + if (!allChecked) { + alert('약관에 모두 동의해주세요.'); + return false; + } + // 통과 시 다음 단계로 진행(필요 시 주석 해제) + // $('#pop_agreement').hide(); + // $('#pop_register_form').show(); + // $('body').css('overflow','hidden'); + }); + + // 외부에서 팝업 열 때 상태 초기화가 필요하면 이 함수 호출 + window.resetAgreementUI = function () { + $items.prop('checked', false); + $all.prop('checked', false); + syncAll(); + // 버튼은 항상 활성 + $('#btn_agree, #fregister button[type=submit]') + .prop('disabled', false) + .css('pointer-events', 'auto'); + }; + + })(jQuery); + + + // 가입완료 + $(document).ready(function() { + $('.join.completion .join_btn_wrap button').click(function() { + $('.pop_input_wrap form').children().not('.messages').hide(); + $('.messages').show(); + }); + }); + + $(document).ready(function() { + $('.join.completion .join_btn_wrap button').click(function() { + $('.pop_input_wrap form').children().not('.messages').hide(); + $('.messages').show(); + + // 세 번째 단계에 'on' 클래스 추가하고, 다른 단계에서 'on' 클래스 제거 + $('.join_progress .join_step').removeClass('on'); + $('.join_progress .join_step').eq(2).addClass('on'); + }); + }); + + // 개인정보 보호정책 스크립트 + $(document).ready(function() { + $('.tab_privacy').on('click', function() { + $(this).addClass('on'); + $('.tab_agreement').removeClass('on'); + $('.content.pri').addClass('show').removeClass('hide'); + $('.content.agr').removeClass('show').addClass('hide'); + }); + $('.tab_agreement').on('click', function() { + $(this).addClass('on'); + $('.tab_privacy').removeClass('on'); + $('.content.agr').addClass('show').removeClass('hide'); + $('.content.pri').removeClass('show').addClass('hide'); + }); + }); + } + }); +}; \ No newline at end of file diff --git a/kngil/js/qa_write.js b/kngil/js/qa_write.js new file mode 100644 index 0000000..2697322 --- /dev/null +++ b/kngil/js/qa_write.js @@ -0,0 +1,109 @@ +// /kngil/js/qa/qa_write.js + +document.addEventListener('DOMContentLoaded', () => { + + /* ========================== + * 1. CKEditor 초기화 + * ========================== */ + let editorInstance = null; + + const contentEl = document.querySelector('#content'); + if (contentEl) { + ClassicEditor + .create(contentEl, { + toolbar: [ + 'heading','|', + 'bold','italic','link', + 'bulletedList','numberedList','|', + 'fontColor','fontBackgroundColor','fontSize', + '|','blockQuote','insertTable','imageUpload', + 'undo','redo' + ], + language: 'ko', + ckfinder: { + uploadUrl: '/kngil/bbs/qa_img_upload.php' + } + }) + .then(editor => { + editorInstance = editor; + }) + .catch(err => console.error(err)); + } + + /* ========================== + * 2. 폼 submit 검증 + * ========================== */ + const form = document.getElementById('qaForm'); + if (form) { + form.addEventListener('submit', (e) => { + if (!editorInstance) return; + + const data = editorInstance.getData().trim(); + if (!data) { + e.preventDefault(); + alert('내용을 입력해주세요.'); + editorInstance.editing.view.focus(); + return; + } + + contentEl.value = data; // textarea에 반영 + }); + } + + /* ========================== + * 3. 첨부파일 Drag & Drop + * ========================== */ + const dropZone = document.getElementById('drop-zone'); + const fileInput = document.getElementById('attach'); + const fileList = document.getElementById('file-list'); + + if (dropZone && fileInput && fileList) { + + let uploadFiles = []; + + dropZone.addEventListener('click', () => fileInput.click()); + + dropZone.addEventListener('dragover', (e) => { + e.preventDefault(); + dropZone.classList.add('dragover'); + }); + + dropZone.addEventListener('dragleave', () => { + dropZone.classList.remove('dragover'); + }); + + dropZone.addEventListener('drop', (e) => { + e.preventDefault(); + dropZone.classList.remove('dragover'); + addFiles(e.dataTransfer.files); + }); + + fileInput.addEventListener('change', () => { + addFiles(fileInput.files); + }); + + function addFiles(files) { + for (const file of files) { + uploadFiles.push(file); + } + render(); + syncInput(); + } + + function render() { + fileList.innerHTML = ''; + uploadFiles.forEach(file => { + const li = document.createElement('li'); + li.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`; + fileList.appendChild(li); + }); + } + + function syncInput() { + const dt = new DataTransfer(); + uploadFiles.forEach(f => dt.items.add(f)); + fileInput.files = dt.files; + } + } + +}); diff --git a/kngil/js/viewimageresize.js b/kngil/js/viewimageresize.js new file mode 100644 index 0000000..382cccf --- /dev/null +++ b/kngil/js/viewimageresize.js @@ -0,0 +1,96 @@ +(function($) { + $.fn.viewimageresize = function(selector) + { + var cfg = { + selector: "img" + }; + + if(typeof selector == "object") { + cfg = $.extend(cfg, selector); + } else { + if(selector) { + cfg = $.extend({ selector: selector }); + } + } + + var $img = this.find(cfg.selector); + var $this = this; + + $img.removeAttr("height") + .css("height", ""); + + function image_resize() + { + var width = $this.width(); + + $img.each(function() { + if($(this).data("width") == undefined) + $(this).data("width", $(this).width()); + + if($(this).data("width") > width) { + $(this).removeAttr("width") + .removeAttr("height") + .css("width","") + .css("height", ""); + + if($(this).data("width") > width) { + $(this).css("width", "100%"); + } + } else { + $(this).attr("width", $(this).data("width")); + } + }); + } + + $(window).on("load", function() { + image_resize(); + }); + + $(window).on("resize", function() { + image_resize(); + }); + } + + $.fn.viewimageresize2 = function(selector) + { + var cfg = { + selector: "img" + }; + + if(typeof selector == "object") { + cfg = $.extend(cfg, selector); + } else { + if(selector) { + cfg = $.extend({ selector: selector }); + } + } + + var $img = this.find(cfg.selector); + var $this = this; + + function image_resize() + { + var width = $this.width(); + + $img.each(function() { + $(this).removeAttr("width") + .removeAttr("height") + .css("width","") + .css("height", ""); + + if($(this).data("width") == undefined) + $(this).data("width", $(this).width()); + + if($(this).data("width") > width) { + $(this).css("width", "100%"); + } + }); + } + + $(window).on("resize", function() { + image_resize(); + }); + + image_resize(); + } +}(jQuery)); \ No newline at end of file diff --git a/kngil/log/join.log b/kngil/log/join.log new file mode 100644 index 0000000..330b8ed --- /dev/null +++ b/kngil/log/join.log @@ -0,0 +1,888 @@ +[2026-01-22 03:41:59] RAW INPUT +{"action":"check_id","userId":"sdi9429"} +----------------------------- +[2026-01-22 03:41:59] PARSED DATA +Array +( + [action] => check_id + [userId] => sdi9429 +) + +----------------------------- +[2026-01-22 03:41:59] ACTION +check_id +----------------------------- +[2026-01-22 03:41:59] CHECK_ID userId +sdi9429 +----------------------------- +[2026-01-22 03:41:59] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 03:42:28] RAW INPUT +{"action":"check_id","userId":"sdi9429"} +----------------------------- +[2026-01-22 03:42:28] PARSED DATA +Array +( + [action] => check_id + [userId] => sdi9429 +) + +----------------------------- +[2026-01-22 03:42:28] ACTION +check_id +----------------------------- +[2026-01-22 03:42:28] CHECK_ID userId +sdi9429 +----------------------------- +[2026-01-22 03:42:28] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 03:49:27] RAW INPUT +{"action":"check_id","userId":"sdi9429"} +----------------------------- +[2026-01-22 03:49:27] PARSED DATA +Array +( + [action] => check_id + [userId] => sdi9429 +) + +----------------------------- +[2026-01-22 03:49:27] ACTION +check_id +----------------------------- +[2026-01-22 03:49:27] CHECK_ID userId +sdi9429 +----------------------------- +[2026-01-22 03:49:27] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 03:51:39] RAW INPUT +{"action":"check_id","userId":"sdi9429"} +----------------------------- +[2026-01-22 03:51:39] PARSED DATA +Array +( + [action] => check_id + [userId] => sdi9429 +) + +----------------------------- +[2026-01-22 03:51:39] ACTION +check_id +----------------------------- +[2026-01-22 03:51:39] CHECK_ID userId +sdi9429 +----------------------------- +[2026-01-22 03:51:39] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 03:53:15] RAW INPUT +{"action":"check_id","userId":"sdi9429"} +----------------------------- +[2026-01-22 03:53:15] PARSED DATA +Array +( + [action] => check_id + [userId] => sdi9429 +) + +----------------------------- +[2026-01-22 03:53:15] ACTION +check_id +----------------------------- +[2026-01-22 03:53:15] CHECK_ID userId +sdi9429 +----------------------------- +[2026-01-22 03:53:15] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 03:53:30] RAW INPUT +{"action":"signup","memberType":"1","userId":"sdi9429","password":"song1108!","userName":"송대일","email":"sdi9429@naver.com","phone":"010-8627-0921","company":"바론","department":"총괄기획실"} +----------------------------- +[2026-01-22 03:53:30] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => sdi9429 + [password] => song1108! + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0921 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 03:53:30] ACTION +signup +----------------------------- +[2026-01-22 03:53:30] co_bc +CB100100 +----------------------------- +[2026-01-22 03:53:31] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => sdi9429 + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0921 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 03:53:31] PROC RESULT +ERROR: character varying(40) 자료형에 너무 긴 자료를 담으려고 합니다. +----------------------------- +[2026-01-22 03:53:31] SIGNUP FAIL +ERROR: character varying(40) 자료형에 너무 긴 자료를 담으려고 합니다. +----------------------------- +[2026-01-22 03:56:43] RAW INPUT +{"action":"signup","memberType":"1","userId":"sdi9429","password":"song1108!","userName":"송대일","email":"sdi9429@naver.com","phone":"010-8627-0921","company":"바론","department":"총괄기획실"} +----------------------------- +[2026-01-22 03:56:43] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => sdi9429 + [password] => song1108! + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0921 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 03:56:43] ACTION +signup +----------------------------- +[2026-01-22 03:56:43] co_bc +CB100100 +----------------------------- +[2026-01-22 03:56:43] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => sdi9429 + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0921 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 03:56:43] PROC RESULT +SUCCESS +----------------------------- +[2026-01-22 03:56:43] SIGNUP SUCCESS +sdi9429 +----------------------------- +[2026-01-22 04:12:06] RAW INPUT +{"action":"check_id","userId":"sdisdi"} +----------------------------- +[2026-01-22 04:12:06] PARSED DATA +Array +( + [action] => check_id + [userId] => sdisdi +) + +----------------------------- +[2026-01-22 04:12:06] ACTION +check_id +----------------------------- +[2026-01-22 04:12:06] CHECK_ID userId +sdisdi +----------------------------- +[2026-01-22 04:12:06] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-22 04:12:29] RAW INPUT +{"action":"signup","memberType":"1","userId":"sdisdi","password":"song1108!","userName":"송대일","email":"sdi9429@naver.com","phone":"010-8627-0923","company":"바론","department":"총괄기획실"} +----------------------------- +[2026-01-22 04:12:29] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => sdisdi + [password] => song1108! + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0923 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 04:12:29] ACTION +signup +----------------------------- +[2026-01-22 04:12:29] co_bc +CB100100 +----------------------------- +[2026-01-22 04:12:29] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => sdisdi + [userName] => 송대일 + [email] => sdi9429@naver.com + [phone] => 010-8627-0923 + [company] => 바론 + [department] => 총괄기획실 +) + +----------------------------- +[2026-01-22 04:12:29] PROC RESULT +SUCCESS +----------------------------- +[2026-01-22 04:12:29] SIGNUP SUCCESS +sdisdi +----------------------------- +[2026-01-29 01:41:32] RAW INPUT +{"action":"check_id","userId":"b25027"} +----------------------------- +[2026-01-29 01:41:32] PARSED DATA +Array +( + [action] => check_id + [userId] => b25027 +) + +----------------------------- +[2026-01-29 01:41:32] ACTION +check_id +----------------------------- +[2026-01-29 01:41:32] CHECK_ID userId +b25027 +----------------------------- +[2026-01-29 01:41:32] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-29 01:43:42] RAW INPUT +{"action":"signup","memberType":"1","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":null,"department":null} +----------------------------- +[2026-01-29 01:43:42] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 01:43:42] ACTION +signup +----------------------------- +[2026-01-29 01:43:42] co_bc +CB100100 +----------------------------- +[2026-01-29 01:43:42] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 01:43:42] PROC RESULT +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 01:43:42] SIGNUP FAIL +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 01:43:51] RAW INPUT +{"action":"signup","memberType":"2","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":null,"department":null} +----------------------------- +[2026-01-29 01:43:51] PARSED DATA +Array +( + [action] => signup + [memberType] => 2 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 01:43:51] ACTION +signup +----------------------------- +[2026-01-29 01:43:51] co_bc +CB100200 +----------------------------- +[2026-01-29 01:43:51] SIGNUP PARAMS +Array +( + [memberType] => 2 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 01:43:51] PROC RESULT +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 01:43:51] SIGNUP FAIL +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:21:33] RAW INPUT +{"action":"check_id","userId":"b25027"} +----------------------------- +[2026-01-29 02:21:33] PARSED DATA +Array +( + [action] => check_id + [userId] => b25027 +) + +----------------------------- +[2026-01-29 02:21:33] ACTION +check_id +----------------------------- +[2026-01-29 02:21:33] CHECK_ID userId +b25027 +----------------------------- +[2026-01-29 02:21:33] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-29 02:22:41] RAW INPUT +{"action":"signup","memberType":"1","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":null,"department":null} +----------------------------- +[2026-01-29 02:22:41] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:22:41] ACTION +signup +----------------------------- +[2026-01-29 02:22:41] co_bc +CB100100 +----------------------------- +[2026-01-29 02:22:41] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:22:41] PROC RESULT +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:22:41] SIGNUP FAIL +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:23:05] RAW INPUT +{"action":"signup","memberType":"2","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":null,"department":null} +----------------------------- +[2026-01-29 02:23:05] PARSED DATA +Array +( + [action] => signup + [memberType] => 2 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:23:05] ACTION +signup +----------------------------- +[2026-01-29 02:23:05] co_bc +CB100200 +----------------------------- +[2026-01-29 02:23:05] SIGNUP PARAMS +Array +( + [memberType] => 2 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:23:05] PROC RESULT +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:23:05] SIGNUP FAIL +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:23:49] RAW INPUT +{"action":"signup","memberType":"2","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":null,"department":null} +----------------------------- +[2026-01-29 02:23:49] PARSED DATA +Array +( + [action] => signup + [memberType] => 2 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:23:49] ACTION +signup +----------------------------- +[2026-01-29 02:23:49] co_bc +CB100200 +----------------------------- +[2026-01-29 02:23:49] SIGNUP PARAMS +Array +( + [memberType] => 2 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => + [department] => +) + +----------------------------- +[2026-01-29 02:23:49] PROC RESULT +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:23:49] SIGNUP FAIL +ERROR: "co_nm" 칼럼(해당 릴레이션 "members")의 null 값이 not null 제약조건을 위반했습니다. +----------------------------- +[2026-01-29 02:25:14] RAW INPUT +{"action":"signup","memberType":"1","userId":"b25027","password":"a1357125!@23","userName":"김수현","email":"b25027@hanmaceng.co.kr","phone":"010-5645-5153","company":"한맥기술","department":"디자인기획팀"} +----------------------------- +[2026-01-29 02:25:14] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => b25027 + [password] => a1357125!@23 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => 한맥기술 + [department] => 디자인기획팀 +) + +----------------------------- +[2026-01-29 02:25:14] ACTION +signup +----------------------------- +[2026-01-29 02:25:14] co_bc +CB100100 +----------------------------- +[2026-01-29 02:25:14] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => b25027 + [userName] => 김수현 + [email] => b25027@hanmaceng.co.kr + [phone] => 010-5645-5153 + [company] => 한맥기술 + [department] => 디자인기획팀 +) + +----------------------------- +[2026-01-29 02:25:14] PROC RESULT +SUCCESS +----------------------------- +[2026-01-29 02:25:14] SIGNUP SUCCESS +b25027 +----------------------------- +[2026-01-30 00:01:19] RAW INPUT +{"action":"check_id","userId":"Km24031"} +----------------------------- +[2026-01-30 00:01:19] PARSED DATA +Array +( + [action] => check_id + [userId] => Km24031 +) + +----------------------------- +[2026-01-30 00:01:19] ACTION +check_id +----------------------------- +[2026-01-30 00:01:19] CHECK_ID userId +Km24031 +----------------------------- +[2026-01-30 00:01:19] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-30 00:02:15] RAW INPUT +{"action":"signup","memberType":"1","userId":"Km24031","password":"!rnjsdhwo729","userName":" 권오재","email":"koj111@naver.com","phone":"010-9114-3944","company":"한맥기술","department":"ERP기획팀"} +----------------------------- +[2026-01-30 00:02:15] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => Km24031 + [password] => !rnjsdhwo729 + [userName] => 권오재 + [email] => koj111@naver.com + [phone] => 010-9114-3944 + [company] => 한맥기술 + [department] => ERP기획팀 +) + +----------------------------- +[2026-01-30 00:02:15] ACTION +signup +----------------------------- +[2026-01-30 00:02:15] co_bc +CB100100 +----------------------------- +[2026-01-30 00:02:15] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => Km24031 + [userName] => 권오재 + [email] => koj111@naver.com + [phone] => 010-9114-3944 + [company] => 한맥기술 + [department] => ERP기획팀 +) + +----------------------------- +[2026-01-30 00:02:15] PROC RESULT +SUCCESS +----------------------------- +[2026-01-30 00:02:15] SIGNUP SUCCESS +Km24031 +----------------------------- +[2026-01-30 04:18:08] RAW INPUT +{"action":"check_id","userId":"am24031"} +----------------------------- +[2026-01-30 04:18:08] PARSED DATA +Array +( + [action] => check_id + [userId] => am24031 +) + +----------------------------- +[2026-01-30 04:18:08] ACTION +check_id +----------------------------- +[2026-01-30 04:18:08] CHECK_ID userId +am24031 +----------------------------- +[2026-01-30 04:18:08] CHECK_ID RESULT +SUCCESS: 사용 가능한 아이디입니다. +----------------------------- +[2026-01-30 04:18:41] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:18:41] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:18:41] ACTION +signup +----------------------------- +[2026-01-30 04:18:41] co_bc +CB100100 +----------------------------- +[2026-01-30 04:18:41] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:18:41] PROC RESULT +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, unknown, integer, numeric, integer, numeric, integer, integer, integer, integer, integer, timestamp without time zone, unknown, unknown, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:18:41] SIGNUP FAIL +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, unknown, integer, numeric, integer, numeric, integer, integer, integer, integer, integer, timestamp without time zone, unknown, unknown, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:19:57] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:19:57] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:19:57] ACTION +signup +----------------------------- +[2026-01-30 04:19:57] co_bc +CB100100 +----------------------------- +[2026-01-30 04:19:57] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:19:57] PROC RESULT +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:19:57] SIGNUP FAIL +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:21:00] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:21:00] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:21:00] ACTION +signup +----------------------------- +[2026-01-30 04:21:00] co_bc +CB100100 +----------------------------- +[2026-01-30 04:21:00] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:21:00] PROC RESULT +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:21:00] SIGNUP FAIL +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:23:08] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:23:08] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:23:08] ACTION +signup +----------------------------- +[2026-01-30 04:23:08] co_bc +CB100100 +----------------------------- +[2026-01-30 04:23:08] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:23:08] PROC RESULT +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:23:08] SIGNUP FAIL +ERROR: kngil.sp_buy_item_i(character varying, timestamp with time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:24:11] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:24:11] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:24:11] ACTION +signup +----------------------------- +[2026-01-30 04:24:11] co_bc +CB100100 +----------------------------- +[2026-01-30 04:24:11] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:24:11] PROC RESULT +ERROR: kngil.sp_buy_item_i(character varying, timestamp without time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:24:11] SIGNUP FAIL +ERROR: kngil.sp_buy_item_i(character varying, timestamp without time zone, character varying, integer, numeric, numeric, numeric, numeric, numeric, numeric, numeric, numeric, timestamp without time zone, character varying, character varying, character varying) 이름의 함수가 없음 +----------------------------- +[2026-01-30 04:25:57] RAW INPUT +{"action":"signup","memberType":"1","userId":"am24031","password":"!rnjsdhwo729","userName":"권오재A","email":"ddd@gmail.com","phone":"010-2222-2222","company":"한맥","department":"ERP 기획"} +----------------------------- +[2026-01-30 04:25:57] PARSED DATA +Array +( + [action] => signup + [memberType] => 1 + [userId] => am24031 + [password] => !rnjsdhwo729 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:25:57] ACTION +signup +----------------------------- +[2026-01-30 04:25:57] co_bc +CB100100 +----------------------------- +[2026-01-30 04:25:57] SIGNUP PARAMS +Array +( + [memberType] => 1 + [userId] => am24031 + [userName] => 권오재A + [email] => ddd@gmail.com + [phone] => 010-2222-2222 + [company] => 한맥 + [department] => ERP 기획 +) + +----------------------------- +[2026-01-30 04:25:57] PROC RESULT +SUCCESS +----------------------------- +[2026-01-30 04:25:57] SIGNUP SUCCESS +am24031 +----------------------------- diff --git a/kngil/skin/.htaccess b/kngil/skin/.htaccess new file mode 100644 index 0000000..fab8ce4 --- /dev/null +++ b/kngil/skin/.htaccess @@ -0,0 +1,2 @@ +#skin direct access control +#(production 단계에서 활성화 예정) \ No newline at end of file diff --git a/kngil/skin/_footer.php b/kngil/skin/_footer.php new file mode 100644 index 0000000..60acb65 --- /dev/null +++ b/kngil/skin/_footer.php @@ -0,0 +1,57 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/kngil/skin/_head.php b/kngil/skin/_head.php new file mode 100644 index 0000000..96572bb --- /dev/null +++ b/kngil/skin/_head.php @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +KNGIL diff --git a/kngil/skin/_head_pop_temp.php b/kngil/skin/_head_pop_temp.php new file mode 100644 index 0000000..471be07 --- /dev/null +++ b/kngil/skin/_head_pop_temp.php @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/kngil/skin/_header.php b/kngil/skin/_header.php new file mode 100644 index 0000000..1df7874 --- /dev/null +++ b/kngil/skin/_header.php @@ -0,0 +1,168 @@ + + + + + + +

+ KNGIL +

+ +

+ + + + + + + + + + + + + + + + + + +

+ +

+ + + + + + diff --git a/kngil/skin/_nav.php b/kngil/skin/_nav.php new file mode 100644 index 0000000..679bebb --- /dev/null +++ b/kngil/skin/_nav.php @@ -0,0 +1,48 @@ +

+ diff --git a/kngil/skin/_popups.php b/kngil/skin/_popups.php new file mode 100644 index 0000000..97da25f --- /dev/null +++ b/kngil/skin/_popups.php @@ -0,0 +1,17 @@ + +@@include("mypage/pop_agreement.html") +@@include("mypage/pop_join.html") +@@include("mypage/pop_join2.html") +@@include("mypage/pop_join3.html") +@@include("mypage/pop_login.html") +@@include("mypage/pop_login2.html") +@@include("mypage/pop_mypage01.html") +@@include("mypage/pop_mypage02.html") +@@include("mypage/pop_mypage03.html") +@@include("mypage/pop_mypage04.html") +@@include("mypage/pop_mypage05.html") +@@include("mypage/pop_mypage06.html") +@@include("mypage/pop_cancel.html") +@@include("mypage/pop_search.html") +@@include("mypage/pop_password.html") +@@include("popup/pop_privacy.html") diff --git a/kngil/skin/adm.php b/kngil/skin/adm.php new file mode 100644 index 0000000..5bb721d --- /dev/null +++ b/kngil/skin/adm.php @@ -0,0 +1,155 @@ + + + + + +큰길회원 list + + + + + + + + + + + +

+ 큰길회원 list + +
+ + + + +
+

+ + +

+ + + + + + + + +

+ + + + +

+ +

+ + + + + + + + + diff --git a/kngil/skin/adm_comp.php b/kngil/skin/adm_comp.php new file mode 100644 index 0000000..1a8e552 --- /dev/null +++ b/kngil/skin/adm_comp.php @@ -0,0 +1,188 @@ + + + + + +관리자 페이지 + + + + + + + + + + + + +

+ 관리자 페이지 +
+ + +
+

+ +

+ + +

+ 계약현황 + 회원ID + - +

+ +

+ 요금제 + - +

+ +

+ 유효기간 + - +

+ + +

+ +

+ 사용현황 + 발급ID + - +

+ +

+ 사용ID + - +

+ +

+ - + - +

+ +

+ + + + + + + + + + + + + + + +

+ + +

+ + + + + + diff --git a/kngil/skin/adm_comp1.php b/kngil/skin/adm_comp1.php new file mode 100644 index 0000000..044459e --- /dev/null +++ b/kngil/skin/adm_comp1.php @@ -0,0 +1,188 @@ + + + + + +관리자 페이지 + + + + + + + + + + + + + +

+ 관리자 페이지 +
+ + +
+

+ +

+ + +

+ 계약현황 + 회원ID + - +

+ +

+ 요금제 + - +

+ +

+ 유효기간 + - +

+ + +

+ +

+ 사용현황 + 발급ID + - +

+ +

+ 사용ID + - +

+ +

+ - + - +

+ +

+ + + + + + + + + + + + + + + +

+ + +

+ + + + + + diff --git a/kngil/skin/faq_list.skin.php b/kngil/skin/faq_list.skin.php new file mode 100644 index 0000000..677f579 --- /dev/null +++ b/kngil/skin/faq_list.skin.php @@ -0,0 +1,165 @@ + + + + + + + Q&A + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + + + +

+ +

FAQ

KNGIL 관련 문의하기

+ +

+ + +

자주하는 질문(FAQ)

+ + + + + + + +

+
+ Q + + +
+
+
+ +
+
+
데이터 로딩 오류: " . $e->getMessage() . "

+ +

+ + + + + +

+ + + + + + + + + + diff --git a/kngil/skin/index.php b/kngil/skin/index.php new file mode 100644 index 0000000..5bc8dec --- /dev/null +++ b/kngil/skin/index.php @@ -0,0 +1,59 @@ + + + + + + + +

+ + + + +

+ +

01
제공데이터
02
주요기능
03
데이터분석
04
성과품
05

+ +

+ + + +

+ + + + + + + + + diff --git a/kngil/skin/pop_agreement.php b/kngil/skin/pop_agreement.php new file mode 100644 index 0000000..62e9478 --- /dev/null +++ b/kngil/skin/pop_agreement.php @@ -0,0 +1,314 @@ + + + diff --git a/kngil/skin/pop_cancel.php b/kngil/skin/pop_cancel.php new file mode 100644 index 0000000..730b69b --- /dev/null +++ b/kngil/skin/pop_cancel.php @@ -0,0 +1,46 @@ + + + \ No newline at end of file diff --git a/kngil/skin/pop_join.php b/kngil/skin/pop_join.php new file mode 100644 index 0000000..c19b712 --- /dev/null +++ b/kngil/skin/pop_join.php @@ -0,0 +1,261 @@ + +

+ +

+ + +

+ +

회원가입

+ + +

+ *항목은 필수 항목 입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ 회원유형 +	+ + + + 기업회원 + + + + 개인회원 + + +
+ 아이디 + * +	+ + + + + + 영문+숫자 4~12자(영문으로 시작) + +
+ 비밀번호 + * +	+ + + + + + 영문+숫자+특수기호 8 자 이상 + +
+ 이름 + * +	+ + + +
+ 이메일 + * +	+ + + + + + + 이메일 도메인을 선택하거나 직접 입력하세요 +
+ 휴대전화번호 + * +	+ + + 03:00 + + +
+ 휴대전화번호 + * +	+ + + 인증완료 + +
+ 회사정보 +	+ + + + +

+ +

+ + + +

+ +

+ + \ No newline at end of file diff --git a/kngil/skin/pop_join2.php b/kngil/skin/pop_join2.php new file mode 100644 index 0000000..433acd8 --- /dev/null +++ b/kngil/skin/pop_join2.php @@ -0,0 +1,261 @@ + +

+ +

+ + +

+ +

회원가입

+ + +

+ *항목은 필수 항목 입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ 회원유형 +	+ + + + 기업회원 + + + + 개인회원 + + +
+ 아이디 + * +	+ + + + + + 영문+숫자 4~12자(영문으로 시작) + +
+ 비밀번호 + * +	+ + + + + + 영문+숫자+특수기호 12 자 이상 + +
+ 이름 + * +	+ + + +
+ 이메일 + * +	+ + + + + + + 이메일 도메인을 선택하거나 직접 입력하세요 +
+ 휴대전화번호 + * +	+ + + 03:00 + + +
+ 휴대전화번호 + * +	+ + + 인증완료 + +
+ 회사정보 +	+ + + + +

+ +

+ + + +

+ +

+ + \ No newline at end of file diff --git a/kngil/skin/pop_join3.php b/kngil/skin/pop_join3.php new file mode 100644 index 0000000..10596f6 --- /dev/null +++ b/kngil/skin/pop_join3.php @@ -0,0 +1,262 @@ + +

+ +

+ + +

+ +

회원가입

+ + +

+ *항목은 필수 항목 입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ 회원유형 +	+ + + + 기업회원 + + + + 개인회원 + + +
+ 아이디 + * +	+ + + + + + 영문+숫자 4~12자(영문으로 시작) + +
+ 비밀번호 + * +	+ + + + + + 영문+숫자+특수기호 12 자 이상 + +
+ 이름 + * +	+ + + +
+ 이메일 + * +	+ + + + + + + 이메일 도메인을 선택하거나 직접 입력하세요 +
+ 휴대전화번호 + * +	+ + + 03:00 + + +
+ 휴대전화번호 + * +	+ + + 인증완료 + +
+ 회사정보 +	+ + + + +

+ +

+ + + +

+ +

번호	서비스 구분	일자	사용량(단위:m2)
1	서비스 01	24-06-22	300
2	서비스 01	24-06-23	400
3	서비스 01	24-06-23	300
4	서비스 01	24-06-23	200
5	서비스 01	24-06-23	400

+ + \ No newline at end of file diff --git a/kngil/skin/pop_login.php b/kngil/skin/pop_login.php new file mode 100644 index 0000000..59aead8 --- /dev/null +++ b/kngil/skin/pop_login.php @@ -0,0 +1,94 @@ + + + diff --git a/kngil/skin/pop_login2.php b/kngil/skin/pop_login2.php new file mode 100644 index 0000000..9cf1fbb --- /dev/null +++ b/kngil/skin/pop_login2.php @@ -0,0 +1,83 @@ + + + diff --git a/kngil/skin/pop_mypage01.php b/kngil/skin/pop_mypage01.php new file mode 100644 index 0000000..a70d0fd --- /dev/null +++ b/kngil/skin/pop_mypage01.php @@ -0,0 +1,72 @@ + + + + diff --git a/kngil/skin/pop_mypage02.php b/kngil/skin/pop_mypage02.php new file mode 100644 index 0000000..49d40d4 --- /dev/null +++ b/kngil/skin/pop_mypage02.php @@ -0,0 +1,122 @@ + + + \ No newline at end of file diff --git a/kngil/skin/pop_mypage03.php b/kngil/skin/pop_mypage03.php new file mode 100644 index 0000000..d28d0f4 --- /dev/null +++ b/kngil/skin/pop_mypage03.php @@ -0,0 +1,167 @@ + +

+ +

+ + +

+ +

내 정보 수정

+ 소중한 내 정보를
+ 최신으로 관리하세요. +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

회원유형	+ + + + 기업회원 + + + + 개인회원 + + +
아이디	+ + + +
비밀번호 *	+ + + + +
새 비밀번호	+ + + + + + + 영문+숫자+특수기호 8자 이상 + +
이름	+ + + +
이메일*	+ + + @ + + + +
+ 휴대전화번호 +	+ + + 03:00 + + +
회사정보	+ + + + +

+ + +

회원 탈퇴하기

+ +

+ \ No newline at end of file diff --git a/kngil/skin/pop_mypage04.php b/kngil/skin/pop_mypage04.php new file mode 100644 index 0000000..a491bc3 --- /dev/null +++ b/kngil/skin/pop_mypage04.php @@ -0,0 +1,183 @@ + +

+ +

+ + +

+ +

내 정보 수정

+ 소중한 내 정보를
+ 최신으로 관리하세요. +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

회원유형	+ + + + 기업회원 + + + + 개인회원 + + +
아이디	+ + + +
비밀번호*	+ + + + +
새 비밀번호	+ + + + + + 영문+숫자+특수기호 8자 이상 +
이름	+ + + +
이메일*	+ + + @ + + + +
+ 휴대전화번호 +	+ + + 03:00 + + +
+ 휴대전화번호 +	+ + + 인증완료 + +
+ 휴대전화번호 +	+ + + + +
회사정보	+ + + + +

+ + +

회원 탈퇴하기

+ +

+ \ No newline at end of file diff --git a/kngil/skin/pop_mypage05.php b/kngil/skin/pop_mypage05.php new file mode 100644 index 0000000..c3bbac6 --- /dev/null +++ b/kngil/skin/pop_mypage05.php @@ -0,0 +1,174 @@ + +

+ +

+ + +

+ +

내 정보 수정

+ 소중한 내 정보를
+ 최신으로 관리하세요. +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

회원유형	+ + + + 기업회원 + + + + 개인회원 + + +
아이디	+ + + +
비밀번호*	+ + + + +
이름	+ + + +
이메일*	+ + + @ + + + +
+ 휴대전화번호 +	+ + + 03:00 + + +
+ 휴대전화번호 + * +	+ + + 인증완료 + +
+ 휴대전화번호 + * +	+ + + + +
회사정보	+ + + + +

+ + +

회원 탈퇴하기

+ +

+ \ No newline at end of file diff --git a/kngil/skin/pop_mypage06.php b/kngil/skin/pop_mypage06.php new file mode 100644 index 0000000..e0d22cf --- /dev/null +++ b/kngil/skin/pop_mypage06.php @@ -0,0 +1,173 @@ + +

+ +

+ + +

+ +

내 정보 수정

+ 소중한 내 정보를
+ 최신으로 관리하세요. +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

회원유형	+ + + + 기업회원 + + + + 개인회원 + + +
아이디	+ + + +
비밀번호*	+ + + + +
이름	+ + + +
이메일*	+ + + @ + + + +
+ 휴대전화번호 +	+ + + 03:00 + + +
+ 휴대전화번호 +	+ + + 인증완료 + +
+ 휴대전화번호 + * +	+ + + + +
회사정보	+ + + + +

+ + +

회원 탈퇴하기

+ +

+ \ No newline at end of file diff --git a/kngil/skin/pop_password.php b/kngil/skin/pop_password.php new file mode 100644 index 0000000..6df9ae8 --- /dev/null +++ b/kngil/skin/pop_password.php @@ -0,0 +1,42 @@ + + + diff --git a/kngil/skin/pop_privacy.php b/kngil/skin/pop_privacy.php new file mode 100644 index 0000000..f034e4d --- /dev/null +++ b/kngil/skin/pop_privacy.php @@ -0,0 +1,544 @@ + + + diff --git a/kngil/skin/pop_search.php b/kngil/skin/pop_search.php new file mode 100644 index 0000000..f266e4a --- /dev/null +++ b/kngil/skin/pop_search.php @@ -0,0 +1,143 @@ + +

+ +

+ + +

+ +

아이디 찾기 /
비밀번호 변경

+ + +

+ +

+ 휴대전화 번호로 찾기 + 이메일 주소로 찾기 +

+ + + + + + + + + + + +

이름	+ + + +
휴대전화번호	+ + + +

+ + + + + + + + + + + +

이름	+ + + +
이메일	+ + + @ + + + +

+ +

계정이 기억나지 않을 경우 baroncs@baroncs.co.kr로 문의하시기 바랍니다.

+ + + + + + + + + + + +

아이디	+ + + +
이메일	+ + + @ + + + +

아이디와 이메일 일치시에 비밀번호는
등록된 휴대폰 번호로 변경됩니다.

+ +

계정이 기억나지 않을 경우 baroncs@baroncs.co.kr로 문의하시기 바랍니다.

+ +

+ \ No newline at end of file diff --git a/kngil/skin/product_mng.php b/kngil/skin/product_mng.php new file mode 100644 index 0000000..62ff55d --- /dev/null +++ b/kngil/skin/product_mng.php @@ -0,0 +1,50 @@ + + + + + +상품등록 + + + + + + + + + +

+ + +

+ 상품등록 + X +

+ + + + + +

+ +

+ + + + + diff --git a/kngil/skin/qa_detail.skin.php b/kngil/skin/qa_detail.skin.php new file mode 100644 index 0000000..3287239 --- /dev/null +++ b/kngil/skin/qa_detail.skin.php @@ -0,0 +1,614 @@ + + + + + + + Q&A 상세보기 + + + + + + + + + + + + + + + + +

+ + + alert('로그인 후 문의 등록이 가능합니다.'); + location.href = '/kngil/skin/qa_list.skin.php'; + "; + exit; + } + $isLoggedIn = !empty($_SESSION['login']); +?> + + + + + +

Q&A

KNGIL 관련 문의하기

+ +

문의하기(Q&A)

+ +

+ + +

+ + + +

+ +

+ + + + +

+ +

+ + + + + + + + + + + 관리자 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Q&A : + + + + + +

+ + +

+ +

+ + + +

첨부파일

+ + + + + + + + + + + ( KB, + ) + +

+ +

+ + + + + + + + +

+ +

+ + +

+ +

+ + + +

+ +

+ + + +

+ + + + + + +

+ + +

+ + + + + + + + +

+ + + +

+ + +

+ + + + + +

댓글 작성은 로그인 후 이용 가능합니다.

+ + +

+ + + + + + + + + + + + + + + + + + diff --git a/kngil/skin/qa_list.skin.php b/kngil/skin/qa_list.skin.php new file mode 100644 index 0000000..3d885d8 --- /dev/null +++ b/kngil/skin/qa_list.skin.php @@ -0,0 +1,339 @@ + + + + + + + Q&A 게시판 리스트 + + + + + + + + + + + + + + + + + + + + + +

+ + + + + +

Q&A

KNGIL 관련 문의하기

1:1 문의하기

+ + + 전체 + 일반 + 개선 + 오류 + + 관리 + +

+ 작성자 + > 내가 작성한 글 +

+ + +

+ 상태 + +

+ + +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

번호	구분	회사	부서	작성자	제목	등록일	상태
					+ + [비밀글] + + + + + + + + + + + + + + + + + + + +		+ + + + + + + + +

+ 1): ?> +

+ 1): ?> + 이전 + 이전 + + + + + + + + + + + + 다음 + 다음 +

+ + + +

+ +

+ + +

+ + + + +

+ + + + + + +

+ + + + + + + + + + + diff --git a/kngil/skin/qa_list.skin_.php b/kngil/skin/qa_list.skin_.php new file mode 100644 index 0000000..642cdcd --- /dev/null +++ b/kngil/skin/qa_list.skin_.php @@ -0,0 +1,334 @@ + + + + + + + Q&A 게시판 리스트 + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + +

Q&A

+ EG-BIM 관련 문의하기 +

+ + 문의하기(Q&A) + +

+ + + 전체 + 일반 + 개선 + 오류 + + 관리 + +

+ 작성자 + > 내가 작성한 글 +

+ + +

+ 상태 + +

+ + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

번호	구분	회사	부서	작성자	제목	등록일	상태
					+ + [비밀글] + + + + + + + + + + + + + + + + + + + +		+ + + + + + + + +

+ + 1): ?> +

+ 1): ?> + 이전 + 이전 + + + + + + + + + + + + 다음 + 다음 +

+ + +

+ +

+ + + + + + +

+ + + + + + + + + + + diff --git a/kngil/skin/qa_write.skin.php b/kngil/skin/qa_write.skin.php new file mode 100644 index 0000000..f217eb3 --- /dev/null +++ b/kngil/skin/qa_write.skin.php @@ -0,0 +1,217 @@ + + + + + + + + + + + Q&A 게시판 리스트 + + + + + + + + + + + + + + + + + + + + +

+ + + alert('로그인 후 문의 등록이 가능합니다.'); + location.href = '/kngil/skin/qa_list.skin.php'; + "; + exit; + } +?> + + + +

Q&A

KNGIL 관련 문의하기

문의하기(Q&A)

+ +

+ 구분 + +

+ +

+ 제목* + +

+ +

+ 비밀글 + + > + 비밀글로 등록 + +

+ +

+ 내용 +

+ +

+ 첨부파일 +

+ + * 최대 30MB 이내 +

+ +

여기로 파일을 드래그하거나 클릭해서 선택하세요.

+ +

+ + +

+ +

+ + +

+ + + + + + + + + + + + + + + diff --git a/kngil/skin/sales_results.skin.php b/kngil/skin/sales_results.skin.php new file mode 100644 index 0000000..e870574 --- /dev/null +++ b/kngil/skin/sales_results.skin.php @@ -0,0 +1,469 @@ + + +

영업실적

+ + + +

+ + + + + diff --git a/kngil/uploads/comment/1769511961_dda23bd3.jpg b/kngil/uploads/comment/1769511961_dda23bd3.jpg new file mode 100644 index 0000000..d2c1777 Binary files /dev/null and b/kngil/uploads/comment/1769511961_dda23bd3.jpg differ diff --git a/kngil/uploads/qa/1769497243_08b20dafcb25.jpg b/kngil/uploads/qa/1769497243_08b20dafcb25.jpg new file mode 100644 index 0000000..d2c1777 Binary files /dev/null and b/kngil/uploads/qa/1769497243_08b20dafcb25.jpg differ diff --git a/kngil/uploads/qa/1769509028_f9d6d2b57cd0.jpg b/kngil/uploads/qa/1769509028_f9d6d2b57cd0.jpg new file mode 100644 index 0000000..f105007 Binary files /dev/null and b/kngil/uploads/qa/1769509028_f9d6d2b57cd0.jpg differ diff --git a/kngil/uploads/qa/1769509499_417330b6f49e.jpg b/kngil/uploads/qa/1769509499_417330b6f49e.jpg new file mode 100644 index 0000000..f105007 Binary files /dev/null and b/kngil/uploads/qa/1769509499_417330b6f49e.jpg differ diff --git a/kngil/uploads/qa/1769513369_959a050cb972.jpg b/kngil/uploads/qa/1769513369_959a050cb972.jpg new file mode 100644 index 0000000..f105007 Binary files /dev/null and b/kngil/uploads/qa/1769513369_959a050cb972.jpg differ

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Language Support

Glyph Chart

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Fonts not showing in any browser

Fonts not loading in iPhone or iPad

Fonts not loading in Firefox

Fonts not loading in IE

Fonts not loading in IE9

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Language Support

Glyph Chart

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Fonts not showing in any browser

Fonts not loading in iPhone or iPad

Fonts not loading in Firefox

Fonts not loading in IE

Fonts not loading in IE9

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Language Support

Glyph Chart

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Fonts not showing in any browser

Fonts not loading in iPhone or iPad

Fonts not loading in Firefox

Fonts not loading in IE

Fonts not loading in IE9

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Language Support

Glyph Chart

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Fonts not showing in any browser

Fonts not loading in iPhone or iPad

Fonts not loading in Firefox

Fonts not loading in IE

Fonts not loading in IE9

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

Pellentesque ornare sem

Cras mattis consectetur

Language Support

Glyph Chart

Installing Webfonts

1. Upload your webfonts

2. Include the webfont stylesheet

3. Modify your own stylesheet

4. Test

TroubleshootingFont-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems

Troubleshooting
Font-Face Problems