/* ============================================================ * Information : default.css * Version : 2.5 * Date : 2019-06-05 ============================================================ * Author : Kwon Hyeoung Bin * Contact : Cukanis@cukanis.com * Homepage : http://www.cukanis.com ============================================================ * Description : ============================================================ */ @charset "utf-8"; @font-face { font-family:'Pretendard'; font-weight:400; font-style:normal; src: url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/woff2/Pretendard-Regular.woff2') format('woff2'); } * { margin:0; padding:0; font-family:inherit; /* letter-spacing:-0.5px; font:inherit; */ color:inherit; } *, :after, :before { box-sizing:border-box; flex-shrink:0; } :root { -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;overflow-wrap:break-word;word-break:break-word;tab-size:4; } img, picture, video, canvas, svg { max-width:100%; border-width:0; vertical-align:middle; } button { background:none; border:0;cursor:pointer;} a { text-decoration:none; } input:focus, select:focus, option:focus, textarea:focus, button:focus { outline: none; } table { border-collapse:collapse; border-spacing:0; width:100%; text-align:center; } table.alignleft td { text-align:left; } ul, ol { padding-inline-start:0; list-style-position:inside; } ul > li { list-style-type:none; } ol > li { text-indent: -1em; margin-left:1em; } ol.check > li::marker { content: "✔ "; } ol.dash > li::marker { content: "─ "; } ol.indent { list-style-position:outside; padding-left:15px; } hr { margin:8px 0; border-color:var(--borderColor); } option { font-weight: normal; display: block; white-space-collapse: collapse; text-wrap: nowrap; min-height: 1.2em; padding: 2px 3px 1px; } :root, [data-theme="light"] { color-scheme: light; --backgroundColor : hsl(224, 18%, 100%); --backgroundColorAlpha : hsl(224, 20%, 90%, 0.4); --backgroundColorPopup : hsl(208, 12%, 85%); --backgroundColorLight : hsl(224, 18%, 95%); --backgroundColorDeep : hsl(224, 30%, 85%); --backgroundColorDeepAlpha : hsl(224, 30%, 85%, 0.4); --backgroundColored1 : hsl(228, 12%, 30%); --backgroundColored1Hover : hsl(228, 40%, 35%, 0.8); --backgroundColored2 : hsl(28, 93%, 50%); --backgroundColorGlow : hsl(120, 100%, 91%, 0.9); --backgroundColorRed : hsl(0, 100%, 50%, 0.9); --backgroundColorPink : hsl(0, 93%, 76%, 0.9); --fontColor : hsl(0, 0%, 10%); --fontColorLight : hsl(0, 0%, 20%); --fontColorDeep : hsl(0, 0%, 40%); --fontColorButton : #007e98; --fontColorTitle : hsl(0, 80%, 60%); --fontColorSubTitle : hsl(155, 90%, 25%); --fontColorNotice : hsl(320, 90%, 70%); --fontColorLabel : hsl(190, 80%, 50%); --linkColor : hsl(36, 90%, 50%); --labelColor : hsl(190, 80%, 50%); --lineColor : hsl(208, 12%, 80%); --fontSize : 14px; --border : solid 2px hsl(0, 0%, 75%); --borderColor : hsl(0, 0%, 75%); --borderColorPopup : hsl(0, 0%, 40%); --borderColorOn : hsl(29, 90%, 66%); --examLevelColor1 : hsl(199, 100%, 51%, 0.7); --examLevelColor2 : hsl(189, 100%, 51%, 0.7); --examLevelColor3 : hsl(170, 96%, 35%, 0.7); --examLevelColor4 : hsl(100, 36%, 56%, 0.7); --examLevelColor5 : hsl(45, 100%, 50%, 0.7); --examLevelColor6 : hsl(29, 100%, 50%, 0.7); --examLevelColor7 : hsl(342, 74%, 62%, 0.7); --examLevelColor8 : hsl(342, 78%, 55%, 0.7); --examLevelColor9 : hsl(356, 100%, 50%, 0.7); --rainbowColor1 : hsl(2, 85%, 61%, 0.8); --rainbowColor2 : hsl(35, 97%, 62%, 0.8); --rainbowColor3 : hsl(60, 95%, 50%, 0.8); --rainbowColor4 : hsl(126, 45%, 58%, 0.8); --rainbowColor5 : hsl(208, 74%, 50%, 0.8); --rainbowColor6 : hsl(248, 50%, 54%, 0.8); --rainbowColor7 : hsl(300, 100%, 25%, 0.8); --rainbowColor1Font : white; --rainbowColor2Font : white; --rainbowColor3Font : #202020; --rainbowColor4Font : white; --rainbowColor5Font : white; --rainbowColor6Font : white; --rainbowColor7Font : white; --rainbowColor1Dark : hsl(2, 55%, 50%); --rainbowColor2Dark : hsl(35, 59%, 50%); --rainbowColor3Dark : hsl(60, 90%, 34%); --rainbowColor4Dark : hsl(126, 32%, 47%); --rainbowColor5Dark : hsl(208, 74%, 40%); --rainbowColor6Dark : hsl(248, 42%, 44%); --rainbowColor7Dark : hsl(300, 100%, 15%); --rainbowColor1Hover : hsl(2, 85%, 71%, 0.8); --rainbowColor2Hover : hsl(35, 97%, 72%, 0.8); --rainbowColor3Hover : hsl(60, 100%, 80%, 0.8); --rainbowColor4Hover : hsl(126, 45%, 68%, 0.8); --rainbowColor5Hover : hsl(208, 74%, 60%, 0.8); --rainbowColor6Hover : hsl(248, 50%, 64%, 0.8); --rainbowColor7Hover : hsl(300, 100%, 35%, 0.8); --bgColor1 : hsl(6,100%,94%); --bgColor2 : hsl(180,65%,81%); --bgColor3 : hsl(120,73%,75%); --bgColor4 : hsl(351,100%,86%); --bgColor5 : hsl(17,100%,74%); --bgColor6 : hsl(177,70%,41%); --bgColor7 : hsl(203,92%,75%); --bgColor8 : hsl(210,14%,53%); --bgColor9 : hsl(60,100%,94%); --bgColor10 : hsl(340,60%,65%); --bgColor11 : hsl(37,100%,92%); --bgColor12 : hsl(30,59%,53%); --bgColor13 : hsl(300,24%,80%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --backgroundColor : hsl(224, 18%, 18%); --backgroundColorAlpha : hsl(224, 20%, 10%, 0.4); --backgroundColorPopup : hsl(208, 12%, 15%); --backgroundColorLight : hsl(224, 18%, 15%); --backgroundColorDeep : hsl(224, 30%, 25%); --backgroundColorDeepAlpha : hsl(224, 30%, 25%, 0.4); --backgroundColored1 : hsl(228, 12%, 10%); --backgroundColored1Hover : hsl(228, 40%, 50%, 0.8); --backgroundColored2 : hsl(28, 93%, 50%); --backgroundColorGlow : hsl(120, 16%, 23%, 0.9); --backgroundColorRed : hsl(0, 100%, 50%, 0.9); --backgroundColorPink : hsl(0, 34%, 30%, 0.9); --fontColor : hsl(0, 0%, 90%); --fontColorLight : hsl(0, 0%, 80%); --fontColorDeep : hsl(0, 0%, 60%); --fontColorButton : #007e98; --fontColorTitle : hsl(0, 80%, 60%); --fontColorSubTitle : hsl(155, 90%, 25%); --fontColorNotice : hsl(320, 90%, 70%); --fontColorLabel : hsl(190, 80%, 50%); --linkColor : hsl(36, 90%, 50%); --labelColor : hsl(190, 80%, 50%); --lineColor : hsl(208, 12%, 35%); --fontSize : 14px; --border : solid 2px hsl(0, 0%, 30%); --borderColor : hsl(0, 0%, 30%); --borderColorPopup : hsl(0, 0%, 60%); --borderColorOn : hsl(29, 90%, 66%); --examLevelColor1 : hsl(199, 100%, 51%, 0.7); --examLevelColor2 : hsl(189, 100%, 51%, 0.7); --examLevelColor3 : hsl(170, 96%, 35%, 0.7); --examLevelColor4 : hsl(100, 36%, 56%, 0.7); --examLevelColor5 : hsl(45, 100%, 50%, 0.7); --examLevelColor6 : hsl(29, 100%, 50%, 0.7); --examLevelColor7 : hsl(342, 74%, 62%, 0.7); --examLevelColor8 : hsl(342, 78%, 55%, 0.7); --examLevelColor9 : hsl(356, 100%, 50%, 0.7); --rainbowColor1 : hsl(2, 85%, 61%, 0.8); --rainbowColor2 : hsl(35, 97%, 62%, 0.8); --rainbowColor3 : hsl(60, 95%, 50%, 0.8); --rainbowColor4 : hsl(126, 45%, 58%, 0.8); --rainbowColor5 : hsl(208, 74%, 50%, 0.8); --rainbowColor6 : hsl(248, 50%, 54%, 0.8); --rainbowColor7 : hsl(300, 100%, 25%, 0.8); --rainbowColor1Font : white; --rainbowColor2Font : white; --rainbowColor3Font : #202020; --rainbowColor4Font : white; --rainbowColor5Font : white; --rainbowColor6Font : white; --rainbowColor7Font : white; --rainbowColor1Dark : hsl(2, 55%, 50%); --rainbowColor2Dark : hsl(35, 59%, 50%); --rainbowColor3Dark : hsl(60, 90%, 34%); --rainbowColor4Dark : hsl(126, 32%, 47%); --rainbowColor5Dark : hsl(208, 74%, 40%); --rainbowColor6Dark : hsl(248, 42%, 44%); --rainbowColor7Dark : hsl(300, 100%, 15%); --rainbowColor1Hover : hsl(2, 85%, 71%, 0.8); --rainbowColor2Hover : hsl(35, 97%, 72%, 0.8); --rainbowColor3Hover : hsl(60, 100%, 80%, 0.8); --rainbowColor4Hover : hsl(126, 45%, 68%, 0.8); --rainbowColor5Hover : hsl(208, 74%, 60%, 0.8); --rainbowColor6Hover : hsl(248, 50%, 64%, 0.8); --rainbowColor7Hover : hsl(300, 100%, 35%, 0.8); --bgColor1 : hsl(6,60%,37.6%); --bgColor2 : hsl(180,39%,32.4%); --bgColor3 : hsl(120,43.8%,30%); --bgColor4 : hsl(351,60%,34.4%); --bgColor5 : hsl(17,60%,29.6%); --bgColor6 : hsl(177,42%,16.4%); --bgColor7 : hsl(203,55.2%,30%); --bgColor8 : hsl(210,8.4%,21.2%); --bgColor9 : hsl(60,60%,37.6%); --bgColor10 : hsl(340,36%,26%); --bgColor11 : hsl(37,60%,36.8%); --bgColor12 : hsl(30,35.4%,21.2%); --bgColor13 : hsl(300,14.4%,32%); } } [data-theme="dark"] { color-scheme: dark; --backgroundColor : hsl(224, 18%, 18%); --backgroundColorAlpha : hsl(224, 20%, 10%, 0.4); --backgroundColorPopup : hsl(208, 12%, 15%); --backgroundColorLight : hsl(224, 18%, 15%); --backgroundColorDeep : hsl(224, 30%, 25%); --backgroundColorDeepAlpha : hsl(224, 30%, 25%, 0.4); --backgroundColored1 : hsl(228, 12%, 10%); --backgroundColored1Hover : hsl(228, 40%, 50%, 0.8); --backgroundColored2 : hsl(28, 93%, 50%); --backgroundColorGlow : hsl(120, 16%, 23%, 0.9); --backgroundColorRed : hsl(0, 100%, 50%, 0.9); --backgroundColorPink : hsl(0, 34%, 30%, 0.9); --fontColor : hsl(0, 0%, 90%); --fontColorLight : hsl(0, 0%, 80%); --fontColorDeep : hsl(0, 0%, 60%); --fontColorButton : #007e98; --fontColorTitle : hsl(0, 80%, 60%); --fontColorSubTitle : hsl(155, 90%, 25%); --fontColorNotice : hsl(320, 90%, 70%); --fontColorLabel : hsl(190, 80%, 50%); --linkColor : hsl(36, 90%, 50%); --labelColor : hsl(190, 80%, 50%); --lineColor : hsl(208, 12%, 35%); --fontSize : 14px; --border : solid 2px hsl(0, 0%, 30%); --borderColor : hsl(0, 0%, 30%); --borderColorPopup : hsl(0, 0%, 60%); --borderColorOn : hsl(29, 90%, 66%); --examLevelColor1 : hsl(199, 100%, 51%, 0.7); --examLevelColor2 : hsl(189, 100%, 51%, 0.7); --examLevelColor3 : hsl(170, 96%, 35%, 0.7); --examLevelColor4 : hsl(100, 36%, 56%, 0.7); --examLevelColor5 : hsl(45, 100%, 50%, 0.7); --examLevelColor6 : hsl(29, 100%, 50%, 0.7); --examLevelColor7 : hsl(342, 74%, 62%, 0.7); --examLevelColor8 : hsl(342, 78%, 55%, 0.7); --examLevelColor9 : hsl(356, 100%, 50%, 0.7); --rainbowColor1 : hsl(2, 85%, 61%, 0.8); --rainbowColor2 : hsl(35, 97%, 62%, 0.8); --rainbowColor3 : hsl(60, 95%, 50%, 0.8); --rainbowColor4 : hsl(126, 45%, 58%, 0.8); --rainbowColor5 : hsl(208, 74%, 50%, 0.8); --rainbowColor6 : hsl(248, 50%, 54%, 0.8); --rainbowColor7 : hsl(300, 100%, 25%, 0.8); --rainbowColor1Font : white; --rainbowColor2Font : white; --rainbowColor3Font : #202020; --rainbowColor4Font : white; --rainbowColor5Font : white; --rainbowColor6Font : white; --rainbowColor7Font : white; --rainbowColor1Dark : hsl(2, 55%, 50%); --rainbowColor2Dark : hsl(35, 59%, 50%); --rainbowColor3Dark : hsl(60, 90%, 34%); --rainbowColor4Dark : hsl(126, 32%, 47%); --rainbowColor5Dark : hsl(208, 74%, 40%); --rainbowColor6Dark : hsl(248, 42%, 44%); --rainbowColor7Dark : hsl(300, 100%, 15%); --rainbowColor1Hover : hsl(2, 85%, 71%, 0.8); --rainbowColor2Hover : hsl(35, 97%, 72%, 0.8); --rainbowColor3Hover : hsl(60, 100%, 80%, 0.8); --rainbowColor4Hover : hsl(126, 45%, 68%, 0.8); --rainbowColor5Hover : hsl(208, 74%, 60%, 0.8); --rainbowColor6Hover : hsl(248, 50%, 64%, 0.8); --rainbowColor7Hover : hsl(300, 100%, 35%, 0.8); --bgColor1 : hsl(6,60%,37.6%); --bgColor2 : hsl(180,39%,32.4%); --bgColor3 : hsl(120,43.8%,30%); --bgColor4 : hsl(351,60%,34.4%); --bgColor5 : hsl(17,60%,29.6%); --bgColor6 : hsl(177,42%,16.4%); --bgColor7 : hsl(203,55.2%,30%); --bgColor8 : hsl(210,8.4%,21.2%); --bgColor9 : hsl(60,60%,37.6%); --bgColor10 : hsl(340,36%,26%); --bgColor11 : hsl(37,60%,36.8%); --bgColor12 : hsl(30,35.4%,21.2%); --bgColor13 : hsl(300,14.4%,32%); } html { font-size:var(--fontSize); line-height:1.5; } html:has(#popup_body) { font-size:calc( var(--fontSize) * 0.9 ); } /* line-height:1.3; */ h1 { font-size:3rem; margin:2rem 0 1rem 0; font-weight:bold; } h1::before { content: '..'; color:orange; background-color:orange; margin:0 1rem 0 0; padding-top:5px; } h2 { font-size:2rem; margin:1rem 0.5rem 0 0; font-weight:bold; border-left:#fd6767 1rem solid; padding-left:0.8rem; } h3 { font-size:1.7rem; margin:1.5rem 0 1rem; color:var(--fontColorButton); padding:5px 0 3px 10px; border-left:var(--fontColorButton) 10px solid; border-bottom:var(--fontColorButton) 2px solid; } h4 { font-size:1.5rem; margin:0.7rem 0; font-weight:bold; } h5 { font-size:1.2rem; margin:0.5rem 0 0.2rem; } h3~h3 { margin-top:4rem; } h3+h4 { margin-top:1rem; } h4~h4 { margin-top:1.5rem; } h4+h4 { margin-top:1rem; } A:link, A:visited, A:active, A:hover { color:var(--linkColor); } body { font-family:Pretendard, sans-serif; color:var(--fontColor); background-color:var(--backgroundColor); } body.theme-initialized { transition: background-color 0.3s ease, color 0.3s ease; } body.iframe_body { max-width:1200px; margin: 0px auto; } input { border:var(--border); background-color:var(--backgroundColor); width:100%; padding:2px 3px; transition:.1s; } /* vertical-align:middle; */ input[name="writer"] { width:auto; } input[name="pw"] { width:auto; } textarea, [contenteditable] { border:var(--border); background-color:var(--backgroundColor); width:100%; height:100px; font-size:var(--fontSize); resize:none; padding:10px; line-height:1.3; } textarea[name="content"] { height:400px; } textarea[name="temp_data"] { height:50px !important; } textarea.changetextarea { height:100px; } textarea.height300 { height:300px !important; } /* [contenteditable]:focus { outline: 0px solid transparent;background-color:var(--backgroundColorLight); border-color:var(--borderColorOn); } */ input:hover:not(:read-only), textarea:hover { border-color:var(--borderColorPopup); } input::placeholder, textarea::placeholder { color:var(--borderColor); } select { border:var(--border); background-color:var(--backgroundColor); color:var(--fontColor); margin:2px; height:24px; font-size:var(--fontSize); } select.noarrow { -webkit-appearance:none; -moz-appearance:none; appearance:none } option { padding:10px 0; } option:checked { background-color:lightgreen; } /* :selected 아님! */ fieldset { margin:10px 0; padding:5px 10px 10px; border:var(--border); border-radius:5px; } legend { padding:5px; color:var(--labelColor); font-weight:bold; text-transform:uppercase; } details { padding:1rem; background-color:var(--backgroundColorLight); border:1px solid var(--borderColor); border-radius: 0.5rem; margin:0; } details+details:not(.flex_50) { margin-top:5px; } summary::-webkit-details-marker { display: none; } summary { display: block; padding:0 0.5rem; font-size:1.1rem; font-weight:bold; cursor: pointer; position: relative; } summary::before, summary::after { content: ""; position: absolute; width:1rem; height:2px; background-color:#222; right:1rem; top:0.6rem; transition:.1s; } summary::after { transform: rotateZ(90deg); } details:not([open]) summary:hover::before { background-color:var(--fontColorNotice); transform: rotateZ(90deg); } details:not([open]) summary:hover::after { background-color:var(--fontColorNotice); transform: rotateZ(180deg); } details[open] > :nth-child(2) { margin-top:1rem; padding:1rem 0.5rem; border-top:solid 1px var(--borderColor); } details[open] summary { color:var(--fontColorLabel); } /* padding-bottom:1rem; border-bottom:solid 1px var(--borderColor); margin-bottom:1rem; */ details[open] summary:hover::before { background-color:var(--fontColorNotice); } details[open] summary::after { display: none; } td details { padding:0.5rem; } td details summary { font-size:1rem; } td details[open] > :nth-child(2) { margin-top:0.5rem; } details.min { padding:0.5rem; } details[open].min > :nth-child(2) { margin-top:0.5rem; padding:0.5rem 0.5rem; } details.min summary { font-size:0.9rem; } input[type=text]:not(:read-only):focus, input[type=password]:focus, textarea:focus { background-color:var(--backgroundColorLight); border-color:var(--borderColorOn); } input.focus { background-color:var(--backgroundColorLight); border-color:var(--borderColorOn); } input.error, label.error, select.error, textarea.error { color:black; background-color:yellow; border-color:red; } input[type=text].error:focus, input[type=password].error:focus, textarea.error:focus { color:black; background-color:yellow; border-color:red; } input[type=checkbox], input[type=radio] { width:1.2rem; height:1.2rem; margin:0 0.5rem 0 0.5rem; cursor:pointer;vertical-align:middle; } input[type=checkbox]:first-child, input[type=radio]:first-child { margin-left:0; } input[type=button] { width:auto; cursor:pointer; border-radius:3px; } input[type=submit] { cursor:pointer; } input[type=file] { padding:0; margin:2px 0; } input[type=text].hidden { font-color:var(--backgroundColor); width:auto; border-width:0; } label { cursor:pointer; } label+label { margin-left:8px; } label:hover { color:var(--labelColor); } label:has(input[type=radio]:checked), label:has(input[type=checkbox]:checked) { color:var(--labelColor); font-weight:bold; } input[type=text]:read-only { border-top-color:transparent; border-left-color:transparent; border-right-color:transparent; background-color:transparent; } /*input[type=text]:read-only:focus { border-color:transparent; } */ .selected { color:black; background-color:var(--labelColor); } .select_selected { color:black; background-color:var(--labelColor); } .select_preselected { color:black; background-color:yellow; } .text_bg { color:black; background-color:var(--labelColor); } /*검색어지정*/ .text_disabled { text-decoration:line-through; cursor:default;} /* opacity:0.5; 제거 . z-index 문제 */ .relative { position:relative; } .check_length { background-color:#1790d2; color:white; padding:3px 5px; } .noborder { border-width:0 !important; } .f_title { color:var(--fontColorTitle); font-weight:bold; font-size:1.2em; text-transform:uppercase; } .f_subtitle { color:var(--fontColorSubTitle); font-size:1.1rem; } .f_notice { color:var(--fontColorNotice); } .f_label { color:var(--fontColorLabel); } .f_fade { color:var(--fontColorDeep); font-size:0.9rem; margin-top:5px; font-weight:normal; vertical-align:baseline; } .f_etc { color:#7f7f7f; font-size:0.9rem;font-weight:bold; } .f_help { margin-left:5px; color:#EF5900; cursor:default; } .f_exp { color:red; font-weight:bold; } .f_point { background:url('/common/images/icon_won.gif') no-repeat scroll 0 0 transparent; width:11px; height:1px; padding-left:15px; font-weight:bold; color:#DD5656; vertical-align:middle; } .f_on { font-weight:bold; color:#8FE0ED; } .f_off { font-weight:bold; color:#ff5e37; } .f_alert { font-weight:bold; color:red; } .f_new { font-weight:bold; color:#F75C8C; } .f_modified { font-weight:bold; color:teal; } .f_updated { font-weight:bold; color:teal; } .glow { font-weight:bold; position:relative; background-color:var(--backgroundColorGlow) !important; } .glow::after { content:"";box-shadow: 0px 0px 5px 2px #00ff00;width:100%;height:100%;left:0;top:0;z-index:2; opacity:0.7;border:2px solid #00ff00; position:absolute; } .glow1 { font-weight:bold; position:relative; background-color:var(--fontColorLight) !important; color:var(--backgroundColorLight) !important; } .glow1::after { content:"";box-shadow: 0px 0px 5px 2px #ff0000;width:100%;height:100%;left:0;top:0;z-index:2; opacity:0.8;border:2px solid red; position:absolute; } .box { margin:5px 0; padding:5px; background-color:var(--backgroundColorLight); border:solid 1px var(--borderColor); } .roundbox { margin:5px 0; padding:10px; background-color:var(--backgroundColor); border:solid 1px var(--borderColor); border-radius:5px; } /* 2024-10-20 여기서부터 특정 디자인. 위는 기본 */ .table_title { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;margin-top:10px; font-size:1.3rem; font-weight:bold;color:var(--fontColorLight); background-color:var(--backgroundColorLight); padding:20px 20px 6px 20px;border-radius:5px 5px 0 0; } /* margin-top:10px; border-bottom:1px solid var(--lineColor); */ .table_title.dark { color:white;background-color:var(--backgroundColored1); } .table_title.small { font-size:1.1rem; padding:10px 10px 3px; } .table_title > :last-child:not(:first-child) { font-size:1rem; } .table_caption { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; font-size:1rem; font-weight:normal; border-top:1px solid var(--lineColor); background-color:var(--backgroundColorLight); padding:10px;border-radius:0 0 5px 5px; } .boxLayerTargetFrame+.table_title { margin-top:30px; } .writerbox+.table_title { margin-top:30px; } /* 2021-05-05 linkLayer에서만 쓰임 flex로 바꿀까?*/ .display_table { display:table; width:100%; border-top:solid 2px var(--backgroundColored1Hover); border-bottom:solid 2px var(--backgroundColored1Hover) } .display_table > div { display:table-row; border-bottom:solid 1px var(--labelColor); } .display_table > div+div { border-top:solid 1px var(--borderColor); } .display_table > div > div { display:table-cell; text-align:center; vertical-align:top; padding:5px 2px; } table { border-top:solid 2px var(--backgroundColored1Hover); border-bottom:solid 2px var(--backgroundColored1Hover); } table.list { } /* white-space: nowrap; */ table.list td[colspan="100%"] { white-space:wrap; } table .list_title { text-align:left;white-space:wrap; } table .col_shrink { width: 1px; white-space: nowrap; } /* table+table:not(.flex_50) { border-top-width:0; } */ table caption { margin:10px 10px 5px; caption-side:top; text-align:right; font-weight:bold; color:var(--fontColorNotice); } table > thead, table > tfoot { font-weight:bold; } table > thead > tr > th, table > tfoot > tr > th { text-transform:uppercase; background-color:var(--backgroundColorDeep); } table > thead > tr:has(+tr) > th { padding:7px 0; } table > thead > tr+tr > th { padding:7px 0; } table > tfoot > tr:has(+tr) > th { padding:7px 0; } table > tfoot > tr+tr > th { padding:7px 0; } table > tbody > tr > th { padding:10px 0; background-color:var(--backgroundColorLight); } table > tbody > tr { } /* position:relative; 왜 넣어둔거지 */ table tr.newline { border-top:solid 2px teal !important; } table:not(.table_border) tr { border-top:solid 1px var(--borderColor); } /* +tr */ /* table tbody tr:last-child { border-bottom-width:0; } */ table tr > th.order_on { color:var(--fontColorNotice); } table th { padding:1.1rem 0.2rem; } table td { padding:0.8rem 0.2rem; } table td > * { vertical-align:middle; } table td.notice { color:black; background-color:yellow; font-weight:bold; border:solid 2px #00B050; } /* 테이블 셀 강조용 */ table .th_order:hover { background-color:var(--backgroundColored1Hover); color:var(--backgroundColorLight); } /* table tr:has(> td > .hide) { border-top-width:0; } table td:has(> .hide) { padding:0; } */ table.noborder { border-width:0; } table.noborder tr { border-width:0; } table.noborder th { background-color:unset; } table.form > tbody > tr > th:nth-child(2n+1) { width:150px; } table.form > tbody > tr > td:nth-child(2n) { text-align:left; } table.form > tbody > tr > td { line-height:1.5; } table.form > tbody > tr > td:has(> table) { padding:0; } table.form > tbody > tr > td:has(> details) { padding:0; } table.form > tbody > tr > td:has(textarea:only-child) { padding:1px; } table.form > tbody > tr > th:has(.btn) { padding: 1px; } table.form tr:hover { background-color:unset; } table.form td input { padding:5px; } table.form td input[type='file'] { font-size:0.9rem; padding:0; } .tr_glow > tbody > tr:hover { box-shadow: 0px 0px 20px #00ff24; transition:.1s; z-index:93; position:relative; } /* background-color:var(--backgroundColorLight); */ /* 내부에 textarea focus 이면 */ .tr_glow > tbody > tr:has(:focus) { box-shadow: 0px 0px 20px #00ff24; z-index:1; } .form tr:has(:focus) { box-shadow: 0px 0px 20px #00ff24; position:relative; } /* .table th:last-child { border-right-width:0; } */ /* .table tr:nth-child(even) { background-color:var(--backgroundColorLight); } /* colgroup 색상을 잡아먹는다 */ table.min thead th, table.min tfoot th { padding:6px 1px; } table.min tbody th, table.min tbody td { padding:5px 1px; } table.minimum thead th, table.minimum tfoot th { padding:5px 0; } table.minimum tbody th, table.minimum tbody td { padding:3px 0; } table.sticky_head thead { position:sticky;z-index:3;top:0; } /* z-index: tr_glow가 111; backdrop-filter: blur(5px); */ table.sticky_head thead tr { box-shadow:inset 0px -1px #ccc; } #popup_body table th, #popup_body table td { padding:5px 2px; } #popup_body table > tbody > tr > th { background-color:unset; } .table_border { border-width:0; } .table_border tr+tr { border-width:0; } .table_border th, .table_border td { border:var(--border); padding:10px 1px; } .table_border .nbt { border-top-width:0; color:red; } .table_border .nbr { border-right-width:0; } .table_border .nbl { border-left-width:0; } .table_border .nbb { border-bottom-width:0; } .table_border .alert { color:white; background-color:red; font-weight:bold; } .table_border .sum { color:black; background-color:yellow; font-weight:bold; border:solid 2px #00B050; } .table_border.min th, .table_border.min td { border-width:1px; } .reply { display: inline-block; width: 20px; background-image: url(/common/images/icon_reply.gif); background-position: right center; background-repeat: no-repeat; margin-right:5px; } .scroll_table { width:100%; white-space:nowrap; overflow-x:auto; } /* div */ .scroll_table th:first-child { position:sticky; left:0; z-index:99; } .scroll_table td:first-child { position:sticky; left:0; background-color:var(--backgroundColorLight); z-index:99; } /* 테이블 colspan 용 */ .col_color0 { background-color:var(--backgroundColorLight); } .col_color1 { background-color:var(--backgroundColorLight); } .col_color2 { background-color:var(--backgroundColorDeep); } /* flex */ .flex_container { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;align-items:stretch; gap:10px; padding:10px 0; } .flex_container > * { flex-grow: 1; flex-basis:auto; flex-shrink:1; } /* 왜 0%였지 */ .flex_100 { flex-basis:100%; } .flex_90 { flex-basis:calc( (90% - 10px) ); } .flex_80 { flex-basis:calc( (100% - 10px)*4/5 ); } /* 75 66은 특별한 경우만 */ .flex_75 { flex-basis:calc( (100% - 10px)*3/4 ); } /* 75 66은 특별한 경우만 */ .flex_66 { flex-basis:calc( (100% - 10px)*2/3 ); } .flex_60 { flex-basis:calc( (100% - 10px)*3/5 ); } .flex_50 { width:calc( (100% - 10px)/2 ); flex-grow:0; } /* gap 수치 계산 flex-basis , chart 100%먹어서 강제 지정*/ .flex_50 { page-break-inside: avoid; } .flex_40 { flex-basis:calc( (100% - 30px)*2/5 ); } .flex_33 { flex-basis:calc( (100% - 20px)/3 ); } .flex_25 { flex-basis:calc( (100% - 30px)/4 ); } .flex_20 { flex-basis:calc( (100% - 40px)/5 ); } .flex_10 { flex-basis:calc( (100% - 90px)/10 ); } .flex_11 { flex-basis:calc( (100% - 80px)/9 ); } .select_box { display:inline-block; position:relative; width:; padding-right:30px; height:24px; margin:2px; vertical-align:bottom; border:var(--border); color:var(--fontColor); background-color:var(--backgroundColor); font-weight:normal; line-height:unset;} .select { padding:2px 3px 2px; padding-right:30px; width:calc( 100% + 30px); height:100%; cursor:pointer; overflow: hidden; white-space: nowrap; } /* text-overflow: ellipsis; */ .select_box ul li:first-child:before, .select:before { content:'▼'; color:var(--backgroundColorDeep); position:absolute; margin-top:auto; right:3px; } .select_box ul { position:absolute; max-height:600px;overflow-y:auto; top:-2px; left:-2px; border:var(--border); cursor:pointer; background-color:var(--backgroundColor); z-index:95;} .select_box ul li { padding:2px 30px 1px 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position:relative; } .select_box ul li:first-child { padding:2px 15px 1px 2px; font-weight:bold; } .select_box ul li.selected { background-color:#f9bdbb;} .select_box ul li.selected:after { content:'✓'; color:red; position:absolute; top:0; left:2px; } .select_box ul li:hover{ background-color:var(--backgroundColored1Hover); } /* .select_box { display:inline-block; position:relative; width:200px; height:22px; margin:0 2px; } /* multiple용 */ .select_box select { position:absolute;top:-2px; width:100%; height:100%; margin:0; } .select_box select.show { height:240px; z-index:1; } */ /* #paging { margin:20px 0; padding:5px; text-align:center; } */ #paging { margin:0; padding:0; text-align:center; } #paging a { display:inline-block; min-width:40px; border:solid 2px var(--borderColor); padding:6px; color:var(--fontColor); text-align:center; } #paging a+a { margin-left:-2px; } #paging a.paging_now { background-color:var(--fontColorDeep); color:var(--backgroundColorLight); } #paging a:hover, #paging a.paging_first:hover, #paging span.paging_last:hover { background-color:var(--backgroundColorDeep); color:var(--fontColorDeep); } /* #paging span { display:inline-block; min-width:40px; border:solid 1px var(--borderColor); padding:4px; margin:0 1px;background-color:var(--backgroundColorLight) } #paging span.paging_now { border:solid 1px var(--borderColorOn); background-color:var(--backgroundColorDeep); color:var(--fontColorDeep); } #paging span.paging_first, #paging span.paging_last { width:auto; } #paging span.paging_first:hover, #paging span.paging_last:hover { background-color:var(--backgroundColorDeep); color:var(--fontColorDeep); } .paging_prev { background-color:var(--backgroundColorLight); } .paging_next { background-color:var(--backgroundColorLight); } */ .paging_prevon { background-color:var(--backgroundColorLight); font-weight:bold; color:var(--labelColor); } .paging_nexton { background-color:var(--backgroundColorLight); font-weight:bold; color:var(--labelColor); } .cur_hand { cursor:pointer; } .text_cut { width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; text-align:left; } /* new를 붙일려면. 고쳐야하는데 말이지.기본 좌측정렬*/ .header_title { display:flex; justify-content:space-between;align-items:end;padding:15px 0; } /* margin-top:10px; */ #popup_body .header_title { padding-top:0; margin-top:0; } .breadcrumb { margin: 0 0 0.8rem; font-size:1rem; color: var(--fontColorLight); } .breadcrumb ul { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 0; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before { content: "›"; margin: 0 9px; color:var(--lineColor); font-size:1.2rem; } .breadcrumb a { color:var(--fontColorDeep); text-decoration: none; transition: color 0.2s ease; } .breadcrumb a:hover { color:var(--fontColorLight); text-decoration: underline; } .breadcrumb li[aria-current="page"] { color:var(--fontColor); font-weight:500; } .header, .header_btn { display:flex;justify-content:space-between;align-items:end;padding:15px 5px; } /* text-align */ .header a, .header_btn a { color:var(--fontColorButton); font-size:1.1rem; font-weight:bold; text-transform:uppercase; } .footer, .footer_btn { display:flex; justify-content:space-between;align-items:end;padding:15px 5px; } .footer a, .footer_btn a { color:var(--fontColorButton); font-size:1.1rem; font-weight:bold; text-transform:uppercase; } #popup_body .header { margin-top:0; padding-top:0; padding-bottom:5px; } #popup_body .footer_btn { padding-bottom:0; } .left { float:left; } .right { float:right; } .clear:after {content:" "; display:block; clear:both; } .category_box { margin:10px 0;font-size:1.1rem;line-height:2.5; } .category_box > span { background-color:var(--backgroundColorLight);border-radius:25px;cursor:pointer;display:inline-block;margin:2px;padding:0 12px;text-align:center;transition:background-color .25s; } .category_box > span:last-child { margin-right:0; } .category_box > span.on { background-color:#35c5f0; color:white; } .category_box > span:hover:not(.on) { background-color:var(--backgroundColorDeep); } .category_box > span:active { position: relative; top:2px; } .category_box.min { margin:0; display:flex; color:var(--fontColorDeep); font-size:1.1rem;line-height:2; } .category_box.min > :first-child { flex-basis:100px; } .category_box.min > :last-child { flex-shrink:1; display:flex; flex-wrap:wrap; justify-content: space-between; } .category_box.min > :last-child::after { content:""; flex-grow: 1; } .category_box.min > :last-child span { padding:0 0.5rem;cursor:pointer; } .category_box.min > :last-child span.on { color:#35c5f0; border-bottom:2px solid #35c5f0; } .category_box.min > :last-child span:active { position: relative; top:2px; } .category_box.min > :last-child span:hover:not(.on) { color:#35c5f0; font-weight:bold; } /* .search_box { display:; line-height:1.5;font-weight:bold; padding:1rem 1.5rem;border-radius:2rem; background-color:var(--backgroundColorLight); } round-box */ .search_box { font-weight:bold; } .search_form { display:inline-block; } .search_icon { cursor:pointer; } /* svg */ .search_form span { display:inline-block; cursor:pointer; margin:0 3px; } .search_form input { width:250px; margin:0 3px; padding:5px; } .highlight { font-weight:bold; background-color:#ffff00; } .boxLayerFrame { border-bottom:solid 2px var(--backgroundColored1); margin:1rem 0 0; } .boxLayerFrame:after { content:" "; display:block; clear:both; } .boxLayerFrame > * { cursor:pointer; min-width:80px; background-color:var(--backgroundColorLight); padding:12px 5px 5px; float:left; text-align:center; font-weight:bold; border-radius:5px 5px 0 0; } .boxLayerFrame > *:hover { background-color:var(--backgroundColored1Hover); color:var(--backgroundColor); } .boxLayerFrame > *.boxLayerMenuOn { background-color:var(--fontColor); color:var(--backgroundColorLight); } .boxLayerTargetFrame > * { page-break-before:always; page-break-after:auto; page-break-inside:auto; } .boxLayerTargetFrame > :first-child { page-break-before:auto; } .newpage { page-break-before:always; margin-top:30px; } .folding_box { width:100%; margin:5px 0; color:white; background-color:var(--backgroundColored1); border:solid 1px var(--borderColor); } .folding_head { height:13px; padding:5px; } .folding_content { padding:5px; border-top:solid 1px var(--borderColor); } .folding { cursor:pointer; } .folding_button { cursor:pointer; } .folding_unfold { position:relative; } .folding_unfold:after { content:'▲'; font-size:0.9rem; position:absolute; right:0; } .folding_fold { position:relative; } .folding_fold:after { content:'▼'; font-size:0.9rem; position:absolute; right:0; } .prevnext { font-size:1rem; border-top:solid 1px var(--lineColor); border-bottom:solid 1px var(--lineColor); margin:2rem 0 1.5rem; } /* margin-top:20px; padding:10px; */ .prevnext li { padding:1rem 5px; border-top:solid 1px var(--backgroundColorLight); } .prevnext li:first-child { border-top:0; } .prevnext li > :first-child { display:inline-block; min-width:65px; text-align:right; margin-right:20px; } /* up down button */ .warning:not(.ico) { margin:5px 0; padding:10px; border:solid black 2px; background-color:red; color:yellow; font-weight:bold; } .noticebar { margin:5px 0; padding:10px; background-color:var(--backgroundColored1); color:white; font-weight:bold; border:var(--border); } .noticebar1 { margin:5px 0; padding:10px; background-color:var(--backgroundColored2); color:white; font-weight:bold; border:var(--border); } .searchbar { margin:5px 0; padding:10px; gap:3px; display:flex; background-color:var(--backgroundColored1); color:white; font-weight:bold; flex-wrap:wrap; border-radius:5px; } .searchbar > :nth-child(odd) { flex-basis:100px; text-align:right; padding-top:2px; } .searchbar > :nth-child(even) { flex-basis:calc( 100% - 103px ); } .searchbar > :nth-child(even) {display:flex; flex-wrap:wrap; } .searchbar:has(+ .searchbar) { margin-bottom:0; padding-bottom:0; border-radius:5px 5px 0 0; } .searchbar + .searchbar { margin-top:0; padding-top:0; border-radius:0 0 5px 5px; } .fade { transition:all 0.2s ease-in-out; overflow:hidden; } .fade.hide { display:block !important; opacity:0; height:0 !important; transition-behavior:allow-discrete; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; } /* display:none transition end 이벤트 발생안함 transition-behavior:allow-discrete;*/ .fade:not(.hide) { opacity:1; height:auto; height: calc-size(auto, size); @starting-style { opacity:0; height:0; } } flex_container.fade.hide { display:flex !important; } .searchbar.fade.hide { display:flex !important; } .category_box.min.fade.hide { display:flex !important; } flex_container.fade:not(.hide) { display:flex !important; } .searchbar.fade:not(.hide) { display:flex !important; } .category_box.min.fade:not(.hide) { display:flex !important; } .searchbar:not(.hide) { overflow:unset; } /* 가로 */ .fade.h.hide { opacity:0; height:unset !important; width:0 !important; flex-basis:0 !important; transition-behavior:allow-discrete; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } /* display:none transition end 이벤트 발생안함 transition-behavior:allow-discrete;*/ .fade.h:not(.hide) { opacity:1; height:unset; width:auto; width: calc-size(auto, size); @starting-style { opacity:0; height:unset; width:0; flex-basis:0 !important; } } /* .searchbar { transition:all 0.5s ease-in-out; overflow:hidden; } .searchbar.hide { opacity:0; height:0; display:flex !important; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } .searchbar:not(.hide) { opacity:1; height:auto; height: calc-size(auto, size); display:flex !important; @starting-style { opacity:0; height:0; } } .category_box.min { transition:all 0.5s ease-in-out; } .category_box.min.hide { display:flex !important; opacity:0; height:0; transform:scale(1, 0); transition-behavior:allow-discrete; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } .category_box.min:not(.hide) { display:flex !important; opacity:1; transform:scale(1, 1); height:auto; height: calc-size(auto, size); @starting-style { opacity:0; transform:scale(1, 0); height:0; } } */ /* .searchbar { margin:5px 0; padding:10px; background-color:var(--backgroundColored1); color:white; font-weight:bold; border:var(--border); } .searchbar .minwidth:not(.btn) { min-width:110px; } */ .alert { color:white !important; background-color:var(--backgroundColorRed) !important; font-weight:bold; } .alert_pink { color:white !important; background-color:var(--backgroundColorPink) !important; font-weight:bold; } #popup_body { background-color:var(--backgroundColorPopup); padding:15px; } /* border:solid 4px var(--borderColor); */ #popup_body .table_title { margin-top:0; } #popup_body .table_caption { margin-top:0; } #popup_body .changebg_focus { border-color:white; } /* 이자식 왜 안되는겨 */ #popup_body .changeborder_focus_c { border-color:#9D4664; } #popup_body .changetableline_mouseover { background-color:white; } #hidden_frame { width:0; height:0; border:0; position:absolute; visibility:hidden; } /* 추가 레이어들 */ #moving_layer { position:absolute; left:0; top:50px; min-width:100px; max-width:500px; padding:10px; border:var(--border) ; color:yellow; background:rgba(0,0,0,0.8); text-align:left; z-index:100; border-radius:5px; box-shadow:3px 3px 5px #4d4141; } #film_layer { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:95; } #popup_layer { position:absolute; left:50%; transform: translateX(-50%); z-index:97; border:var(--border); border-radius:15px; } #popup_image { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index:98; border:solid var(--borderColorPopup) 5px; border-radius:5px; cursor:pointer; max-width:100%; } #alert_layer { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:101; } #processing_layer { position:fixed; left:0; top:0; width:100%; height:100%; z-index:101; } #alert_layer_box { min-width:400px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:96; border:solid 5px var(--backgroundColorDeep); } #alert_layer_box #alert_layer_title { background-color:#006b38; color:white; font-size:1.5rem; padding:20px; } #alert_layer_box #alert_layer_title :first-child { float:left; } #alert_layer_box #alert_layer_title :last-child { float:right; cursor:pointer; } #alert_layer_box #alert_layer_title :last-child:hover { color:var(--fontColorNotice); } #alert_layer_box #alert_layer_content { font-size:1.2rem; background-color:white; color:#333333; padding:20px; overflow:auto; min-height:200px; max-height:400px; } #alert_layer_box #alert_layer_btn { text-align:center; background-color:white; padding:20px; } #processing_layer > * { position:absolute; height:100px; width:100px; left:50%; top:50%; border-radius:100%; border:3px solid transparent; border-color:transparent var(--fontColorDeep) transparent var(--fontColorDeep); animation:rotate 1.5s linear 0s infinite normal; transition:all 0.5s ease-in-out; transform: translate(-50%, -50%); } #processing_layer.stop > * { animation:unset; } #processing_layer > * div:first-child { position:absolute; top:50%; width:100px; color:var(--fontColor); font-size:12px; font-weight:normal; text-align:center; text-transform:uppercase; animation: blink1 2s linear 0s infinite normal;transform: translate(0, -50%) } #notice_layer { position:fixed; left:0; bottom:0; width:100%; text-align:center; font-weight:bold; color:orange; border:solid 3px lightgreen; padding:3px 0;background-color:rgba(0,0,0,1); z-index:100; } #link_layer { position:absolute; font-weight:normal; background-color:var(--backgroundColorLight); border:solid 5px var(--borderColor); line-height:1.5rem; z-index:95; box-shadow:3px 3px 5px var(--borderColor); border-radius:15px; } #link_layer > * { padding:10px; } #link_layer .header { font-weight:bold; background-color:var(--backgroundColorDeep); border-radius:10px 10px 0 0; margin-top:0; margin-bottom:0; } #link_layer .menu { color:var(--linkColor); } #link_layer .header div+div { cursor:pointer; } #link_layer :nth-child(2) div+div { cursor:pointer; } .linkLayer { font-weight:bold; color:var(--fontColorButton); position:relative; } .linkLayer:hover::after { content: ""; box-shadow: 0 2px 0 0 #35c5f0; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; opacity: 0.7; border-bottom: 2px solid #35c5f0; position: absolute; } .linkLayer.student_idx { color:teal; } /* 2025-08-30 btnClickList search */ .list_search { color:#fd6767; cursor:pointer; } .list_search:not(:has(.icon)) { position:relative; } .list_search:not(:has(.icon)):hover::after { content: ""; box-shadow: 0 2px 0 0 #35c5f0; width: 100%; height: 100%; left: 0; bottom:-5px; z-index: 1; opacity: 0.7; border-bottom: 2px solid #35c5f0; position: absolute; } #search_layer { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:99; } #search_layer > :first-child { width:400px; padding:10px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:96; border:solid 5px var(--backgroundColorDeep); } #search_layer > :first-child .flex_20 { text-align:center; } /* #search_layer { width:400px; position:absolute; } #search_layer .flex_20 { text-align:center; } */ .user_id { font-weight:bold; color:#4b72a5; } .minwidth { display:inline-block; min-width:65px; text-align:right; padding-right:5px; } .minwidth.big { min-width:85px; } .btn { text-align:center; text-transform:uppercase; display:inline-block; color:var(--fontColor); background-color:var(--backgroundColor); border:var(--border);border-radius:5px;margin:0 2px; padding:2px 5px;cursor:pointer; font-size:1rem; } /* font-weight:bold; vertical-align:middle; */ .btn A:link, .btn A:visited, .btn A:active { color:unset; } .btn.big { border:var(--border);border-radius:0.5rem; padding:10px 20px; margin:1px; font-size:1.1rem; font-weight:bold; } .btn.small { text-transform:unset; font-size:0.9rem;letter-spacing:0;font-weight:normal;border-width:1px; padding:1px 5px; vertical-align: middle; } #popup_body .btn.big { padding:10px; margin:1px; font-size:1rem; } .btn:active { position: relative; top:2px; } .icon { display:inline-block;font-size:0.9rem;letter-spacing:0;font-weight:normal;border:solid 1px var(--borderColor);border-radius:2px;margin:0 3px;padding:1px 5px;background-color:var(--backgroundColor);color:var(--fontColor); vertical-align: middle; } .icon.big { padding:2px 5px; font-size:1.1rem; } .btn:hover:not(.lightgreen):not(.blue) { background-color:#339beb; color:white; font-weight:bold; } .btn.on, .icon.on { background-color:#42a1ff !important; color:white !important; } .icon.new { background-color:rgba(255, 64, 64, 1); color:white; } .icon.updated { background-color:rgba(40, 148, 237, 1); color:white; } .icon.delete, .icon.fulldelete { background-color:rgba(255, 64, 64, 1); color:white; } .icon.notice { background-color:rgba(40, 148, 237, 1); color:white; } .icon.minwidth { min-width:25px; text-align:center; cursor:pointer; } .icon.grade { font-weight:bold; padding:2px 10px; font-size:0.9rem; background-color:#146ec7; color:white; } .icon.type0 { min-width:50px; text-align:center; border-radius:5px; font-weight:bold; color:var(--backgroundColor);background-color:var(--borderColor); } .icon.type1 { min-width:50px; text-align:center; border-radius:5px; font-weight:bold; padding:3px 5px;color:#0394db;background-color:#c9e7f5; } .icon.type2 { min-width:50px; text-align:center; border-radius:5px; font-weight:bold; padding:3px 5px;color:#f42a2a;background-color:#fee9e9; } .icon.type3 { min-width:50px; text-align:center; border-radius:5px; font-weight:bold; padding:3px 5px;color:#40a76f;background-color:#e8fff3; } .blue { background-color:#146ec7; color:white; } .blue:hover { background-color:#339beb !important; } .red { background-color:#ff0000 !important; color:white !important; } .red:hover { background-color:#ff5858 !important; } .orange { background-color:orange; color:white; } .orange:hover { background-color:#ffc65d !important; } .lightgreen { background-color:#009d54; color:white !important; border-color:#a1e3a1; } .lightgreen:hover { background-color:#17ba51; } .ico { background:no-repeat scroll 0 0 transparent; margin:0 4px; vertical-align:middle; display:inline-block; font-size:0; } .ico.blind { background:url('/common/images/icon_blind.gif'); width:16px; height:16px; } .ico.locked { background:url('/common/images/icon_locked.gif'); width:16px; height:16px; } .ico.new { font-weight: bold; color: var(--fontColorNotice); vertical-align: middle; font-size: 0.9rem; animation: blink 1s linear infinite; } .ico.updated { font-weight: bold; color: var(--fontColorLabel); vertical-align: middle; font-size: 0.9rem; animation: blink 1s linear infinite; } .ico.new1 { background:url('/common/images/icon_new.gif'); width:11px; height:12px; } .ico.music { background:url('/common/images/icon_music.gif'); width:16px; height:16px; } .ico.hidden { background:url('/common/images/icon_hidden.gif'); width:16px; height:16px; } .ico.deleted { background:url('/common/images/icon_deleted.gif'); width:16px; height:16px; } .ico.bomb { background:url('/common/images/icon_bomb.gif'); width:16px; height:16px; } .ico.photo { background:url('/common/images/icon_photo.gif'); width:16px; height:16px; } .ico.warning { background:url('/common/images/icon_warning.gif'); width:16px; height:16px; } .ico.file { background:url('/common/images/icon_file.gif'); width:16px; height:16px; } .ico.won { background:url('/common/images/icon_won.gif'); width:11px; height:11px; } .ico.email { background:url('/common/images/icon_email.gif'); width:15px; height:15px; } .ico.homepage { background:url('/common/images/icon_homepage.gif'); width:15px; height:15px; } /* 게시판 이미지 링크용 2014-10-31 */ .insertimage { margin:5px 0; cursor:pointer; } .exif { border:solid 2px #808080; } .writerbox { margin-top:20px; clear:both; padding:5px 0; font-size:11px; line-height:1.5; color:var(--fontColorLight); text-align:right; text-transform:uppercase; } .avatarbox { display:inline-block;position:relative; border:solid 5px var(--borderColor); width:110px; height:130px; } .avatarbox > img { position:absolute; top:0; left:0; bottom:0; right:0; } /* change XXX .js 시리즈 2011-02-08*/ .changetableline_focus { background-color:var(--backgroundColorLight); } .changetableline_mouseover { background-color:#0D2745; } /*EFF7FF*/ /* 2014-06-17 수정필요 안쓰임 */ .changeheight_focus { height:300px; } .exif { padding:5px; color:#666666; background-color:#eeeeee; } .exifsimple { margin-bottom:5px; color:#666666; text-align:center; font-family:tahoma; font-size:11px; } .youtube { padding:5px; height:500px; margin:10px 0; background-color:#eeeeee; border:solid 1px var(--borderColor); text-align:center; } /* 2022-12-12 */ /* #error_layer { background-color:white; color:black; } */ #error_layer_str { max-width:95%;word-break: break-all; } #mouseposition_Layer { background-color:var(--backgroundColorDeep);border:var(--border); position:absolute; right:0; bottom:0;z-index:99; width: max-content; height: max-content; padding:10px; border-radius:10px; } /* 2019-04-19 stateColor */ /* colgroup 색상을 잡아먹는다 */ .state0 { color:var(--fontColorDeep);background-color:var(--backgroundColorLight); } .state1 { background-color:var(--backgroundColor); } .state2 { background-color:var(--backgroundColorDeepAlpha); } .state3 { background-color:var(--backgroundColorDeep); } .state4 { background-color:; } .statebg0 { background-color:#cccccc; } .statebg1 { background-color:#dddddd; } .statebg2 { background-color:#eeeeee; } .statebg3 { background-color:; } .statebg4 { background-color:; } .btn.gradient { background-image: linear-gradient(to right, #52A0FD 0%, #00e2fa 51%, #52A0FD 100%); background-size:200% auto; color:white; transition:0.2s; } .btn.gradient:hover { background-position:right center; } .on { font-weight:bold; color:var(--fontColorNotice); } #upload_file_box { padding:0; } /* content comment */ .comment { margin-top:15px; padding:10px; page-break-before:always; } .comment_header { margin-top:10px; padding:5px 0; text-align:right; } #comment_list { } #comment_list .comment_reply { background-image:url(/common/images/icon_comment_reply.gif); background-position:left 20px;background-repeat:no-repeat;padding-left:35px; } /* comment 각내용 */ .comment_box { margin-bottom:40px; padding:5px; } /* page-break-inside:avoid;*/ .comment_box .comment_writer0 { color:#808080; } /* deleted */ .comment_box .comment_writer1 { font-weight:bold; color:#054969; } /* guest */ .comment_box .comment_writer2 { font-weight:bold; color:#323232; } /* user */ .comment_box .comment_date { color:#a0a0a0; } .comment_box .comment_content { padding-top:10px; clear:both; border-top:solid 1px #dddddd; margin-bottom:20px;} #comment_form { margin-bottom:20px; border-top:solid 1px red; } #comment_form li { margin:5px 0; } #comment_form textarea { height:200px; } /* #comment_form { margin-bottom:20px; border-top:solid 1px red; } #comment_form li { position:relative; line-height:1.6; margin:5px 0; padding-left:110px; } #comment_form li b { width:100px; position:absolute; left:0; padding-right:10px; text-align:right; display:inline-block; line-height:1.6; } #comment_form li b .minwidth { min-width:100px; } */ /* 2021-05-21 */ .help { position:relative; } .help:after { content:"？";font-size:1.2rem; font-weight:bold; color:orange; width:10px; position:absolute; top:0; right:0; } table .help:after { top:3px; right:3px; } .required { position:relative; color:var(--fontColorNotice); } .required:after { content: "★"; font-weight:bold; color:red; width: 10px; position: absolute; right:5px; line-height:1.6; } .alignleft1 tbody td:nth-child(1) { text-align:left; } .alignleft2 tbody td:nth-child(2) { text-align:left; } .alignleft3 tbody td:nth-child(3) { text-align:left; } .alignleft4 tbody td:nth-child(4) { text-align:left; } .verticalbar > :nth-child(n+1) { display:inline-block; float:left; padding-left:1rem; padding-right:1rem; position:relative; } .verticalbar > :nth-child(n+2):before { content: '|'; color:var(--backgroundColorDeep); position:absolute; left:-0.1em; } .verticalbar > :first-child{ margin-left:0; padding-left:0; } .verticalbar > :last-child{ margin-right:0; padding-right:0; } .verticalbar:after {content:" "; display:block; clear:both; } .verticalbar.full > :nth-child(n+2):before { content:" "; height:100%; border-left:solid 2px var(--backgroundColorLight); } .chart { height:490px; } .flex_100.expand_box+.flex_100.expand_box .chart { height:520px; } @keyframes rotate { 0% { transform:translate(-50%, -50%) rotate(0deg); } 100% {transform:translate(-50%, -50%) rotate(360deg); } } @keyframes blink { 0% { opacity:1; } 100% { opacity:0.3; } } @keyframes blink1 { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .graph_box { display:flex; flex-direction:column; gap:10px; font-weight:bold; } .graph_box > * { flex-grow:1; flex-basis:100%; display:flex; flex-direction:row; align-items:center; gap:5px; } .graph_box .gTerm { flex-basis:150px; text-align:right } .graph_box .gBar { flex-grow:1; background-color:var(--backgroundColorLight); border-radius:0 5px 5px 0; position:relative; } .graph_box .gBar > div { border:var(--border); border-radius:0 5px 5px 0; padding:3px 5px; text-align:right; } .graph_box .gBar > span { position:absolute; left:5px; top:50%; transform: translate(0, -50%); } .graph_box .gCnt { flex-basis:100px; } .graph_box.vGraph { flex-direction:row; justify-content:space-between; } .graph_box.vGraph > * { flex-basis:auto; flex-direction:column-reverse; text-align:center; } .graph_box.vGraph .gTerm { flex-basis:auto; white-space: nowrap; } .graph_box.vGraph .gBar { flex-basis:300px; width:100%; position:relative; border-radius:5px 5px 0 0; } .graph_box.vGraph .gBar > div { width:100%; position:absolute; top:unset; bottom:0; text-align:center; border-radius:5px 5px 0 0; } .graph_box.vGraph .gBar > span { bottom:0; left:50%; top:unset; right:unset; transform: translate(-50%, 0); } .graph_box.vGraph .gCnt { flex-basis:auto; } .gLine_box { display:flex; flex-direction:column; gap:5px; font-weight:bold; } /* .gLine_box > * { flex-grow:1; flex-basis:100%; display:flex; flex-direction:row; align-items:center; gap:5px; } */ .gLine { flex-grow:1; flex-basis:100%; display:flex; flex-direction:row; align-items:center; gap:5px; } .gLine.on { color:unset; } .gLine .gTerm { flex-basis:15%; text-align:right; flex-shrink:1; } .gLine .gBar { flex-grow:1; border-radius:0 10px 10px 0; position:relative; } .gLine .gBar > div { border:solid 2px var(--borderColor); border-radius:0 5px 5px 0; padding:3px 5px; text-align:right;white-space: nowrap; } .gLine .gBar > div:first-child:has(+ div) { position:absolute; } /* z-index:-1; */ .gLine .gBar > div.noBar { border-radius:0;padding:3px 0;border-width:2px 0; } .gLine .gBar > span { position:absolute; left:5px; top:50%; transform: translate(0, -50%); } .gLine .gCnt { flex-basis:60px; text-align:center; flex-shrink:1; } .flex_container .flex_container .gLine { font-weight:normal; } .flex_container .on { color:teal; } .flex_container:not(.hide)+.gLine { margin-top: 10px; } .gLine_box > .flex_container:not(.hide)+.gLine { margin-top: 20px; } .percentBar { position:relative; } .percentBar > div { opacity: 1; z-index: -1; border-radius: 0px 5px 5px 0px; position: absolute; top: 0px; bottom: 0px; } /* 배경색 잡아먹힘 */ details .percentBar > div { z-index:unset; } details .percentBar > span { position:relative; } /* 여기 저기 */ .inline180 { display:inline-block; width:180px; } .inline100 { display:inline-block; width:100px; } .inline120 { display:inline-block; width:120px; } .inline150 { display:inline-block; width:150px; } .inline200 { display:inline-block; width:200px; } .inline250 { display:inline-block; width:250px; } .inline90 { display:inline-block; width:90px; } .inline80 { display:inline-block; width:80px; } .inline70 { display:inline-block; width:70px; } .inline { display:inline-block; width:auto; min-width:100px; } /* 2024-10-08 */ .index { counter-reset:index; } .index_item::before { counter-increment: index; content: counters(index, '.') '. '; } /* hover 이펙트들을 만들어볼까? 2024-04-16 */ .hover { border-color:var(--borderColorOn) !important; } .hover:hover { transition: all 0.1s; } .hover_up:hover { transform: translateY(-10px); transition: all 0.1s; } .hover_shadow:hover { box-shadow: 5px 5px 5px var(--backgroundColorDeep); } .hover_fade:hover { opacity:0.1; transition: .1s; } .hover_glow:hover { box-shadow: 0px 0px 10px #ffee10; transition: .2s; } .hover_border:hover { border-color:var(--borderColorPopup) !important; } .hover_ring { position:relative; } .hover_ring:hover::after {pointer-events: none; content:""; width:30px; height:30px; border-radius:100%; border:6px solid #00ffcb; position:absolute; z-index:; top:50%; left:50%; transform:translate(-50%, -50%); animation: ring 1s infinite; } @keyframes ring { 0% {width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } .focus_glow:has(:focus) { box-shadow: 0px 0px 20px #00ff24; position:relative; } /* 취소선 */ .cancelline { background:repeating-linear-gradient( 180deg, red 0%, red 90% ); background-size: 100% 2px; background-position: center; background-repeat: no-repeat; } /* 이미지 오버 2023-01-31 */ figure { display:block; overflow:hidden; position:relative; border:var(--border); display:table; } /* display: table; - width문제 처리용 */ figure img { transition:0.3s; } figure:hover img { transform: scale(1.2); } figure figcaption { width:100%; padding:5px; position:absolute; bottom:0; color:#e0e0e0; text-align:center; background-color:rgba(0,0,0,0.5); } /* 검은배경 */ figure figcaption.type1, figure figcaption.type2, figure figcaption.type3 { height:100%; opacity:0; transition:0.3s; } figure:hover figcaption.type1, figure:hover figcaption.type2, figure:hover figcaption.type3 { opacity:1; } figure figcaption.type1 span, figure figcaption.type2 span, figure figcaption.type3 span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } /* 테두리 */ figure figcaption.type2:after{ content: ''; display: block; width:calc(100% - 40px); height:calc(100% - 40px); border:1px solid white; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } /* 수직/수평선 */ figure figcaption.type3:before{ content: ''; display: block; width:calc(100% - 40px); height:calc(100% - 40px); border-top:1px solid white; border-bottom:1px solid white; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transition:0.3s; } figure figcaption.type3:after{ content: ''; display: block; width:calc(100% - 40px); height:calc(100% - 40px); border-left:1px solid white; border-right:1px solid white; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transition:0.3s; } figure:hover figcaption.type3:before { height:calc(100% - 80px); } figure:hover figcaption.type3:after { width:calc(100% - 80px); } .shadow { box-shadow: 5px 5px 15px var(--backgroundColorDeep); } .carditem { padding:1.2rem; border-radius:5px; position:relative; border:var(--border); } /* font-size:1.1rem;*/ .carditem a { color: inherit; } .carditem:hover > .card_info { display:block !important; } .carditem.help:after { content:"?"; color:unset; position:absolute; font-size:1.2rem; top:10px; right:10px; } .carditem .card_title { font-weight:bold; font-size:1.4rem; padding-bottom:0.4rem; } .carditem .card_title:after {content:" "; display:block; clear:both; } .carditem .card_content { font-size:1.3rem; font-weight:bold; padding-top:0.4rem; border-top:solid #eeeeee 1px; } .carditem .card_info { display:none; font-size:1.2rem; border-radius:5px; position: absolute; left:-2px; top:-2px; color:white; background: rgba(0,0,0,0.9); width:calc( 100% + 4px ); min-height:calc( 100% + 4px ); padding:1.2rem; z-index:99; } /* 포스트잇 */ .postit_box { position:relative; margin:10px 0; padding: 50px 30px; border:solid 10px var(--borderColorPopup); } /* background:var(--backgroundColor) linear-gradient(-135deg, transparent 50px, var(--backgroundColor) 0); */ .postit_box::before { content:''; position:absolute; top:-10px; right:-10px; background:var(--backgroundColor) linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,1) 0, rgba(0,0,0, 0.5)) 100% 0 no-repeat; width:50px; height:50px; } #popup_body .postit_box::before { background-color:var(--backgroundColorPopup); } .postit_box.small { padding:25px 15px; border-width:5px; } .postit_box.small::before { position:absolute; top:-5px; right:-5px; width:25px; height:25px; } /* 봉투 */ .envelope { position:relative; margin-top:40px;min-height:80px; height:calc(100% - 40px); background-color:#bbbbbb; border-radius:0 0 5px 5px; flex:none; } .envelope:before { content:''; position:absolute; top:-20px; width:100%; height:20px; background-color:#bbbbbb; border-radius:10px 10px 0 0; } .envelope:after { content:' '; position:absolute; top:0; width:100%;min-height:80px; height:100%; border-radius:0 0 5px 5px; border-top:40px solid transparent; border-left:40px solid #cccccc;border-right:40px solid #cccccc; border-bottom:40px solid #c0c0c0; } .envelope.color1 { background-color:var(--rainbowColor1Dark); } .envelope.color1:before { background-color:var(--rainbowColor1Dark); } .envelope.color1:after { border-left-color:var(--rainbowColor1Hover); border-right-color:var(--rainbowColor1Hover); border-bottom-color:var(--rainbowColor1); } .envelope.color2 { background-color:var(--rainbowColor2Dark); } .envelope.color2:before { background-color:var(--rainbowColor2Dark); } .envelope.color2:after { border-left-color:var(--rainbowColor2Hover); border-right-color:var(--rainbowColor2Hover); border-bottom-color:var(--rainbowColor2); } .envelope.color3 { background-color:var(--rainbowColor3Dark); } .envelope.color3:before { background-color:var(--rainbowColor3Dark); } .envelope.color3:after { border-left-color:var(--rainbowColor3Hover); border-right-color:var(--rainbowColor3Hover); border-bottom-color:var(--rainbowColor3); } .envelope.color4 { background-color:var(--rainbowColor4Dark); } .envelope.color4:before { background-color:var(--rainbowColor4Dark); } .envelope.color4:after { border-left-color:var(--rainbowColor4Hover); border-right-color:var(--rainbowColor4Hover); border-bottom-color:var(--rainbowColor4); } .envelope.color5 { background-color:var(--rainbowColor5Dark); } .envelope.color5:before { background-color:var(--rainbowColor5Dark); } .envelope.color5:after { border-left-color:var(--rainbowColor5Hover); border-right-color:var(--rainbowColor5Hover); border-bottom-color:var(--rainbowColor5); } .envelope.color6 { background-color:var(--rainbowColor6Dark); } .envelope.color6:before { background-color:var(--rainbowColor6Dark); } .envelope.color6:after { border-left-color:var(--rainbowColor6Hover); border-right-color:var(--rainbowColor6Hover); border-bottom-color:var(--rainbowColor6); } .envelope.color7 { background-color:var(--rainbowColor7Dark); } .envelope.color7:before { background-color:var(--rainbowColor7Dark); } .envelope.color7:after { border-left-color:var(--rainbowColor7Hover); border-right-color:var(--rainbowColor7Hover); border-bottom-color:var(--rainbowColor7); } .envelope:hover .paper { top:-35px; } .paper { transition:all 0.2s; background:#fefefe; width:calc(100% - 12px); height:100%; border-radius:5px; position:absolute; left:6px; top:-5px; box-shadow:0 0 2px rgba(0,0,0,1); padding:8px; font-size:0px; } .paper:before { content:''; position:absolute; left:12px; background-color:#dddddd; height:4px; border-radius:5px; top:14px; width:31px; font-size:10px; font-weight:bold; color:var(--fontColorTitle); text-transform:uppercase; letter-spacing:-0.1rem; } .paper.report:before { content:'Report'; background:unset; top:10px; width:100%; } .paper.class:before { content:'Class'; background:unset; top:10px; width:100%; } .paper:after { content:''; position:absolute; left:12px; background:#dddddd; height:4px; border-radius:5px; right:12px; top:28px; box-shadow:0 8px 0 #dddddd, 0 16px 0 #dddddd, 0 24px 0 #dddddd; } /* #EDD1D2 */ /* 인용박스 */ .blockquote { position:relative; margin:20px 0 35px; } .blockquote > :first-child { position:relative; color:var(--borderColorOn); font-size:1.3rem; font-weight:bold; border:2px solid var(--borderColorOn); border-radius:20px; padding:25px;text-align: justify; } .blockquote > :first-child:before { content:""; position:absolute; width:80px; left:50px; bottom:-4px; border:6px solid var(--backgroundColor); z-index:2; } .blockquote > :first-child:after { content:""; position:absolute; border:2px solid var(--borderColorOn); border-radius:0 50px 0 0; width:60px; height:60px; left:50px; bottom:-60px; border-bottom:none; border-left:none; z-index: 3; } .blockquote > :nth-child(2) { position:relative; font-size:1.2rem; padding-top:15px; margin-left:130px; padding-left:12px; z-index:1; } .blockquote_box { position:relative; font-size:1.1rem; padding:1.5rem 3rem; margin:1rem 0 1.2rem; box-shadow:2px 2px 1rem var(--backgroundColorLight); border-left:solid 1rem var(--borderColor); border-right:solid 0.5rem var(--borderColor); } .blockquote_box::before { content:open-quote; font-size:2rem; font-weight:bold; color:var(--fontColorDeep); position:absolute; left:10px; top:5px; } .blockquote_box::after { content:close-quote; font-size:2rem; font-weight:bold; color:var(--fontColorDeep); position:absolute; right:10px; bottom:5px; } .blockquote_box.color1 { border-left-color:var(--rainbowColor1Hover); border-right-color:var(--rainbowColor1Hover); } .blockquote_box.color2 { border-left-color:var(--rainbowColor2Hover); border-right-color:var(--rainbowColor2Hover); } .blockquote_box.color3 { border-left-color:var(--rainbowColor3Hover); border-right-color:var(--rainbowColor3Hover); } .blockquote_box.color4 { border-left-color:var(--rainbowColor4Hover); border-right-color:var(--rainbowColor4Hover); } .blockquote_box.color5 { border-left-color:var(--rainbowColor5Hover); border-right-color:var(--rainbowColor5Hover); } .blockquote_box.color6 { border-left-color:var(--rainbowColor6Hover); border-right-color:var(--rainbowColor6Hover); } .blockquote_box.color7 { border-left-color:var(--rainbowColor7Hover); border-right-color:var(--rainbowColor7Hover); } .blockquote_box > :first-child { font-size:1.2rem; font-weight:bold; } .blockquote_box > :nth-child(2) { font-size:1.1rem; } .indexbox { position:relative; line-height:2rem; background-color:var(--backgroundColor); cursor:pointer; } .indexbox > :first-child { writing-mode: vertical-lr; height:100%; background:#17bace; position: absolute; left:0; top:0; width:20px; height:100%; padding:15px; font-size:15px; color:white; line-height:0; } .indexbox > :nth-child(2) { width:100%; height:100%; padding:25px 20px 50px 60px; border:solid 2px #48cddd; font-size:1.5rem; color:#17bace; } .indexbox a:hover { color:unset; } .indexbox:hover { } .indexbox:hover > :first-child { background: #48cddd; color:white; } .indexbox:hover > :nth-child(2) { background: #17bace; color:white; } .indexbox.big > :first-child { width:60px;padding:25px 30px; font-size:20px; border-radius:5px 0 0 5px; } .indexbox.big > :nth-child(2) { border-radius:5px; } .listbox { position:relative; min-width: 0; padding:10px; } .listbox:first-child { padding-left:0; } .listbox:last-child { padding-right:0; } .listbox A { color:unset; } .listbox > :first-child { height:3rem; line-height:3rem; text-align:right; padding-left:10px; font-size:2rem; color:var(--fontColorDeep); border-bottom:var(--border); } .listbox > :first-child:hover { font-weight:bold; } .listbox > :first-child::before { content: attr(data-label); float: left; color:#119d38; font-size:1.4rem; font-weight:bold; } .listbox > ul { padding:10px; } .listbox > ul > li { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:1.2rem; line-height:2rem; } /* color:var(--fontColor); */ .color0 { color:white; background-color:#666666; border:solid 2px #7d7d7d; } .color1 { color:var(--rainbowColor1Font) !important; background-color:var(--rainbowColor1) !important; border:solid 2px var(--rainbowColor1Dark) !important; } .color1:hover, .color1.on { background-color:var(--rainbowColor1Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor1Hover) !important;} .color2 { color:var(--rainbowColor2Font) !important; background-color:var(--rainbowColor2) !important; border:solid 2px var(--rainbowColor2Dark) !important; } .color2:hover, .color2.on { background-color:var(--rainbowColor2Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor2Hover) !important;} .color3 { color:var(--rainbowColor3Font) !important; background-color:var(--rainbowColor3) !important; border:solid 2px var(--rainbowColor3Dark) !important; } .color3:hover, .color3.on { background-color:var(--rainbowColor3Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor3Hover) !important;} .color4 { color:var(--rainbowColor4Font) !important; background-color:var(--rainbowColor4) !important; border:solid 2px var(--rainbowColor4Dark) !important; } .color4:hover, .color4.on { background-color:var(--rainbowColor4Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor4Hover) !important;} .color5 { color:var(--rainbowColor5Font) !important; background-color:var(--rainbowColor5) !important; border:solid 2px var(--rainbowColor5Dark) !important; } .color5:hover, .color5.on { background-color:var(--rainbowColor5Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor5Hover) !important;} .color6 { color:var(--rainbowColor6Font) !important; background-color:var(--rainbowColor6) !important; border:solid 2px var(--rainbowColor6Dark) !important; } .color6:hover, .color6.on { background-color:var(--rainbowColor6Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor6Hover) !important;} .color7 { color:var(--rainbowColor7Font) !important; background-color:var(--rainbowColor7) !important; border:solid 2px var(--rainbowColor7Dark) !important; } .color7:hover, .color7.on { background-color:var(--rainbowColor7Hover) !important; box-shadow:0px 0px 10px var(--rainbowColor7Hover) !important;} .color99 { color:var(--fontColorLight); background-color:var(--backgroundColorDeepAlpha); border:solid 2px var(--backgroundColorDeep); } .summary_box { border-width:0 0 0 20px !important; border-radius:5px; margin:2px 0;padding:10px; border-left-style:solid; color:var(--fontColor) !important;background-color:var(--backgroundColorDeep) !important;border-color:var(--backgroundColored1) !important; } .summary_box.color1 { color:var(--rainbowColor1Font) !important; background-color:var(--rainbowColor1) !important;border-color:var(--rainbowColor1Dark) !important; } .summary_box.color1:hover { color:var(--rainbowColor1Font) !important; background-color:var(--rainbowColor1Hover) !important; } .summary_box.color2 { color:var(--rainbowColor2Font) !important; background-color:var(--rainbowColor2) !important;border-color:var(--rainbowColor2Dark) !important; } .summary_box.color2:hover { color:var(--rainbowColor2Font) !important; background-color:var(--rainbowColor2Hover) !important; } .summary_box.color3 { color:var(--rainbowColor3Font) !important; background-color:var(--rainbowColor3) !important;border-color:var(--rainbowColor3Dark) !important; } .summary_box.color3:hover { color:var(--rainbowColor3Font) !important; background-color:var(--rainbowColor3Hover) !important; } .summary_box.color4 { color:var(--rainbowColor4Font) !important; background-color:var(--rainbowColor4) !important;border-color:var(--rainbowColor4Dark) !important; } .summary_box.color4:hover { color:var(--rainbowColor4Font) !important; background-color:var(--rainbowColor4Hover) !important; } .summary_box.color5 { color:var(--rainbowColor5Font) !important; background-color:var(--rainbowColor5) !important;border-color:var(--rainbowColor5Dark) !important; } .summary_box.color5:hover { color:var(--rainbowColor5Font) !important; background-color:var(--rainbowColor5Hover) !important; } .summary_box.color6 { color:var(--rainbowColor6Font) !important; background-color:var(--rainbowColor6) !important;border-color:var(--rainbowColor6Dark) !important; } .summary_box.color6:hover { color:var(--rainbowColor6Font) !important; background-color:var(--rainbowColor6Hover) !important; } .summary_box.color7 { color:var(--rainbowColor7Font) !important; background-color:var(--rainbowColor7) !important;border-color:var(--rainbowColor7Dark) !important; } .summary_box.color7:hover { color:var(--rainbowColor7Font) !important; background-color:var(--rainbowColor7Hover) !important; } .bgcolor0 { background-color:var(--backgroundColorLight); } .bgcolor1 { background-color:var(--bgColor1); } .bgcolor2 { background-color:var(--bgColor2); } .bgcolor3 { background-color:var(--bgColor3); } .bgcolor4 { background-color:var(--bgColor4); } .bgcolor5 { background-color:var(--bgColor5); } .bgcolor6 { background-color:var(--bgColor6); } .bgcolor7 { background-color:var(--bgColor7); } .bgcolor8 { background-color:var(--bgColor8); } .bgcolor9 { background-color:var(--bgColor9); } .bgcolor10 { background-color:var(--bgColor10); } .bgcolor11 { background-color:var(--bgColor11); } .bgcolor12 { background-color:var(--bgColor12); } .bgcolor13 { background-color:var(--bgColor13); } /* 2024-04-20 befor로 변경 blur 추가 */ /* .background_image1:before, .background_image2:before, .background_image3:before, .background_image4:before { filter:blur(3px); opacity: 0.4; z-index:-1; content:''; position:absolute; width:100%; height:100%; } */ /* chris */ .background_image-10 { background-image:url('/common/images/background/bg-10.png'); background-position:center 100%; background-size:contain; background-repeat:no-repeat; } .background_image-9 { background-image:url('/common/images/background/bg-09.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image-8 { background-image:url('/common/images/background/bg-08.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image-7 { background-image:url('/common/images/background/bg-07_1.png'), url('/common/images/background/bg-07_2.png'); background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image-6 { background-image:url('/common/images/background/bg-06.png'); background-position:0 50%; background-repeat:no-repeat; } .background_image-5 { background-image:url('/common/images/background/bg-05.png'); background-position:100% 0; background-repeat:no-repeat; } .background_image-4 { background-image:url('/common/images/background/bg-04.png'); background-position:center 100%; background-size:contain; background-repeat:no-repeat; } /* new year */ .background_image-3 { background-image:url('/common/images/background/bg-03.png'); background-size:cover; background-repeat:no-repeat; } .background_image-2 { background-image:url('/common/images/background/bg-02.png'); background-position:center; background-repeat:no-repeat; } .background_image-1 { background-image:url('/common/images/background/bg-01.png'); background-position:center; background-repeat:no-repeat; } .background_image00 { background-image:url('/common/images/background/bg00.png'); background-position:center 95%; background-repeat:no-repeat; } .background_image01 { background-image:url('/common/images/background/bg01_1.png'), url('/common/images/background/bg01_2.png');background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image02 { background-image:url('/common/images/background/bg02_1.png'), url('/common/images/background/bg02_2.png');background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image03 { background-image:url('/common/images/background/bg03.png');background-position:100% 0; background-repeat:no-repeat; } .background_image04 { background-image:url('/common/images/background/bg04.png'); background-size:100%; background-position:0 0; background-repeat:no-repeat; } .background_image05 { background-image:url('/common/images/background/bg05.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image06 { background-image:url('/common/images/background/bg06_1.png'), url('/common/images/background/bg06_2.png');background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image07 { background-image:url('/common/images/background/bg07.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image08 { background-image:url('/common/images/background/bg08.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image09 { background-image:url('/common/images/background/bg09.png'); background-position:0 0; background-repeat:no-repeat; } .background_image10 { background-image:url('/common/images/background/bg10.png'); background-position:100% 0; background-repeat:no-repeat; } .background_image11 { background-image:url('/common/images/background/bg11.png'); background-position:0 0; background-repeat:no-repeat; } .background_image12 { background-image:url('/common/images/background/bg12_1.png'), url('/common/images/background/bg12_2.png'); background-size:100%; background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image13 { background-image:url('/common/images/background/bg13_1.png'), url('/common/images/background/bg13_2.png'); background-position:0 0, 100% 100%; background-repeat:no-repeat; } .background_image14 { background-image:url('/common/images/background/bg14.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image15 { background-image:url('/common/images/background/bg15.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image16 { background-image:url('/common/images/background/bg16.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image17 { background-image:url('/common/images/background/bg17.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image18 { background-image:url('/common/images/background/bg18.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image19 { background-image:url('/common/images/background/bg19.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image20 { background-image:url('/common/images/background/bg20.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image21 { background-image:url('/common/images/background/bg21.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image22 { background-image:url('/common/images/background/bg22.png'); background-size:100%; background-position:0 100%; background-repeat:no-repeat; } .background_image23 { background-image:url('/common/images/background/bg23.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image24 { background-image:url('/common/images/background/bg24.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image25 { background-image:url('/common/images/background/bg25.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image26 { background-image:url('/common/images/background/bg26.png'); background-position:100% 0; background-repeat:no-repeat; } .background_image27 { background-image:url('/common/images/background/bg27.png'); background-size:100%; background-position:100% 100%; background-repeat:no-repeat; } .background_image28 { background-image:url('/common/images/background/bg28.png'); background-position:0 0; background-repeat:no-repeat; } .background_image29 { background-image:url('/common/images/background/bg29.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image30 { background-image:url('/common/images/background/bg30.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image31 { background-image:url('/common/images/background/bg31.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image32 { background-image:url('/common/images/background/bg32.png'); background-position:center; background-size:contain; background-repeat:no-repeat; } .background_image33 { background-image:url('/common/images/background/bg33.png'); background-position:85% 15%; background-repeat:no-repeat; } .background_image34 { background-image:url('/common/images/background/bg34.png'); background-position:center 100%; background-size:contain; background-repeat:no-repeat; } .background_image35 { background-image:url('/common/images/background/bg35_1.png'), url('/common/images/background/bg35_2.png'); background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image36 { background-image:url('/common/images/background/bg36.png'); background-position:100% 30%; background-repeat:no-repeat; } .background_image37 { background-image:url('/common/images/background/bg37.png'); background-position:center 95%; background-repeat:no-repeat; } .background_image38 { background-image:url('/common/images/background/bg38.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image39 { background-image:url('/common/images/background/bg39.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image40 { background-image:url('/common/images/background/bg40.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image41 { background-image:url('/common/images/background/bg41.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image42 { background-image:url('/common/images/background/bg42.png'); background-position:95% 15%; background-repeat:no-repeat; } .background_image43 { background-image:url('/common/images/background/bg43.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image44 { background-image:url('/common/images/background/bg44.png'); background-position:100% 100%; background-repeat:no-repeat; } .background_image45 { background-image:url('/common/images/background/bg45.png'); background-position:0 100%; background-repeat:no-repeat; } .background_image46 { background-image:url('/common/images/background/bg46.png'); background-position:25px 95%; background-repeat:no-repeat; } .background_image47 { background-image:url('/common/images/background/bg47.png'); background-position:100% 0; background-repeat:no-repeat; } .background_image48 { background-image:url('/common/images/background/bg48.png'); background-repeat:no-repeat; } /* background-size:cover; */ .background_image49 { background-image:url('/common/images/background/bg49.png'); background-position:95% 95%; background-repeat:no-repeat; } .background_image50 { background-image:url('/common/images/background/bg50.png'); background-position:25px 25px; background-repeat:no-repeat; } .background_image51 { background-image:url('/common/images/background/bg51.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image52 { background-image:url('/common/images/background/bg52_1.png'), url('/common/images/background/bg52_2.png'); background-position:100% 0, 0 100%; background-repeat:no-repeat; } .background_image53 { background-image:url('/common/images/background/bg53.png'); background-position:5% 95%; background-repeat:no-repeat; } .background_image54 { background-image:url('/common/images/background/bg54.png'); background-position:5% 100%;; background-repeat:no-repeat; } .background_image55 { background-image:url('/common/images/background/bg55.png'); background-position:100% 0;; background-repeat:no-repeat; } .classbox { position: relative; padding:50px 30px 30px 10px; margin:30px 0; border: 8px solid var(--borderColor); border-top-color: transparent; border-left-color: transparent; transition: all 0.3s; page-break-before:auto;page-break-inside:avoid; } /* .classbox:before { content:'EXAM'; position:absolute; left:10px; top:-15px; color:var(--fontColorSubTitle); font-weight:bold; font-size:3rem; letter-spacing:-0.1rem; } */ .classbox > .title { position:absolute; top:-30px; color:var(--fontColorSubTitle); font-weight:bold; font-size:3rem; letter-spacing:-0.1rem; } /* .classbox > :nth-child(n+2) { font-size:1.2rem; font-weight:bold; } */ .classbox:after { content:''; position:absolute; top: -8px; left:150px; right:-8px; border:8px solid var(--borderColor); border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; transition:all 0.3s; } .classbox:hover { border-right-color:var(--borderColorPopup); border-bottom-color:var(--borderColorPopup); } .classbox:hover:after { border-top-color:var(--borderColorPopup); } .classbox:hover .envelope { transform: translateY(-10px); } /* 간략 보고서 그래프용 */ .classbox .roundbox { border-width:2px; padding:0; } .quick_link { display:flex;flex-direction:row;flex-wrap:nowrap; justify-content:space-between;align-items:stretch;gap:10px; padding:10px 0; } .quick_link > * { flex-grow:1; flex-shrink:1; cursor:pointer; text-align:center; padding:15px 8px; font-size:1.2rem; color:var(--fontColorDeep); font-weight:normal; border-radius:10px;border:solid 3px var(--borderColor); transition: 0.3s; } .quick_link a { color:inherit; } .quick_link > *:hover { color:var(--fontColor); background-color:var(--backgroundColor); border:solid 3px var(--backgroundColored1Hover); } .quick_link img { width:80%; margin-bottom:10px; } /* _report.php 표지 디자인 */ .frontpage { padding:3.5rem; height:1700px; position:relative; } .frontpage > .head_title { margin-top:7rem;padding:10px;font-size:1.4rem;line-height:25px;font-weight:bold;border-bottom:solid 3px orange; } .frontpage > .head_subtitle { margin-bottom:10rem;padding:0.7rem;font-size:1rem;letter-spacing:-1px; text-transform:uppercase; } .frontpage .body { min-height:30rem; text-align:center; letter-spacing:-0.1rem;color:#808080;font-size:2rem; line-height:1.3; font-weight:bold; } .frontpage .body > :first-child { color:#00ACFF;letter-spacing:-1rem;font-size:11rem; } .frontpage .body > :nth-child(2) { font-size:5.5rem;color:#F69F57; } .frontpage .body > :nth-child(3) { font-size:3rem; } .frontpage > .sub_body { margin-top:3.5rem; margin-bottom:1.5rem; padding:0 6rem;font-size:1.2rem;line-height:1.3; } .frontpage > .sub_body > .list > div > :first-child { display:inline-block; width:150px; } .frontpage > .sub_body > .list > div > :nth-child(n+2) { display:inline-block; width:90px; } .frontpage > .sub_body.center { text-align:center;font-size:2rem; } .frontpage > .sub_body h3 { margin-top:2.5rem; } .frontpage > .sub_body h3 > span.f_fade { float:right; margin-top:1rem; } .frontpage > .sub_body h4 { margin-top:2rem; } .frontpage > .sub_body h4 > span.f_fade { float:right; margin-top:1rem; } .frontpage > .sub_body .inline70 { font-weight:bold; } /* 학생들 상세 내용 */ .frontpage > .sub_body.cutline > div { overflow: hidden; text-wrap: nowrap; } .frontpage > .logo { text-align:right; height:3rem; font-size:2rem; font-weight:bold; color:var(--fontColorLight); position:absolute; bottom:4rem; right:4rem;line-height: 0.7; } .frontpage > .logo > img { vertical-align:middle; height:100%; margin-right:0px; } /* page_nubmer 인쇄용 */ .page_number { position:absolute; top:0; right:0; } /* 연습장 */ .notepad { position:relative; background-color:#EAEBE1; background-size:1px 32px; line-height:32px; padding:12px 10px 6px 50px; background-image: repeating-linear-gradient(transparent, transparent 31px, #d5c999 31px, #d5c999 100%); background-position: 0 5px; text-align: justify; } .notepad:after { content: ''; position:absolute; left:40px; top:0; height:100%; border-left:3px double #d5c999; } .notepad > :first-child { font-size:20px; } /* info 있음 알림 */ .memo { position:relative; } .memo:after { content:'+'; position:absolute; top:0; right:0; width:30px; font-weight:bold; text-align:right; color:orange; } .info { position:relative; } .info:after { content:'+'; position:absolute; top:0; right:0; width:30px; font-weight:bold; text-align:right; color:orange; } /* popup */ /* 메인 페이지등 큰 글씨 디자인용 */ .mainfont0 { font-weight:bold; font-size:4rem; letter-spacing:-0.4rem; line-height:1.1;} .mainfont1 { font-weight:bold; font-size:2.5rem; letter-spacing:-0.2rem; line-height:1.3;} .mainfont2 { font-weight:bold; color:var(--fontColorDeep); font-size:2rem; line-height:1.2; } .mainfont3 { font-size:1.5rem; letter-spacing:-0.1rem; line-height:1.3; } .typing { overflow: hidden; white-space: nowrap; animation: typing 3s steps(26, end); animation-fill-mode: both; animation-delay: 0.5s; } @keyframes typing { 0% { width: 0%; } 100% { width: 100%; } } /* .expand_button { cursor:pointer; font-size:1.5rem; } */ .expand_box { position:relative; } /* overflow-y:auto; 2026-06-18 불필요한 스크롤바 생겨서 제거 */ .expand_button { position:absolute;width:20px;height:20px;line-height:20px;text-align:center;top:20px;right:15px;font-size:15px;font-weight:bold; cursor:pointer; z-index:1;} .expand_button:has(+ .table_title) { top:30px; } .expand_button:has(+ .dark) { color:white; } .expand_box.expand .chart { height:100% !important; max-height:900px; } .expand { position:fixed !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important; margin:0 !important; z-index:99; background-color:var(--backgroundColor); width:100% !important; } .expand_box:not(.expand) .expand_table tbody tr:nth-child(n+6) { display:none; } .expand_box:not(.expand) .expand_table th:nth-child(n+6) { display:none; } .expand_box:not(.expand) .expand_table td:nth-child(n+6) { display:none; } .expand_box .expand_table { table-layout:fixed; } .expand_box .expand_table tbody td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 2025-11-08 boxcontent 확장용 */ .width_100 { width:100% !important; } .popup_x { position:absolute;width:30px;height:30px;line-height:30px;text-align:center;top:15px;right:10px;font-size:20px;font-weight:bold; cursor:pointer; } .popup_exapnd { position:absolute;width:30px;height:30px;line-height:30px;text-align:center;top:5px;right:25px;font-size:20px;font-weight:bold; cursor:pointer; } .focus { position:relative; } .focus::after { content:"";width:130%;min-width:60px;aspect-ratio:1; z-index:1; opacity:0.7; border-radius:100%; border:6px solid red; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } /* animation: ring 1s infinite; */ .scrollbanner_box { position:relative; width:100%; height:100px; overflow:hidden; } .scrollbanner_box > * { position:absolute;display:flex; width:100%; height:100%; animation: aniScroll 15s linear infinite; } .scrollbanner_box > :last-child { animation: aniScroll-2 15s linear infinite; } .scrollbanner_box ul li { flex-grow:1; line-height:100px; font-size:1.4rem; text-align:center; } .scrollbanner_box:hover > * { animation-play-state:paused; } @keyframes aniScroll { 0%{ transform: translateX(0%) } 100%{ transform: translateX(-100%) } } @keyframes aniScroll-2 { 0%{ transform: translateX(100%) } 100%{ transform: translateX(0%) } } .balloonbox { position:relative; } /* 기본은 아래쪽 */ .balloon { position:absolute; width:100%; line-height:30px; background-color:#0FC0FC; color:white; border-radius:6px; padding:5px; top:calc( 100% + 13px ); z-index:10; } .balloon.pin { transform: translateX(-50%); width: max-content;min-width: 50px; text-align: center; } .balloon:after { content:''; position:absolute; top:-9px; left:calc( 50% - 10px ); border-top: 0 solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0FC0FC; } .balloon.top { top:calc( -15px - 100% ); } .balloon.top:after { top:calc( 100% ); border-top:10px solid #0FC0FC; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0 solid transparent; } .balloon.gray { background-color:var(--borderColorPopup); } .balloon.gray:after { border-bottom: 10px solid var(--borderColorPopup); border-top: 0 solid transparent; } .balloon.gray.top:after { border-top: 10px solid var(--borderColorPopup); border-bottom: 0 solid transparent; } .balloon.lightgreen { background-color:#2cbf7b; } .balloon.lightgreen:after { border-bottom: 10px solid #2cbf7b; border-top: 0 solid transparent; } .balloon.lightgreen.top:after { border-top: 10px solid #2cbf7b; border-bottom: 0 solid transparent; } .balloon.orange { background-color:orange; } .balloon.orasnge:after { border-bottom: 10px solid orange; border-top: 0 solid transparent; } .balloon.orange.top:after { border-top: 10px solid orange; border-bottom: 0 solid transparent; } .balloon.cut1 { background-color:var(--examLevelColor9); } .balloon.cut1:after { border-bottom: 10px solid var(--examLevelColor9); border-top: 0 solid transparent; } .balloon.cut1.top:after { border-top: 10px solid var(--examLevelColor9); border-bottom: 0 solid transparent; } .balloon.cut2 { background-color:var(--examLevelColor8); } .balloon.cut2:after { border-bottom: 10px solid var(--examLevelColor8); border-top: 0 solid transparent; } .balloon.cut2.top:after { border-top: 10px solid var(--examLevelColor8); border-bottom: 0 solid transparent; } .balloon.cut3 { background-color:var(--examLevelColor7); } .balloon.cut3:after { border-bottom: 10px solid var(--examLevelColor7); border-top: 0 solid transparent; } .balloon.cut3.top:after { border-top: 10px solid var(--examLevelColor7); border-bottom: 0 solid transparent; } .balloon.cut4 { background-color:var(--examLevelColor6); } .balloon.cut4:after { border-bottom: 10px solid var(--examLevelColor6); border-top: 0 solid transparent; } .balloon.cut4.top:after { border-top: 10px solid var(--examLevelColor6); border-bottom: 0 solid transparent; } .balloon.cut5 { background-color:var(--examLevelColor5); } .balloon.cut5:after { border-bottom: 10px solid var(--examLevelColor5); border-top: 0 solid transparent; } .balloon.cut5.top:after { border-top: 10px solid var(--examLevelColor5); border-bottom: 0 solid transparent; } .balloon.cut6 { background-color:var(--examLevelColor4); } .balloon.cut6:after { border-bottom: 10px solid var(--examLevelColor4); border-top: 0 solid transparent; } .balloon.cut6.top:after { border-top: 10px solid var(--examLevelColor4); border-bottom: 0 solid transparent; } .balloon.cut7 { background-color:var(--examLevelColor3); } .balloon.cut7:after { border-bottom: 10px solid var(--examLevelColor3); border-top: 0 solid transparent; } .balloon.cut7.top:after { border-top: 10px solid var(--examLevelColor3); border-bottom: 0 solid transparent; } .balloon.cut8 { background-color:var(--examLevelColor2); } .balloon.cut8:after { border-bottom: 10px solid var(--examLevelColor2); border-top: 0 solid transparent; } .balloon.cut8.top:after { border-top: 10px solid var(--examLevelColor2); border-bottom: 0 solid transparent; } .balloon.cut9 { background-color:var(--examLevelColor1); } .balloon.cut9:after { border-bottom: 10px solid var(--examLevelColor1); border-top: 0 solid transparent; } .balloon.cut9.top:after { border-top: 10px solid var(--examLevelColor1); border-bottom: 0 solid transparent; } .tip_box { position: relative; margin: 0 0 30px; padding:10px; background-color:var(--backgroundColorLight); border-radius:3px; border:5px solid var(--borderColor); } .tip_box::before { content:''; position: absolute; top: -24px; left: 20px; border: 10px solid var(--borderColor); border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; } .tip_box.notip::before { content:unset; } .tip_box.orange { background-color:#fff6f0; border-color:#ffac54; } .tip_box.orange::before { border-bottom-color:#ffac54; } .hide { display:none !important; } .folding_button[data-foldingtargetclass="tr_hide"].on { border-top:solid 1px var(--fontColorNotice); } .tr_hide { background-color:var(--backgroundColorLight); } .tr_hide:not(.hide) { border-bottom:solid 1px var(--fontColorNotice); } .tr_hide td { padding:10px 10px; text-align:left; } .tr_hide td table { margin:10px 0; } /* 펼침 접힙 */ .slide { display:grid; grid-template-rows:0fr; transition:0.5s; } .slide > * { overflow:hidden; } .slide.show { grid-template-rows:1fr; } .watermark { position:relative; } .watermark:after { content:'ST.CLASS'; width:max-content; left:50%; top:45%; transform:rotate(331deg) translate(-50%, -50%); font-size:10rem; font-weight:bold; color: var(--backgroundColorAlpha); position: absolute; text-transform:uppercase; letter-spacing:-0.5rem; z-index:-1; } .watermark:has(.chart):after { content:''; } .watermark .chart { position:relative; } .watermark .chart:after { content:'ST.CLASS'; width:max-content; left:50%; top:30%; transform:rotate(331deg) translate(-50%, -40%); font-size:8rem; color: var(--backgroundColorAlpha); position: absolute; text-transform:uppercase; letter-spacing:-0.5rem; z-index:-1; } .watermark .flex_50 .chart:after { font-size:5rem; } .watermark.nowatermark:after, .watermark.nowatermark .chart:after { content:'' !important; } .statebg1 { color:#808080 !important; background-color:#000000 !important; opacity:0.3 !important; } .statebg0 { color:#eeeeee !important; background-color: #000000 !important; opacity:0.1 !important; } .statebg0:hover { background-color: #000000 !important; } /* 2026-05-10 가운데 정렬용? */ .working { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-weight:bold; font-size:1.2rem; } /* 일정 달력 */ .schedule_table { font-size:1rem; } .schedule_table thead th { height:40px; border:2px solid var(--fontColorDeep); } .schedule_table tbody td { text-align:left;vertical-align:top;padding:3px; border:2px solid var(--fontColorDeep); position:relative; } .schedule_table .item { text-align:right; position: absolute; width:100%; font-weight:bold; border-radius:3px; z-index:1; opacity: 0.95; left:0; top:0; } .schedule_table .item > div { position:absolute;line-height:1.5; color:black;background-color:rgb(255, 255, 255, 0);border-radius:2px; } @media print { @page { size: A3 portrait; margin:0; padding-top:10px; padding-left:20px; padding-right:20px; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } html, body { margin:0; } } .print { width:1200px; padding:0; margin:0 auto; } /* h2랑 같음 */ .page_title { font-size: 2rem; margin: 0.5rem 0; font-weight: bold; } .page_title > :first-child { font-size: 3rem; color: #fd6767; } /* :first-letter 두자리 숫자 문제로 제거 */ /* 2023-04-22 index.php */ .topbox_login { background-color:var(--backgroundColor); color:var(--fontColor); } .topbox_menu { background-color:var(--backgroundColor); color:var(--fontColor); border-bottom:solid 1px var(--backgroundColorLight); } .topbox_menu_small { background-color:var(--backgroundColor); color:var(--fontColor); border-bottom:solid 1px var(--backgroundColorLight); } .topbox_menu > .box_content > ul > li > a { font-weight:bold; color:var(--fontColorDeep); } .bottombox_copyright { background-color:var(--backgroundColored1); color:#cccccc; } .banner_button { position:fixed;right:90px;bottom:40px; width:140px; height:50px; text-align:right;padding-right:15px;color:var(--backgroundColor); font-size:18px; line-height:50px; font-weight:bold; cursor:pointer; background-color:var(--backgroundColored1); border-radius:25px;} .banner_button path { stroke:var(--backgroundColorDeep); } @media screen and (max-width:768px) { html:not(:has(#popup_body)) { font-size:calc( var(--fontSize) * 0.85 ); line-height:1.3; } h2 { font-size:1.5rem !important; } h3 { font-size:1.3rem !important; } h4 { font-size:1.2rem !important; } h5 { font-size:1.1rem !important; } /* table col { width:unset !important; } */ table th { padding:5px 0 !important; } table td:not(:has(> details)) { padding:5px 0 !important; } table.form > tbody > tr > td:has(> table) { padding: 0 !important; } table.form > tbody > tr > :first-child { width:100px !important; } table.min tbody th, table.min tbody td { padding:3px 1px !important; } /* :is(.screen_hide col, .screen_hide th, .screen_hide td):first-child { display:none; } */ :is(.screen_hide col, .screen_hide th, .screen_hide td:not([colspan="100%"])):first-child { display:none; } .header_title { padding-top:5px; padding-bottom:5px; flex-wrap: wrap; } .header > :nth-child(2) { display:none; } .category_box { margin:5px; } .category_box.min > :first-child { flex-basis:80px !important; } .category_box.min > :last-child span { padding:0 0.2rem !important; } details { padding:0.5rem !important; } details[open] > :nth-child(2) { margin-top:0.5rem; padding:0.5rem 0.5rem; } .noticebar { margin:2px 0; padding:5px; } #moving_layer { display:none !important; } .search_form input { width:100px; } #paging a { min-width:20px; border: solid 1px var(--borderColor); padding:4px; } #paging a+a { margin-left:0; } .comment { padding:0 !important; } .flex_container { padding:5px 0; gap:10px 5px; } .box_content { width:100% !important; } .btn.big { padding-left:5px; padding-right:5px; } .btn { min-width:unset !important; border-radius:3px;margin:0 1px; padding:2px 3px;cursor:pointer; font-size:0.9rem; } .gLine { flex-wrap:wrap; gap:0; } /* margin-bottom:5px; */ /* .gLine .gTerm { flex-basis:100% !important; text-align:left !important; } .gLine .gBar { flex-basis:100% !important; } */ .gLine .gCnt { display:none !important; } .expand_button { display:none !important; } .flex_25 { flex-basis:calc( (100% - 0px)/1 ) !important; } .flex_33 { flex-basis:calc( (100% - 0px)/1 ) !important; } .flex_50 { flex-basis:calc( (100% - 0px)/1 ) !important; } .listbox { flex-basis:100% !important; padding-left:0; padding-right:0; } .listbox > :first-child { padding-left:5px; } .listbox > ul { padding:5px 5px; } .frontpage { padding:1rem !important; min-height:600px; height:auto !important; background-size:contain; } .frontpage > .head_title { margin-top:2rem !important; } .frontpage > .head_subtitle { margin-bottom:3rem !important; } .frontpage .body { min-height:50px; } .frontpage .body > :first-child { font-size:6rem !important; } .frontpage .body > :nth-child(2) { font-size:3rem !important; } .frontpage .body > :nth-child(n+3) { font-size:1.5rem !important; } .frontpage > .sub_body { padding:0 3rem; } .frontpage > .sub_body.center { font-size:1.5em; } .frontpage > .sub_body h3 { margin-top:1.5rem; } .frontpage > .sub_body h3 > span.f_fade { margin-top:0.5rem; } .frontpage > .sub_body > .page_title { font-size:unset; } .frontpage > .sub_body > .page_title > :first-child { font-size:unset; } .frontpage > .sub_body.cutline { display:none; } .frontpage > .logo { font-size:1.5rem !important; margin-top:20px !important;position:static !important; } /* height:3rem !important; */ .watermark:after { font-size: 5rem; } .watermark .chart:after { font-size: 5rem; } .carditem { padding:1rem; } .carditem .card_title { font-weight: bold; font-size:1.1rem; } .carditem .card_content { font-size:1.1rem; } .classbox { padding:20px 15px 15px 15px; margin:15px 0; border-width:3px; } .classbox > .title { top:-15px; font-weight:bold; font-size:2rem; } .classbox:after { left:75px; top:-3px; border-width:3px; } .flex_table { border-width:0; } .flex_table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .flex_table th { display: block; padding-top:5px; padding-bottom:5px; } .flex_table tr { border-top:1px solid gray !important; border-bottom:1px solid #ddd; display: block; } /* margin-bottom:.625em;*/ .flex_table td { border-bottom:1px solid #ddd; display:block; text-align:right; } .flex_table td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } .flex_table td:last-child { border-bottom: 0; } .quick_link { flex-wrap: wrap; gap: 5px; } .quick_link > * { flex-basis:calc( (100% - 20px)/5 ); border-width:1px; padding:8px 5px; font-size:1rem; } .background_image00 { background-image:unset; } .background_image01 { background-image:unset; } .background_image02 { background-image:unset; } .background_image03 { background-image:unset; } .background_image04 { background-image:unset; } .background_image05 { background-image:unset; } .background_image06 { background-image:unset; } .background_image07 { background-image:unset; } .background_image08 { background-image:unset; } .background_image09 { background-image:unset; } .background_image10 { background-image:unset; } .background_image11 { background-image:unset; } .background_image12 { background-image:unset; } .background_image13 { background-image:unset; } .background_image14 { background-image:unset; } .background_image15 { background-image:unset; } .background_image16 { background-image:unset; } .background_image17 { background-image:unset; } .background_image18 { background-image:unset; } .background_image19 { background-image:unset; } .background_image20 { background-image:unset; } .background_image21 { background-image:unset; } .background_image22 { background-image:unset; } .background_image23 { background-image:unset; } .background_image24 { background-image:unset; } .background_image25 { background-image:unset; } .background_image26 { background-image:unset; } .background_image27 { background-image:unset; } .background_image28 { background-image:unset; } .background_image29 { background-image:unset; } .background_image30 { background-image:unset; } .background_image31 { background-image:unset; } .background_image32 { background-image:unset; } .background_image33 { background-image:unset; } .background_image34 { background-image:unset; } .background_image35 { background-image:unset; } .background_image36 { background-image:unset; } .background_image37 { background-image:unset; } .background_image38 { background-image:unset; } .background_image39 { background-image:unset; } .background_image40 { background-image:unset; } .background_image41 { background-image:unset; } .background_image42 { background-image:unset; } .background_image43 { background-image:unset; } .background_image44 { background-image:unset; } .background_image45 { background-image:unset; } .background_image46 { background-image:unset; } .background_image47 { background-image:unset; } .background_image48 { background-image:unset; } .background_image49 { background-image:unset; } .background_image50 { background-image:unset; } .background_image51 { background-image:unset; } .highcharts-tooltip { display:none !important; } } @media screen and (min-width: 769px) and (max-width: 1189px) { html:not(:has(#popup_body)) { font-size:calc( var(--fontSize) * 0.9 ); line-height:1.4; } :is(.screen_hide col, .screen_hide th, .screen_hide td:not([colspan="100%"])):first-child { display:none; } /* table col { width:unset !important; } */ /* #searchbar { display:none !important; } */ table.form > tbody > tr > :first-child { width:100px !important; } details { padding:0.7rem !important; } details[open] > :nth-child(2) { margin-top:0.7rem; padding:0.7rem 0.7rem; } .box_content { max-width:100%; } .btn.big { padding-left:5px; padding-right:5px; } .quick_link > * { padding:10px 5px; ] } @media screen and (min-width: 1190px) { .box_content { width:1200px; } }