/* region === RESET / HELPER ### */
* {margin:0;padding:0;border: 0;vertical-align: baseline;}
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
html,body, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd ,section,nav  {padding:0; border:0;}
ul, ol, li{margin:0; padding:0; list-style:none;}
label, input, button, select, img, a, i {vertical-align:bottom; border:none;}
input, textarea, button, select {font-family:inherit;}
button {padding:0; cursor:pointer;}
img {max-width:100%; max-height:100%; object-fit:cover; object-position:50% 50%;}
table {margin:0; padding:0; border:none; border-collapse:collapse}
hr {display:none;}
a, a:link, a:visited, a:hover, a:focus, a:active {text-decoration:none;}
:focus {outline:none;}
p {line-height: 1.6;}
h1, h2, h3, h4, h5, h6 {line-height: 1.3; margin-top: 5px; margin-bottom: 10px;font-weight: 700;}
*::-webkit-scrollbar {width: 5px;height:5px;}
*::-webkit-scrollbar-thumb {background-color: #777;}
*::-webkit-scrollbar-track {background-color: #ccc;}
.al {text-align:left !important;} .ac {text-align:center !important;} .ar {text-align:right !important;}

.fr {float:right !important}
.fl {float:left !important}
.fn {float:none !important}

.pd10 {padding:10px !important}
.pb0 {padding-bottom:0px !important}

.pdlr10 {padding-left:10px !important;padding-right:10px !important;}
.pdlr20 {padding-left:20px !important;padding-right:20px !important;}
.m0 {margin:0px !important}
.mb0 {margin-bottom:0px !important}
.mr0 {margin-right:0px !important}

.mt0 {margin-top:0px !important}
.mt5 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt12 {margin-top:12px !important}
.mt16 {margin-top:16px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}
.mt80 {margin-top:80px !important}
.mt90 {margin-top:90px !important}
.mt120 {margin-top:120px !important}
.mb10 {margin-bottom:10px !important}
.mb20 {margin-bottom:20px !important}
.ml5 {margin-left:5px !important}
.ml10 {margin-left:20px !important}
.ml20 {margin-left:20px !important}
.ml30 {margin-left:30px !important}
.ml40 {margin-left:40px !important}
.ml50 {margin-left:50px !important}
.ml70 {margin-left:70px !important}
.ml90 {margin-left:90px !important}

.fs8 {font-size:8px !important;}
.fs10 {font-size:10px !important;}
.fs11 {font-size:11px !important;}
.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs15 {font-size:15px !important;}
.fs16 {font-size:16px !important;}
.fs17 {font-size:17px !important;}
.fs18 {font-size:18px !important;}
.fs20 {font-size:20px !important;}
.fs22 {font-size:22px !important;}
.fs30 {font-size:30px !important;}
.fs40 {font-size:40px !important;}
.table {border-spacing: 0; border-collapse: collapse;width:100%}

/* endregion */

/* region === MAIN VARIABLE ### */
:root {
    --primary:#0072E4; /* blue */
    --bgprimary:#F3F8FF;
    --cprimary:#0060BF;
    --secondary:#e47200;
    --orange:#FF872E;
    --darkgray:#6B7280; /* yellow */
    --gray:#D8DDE2;
    --green:#2FA459;
    --blue:#0072E4;
    --yellow:#FFC410;
    --cyan:#00aeef;
    --navy:#346598;
    --purple:#7200e4;
    --red:#e40072;
    --black:#000000;
    --white:#ffffff;
    --border-radius:10px;
    --text-primary:#111827;
    --text-sub-primary:#686e7b;
    --text-secondary:#8F95A1;
    --gap:8px;
    --input-line-height:48px;
    --line-color:#E5E7EB;
}
/* endregion */

/* region === FONT / COMMON ### */
@font-face {font-display:swap;font-family: "NanumSquare";font-weight: 400;src: url("/Common/Font/NanumSquareR.woff2") format("woff2");}
@font-face {font-display:swap;font-family: "NanumSquare";font-weight: 600;src: url("/Common/Font/NanumSquareB.woff2") format("woff2");}
@font-face {font-display:swap;font-family: "NanumSquare";font-weight: 700;src: url("/Common/Font/NanumSquareEB.woff2") format("woff2");}


a.btn.block {padding:16px 0;font-size:16px;font-weight:700;}

.cprimary { color:var(--primary)!important;}
.csecondary { color:var(--secondary)!important;}
.corange { color:var(--secondary)!important;}
.cblue { color:var(--blue)!important;}
.cgray { color:var(--gray)!important;}
.cdarkgray { color:var(--darkgray)!important;}
.cgreen { color:var(--green)!important;}
.cnavy { color:var(--navy)!important;}
.cpurple { color:var(--purple)!important;}
.cred { color:var(--red)!important;}
.cyellow { color:var(--yellow)!important;}
.ccyan { color:var(--cyan)!important;}
.cblack { color:#000!important;}
.cwhite { color:#ffff!important;}

.bgprimary { background-color:var(--primary)!important;}
.bgsecondary { background-color:var(--secondary)!important;}
.bgorange { background-color:var(--orange)!important;}
.bgblue { background-color:var(--blue)!important;}
.bggray { background-color:var(--gray)!important;}
.bgdarkgray { background-color:var(--darkgray)!important;}
.bggreen { background-color:var(--green)!important;}
.bgnavy { background-color:var(--navy)!important;}
.bgpurple { background-color:var(--purple)!important;}
.bgred { background-color:var(--red)!important;}
.bgyellow { background-color:var(--yellow)!important;}
.bgcyan { background-color:var(--cyan)!important;}
.bgblack { background-color:#000!important;}
.bgwhite { background-color:#ffff!important;}

.disabled {pointer-events: none;cursor: not-allowed !important;}
/* endregion */

/* region === UTILITY ### */
.line, .hline {height:1px;line-height:1;font-size:0;margin:0px 0;background-color:var(--line-color);}
.vline {height:14px;line-height:1;width:1px;font-size:0;margin:0px 10px;background-color:var(--line-color);}
.nowrap {white-space:nowrap !important;}
.op4 {opacity:0.4 !important}
.pointer {cursor:pointer !important}
.blind {display:none !important;}
.block {display:block !important;}
.w100 {width:100% !important;}
.w50 {width:50% !important;}
.py5 {padding-top:5px !important;padding-bottom:5px !important;}

.py5 {padding-top:5px !important;padding-bottom:10px !important;}
.py10 {padding-top:10px !important;padding-bottom:10px !important;}
.py20 {padding-top:20px !important;padding-bottom:20px !important;}
.px10 {padding-left:10px !important;padding-right:10px !important;}
.px16 {padding-left:16px !important;padding-right:16px !important;}
.px20 {padding-left:20px !important;padding-right:20px !important;}
.p5 {padding:5px !important;}
.p10 {padding:10px !important;}
.p15 {padding:15px !important;}
.p20 {padding:20px !important;}
.pl10 {padding-left:10px !important;}
.pl20 {padding-left:20px !important;}
.my10 {margin-top:10px !important;margin-bottom:10px !important;}
.my20 {margin-top:20px !important;margin-bottom:20px !important;}

.overflowh {overflow:hidden;}
.elli {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;line-height:1}
.e2lli {max-height:46px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.e3lli {max-height:69px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
.vat {vertical-align:top !important ;}
.border {border:1px solid #eee;border-radius:var(--border-radius);}
.posr {position:relative !important ;}
.posa {position:absolute !important ;}

.bold {font-weight:700 !important;}
.lh1 {line-height:1 !important;}
.lh12 {line-height:1.2 !important;}
.lh14 {line-height:1.4 !important;}
.ls-1 {letter-spacing:-1px !important;}
.ls0 {letter-spacing:0px !important;}

.flex {display:flex !important;flex-direction:row ;align-items:center;gap:5px;}
.flexc {display:flex !important;flex-direction:column ;gap:5px;}
.g15 {gap:15px !important ;}
.g10 {gap:10px !important ;}
.g0 {gap:0 !important ;}
.grow {flex-grow:1 !important;}
.fjbtw{justify-content:space-between  !important;}
.fjstart {justify-content:flex-start !important ;}
.fjend {justify-content:flex-end !important ;}
.fjcenter {justify-content:center !important ;}
.fastart {align-items:flex-start !important ;}
.faend {align-items:flex-end !important ;}
.fwrap {flex-wrap:wrap !important ;}
.fshrink {flex-shrink:0 !important ;}
.grid-2 {display:grid;	align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr));row-gap: 10px;column-gap: 10px;}
.grid-3 {display:grid;	align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr));row-gap: 10px;column-gap: 10px;}
.grid-4 {display:grid;	align-items: stretch; grid-template-columns: repeat(4, minmax(0, 1fr));row-gap: 10px;column-gap: 10px;}
.shimmer {mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;animation: shimmer 1s 3;}
@keyframes shimmer {100% {mask-position: left;}}
.size-6 {width:24px;height:24px;}
.t-yellow {color:#ffff00;}
/* endregion */

/* region === tinymce === */
.timg_block {display:block;margin:10px auto;max-width:calc(100% - 20px);}
.timg_left {float:left;max-width:calc(100% - 20px);margin:0 10px 0px 0px;}
.ttable {   width: calc(100% - 20px);margin:20px auto;border-spacing: 0; border-collapse: collapse;border: 1px solid #ddd;}
.ttable td, .ttable th { background-color: #fff;padding: 0;border: 1px solid #ddd;
    padding: 8px; line-height:160%; vertical-align: top; text-align:center; }
.ttable > thead > tr > th, .ttable > thead > tr > td {vertical-align: bottom; border-bottom: 2px solid #ddd;background-color:#eee;}
/* endregion */

/* region === INPUT ### */
input[type="number"],input[type="text"], input[type="password"] , input[type="search"], label.checkbox, label.radio { display: inline-block; height: var(--input-line-height);  line-height: var(--input-line-height); padding-left:10px;color:#000;font-size:16px; font-weight:400;background-color: transparent;border:1px solid #eee;border-radius:var(--border-radius);}
label.checkbox, label.radio {font-size:13px;}
input[type="number"],input[type="text"].readonly {color:#666;background-color:#eee;white-space:nowrap;}
input[type="number"],input[type="text"]:not(.readonly):focus,input[type="search"]:focus, input[type="password"]:focus {border:2px solid var(--primary);}

input[type="search"] {padding-right:40px;position:relative;background:url(/Images/Icon/search.svg) center right 8px no-repeat;background-size:20px 20px;}
input[type="text"].datetime {padding-right:34px;position:relative;background:url(/Images/Icon/calendar.svg) center right 8px no-repeat;background-size:20px 20px;}
textarea {padding:10px;min-height:60px;border: 1px solid #ddd;border-radius:var(--border-radius);width:100%;resize:none;line-height:1.6;font-size:16px;}
select {-webkit-appearance: none;-moz-appearance: none;height: var(--input-line-height);  line-height: var(--input-line-height);padding: 0 30px 0 10px;color:#000;background:url(/Images/Icon/ico_down_select.svg) right 5px center no-repeat;background-size:12px 12px;border:1px solid #eee;border-radius:var(--border-radius);}
select.readonly {pointer-events:none;background-color:#eee;}
select option {line-height: var(--input-line-height);height: var(--input-line-height);color:#000;background-color:#fff;font-size:16px;}
select:focus {border:1px solid var(--primary);}
input[type="checkbox"],input[type="radio"] { display: none;}
label.checkbox, label.radio {border:0; background: url(/Images/Icon/rcheck.svg) no-repeat 2px center;cursor:pointer; padding-left:30px;text-align:left;background-size:24px 24px; }
label.checkbox.big, label.radio.big {padding-left:40px; background-size:32px 32px; }
label.checkbox:has(input[type='checkbox']:checked) {background-image:url(/Images/Icon/rcheck_on.svg);}
label.checkbox:has(input[type='checkbox']:disabled) {color:#000;cursor:default;}

label.radio {background-image: url('/Images/Icon/radio.svg') ;}
label.radio:has(input[type='radio']:checked){background-image:url('/Images/Icon/radio_on.svg');}
label.radio:has(input[type='radio']:disabled) {color:#000;cursor:default;}

label.switch {display: inline-flex;align-items: center;gap: 8px;cursor: pointer;font-size:14px;}
label.switch [type="checkbox"] {appearance: none;position: relative;border:1px solid var(--gray);border-radius: 20px;width:36px;height: 20px;display:block;}
label.switch [type="checkbox"]::before {content: "";position: absolute;left: 0;width: 18px;height: 18px;border-radius: 50%;transform: scale(0.9);background-color: var(--gray);transition: left 250ms linear;}
label.switch [type="checkbox"]:checked {background-color: var(--primary);border-color: var(--primary);}
label.switch [type="checkbox"]:checked::before {background-color: white;left: 16px;}

textarea.autogrow { resize: none;overflow: hidden;min-height: 60px;max-height: 200px;}
/* endregion */

/* region === PAGING ### */
ul.pagination {text-align:center; margin:30px auto 0}
ul.pagination li {display:inline-block;vertical-align: middle;margin:2px 5px;width:26px; height:26px;line-height:26px;background-repeat:no-repeat; background-position:center;background-size: cover;font-size:12px;border-radius:20px;}
ul.pagination li.on {background-color:var(--navy);color:#fff;}
ul.pagination li a {vertical-align:top;width:100%; height:26px; line-height:26px;font-size:12px; color:#000; text-align:center;display:inline-block;border-radius:var(--border-radius);}
ul.pagination li.disabled {opacity:0.5}
ul.pagination li:hover {opacity:0.8}
ul.pagination li.prev {background:url(/Images/Icon/ico_down_select.svg) 2px 2px no-repeat;background-size: 21px 21px;transform: rotate(90deg);-webkit-transform: rotate(90deg);border: 1px solid var(--darkgray);}
ul.pagination li.next {background:url(/Images/Icon/ico_down_select.svg) 2px 2px no-repeat;background-size: 21px 21px;    transform: rotate(-90deg);-webkit-transform: rotate(-90deg);border: 1px solid var(--darkgray);}

/* endregion */

/* region === BUTTON ### */
a {color:var(--text-primary)}

a.btn {color: #fff;display:inline-block;position: relative; font-weight: 600; line-height: 1; text-decoration: none; letter-spacing: 0; cursor: pointer; border: 0; outline: 0;text-align:center;flex-grow: 0;background-color:#000;color:#ffffff;padding:17px 20px;font-size:14px;border-radius:var(--border-radius);white-space:nowrap;}
a.btn:not(.on).disabled {background-color:#ddd;color:#999;}
a.btn:not(.disabled):hover {transition: none;box-shadow: 0 14px 26px -12px rgba(0,0,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2)}
a.btn.btn-micro {padding: 4px 8px; margin: 1px 1px; font-size: 11px;border-radius:3px;}
a.btn.btn-tiny {padding: 6px 12px; margin: 1px 1px; font-size: 13px;border-radius:3px;}
a.btn.btn-small {padding: 11px 16px; margin: 1px 1px; font-size: 14px;border-radius:var(--border-radius);}
a.btn.btn-big {padding: 20px 30px; font-size: 15px;border-radius:var(--border-radius);}

a.btn-simple {color:var(--primary);display:inline-block;font-weight: 600; text-decoration: underline; letter-spacing: 0; cursor: pointer;}
a.btn-simple:hover {opacity:0.8;}
a.btn-underbar {color: #666;display:inline-block;text-decoration: underline; letter-spacing: 0; cursor: pointer;font-size:14px;}
a.btn-underbar:hover {opacity:0.8;}

a.btn.primary { background-color:var(--primary);color:#fff;}
a.btn.secondary { background-color:var(--secondary);color:#fff;}

a.btn.blue { background-color:var(--blue);color:#fff;}
a.btn.gray { border-radius:var(--border-radius); background-color:var(--darkgray);color:#fff;}
a.btn.green { background-color:var(--green);color:#fff;}
a.btn.navy { background-color:var(--navy);color:#fff;}
a.btn.purple { background-color:var(--purple);color:#fff;}
a.btn.red { border-radius:var(--border-radius); background-color:var(--red);color:#fff;}
a.btn.yellow { background-color:var(--yellow);color:#fff;}
a.btn.cyan { background-color:var(--cyan);color:#fff;}
a.btn.black { background-color:#000;color:#fff;}
a.btn.white { border-radius:var(--border-radius); background-color:#fff;color:var(--navy);border:1px solid var(--navy)}

a.btn.btn-rounded-navy {border-radius:30px; background-color:#fff;color:var(--navy);border:2px solid var(--navy);padding:16px 24px;display:flex;    align-items: center;font-size:16px;font-weight:600;}
a.btn.btn-rounded-navy.fill {background-color:var(--navy);color:#fff;}
a.btn.btn-rounded-navy svg.size-6 {margin-left:10px;color:var(--navy);height:16px;width:16px;}
a.btn.btn-rounded-navy.fill svg.size-6 {color:#fff;}
.label { display:inline-flex;background-color:color-mix(in srgb, var(--primary), white 90%);color:var(--primary); padding: 4px 8px; line-height: 1; border-radius: var(--border-radius);font-weight:600;font-size:12px; margin-right: 5px;white-space:nowrap; box-shadow:inset 0 0 0 1px color-mix(in oklab, currentcolor 10%, transparent);}

.label.secondary { background-color:color-mix(in srgb, var(--secondary), white 90%);color:var(--secondary);}
.label.blue, .label.ut10 { background-color:color-mix(in srgb, var(--blue), white 90%);color:var(--blue);}
.label.gray { background-color:color-mix(in srgb, var(--gray), white 90%);color:var(--darkgray);}
.label.green { background-color:color-mix(in srgb, var(--green), white 90%);color:var(--green);}
.label.navy { background-color:color-mix(in srgb, var(--navy), white 90%);color:var(--navy);}
.label.purple,  .label.ut20 { background-color:color-mix(in srgb, var(--purple), white 90%);color:var(--purple);}
.label.red { background-color:color-mix(in srgb, var(--red), white 90%);color:var(--red);}
.label.yellow { background-color:color-mix(in srgb, var(--yellow), white 90%);color:var(--yellow);}
.label.cyan { background-color:color-mix(in srgb, var(--cyan), white 90%);color:var(--cyan);}
.label.orange { background-color:color-mix(in srgb, var(--orange), white 90%);color:var(--orange);}

.badge { display:inline-block;background-color:#fff;color:#001C91; padding: 5px 5px 3px; line-height: 1; border-radius: 99px;font-weight:600;font-size:12px;font-weight:700;min-width:20px;text-align:center;}

.badge.blue { background-color:var(--blue);}
.badge.green { background-color:var(--green);}
.badge.gray { background-color:var(--darkgray);}

.float-badge-wr {position:relative;}
.float-badge { display:block; background:#106eb1; color:#fff; padding:3px 10px; position:absolute; top:120%; right:0; font-size:12px; font-weight:600; border-radius:5px;
	animation: fltBadge 2s ease-in-out infinite; will-change: transform;white-space:nowrap;}
.float-badge:after {display:block; content:""; width:8px;aspect-ratio:1/1; background:#106eb1; transform:rotate(45deg); position:absolute; left:50%; top:-3px; border-radius:2px; }
@keyframes fltBadge {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
/* endregion */

/* region === TABLE ### */
.table {border-spacing: 0; border-collapse: collapse;width:100%}
.table tr td, .table tr th {text-align: center; padding: 5px 8px;font-size:13px;vertical-align:bottom;color:#000;border-bottom:1px solid #b1b1b1;}
.table.vat tr td, .table.vat tr th {vertical-align:top;}
.table.border tr td, .table.border tr th {border:1px solid #30363d;}

.table tr th {vertical-align:middle;color:#eee;background-color:#165394; font-size:16px;font-weight:700;white-space:nowrap;}

.table thead tr th {}
.table.center tr td, .table.center tr th {text-align: center; padding: 5px 0px 5px 0px;}
.table.left tr td, .table.left tr th {text-align: left; padding-left: 10px;}
.table.table-scroll {margin-top:1px !important;}
.table.table-scroll thead {position: sticky;top: -1px;z-index:1;background-color:#0d1017;}
.table.table-scroll tbody {overflow-y:auto;overflow-x:hidden;}
.table.center tr td, .table.center tr th {text-align:center; padding:5px 0;}

.table.ap-calendar tr td, .table.pay tr th {vertical-align:middle;line-height:1.2;font-size:12px;}
/* endregion */

/* region === POPUP ### */
.layer-pop, .pop-wrap { position:fixed; width:100%; height:100%; top:0px; left:0px; background:rgba(0,0,0,0.8); z-index:98;overflow:auto; }
.pop-wrap { background:rgba(0,0,0,0.96); z-index:99;}
.pop-cont {position:absolute;width:calc(100% - 32px);bottom:16px;left:50%;transform: translateX(-50%);padding:16px;box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);background-color:#fff;border-radius:10px;max-height:calc(100% - 32px);overflow:auto;max-width:500px;}
.pop-cont .pop-title {font-weight:700;padding:10px 0 30px;text-align:center;}
.pop-cont a.btn {display:block;}
.pop-cont input[type="number"],.pop-cont input[type="text"],.pop-cont input[type="password"] ,.pop-cont input[type="search"], .pop-cont textarea {display:block !important;width:100%;}
.pop-bottom {display:flex;flex-direction:column;background-color:#eee;margin:20px -16px -16px;padding:12px 16px;}
.pop-bottom a.btn{margin:0;}
.pop-msg-img {text-align:center;}
.pop-msg-img img {width:60px;margin-bottom:32px;}
.fm-header {font-size:14px;color:#666;margin-top:10px;}
.fm-text {font-size:16px;padding-left:30px;}
.pop-text {font-size:16px; text-align:center; word-break:keep-all;}

#popWrap {position:fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 100000;}
#popBg {position:fixed;top: 0px;left: 0px;width: 100%;height: 100%;background-color:#000;opacity:0.7;}
.pop-box{width:80%;background-color:#13161f; z-index:100; position:absolute; top:50%; max-width:300px; left: 50%;transform: translate(-50%, -50%);border-radius:12px;}
.pop-box .pop-title{color:#333; color: #b3b3b3; font-size: 14px;border-bottom:1px solid #999;line-height: 30px;height: 30px;margin: 5px 10px;}
.pop-box .pop-con{text-align:center; color:#fff; font-size:18px; padding:30px 30px; line-height:1.4;word-break:keep-all;}
.pop-box .pop-btn-wrap{text-align:right;padding:0 20px 10px;}
.pop-box .pop-btn {text-align:center;display:inline-block; background-color:#24272c;color:#ffffff;padding:0px 20px;font-size:16px;height:24px;line-height:24px;border-radius:17px;}
.pop-box .pop-btn.green {background: linear-gradient(to right, #7ee07e, #8bc34a);}

.backdrop-mask {position:fixed;left: 0;top: 0;width:100%;height:100vh;background-color:rgba(0,0,0,0.6);display:none;z-index: 100001;}
.mask-message {margin:50vh auto 0;padding:20px 20px;background-color:#55aaff;border:1px solid #55aaff;border-radius:5px;width:80%;max-width:270px;font-size:16px;text-align:center;color:#fff;transform: translateY(-50%);}

.toast {visibility: hidden; min-width: 250px;margin-left: -125px; background-color:#ff9800;color: #fff; text-align: center;  border-radius: 6px;padding: 16px;position: fixed;  z-index: 9999; left: 50%; bottom: 30px;}
.toast.show {visibility: visible;animation: fadein 0.5s, fadeout 0.5s 2.5s;}
@keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}}
@keyframes fadeout {from {bottom: 30px; opacity: 1;}to {bottom: 0; opacity: 0;}}
/* endregion*/

/* region === DATEPICKER ### */
.ui-widget.ui-widget-content{padding: 6px 12px;margin-top: 10px;box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);border-radius: 6px;z-index:99 !important;width:fit-content;}
.ui-datepicker .ui-datepicker-header {border:0;background-color:#fff;margin:0 -12px;}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-w,.ui-widget-header .ui-icon.ui-icon-circle-triangle-e {background:url(/Images/Icon/ico_cal_prev.svg) center center no-repeat; width:100%;height:100%;margin:0;padding:0;position:inherit;left:inherit;top:inherit;}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-e {background-image:url(/Images/Icon/ico_cal_next.svg);}
.ui-datepicker td {border: 1px solid #eee;padding: 6px;font-size:14px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border:0;background:inherit;color:#000;padding:4px;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {color: #000;border-radius: 26px;width: 26px;height: 26px;line-height:26px;padding: 0;background-color:#ffdc28;border-width:0;text-align:center;font-weight:600;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{color: #fff;border-radius: 26px;width: 26px;height: 26px;line-height:26px;padding: 0;background-color:#55aaff;border-width:0;text-align:center;font-weight:600;}
/* endregion */

/* region === LAYOUT ### */
html {background-color:#fff;}
body {margin:0 auto; position:relative;font-family:"NanumSquare", "맑은 고딕", "Malgun Gothic", "sans-serif", "dotum"; font-size:15px; line-height:1.6; color:#111827;font-weight:400;background-color:#fff;}
header, main, footer {}
main {min-height:600px;}
header {box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);}
footer {padding:20px;background: #F8F8F8;border-top:1px solid var(--line-color);}
.w-content-w {max-width:600px;margin:0 auto;}
.n-content-w {max-width:400px;margin:0 auto;}
/* endregion */

/* region === HOME ### */
.h-logo-w {background-color:#fff;padding:0px 20px;margin-bottom:-13px;}
.h-logo-w a.icon{padding:0;line-height:1;}
.h-logo-w img.logo{height:80px;}
.h-menu-w {border-bottom:2px solid #E5E5E5;overflow:hidden;padding:10px 10px 0;}
.h-menu-w a.menu{padding:12px 6px;color:var(--darkgray);font-size:16px;font-weight:600;white-space:nowrap;letter-spacing:0px;line-height:1;border-bottom:3px solid #fff;}
.h-menu-w a.menu.on{border-color:var(--navy);color:var(--navy);}
.swiper-slide{width: fit-content;}
.video-c, .embed-responsive{position: relative;width: 100%;padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100%) */
    height: 0;overflow: hidden;border-radius:10px;}
.video-shorts-c{position: relative;padding-bottom: 177.78%; /* 16:9 aspect ratio (height / width * 100%) */
    height: 0;overflow: hidden;}
.video-c iframe, .embed-responsive iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.title-w {font-size:17px;font-weight:700;padding:10px 20px;cursor:pointer;}
a.a-title, .a-title {font-size:17px;font-weight:700;letter-spacing:-1px;margin-top:10px;display:block;line-height:1.4;}
.a-title.elli2 {max-height:50px;}
.a-desc {font-size:14px;color:var(--darkgray);margin-top:10px;text-align:justify;word-break:break-all;}
.a-date {font-size:12px;color:var(--darkgray);margin-top:10px;}
.a-line {margin:40px 0;border-bottom: 3px solid var(--navy);}
.a-img {width: 100%;border-radius:10px;}
.a-arrow {color:var(--darkgray);font-size:13px;display:flex;align-items:center;}
.a-arrow svg {width:16px;height:16px;margin-left:4px;}
.section-title {font-size:17px;letter-spacing:-1px; font-weight:700;padding:10px 16px; color:#346598;}
.img-text-w, a.img-text-w  {padding:0px 16px;vertical-align:top;height:80px;}

.img-in-text {margin-right:10px;width:120px;height:80px;background:transparent 50% 50% no-repeat; background-size:cover;flex-shrink:0;border-radius:10px;border:1px solid var(--line-color);align-items: start;}
.img-text-w .a-title {font-size:15px;height:35px;line-height:1.2; overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin:3px 0 0;}
.img-text-w .a-desc {font-size:11px;height:14px;overflow:hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;margin-top:5px;}
.img-text-w .a-date {margin-top:5px;}
.img-text-line {margin:14px 16px 14px 90px;height:1px;background-color:var(--line-color);}

.elli2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.text-w, a.text-w {padding:0px 16px 30px;display:block;}
.backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 21;background-color: rgba(0, 0, 0, 0.3);}

.terms p{font-size:14px;color:var(--text-primary);line-height:1.8;}
.terms p.bold2{font-size:16px;color:var(--blue);padding:30px 0 6px;font-weight:600;}

.article img {width:100%;padding-bottom:20px;}

.tab-menu-wrap{border-bottom:1px solid #ddd;margin:0 0px;}
.tab-menu{display:flex;flex-direction:row;margin-bottom:-1px;align-content:center;}
.tab-menu a.tab-item{padding:10px 15px;font-size:16px;color: var(--text-sub-primary);font-weight:600;text-align:center;letter-spacing:-1px;white-space:nowrap;border-bottom:2px solid var(--gray);}
.tab-menu a.tab-item.on {color:var(--text-primary);border-bottom:2px solid var(--blue);}

.photo-upload-wrap {display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;}
.photo-upload-wrap>.item {width:80px;height:80px;border-radius:var(--border-radius);border:1px solid #D8DDE2;overflow:hidden;position:relative;}
.photo-upload-wrap>.item>span {position:absolute;right:0;top:0;}
.photo-upload-wrap>.item>span>svg.x {width:22px;height:22px;color:var(--text-primary);cursor:pointer;}
.photo-upload-wrap>.item>img{object-fit:cover;width:100%;height:100%}
.photo-upload-wrap>.item.add{cursor:pointer;text-align:center;}
.photo-upload-wrap>.item.add svg{margin-top:24px;width:32px;height:32px;color:#D8DDE2;}

.grid-2btn-wrap {display:grid; grid-template-columns:repeat(2, minmax(0,1fr));column-gap: 20px;}
.grid-2btn-wrap > a.btn > .cnt {color:var(--primary);}

.main-popup-wrap {position:absolute;width:90%;top:40px;left:5%;gap:10px}
.main-popup {background-color:#fff;border:1px solid #eee;gap:0px}
.main-popup-cmd{padding:5px 20px;}
.main-popup-cmd a{line-height:1;}
.swiper-pagination {position:inherit;}
.swiper-pagination-bullet {width:6px;height:6px;border-radius:12px;background-color:var(--darkgray);margin:0 4px !important;display:inline-block;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--navy);}

.sns-wrap {position:absolute;right:16px;top:calc(100% - 10px);padding:16px;border:1px solid var(--line-color);box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.2);background-color:#fff;border-radius:10px;width:80%;max-width:320px;display:none;}
.sns-icon {width:40px;height:40px;cursor:pointer;}
a.btn-sns-etc {height:38px;line-height:38px;color:var(--darkgray);font-size:12px;padding:0 10px;border:1px solid var(--line-color);border-radius:10px;}
input.text-snscopy {height:42px;line-height:42px;color:var(--navy);font-size:12px;flex-grow:1;padding:0 10px;border:1px solid var(--line-color);border-radius:10px 0 0 10px;}
a.btn-snscopy {height:42px;line-height:42px;color:var(--darkgray);font-size:14px;padding:0 10px;border:1px solid var(--line-color);border-radius:0 10px 10px 0;border-left-width:0;text-align:center;background-color:var(--gray);}

.images_column .column_image {}
.images_column .column_image img{display:block;margin: 0 auto;}
.images_column .column_desc {margin:10px 0 20px; font-size:12.5px; text-align:center;color:#777;}
    /* endregion */


/* region === SIDE - MENU  ### */
.side {display:none;opacity:0; position:fixed;top:0px; left: 50%;transform: translate(-320px, 0); width:320px;z-index:97; background-color:#fefefe;border-right:1px solid #ccc;color:#000;box-shadow:0px 8px 16px rgba(0, 0, 0, .15);height:100%; webkit-transition: opacity .5s ease;transition: opacity .5s ease}
.side.open-menu {opacity:1;display:block;}
.side-scroll-wrap {position: relative;overflow: hidden;overflow-y: auto;height:calc(100% - 40px);padding-bottom:60px;}
.side-mobile-bg {position:fixed;width:100vw;height:100vh;left:0;top:0;background-color:#00000033;display:none;}
.side a.list-item {font-size:15px;font-weight:600; letter-spacing:-1px;padding:11px 0px;color:#111827;}
.side .hline {background-color:var(--line-color);margin:16px -16px;}
svg.side-close-icon {width:28px; height:28px; cursor:pointer;color:var(--darkgray);}
.lang {letter-spacing:-1px !important;font-size:14px;display: flex; align-items: center; line-height: 1;}
.lang img {height:12px;margin-right:4px;}
.side .lang {font-size:12px;}
/* endregion */


/* region === LOGIN  ### */
.login-wr .float-badge:after {left:unset;right:20px;}
/* endregion */
.bookmark {color:var(--gray);}
.bookmark.on {color:var(--red);}

.emotion-item {display:flex;flex-direction:column ;gap:0px;align-items:center;flex-shrink:0;margin-top:20px;}
.emotion-item-img {width:60px;}
.emotion-item-desc {font-size:12px;color:var(--darkgray);}
.emotion-item-count {font-size:14px;font-weight:600;}

.co-btn-add {display:block;border:1px solid #eee;border-radius:22px;height:44px;line-height:44px;font-size:14px;color:var(--darkgray); margin:20px 16px 0;padding-left:20px;}
.co-add-wrap {border:1px solid #eee;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:5px;margin:20px 16px 0;}
.co-add-user .name {font-weight:600;}
.co-add-wrap .co-add-text {height:90px;border:0;font-size:14px;padding:0;border-radius:0;}
.co-add-info {display:flex;flex-direction:row;gap:10px;align-items:center;}
.co-add-info a.co-btn-add-cancel {font-size:13px;color:var(--darkgray)}
.co-add-info .co-add-info-letter {font-size:13px;color:var(--darkgray)}
.co-add-info .co-add-info-letter .letter{color:black;}
.co-btn-add-save {width:32px;height:32px;flex-shrink:0;border-radius:16px;background-color:var(--darkgray);text-align:center;padding-top:5px;}
.co-btn-add-save svg {width:20px;height:20px;color:#fff;}

.reply-content-wrap .co-add-wrap {padding:0;border:0;    margin: 0px 16px 20px;}
.reply-content-wrap .co-add-user {display:flex;gap:10px;align-items:center;}
.reply-content-wrap .co-add-user .date{font-size:12px;color:var(--darkgray);flex-grow:1;}
.reply-content-wrap .co-text {border-radius:22px;padding:20px;background-color:#eee;}
.reply-content-wrap .co-add-wrap.is-reply {margin-left:50px;margin-top:-14px;}
.reply-content-wrap .co-reply-wrap {border-radius:22px;padding:16px;background-color:#ddd;margin:0 0 20px 0;}
.reply-content-wrap .co-reply-wrap .co-add-wrap {border-radius:16px;padding:16px;background-color:#fff;margin:0;}
.dot-select-wrap {position:relative;}
.dot-select {display:none;flex-direction:column;position:absolute;top:calc(100% - 5px);right:0;border-radius:var(--border-radius);border:1px solid #eee;background-color:#fff;box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);z-index:2;}
.dot-select svg.svg-icon {cursor:pointer;}
.dot-select .item {color:var(--text-primary);font-size:14px; padding:8px 20px;white-space:nowrap;cursor:pointer;display:flex;justify-content:space-between;gap:20px;}
.dot-select .item:not(:last-child) {border-bottom:1px solid #eee;}
.dot-select .item .icon {line-height:1;}
.dot-select .item .icon svg.size-6{width:20px;height:20px;}

#pop_complain label.radio {height:32px; line-height:32px;font-size:16px;}
/* endregion */

/* region === RESPONSIVE  ### */
@media (max-width: 600px) {
    .side {display:block;opacity:1;left:-320px;webkit-transition: left .5s ease;transition: left .5s ease;transform:inherit;}
    .side.open-menu {left:0;display:block;}
}
/* endregion */