hmw1001
206 lines
6.8 KiB
CSS
206 lines
6.8 KiB
CSS
@charset "utf-8";
|
|
|
|
/* 초기화 */
|
|
html {overflow-y:scroll;height:100%;min-width:320px}
|
|
body {margin:0;padding:0;font-size:0.75em;background:#f8f8f8;height:100%;font-family:'Malgun Gothic', dotum, sans-serif}
|
|
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}
|
|
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
|
|
label, input, button, select, img {vertical-align:middle}
|
|
input, button {margin:0;padding:0;font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
|
|
button {cursor:pointer}
|
|
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em;-webkit-appearance:none}
|
|
textarea, select {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
|
|
textarea {border-radius:0;-webkit-appearance:none;font-family:'Malgun Gothic', dotum, sans-serif}
|
|
select {margin:0;background:none;font-family:'Malgun Gothic', dotum, sans-serif}
|
|
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}
|
|
ul,li,dl,dt,dd {padding:0;margin:0}
|
|
ul {list-style:none}
|
|
|
|
*,:after,:before {
|
|
-webkit-box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
/* 중간 레이아웃 */
|
|
#wrapper {}
|
|
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
|
|
#container {position:relative;min-height:300px}
|
|
#container:after {display:block;visibility:hidden;clear:both;content:""}
|
|
#container_title {font-size:1.2em;font-weight:bold;height:50px;padding:10px 15px;line-height:30px;background:#fff;color:#333;
|
|
-webkit-box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
|
|
-moz-box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
|
|
box-shadow:0 0 10px rgba(181, 181, 181, 0.4);
|
|
}
|
|
#container_title a {display:inline-block;margin-right:5px}
|
|
.fixed {position:fixed;top:0;right:0;z-index:999}
|
|
#container_title.fixed {width:100%}
|
|
|
|
/* 하단 레이아웃 */
|
|
#ft {background:#222;padding:0px 20px 20px}
|
|
#ft h1 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
|
|
#ft p {margin:0;padding:10px 0;line-height:1.8em}
|
|
|
|
#ft_copy {padding:10px;line-height:2em;text-align:center;color:#777}
|
|
#ft_copy #ft_company {text-align:center}
|
|
#ft_copy #ft_company a {display:inline-block;padding:0 10px;line-height:1em;border-left:1px solid #333;color:#fff}
|
|
#ft_copy #ft_company a:first-child {border:0}
|
|
.ft_cnt {font-weight:normal;color:#e3e3e3;line-height:2em;text-align:center}
|
|
.ft_cnt h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
|
|
#ft_copy b {color:inherit}
|
|
#ft_copy a {color:inherit;text-decoration:none}
|
|
|
|
#top_btn {position:fixed;bottom:10px;right:15px;width:50px;height:50px;line-height:36px;border:2px solid #d2d2d2;border-radius:50%;background:#fff;color:#d2d2d2;text-align:center;font-size:15px;z-index:99;}
|
|
#top_btn i {font-size:1.4em}
|
|
#top_btn:hover {background:#3b8afb;border-color:#3b8afb;color:#fff}
|
|
#device_change {display:block;line-height:40px;border-radius:5px;background:#302e2e;color:#777;font-size:1em;text-decoration:none;text-align:center}
|
|
|
|
/* ==========================================================================
|
|
[LOGICAL FIX] Mobile Navigation Panel
|
|
========================================================================== */
|
|
|
|
/* Mobile Header */
|
|
header#header #mobile-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
header#header .mobile-header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60px;
|
|
padding: 0 15px;
|
|
}
|
|
header#header .mobile-logo img {
|
|
height: 30px;
|
|
}
|
|
header#header .mobile-menu-open-btn {
|
|
font-size: 1.5rem;
|
|
color: #333;
|
|
background: none;
|
|
border: none;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Navigation Panel (메뉴 패널) */
|
|
header#header > #mobile-nav-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 85%;
|
|
max-width: 320px;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
z-index: 1002; /* 💡 [수정] 오버레이보다 높은 z-index */
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease-in-out;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
header#header > #mobile-nav-panel.is-active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Panel Header */
|
|
header#header > #mobile-nav-panel .mobile-nav-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
flex-shrink: 0;
|
|
}
|
|
header#header > #mobile-nav-panel .btn-mobile-login,
|
|
header#header > #mobile-nav-panel .btn-mobile-join {
|
|
padding: 8px 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 0.9rem;
|
|
margin-right: 10px;
|
|
}
|
|
header#header > #mobile-nav-panel .btn-mobile-join {
|
|
background-color: #0056b3;
|
|
color: #fff;
|
|
border-color: #0056b3;
|
|
}
|
|
header#header > #mobile-nav-panel .mobile-user-info {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
header#header > #mobile-nav-panel .mobile-menu-close-btn {
|
|
margin-left: auto;
|
|
font-size: 2rem;
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
}
|
|
|
|
/* GNB (Global Navigation) */
|
|
header#header > #mobile-nav-panel .mobile-gnb {
|
|
flex-grow: 1;
|
|
|
|
}
|
|
header#header > #mobile-nav-panel .mobile-gnb ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
header#header > #mobile-nav-panel .mobile-gnb li {
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
header#header > #mobile-nav-panel .mobile-gnb li a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
font-size: 1.1rem;
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
header#header > #mobile-nav-panel .sub-menu-indicator {
|
|
margin-left: auto;
|
|
font-size: 0.9rem;
|
|
color: #aaa;
|
|
padding: 5px;
|
|
}
|
|
header#header > #mobile-nav-panel .sub-menu {
|
|
display: none;
|
|
background-color: #f9f9f9;
|
|
}
|
|
header#header > #mobile-nav-panel .sub-menu li a {
|
|
padding-left: 40px;
|
|
font-size: 1rem;
|
|
color: #555;
|
|
}
|
|
|
|
/* Overlay (뒷배경) */
|
|
header#header > #mobile-nav-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 1001; /* 💡 [수정] 메뉴 패널보다 낮은 z-index */
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
}
|
|
header#header > #mobile-nav-overlay.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* 화면낭독기 사용자용 */
|
|
.sound_only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}
|
|
/* 본문 바로가기 */
|
|
.to_content a {z-index:100000;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
|
|
/* 이미지 등비율 리사이징 */
|
|
.img_fix {width:100%;height:auto}
|