@charset "UTF-m-location8";
/*
	Author	: hyojeong yang
	Date	: 2022-02-18
	Project	: 폭스스토리
*/
@import url('bootstrap-icons.css');
@import url('slick.css');
/*@import url('http://down.foxedu.kr/download/foxsite/css/portal.css');
@import url('http://down.foxedu.kr/download/foxsite/css/footer.css');*/
@import url('https://down.foxedu.kr/download/foxsite/css/style_foxsite.css?20220927');

:root {
    --color-spot: #003563;
    --color-spot2: #FFD100;
    --color-rd: #FF6F51;
    --color-bl: #5174FF;
    --color-gn: #00D4BE;
    --color-bk: #333;
    --color-gr400: #555;
    --color-gr300: #777;
    --color-gr200: #999;
    --color-gr100: #ddd;
    --color-gr50: #eee;
    --color-gr30: #f8f8f8;
    --color-gr30-spot: #F8F8FF;
    --border-radius: 10px;
    --box-shadow: 15px 15px 30px rgba(0,0,0,.1);
    --font-size: 15px;
}

/*@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: url('font/Pretendard-Light.woff2') format('woff2'), url('font/Pretendard-Light.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('font/Pretendard-Regular.woff2') format('woff2'), url('font/Pretendard-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url('font/Pretendard-Medium.woff2') format('woff2'), url('font/Pretendard-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url('font/Pretendard-Bold.woff2') format('woff2'), url('font/Pretendard-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: url('font/Pretendard-Black.woff2') format('woff2'), url('font/Pretendard-Black.woff') format('woff');
}*/
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('font/NotoSans-Thin.woff2') format('woff2'), url('font/NotoSans-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url('font/NotoSans-Light.woff2') format('woff2'), url('font/NotoSans-Light.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('font/NotoSans-Regular.woff2') format('woff2'), url('font/NotoSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url('font/NotoSans-Medium.woff2') format('woff2'), url('font/NotoSans-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url('font/NotoSans-Bold.woff2') format('woff2'), url('font/NotoSans-Bold.woff') format('woff');
}

html, body {
    height: 100%;
}

html {
    border: 0;
    outline: 0;
    font-size: 62.5%;
}

body {
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Noto Sans KR', "맑은 고딕", "Malgun Gothic", "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif;
    background-color: transparent;
    color: var(--color-bk);
    font-weight: 400;
    letter-spacing: -0.02em;
    overflow-x: hidden;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
}

body.noscroll {
    overflow: hidden;
}

::selection {
    color: #fff;
    background-color: #222;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table caption {
    height: 0;
    font-size: 0.1em;
    color: #fff;
    opacity: 0;
}

button,
input,
textarea,
select {
    font-family: 'Noto Sans KR', "맑은 고딕", "Malgun Gothic", "Apple Gothic", "돋움", Dotum, "굴림", Gulim, sans-serif;
    /*font-size: 12px;*/
    color: var(--color-bk);
}

button {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}

button:focus {
    /*outline:auto;*/
}

textarea {
    padding: 10px;
    box-sizing: border-box;
    background: transparent;
    border-color: #ccc;
    display: block;
}

select {
    border: 1px solid var(--color-gr100);
    box-sizing: border-box;
    height: 40px;
    padding: 0 41px 0 10px;
    vertical-align: top;
    appearance: none;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    background: url("../images/common/sel_arr.svg") center right no-repeat;
    font-size: 14px;
}

select::-ms-expand {
    display: none;
}

html, body, nav, section, article, figure, figcaption,
h1, h2, h3, h4, h5, h6,
menu, ul, ol, dl, li, dt, dd,
p, form {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.1em;
}

img {
    margin: 0;
    border: none;
}

ul, ol, dl, li {
    list-style: none;
}

cite, em, address {
    font-style: normal;
}

em {
    color: var(--color-spot);
    font-weight: 700;
}

b, strong {
    font-weight: 700;
}

iframe {
    border: none;
    outline: 0;
}

a > span {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: var(--color-bk);
}

a:hover,
a:focus {
    text-decoration: none;
}

*:focus,
a:focus,
textarea:focus, input:focus {
    /*outline: 0;*/
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
}

fieldset legend {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

hr {
    display: block;
    height: 1px;
    border: none;
    background-color: var(--color-gr100);
    margin: 0 0 30px;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=tel],
input[type=time],
input[type=date],
input[type=datetime] {
    vertical-align: middle;
    padding: 0 16px;
    height: 40px;
    border: 1px solid var(--color-gr100);
    width: 260px;
    box-sizing: border-box;
    transition: all .3s;
    background-color: #fff;
}

input[type=time],
input[type=date],
input[type=datetime] {
    padding-right: 10px;
}

input[type=text].bg {
    background-color: var(--color-gr30);
    border-color: var(--color-gr30);
}

input[type=number] {
    padding: 0;
    text-align: center;
}

input[type="file"],
input[type="file"]:hover {
    padding: 0;
    border: none;
}

td input {
    vertical-align: top;
}

textarea {
    width: 100%;
    border: 1px solid var(--color-gr100);
    background-color: #fff;
}

input:hover,
textarea:hover {
    border: 1px solid var(--color-gr100);
}

input[type="file"]:hover {
    border: none;
}

input:focus,
textarea:focus {
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}

textarea[disabled="disabled"] {
    border: none;
}

textarea:focus[disabled="disabled"] {
    box-shadow: none;
}

input[type="radio"],
input[type="checkbox"] {
    border: 0;
    height: auto;
    box-shadow: none;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: none;
}
/*checkbox, radio */
.checkradio {
    display: inline-block;
    position: relative;
    font-size: 0;
    margin-right: 20px;
    min-width: 30px;
    min-height: 30px;
    vertical-align: middle;
}

.checkradio:only-child, .checkradio:last-child {
    margin-right: 0;
}

.checkradio input[type="checkbox"],
.checkradio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.checkradio input[type="checkbox"] + label,
.checkradio input[type="radio"] + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 14px;
    vertical-align: middle;
    min-height: 24px;
    min-width: 24px;
    line-height: 22px;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.checkradio input[type="checkbox"] + label:before,
.checkradio input[type="radio"] + label:before {
    content: " ";
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid var(--color-gr100);
    box-sizing: border-box;
    transition: all .5s;
}

.checkradio input[type="checkbox"] + label:after {
    content: " ";
    position: absolute;
    top: 5px;
    left: 9px;
    width: 7px;
    height: 10px;
    box-sizing: border-box;
    border-right: 2px solid var(--color-gr200);
    border-bottom: 2px solid var(--color-gr200);
    transform: rotate(45deg);
    transition: all .5s;
}

.checkradio input[type="radio"] + label:after {
    content: " ";
    position: absolute;
    top: 7px;
    left: 6px;
    width: 12px;
    height: 12px;
    background: var(--color-gr200);
    transition: all .5s;
}

.checkradio input[type="checkbox"] + label.txt-hide,
.checkradio input[type="radio"] + label.txt-hide {
    position: relative;
    top: auto;
    left: auto;
    overflow: hidden;
    width: auto;
    height: auto;
    font-size: 0;
    line-height: 1.5;
    clip: rect(0 0 0 0);
    white-space: normal;
    text-indent: 0;
}

.checkradio input[type="checkbox"] + label.txt-hide:before,
.checkradio input[type="radio"] + label.txt-hide:before {
    margin-right: 0;
}

.checkradio input[type="checkbox"] + label + input[type=text],
.checkradio input[type="radio"] + label + input[type=text] {
    margin-left: 10px;
}

.checkradio input[type="checkbox"]:checked + label:before,
.checkradio input[type="checkbox"]:checked + label:after,
.checkradio input[type="radio"]:checked + label:before {
    border-color: var(--color-spot);
}

.checkradio input[type="checkbox"]:checked + label:after {
    animation: checkbox .5s ease-in;
}

@keyframes checkbox {
    0% {
        opacity: .5;
        transform: scale(0) rotate(45deg);
    }

    40% {
        opacity: .5;
        transform: scale(1.2) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }
}

.checkradio input[type="radio"]:checked + label:after {
    background-color: var(--color-spot);
    animation: checkbox .8s;
}

.checkradio input[type="checkbox"]:focus + label,
.checkradio input[type="radio"]:focus + label {
    outline: 2px solid #333;
    box-sizing: border-box;
}

.checkradio input[type="checkbox"]:disabled + label,
.checkradio input[type="radio"]:disabled + label,
.checkradio input[type="checkbox"]:disabled + label *,
.checkradio input[type="radio"]:disabled + label * {
    color: var(--color-gr200) !important;
}

.checkradio input[type="checkbox"]:disabled + label:before,
.checkradio input[type="radio"]:disabled + label:before {
    color: var(--color-gr30)
}

.checkradio input[type="checkbox"]:disabled + label:after,
.checkradio input[type="radio"]:disabled + label:after {
    background-color: #c6d6e6;
}

.checkradio input[type="radio"] + label:before, .checkradio input[type="radio"] + label:after {
    border-radius: 50%;
}

.checkradio-custom-area {
    font-size: 0;
    margin-bottom: -5px;
}

.checkradio-custom-area .checkradio {
    margin-right: 3px;
    margin-bottom: 5px;
}

.checkradio-custom-area .checkradio input[type="checkbox"] + label:before,
.checkradio-custom-area .checkradio input[type="radio"] + label:before,
.checkradio-custom-area .checkradio input[type="checkbox"] + label:after,
.checkradio-custom-area .checkradio input[type="radio"] + label:after {
    display: none;
}

.checkradio-custom-area .checkradio input[type="checkbox"] + label,
.checkradio-custom-area .checkradio input[type="radio"] + label {
    display: inline-block;
    font-size: 14px;
    border: 1px solid var(--color-gr100);
    color: var(--color-gr400);
    height: 30px;
    line-height: 30px;
    border-radius: 2em;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    min-width: 65px;
    text-align: center;
}

.checkradio-custom-area .checkradio input[type="checkbox"]:checked + label,
.checkradio-custom-area .checkradio input[type="radio"]:checked + label {
    background-color: var(--color-spot);
    border-color: var(--color-spot);
    color: #fff;
}

.checkradio-custom2-area {
    font-size: 0;
    display: flex;
    width: 100%;
}

.checkradio-custom2-area .checkradio {
    margin-right: 0;
    width: 100%;
}

.checkradio-custom2-area .checkradio input[type="checkbox"] + label,
.checkradio-custom2-area .checkradio input[type="radio"] + label {
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    border: 1px solid var(--color-gr100);
    text-align: center;
    box-sizing: border-box;
}

.checkradio-custom2-area .checkradio input[type="checkbox"]:checked + label,
.checkradio-custom2-area .checkradio input[type="radio"]:checked + label {
    background-color: var(--color-spot);
    border-color: var(--color-spot);
    color: #fff;
}

.checkradio-custom2-area .checkradio input[type="checkbox"] + label:before,
.checkradio-custom2-area .checkradio input[type="radio"] + label:before,
.checkradio-custom2-area .checkradio input[type="checkbox"] + label:after,
.checkradio-custom2-area .checkradio input[type="radio"] + label:after {
    display: none;
}

input[readonly]:not(.datepicker), input[readonly]:not(.datepicker):hover, input[readonly]:not(.datepicker):focus,
input[disabled]:not(.datepicker), input[disabled]:not(.datepicker):hover, input[disabled]:not(.datepicker):focus {
    background: #f9f9f9;
    border: 1px solid #ccc;
    font-weight: 300;
    box-shadow: none;
}

.file-add-area {
    display: flex;
    gap: 0 16px;
}

.preview-area {
    position: relative;
    display: flex;
    gap: 0 16px;
}

.preview-area img,
.preview-area video,
.preview-area iframe {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.file-add-area .add-area {
    width: 100%;
}

.file-custom-area {
    position: relative;
    display: flex;
    max-width: 100%;
    width: 100%;
    gap: 4px;
}

.file-custom-area .txt-area p {
    max-width: calc(100% - 200px);
}

.file-custom-area .txt-area {
    position: relative;
    display: flex;
    flex: 1;
    gap: 30px;
}

.file-custom-area input[type=file],
.write-type .file-custom-area input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    text-indent: -99999px;
    max-width: 100%;
}

.file-custom-area .btn-file {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0;
    height: 40px;
    line-height: 38px;
    font-size: 14px;
    min-width: 80px;
    border: 1px solid var(--color-bk);
    width: 90px;
    vertical-align: top;
}

.file-custom-area .btn-file-del {
    position: relative;
    vertical-align: top;
    z-index: 1;
}

.lnk-add-area .add-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 4px;
    margin-bottom: 16px;
}

.lnk-add-area .add-area cite {
    padding-right: 16px;
    font-weight: 500;
}

.lnk-add-area .add-area input,
.write-type .lnk-add-area .add-area input {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

.card-add-list {
    margin-top: -1px;
}

.card-add-list > li {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 0 20px;
    border-top: 1px solid var(--color-gr50);
    background-color: #fff;
}
.card-add-list .ico-move {
    cursor:move;
}
.card-add-list >li > .ico-move {
    height: 100px;
    margin-right: 0;
}
.card-add-list > li:only-child > .ico-move {
    opacity:0;
    z-index:-1;
}
.card-add-list .txt-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
}
.card-add-list .file-txt {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--color-gr300);
}
.card-add-list .add-area {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}
.card-add-list .add-area li {
    margin-bottom: 10px;
}
.card-add-list .add-area li:only-child .ico-move {
    display:none;
} 
.card-add-list .add-area li:last-of-type {
    margin-bottom: 0;
}
.card-add-list .add-area li input[type=text] {
    display: inline-block;
    width: 180px;
    margin-right: 1px;
}
.card-add-list .add-area li .btn-area {
    display: inline-block;
}
.card-add-list .add-area li .btn-area button {
    margin-right: 1px;
}
.card-add-list .add-area li .btn-area button:last-of-type {
    margin-right: 0;
}

.write-type td .card-add-list {
    margin-top: 10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}

.p0 {
    width: 100px;
}

.p1 {
    width: 10%;
}

.p2 {
    width: 20%;
}

.p3 {
    width: 30%;
}

.p4 {
    width: 40%;
}

.p5 {
    width: 50%;
}

.p6 {
    width: 60%;
}

.p7 {
    width: 70%;
}

.p8 {
    width: 80%;
}

.p9 {
    width: 90%;
}

.p10 {
    width: 100% !important;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}
/* layout */
.wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
}
/* common */
.ac {
    text-align: center !important;
}

.al {
    text-align: left !important;
}

.ar {
    text-align: right !important;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fr + * {
    clear: both;
}

.clear {
    clear: both;
}

.hidden {
    position: absolute;
    top: -99999px;
    left: -99999px;
    font-size: 1px;
    color: #fff;
    opacity: 0;
}

.pc-block {
    display: block !important;
}

.ta-block {
    display: none !important;
}

.m-block {
    display: none !important;
}

.m-none {
    display: block !important;
}

.inlin-block {
    display: inline-block;
}

.fc-rd {
    color: var(--color-rd) !important;
}

.fc-bl {
    color: var(--color-spot) !important;
}

.fc-gn {
    color: var(--color-spot2) !important;
}

.fc-gr {
    color: var(--color-gr300) !important;
}

.fc-bk {
    color: var(--color-bk) !important;
}

.fc-wh {
    color: var(--color-bk) !important;
}

.fs-lg {
    font-size: 16px;
}

.fs-sm {
    font-size: 13px;
}

.fw-l {
    font-weight: 100 !important;
}

.fw-m {
    font-weight: 400 !important;
}

.fw-b {
    font-weight: 700 !important;
}

.ellipsis {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    width: 100%;
    overflow: hidden;
}

.txt-hide {
    position: absolute;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 0;
    white-space: nowrap;
    padding: 0;
    border: 0;
    font-size: 0;
    text-indent: -99999px;
}

.tbl-area {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.tbl-area:last-child {
    margin-bottom: 0;
}

.tbl-l,
.tbl-r {
    display: table-cell;
    vertical-align: middle
}

.tbl-r {
    text-align: right;
}
/*.input-area input {
    width: calc(100% - 110px);
}
.input-area input + .btn {
    margin-left: 6px;
    min-width: 100px;
}*/
.input-area {
    display: flex;
    justify-content:stretch;
    gap: 5px;
}
.input-area ~ .input-area {
    margin-top: 10px;
}

.input-area input[type=text] {
    max-width: 300px;
    width: 100%;
}
.input-area .input {
    max-width:300px;
    flex:1;
}
.input-area .input input ~ input {
    margin-top:5px;
}
.input-area .input + .btn {
    height:85px;
    line-height:83px;
}
.input-area .btn-area {
    display: flex;
    gap: 5px;
}

.fnc-area {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

.fnc-area .fnc-l,
.fnc-area .fnc-r {
    display: table-cell;
    vertical-align: middle;
    font-size: 0;
}

.fnc-area .fnc-r {
    text-align: right;
}

.fnc-area .fnc-l > *,
.fnc-area .fnc-r > * {
    margin-bottom: 10px;
}

.fnc-area .fnc-l > * {
    margin-right: 10px;
}

.fnc-area .fnc-l > *:last-child {
    margin-right: 0;
}

.fnc-area .fnc-r > * {
    margin-left: 10px;
}

.fnc-area .fnc-r > *:first-child {
    margin-left: 0;
}

.msg {
    font-size: 12px;
    color: var(--color-gr300);
}
/* -------------------------------------------------
    BTN
------------------------------------------------- */
/* btn */
.btn-cont,
.btn-flex-cont,
.btn-tbl-cont {
    margin-top: 30px;
}

.btn-cont {
    text-align: center;
    font-size: 0;
}

.btn-cont.ac {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.btn-cont.ar {
    text-align: right;
}

.btn-cont [class^=btn] {
    margin: 5px;
}

.btn-cont [class^=btn]:first-child {
    margin-left: 0;
}

.btn-cont [class^=btn]:last-child {
    margin-right: 0;
}

.btn-flex-cont {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 4px 10px;
}

.btn-flex-cont > * {
    flex: 1;
    min-width: 0;
}

.btn-tbl-cont {
    display: table;
    width: 100%;
}

.btn-tbl-cont .tbl-l,
.btn-tbl-cont .tbl-r {
    display: table-cell;
    vertical-align: top;
}

.btn-tbl-cont .tbl-r {
    text-align: right;
}

.btn-tbl-cont button,
.btn-tbl-cont a {
    margin-top: 5px;
}

.btn-block-cont [class^=btn] {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.btn-block-cont [class^=btn]:last-of-type {
    margin-bottom: 0;
}

.btn,
.btn-sm,
.btn-lg {
    font-weight: 400;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    overflow: hidden;
    transition-duration: 0.3s;
    transition-property: color, background-color;
    font-size: 14px;
    vertical-align: middle;
}

a.btn + a.btn,
a[class^=btn-] + a[class^=btn-] {
    margin-left: 6px;
}

.btn {
    padding: 0 20px;
    height: 40px;
    line-height: 38px;
    min-width: 60px;
}

.btn-sm {
    padding: 0 25px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    min-width: 50px;
}

.btn-lg {
    padding: 0 30px;
    font-size: 16px;
    height: 50px;
    line-height: 48px;
    min-width: 150px;
}
/* btn : default */
.btn,
.btn-sm,
.btn-lg {
    background-color: #fff;
    border: 1px solid var(--color-bk);
    color: var(--color-bk);
}

.btn:hover, .btn:focus,
.btn-sm:hover, .btn-sm:focus,
.btn-lg:hover, .btn-lg:focus {
    background-color: #fff;
    border: 1px solid var(--color-spot);
    color: var(--color-bk);
}
/* btn : spot2 */
.btn.spot,
.btn-sm.spot,
.btn-lg.spot {
    border-color: var(--color-spot);
    background-color: var(--color-spot);
    color: #fff;
    font-weight: 700;
}

.btn.spot:hover, .btn.spot:focus,
.btn-sm.spot:hover, .btn-sm.spot:focus,
.btn-lg.spot:hover, .btn-lg.spot:focus {
    border-color: #1d2b43;
    background-color: #1d2b43;
}
/* btn : spot2 */
.btn.spot2,
.btn-sm.spot2,
.btn-lg.spot2 {
    border-color: var(--color-spot2);
    background-color: var(--color-spot2);
    color: #fff;
}

.btn.spot2:hover, .btn.spot2:focus,
.btn-sm.spot2:hover, .btn-sm.spot2:focus,
.btn-lg.spot2:hover, .btn-lg.spot2:focus {
    border-color: var(--color-spot2);
    background-color: var(--color-spot2);
    color: #fff;
}
/* btn : spot3 */
.btn.spot3,
.btn-sm.spot3,
.btn-lg.spot3 {
    border-color: var(--color-gr50);
    background-color: var(--color-gr50);
    color: var(--color-gr500);
}

.btn.spot3:hover, .btn.spot3:focus,
.btn-sm.spot3:hover, .btn-sm.spot3:focus,
.btn-lg.spot3:hover, .btn-lg.spot3:focus {
    border-color: var(--color-gr50);
    color: var(--color-bk);
}
/* btn : spot4 */
.btn.spot4,
.btn-sm.spot4,
.btn-lg.spot4 {
    border-color: var(--color-gr50);
    color: var(--color-gr500);
}

.btn.spot4:hover, .btn.spot4:focus,
.btn-sm.spot4:hover, .btn-sm.spot4:focus,
.btn-lg.spot4:hover, .btn-lg.spot4:focus {
    border-color: var(--color-gr50);
    color: var(--color-bk);
}

.btn.round,
.btn-sm.round,
.btn-lg.round {
    border-radius: 2em;
}

.btn.width,
.btn-sm.width,
.btn-lg.width {
    width: 200px;
}

.btn.full,
.btn-sm.full,
.btn-lg.full {
    width: 100%;
}

.btn-uline {
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

.btn-uline.spot {
    color: var(--color-spot);
}

.btn-more {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0 30px;
    height: 50px;
    line-height: 48px;
    font-size: 14px;
    width: 200px;
    border: 1px solid var(--color-gr50);
    text-align: center;
    box-sizing: border-box;
    padding-right: 54px;
}

.btn-more:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: calc(50% - 54px);
    width: 24px;
    height: 24px;
    background: url('../images/common/arr.svg') center center no-repeat;
    transform: translateY(-50%) rotate(-90deg);
}

.btn-close {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    margin: 0;
    text-indent: -99999px;
}

.btn-close:before,
.btn-close:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--color-bk);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-close:after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close.lg:before,
.btn-close.lg:after {
    width: 35px;
    height: 1px;
    color: var(--color-bk);
}

.btn-close.sm {
    width: 16px;
    height: 16px;
}

.btn-close.sm:before,
.btn-close.sm:after {
    width: 12px;
}

.btn-close.gr:before,
.btn-close.gr:after {
    background-color: var(--color-gr200);
}

.btn-close.spot {
    background-color: rgba(0,0,0,.5);
}

.btn-close.spot:before,
.btn-close.spot:after {
    background-color: #fff;
}

.btn-etc {
    position: absolute;
    right: 3px;
    top: 3px;
    text-indent: -99999px;
    width: 16px;
    height: 16px;
    border-radius: 1px;
    background: url('../images/common/ico_etc.svg') center center no-repeat rgba(0,0,0,.25);
}

.btn-top {
    right: 20px;
    bottom: 20px;
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border: 1px solid var(--color-gr50);
    box-shadow: var(--box-shadow);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    z-index: 10;
    text-indent: -99999px;
}

.btn-top:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background: url('../images/common/arr.svg') center center no-repeat;
    transform: translate(-50%, -50%) rotate(90deg);
}

.btn-zzim {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    text-indent: -9999px;
    background: url('../images/common/ico_zzim_wh.svg') center center no-repeat;
    z-index: 1;
}

.btn-zzim.bk {
    background-image: url('../images/common/ico_zzim.svg');
}

.btn-zzim.is-active {
    background-image: url('../images/common/ico_zzim_spot.svg');
}

.btn-zzim-r,
.btn-share-r {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--color-gr50);
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 10px;
    color: var(--color-gr300);
}

.btn-zzim-r:before,
.btn-share-r:before {
    content: " ";
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
}

.btn-zzim-r:before {
    background-image: url('../images/common/ico_zzim_gr.svg');
}

.btn-zzim-r.is-active:before {
    background-image: url('../images/common/ico_zzim_spot.svg');
    animation: zzim 1s ease-in;
}

@keyframes zzim {
    0% {
        opacity: .5;
        transform: translateZ(0) rotateY(90deg) scale(2);
    }

    40% {
        opacity: 1;
        transform: scale(.8);
    }

    60% {
        opacity: .8;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: translateZ(0) rotateY(0) scale(1);
    }
}

.btn-share-r:before {
    background-image: url('../images/common/ico_share_gr.svg');
}

.btn-add {
    width: 40px;
    height: 40px;
    background: url('../images/common/ico_add_wh.svg') center center no-repeat var(--color-gr50);
}

.btn-help {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../images/common/btn_help.svg') no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
}

.btn-sel-lg {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
    height: 50px;
    line-height: 48px;
    padding: 0 45px 0 10px;
    font-size: 15px;
    font-weight: 400;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gr100);
    overflow: hidden;
}

.btn-sel-lg:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 48px;
    background: url('../images/common/sel_arr_bg.svg') right no-repeat var(--color-gr30);
}

.btn-sel-lg span {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/* -------------------------------------------------
    ICON
------------------------------------------------- */
[class^=ico-] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    margin-right: 5px;
    width: 24px;
    height: 24px;
}

i.bi {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
}

.btn .bi {
    margin-right: 5px;
    margin-top: -3px;
}

[class^=ico-].sm {
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

[class^=ico-].back {
    margin-left: 5px;
}
/*.btn [class^=ico-],
.btn-sm [class^=ico-] {
    margin-left: -5px;
}*/
.ico-sch {
    background-image: url('../images/common/ico_sch.svg');
}

.ico-user {
    background-image: url('../images/common/ico_user.svg');
}

.ico-logout {
    background-image: url('../images/common/ico_logout.svg');
}

.ico-down {
    background-image: url('../images/common/ico_down.svg');
}

.ico-more {
    position: relative;
    margin: 0;
}

.ico-more:before,
.ico-more:after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--color-gr400);
    transform: translate(-50%, -50%);
}

.ico-more:after {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.ico-zzim {
    background-image: url('../images/common/ico_zzim.svg');
}

.ico-zzim.spot {
    background-image: url('../images/common/ico_zzim_spot.svg');
}

.ico-share {
    background-image: url('../images/common/ico_share.svg');
}

.ico-move {
    background-image: url('../images/common/ico_move_gr.svg');
}
/* jquery-plugin :  datepicker */
.datepicker-box {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.datepicker-box::after {
    content: " ";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 30px;
    height: 34px;
    background-image: url('../images/common/sel_arr_bg.svg');
    border-radius: 0 6px 6px 0;
}

.datepicker-box.block {
    display: block;
}

.datepicker-box + .dash {
    margin: 0 20px 0 -30px !important;
}

input[type=text].datepicker {
    display: inline-block !important;
    width: 130px;
    padding-right: 30px;
    box-sizing: border-box;
    background: url('../images/common/ico_calendar.svg') right center no-repeat #fff;
}
/*.datepicker + .ui-datepicker-trigger {
    position:relative;
    vertical-align:middle;
}*/
.ui-datepicker-trigger {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding: 0;
    margin-right: 20px;
}

.ui-datepicker-trigger img {
    display: block;
    width: 100%;
}

.ui-datepicker {
    background-color: #fff;
    margin-top: -2px;
    border: 1px solid var(--color-gr100);
    width: 100%;
    max-width: 300px;
    padding: 20px 10px 10px;
    display: none;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 1;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0 70px 0 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    text-indent: -999px;
    background-repeat: no-repeat;
    cursor: pointer;
    background: #333;
    border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev {
    right: 40px;
}

.ui-datepicker .ui-datepicker-next {
    right: 5px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -3px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
}

.ui-datepicker .ui-datepicker-next span {
    /*left:auto;
    right:50%;
    margin-right:-1px;*/
    transform: rotate(135deg);
}

.ui-datepicker .ui-datepicker-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    line-height: 30px;
    text-align: left;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 80px;
    vertical-align: middle;
    height: 30px;
    font-size: 1.5rem;
    padding-left: 10px;
    padding-right: 30px;
}

.ui-datepicker select.ui-datepicker-year {
    margin-right: 5px;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9rem;
    border-collapse: collapse;
    margin: 10px 0 .2em;
    text-align: center;
}

.ui-datepicker th {
    padding: .3em .3em;
    color: #333;
    text-align: center;
    /*height:14px;*/
    font-size: 1.4rem;
    font-weight: bold;
    border: 0;
}

.ui-datepicker th.ui-datepicker-week-end span[title=Sunday] {
    color: #c51162;
}

.ui-datepicker td:first-child a {
    color: #c51162;
}

.ui-datepicker tr:first-child td {
    border-top: 0;
}

.ui-datepicker td {
    text-align: center;
    padding: .2em 0;
    border: 0;
    height: 14px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-decoration: none;
    border-bottom: 0;
    margin: 0 auto;
    color: #333;
    font-size: 1.4rem;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

.due {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    font-size: 1.5rem;
    color: #333;
    position: relative;
    top: 3px;
}

.ui-datepicker .ui-state-highlight {
    background: #c6d6e6;
    color: #000;
    border-radius: 50%;
}

.ui-datepicker .highlight2 {
    background: #6a6f8d;
    color: #fff;
    border-radius: 50%;
}

.ui-datepicker .highlight3 {
    background: #fff;
    border: 2px solid #ffb100;
    line-height: 16px;
    box-sizing: border-box;
    color: #000;
}
/* popup */
.dim,
.dim-header {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 50;
}

.dim.wh {
    background-color: #fff;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 450px;
    width: calc(100% - 30px);
    background-color: #fff;
    z-index: 51;
    box-sizing: border-box;
}

.popup .pop-header {
    position: relative;
    height: 60px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

.popup .pop-header h1 {
    display: flex;
    height: 60px;
    align-items: center;
    font-size: 18px;
    color: var(--color-bk);
}

.popup .btn-close {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.popup .pop-body {
    padding: 16px 16px 20px;
    max-height: calc(90vh - 60px);
    overflow-y: auto;
    box-sizing: border-box;
}

.popup .pop-body::-webkit-scrollbar {
    width: 8px;
}

.popup .pop-body::-webkit-scrollbar-thumb {
    background-color: #DEE2E6;
    border-radius: 2em;
}

.popup .pop-body::-webkit-scrollbar-track {
    background-color: transparent;
}

.popup-img {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    width: calc(100% - 30px);
    background-color: #fff;
    z-index: 51;
    box-sizing: border-box;
}

.popup-img img {
    display: block;
    width: 100%;
}

.popup-img .btn-cont {
    width: 100%;
    position: absolute;
    bottom: 30px;
}

.popup-img .btn-close {
    top: 10px;
    right: 16px;
}

.popup-img .btn-close:before,
.popup-img .btn-close:after {
    background-color: #fff;
}

.popup-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 320px;
    width: calc(100% - 32px);
    background-color: #fff;
    z-index: 101;
    padding: 15px 0 0;
    /* border: 1px solid var(--color-gr50);*/
    border: none;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transform: translate(-50%, -50%);
}

.popup-alert .pop-header {
    padding: 15px 0 0;
    text-align: center;
}

.popup-alert .pop-body {
    padding: 0 15px 15px 15px;
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
}

.popup-alert .pop-header h1 {
    display: block;
    padding: 0;
    font-size: 15px;
    color: var(--color-spot);
    font-weight: 700;
}

.popup-alert .btn-flex-cont {
    margin-top: 0;
    box-sizing: border-box;
    padding: 0;
    gap: 0;
    border-top: 1px solid var(--color-gr50);
    overflow: hidden;
}

.popup-alert .btn-flex-cont .btn {
    display: block;
    min-width: 0;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    border: none;
}

.popup-alert .btn-flex-cont .btn {
    border: none;
}
.popup-view-area {
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#fff;
    overflow-x:hidden;
    overflow-y:auto;
    z-index: 51;
}
.popup-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1200px;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto;
    box-shadow: 0 0 10px 10px rgba(0,0,0,.05);
    padding-left: 50px;
    padding-right: 50px;
    background-color:#fff;
}

.popup-view .pop-header {
    border-bottom: 1px solid var(--color-gr50);
}

.popup-view .pop-header h1 {
    display: flex;
    align-items: center;
    padding:10px 0;
    min-height: 90px;
    box-sizing:border-box;
    font-size: 30px;
    font-weight: 500;
    margin-right: 40px;
}
.popup-view .pop-header .btn-close {
    top: 30px;
    right: 50px;
    width: 30px;
    height: 30px;
}

.popup-view .pop-header .btn-close:before,
.popup-view .pop-header .btn-close:after {
    width: 30px;
}

.popup-view .pop-body {
    padding: 40px 0;
}

.pop-view-info {
    position:relative;
    margin-top: -40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-gr50);
    min-height:70px;
    line-height:70px;
}

.pop-view-info .view-fnc {
    position:absolute;
    top:10px;
    right:0;
}

.pop-view-info .view-info dt,
.pop-view-info dd {
    display:inline-block;
    vertical-align:middle;
}
.pop-view-info .view-info dt {
    margin-right:10px;
    font-weight:500;
}
.pop-view-info .share-area {
    display:inline-block;
}
/*.layer-etc {
    display: none;
    position: fixed;
    border: 1px solid var(--color-gr200);
    background: #fff;
    min-width: 60px;
    box-sizing: border-box;
}
.layer-etc button,
.layer-etc a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    font-size: 12px;
    color: #666;
}
.layer-etc button:hover,
.layer-etc a:hover {
    background-color: #f5f5f5;
    color: var(--color-bk);
}
.layer-etc li ~ li {
    border-top: 1px solid #ebeef3;
}
.layer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 400px;
    width: calc(100% - 30px);
    z-index: 10;
    border-radius: var(--border-radius);
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    background-color: #fff;
}
.layer .pop-header {
    height: 40px;
    padding-left: 16px;
    padding-right: 16px;
}
.layer .pop-header h1 {
    font-size: 16px;
    color: var(--color-bk);
    letter-spacing: -0.08em;
    line-height: 40px;
}
.layer .pop-body {
    box-sizing: border-box;
    padding: 20px 16px;
    max-height: calc(90vh- 40px);
    overflow-y: auto;
}
.layer .btn-cont {
    margin-top: 10px;
}*/
.tooltip-area {
    position: relative;
}

.tooltip-area.is-active .popup-tooltip {
    display: block;
}

.popup-tooltip {
    display: none;
    position: absolute;
    margin-top: 5px;
    border: 1px solid var(--color-gr50);
    border-radius: var(--border-radius);
    background-color: #fff;
    text-align: left;
    width: 300px;
    box-sizing: border-box;
    z-index: 3;
    max-width: calc(100vw - 50px);
    box-shadow: 10px 10px 10px rgba(0,0,0,.08);
}

.ar .popup-tooltip {
    left: auto;
    right: 0;
}
/*.popup-tooltip .pop-header {
    position: relative;
    height: 60px;
    padding: 0 20px;
}
.popup-tooltip .pop-header h1 {
    font-size: 15px;
    font-weight: 700;
    line-height: 60px;
    color: #3c3e98;
}*/
.popup-tooltip .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
}

.popup-tooltip .pop-header .btn-close:before,
.popup-tooltip .pop-header .btn-close:after {
    background-color: #aaa;
}

.popup-tooltip .pop-body {
    padding: 16px;
    box-sizing: border-box;
    max-height: 250px;
    overflow-y: auto;
    font-size: 13px;
}

.popup-tooltip .pop-body p ~ p {
    margin-top: 20px;
}

.layerpopup-sm-area {
    position: relative;
}

.layerpopup-sm-area.is-active .layerpopup-sm {
    display: block;
}

.btn-layerpopup-sm-toggle {
    color: #aaa;
}

.layerpopup-sm {
    display: none;
    position: absolute;
    margin-top: 10px;
    border: 1px solid var(--color-gr50);
    border-radius: var(--border-radius);
    background-color: #fff;
    text-align: left;
    width: 420px;
    box-sizing: border-box;
    padding-bottom: 20px;
    z-index: 3;
    box-shadow: var(--box-shadow);
    max-width: calc(100vw - 50px);
}

.ar .layerpopup-sm {
    left: auto;
    right: 0;
}

.layerpopup-sm .pop-header {
    position: relative;
    height: 60px;
    padding: 0 20px;
}

.layerpopup-sm .pop-header h1 {
    font-size: 15px;
    font-weight: 700;
    line-height: 60px;
}

.layerpopup-sm .btn-close {
    position: absolute;
    right: 20px;
    top: 18px;
}

.layerpopup-sm .pop-body {
    padding: 20px 54px 0 20px;
    box-sizing: border-box;
    max-height: 250px;
    overflow-y: auto;
}

.layerpopup-sm .pop-header + .pop-body {
    padding-top: 0;
}

.popup-tooltip .pop-body p ~ p {
    margin-top: 20px;
}
/* -------------------------------------------------
    component
------------------------------------------------- */
.slick-slider,
.slick-list {
    position: relative;
    z-index: 0;
}

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--color-gr50);
    background-color: rgba(255,255,255,.5);
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../images/common/arr.svg');
    text-indent: -9999px;
    z-index: 2;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
    transform: rotate(-180deg);
}

.slick-prev:hover,
.slick-next:hover {
    background-color: #fff;
}
/* tabs */
.tabs-normal .tabs-cont {
    display: none;
}

.tabs-nav {
    margin-bottom: 20px;
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--color-gr50);
}

.tabs-nav li {
    display: table-cell;
    margin-right: 30px;
}

.tabs-nav li:last-of-type {
    margin-right: 0;
}

.tabs-nav li a {
    position: relative;
    display: block;
    font-size: 18px;
    color: var(--color-gr300);
    padding: 0 5px;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    white-space: nowrap;
    transition: all .3s;
}

.tabs-nav li a:hover,
.tabs-nav li a.is-active {
    color: var(--color-spot);
    font-weight: 700;
}

.tabs-nav li a.is-active:before {
    content: " ";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-spot);
}

.tabs-nav-sm {
    margin-bottom: 24px;
    font-size: 0;
}

.tabs-nav-sm li {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
}

.tbl-area .tabs-nav-sm {
    margin-bottom: 0;
}

.tbl-area .tabs-nav-sm li {
    margin-bottom: 0;
}

.tabs-nav-sm li a {
    display: block;
    font-size: 16px;
    color: var(--color-gr300);
    padding: 0 20px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    border-radius: 2em;
    background-color: #fff;
    transition: all .3s;
}

.tabs-nav-sm li a:hover {
    color: var(--color-spot);
    background-color: var(--color-gr30-spot);
}

.tabs-nav-sm li a.is-active {
    background-color: var(--color-spot2);
    color: #fff;
    font-weight: 700;
}

.img-full {
    display: block;
}

.img-full img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.scroll-cus::-webkit-scrollbar {
    width: 8px;
}

.scroll-cus::-webkit-scrollbar-thumb {
    background-color: #DEE2E6;
    border-radius: 2em;
}

.scroll-cusr::-webkit-scrollbar-track {
    background-color: transparent;
}

.tit,
.tit-sm {
    display: block;
}

.tit {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-bk);
}

.tit .txt-sm {
    font-size: 14px;
    font-weight: 400;
}

.tit .txt-sm em,
.tit .txt-sm strong {
    font-weight: 700;
}

.tit-sm {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-bk);
}

.tit-xsm {
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 15px;
    color: var(--color-bk);
}

.tit-sm:first-child {
    margin-top: 0;
}

.tit-txt {
    color: #777;
    margin-top: 3px;
}

.tit + .tit-txt {
    margin-top: -17px;
    margin-bottom: 30px;
}

.tit-sm + .tit-txt,
.tit-xsm + .tit-txt {
    margin-top: -7px;
    margin-bottom: 10px;
}
/*.tit-area {
    margin-bottom: 30px;
}
.tit-area p {
    margin-top: 3px;
    color: #777;
}
*/
.tit-area .tit,
.tit-area .tit-sm {
    margin-bottom: 0;
}

.shadow-box {
    margin-bottom: 20px;
    padding: 20px 16px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    box-sizing: border-box;
}

.box-none {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 270px;
}

.bg-box {
    margin-bottom: 20px;
    background-color: var(--color-gr30);
    border-radius: var(--border-radius);
    padding: 16px;
    color: var(--color-gr300);
}

.bg-box:last-child {
    margin-bottom: 0;
}

.box-tit {
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
    color: var(--color-bk);
}

.lnk-box {
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--color-gr100);
    border-radius: var(--border-radius);
    padding: 16px;
    color: var(--color-gr300);
    font-size: 13px;
    align-items: center;
}

.lnk-box .img-area {
    width: 64px;
}

.lnk-box .img-area img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.lnk-box .txt-area {
    padding-left: 10px;
}

.lnk-box:first-child {
    margin-top: 0;
}

.lnk-box cite {
    display: block;
    color: var(--color-bk);
}

.lnk-box span {
    color: var(--color-spot)
}

.bullet,
.bullet-none,
.bullet-demical {
    margin: 10px 0;
}

.bullet:first-child,
.bullet-none:first-child,
.bullet-demical:first-child {
    margin-top: 0px;
}

.bullet:last-child,
.bullet-none:last-child,
.bullet-demical:last-child {
    margin-bottom: 0px;
}
/*.bullet:last-child,
.bullet-none:last-child {
	margin-bottom:0;
}*/
.bullet > li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 5px;
}

.bullet > li:last-child {
    margin-bottom: 0;
}

.bullet > li:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-gr300);
}

.bullet.fs-sm > li:before {
    top: 10px;
}

.bullet-none > li {
    position: relative;
    margin-bottom: 5px;
}

.bullet li:last-child,
.bullet-none li:last-child {
    margin-bottom: 0;
}

.bullet-demical {
    counter-reset: listCounter;
}

.bullet-demical > li:before {
    display: inline-block;
    margin-right: 5px;
    counter-increment: listCounter;
    content: counter(listCounter) " . ";
}

.bullet-demical > li {
    margin-bottom: 5px;
}

.bullet-demical > li:last-child {
    margin-bottom: 0;
}

.board-list li ~ li {
    margin-top: 20px;
}

.board-list li a {
    display: block;
    background-color: #fff;
    /*    border: 1px solid #e0e0e0;*/
    box-sizing: border-box;
    border-radius: var(--border-radius);
    padding: 25px;
}

.board-list .table-area {
    color: var(--color-gr200);
    font-size: 14px;
    margin-bottom: 10px;
    vertical-align: top;
}

.board-list .left > * {
    margin-right: 12px;
}

.board-list .right span ~ span:before {
    content: " ";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: var(--color-gr200);
    vertical-align: middle;
    margin: 0 10px;
}

.board-list p,
.board-list .txt-cont {
    font-size: 24px;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-bk);
}

.info-block dt {
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--color-bk);
}

.info-block dd {
    margin-bottom: 20px;
}

.down-list li ~ li {
    margin-top: 10px;
}

.down-list a {
    display: flex;
    align-items: center;
    background-color: var(--color-gr30);
    border-radius: var(--border-radius);
    padding: 14px 20px;
    color: var(--color-bk);
}

.down-list a:hover {
    background-color: var(--color-gr100);
}

.down-list p {
    flex: 1;
    padding-right: 20px;
}

.txt-list li {
    position: relative;
    margin-top: 16px;
}

.txt-list li a {
    display: block;
    color: var(--color-gr300);
}

.txt-list li a:hover {
    color: var(--color-gr500);
}

* ~ .percentbar-area {
    margin-top: 10px;
}

.bg-list {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.bg-list li {
    flex: 1;
    background-color: var(--color-gr30);
    padding: 15px;
    border-radius: var(--border-radius);
    color: var(--color-bk);
}

.bg-list li cite {
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.percentbar-area .txt-area {
    margin-bottom: 10px;
}

.percentbar {
    position: relative;
}

.percentbar > * {
    height: 12px;
    border-radius: 2em;
}

.percentbar .bg {
    width: 100%;
    background-color: var(--color-gr30);
}

.percentbar .bar {
    background-color: var(--color-rd);
    position: absolute;
    top: 0;
    left: 0;
}

.percentbar.lg > div {
    height: 16px;
}

.percentbar.lg .bar {
    background-color: var(--color-spot);
}
/* table*/
/*common*/
.list-type table,
.view-type table,
.info-type table {
    clear: both;
    border-top: 2px solid var(--color-bk);
}

.list-type table {
    border-top: 1px solid
}

.list-type th,
.list-type td {
    padding: 15px 5px;
    min-height: 44px;
    border-bottom: 1px solid var(--color-gr100);
    text-align: center;
}

.list-type thead th {
    background-color: var(--color-gr30);
    font-weight: 500;
}

.list-type .bi {
    margin-right: 5px;
    vertical-align: middle;
}

.list-type tbody .ellipsis {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    width: auto;
    color: var(--color-bk);
    box-sizing: border-box;
    vertical-align: middle;
}

.list-type .list-tit {
    display: flex;
    align-items: center;
}

.list-type .list-tit .label {
    white-space: nowrap;
    margin-left: 5px;
}

.list-type tbody a.ellipsis:hover {
    text-decoration: underline;
}

.view-type {
    clear: both;
}

.view-type thead th {
    position: relative;
    border-bottom: 1px solid var(--color-gr50);
}

.view-type .view-info {
    padding-right: 120px;
}
.view-type .view-info:only-child {
    padding-right: 0;
}

.view-type .view-fnc {
    position: absolute;
    top: 25px;
    right: 0;
    width: 120px;
    font-size: 0;
    text-align: right;
}

.view-type .view-fnc > * {
    margin-left: 10px;
}

.view-type .view-fnc .layerpopup-sm-area {
    display: inline-block;
}

.view-type img {
    display: block;
    max-width: 100%
}

.view-type > table > thead > tr > th {
    padding: 25px 0;
    text-align: left;
}

.view-tit {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.view-tit span {
    color: var(--color-gr200);
}

.view-type > table > tbody > tr > th {
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.view-type > table > tbody > tr > td {
    padding: 0;
}

.view-type > table ~ table {
    border-top-color: var(--color-gr100);
}

.view-type .info {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
}

.view-type .info dt,
.view-type .info dd {
    display: inline-block;
}

.view-type .info dt {
    position: relative;
    color: #777;
    padding-right: 14px;
    margin-right: 14px;
}

.view-type .info dt:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    width: 1px;
    height: 10px;
    background-color: #ddd;
}

.view-type .info dt.txt-hide {
    margin: 0;
    padding: 0;
}

.view-type .info dt.txt-hide:after {
    display: none;
}

.view-type .info dd {
    margin-right: 50px;
    color: var(--color-gr300);
}

.view-type #boardContents {
    padding: 32px;
}

.view-type .file-area table tr:last-child td {
    border-bottom: none;
}

#boardContents h1,
#boardContents h2,
#boardContents h3,
#boardContents h4,
#boardContents h5,
#boardContents h6 {
    margin: initial;
    padding: initial;
    line-height: 1.8em;
}

#boardContents h1 {
    font-size: 2em;
}

#boardContents h2 {
    font-size: 1.5em;
}

#boardContents h3 {
    font-size: 1.17em;
}

#boardContents h4 {
    font-size: 1em;
}

#boardContents h5 {
    font-size: 0.83em;
}

#boardContents h6 {
    font-size: 0.67em;
}

#boardContents ol,
#boardContents ol li {
    list-style: decimal;
}

#boardContents ul,
#boardContents ul li {
    list-style: disc;
}

.reply-area {
    padding: 20px 0;
    border-top: 1px solid var(--color-bk);
}
.btn-cont ~ .reply-area,
.btn-tbl-cont ~ .reply-area {
    margin-top: 50px;
}

.view-type + .reply-area {
    margin-top: -1px;
}

.reply-tit {
    font-size: 18px;
    font-weight: 700;
}

.reply li {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-gr50);
}

.reply-info cite {
    display: inline-block;
    font-weight: 700;
    vertical-align: middle;
}

.reply-info span {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--color-gr300);
}

.reply-info span:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    margin-right: 5px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--color-gr300);
}

.reply-txt {
    margin-top: 5px;
}

.reply-write {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-gr50);
}

.reply .btn-close {
    top: 20px;
}

.reply-write cite {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.reply-write .reply-btn-cont {
    margin-top: 10px;
    text-align: right;
}

.reply-re {
    margin-top: 20px;
}

.reply-re .reply-write,
.reply-re .reply {
    margin-left: 50px;
}

.reply-re .reply-write:before,
.reply-re .reply li:before {
    content: " ";
    position: absolute;
    left: -30px;
    width: 10px;
    height: 10px;
    border-left: 1px solid var(--color-gr400);
    border-bottom: 1px solid var(--color-gr400);
}

.reply-re .reply li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.required {
    display: inline-block;
    color: var(--color-rd);
    font-style: normal;
    font-size: 16px;
}

.write-type {
    clear: both;
}

.write-type + .write-type {
    border-top: none;
}

.write-type table {
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid var(--color-gr50);
}

.write-type th,
.write-type td {
    border-bottom: 1px solid var(--color-gr50);
}

.write-type th {
    font-weight: 400;
    vertical-align: middle;
    padding: 17px 15px;
    box-sizing: border-box;
    height: 60px;
    vertical-align: top;
    background-color: var(--color-gr30);
}

.write-type td {
    padding: 5px 10px;
}

.write-type td > * {
    margin: 5px;
}
/*.write-type input[type=text],
.write-type input[type=password],
.write-type input[type=number],
.write-type input[type=email],
.write-type input[type=tel],*/
.write-type input:not([type=checkbox]),
.write-type input:not([type=radio]),
.write-type select,
.write-type textarea {
    /* max-width: 350px;*/
    width: calc(100% - 10px);
}

.write-type .write-flex-area {
    display: flex;
    max-width: 350px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    gap: 0 4px;
}

.write-type .write-flex-area .mr20 {
    white-space: nowrap;
}

.write-type .write-flex-area.full {
    max-width: 100%;
}

.write-type .write-flex-area .btn {
    padding: 0;
}

.write-type .zipcode {
    max-width: 350px;
    font-size: 0;
}

.write-type .zipcode .btn {
    width: 110px;
    text-align: center;
    padding: 0;
    margin-left: 4px;
}

.write-type .zipcode input {
    width: calc(100% - 114px);
}

.write-type .block {
    display: block;
    margin-top: 10px;
}

.write-type .msg {
    margin-top: 10px;
    vertical-align: middle;
}

.write-type .msg:first-child {
    margin-top: 0;
}

.write-type input.full,
.write-type select.full {
    width: 100%;
    max-width: 100%;
}

.write-type input.q0 {
    width: 100px;
}

.write-type input.q1 {
    width: calc((100% - 30px) / 4);
}

.write-type input.q2 {
    width: calc((100% - 10px) / 2);
}

.write-type input.q3 {
    width: calc((100% - 30px) / 3 * 2);
}

.write-type input.q4 {
    width: 100%;
}

.write-type .btn-cont:first-child {
    margin-top: 0;
}

.write-type .btn-cont + .file-add-area,
.write-type .btn-cont + .lnk-add-area {
    margin-top: 10px;
}

.tbl-list-type {
    border-top: 1px solid var(--color-gr500);
}

.tbl-list-type .tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: 1px solid var(--color-gr100);
}

.tbl-list-type .tr > * {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 24px 10px;
    box-sizing: border-box;
}

.tbl-list-type .thead .tr > * {
    padding: 19px 10px;
    color: var(--color-bk);
}

.tbl-list-type .thead .tr ul {
    display: flex;
    justify-content: space-around;
}

.tbl-list-type .tr .checkradio {
    min-height: auto;
}
/*.tbl-list-type .tr .checkradio label::before {
    margin-right: 28px;
}*/
.tbl-list-type .tr h2 {
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    word-break: keep-all;
}
/* .tbl-list-type .tr div:first-child,
.tbl-list-type .tr h2:first-child {
    border-right: 1px solid var(--color-gr100);
}
 */
.col-w100 {
    width: 100px;
}

.col-w120 {
    width: 120px;
}

.col-w140 {
    width: 140px;
}

.col-w160 {
    width: 160px;
}

.col-w180 {
    width: 180px;
}

.col-w200 {
    width: 200px;
}

.col-w220 {
    width: 220px;
}

.col-w240 {
    width: 240px;
}

.col-w260 {
    width: 260px;
}

.col-w280 {
    width: 280px;
}

.col-w300 {
    width: 300px;
}
/* info-type */
.info-type.border-gr table {
    border-top: 1px solid var(--color-gr100);
}

.info-type {
    position: relative;
    clear: both;
}

.info-type table {
    clear: both;
    border-top: 1px solid var(--color-bk);
    border-bottom: 1px solid var(--color-gr100);
}

.info-type thead th {
    padding: 15px 10px;
    min-height: 44px;
    box-sizing: border-box;
    *height: auto;
    border-bottom: 1px solid var(--color-gr100);
    background-color: var(--color-gr30);
    text-align: center;
}

.info-type th {
    color: var(--color-bk);
    font-weight: 400;
}

.info-type th,
.info-type td {
    padding: 15px 10px;
    min-height: 44px;
    box-sizing: border-box;
    *height: auto;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-gr100);
    border-left: 1px solid var(--color-gr100);
    text-align: center;
}

.info-type th:first-child,
.info-type td:first-child {
    border-left: none;
}
/* PAGING */
.paging {
    width: 100%;
    color: var(--color-gr200);
    font-style: normal;
    margin: 48px 0 28px;
    font-weight: bold;
    text-align: center;
    font-size: 0;
}

.paging img {
    vertical-align: middle;
}

.paging a,
.paging .current {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    vertical-align: middle;
    margin: 2px;
    font-size: 14px;
    color: var(--color-gr200);
    border-radius: 2px;
    border: 1px solid var(--color-gr100);
}

.paging .current {
    color: #fff;
    background-color: var(--color-spot);
    border: 1px solid var(--color-spot);
}

.paging a:hover {
    background-color: #fafafa;
    color: var(--color-bk);
}

.paging a span {
    position: absolute;
    z-index: -1;
    visibility: hidden;
}

.paging .first,
.paging .prev,
.paging .next,
.paging .last {
    position: relative;
    border: 1px solid var(--color-gr100);
}

.paging .first {
    background: url("../images/common/btn_first.svg") center no-repeat;
    border-color: var(--color-gr100);
}

.paging .prev {
    background: url("../images/common/btn_prev.svg") center no-repeat;
    margin-right: 8px;
}

.paging .next {
    background: url("../images/common/btn_next.svg") center no-repeat;
    margin-left: 8px;
}

.paging .last {
    background: url("../images/common/btn_last.svg") center no-repeat;
}
/* -------------------------------------------------
    SITE-HEADER
------------------------------------------------- */
.site-header {
    position: absolute;
    width: 100%;
    z-index: 10;
    height: 120px;
    border-bottom: 1px solid var(--color-gr100);
}
/*.site-header:before,
.site-header:after {
    content: " ";
    position: absolute;
    top: 50px;
    width: 100%;
    height: 1px;
    background-color: var(--color-gr100);
}
.site-header:before {
    top: 84px;
}
.site-header:after {
    top: 139px;
}*/
.m-site-header {
    display: none;
}

.site-header .header-top {
    position: relative;
    display: flex;
    padding-top: 27px;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: center;
}

.site-header .header-fnc {
    position: absolute;
    right: 0;
    top: 93px;
    z-index: 1;
}

.site-header .logo a,
.site-header .logo img {
    display: block;
}

.gsch-oepn-area {
    position: absolute;
    right: 0;
    bottom: 13px;
    display: flex;
    align-items: center;
    max-width: 350px;
    width: 100%;
    background-color: var(--color-gr30);
    border-radius: 2em;
    box-sizing: border-box;
}

.gsch-oepn-area p {
    flex: 1;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--color-gr200);
}

.gsch-oepn-area .ico-sch {
    margin-right: 20px;
}

.gsch-oepn-area .btn-gsch-open {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.gsch-area {
    display: none;
    position: absolute;
    max-width: 420px;
    top: 0;
    padding-top: 17px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    /*transition:background .5s;*/
}
/*.gsch-area .btn-gsch-open {
    display: block;
    position: absolute;
    height: 50px;
    width: 100%;
    top: 0;
    left: 0;
    text-indent: -9999px;
}
.gsch-area .btn-gsch-close,
.gsch-area .gsch-cont {
    display: none;
}*/
.gsch-area.is-active {
    display: block;
    margin-top: -30px;
    padding-top: 47px;
    height: auto;
    width: 100%;
    max-width: 100%;
    background: #fff;
    z-index: 3;
    /* animation:gsch .5s ease-in;*/
}

@keyframes gsch {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

.gsch-area.is-active .btn-gsch-open {
    display: none;
}

.gsch-area.is-active .btn-gsch-close,
.gsch-area.is-active .gsch-cont {
    display: block;
}

.gsch-area.is-active .wrap {
    max-width: 480px;
}

.gsch-area.is-active .gsch {
    display: flex;
    width: 100%;
}

.gsch-area.is-active .btn-gsch-close {
    width: 50px;
}

.gsch {
    font-size: 0;
    display: block;
    text-align: center;
    width: 420px;
}

.gsch .sch {
    display: inline-block;
    margin: 0 auto;
    font-size: 0;
    background-color: var(--color-gr30);
    border-radius: 25px;
    width: 100%;
}

.gsch input,
.gsch .btn-gsch {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
}

.gsch input {
    background: none;
    border: none;
    width: calc(100% - 50px);
    border-radius: 0;
}

.gsch .btn-gsch {
    font-size: 16px;
    height: 50px;
    width: 50px;
}

.gsch-cont section {
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid var(--color-gr100);
}

.gsch-cont section:last-child {
    border: none;
}

.keyword-area {
    font-size: 0;
    margin-bottom: -10px;
}

.keyword-area a {
    display: inline-block;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid var(--color-gr100);
    background-color: var(--color-gr30);
    font-size: 15px;
    border-radius: 2em;
    margin-right: 10px;
    margin-bottom: 10px;
}

.keyword-area a:hover {
    background-color: var(--color-gr30);
}

.keyword-area a:last-child {
    margin-right: 0;
}

.gsch-fnc-area {
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 0;
}

.gsch-fnc-area button {
    display: inline-block;
    font-weight: 300;
    font-size: 13px;
    color: var(--color-gr300);
    padding: 0;
}

.gsch-fnc-area button:before {
    content: " ";
    margin: 0 10px;
    width: 1px;
    height: 10px;
    display: inline-block;
    background-color: var(--color-gr200);
}

.gsch-fnc-area button:first-of-type:before {
    display: none;
}

.gsch-fnc-area button:disabled {
    color: var(--color-gr100);
}

.gsch-list li {
    position: relative;
    padding-right: 30px;
    margin-top: 15px;
}

.gsch-list li a {
    display: block;
    color: var(--color-gr300);
}

.gsch-list li a:hover {
    color: var(--color-gr500);
}

.gsch-list li .btn-close {
    top: 0;
}
/* schresult */
.schresult {
    overflow: hidden;
}

.schresult-cont,
.schresult-aside {
    margin-bottom: 30px;
    width: calc((100% - 30px) / 2);
}

.schresult-cont {
    float: left;
}

.schresult-aside {
    float: right;
}

.schresult-aside section {
    border-bottom: 1px solid var(--color-gr100);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.sch-thumb-list li {
    position: relative;
    padding-right: 35px;
    border-bottom: 1px solid var(--color-gr100);
    padding-bottom: 20px;
}

.sch-thumb-list li ~ li {
    margin-top: 20px;
}

.sch-thumb-list a {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.sch-thumb-list li:first-child a {
    padding-top: 0;
}

.sch-thumb-list .img-area {
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 90px;
    border-radius: var(--border-radius);
}

.sch-thumb-list .img-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sch-thumb-list .btn-zzim {
    top: 0;
    right: 0;
}

.sch-thumb-list .txt-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    padding: 10px;
    font-size: 12px;
    justify-content: space-between;
}

.sch-thumb-list .info {
    color: var(--color-gr200);
}

.sch-thumb-list cite {
    display: block;
    color: var(--color-gr300);
}

.sch-thumb-list.info span {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}

.sch-thumb-list .info span:after {
    content: " ";
    display: inline-block;
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: var(--color-gr100);
    margin: -2px 10px 0;
}

.sch-thumb-list .txt-area .info span:last-of-type:after {
    display: none;
}

.sch-thumb-list p {
    font-size: 15px;
    color: var(--color-bk);
    line-height: 1.4em;
    height: 2.8em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sch-thumb-list p span {
    color: var(--color-gr300);
}

.util {
    font-size: 0;
}

.util a {
    display: inline-block;
    margin-left: 20px;
}

.util a:first-child {
    margin-left: 0;
}

.util i {
    font-size: 26px;
}

.util .bi-heart {
    font-size: 22px;
}

.btn-menu,
.m-btn-menu {
    position: absolute;
}
/*.m-btn-menu {
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    width: 60px;
}
*/
.btn-menu span,
.m-btn-menu span {
    display: block;
    text-indent: -99999px;
}

.btn-menu:before,
.btn-menu:after,
.btn-menu span:before,
.m-btn-menu:before,
.m-btn-menu:after,
.m-btn-menu span:before {
    content: " ";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--color-bk);
    margin-left: -10px;
    margin-top: -1px;
    transition: all .5s;
}

.btn-menu:before,
.m-btn-menu:before {
    margin-top: -9px;
}

.btn-menu:after,
.m-btn-menu:after {
    margin-top: 8px;
}

.site-gnb > ul {
    /*  width: 100%;
    display: table;
    table-layout: fixed;*/
    text-align: center;
    display: flex;
    gap: 0;
}
/*.site-gnb > ul > li {
    width: 140px;
}*/
.site-gnb > ul > li > a {
    position: relative;
    display: block;
    height: 53px;
    line-height: 53px;
    font-size: 16px;
    font-weight: 400;
    width: 140px;
    color: #000;
}

.site-gnb > ul > li > a:before {
    content: " ";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-spot2);
    transition: all .5s;
}

.site-gnb > ul > li > a:hover:before {
    width: 100%;
}

.site-gnb > ul > li > ul {
    display: none;
    padding: 20px 0;
    background: #fff;
    border: 1px solid var(--color-gr50);
    text-align: left;
}

.site-gnb > ul > li.is-active ul {
    display: block;
}

.site-gnb ul ul a {
    display: block;
    padding: 5px 20px;
    color: var(--color-bk);
}

.site-gnb ul ul a:hover {
    background-color: var(--color-gr50);
}

.site-gnb ul ul ul a {
    padding: 3px 30px;
    color: var(--color-gr400);
}

.gnb-area.is-active:before {
    content: " ";
    position: absolute;
    top: 55px;
    width: 100%;
    height: 1px;
    background-color: var(--color-gr50);
}

.gnb-area.is-active .site-gnb ul ul {
    display: block;
}

.gnb-area.is-active .btn-gnb:before,
.gnb-area.is-active .btn-gnb:after {
    margin: 0;
}

.gnb-area.is-active .btn-gnb:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.gnb-area.is-active .btn-gnb:after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.gnb-area.is-active .btn-gnb span:before {
    display: none;
}

.btn-menu {
    position: absolute;
    top: -55px;
    left: 0;
    width: 60px;
    height: 55px;
    border-left: 1px solid var(--color-gr100);
    border-right: 1px solid var(--color-gr100);
}

.m-menu-area {
    display: none;
}

.menu-area {
    position: absolute;
    top: 140px;
    width: 100%;
}

.menu-area .wrap {
    z-index: 2;
}

.menu-area.is-active .btn-menu {
    border: none;
    background-color: var(--color-bk);
}

.menu-area.is-active .btn-menu:before,
.menu-area.is-active .btn-menu:after {
    margin: 0;
    background-color: #fff;
}

.menu-area.is-active .btn-menu:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-area.is-active .btn-menu:after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-area.is-active .btn-menu span:before {
    display: none;
}

.site-menu {
    position: relative;
    display: none;
    background-color: #fff;
    z-index: 3;
}

.site-menu:after {
    content: " ";
    position: absolute;
    right: 16px;
    bottom: 0;
    width: 190px;
    height: 180px;
    background-image: url('../images/common/bg_logo.svg');
}

.menu-area.is-active .site-menu {
    display: block;
}

.dim-header {
    z-index: 1;
}

.site-menu > ul > li {
    display: flex;
    border-bottom: 1px;
    font-size: 0;
}

.site-menu > ul > li > a {
    display: block;
    background-color: var(--color-spot);
    color: #fff;
    flex-basis: 160px;
    box-sizing: border-box;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0,0,0, .2);
    font-size: 13px;
}

.site-menu > ul > li > ul {
    padding: 5px 15px;
    flex: 1;
    border-bottom: 1px solid rgb(29 54 97 / 0.15);
}

.site-menu > ul > li:last-child > a,
.site-menu > ul > li:last-child > ul {
    border: none;
}

.site-menu ul ul li {
    font-size: 13px;
    display: inline-block;
}

.site-menu ul ul a {
    position: relative;
    display: block;
    padding: 8px 15px;
    color: var(--color-bk);
}

.site-menu ul ul ul a {
    padding: 0 10px;
    color: var(--color-gr200);
}

.site-menu ul ul a:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background-color: var(--color-gr50);
}

.site-menu ul ul li:last-child a:after {
    display: none;
}

.site-menu ul ul .block {
    display: flex;
    align-items: center;
}

.site-menu ul ul .block > a:after {
    display: none;
}

.site-menu ul ul .block ul {
    display: inline-block;
}

/* -------------------------------------------------    
	.site-body	
------------------------------------------------- */
.site-body {
    padding-top: 120px;
    overflow:hidden;
}
/* main */
/* common */
.mn-contents,
.sub-contents {
    min-height: calc(100vh - 400px);
    margin-bottom: 150px;
}

.sub-contents.bg {
    background-color: #f6f6f8;
}

.mn-contents:after {
    content: " ";
    display: block;
    clear: both;
}

.mn-contents section[class^=mn] {
    position: relative;
    margin-bottom: 50px;
}

.mn-tit-area {
    margin-bottom: 40px;
    text-align: center;
    font-size: 20px;
}

.mn-tit-area > *:last-child {
    margin-bottom: 0;
}

.mn-tit-area cite {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}

.mn-tit-lg {
    display: block;
    font-size: 36px;
    color: var(--color-bk);
    font-weight: 700;
    margin-bottom: 20px;
    word-break: keep-all;
}

.mn-tit {
    display: block;
    font-size: 26px;
    color: var(--color-bk);
    font-weight: 700;
    margin-bottom: 20px;
}

.bg-wh {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
}

.label-area {
    font-size: 0;
}

.label-area .label {
    margin-right: 5px;
}

.label {
    display: inline-block;
    color: #fff;
    background-color: var(--color-gr100);
    color: var(--color-gr400);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    border-radius: 2em;
    font-weight: 700;
}

.label.spot {
    color: #fff;
    background-color: var(--color-spot);
}

.label.spot2 {
    color: #fff;
    background-color: var(--color-spot2);
}

.label.spot3 {
    color: #fff;
    background-color: var(--color-rd);
}

.label.spot4 {
    color: #fff;
    background-color: var(--color-gn);
}

.label.spot5 {
    color: #fff;
    background-color: var(--color-bl);
}
/* item */
.item {
    position: relative;
    padding-bottom: 20px;
}

.item a {
    display: block;
    transition: all .5s;
}

.item a:hover {
    box-shadow: var(--box-shadow);
}

.item .img-area {
    position: relative;
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.item .img-area img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    /*   width: 100%;
    max-height: 100%;*/
    transform: translate(-50%, -50%);
    transition: all .5s;
}

.item a:hover .img-area img {
    transform: translate(-50%, -50%) scale(1.1);
}

.item .txt-area {
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid var(--color-gr50);
}

.item .txt-area > *:last-child {
    margin-bottom: 0;
}

.item .label-area {
    margin-bottom: 10px;
}

.item .txt-area .info {
    margin-bottom: 3px;
    color: var(--color-gr300);
    font-size: 0;
}

.item .txt-area .info span {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}

.item .txt-area .info span:after {
    content: " ";
    display: inline-block;
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: var(--color-gr50);
    margin: -2px 10px 0;
}

.item .txt-area .info span:last-of-type:after {
    display: none;
}

.item .txt-area p {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2em;
    height: 2.4em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item .txt-area cite {
    display: block;
    font-size: 14px;
}

.item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    box-sizing: border-box;
    margin: 0 0 0 -20px;
    width: calc(100% + 20px);
    gap: 60px 0;
}

.item-list li {
    box-sizing: border-box;
    flex: 0 1 calc(25% - 20px);
    margin: 0 0 0 20px;
}
/* main */
.mn-visual {
    position: relative;
    margin-bottom: 80px;
    font-size: 0;
}

.mn-visual .wrap {
    padding-left: 0;
    padding-right: 0;
}

.mn-visual img {
    display: block;
    width: 100%;
}

.mn-visual .slick-fnc-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    z-index: 1;
}

.mn-visual .slick-fnc {
    display: flex;
    font-size: var(--font-size);
    background: #fff;
    padding: 0 20px;
    height: 50px;
    align-items: center;
    border-radius: 2em;
}

.mn-visual .slick-fnc button {
    width: 24px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
}

.mn-visual .slick-fnc .btn-prev,
.mn-visual .slick-fnc .btn-next {
    background-image: url('../images/common/arr.svg');
}

.mn-visual .slick-fnc .btn-next {
    transform: rotate(-180deg);
}

.mn-visual .slick-dots {
    display: none !important;
}

.mn-visual .slick-fnc .paging-txt {
    width: 78px;
    text-align: center;
}

.mn-visual .slick-fnc .btn-playstop {
    background: url('../images/common/btn_stop.svg') center center no-repeat;
}

.mn-visual .slick-fnc .btn-playstop.is-stop {
    background-image: url('../images/common/btn_play.svg');
    background-size: 12px;
}

.mn-visual .slide {
    background-size: cover;
    background-position: center center;
}

/* sub */
/* sub common */
.sub-top {
    padding-top: 50px;
    padding-bottom: 30px;
}

.sub-top {
    background: url(../images/sub/visual1.jpg) center / cover;
    min-height: 140px;
    padding: 50px 0;
    display: flex;
    align-items: center;
}

.sub-top .txt-area {
    color: var(--color-bk);
}

.sub-tit {
    font-size: 30px;
}

.sub-top .txt-area p {
    margin-top: 15px;
}

.sub-container {
    padding-top: 30px;
}

.sub-container:after {
    content: " ";
    display: block;
    clear: both;
}
/* lnb common */
.lnb-area {
    float: left;
    width: 240px;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    margin-right: 40px;
}

.lnb-area .lnb cite {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-bk);
    margin-bottom: 10px;
}

.lnb-area .lnb ul {
    border-top: 1px solid var(--color-spot);
}

.lnb-area .lnb li {
    padding: 15px 0;
    padding-left: 8px;
    border-bottom: 1px solid var(--color-gr100);
}

.lnb-area .lnb li a {
    color: var(--color-gr200);
    transition: all .5s;
}

.lnb-area .lnb li a.is-active {
    font-weight: 700;
    color: var(--color-spot2);
}

.lnb-area .lnb li a:hover {
    color: var(--color-bk);
}

.lnb-area .lnb-info {
    margin-bottom: 40px;
    background-color: var(--color-spot);
    border-radius: var(--border-radius);
    padding: 16px;
    color: #fff;
}

.lnb-area .lnb-info cite {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.lnb-area .lnb-info .txt-area strong {
    font-size: 18px;
}

.lnb-area .lnb-info .txt-area p {
    font-size: 12px;
}

.lnb-area .lnb-info .txt-area a {
    display: inline-block;
    color: var(--color-spot2);
    font-size: 12px;
    margin-top: 20px;
    vertical-align: middle;
}

.lnb-area .lnb-info .txt-area a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--color-spot2);
    border-left: 1px solid var(--color-spot2);
    transform: translate(-50%, -50%) rotate(135deg);
    box-sizing: border-box;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;
}

.lnb-area ~ .sub-contents {
    float: right;
    width: calc(100% - 290px);
}

.sch-area {
    display: block;
    text-align: center;
    font-size: 0;
}

.sch-area select {
    display: inline-block;
    vertical-align: middle;
}

.sch-area .sch {
    display: inline-block;
    margin: 0 auto;
    font-size: 0;
    border-radius: 24px;
    border: 1px solid var(--color-gr100);
    border-radius: var(--border-radius);
    vertical-align: middle;
}

.sch-area input,
.sch-area .btn-sch {
    display: inline-block;
}

.sch-area input {
    background: none;
    border: none;
    width: 200px;
    /* width: calc(100% - 50px);*/
}

.sch-area .btn-sch {
    font-size: 16px;
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

.profile {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 12px;
}

.profile .img-area {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-gr50);
}

.profile .img-area img {
    display: block;
    width: 100%;
    height: 100%;
}

.profile cite {
    font-size: 14px;
}

.profile .txt-area span {
    display: inline-block;
    color: var(--color-gr200);
}

.profile .txt-area span:before {
    content: " ";
    display: inline-block;
    margin: 0 5px;
    width: 1px;
    height: 10px;
    background-color: var(--color-gr100);
}

.profile.lg {
    margin-bottom: 30px;
    display: block;
    text-align: center;
}

.profile.lg .img-area {
    width: 140px;
    height: 140px;
    margin: 0 auto;
}

.profile.lg .txt-area {
    margin-top: 10px;
}

.profile.lg cite {
    font-size: 18px;
    font-weight: 700;
}

.cardview-area {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.view-type .cardview-area {
    padding: 50px 0 0;
}

.cardview-area img {
    display: block;
    width: 100%;
}

.cardview-area .paging-txt {
    margin-bottom: 20px;
    text-align: center;
}
.cardview-area .btn-thumb-toggle {
    padding:0 20px;
}
.cardview-area .btn-thumb-toggle:after {
    content:" ";
    display:inline-block;
    vertical-align:middle;
    width: 0;
	height: 0;
    margin-left:5px;
	border-width: 0 5px 5px 5px;
	border-color:  transparent transparent #333 transparent;
	border-style: solid;
    transition:transform .5s;
}
.cardview-area .slide-area.is-active .btn-thumb-toggle:after {
    transform:rotate(-180deg);
}
.cardview-area .thumb-slide {
    margin-top:10px;
    padding: 0 45px;
    font-size: 0;
}

.cardview-area .thumb-slide .slick-slide {
    padding: 0 5px;
    box-sizing: border-box;
    filter: grayscale(1);
}
.cardview-area .paging-txt + .slide-fnc {
    margin-top:-50px;
    margin-bottom:10px;
}
.cardview-area .thumb-slide .slick-slide.slick-current {
    filter: none;
}

.cardview-area .thumb-slide .slick-arrow {
    top: 0;
    margin: 0;
    width: 40px;
    height: 100%;
    border-radius: 0;
}

.cardview-area .slide-area.is-active .thumb-slide{
    height:auto;
    transition:height .5s;
}
.cardview-area .slide-area .thumb-slide{
    height:0;
    overflow:hidden;
}
.cardview-area .view-slide {
    margin-top:0;
    margin-bottom: 50px;
    text-align: center;
}
.cardview-area .slide-area.is-active .view-slide{
    margin-top:10px;
}
.cardview-area .view-slide .btn-lg {
    margin: 20px auto 0;
    display: block;
    max-width: 50%;
}
.cardview-area .view-slide .btn-lg ~ .btn-lg {
    margin-top: 10px;
}

.cardview-area .view-slide .slick-prev {
    top:300px;
    margin-left: -25px;
}

.cardview-area .view-slide .slick-next {
    top:300px;
    margin-right: -25px;
}

.cardview-area .txt-area {
    margin-bottom: 50px;
}

.tag-area {
    margin-bottom: 80px;
    position: relative;
    padding-left: 40px;
    font-size: 0;
}

.tag-area cite {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.tag-area a,
.tag-list span,
.tag-list a {
    display: inline-block;
    padding: 0 20px;
    height: 30px;
    line-height: 28px;
    box-sizing: border-box;
    border: 1px solid var(--color-gr50);
    border-radius: 2em;
    font-size: 14px;
    vertical-align: middle;
}

.tag-list a:hover {
    background-color: var(--color-gr30);
}

.tag-list {
    /*display: flex;*/
    /*gap: 10px;*/
    margin-left:-10px;
    margin-bottom: 10px;
}

.tag-list:last-child {
    margin-bottom: 0;
}

.tag-list li {
    display:inline-block;
    margin-bottom:10px;
    margin-left:10px;
}
.tag-list li:first-of-type {
    margin-left: 0;
}

.tag-list li .btn-close {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.msg + .tag-list {
    margin-top: 10px;
}
.slide-list-sm {
    margin-bottom:40px;
    padding: 0 45px;
    font-size: 0;
}
.slide-list-sm .slick-slide {
    padding: 0 5px;
    box-sizing: border-box;
    /*filter: grayscale(1);*/
}
.slide-list-sm .slick-slide.slick-current {
    /*filter: none;*/
}
.slide-list-sm .slick-arrow {
    top: 0;
    margin: 0;
    width: 40px;
    height: 100%;
    border-radius: 0;
}
.slide-list-sm .thumb-slide{
    height:auto;
    transition:height .5s;
}
.slide-list-sm .thumb-slide{
    height:0;
    overflow:hidden;
}
.slide-list-sm img {
    display:block;
    width:100%;
}
/* -------------------------------------------------    
	- TABLE MAX-WIDHT 1279	
------------------------------------------------- */
@media screen and (max-width:1279px) {
    .pc-block {
        display: none !important;
    }

    .ta-block {
        display: block !important;
    }

    .layer {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }

    .wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
    .popup-view  {
        padding-left: 15px;
        padding-right: 15px;
    }
    .popup-view .pop-header .btn-close {
        right:15px;
    }
    /*component*/
    .tabs-nav li {
        margin-right: 16px;
    }

    .site-body {
        padding-top: 60px;
    }
    .site-header,
    .site-header .header-top,
    .gsch-area,
    .m-btn-menu {
        height: 60px;
    }
    .site-header {
        position: fixed;
        display: block;
        z-index: 10;
        background-color: #fff;
        width: 100%;       
        border-bottom: 1px solid var(--color-gr50);
    }
    .site-header .header-top {
        padding:0;
        align-items:center;
    }
    .site-header.is-sticky {
        top: 0;
    }

    .site-header .logo {
        z-index: 1;
    }

    .site-header .header-top .util,
    .site-gnb,
    .site-header .header-fnc,
    .menu-area,
    .site-header:before,
    .site-header:after {
        display: none;
    }

    .gsch-area {
        padding-top: 0;
        max-width: none;
        position: absolute;
        width: 100%;
        left: auto;
        transform: none;
        border: none;
    }

    .gsch-oepn-area {
        top: 50%;
        right: 54px;
        width: 24px;
        height: 24px;
        margin-top:-12px;
        background: none;
    }

    .gsch-oepn-area p {
        display: none;
    }

    .gsch-oepn-area .ico-sch {
        margin: 0;
    }

    .gsch {
        display: none;
    }


    .m-menu-area {
        display: block;
    }

    .m-menu-area.is-active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-color: #fff;
        box-sizing: border-box;
    }

     .m-btn-menu {
        top: 0;
        width: 24px;
        right: 16px;
        z-index: 2;
    }

    .m-menu-area .m-menu {
        display: none;
    }

    .m-menu-area.is-active .m-menu {
        display: block;
    }

    .m-menu-header {
        position: relative;
        display: flex;
        height: 84px;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
        border-bottom: 2px solid var(--color-bk);
    }

    .m-site-header .header-top img {
        display: block;
    }

    .m-menu-area.is-active .m-btn-menu:before,
    .m-menu-area.is-active .m-btn-menu:after {
        margin: 0;
    }

    .m-menu-area.is-active .m-btn-menu:before {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .m-menu-area.is-active .m-btn-menu:after {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .m-menu-area.is-active .m-btn-menu span:before {
        display: none;
    }

    .m-menu-body {
        height: calc(100vh - 86px);
        overflow-y: auto;
        box-sizing: border-box;
        padding-bottom: 50px;
    }
    /*    .m-menu-body:before {
        content: " ";
        position: fixed;
        right: 16px;
        bottom: 0;
        width: 190px;
        height: 180px;
        background-image: url('../images/common/bg_logo.svg');
    }*/
    .m-menu-top i {
        color: var(--color-bk);
        font-size: 24px;
        vertical-align: middle;
    }

    .m-menu-top .user-info {
        padding: 15px 30px;
        font-size: 18px;
        color: var(--color-bk);
        border-bottom: 1px solid var(--color-gr100);
    }

    .m-menu-top .user-info span {
        vertical-align: middle;
    }

    .m-menu-top .util-list {
        font-size: 0;
    }

    .m-menu-top .util-list li {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        box-sizing: border-box;
    }

    .m-menu-top .util-list li a {
        display: block;
        padding: 15px 16px 15px 30px;
        font-size: 15px;
        color: var(--color-bk);
    }

    .m-menu-top .util-list li a i {
        margin-right: 15px;
    }

    .m-site-menu {
        border-top: 1px solid var(--color-gr100);
    }

    .m-site-menu > ul > li {
        position: relative;
        border-bottom: 1px solid var(--color-gr100);
    }

    .m-site-menu > ul > li > a {
        display: block;
        padding: 15px 40px 15px 30px;
        font-weight: 700;
        color: var(--color-bk);
    }

    .m-site-menu > ul > li > ul {
        display: none;
        background-color: var(--color-gr30);
        border-top: 1px solid var(--color-gr100);
        padding-left: 16px;
        padding-right: 16px;
    }

    .m-site-menu > ul > li.is-active > ul {
        display: block;
    }
    /*    .m-site-menu > ul > li > a:after {
        content: " ";
        position: absolute;
        right: 30px;
        top: 20px;
        margin-left: 7px;
        width: 7px;
        height: 7px;
        display: inline-block;
        box-sizing: border-box;
        border-top: 1px solid var(--color-gr300);
        border-left: 1px solid var(--color-gr300);
        transform-origin: center center;
        transform: rotate(230deg);
        vertical-align: middle;
        transition: transform .5s;
    }
    .m-site-menu > ul > li.is-active > a:after {
        transform: rotate(45deg);
    }*/
    .m-site-menu > ul > li > ul > li {
        border-bottom: 1px solid var(--color-gr100);
    }

    .m-site-menu > ul > li > ul > li:last-child {
        border-bottom: none;
    }

    .m-site-menu > ul > li > ul > li > a {
        padding: 10px 0 10px 30px;
        color: var(--color-bk);
    }

    .m-site-menu > ul > li > ul > li > a:before {
        content: " ";
        position: absolute;
        top: 50%;
        margin-top: -2px;
        display: block;
        left: 16px;
        width: 4px;
        height: 4px;
        background-color: var(--color-spot);
    }

    .m-site-menu a {
        position: relative;
        display: block;
    }

    .m-site-menu ul ul ul {
        padding-top: 6px;
        padding-bottom: 6px;
        border-top: 1px solid var(--color-gr100);
    }

    .m-site-menu ul ul ul a {
        padding: 5px 15px 5px 45px;
    }

    .m-site-menu ul ul ul a:before {
        content: " ";
        position: absolute;
        top: 50%;
        margin-top: -1px;
        display: block;
        left: 30px;
        width: 2px;
        height: 2px;
        background-color: var(--color-spot);
    }

    .m-menu-fnc-area {
        margin-top: 50px;
        text-align: center;
    }
    /* main*/
    /* sub */
    .mn-contents,
    .sub-contents {
        margin-bottom: 100px;
    }

    .lnb-area {
        display: none;
    }

    .lnb-area ~ .sub-contents {
        width: 100%;
    }

    .location-area {
        margin-top: -30px;
        margin-bottom: 30px;
        margin-left: -16px;
        margin-right: -16px;
    }

    .location-area + .tit {
        margin-top: 0;
    }

    .location {
        display: none;
    }

    .m-location {
        display: flex;
        font-size: 0;
        background-color: var(--color-gr50);
        border-right: 1px solid var(--color-gr100);
        border-bottom: 1px solid var(--color-gr100);
    }

    .m-location .home,
    .m-location select {
        height: 54px;
    }

    .m-location .home {
        display: block;
        width: 60px;
        box-sizing: border-box;
        background: url('../images/common/ico_home.svg') center center no-repeat;
        border-left: 1px solid var(--color-gr100);
        border-right: 1px solid var(--color-gr100);
    }

    .m-location select {
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-radius: 0;
    }

    .item-list {
        margin: 0 0 0 -15px;
        width: calc(100% + 15px);
        gap: 30px 0;
    }

    .item-list li {
        flex: 0 1 calc(33.33% - 15px);
        margin: 0 0 0 15px;
    }

    .recommend-item li {
        flex: 0 1 calc(25% - 20px);
    }
}
/* -------------------------------------------------  
	- TABLET MAX-WIDHT 1023
------------------------------------------------- */
@media screen and (max-width:1023px) {

    .card-add-list .add-fnc-area {
        margin-top: 10px;
    }
    .card-add-list .add-fnc-area button {
        width: 100%;
    }
    .card-add-list .add-fnc-area button ~ button {
        margin-top: 5px;
    }

    .card-add-list .add-area {
        display: block;
    }
    .card-add-list  .add-area li input[type=text] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }
    .card-add-list .add-area li .btn-area {
        width: 100%;
    }
    .card-add-list .add-area li .btn-area button {
        width: calc(100% / 2 - 2px);
    }
    .card-add-list .add-area li .btn-area button:only-of-type {
        width: 100%;
    }
}
/* -------------------------------------------------  
	- MOBILE MAX-WIDHT 767 	
------------------------------------------------- */
@media screen and (max-width:767px) {
    .m-none {
        display: none !important;
    }

    .ta-block {
        display: none !important;
    }

    .m-block {
        display: block !important;
    }

    .q0 {
        width: 50px;
    }

    .q1 {
        width: 50%
    }

    .q2 {
        width: 70%
    }

    .q3 {
        width: 90%
    }

    .q4 {
        width: 100%;
    }

    .m-tbl-tit {
        display: inline-block;
    }
    /*   .btn-tbl-cont .tbl-l,
    .btn-tbl-cont .tbl-r {
        display:block;
    }
    .btn-tbl-cont .tbl-r {
        margin-top:10px;
    }*/
    .btn-add {
        
    }

    .popup-view .pop-header h1 {
        font-size:20px;
    }
    .fnc-area,
    .fnc-area .fnc-l,
    .fnc-area .fnc-r {
        display: block;
        text-align: left;
    }

    .fnc-area .fnc-r {
        margin-top: 5px;
    }

    .board-list .table-area {
        margin-bottom: 5px;
    }

    .board-list li a {
        padding: 16px;
    }

    .board-list p, .board-list .txt-cont {
        font-size: 16px;
    }

    .bg-list {
        flex-direction: column;
    }

    .tabs-nav li {
        margin-right: 10px;
    }

    .tabs-nav li a,
    .tabs-nav-sm li a {
        font-size: 15px;
    }

    .tabs-nav-sm li a {
        padding: 0 15px;
    }

    .tit {
        font-size: 24px;
    }

    .tit-sm {
        font-size: 16px;
    }

    .paging .current,
    .paging a {
        margin: 2px;
        width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .paging .prev {
        margin-right: 2px;
    }

    .paging .next {
        margin-left: 2px;
    }

    .file-add-area {
        display: block;
    }

    .file-add-area .add-area {
        margin-top: 10px;
    }

    .file-custom-area {
        margin-top: 10px;
        display: block;
    }

    .file-custom-area .txt-area {
        margin-bottom: 10px;
    }

    .file-custom-area .btn-file,
    .file-custom-area .btn-file-del {
        margin-bottom: 8px;
    }
    /* table */
    /* 공통 */
    .tbl-list-type .thead {
        display: none;
    }

    .tbl-list-type .tr > * {
        display: block;
        padding: 16px 0;
        width: auto;
        text-align: left;
    }

    .tbl-list-type .tr > * ~ * {
        padding-top: 0;
    }
    /* .tbl-list-type .tr .checkradio label::before {
        margin-right: 16px;
    }*/
    .list-type thead {
        display: none;
    }

    .list-type tbody tr {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--color-gr100);
        padding: 16px 0;
    }

    .list-type tbody td {
        margin-right: 20px;
    }

    .list-type tbody td[data-tit]:before {
        content: attr(data-tit) " : ";
        display: inline-block;
        margin-right: 5px;
        font-weight: 500;
        text-align: left;
    }

    .list-type tbody td.al {
        display: block;
        margin-right: 0;
    }

    .list-type th {
        display: block;
    }

    .list-type col,
    .list-type thead th,
    .list-type tbody td {
        display: inline-block;
        width: auto;
        text-align: left;
        border: none;
        line-height: 1.5;
        height: auto;
        min-height: 0;
        padding: 5px 0;
    }

    .list-type .bg {
        display: block;
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
    }

    .list-type .bg:before {
        display: none;
    }

    .info-type th,
    .info-type td {
        padding: 10px 5px;
        font-size: 14px;
    }

    .write-type {
        padding: 20px 0;
        font-size: 13px;
    }

    .write-type colgroup {
        display: none;
    }

    .write-type tr,
    .write-type th,
    .write-type td {
        display: block;
        width: 100%;
    }

    .write-type th {
        padding: 15px;
        height: auto;
    }

    .write-type td {
        padding: 10px 0 20px;
    }

    .write-type input[type=text],
    .write-type input[type=password],
    .write-type input[type=number],
    .write-type input[type=email],
    .write-type input[type=tel],
    .write-type .write-flex-area {
        margin: 0;
    }

    .input-area .btn-area [class^=btn] {
        flex: 1;
    }
    .input-area input {
        width: 100% !important;
    }

    .site-header {
    }

    .site-footer {
    }

    .fsite {
        position: static;
        margin-bottom: 10px;
    }

    .fsite select {
        width: 100%;
        padding-left: 0;
    }

    .footer-menu {
        padding-left: 0;
    }

    .footer-info figure {
        display: none;
    }

    .footer-info {
        padding-left: 0;
        font-size: 12px;
    }

    .footer-info p {
        margin-top: 10px;
        text-align: left;
    }

    .item .txt-area {
        padding: 10px;
    }

    .item .txt-area p {
        font-size: 15px;
    }

    .item-list {
        margin: 0 0 0 -15px;
        width: calc(100% + 15px);
        gap: 20px 0;
    }

    .item-list li {
        flex: 0 1 calc(50% - 15px);
        margin: 0 0 0 15px;
    }

    .recommend-item .txt-area p {
        font-size: 13px;
    }

    /* main */
    .mn-visual .slick-fnc-area {
        right: 15px;
        bottom: 15px;
    }

    .mn-visual .slick-fnc {
        height: 40px;
        padding: 0 10px;
    }

    .mn-visual .slick-fnc .paging-txt {
        width: 40px;
        font-size: 13px;
    }

    .write-type td .card-add-list {
        margin: 0;
        width: 100%;
    }
    .card-add-list > li {
        gap: 0 10px;
        padding-left: 0;
        padding-right: 0;
    }
    .card-add-list .preview-area {
        align-self: flex-start;
        margin-top: 28px;
    }
    .card-add-list li .add-area {
        flex-direction: column;
        align-items: stretch;
    }

    .write-type .input-add-area input[type=text] {
        max-width: 350px;
        width: 100%;
    }

    .view-type .cardview-area {
        padding-top: 30px;
    }

    .tag-area {
        margin-bottom: 40px;
    }

    .cardview-area .view-slide {
        margin-bottom:20px;
    }

/*    .cardview-area .view-slide .slick-prev {
        margin-left: -10px;
    }

    .cardview-area .view-slide .slick-next {
        margin-right: -10px;
    }*/

    .preview-area img, .preview-area video, .preview-area iframe {
        width: 80px;
        height: 80px;
    }
}
/* -------------------------------------------------
    
	- MOBILE MAX-WIDHT 480
	
------------------------------------------------- */
@media screen and (max-width:480px) {
    .layerpopup-sm {
        padding-bottom: 10px;
    }

    .layerpopup-sm .pop-body {
        padding: 10px 44px 0 10px;
    }

    .layerpopup-sm .btn-close {
        top: 10px;
        right: 10px;
    }
    .layerpopup-sm .url {
        display:flex;
    }
    .cardview-area .view-slide .slick-prev,  
    .cardview-area .view-slide .slick-next  {
            top:180px;
    }
/* -------------------------------------------------
    
	- MOBILE MAX-WIDHT 374
	
------------------------------------------------- */
@media screen and (max-width:374px) {
     .cardview-area .view-slide .slick-prev,  
    .cardview-area .view-slide .slick-next  {
            top:140px;
    }
}

.popup.is-view .pop-header {
    display: none;
}