@charset 'utf-8'
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700;1,900&display=swap'); 
@ selection.css
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, tbody, tfoot, thead, tr, th, td {margin:0;padding:0; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 'Noto Sans KR', sans-serif; font-weight: 400;}
* {margin: 0; padding: 0; box-sizing: border-box;}
a {color:inherit; text-decoration: none;}
a:hover {text-decoration: underline;}
li {list-style: none;}
address, em, i { font-style: normal;}
h1, h2, h3, h4, h5,h6 {font-size: inherit;}
a:hover { text-decoration: none; color:inherit;}
/*드래그시 컬러변경*/
::-moz-selection {
   background: black;
   color: #fff;
}
::selection {
   background: black;
   color: #fff;
}

.root {position: relative;}
.box {position: fixed; right: 28px; bottom: 28px; max-width: calc(100% - 56px);  font-size: 14px; line-height: 1.5;
    background: rgba(255, 255, 255, 0.8); border-radius: 4px; border: solid 1px black; padding: 10px;}
.notice {margin-bottom: 21px;}
.box a {display: inline-block; margin-bottom: 10px; text-decoration-line: none;}
.box a span{display: inline-block; outline: solid 1px black; width: 2ch; text-align: center; cursor: default; margin-right: 5px;}
.box a figure {display: inline-block; width: 11%}
.box a figure img {display: inline-block;}
div.sister a {display: flex; align-items: center;  justify-content: center; position: fixed;  z-index: 999; bottom: 1.8rem;
    left: 1.8rem;  width: 9rem; height: 9rem; font-size: .875rem; font-weight: 600; line-height: 1.375;
    text-align: center; color: snow; background-color: red; border-radius: 50%; animation: rotate_image 10s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes rotate_image{
   100% {
      transform: rotate(360deg);
    }
}

header {z-index: 100; height: 4.5vh; padding-top: 1.3698vh; padding-left: 1.6vw; border-bottom: 0.4px solid #000;
    padding-right: 1.6vw; padding-bottom: 0.4vw; display: flex; align-items: center; position: fixed; inset: 0% 0% auto; background: #f0f0f0;}

.vertical-stroke {background-color: #000; width: 1px; height: 1.3698vh; margin: 0 14px 0 100px;}

.title summary {font-weight: 700;}
header a, header p {    color: var(--black);
    letter-spacing: .023vh;
    text-transform: uppercase;
    margin-top: .4vh;
    margin-bottom: 0;
    font-size: 1.6vh;
    font-weight: 500;
    line-height: 1.3698vh;}

.container {width: 100%; margin: 100px auto; padding-left: 25px; padding-right: 12px; line-height: 1.7;}

/* 탭 컨테이너 */
.tab-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-top: 4.5vh;
    font-size: 16px;
    line-height: 1.7;
}

/* 세로형 탭 */
.tabs { width: 50%; display: flex; flex-direction: column; /* 세로로 배치 */font-size: 16px;}

.tab_bar {position: fixed; width: 50%; top: 72px; left: 25px;}
.tab_bar .sub {margin-bottom: 14px}


.tab-button {
    display: flex;
    cursor: pointer;
    width: 100%;
    text-align: center;
    border: none;
    background: none;
}

.tab-button .date {width: 16%; padding: 25px 0; border-right: 0.4px solid #000;}
.tab-button .date .date2 {font-size:40px }
.tab-button .subject p { text-decoration: underline; font-size: 16px;
    line-height: 2; text-decoration-thickness: 2px;}
.tab-button .subject .color1 {text-decoration-color: #eb6e41;}
.tab-button .subject .color2 {text-decoration-color: #e39cbe;}
.tab-button .subject .color3 {text-decoration-color: #609db0}
.tab-button .subject .color4 {text-decoration-color: #7f4f4a}
.tab-button .subject .color5 {text-decoration-color: #F9B058}

/*.tab-content .color1 {font-weight: 400; color: #eb6e41;}*/

/* 탭 콘텐츠 */
.tab-content {
    width: 50%;
    flex-grow: 1;
    overflow-y: scroll;
    border-left: .4px solid #000;
}

.content {
    display: none; /* 기본적으로 내용 숨김 */
    padding: 20px 40px;
}

.content p {margin-top: 20px;}
.content .title {text-align: center;}
.content figure {max-width: 430px; width: 100%; margin: 20px auto 0;}
.content figure img {display: block; width: 100%}
figcaption {width: 100%; font-size: .75rem; margin: .25rem auto 0; max-width: 430px;}
iframe {width:100%; margin: 20px auto 0;}

.txt {margin-bottom: 40px;}
/*여기까지*/


@media only screen and (max-width: 767px) {
    header, .container {padding-left: 3%}
    .box .notice br{
        display:none !important;
    }

}