@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

* {box-sizing: border-box; margin: 0; padding: 0;}

:root {
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --maincolor: #3e77a8;
    --textdark: #333;
    --textlight: #f9f9f9;
    --subcolor: #c0c0c0;
    --line-light: #eaeaea;
    --bg-light: rgba(135,190,238,0.4);
    --line-main: rgba(143,193,236,0.6);
    --text-main: #3f8fd4;
    --line-medium: #dcdcdc;
    --text-gray: #6b6b6b;
    --light-gray: #bbb;
    --fa-style-family-classic: 'Font Awesome 6 Free';
    --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
    color-scheme: light only;
}

html, body {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 15px;
    color: var(--textdark);
    scroll-behavior: smooth;
    background-color: #fff;
}
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
    }
}
::-webkit-scrollbar {
	width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: #aaa;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #ccc;
}
::-webkit-scrollbar-track {
	background: transparent;
	background-color: #e0e0e0;
}

.text-blue {color: var(--blue) !important;}
.text-indigo {color: var(--indigo) !important;}
.text-purple {color: var(--purple) !important;}
.text-pink {color: var(--pink) !important;}
.text-red {color: var(--red) !important;}
.text-orange {color: var(--orange) !important;}
.text-yellow {color: var(--yellow) !important;}
.text-green {color: var(--green) !important;}
.text-teal {color: var(--teal) !important;}
.text-cyan {color: var(--cyan) !important;}
.text-primary {color: var(--primary) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-success {color: var(--success) !important;}
.text-info {color: var(--info) !important;}
.text-warning {color: var(--warning) !important;}
.text-danger {color: var(--danger) !important;}
.text-maincolor {color: var(--maincolor) !important;}
.text-textdark {color: var(--textdark) !important;}
.text-textlight {color: var(--textlight) !important;}
.text-dark {color: var(--textdark) !important;}
.text-light {color: var(--textlight) !important;}
.text-gray {color: var(--text-gray) !important;}
.text-white {color: white !important;}
.text-black {color: black !important;}
.bg-blue {background-color: var(--blue) !important;}
.bg-indigo {background-color: var(--indigo) !important;}
.bg-purple {background-color: var(--purple) !important;}
.bg-pink {background-color: var(--pink) !important;}
.bg-red {background-color: var(--red) !important;}
.bg-orange {background-color: var(--orange) !important;}
.bg-yellow {background-color: var(--yellow) !important;}
.bg-green {background-color: var(--green) !important;}
.bg-teal {background-color: var(--teal) !important;}
.bg-cyan {background-color: var(--cyan) !important;}
.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-success {background-color: var(--success) !important;}
.bg-info {background-color: var(--info) !important;}
.bg-warning {background-color: var(--warning) !important;}
.bg-danger {background-color: var(--danger) !important;}
.bg-maincolor {background-color: var(--maincolor) !important;}
.bg-textdark {background-color: var(--textdark) !important;}
.bg-textlight {background-color: var(--textlight) !important;}
.bg-dark {background-color: var(--textdark) !important;}
.bg-light {background-color: var(--textlight) !important;}
.bg-gray {background-color: var(--text-gray) !important;}
.bg-white {background-color: white !important;}
.bg-black {background-color: black !important;}
.border-blue {border-color: var(--blue) !important;}
.border-indigo {border-color: var(--indigo) !important;}
.border-purple {border-color: var(--purple) !important;}
.border-pink {border-color: var(--pink) !important;}
.border-red {border-color: var(--red) !important;}
.border-orange {border-color: var(--orange) !important;}
.border-yellow {border-color: var(--yellow) !important;}
.border-green {border-color: var(--green) !important;}
.border-teal {border-color: var(--teal) !important;}
.border-cyan {border-color: var(--cyan) !important;}
.border-primary {border-color: var(--primary) !important;}
.border-secondary {border-color: var(--secondary) !important;}
.border-success {border-color: var(--success) !important;}
.border-info {border-color: var(--info) !important;}
.border-warning {border-color: var(--warning) !important;}
.border-danger {border-color: var(--danger) !important;}
.border-maincolor {border-color: var(--maincolor) !important;}
.border-textdark {border-color: var(--textdark) !important;}
.border-textlight {border-color: var(--textlight) !important;}
.border-dark {border-color: var(--textdark) !important;}
.border-light {border-color: var(--textlight) !important;}
.border-gray {border-color: var(--text-gray) !important;}
.border-white {border-color: white !important;}
.border-black {border-color: black !important;}

h2 {font-size: 32px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
aside h2 {font-size: 24px;}

a, button, input, select, option, textarea {font-size: 1rem; font-family: "Noto Sans KR", sans-serif; color: var(--textdark); transition: outline 0.2s; text-decoration: none;}
a:hover {text-decoration: underline;}
select:active, select:focus,
input:not([type=radio]):active, input:not([type=radio]):focus,
input:not([type=checkbox]):active, input:not([type=checkbox]):focus,
input:not([type=button]):active, input:not([type=button]):focus,
input:not([type=submit]):active, input:not([type=submit]):focus,
input:not([type=reset]):active, input:not([type=reset]):focus,
textarea:active, textarea:focus,
select:hover,
input:not([type=radio]):hover,
input:not([type=checkbox]):hover,
input:not([type=button]):hover,
input:not([type=submit]):hover,
input:not([type=reset]):hover,
textarea:hover {outline: 4px solid; outline-color: rgb(from var(--text-main) r g b / 0.3);}
input, select, textarea, .inputfilebox>span {height:38px; padding:0.15em 0.8em; border-radius: 4px; border:1px solid var(--light-gray); vertical-align: middle;}
.input-sm {padding:0.1em 0.5em; height: 30px;}
.input-lg {padding:0.3em 1em; height:45px;}
input[disabled], input[readonly] {background-color:var(--line-light); cursor:not-allowed;}
select {cursor: pointer;}
label {cursor: pointer;}
select[required],
input:not([type='radio'])[required],
input:not([type='checkbox'])[required],
input:not([type='button'])[required],
input:not([type='submit'])[required],
input:not([type='reset'])[required] {border-left: 4px solid var(--maincolor);}

.inputfilebox {display: flex;align-items: flex-start; margin-top: 5px;}
.inputfilebox label {width: auto !important; font-size: 1em !important; padding:0.3em 0.8em; min-height: 38px; align-content: center;}
.inputfilebox input[type=file] {display: block; width:0 !important; height:0 !important; visibility: hidden; border:none; padding:0;}
.inputfilebox span {display: flex; align-items: center; justify-content: center; cursor:auto; margin-left: 5px; padding:0.3em 0.8em; min-height: 38px; height: auto; background-color: white;}

input[type=radio] {appearance: none; border: 1px solid var(--light-gray); border-radius: 100px; width:20px; height:20px; background-color: white; box-sizing: border-box; font-size: 0;cursor: pointer;}
input[type=radio]:checked {border: 5px solid var(--text-main);}
[type="radio"]:focus-visible {outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted var(--text-main);}
[type="radio"]:hover {box-shadow: 0 0 0 max(4px, 0.2em) var(--line-main);}
[type="radio"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed;}
  
input[type=checkbox] {appearance: none; border: 1px solid var(--light-gray); border-radius: 4px; width:20px; height:20px; background-color: white; box-sizing: border-box; font-size: 0;cursor: pointer;}
input[type=checkbox]:checked {border: 7px solid var(--text-main);}
[type="checkbox"]:focus-visible {outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted var(--text-main);}
[type="checkbox"]:hover {box-shadow: 0 0 0 max(4px, 0.2em) var(--line-main);}
[type="checkbox"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed;}
  
.inputgrp {display: flex; gap:15px; margin-bottom: 20px; padding-bottom: 25px; border-bottom: 1px solid rgb(from var(--subcolor) r g b / 0.5);}
.inputgrp label {font-size: 0.9em; font-weight: 500;}
.inputgrp label:not(:has([type=checkbox])):not(:has([type=radio])) {display: block; width:250px;}
/* .inputgrp label:has([type=radio]),
.inputgrp label:has([type=checkbox]) {margin: 10px;} */
.inputgrp label input:not([type=checkbox]):not([type=radio]),
.inputgrp label select,
.inputgrp label textarea {width:100%; margin-top: 5px;}



.btn {--this: var(--text-main); border-radius: 6px; border:1px solid; padding:3px 8px; font-size: 0.85rem; outline: none; border-color: var(--this); color: white; background-color: var(--this); cursor: pointer; transition: outline 0.2s; display: inline-flex;justify-content: center; align-items: center; gap: 5px;}
.btn:not(.btn-link) {text-decoration: none;}
.btn-outline {background-color: white; color: var(--this);}
.btn-circle {border-radius: 100px; aspect-ratio: 1;}
.btn-detail {flex-direction: column; padding: 20px;}
.btn-xs {padding:1px 3px;}
.btn-sm {padding:2px 5px;}
.btn-lg {padding:8px 12px;}
.btn-round {border-radius: 100px;}
.btn-link {border:none !important; background-color: transparent; color:var(--this);}
.btn-secondary {--this: var(--text-gray);}
.btn-danger {--this:var(--danger);}
.btn-success {--this:var(--success);}
.btn-info {--this:var(--info);}
.btn-warning {--this:var(--warning);}
.btn-orange {--this:var(--orange);}
.btn:hover {outline: 4px solid; outline-color: rgb(from var(--this) r g b / 0.3);}
.btn:active, .btn:focus {outline: 4px solid; outline-color: rgb(from var(--this) r g b / 0.3);}
.btn-group {display: flex; width: 100%;}
.btn-group .btn {width:100%; border: none; border-radius: 0; border-bottom: 1px solid var(--light-gray); color: var(--text-gray); background-color: transparent; padding:8px 14px; cursor: pointer;}
.btn-group .btn.active {color:var(--text-main); font-weight: bold; border-width: 2px; border-color: var(--text-main);}

.alert {--this: var(--text-main); border: 1px solid var(--this); padding:8px 14px; background-color: rgb(from var(--this) r g b / 0.3); display: flex; border-radius: 6px; margin: 5px; justify-content: space-between; align-items: center; gap:10px; margin-top: 20px; margin-bottom: 20px;}
.alert-secondary {--this:var(--secondary);}
.alert-danger {--this:var(--danger);}
.alert-success {--this:var(--success);}
.alert-info {--this:var(--info);}
.alert-warning {--this:var(--warning);}
.alert-orange {--this:var(--orange);}
.alert-box {border-left: 4px solid rgb(from var(--text-main) r g b / 0.5); padding:15px; background-color: var(--textlight); display: flex; border-radius: 6px; margin: 5px; justify-content: space-between; align-items: center; gap:10px; margin-top: 20px; margin-bottom: 20px;}

table {border-collapse: collapse;}
.table {border-top: 2px solid var(--line-main); border-bottom: 2px solid var(--line-main); min-width: 768px; background-color: white;}
.table th {padding: 0.5em 1em; border-bottom: 1px solid var(--line-medium); border-right:1px solid var(--line-light); text-align: center; font-weight: bold;}
.table td {padding: 0.5em 1em; border-bottom: 1px solid var(--line-light); border-right:1px solid var(--line-light);}
.table th:last-child, .table td:last-child {border-right: none;}
.table-responsive {overflow-x: auto; margin: 15px 10px;}


.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}
.container-1200 {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}
.container-800 {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0 15px;
}

.display-block {display: block;}
.display-inline {display: inline;}
.display-inline-block {display: inline-block;}
.display-flex {display: flex;}
.display-none {display: none;}

div.fitimg, div:has(>img.fitimg) {position: relative; overflow: hidden;}
.fitimg img, div:has(img.fitimg)>img.fitimg {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.round {border-radius: 6px;}
.round-sm {border-radius: 4px;}
.round-lg {border-radius: 10px;}

.border {border: 1px solid; --this: var(--light-gray); border-color:var(--this)}
.border-light {--this: var(--line-light); border-color:var(--this)}
.border-medium {--this: var(--line-medium); border-color:var(--this)}
.border-top {border:none; border-top: 1px solid; border-color: var(--this);}
.border-bottom {border:none; border-bottom: 1px solid; border-color: var(--this);}
.border-left {border:none; border-left: 1px solid; border-color: var(--this);}
.border-right {border:none; border-right: 1px solid; border-color: var(--this);}

ol.list , ul.list,.list ol, .list ul {padding-left:1.3em; margin: 10px 0px;}
ol>li>ol {list-style-type: upper-alpha;}
ol>li>ol>li>ol {list-style-type: upper-roman;}
dl {padding-left:0.3em; margin: 10px 0px;}
dl>dd {list-style-type: none;}
dl>dd::before {content: " - ";}
.list>li {margin-bottom: 0.7em;}

.float-none {float:none;}
.float-left {float:left;}
.float-right {float:right;}
.overflow-auto {overflow: auto;}

.flex-wrap {flex-wrap: wrap;}
.flex-justify {display: flex; justify-content: space-between; gap:15px;}
.flex-center {display: flex; justify-content: center; gap:15px; align-items: center;}
.flex-left {display: flex; justify-content: flex-start; gap:15px;}
.flex-break {flex-basis: 100%; height: 0;}
.flex-basis-100 {flex-basis: 100%;}

.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

hr {border:none; border-top:1px solid var(--line-light); margin: 20px 0;}

.w-0 {width:0%;}
.w-1-3 {width:calc(100% / 3);}
.w-2-3 {width:calc(100% / 3 * 2);}
.w-50 {width:50%;}
.w-100 {width:100%;}
.h-0 {height:0%;}
.h-1-3 {height:calc(100% / 3);}
.h-2-3 {height:calc(100% / 3 * 2);}
.h-50 {height:50%;}
.h-100 {height:100%;}

.m-0 {margin: 0;}
.m-1 {margin: 5px;}
.m-2 {margin: 8px;}
.m-3 {margin: 12px;}
.m-4 {margin: 18px;}
.m-5 {margin: 50px;}
.m-6 {margin: 100px;}

.mt-0 {margin-top: 0;}
.mt-1 {margin-top: 5px;}
.mt-2 {margin-top: 8px;}
.mt-3 {margin-top: 12px;}
.mt-4 {margin-top: 18px;}
.mt-5 {margin-top: 50px;}
.mt-6 {margin-top: 100px;}

.mb-0 {margin-bottom: 0;}
.mb-1 {margin-bottom: 5px;}
.mb-2 {margin-bottom: 8px;}
.mb-3 {margin-bottom: 12px;}
.mb-4 {margin-bottom: 18px;}
.mb-5 {margin-bottom: 50px;}
.mb-6 {margin-bottom: 100px;}

.ml-0 {margin-left: 0;}
.ml-1 {margin-left: 5px;}
.ml-2 {margin-left: 8px;}
.ml-3 {margin-left: 12px;}
.ml-4 {margin-left: 18px;}
.ml-5 {margin-left: 50px;}
.ml-6 {margin-left: 100px;}

.mr-0 {margin-right: 0;}
.mr-1 {margin-right: 5px;}
.mr-2 {margin-right: 8px;}
.mr-3 {margin-right: 12px;}
.mr-4 {margin-right: 18px;}
.mr-5 {margin-right: 50px;}
.mr-6 {margin-right: 100px;}

.mx-0 {margin-left: 0;margin-right: 0;}
.mx-1 {margin-left: 5px;margin-right: 5px;}
.mx-2 {margin-left: 8px;margin-right: 8px;}
.mx-3 {margin-left: 12px;margin-right: 12px;}
.mx-4 {margin-left: 18px;margin-right: 18px;}
.mx-5 {margin-left: 50px;margin-right: 50px;}
.mx-6 {margin-left: 100px;margin-right: 100px;}

.my-0 {margin-top: 0;margin-bottom: 0;}
.my-1 {margin-top: 5px;margin-bottom: 5px;}
.my-2 {margin-top: 8px;margin-bottom: 8px;}
.my-3 {margin-top: 12px;margin-bottom: 12px;}
.my-4 {margin-top: 18px;margin-bottom: 18px;}
.my-5 {margin-top: 50px;margin-bottom: 50px;}
.my-6 {margin-top: 100px;margin-bottom: 100px;}

.mx-auto {margin-left: auto; margin-right: auto;}

.p-0 {padding: 0;}
.p-1 {padding: 5px;}
.p-2 {padding: 8px;}
.p-3 {padding: 12px;}
.p-4 {padding: 18px;}
.p-5 {padding: 50px;}
.p-6 {padding: 100px;}

.pt-0 {padding-top: 0;}
.pt-1 {padding-top: 5px;}
.pt-2 {padding-top: 8px;}
.pt-3 {padding-top: 12px;}
.pt-4 {padding-top: 18px;}
.pt-5 {padding-top: 50px;}
.pt-6 {padding-top: 100px;}

.pb-0 {padding-bottom: 0;}
.pb-1 {padding-bottom: 5px;}
.pb-2 {padding-bottom: 8px;}
.pb-3 {padding-bottom: 12px;}
.pb-4 {padding-bottom: 18px;}
.pb-5 {padding-bottom: 50px;}
.pb-6 {padding-bottom: 100px;}

.pl-0 {padding-left: 0;}
.pl-1 {padding-left: 5px;}
.pl-2 {padding-left: 8px;}
.pl-3 {padding-left: 12px;}
.pl-4 {padding-left: 18px;}
.pl-5 {padding-left: 50px;}
.pl-6 {padding-left: 100px;}

.pr-0 {padding-right: 0;}
.pr-1 {padding-right: 5px;}
.pr-2 {padding-right: 8px;}
.pr-3 {padding-right: 12px;}
.pr-4 {padding-right: 18px;}
.pr-5 {padding-right: 50px;}
.pr-6 {padding-right: 100px;}

.px-0 {padding-left: 0;padding-right: 0;}
.px-1 {padding-left: 5px;padding-right: 5px;}
.px-2 {padding-left: 8px;padding-right: 8px;}
.px-3 {padding-left: 12px;padding-right: 12px;}
.px-4 {padding-left: 18px;padding-right: 18px;}
.px-5 {padding-left: 50px;padding-right: 50px;}
.px-6 {padding-left: 100px;padding-right: 100px;}

.py-0 {padding-top: 0;padding-bottom: 0;}
.py-1 {padding-top: 5px;padding-bottom: 5px;}
.py-2 {padding-top: 8px;padding-bottom: 8px;}
.py-3 {padding-top: 12px;padding-bottom: 12px;}
.py-4 {padding-top: 18px;padding-bottom: 18px;}
.py-5 {padding-top: 50px;padding-bottom: 50px;}
.py-6 {padding-top: 100px;padding-bottom: 100px;}

header {position: fixed; width: 100%; z-index: 9998; background-color: rgba(255,255,255,0.85); backdrop-filter: blur(6px);}
#header_dummy {height: 47px;}
header #header_inner {display: flex;justify-content: space-between;align-items: center;}
header h1 img {height:22px;}
#header_left {display: flex; align-items: center;}

.subheader {padding-top: 5px; padding-bottom:5px; border-top: 1px solid var(--line-light);}
.subheader>a {color: var(--text-gray); margin-right:2px;}
.subheader>a::after {content:'|'; margin-left: 5px; margin-right: 2px; font-size: 0.8em; vertical-align: 0.2em; color:var(--light-gray)}
.subheader>a:last-of-type::after {content: none;}

section {background-color: white; padding-top:20px; padding-bottom:60px;}


footer {padding-top:40px; padding-bottom: 100px; border-top: 1px solid var(--line-light);}
footer .container>div {margin-bottom: 15px;}
footer #footer_bot p,footer #footer_bot a {font-size:0.95em; color:var(--text-gray)}
#footer_top {display: flex; flex-direction: row; justify-content: space-between;}
#footer_top a>img {height: 35px;}

#totop {position:fixed; z-index:9999; right:10px; bottom:10px; text-decoration:none; width:34px; height:34px;}
#gnbbtn2 {position:fixed; z-index:9999; right:10px; bottom:50px; text-decoration:none; width:34px; height:34px;}

.badge {border-radius: 4px; font-size: 0.85em; padding: 1px 3px; margin:0 2px; font-weight:500;}
.badge-sm {font-size: 0.7em; padding: 1px 2px;}
.badge-pill {border-radius: 500px; padding: 1px 6px;}

.blured {position: relative;}
.blured::before {content:"";display: block;position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(2.2px);}

#gnbbtn {font-size: 1.2em;}

#topgnb {margin-left: 25px;}
#topgnb>ul {list-style-type:none; }
#topgnb>ul>li {display: inline-block;}
#topgnb>ul>li>a {display: block; color: var(--secondary);text-decoration: none; padding: 1px 5px; letter-spacing: -0.04em; font-weight: 500; position: relative;}
#topgnb>ul>li>a:hover {color: var(--maincolor); }
#topgnb>ul>li>a::before {content: ""; position:absolute;display: block; width: 0; background-color: var(--maincolor); height: 3px; left: 50%; transform:translateX(-50%); bottom:-5px; transition: 0.2s;}
#topgnb>ul>li>a:hover::before {width: 100%;}
#topgnb>ul>li>a::after {content:""; display: block; position: absolute; width: 1px; height:10px; background-color: rgb(from var(--light-gray) r g b / 0.3); right: -3px; bottom: 4px;}
#topgnb>ul>li:last-of-type>a::after {content: none;}

#topgnb>ul>li>.sub {display:none; position: absolute; z-index: 9990; list-style: none; background-color: white; padding: 10px 15px; border-radius: 6px; box-shadow: 0 3px 5px rgba(0,0,0,0.1);}
#topgnb>ul>li>.sub a {display: block; padding: 5px; border-bottom: 1px solid var(--line-light);}

#gnb {position: fixed; z-index: 9999; top:47px; width:100%; height:calc(100vh - 47px); background-color: rgba(0,0,0,0.2); backdrop-filter: blur(4px); display: none;}
#gnb .container {display: flex; justify-content: flex-end;}
#gnb ul:not(.sub) {list-style:none; width: 100%; max-width: 360px; height:calc(100vh - 47px); background-color: rgb(from var(--subcolor) r g b / 0.8); overflow: auto; position: relative; z-index:9998;}
#gnb ul:not(.sub)>li>a {padding: 20px 40px; background-color: var(--textlight); border-bottom: 1px solid var(--line-medium); color:var(--maincolor); text-align: center; display: block; text-decoration: none;}
#gnb ul:not(.sub)>li:has(.sub)>a {pointer-events: none; cursor: pointer; position:relative;}
#gnb ul:not(.sub)>li:has(.sub)>a::after {content:""; display:block; position:absolute; right:20px; top: 25px; width:10px; height:5px; border-top:5px solid var(--maincolor); border-left: 5px solid transparent; border-right: 5px solid transparent; box-sizing: border-box;}
#gnb ul:not(.sub)>li:has(.active)>a::after {transform: rotate(180deg);}
#gnb ul:not(.sub)>li>a:hover {background-color: white;}
#gnb ul:not(.sub)>li>a b {display:block; margin-bottom: 8px; font-size: 1.2em;}
#gnb .sub {display: none;}
#gnb .sub>li>a {display: block; padding:10px 20px; background-color: var(--line-light); border-bottom: 1px solid var(--light-gray);}


#menu_dummy {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9997;}
#menuli_dummy {height:120px;}

h2>small {display: block;font-size: 0.6em; color: var(--maincolor); margin-bottom: 10px;;}

.asidebox {display: flex; gap: 15px;}
.asidebox>aside {width:300px; flex: 0 0 auto;}
.asidebox>div {width:calc(100% - 315px);}
.asidebox>div .fitimg {min-width: 200px; min-height:250px; height: 100%;}

h2,h3,h4,h5 {margin-top: 1.8em; margin-bottom: 0.4em; word-break: keep-all; line-height: 1.2;}

p {word-break: keep-all; margin-bottom: 0.7em;}

.radiobox {margin-top: 5px; margin-bottom:20px; display:flex; flex-wrap: wrap; align-items: stretch; gap:10px;}
.radiobox input[type=radio], .radiobox label .est_detail input[type=checkbox] {width: 0; height: 0; visibility: hidden; border:none; outline:none; box-shadow: none; position:absolute;}
.radiobox label {display:block; border: 1px solid var(--line-medium); border-radius: 8px; padding:15px; width:calc((100% - 20px) / 3); background-color: white;}
.radiobox label:hover,.radiobox label:has(input:checked) {background-color: rgb(from var(--maincolor) r g b / 0.08); border-color: var(--maincolor); box-shadow: 0 0 0 3px rgb(from var(--maincolor) r g b / 0.5), inset 2px 5px 5px rgb(from var(--maincolor) r g b / 0.3), inset -2px -5px 5px rgb(255,255,255,0.5);}
.radiobox label h4{margin: 0; margin-top: 15px;}
.radiobox label p {margin: 0; margin-top: 5px;}
.radiobox label p {font-size: 0.85em; color: var(--text-gray);}
.radiobox label>div>img {display:block; margin:auto; height: 100px; }

.itembox {padding:10px; border: 1px solid var(--line-light); border-radius: 10px; width: 200px;}
.itembox>img {display:block; width:100px; margin: auto;}
.itembox>h4 {text-align: center; margin-top: 10px; margin-bottom: 10px;}
.itembox .light {gap: 5px; margin-top: 10px;}
.itembox .light>div {width:50px; text-align: center;}

blockquote {margin:15px 10px; ;padding: 20px 25px; background-color: white; border-radius: 4px; border: 1px solid var(--line-light); border-left: 4px solid var(--maincolor);}
blockquote::before {content:open-quote; display:block; text-align:center; font-weight:500; color:var(--light-gray); font-size:2em; line-height:20px;}
blockquote::after {content:close-quote; display:block; text-align:center; font-weight:500; color:var(--light-gray); font-size:2em; line-height:0px; margin-top: 20px;}

.scrollbox {flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 10px;}
.scrollbox>* { flex: 0 0 auto;}

#dummy {
    position: absolute;
    z-index: 9999;
    background-color: white;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.15);
    display: none;
    opacity: 0;
}

.fa-naver::before {
    font-family: sans-serif;
    font-weight: bold;
    content: "N";
    font-style: normal;
}




#chat {position: fixed; left:10px; bottom:10px; z-index: 1000; padding-right: 60px; max-width: 420px;}
#chat>div {display:none;}
#chat .chatbox {font-size: 1.1em;text-decoration: none; display:flex; gap:15px; border: 1px solid var(--line-light); border-radius: 6px; background-color: white; box-shadow: 2px 4px 6px rgba(0,0,0,0.1); margin-bottom: 10px; padding: 10px; align-items: center; position: relative;}
#chat .chatbox>i {font-size: 2em; width: 1.3em; color: var(--maincolor);}
#chat .chatbox>i.fa-comments {color: var(--yellow);}
#chat .chatbox>div>p {margin-bottom: 0;}
#chat .chatbox>span {position: absolute; right: 10px; top: 5px;}



@media (max-width: 1200px) {
    .radiobox-big .radiobox label {width:calc((100% - 10px) / 2);}
    .asidebox>aside {width:200px;}
    .asidebox>div {width:calc(100% - 215px);}
}

@media (max-width: 992px) {
    #topgnb {display: none;}
    .asidebox {display: block;}
    .asidebox>aside {width: 100%; margin-bottom: 30px;}
    .asidebox>div {width:100%;}
    .scrollbox>* {width: 300px !important; }
}

@media (max-width: 768px) {
    header h1 img {height:20px;}
    #footer_top a>img {height: 30px;}
    .flex-justify:not(.flex-fix), .flex-center:not(.flex-fix), .flex-left:not(.flex-fix) {flex-direction: column;}
    .flex-justify:not(.flex-fix)>*, .flex-center:not(.flex-fix)>*, .flex-left:not(.flex-fix)>* {width: 100% !important;}
}

@media (max-width: 600px) {
    .inputgrp:not(:has([type=checkbox])):not(:has([type=radio])) {flex-direction: column; gap: 10px;}
    .inputgrp label:not(:has([type=checkbox])):not(:has([type=radio])) {width:100%;}
    footer .flex-justify {display: block !important;}
    .radiobox label {width:calc((100% - 10px) / 2);}
    .radiobox-big .radiobox label {width:100%;}
}

@media (max-width: 480px) {
    header .btn, footer .btn {padding:8px 10px;}
    header .btn.shirink, footer .btn.shirink {font-size: 0; gap: 0; line-height: 1;}
    header .btn.shirink i, footer .btn.shirink i {font-size: 1rem;}
    .radiobox label {width:100%;}
    footer {text-align: center !important;}
    footer .btn-link {padding:5px 3px;}
}

@media (max-width: 320px) {
    header h1 img {height:18px;}
    #footer_top a>img {height: 25px;}
}

@media (prefers-color-scheme: dark) {
    html,
    body {
      background: #fff !important;
      background-color: #fff !important;
    }
  }