/*
    GLOBAL CSS

*/


* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; /*-webkit-user-select: none; user-select: none;*/ }
html, body { width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: normal; color: rgba(255, 255, 255, 0.5); }
body { background-color: #131414; }
input, button, textarea { font-family: 'Noto Sans KR', sans-serif; background-color: transparent; border-radius: 0; /*-webkit-user-select : auto !important;*/ }
a { text-decoration: none; }


/*  container   */
.container { position: relative; padding-top: 16rem; width: 100%; height: auto; min-height: calc(100vh - 6rem); font-size: 0; text-align: center; }
.container-center { margin: 0 auto; max-width: 1200px; }


/*  header  */
header { position: fixed; left: 0; top: 0; width: 100%; height: 10rem; font-size: 0; text-align: center; background-color: rgba(20, 20, 20, 0.95); z-index: 10; }
header::after { content: ''; position: absolute; left: calc((100% - 80rem) / 2); bottom: 0; width: 80rem; height: 2px; background-color: #252525; }
header .inner { position: relative; width: 100%; height: auto; }
header .inner h2 { width: 100%; height: 6rem; font-size: 0; background: no-repeat 50% 50% / contain url('/assets/images/header_img_logo_blog.png'); }
header .inner h2 b { font-weight: 700; }
header .inner div { position: relative; display: flex; justify-content: space-between; margin: 0 auto; width: 100%; height: 4rem; max-width: 1200px; line-height: 4rem; overflow: hidden; }
header .inner div a { display: inline-block; width: max-content; height: inherit; font-size: 1.2rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); line-height: inherit; text-decoration: none; transition: color 0.5s; }
header .inner div a:hover { cursor: pointer; color: rgba(255, 255, 255, 1); }
header .inner div .selected { color: #fff; }
header .inner div .bar { position: absolute; left: -14.2%; bottom: 0; width: 5%; height: 2px; background-color: rgba(66, 155, 7, 0); z-index: 1; transition: left 1s, background-color ease-in 0.5s; }
header .inner button {  display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (필요시) */ margin-right: 0.5rem;  padding: 0.5rem 1rem; width: auto; height: auto; font-family: sans-serif; font-size: 0.85rem; font-weight: 400; color: #fff; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; z-index: 11; transition: background-color 0.5s; }
header .inner button:hover { cursor: pointer; background-color: rgba(66, 155, 7, 1); }

header .button-inner { display: flex; position: absolute; left: calc(50% + 27rem); top: 2.25rem; margin: unset !important; }
header .button-inner img {
    width: 16px;   /* 아이콘 크기 */
    height: 16px;
    margin-right: 3px /* 글자와 아이콘 사이 간격 */
}

header .inner div a:nth-child(3) img {
    width: 30px;
}

header .mobile { position: absolute; display: none; justify-content: space-between; align-items: center; left: 0; top: 0; width: 100vw; height: 4rem; }
header .mobile .menu { position: relative; margin: 0 0 0 1rem; width: 5rem; height: max-content; font-size: 2rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-align: left; }
header .mobile .home { position: relative; width: 3rem; height: 3rem; background: no-repeat 50% 50% / contain url('/assets/images/header_img_logo_blog.png'); }
header .mobile .my { position: relative;  display: flex; align-items: center; margin-right: 0.5rem; padding: 0.5rem; height: auto; font-family: sans-serif; font-size: 0.85rem; font-weight: 400; color: #fff; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; }
header .mobile .my img {
    width: 16px;   /* 아이콘 크기 */
    height: 16px;
    margin-right: 1px /* 글자와 아이콘 사이 간격 */
}

header .mobile .logout { position: relative;  display: flex; align-items: center; margin: 0 1rem 0 0; padding: 0.5rem; height: auto; font-family: sans-serif; font-size: 0.85rem; font-weight: 400; color: #fff; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; }
header .mobile .logout img {
    width: 16px;   /* 아이콘 크기 */
    height: 16px;
    margin-right: 1px /* 글자와 아이콘 사이 간격 */
}

header .mobile .mobile-button-inner { display: flex; }

p img { max-width: 100%;}




/*  navigation  */
nav { position: fixed; display: block; padding: 1rem 2rem 2rem 2rem; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(30, 30, 30, 1); z-index: 20; transform: translateX(-100vw); transition: transform 0.5s ease; }
nav.show { transform: translateX(0); }
nav button { position: relative; display: block; margin: 0 0 1rem 0; width: max-content; height: max-content; font-size: 2rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
nav a { position: relative; display: block; width: 100%; height: 3.5rem; font-size: 1rem; font-weight: 400; color: rgba(66, 155, 7, 1); line-height: 3.5rem; text-decoration: none; }
nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.05); }
nav a:nth-child(3) img {
    width: 28px; /* 두 번째 <a> 태그의 img만 더 크게 */
}

/*  footer  */
footer { position: relative; margin: 0 auto; padding: 2rem 0 2rem 7rem; width: 100%; height: auto; max-width: 1200px; background: no-repeat 0 2.5rem / 5rem 5rem url('/assets/images/sys_img_logo.png'); }
footer::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #252525; }
footer div { margin: 0 0 0.25rem 0; }
footer div span { margin: 0 3rem 0 0; font-size: 0.85rem; font-weight: 300; color: rgba(255, 255, 255, 0.5); }
footer div span::before { content: '\25AA'; margin: 0 0.1rem 0 0; }
footer div span:last-of-type { margin: 0; }
footer div.cs { margin: 1rem 0 1rem 0; }
footer div.cr span { font-family: sans-serif; font-size: 0.7rem; font-weight: 300; color: rgba(255, 255, 255, 0.2); letter-spacing: 2px; }
footer div.cr span::before { content: ''; }




/*  common  */
h1 { font-family: sans-serif; font-size: 4rem; font-weight: 300; color: rgba(255, 255, 255, 0.5); line-height: 4.1rem; }
h2 { font-size: 2rem; font-weight: 400; color: rgba(255, 255, 255, 1); letter-spacing: -2px; line-height: 2.1rem; }
h3 { font-size: 1.3rem; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 1.4rem; }
h4 { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 1.5rem; }
h5 { font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); line-height: 1.2rem; }

.m-top-05 { margin-top: 0.5rem; }
.m-top-1 { margin-top: 1rem; }
.m-top-3 { margin-top: 3rem; }
.m-top-5 { margin-top: 5rem; }
.red { color: #fff !important; background-color: #9c101d !important; }
.align-center { text-align: center !important; }


/*  paging  */
div.paging { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 2rem; }
div.paging a { margin: 0 1rem 0 0; font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); transition: color 0.5s ease; }
div.paging a:hover { cursor: pointer; color: rgba(255, 255, 255, 1); }
div.paging a.selected { font-weight: 700; color: rgba(66, 155, 7, 1) !important; text-decoration: underline; }
div.paging a.prev::before { content: '\25C0'; display: inline; }
div.paging a.next::before { content: '\25B6'; display: inline; }








/*  mobile  */
@media (min-width: 320px) and (max-width: 675px) {
    header { height: 4rem; }
    header::after { left: 0; width: 100%; height: 1px; }

    header .inner { display: none; }
    header .mobile { display: flex; }
    nav { display: block; }

    .container { padding-top: 6rem; min-height: unset; }


    footer { padding: 5.25rem 0 1rem 2rem; background: no-repeat 2rem 1.5rem / 3rem 3rem url('/assets/images/sys_img_logo.png'); }
    footer::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #252525; }
    footer div { margin: 0 0 0.25rem 0; }
    footer div span { display: block; margin: 0 2rem 0 0; }
    footer div span::before { content: ''; }
    footer div span:last-of-type { margin: 0; }
    footer div.cs { margin: 1rem 0 1rem 0; }
    footer div.cr span { font-family: sans-serif; font-size: 0.7rem; font-weight: 300; color: rgba(255, 255, 255, 0.2); letter-spacing: 2px; }
    footer div.cr span::before { content: ''; }
    


}