@import 'layout.css';
@import 'mobile.css';

/**
 *reset
 */

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

html {
    -webkit-text-size-adjust: 100%;
}

body, input, select, textarea, button {
    line-height:1.5;
    font-size:14px;
    font-family:'Noto Sans KR', sans-serif;
    letter-spacing:-0.75px;
    background-color:#2f2f2f08;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

fieldset, img {
    border-style:none;
    vertical-align:middle
}

a {
    color:#333;
    text-decoration:none;
    transition:all 0.3s
}

a:active, a:hover {
    text-decoration:none
}

table {
    width:100%;
    border-spacing:0
}

ol, ul {
    list-style: none
}

.hidden,caption {
    display:inline-block !important;
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:0;
    margin:0 !important;
    padding:0 !important;
    font-size:0;
    line-height:0;
    border:none !important;
    overflow:hidden !important
}

/**
 *form
 */

input, select, button:focus, button:active, textarea {
    outline:none;
    border:0;
    font-weight:300
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s
}

input::-ms-clear {
    display:none
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color:#999
}

input::-moz-placeholder, textarea:focus::-moz-placeholder {
    color:#999
}

input:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
    color:#999
}

input:-moz-placeholder, textarea:focus:-moz-placeholder {
    color:#999
}

textarea {
    overflow: auto
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance:button;
    border-style:none;
    background-color:transparent;
    cursor:pointer
}

.radio_wrap div {
    display:inline-block;
    margin:0 20px 0 0 !important
}

.checkbox,.radio {
    position:relative;
}

.input_radio:disabled + label:before,.input_checkbox:disabled + label:before {
    background-color:#ccc;
    border-color:#ccc
}

.input_checkbox,.input_radio {
    position:absolute;
    top:0;
    left:0;
    width:18px;
    height:18px;
    opacity:0
}

.label_checkbox,.label_radio {
    display:block;
    position:relative;
    padding-left:26px;
    font-size:15px;
    cursor:pointer
}

.label_checkbox:before {
    content:"\f00c";
    font-family: FontAwesome;
    font-size:13px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    left:0;
    top:50%;
    width:18px;
    height:18px;
    border-radius:2px;
    background:#fff;
    border:1px solid #2f2f2f;
    transform:translateY(-50%);
    color:transparent;
    box-sizing:border-box
}

.label_radio:before {
    content:"\f058";
    font-family: FontAwesome;
    font-size:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    left:0;
    top:50%;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    border:1px solid #2f2f2f;
    transform:translateY(-50%);
    color:transparent;
    box-sizing:border-box
}

.input_checkbox:checked + .label_checkbox:before,.input_radio:checked + .label_radio:before {
    color:#2f2f2f
}

.input_checkbox:focus + .label_checkbox:before,.input_radio:focus + .label_radio:before {
    -webkit-box-shadow: 0px 0px 7px 0px #2f2f2f14;
    -moz-box-shadow: 0px 0px 7px 0px #2f2f2f14;
    box-shadow: 0px 0px 7px 0px #2f2f2f14;
}

/**
 *font
 */

.poppins {
    font-family:'Poppins'
}
.poppins300 {
    font-family:'Poppins';
    font-weight:300
}
.poppins400 {
    font-family:'Poppins';
    font-weight:400
}
.poppins500 {
    font-family:'Poppins';
    font-weight:500
}
.poppins600 {
    font-family:'Poppins';
    font-weight:600
}
.poppins700 {
    font-family:'Poppins';
    font-weight:700
}
.poppins800 {
    font-family:'Poppins';
    font-weight:800
}
.poppins900 {
    font-family:'Poppins';
    font-weight:900
}

/**
 *layout
 */

#wrapper {
    position:relative;
    min-width:1300px;
    min-height:100vh;
    padding-bottom:231px;
    overflow:hidden
}

.tabContainer {
    width:1440px;
    margin:50px auto
}

.tabContainer .content {
    margin:0
}

.content {
    position:relative;
    width:1440px;
    margin:50px auto;
    padding:40px 80px;
    background-color:#fff;
    border: 1px solid #e6e6e6
}

.inner {
    width:1440px;
    margin-left:auto;
    margin-right:auto
}

hr.line {
    margin:0;
    padding:0;
    border-top:1px solid #e6e6e6
}

.clear:after {
    content:'';
    display:block;
    clear:both;
    visibility: hidden
}

.count {
    display:block;
    min-width:15px;
    height:15px;
    line-height:16px;
    margin-left:6px;
    text-align:center;
    border-radius:3px;
    font-size:13px;
    font-weight:400;
}

.count:before {
    content: "(";
    display: inline-block;
}

.count:after {
    content: ")";
    display: inline-block;
}

.count.active {
    background-color:#de4931
}

.lock {
    overflow-x:hidden
}

/**
 *header
 */

#header {
    height: 70px;
    background: #fff;
}

#header .inner {
    display:flex;
    justify-content:space-between
}

.hd_nav {
    display:flex;
    height:70px;
}

.logo {
   /* padding-top:22px;*/
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

.logo a span.logo_image {
    display:block;
    width: 150px;
    height:34px;
    text-indent:-9999px;
    background:url('/img/common/logo2.png') no-repeat center
}

.gnb {
    /*padding:22px 0 0 80px;*/
    padding: 0 0 0 80px;
}

.gnb ul {
    display: flex;
    align-items: center;
    height: 100%;
}

.gnb ul li a {
    display:block;
    padding:13px 20px;
    color:#333;
    font-size:17px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    font-family:'Poppins';
    opacity:0.5
}

.gnb ul li a.active {
   /* background-color:#fff;*/
    color:#333;
    opacity:1;
    font-weight:500
}

.gnb ul li:hover a {
    opacity:1
}

.hd_info {
    position:relative
}

.hd_info .hd_infoList {
    display:flex;
    align-items:center;
    height:70px;
    font-family:'Poppins'
}

.hd_infoList li {
    margin-left:13px
}

.hd_infoList li:first-child {
    margin-left:0
}

.hd_infoList li a {
/*    color:#fff*/
}

.hd_infoList li .txt {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end
}

.hd_infoList li .txt:before {
    content:'';
    position:absolute;
    left:0;
    bottom:-1px;
    width:0;
    height:1px;
    background-color:#fff;
    transition:all 0.3s
}

.hd_infoList li .txt:hover:before {
    width:100%
}

.hd_infoList .user {
    position:relative;
    margin-left:13px;
    padding-left:13px
}

/*.hd_infoList .user:before {
    content:'';
    position:absolute;
    top:5px;
    left:0;
    width:1px;
    height:10px;
    background-color:rgba(255,255,255,0.5)
}*/

.hd_infoList .user i {
    margin-right:6px
}

.hd_infoList li .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width:40px;
    height:40px;
    background-color:rgba(255,255,255,0.1);
    border-radius:8px;
    font-size:16px
}

.hd_infoList li:hover .ic {
    background-color:rgba(255,255,255,0.2);
}

.alarm_pop {
    position:absolute;
    top:70px;
    z-index:100;
    width: 350px;
    right: 0;
    border-radius:5px;
    background-color:#fff;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2)
}

.alarm_title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:50px;
    padding:0 15px;
    border-bottom:1px solid #e6e6e6
}

.alarm_title h3 {
    font-size:16px
}

.alarm_title button {
    display:flex;
    align-items:center;
    height:50px;
    font-size:18px
}

.alarm_list {
    max-height:390px;
    overflow-y:auto
}

.alarm_list li {
    position:relative;
    padding:10px 85px 10px 15px;
    border-bottom:1px solid #e6e6e6
}

.alarm_list li:last-child {
    border-bottom:0
}

.alarm_list li.confirm {
    background-color:#f6f9fb
}

.alarm_pop .empty {
    font-family:'Poppins'
}

.alarm_list li a:hover {
    text-decoration:underline
}

.alarm_list li span {
    display:block;
    margin-top:5px;
    font-size:12px;
    font-family:'Poppins'
}

.alarm_list li button {
    position:absolute;
    top:50%;
    right:10px;
    margin-top:-14px;
    padding: 4px 9px;
    border: 1px solid #e6e6e6;
    transition:all 0.3s;
    font-family:'Poppins';
    font-size:12px
}

.alarm_list li button:hover {
    border-color:#2f2f2f;
    background-color:#2f2f2f;
    color:#fff
}

.alarm_noti {
    display:flex;
    justify-content:center;
    padding:10px;
    border-top:1px solid #e6e6e6
}

.alarm_noti span {
    position:relative;
    display:flex;
    align-items:center;
    padding:0 13px;
    font-size:13px
}

.alarm_noti span.noRead:before {
    content:'';
    position:absolute;
    top:5px;
    left:0;
    width:1px;
    height:11px;
    background-color:#ddd
}

.alarm_noti span.read em {
    background-color:#f6f9fb
}

.alarm_noti span.noRead em {
    background-color:#fff
}

.alarm_noti em {
    width:35px;
    height:18px;
    margin-left:8px;
    border:1px solid #e6e6e6
}

.alarm_list_wrap {
    padding: 0.75em;
    max-height: 500px;
    background: #e7e7e7;
    overflow: hidden;
}

.alarm_list {
    height: 100%;
}

.alarm-item {
    margin-bottom: 0.25em;
    padding: 0.5em;
    border-radius: 0.25em;
    cursor: pointer;
    background: #e7e7e7;
}

.alarm-item.not-read {
    background-color: #fff;
}

.alarm-item:hover, .alarm-item:focus {
    color: var(--vz-dropdown-link-hover-color);
    background-color: #e7e7e7;
}

.alarm-item .time span {
    font-size: 0.8em;
}

.depth2 {
    position:relative;
    padding:15px 0;
    background-color:#fff;
    -webkit-box-shadow: 0px 15px 23px -5px rgba(82, 63, 105, 0.08);
    box-shadow: 0px 15px 23px -5px rgba(82, 63, 105, 0.08);
    z-index:1
}

.depth2 ul {
    flex-wrap:wrap;
    display:flex
}

.depth2 li {
    margin:5px 10px 5px 0
}

.depth2 li a {
    display:block;
    padding:10px 15px;
    color:#97a0a9;
    border:1px solid #e6e6e6;
    border-radius:8px
}

.depth2 li a.active {
    color:#fff !important;
    background: #2f2f2f;
    background: -moz-linear-gradient(left, #2f2f2f 1%, #d69855 100%);
    background: -webkit-linear-gradient(left, #2f2f2f 1%,#d69855 100%);
    background: linear-gradient(to right, #2f2f2f 1%,#d69855 100%);
}

.depth2 li:hover a {
    color:#2f2f2f;
}

.quick_banner {
    position:fixed;
    top:203px;
    left:49px;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:18px
}

.quick_banner a {
    position:relative;
    display:flex;
    align-items:center;
    width:55px;
    height:55px;
    background-color:#2b70e0;
    border-radius:50px;
    box-shadow:5px 5px 10px 0px rgba(0,0,0,0.3)
}

.quick_banner a:hover {
    width:213px
}

.quick_banner span {
    position:absolute;
    top:15px;
    right:0;
    display:flex;
    align-items:center;
    padding:0 15px 0 20px;
    visibility:hidden;
    opacity:0;
    font-size:15px;
    font-weight:500;
    color:#fff
}

.quick_banner a:hover span {
    visibility:visible;
    opacity:1;
    transition:all 0.7s
}

.quick_banner span i {
    margin:-1px 0 0 7px
}

.quick_banner button {
    display:flex;
    justify-content:center;
    align-items:center;
    width:55px;
    height:55px;
    font-size:21px;
    color:#fff
}

/**
 *footer
 */

#footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:#28323b
}

.f_top {
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.f_top a {
    position:relative;
    display:inline-block;
    margin-right:11px;
    padding-right:11px;
    font-size:13px;
    color:#7e878b
}

.f_top .privacy {
    color:rgba(255,255,255,0.7)
}

.f_top a:after {
    content:'';
    position:absolute;
    top:5px;
    right:-3px;
    width:1px;
    height:10px;
    background-color:#7e878b
}

.f_top a:last-child:after {
    display:none
}

.f_cont {
    display:flex;
    padding:30px 0 50px;
    color:#7e878b;
    font-size:13px
}

.f_logo a {
    display:block;
    width:150px;
    height:34px
}

.f_logo a span {
    display: block;
    height: 45px;
    /*text-indent: 50px;*/
    /*background: url('/images/logo.png') no-repeat left center/45px;*/
    color:#fff;
}

.f_info {
    margin:0 auto 0 50px
}

.f_info p {
    margin-bottom:5px
}

.f_info p span {
    position:relative;
    margin-right:10px;
    padding-right:10px
}

.f_info p span:last-child {
    margin-right:0;
    padding-right:0
}

.f_info p span:after {
    content:'';
    position:absolute;
    top:5px;
    right:-1px;
    width:1px;
    height:10px;
    background-color:#7e878b
}

.f_info p span:last-child:after {
    display:none
}

.f_banner {
    display:flex;
    gap:30px
}

.f_banner li h3 {
    font-size:16px;
    font-weight:500;
}

.f_banner li h2 {
    margin:3px 0;
    font-family:'Poppins';
    font-size:20px;
    font-weight:500;
    color:#fff
}

.f_banner li span {
    display:block;
    color:#7e878b
}

/**
 *tabs
 */

.tabs {
    display:flex
}

/* tab type1 */
.tabs li a {
    display:flex;
    justify-content:center;
    align-items:center;
    width:140px;
    height:58px;
    background-color:#f6f9fb;
    border:1px solid #e6e6e6;
    border-left:0;
    border-bottom:0;
    color:#97a0a9;
    font-size:15px
}

.tabs li:first-child a {
    border-left:1px solid #e6e6e6;
    border-top-left-radius:5px
}

.tabs li:last-child a {
    border-top-right-radius:5px
}

.tabs li.active a {
    height:61px;
    background-color:#fff;
    color:#000;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-top:4px solid #2f2f2f;
    border-bottom-color:#fff;
    margin-top:-3px;
    font-weight:500
}

.tabs li:hover a {
    background-color:#fff
}

.tabs li.active .count {
    background-color:#de4931
}

.tabs li .count {
    margin-top:1px;
    padding-left:3px;
    padding-right:4px;
}

/* tab type2 */
.tab_wide {
    display:flex;
    margin:50px 0 40px
}

.tab_wide li {
    flex:1;
    text-align:center
}

.tab_wide li a {
    display:block;
    margin:0 1px;
    padding-bottom:13px;
    border-bottom:3px solid #c7cbd0;
    font-size:18px;
    color:#666
}

.tab_wide li.active a {
    border-color:#2f2f2f;
    color:#2f2f2f;
    font-weight:500
}

/**
 *button
 */

.btn_wrap {
    display:flex;
    justify-content:center;
    width:100%;
    margin: 10px 0;
}

.btn_wrap .btns {
    margin:0 5px;
    min-width:150px;
    text-align:center
}

.btns {
    display:inline-block;
    height:45px;
    line-height:43px;
    padding:0 17px;
    border-radius:0.25rem;
    transition:all 0.4s
}

.btns_type1 {
    border:1px solid #e6e6e6;
    background: #2f2f2f;
    background: -moz-linear-gradient(left, #2f2f2f 1%, #d69855 100%);
    background: -webkit-linear-gradient(left, #2f2f2f 1%,#d69855 100%);
    background: linear-gradient(to right, #2f2f2f 1%,#d69855 100%);
    color:#fff;
}

.btns_type2 {
    background: #fff;
    color:#97a0a9;
    border:1px solid #e6e6e6
}

.btns_type3 {
    border:1px solid #4b4b4b;
    background-color:#4b4b4b;
    color:#fff
}

.btns_type4 {
    border:1px solid #acacac;
    background-color:#acacac;
    color:#fff
}


.btns:hover {
    /*opacity:0.8*/
}

.btns_type2:hover {
    color:#2f2f2f;
    border:1px solid #2f2f2f;
}

.btns_type1:hover,.btns_type3:hover {
    color:#fff;
}

.btns i {
    margin-left:7px
}

.info_btn {
    display:flex;
    flex-direction:column;
    min-width:200px;
    margin:0 7px;
    border:1px solid #e6e6e6;
    border-radius:0.25rem;
    background-color:#f6f9fb;
    overflow:hidden
}

.info_btn div {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    padding:15px
}

.info_btn h4 {
    font-size:14px;
    font-weight:500
}

.info_btn a {
    display:block;
    height:45px;
    line-height:43px;
    text-align:center;
    background-color:#d6557c;
    color:#fff
}

.info_btn a:hover {
    opacity:0.8
}

.info_btn a i {
    margin-left:7px
}

/**
 *comment
 */

.noti_box {
    position:relative;
    padding:20px;
    margin-bottom:30px;
    background-color: #fff;
    border:1px solid #e6e6e6;
}

.noti_box i {
    margin-right:3px
}

.noti_box p {
    padding:3px 0
}

.noti {
    padding-top:13px;
    margin-top:30px;
    border-top:1px solid #e6e6e6
}

.noti p {
    padding:3px 0;
    color:#666
}

.guideline {
    position: absolute;
    top: 237px;
    left: 344px;
    z-index: 1;
    margin-top: 30px;
    padding: 11px 30px;
    background-color: #f6f9fb;
    border: 1px solid #e6e6e6;
}

.guideline div {
    padding:11px 0
}

.guideline h4 {
    font-size:15px;
    font-weight:500
}

.guideline h4 i {
    margin-right:3px
}

.guideline p {
    margin-top:5px
}

/**
 *title
 */

.h3_title {
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid #e6e6e6;
    font-size:22px;
    font-weight:500
}

.h3_title span {
    color:#d6557c
}

.h3_title .line {
    position:relative;
    padding-left:12px;
    margin-left:12px;

}

.h3_title .line:before {
    content:'';
    position:absolute;
    top:10px;
    left:2px;
    width:1px;
    height:15px;
    background-color:#d6557c
}

/**
 *table
 */

.table_form1 {
    background-color:#fff;
    /* border:1px solid #e6e6e6 */
}

.table_form1 th {
    padding:20px 15px;
    font-weight:500;
    font-size:15px;
    text-align:center
}

.table_form1 th.th_arrow span {
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer
}

.table_form1 th.th_arrow span.active {
    color:#d6557c
}

.table_form1 th.th_arrow span i {
    margin-right:6px;
    display:none;
    transition:all 0.3s
}

.table_form1 th.th_arrow span.active i {
    display:block
}

.table_form1 th.th_arrow span.asc i {
    webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.table_form1 td {
    padding:20px 15px;
    /* border-top:1px solid #e6e6e6; */
    text-align:center
}

.table_form1 tbody tr {
    background-color:#fff
}

/*.table_form1 tbody tr:nth-child(2n) {
    background-color:#fff
}

.table_form1 tbody tr:nth-child(2n+1) {
    background-color:#f6f9fb
}*/

.table_form2 {
    background-color:#fff;
    border:1px solid #e6e6e6;
    border-bottom:none
}

.table_form2 th {
    padding:20px 15px;
    font-weight:500;
    font-size:15px;
    border-bottom:1px solid #e6e6e6;
    text-align:center
}

.table_form2 td {
    padding:20px 15px;
    border-bottom:1px solid #e6e6e6;
    box-sizing:border-box;
    text-align:center
}

.table_form2 a {
    margin:0 5px;
    color:#d6557c;
    font-weight:500
}

.table_form2 tbody tr:nth-child(2n) {
    background-color:#fff
}

.table_form2 tbody tr:nth-child(2n+1) {
    background-color:#f6f9fb
}

.table_form3 {
    text-align:center;
    border-top:1px solid #e6e6e6;
    border-left:1px solid #e6e6e6;
    font-size:16px
}

.table_form3 th {
    padding:15px;
    border-right:1px solid #e6e6e6;
    border-bottom:1px solid #e6e6e6;
    background-color:#f6f9fb;
    font-weight:500
}

.table_form3 td {
    padding:15px;
    border-right:1px solid #e6e6e6;
    border-bottom:1px solid #e6e6e6;
    background-color:#fff
}

.table_form3 td span {
    font-size:13px;
    color:#d6557c
}

.empty {
    text-align:center;
    padding:20px 0;
    background-color:#fff
}

.empty i {
    display:block;
    margin-bottom:8px;
    font-size:20px
}

.td_btn {
    display:block;
    height:36px;
    line-height:32px;
    padding:0 20px;
    border:1px solid #e6e6e6
}

.td_btnLine:hover {
    border-color:#000
}

.td_btnSubmit {
    background-color:#d6557c;
    border-color:#d6557c;
    color:#fff
}

.td_btnSubmit:hover {
    opacity:0.8
}

.table {
    --vz-table-color-type: initial;
    --vz-table-bg-type: initial;
    --vz-table-color-state: initial;
    --vz-table-bg-state: initial;
    --vz-table-color: var(--vz-body-color);
    --vz-table-bg: transparent;
    --vz-table-border-color: var(--vz-border-color);
    --vz-table-accent-bg: transparent;
    --vz-table-striped-color: var(--vz-body-color);
    --vz-table-striped-bg: rgba(var(--vz-body-color-rgb), 0.02);
    --vz-table-active-color: var(--vz-body-color);
    --vz-table-active-bg: rgba(var(--vz-body-color-rgb), 0.04);
    --vz-table-hover-color: var(--vz-body-color);
    --vz-table-hover-bg: rgba(var(--vz-body-color-rgb), 0.04);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--vz-table-border-color);
}

.table>thead {
    vertical-align: bottom;
    border-color: var(--vz-border-color);
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

.table.table-line>:not(caption)>*>* {
    padding: 0.75rem 0.6rem;
    color: var(--vz-table-color-state),var(--vz-table-color-type,var(--vz-table-color));
    background-color: var(--vz-table-bg);
    border-bottom-width: var(--vz-border-width);
    -webkit-box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
    box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
}

.table.table-light thead > tr > * {
    padding: 0.75rem 0.6rem;
    color: var(--vz-table-color-state),var(--vz-table-color-type,var(--vz-table-color));
    background: #2f2f2f12;
    border-bottom-width: var(--vz-border-width);
    -webkit-box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
    box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
}

.table.table-light >:not(caption)>*>* {
    padding: 0.75rem 0.6rem;
    color: var(--vz-table-color-state),var(--vz-table-color-type,var(--vz-table-color));
    background: #fff;
    border-bottom-width: var(--vz-border-width);
    -webkit-box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
    box-shadow: inset 0 0 0 9999px var(--vz-table-bg-state,var(--vz-table-bg-type,var(--vz-table-accent-bg)));
}

.table th span {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.table th span.active {
    color: #d6557c;
}

.table th span i {
    margin-right: 6px;
    display: none;
    transition: all 0.3s;
}

.table th span.active i {
    display: block;
}

/**
 *�먮윭, 以�鍮꾩쨷
 */

.etc {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    height:100vh
}

.etc_txt {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    height:375px;
    background:url('/img/common/waiting_page.png') no-repeat center
}

.etc_txt h1 {
    font-size:40px
}

.etc_txt h1 strong {
    color:#1b60ab;
    font-size:50px
}

.etc_txt p {
    margin-top:10px;
    font-size:16px
}

.nav {
    --vz-nav-link-padding-x: 1rem;
    --vz-nav-link-padding-y: 0.5rem;
    --vz-nav-link-color: var(--vz-link-color);
    --vz-nav-link-hover-color: var(--vz-link-hover-color);
    --vz-nav-link-disabled-color: var(--vz-secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: var(--vz-nav-link-padding-y) var(--vz-nav-link-padding-x);
    font-size: var(--vz-nav-link-font-size);
    font-weight: var(--vz-nav-link-font-weight);
    color: var(--vz-secondary-color);
    background: 0 0;
    border: 0;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.card-header-tabs {
    margin-right: calc(-.5 * var(--vz-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--vz-card-cap-padding-y));
    margin-left: calc(-.5 * var(--vz-card-cap-padding-x));
    border-bottom: 0;
}

.nav-tabs-custom.card-header-tabs {
    margin-top: -1rem;
}

.nav-tabs-custom .nav-item {
    position: relative;
}

.nav-tabs-custom .nav-item .nav-link {
    border: none;
    font-weight: 500;
}

.nav-tabs-custom.card-header-tabs .nav-link {
    padding: 1rem 1rem;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: #2f2f2f;
}

.nav-tabs-custom .nav-item .nav-link .badge {
    background: var(--vz-secondary-color);
}

.nav-tabs-custom .nav-item .nav-link.active .badge {
    background: #2f2f2f;
}

.nav-tabs-custom .nav-item .nav-link::after {
    content: "";
    background: #2f2f2f;
    height: 3px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-transition: all 250ms ease 0s;
    transition: all 250ms ease 0s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.nav-tabs-custom .nav-item .nav-link.active:after, .nav-tabs-custom .nav-item .nav-link:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.text-red {
    color: #dc0441 !important;
}
.text-orange {
    color: #fc7303 !important;
}
.text-yellow {
    color: #ecb403 !important;
}
.text-green {
    color: #2dce89 !important;
}
.text-teal {
    color: #2bcbba !important;
}
.text-cyan {
    color: #17a2b8 !important;
}
.text-white {
    color: #fff !important;
}
.text-gray {
    color: #969696 !important;
}
.text-gray-dark {
    color: #343a40 !important;
}
.text-blue {
    color: #083dc1 !important;
}
.text-purple {
    color: #aa4cf2 !important;
}
.text-lightpink-red {
    color: #ff7088 !important;
}
.text-lightgreen {
    color: #26eda2 !important;
}
.text-indigo {
    color: #6574cd !important;
}

.plan-type-text{
    position:relative;
}
.plan-type-text,
.option-type-text{
    width:130px;
}
.plan-type-text.exist-ft{
    text-align: center;
    width: calc(100% - 28px);
    margin-left:28px;
    border-radius: 0 0.25rem 0.25rem 0;
}
.plan-type-text.exist-ft:before{
    content:'FT';
    position:absolute;
    top:0;
    left:-28px;
    background-color: #de4f98;
    color: #fff;
    padding:0.5rem !important;
    border-radius: 0.25rem 0 0 0.25rem;
}
.badge-clara {
    color: #fff;
    background-color: #de4f98;
    font-weight:500;
}
.badge-clara-light{
    background-color:#cecfce;
    color:#000;
    font-weight:500;
}