@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
*, body {box-sizing:border-box; word-break:keep-all; margin:0; padding:0; font-size:16px; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
ul, ol {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
a {color:#000; text-decoration:none;}
a.hover {color:#000;}

:root {
    --color-red: #ff0000;
    --color-green: green;
}

/* 기본 선택 영역 스타일 */
::selection {
    background-color: green; /* 선택 시 배경색 */
    color: #fff;               /* 선택된 글자색 */
    line-height:1.8;
  }
  
  /* 파이어폭스 전용 선택 영역 스타일 */
  ::-moz-selection {
    background-color: green;
    color: #fff;
    line-height:1.8;
  }

.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;
  }
.d-none {display:none;}
.header.desktop {position:sticky; top:0; padding:20px 10px; z-index:99; background-color:#fff;}
.header.mobile {display:none;}

.header-section {display:grid; grid-template-columns:repeat(12, 1fr); grid-gap:10px; align-items:center; width:100%;}
.logo {grid-column:1/3;}
.header-item ul {display:flex; gap:16px; flex-wrap:nowrap;}
.header-item ul li a {font-weight:500; font-size:19px; text-transform:capitalize; position:relative;}
.header-item ul li a:hover:before {position:absolute; content:''; width:100%; height:1px; background:green; bottom:-5px; left:0;}
.header-item1 {grid-column:4/7;}
.header-item2 {grid-column:7/11;}
.header-item3 {grid-column:11/13;}
.header-item3 .menu-btn {display:flex; align-items: center; justify-content:flex-end; gap: 10px; cursor:pointer;}
.header-item3 .menu-btn div:first-child {    
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0px;
    height: 8px;
    justify-content: center;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 8px;
  }
.header-item3 .menu-btn > div > div:first-child {
    height: 1px;
    left: 0;
    overflow: visible;
    position: absolute;
    top: calc(50.00000000000002% - 1px / 2);
    width: 9px;
    z-index: 1;
    background-color: #000;
    opacity: 1;
}
.header-item3 .menu-btn > div > div:last-child {
    height: 8px;
    overflow: visible;
    position: relative;
    width: 1px;
    background-color:#000;
    transform: none;
    opacity: 1;
    left:1px;
}
.header-item3 .menu-btn p {font-size:19px;}

.inner-wrap {margin-top:20px;}
.inner-wrap > h1 {padding:3em 10px 4.5em calc(50% + 5px); font-size:20px;}
.inner-wrap .content-wrap {padding:0 10px; border-top:1px solid green;}
.inner-wrap .content-section {display:flex; gap:10px; padding:1rem 0; flex-wrap:nowrap!important;}
.inner-wrap .content-section > div {flex-basis:0; flex-grow:1;}
.inner-wrap .content-section .left h2 {font-family: "Noto Serif KR", serif; line-height:1.8; font-weight:500; font-size:20px; margin-bottom:30px;}
.inner-wrap .content-section .right:not(:first-child) p {margin-bottom:30px; line-height:1.8; font-family: "Noto Serif KR", serif; font-weight:500; font-size:20px;}

.footer {display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; padding:16px 16px; border-top:1px solid green; margin-top:100px;}
.footer p {font-size:12px; line-height:1.6;}


@media screen and (max-width: 1024px) {
    
    .header-item {display:none;}

    .inner-wrap h1 {padding:1em 10px 4em; font-size:18px; text-align:center;}
    .inner-wrap .content-section .left h2 {font-size:18px;}
    .inner-wrap .content-section .right:not(:first-child) p {font-size:18px;}

    .footer {grid-template-columns:1fr 1fr; padding:10px;}
    .footer .column-01 {order:3;}
    .header-item3 .menu-btn p {font-size:16px; color:#1a1a1a;}
}

@media screen and (max-width: 767px) {

    .logo a img {width:150px;}

    .inner-wrap .content-section {flex-wrap:wrap!important;}
    .inner-wrap .content-section > div {flex-basis:100%!important;}
    .inner-wrap .content-section .left h2 {font-size:16px;}
    .inner-wrap .content-section .right:not(:first-child) p {font-size:16px;}

    .footer {grid-template-columns:1fr;}
    .br-mobile-hidden {display:none;}
}