@charset "utf-8";

@import url("reset.css");
@import url("layout.css");
@import url("common.css");


.sectiion-tit {
    font-size:24px;
    font-weight: 700;
    line-height:1.2;
}
.sub-tit {
    font-size:20px;
    font-weight: 700;
}
.section {
    margin-top:40px;
}

/* Seacrch Box */
.search-box {
    margin-top:40px;
    padding:24px 19px 9px;
    border-radius: 12px;
    border:1px dashed #e2d7c7;
    background-color: #faf9f6;
}
.search-box .col-3 {
    padding-left:20px;
    color:#927649;
}
.search-box .btn-wrap {
    margin:15px 0 0 0;
    padding-top:9px;
    border-top:1px dashed #e2d7c7;
}

/* top info area */
.top-info {
    padding:10px 40px;
    background-color: #f8f6f2;
}
.top-info h2 {
    margin-top:20px;
    font-size:20px;
}
.top-info .date-range {
    margin-top:10px;
    margin-bottom:20px;
    color:#f06445;
    font-size:16px;
}
.top-info .date-range span + span {
    margin-left:20px;
}
/* location info */
.location {
    margin-top:10px;
}
.location > ul {}
.location > ul li {
    position: relative;
    display: inline-block;
    padding-left: 16px;
    font-size: 0.875rem;
    color: #a17f49;
    font-weight: 500;
}
.location > ul li a {
    color:#a17f49;
    text-decoration: none;
}
.location > ul li:first-child {
    padding-left:0;
}
.location > ul li::after {
    content: '';
    width: 8px;
    height: 8px;
    border-left: 1px solid #a17f49;
    border-bottom: 1px solid #a17f49;
    position: absolute;
    top: 4px;
    left: 2px;
    transform: rotate(-135deg);
}
.location > ul li:first-child::after {
    content: none;
}

/* card style */
.card-box {
    display: flex;
}
.card-box .card-item a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding:20px;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0px 5px 10px 0px rgba(161,127,73,0.1);
}
.card-box .card-item + .card-item {
    margin-left:10px;
}
.card-box .card-item .thumb {
    display: inline-block;
    width: 60px;
    height:60px;
    border-radius: 50%;
    background-color: #f6f1e9;
    background-repeat: no-repeat;
    background-image: url('/images/template1/common/bg_ico.png');
    background-position: 0 -24px;
}
.card-box .card-item .thumb.msg {
    background-position: -60px -24px;
}
.card-box .card-item .cont {
    padding:0 20px;
    line-height: 1.4;
    color:#ab8850;
}
.card-box .card-item .cont > p {
    max-width: 70px;
}
.card-box .card-item .count {
    font-size: 30px;
    font-weight: 700;
    color:#f06445;
}
/* class info */
.class-info {display:flex; margin:0 -5px;}
.class-info > div {
    margin:0 5px;
    flex: 1;
    overflow:hidden;
    border:1px dashed #d7d2c4;
    border-radius: 12px;
    background-color: #fdfcfb;
}
.class-info > div .class-tit {
    padding:25px 0;
    font-size:20px;
    font-weight: 700;
    text-align:center;
    background-color: #fff;
}
.class-info > div .class-now {
    padding:40px 20px;
    color:#ab8850;
}
.class-info > div .class-now .count {
    display: block;
    margin-top:10px;
    width: 100%;
    text-align: center;
    font-size:40px;
    font-weight: 700;
    color:#f06445;
}
.class-info > div .class-status {
    padding:25px 20px;
    border-top:1px dashed #d7d2c4;
    background-color:#f8f6f2;
}
.class-info > div .class-status li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 0;
    border-bottom: 1px dashed #eaeaea;
}
.class-info > div .class-status li .txt {
    display: block;
    width: 47%;
    max-width: 90px;
    font-size:14px;
    line-height:1.4;
}
.class-info > div .class-status li .number {
    font-size:20px;
    font-weight: 700;
    text-align:right;
}

.class-status {
    padding:60px 40px;
    display: flex;
}
.class-status .status-info {
    display:flex;
    align-items: center;
    flex:1;
    width: 100%;
}
.class-status .status-info .thumb {
    display: inline-block;
    width:100px;
    height:100px;
    min-width: 100px;
    border-radius: 50%;
    background-color: #f6f1e9;
    background-image: url('/images/template1/common/bg_ico.png');
    background-repeat: no-repeat;
}
.class-status .status-info .thumb.img01 {
    background-position: -0px -118px;
}
.class-status .status-info .thumb.img02 {
    background-position: -100px -118px;
}
.class-status .status-info .thumb.img03 {
    background-position: -200px -118px;
}
.class-status .status-info .thumb.img04 {
    background-position: -300px -118px;
}
.class-status .status-info .status-cont {
    padding:0 30px 0 30px;
}
.class-status .status-info .status-cont  .count a {
    margin-top:10px;
    display: block;
    font-size:40px;
    color:#f06445;
    font-weight: 700;
    text-decoration: none;
}
.class-status .status-info .status-cont  .count span {
    font-weight: 400;
}

.schedule-box {
    padding:20px 39px 5px;
}
.schedule-box .schedule-cont .schedule-list {
    position: relative;
    margin-bottom:20px;
    margin-right:1px;
    border-radius: 12px;
    border:1px dashed #d7d2c4;
}
.schedule-box .schedule-cont .schedule-list a {
    display: block;
    padding:17px 20px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color:#111;
}
.schedule-box .schedule-cont .schedule-list.done {
    border:1px solid #f6f1e9;
    background-color: #f6f1e9;
}
.schedule-box .schedule-cont .schedule-list.done .disable {
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    opacity: 0.6;
    z-index: 1;
    background-color:#f6f1e9;
}
.schedule-box .schedule-cont .schedule-list.active {
    border:1px solid #f06445;
    background-color: #f06445;
    box-shadow: 0px 5px 10px 0px rgba(161,127,73,0.3);
}
.schedule-box .schedule-list .date {
    margin-bottom:19px;
    color:#ab8850;
    font-size: 12px;
    font-weight: 400;
}
.schedule-box .schedule-list .time {
    margin:5px 0 15px;
    font-weight: 400;
    font: 14px;
}
.schedule-box .schedule-list .subject {
    font-size: 30px;
    color:#f06445;
}
.schedule-box .schedule-list.active a  {
    color:#fff;
}
.schedule-box .schedule-list.done a > p  {
    color:#ab8850;
}
.schedule-box .schedule-list.active .date  {
    color:#fff;
}
.schedule-box .schedule-list.done .subject  {
    color:#ab8850;
}
.schedule-box .schedule-list.active .subject  {
    color:#fff;
}
/* slick slider */
.schedule-box.slick-slider {
    position: static;
}
.schedule-box .slick-arrow {
	background: url('/images/template1/common/bg_ico.png') no-repeat left top;
	display: inline-block;
	content: '';
	width: 62px;
	height: 62px;
}
.schedule-box .slick-prev,
.schedule-box .slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;
    display: block;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    z-index: 2;
}
.schedule-box .slick-next {
    right: -16px;
	background-position: -180px -22px;
}
.schedule-box .slick-prev {
    left:-16px;
	background-position:-119px -22px;
}

/* chart */
.chart-info {}
.chart-info > div { display:inline-block; margin-right:10px; }
.chart-info > div ul > li { font-weight: 700;}
.chart-info > div ul > li > span { margin-right:5px; display:inline-block; width:30px; height:10px; }
.chart-info .element li { color:#d28f00; }
.chart-info .element li span { background-color:#ffba26; }
.chart-info .element li + li span { background-color:#f2d493; }
.chart-info .middle li { color:#46a13d; }
.chart-info .middle li span { background-color:#46a13d; }
.chart-info .middle li + li span { background-color:#97cc92; }
.chart-info .high li { color:#368bc7; }
.chart-info .high li span { background-color:#368bc7; }
.chart-info .high li + li span { background-color:#a7c7de; }

.chart-box canvas { width:100%; }

/* tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    color:#ab8850;
    font-size: 16px;
}
.tooltip .tooltip-cont {
    position: absolute;
    top: -80px;
    left: 50%;
    padding: 15px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #a17f49;
    transform: translateX(-50%);
    box-shadow: 0px 2px 5px 0px rgb(153 153 153 / 50%);
    text-align: left;
    border-radius: 12px;
    display: none;
}
.tooltip .tooltip-cont::before { content: ''; position: absolute; display: block; border-color: transparent; border-style: solid; top: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-top-color: #fff; z-index: 5; }
.tooltip .tooltip-cont::after { content: ''; position: absolute; display: block; border-color: transparent; border-style: solid; top: 100%; left: 50%; margin-left: -9px; border-width: 9px; border-top-color: #a17f49; }
.tooltip:hover .tooltip-cont,
.tooltip:focus .tooltip-cont { display: block; }


/* toggle box */
.toggle-box {
    border-radius: 12px;
    overflow: hidden;
    border:1px dashed #e2d7c7;
    background-color: #faf9f6;
}
.toggle-box + .toggle-box {
    margin-top:40px;
}
.toggle-box .toggle-top {
    padding:22px 19px;
    transition:all 0.2s ease-out;
    transition-delay: 0.2s;
}
.toggle-box .toggle-btn {
    display: block;
    width: 36px;
    height:20px;
    background: url('/images/template1/common/btn_toggle_arrow.png') no-repeat center;
    transform: rotate(180deg);
}
.toggle-box.active .toggle-btn {
    transform: rotate(0);
}
.toggle-box.fix .toggle-top,
.toggle-box.active .toggle-top {
    background-color: #fff;
    transition:all 0.1s ease-out;
}
.toggle-box .toggle-cont {
    height:auto;
    max-height:0;
    transition:all 0.2s ease-out;
    background-color: #faf9f6;
}
.toggle-box.active .toggle-cont,
.toggle-box.fix .toggle-cont {
    display:block;
    max-height:100vh;
}
.toggle-box .toggle-cont .inner-tit {
    margin-bottom:20px;
    font-size: 16px;
    font-weight: 700;
}
.toggle-box .toggle-cont .tabs {
    padding:40px 15px 14px;
}
.toggle-box .toggle-cont .tbl {
    margin-top:0;
    border-radius: 0;
    border:0 none;
}

/* faq list */
.faq-list {
}
.faq-list dl {
    font-size:14px;
    cursor: pointer;
}
.faq-list dt {
    position: relative;
    padding:15px;
    border-top:1px dotted #e2d7c7;
}
.faq-list dt::after {
    content:'';
    display: block;
    position: absolute;
    top:18px;
    right:30px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    border-top: 2px solid #bcb19c;
    border-right: 2px solid #bcb19c;
    transform: rotate(135deg);
}
.faq-list dl.active dt::after {
    transform: rotate(-45deg);
}
.faq-list dl.active {
    margin-top:-1px;
    border-radius: 12px;
    border:1px dashed #a17f49;
    background-color: #fff;
    box-shadow: 0px 5px 10px 0px rgba(161,127,73,0.1);
}
.faq-list .active dt::after {
    top:13px;
}
.faq-list .active dt {
    color:#ee6a3c;
    font-weight: 700;
}
.faq-list .active dt,
.faq-list .active + dl dt,
.faq-list dl.active:last-child dt {
    border:0 none;
}

.faq-list dl:last-child dt {
    border-bottom:1px dotted #a17f49;
}
.faq-list dd {
    display: none;
    padding:10px 30% 25px 15px;
    line-height:1.4;
}

/* Checkbox, Radio */
.chk { position: relative; padding-left: 23px;;}
.chk + .chk { margin-left:10px;}
.chk.single { padding-left: 16px; }
.chk input { opacity: 0; position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: 0; }
.chk .chk-label::before { content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 1px solid #e2d7c7; background-color: #fff;}
.chk.radio .chk-label::after {content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: #e2d7c7; margin: 3px; border-radius: 50%;}
.chk.radio .chk-label::before { border-radius: 50%; }
.chk.radio input:checked + .chk-label::before {border-color:#ee6a3c;background-color: #ee6a3c;}
.chk input:checked + .chk-label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: #fff; margin: 3px; border-radius: 50%; }
.chk.checkbox input:checked + .chk-label::before  {border-color:#ee6a3c; background-color: #ee6a3c;}
.chk.checkbox input:checked + .chk-label::after { content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 4px; background: #ee6a3c; margin: 0; border-radius: 0; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.chk input:disabled + .chk-label::before { background: #d4cec9; border-color: #d4cec9; }
.chk input:disabled + .chk-label::after {background: #d4cec9;}


/* input */
.input-default,
.sel { 
    position: relative;
    display: block; 
    width: 100%; 
    padding: 5px 15px; 
    font-size: 0.85rem; 
    color:#111;
    background-color: #f6f1e9; 
    background-clip: padding-box; 
    border: 1px solid #f6f1e9; 
    border-radius: 32px; 
    height: 32px; 
    box-sizing: border-box;
}
.input-default::placeholder {
    color:#a17f49;
}
.input-default.lg {
    height:50px;
    line-height: 50px;
    border-radius: 50px;
}
.input-default:focus {
    background-color: #fff;
    border:1px solid #D7D2C4;
}

 /* Form */
.input-default.textarea { resize: vertical; height: auto; min-height: 100px; padding: 10px; border-radius: 12px;}
.input-default:disabled { background-color: #d4cec9; border-color: #d4cec9; color: #fff; opacity: 1; }
.input-select { display: inline-block; position: relative; width: 100%; }
.input-select select {-webkit-appearance: none;appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23111111%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size: 12px;background-position: calc(100% - 12px) center;background-repeat: no-repeat;}
.input-select select:disabled { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23888888%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.form-inline { display: flex; }
.form-inline .btn { margin-left: 5px; }
.form-inline .sel {min-width: 100px;}
.form-inline .sel + .sel {margin-left: 5px;}
.form-inline.form-datepicker { align-items: center; }
.form-inline.form-datepicker .sel-date {display: block; padding:0 15px; border-radius: 32px; background-color: #f6f1e9;}
.form-inline.form-datepicker .wave { margin: 0 11px; }
.form-inline.form-datepicker .input-default { display:inline-block; padding:0;}
.form-inline.form-datepicker .input-default:focus {background-color:#f6f1e9 ;}
.file-box {
    position: relative;
}
.file-box .input-default {
    padding-left: 85px;
}
.file-box label {
    position: absolute;
    top:0;
    left:0;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    vertical-align: middle;
    background-color: #a17f49;
    cursor: pointer;
    height: 32px;
    border-radius: 32px;
}
.file-box input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.file-list {}
.file-list ul {}
.file-list li {
    margin:5px 0;
}
.file-list li span {
    display: inline-block;
    padding:9px 15px;
    height:32px;
    font-size:14px;
    border-radius: 32px;
    box-sizing: border-box;
    background-color: #f6f1e9;
}
.file-list li span a {
    margin-left:4px;
    display: inline-block;
    width: 10px;
    height:10px;
    background:url('/images/template1/common/close_small.png') no-repeat;
}

.sel.disable,
.sel.disable:hover {
    background-color: #d4cec9;
    border-color:#d4cec9;
    color:#fff;
}
.sel:hover {
    background-color: #fff;
    border-color:#D7D2C4;
}
.sel.active {
    border-radius: 16px 16px 0 0;
}
.sel::before {
    position: absolute;
    content: '';
    color: #FFF;
    width: 10px;
    height:6px;
    right: 20px;
    top: calc(50% - 3px);
    background: url('/images/template1/common/sel_arrow.png') no-repeat center;
}

.sel.active::before {
    transform: rotateX(-180deg);
}

.sel-placeholder {
    display: block;
    text-align: left;
    line-height: 21px;
    pointer-events: none;
    user-select: none;
    visibility: visible;
}

.sel.active .sel-placeholder {
    visibility: hidden;
}

.sel-placeholder::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding:5px 15px;
    height:100%;
    content: attr(data-placeholder);
    visibility: hidden;
    box-sizing: border-box;
}

.sel.active .sel-placeholder::before {
    visibility: visible;
}

.sel-box {
    position: absolute;
    top: calc(100%);
    left: -1px;
    display: none;
    padding:9px;
    list-style-type: none;
    text-align: left;
    font-size: 1em;
    background-color: #fff;
    width: calc(100% + 2px);
    border:1px solid #f6f1e9;
    box-sizing: border-box;
    z-index: 1;
}

.sel.active .sel-box {
    display: block;
    animation: fadeInUp 500ms;
}

.sel-box-options {
    display: list-item;
    font-size: 14px;
    padding: 0.5em 1em;
    user-select: none;
}

.sel-box-options:hover {
    background-color: #f6f1e9;
}



  /* ===== Keyframes ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.caution-box {
    margin-top:40px;
    padding:25px 19px;
    font-size: 14px;
    border-radius: 12px;
    border:1px dashed #ee6a3c;
    background-color: #fcf6f4;
}
.caution-box dt {
    margin-bottom:15px;
    color:#ee6a3c;
}
.caution-box dd {
    padding:0 30px;
    line-height: 1.4;
}
/* table */
.tbl,
.single-box {
    padding:30px 19px;
    border:1px dashed #e2d7c7;
    border-radius: 12px;
    background-color: #faf9f6;
}
.tbl.line table {
    margin-top:0;
    border-top:1px dashed #e2d7c7;
}
.tbl table {
    margin-top:15px;
    width: 100%;
    table-layout: fixed;
}
.tbl .tbl-row td {
    text-align: left;
}
.tbl .tbl-row .sel {
    max-width: 270px;
}
.tbl table .left {
    text-align: left;
}
.tbl table .ellipsis {
    white-space : nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl table .text {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    vertical-align: middle;
    
    text-overflow: ellipsis;
}
.tbl table tbody tr.choice {
    background-color: #fae9e5;
}

.tbl table th,
.tbl table td {
    padding:15px 10px;
    vertical-align: middle;
}
.tbl table th {
    font-size:14px;
    font-weight: 400;
    color:#a17f49;
    border-bottom:1px dashed #a17f49;
}
.tbl table td {
    text-align: center;
    border-bottom:1px dashed #e2d7c7;
}
.tbl table tr:last-child td {
    border-bottom:1px dashed #a17f49;
}
.tbl .tbl-row tr:last-child td {
    border-bottom:1px dashed #e2d7c7;
}
.tbl .btn-wrap {
    margin-bottom:0;
}
.tbl .btn-wrap, .tbl .paging {
    padding-top:30px;
}
.tbl .paging {
    justify-content: center;
}
.tbl .tbl-paging { position: relative; text-align: center; display: flex; justify-content: center; }
.tbl .tbl-paging .paging-select { margin-left: 40px; }
.tbl .tbl-paging .paging-info { position: absolute; top: 35px; right: 0; }


/* Datepicker */
.ui-datepicker { padding: 15px; border-radius: 2px; width: 230px; border:1px solid #d4cec9 !important; border-radius: 12px; box-shadow: 0px 2px 5px 0px rgba(153,153,153,0.29); margin-top: -1px; transform: translateX(-25%); z-index: 2 !important;}
.ui-datepicker .ui-datepicker-header { background: none; padding: 0; border: 0; }
.ui-datepicker .ui-datepicker-title { font-weight: 600; }
.ui-datepicker .ui-datepicker-title .ui-datepicker-year,
.ui-datepicker .ui-datepicker-title .ui-datepicker-month { font-size: 18px; color: #222; }
.ui-datepicker table thead th { text-align: center; padding: 15px 0; }
.ui-datepicker table thead th > span { color: #737373; }
.ui-datepicker td span, 
.ui-datepicker td a { text-align: center; }
.ui-datepicker td a:hover { font-weight: 600; background: #fae9e5; }
.ui-datepicker td:first-child a { color: #ee6a3c; }
.ui-datepicker td:last-child a { color: #2688ca; }
.ui-datepicker .ui-state-default { background: none; border: 0; color: #111; padding: 2px 0; margin: 0 2px; }
.ui-datepicker .ui-state-active { background-color: #ee6a3c; color: #111 !important; border-radius: 2px; }
.ui-datepicker .ui-state-active:hover {color:#fff !important; background-color: #ee6a3c;}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span { background: none; }
.ui-datepicker .ui-datepicker-prev::before, 
.ui-datepicker .ui-datepicker-next::before { content: ''; width: 8px; height: 8px; border-left: 2px solid #111; border-bottom: 2px solid #111; position: absolute; top: 7px; left: 5px; }
.ui-datepicker .ui-datepicker-prev::before { transform: rotate(45deg); left: 9px; }
.ui-datepicker .ui-datepicker-next::before { transform: rotate(-135deg); }
.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-widget-content .ui-state-hover,
.ui-datepicker .ui-widget-header .ui-state-hover,
.ui-datepicker .ui-state-focus,
.ui-datepicker .ui-widget-content .ui-state-focus,
.ui-datepicker .ui-widget-header .ui-state-focus { border: 0; background: none; font-weight: normal; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { top: 2px; }
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; }
.ui-datepicker .ui-datepicker-next-hover { right: 2px; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker-trigger { cursor: pointer; top: 1px; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 30px; }
.tabs.type01 {padding: 0;}
.tabs .tabs-item { flex: 1; }
.tabs .tabs-link { display: block; padding: 11px 10px 10px; text-align: center; background: #fff; color: #ab8850; text-decoration: none; height: 40px; border: 1px solid #a17f49; border-left: 0;}
.tabs.type01 .tabs-link { color:#f06445; border-color:#f06445;   }
.tabs.sm .tabs-link {padding: 9px 10px; height:32px;}
.tabs .active .tabs-link { font-weight: 600; background: #ab8850; border-color: #a17f49; color: #fff; }
.tabs.type01 .active .tabs-link { border-color: #f06445; background-color: #f06445; }
.tabs.sm .active .tabs-link { padding-top:8px;}
.tabs .tabs-item:first-child .tabs-link { border-left: 1px solid #ab8850; border-radius: 40px 0 0 40px;}
.tabs .tabs-item:first-child.active .tabs-link { padding: 11px 10px 10px 11px; margin-left: -1px;  }
.tabs.sm .tabs-item:first-child.active .tabs-link {padding-top:8px;}
.tabs .tabs-item:last-child .tabs-link { border-radius:0 40px 40px 0}
.tabs-content .tabs-content-item { display: none; padding: 15px;}
.tabs-content .tabs-content-item.active { display: block; }

/* Paging */
.paging { display: flex; }
.paging .paging-link { overflow: hidden; position: relative; text-indent: -9999px; display: block; width: 32px; height: 32px; }
.paging .paging-link::before,
.paging .paging-link::after { content: ''; width: 8px; height: 8px; border-left: 2px solid #a17f49; border-bottom: 2px solid #a17f49; position: absolute; top: 11px; left: 0; }
.paging .paging-prev .paging-link::after,
.paging .paging-next .paging-link::before { content: none; }
.paging .paging-prev .paging-link::before,
.paging .paging-first .paging-link::before,
.paging .paging-prev .paging-link::after,
.paging .paging-first .paging-link::after { transform: rotate(45deg); }
.paging .paging-next .paging-link::before,
.paging .paging-last .paging-link::before,
.paging .paging-next .paging-link::after,
.paging .paging-last .paging-link::after { transform: rotate(-135deg); }
.paging .paging-first .paging-link::before { left: 10px; }
.paging .paging-first .paging-link::after { left: 16px; }
.paging .paging-prev .paging-link::before { left: 13px; }
.paging .paging-next .paging-link::after { left: auto; right: 13px; }
.paging .paging-last .paging-link::before { left: auto; right: 10px; }
.paging .paging-last .paging-link::after { left: auto; right: 16px; }
.paging .paging-inner { display: flex; align-items: center; padding: 0 5px; }
.paging .paging-inner .txt { margin-right: 10px; }
.paging .paging-inner .page { min-width: 45px; }
.paging .paging-inner .page .input-default { text-align: center; line-height:21px; }
.paging .paging-inner .slash { margin-left: 10px; }
.paging .paging-inner .total { margin-left: 5px; }
.paging .paging-select { min-width: 75px; }

.more {
    margin-top:25px;
}
.more .page-more {
    min-width: 200px;
    display: inline-block;
    text-decoration: none;
    height:32px;
    color:#111;
    line-height:32px;
    border-radius: 32px;
    text-align: center;
    transition: all .3s ease;
    background-color: #e7ddce;
}
.more .page-more:hover {
    background-color: #d3bea0;
}
.more .page-more > span {
    position: relative;
    display: inline-block;
    padding-right:20px;
}
.more .page-more > span:after {
    content: '';
    position: absolute;
    top: 11px;
    right: 0;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    border-top: 2px solid #99958b;
    border-right: 2px solid #99958b;
    transform: rotate(135deg);
}

/* Button */
.btn { 
    display: inline-block; 
    font-weight: 400; 
    color: #111; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: middle; 
    cursor: pointer; 
    user-select: none; 
    background-color: transparent; 
    border: 1px solid transparent; 
    padding: 0 15px; 
    font-size: 14px; 
    color:#fff;
    height: 32px; 
    line-height: 32px; 
    border-radius: 32px; 
    min-width: 70px; 
    transition: all .3s ease; 
    box-sizing: border-box; 
}
.btn.lg {font-size:16px; height:50px; line-height:50px; border-radius: 50px;}
.btn.sm {min-width:50px; font-size:12px; height:25px; line-height:25px;}
.btn.btn-import {
    background-color: #ee6a3c;
}
.btn.btn-import:focus,
.btn.btn-import:hover {
    background-color: #d44e1f;
}
.btn.btn-normal {
    color:#ee6a3c;
    background-color: #fae9e5;
}
.btn.btn-normal:focus,
.btn.btn-normal:hover {
    background-color: #f4d6cf;
}
.btn.btn-dark {
    background-color: #a17f49;
}
.btn.btn-dark:focus,
.btn.btn-dark:hover {
    background-color: #896834;
}
.btn.btn-light {
    color:#111;
    background-color: #e2d7c7;
}
.btn.btn-light:focus,
.btn.btn-light:hover {
    background-color: #d3bea0;
}
.btn.btn-line {
    border-color:#ee6a3c;
    border-radius: 0;
    color:#ee6a3c;
}
.btn.btn-line.active {
    background-color: #ee6a3c;
    color:#fff;
}

.btn.btn-more {
    position: relative;
    padding-right:15px;
    color:#ab8850;
    background-color: transparent;
}
.btn.btn-more:after {
    content: '';
    position: absolute;
    top: 12px;
    right: 0;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    border-top: 2px solid #bcb19c;
    border-right: 2px solid #bcb19c;
    transform: rotate(45deg);
}
.btn:disabled,
.btn[disabled] { background-color: #d4cec9; border-color: #d4cec9; color: #fff; pointer-events: none; }

.btn-wrap {
    margin-bottom:15px;
}
.header-top .btn-wrap {
    margin-bottom:0;
}
.btn-wrap.center {
    text-align:center;
} 
.btn-wrap.justfy {
    display:flex;
    justify-content: space-between;
}
.btn-sort {
    display: inline-block;
    font-size: 0;
}.btn-sort  + .btn-sort {
    margin-left:10px;
}
.btn-sort .btn-line:first-child {
    border-radius: 32px 0 0 32px;
}
.btn-sort:not(.solo) .btn-line:last-child {
    border-left:0;
    border-radius: 0 32px 32px 0;
}
.btn-sort.solo .btn-line {
    border-radius: 32px;
}
/* icon */
.ico {
    display: inline-block;
    background-image: url('/images/template1/common/bg_ico.png');
    background-repeat: no-repeat;
}
.ico.circle {
    border-radius: 50%;
}
.ico.line {
    padding:2px 2px;
    min-width: 20px;
    text-align: center;
    font-size:12px;
    font-weight: 700;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    background-image: none; 
    background-color: #fff;
}
.ico.ico-user {

}
.ico.ico-msg {
    background-position:-25px 0;
}
.ico.new {
    color:#ee6a3c;
    border-color:#ee6a3c;
}
.ico.semester {
    margin-right:5px;
    color:#ee6a3c;
    border-color:#ee6a3c;
    background-color: transparent;
    font-weight: 400;
}
.ico.notice {
    color:#a17f49;
    border-color:#a17f49;
}
.ico.caution {
    margin-right:5px;
    width: 20px;
    height:20px;
    line-height: 20px;
    vertical-align: sub;
    border:1px solid #ee6a3c;
    background-position:-51px -4px;
}
.ico.tbl-ico {
    margin:0 5px;
    width:32px;
    height:32px;
    border-radius: 50%;
    background-color: #f6f1e9;
}
.ico.ico-cou {
    background-position: 0 -84px;
}
.ico.ico-call {
    background-position: -32px -84px;
}
.ico.ico-file {
    background-position: -64px -84px;
}
.ico.ico-print {
    background-position: -96px -84px;
}

/* Popup */
body.win-pop { width:100%; min-width: 100%;}
.popup { display: none; position: fixed; left: 50%; top: 50%; z-index: 200; padding: 0; min-width: 500px; border-radius: 12px; overflow: hidden; transform: translateX(-50%) translateY(-50%); }
.popup.show { display:block; position: static; border-radius: 0; transform: none; }
.popup .pop-header { height: 50px; line-height: 50px; padding: 0 30px; font-size: 16px; font-weight: 700; background-color: #ab8850; color: #fff; }
.popup .pop-body { padding: 30px 30px 30px; background-color: #fff;}
.popup.show .pop-body { position: relative; padding-bottom:80px; }
.popup .pop-body .tab { padding:20px; border:1px dashed #e2d7c7; border-radius: 12px;}
.popup .pop-body .tab .tabs { padding-bottom:26px; }
.popup .pop-body .tab .tabs .tabs-link { font-size:14px;}
.popup .pop-body .tab .tabs .active .tabs-link { font-weight: 400;}
.popup .pop-body .tab .tabs-content .tabs-content-item { display:none; padding:0; }
.popup .pop-body .tab .tabs-content .tabs-content-item.active {display:block;}
.popup .pop-body .info-txt {font-size:14px; color:#111;}
.popup .pop-body .info-txt2 {position: relative; padding-left:29px; line-height: 1.4; font-size:14px; color:#f06445;}
.popup .pop-body .info-txt2::before {
    position: absolute; 
    content:'';
    display:block;
    width:20px;
    height:20px;
    top:0;
    left:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px'%3E%3Cimage x='0px' y='0px' width='20px' height='20px' xlink:href='data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAqFBMVEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEXwZEX////aFNW9AAAANnRSTlMABlam3/nz11VR271mJFIDiUDBDg3AVNgP4jvDOuNbu1yrZazgI/jy2SjEOQfWipOUUyIFC/pE20C9AAAAAWJLR0Q3MLi4RwAAAAd0SU1FB+cMFA8GMdHGTNIAAAC5SURBVBjTbVDrGkJAEJ0J0SKrELkVuuiiK+//aJFl5ev8mTNn93xnZgAa4EQQpaksKAg9ZkTVdERdU8mcSQaVze7ZlKnxJXSx5CbLpk1xVi4M4MpOneGt28732xqECFHMvlQVI/EGtslYTFLI9LG4y2CPYxElOFh/xGPOuH/i9j6oRx3Uj9TN2YyEXvBrP4cXAOU6WlNpSmFbXLPsoj3dbXi6u8Hog8TJ8/XOk5g43IRRKpalmEbteh/ceA4MgIDRVAAAAABJRU5ErkJggg==' /%3E%3C/svg%3E");
}
.popup .pop-body #find-id-frm  .result-list { margin-right:-15px;}
.popup .pop-body #find-id-frm  .result-list ul { overflow-y: auto; margin:11px 0 0; max-height: 155px; }
.popup .pop-body #find-id-frm  .result-list ul::-webkit-scrollbar {width: 6px;  }

.popup .pop-body #find-id-frm  .result-list ul::-webkit-scrollbar-thumb { background: #bcb19c; border-radius: 10px; }
.popup .pop-body #find-id-frm  .result-list ul::-webkit-scrollbar-track { background: transparent;}
.popup .pop-body #find-id-frm  .result-list ul li {font-size:14px;}

.popup .pop-body #find-id-frm .result-list ul > li dl { display: inline-flex; width:49%; }
.popup .pop-body #find-id-frm .result-list ul > li dt { display: inline-block; padding:19px 20px; color:#ab8850; border-bottom:1px dashed #d7d2c4; }
.popup .pop-body #find-id-frm .result-list ul > li dd { display: inline-block; flex:1; padding:19px 20px; font-weight: bold; color:#111; border-bottom:1px dashed #eaeaea; }
.popup .pop-body #find-id-frm .result-list ul > li .join-date dd { font-weight: 400;}
.popup .pop-body .tbl-frm {margin:18px 0 9px; width:100%;}
.popup .pop-body .tbl-frm th { padding:15px 20px; text-align:left; font-size: 14px; font-weight: 400; color: #a17f49; border-bottom: 1px dashed #d7d2c4; }
.popup .pop-body .tbl-frm td { padding:0 20px; border-bottom: 1px dashed #eaeaea; }
.popup .pop-body .flexbox { display:flex; align-items: center; gap:10px;}
.popup .pop-close:before, 
.popup .pop-close { position: absolute; width: 30px; height: 30px; right: 25px; top: 10px; cursor: pointer; }
.popup .pop-close:after,
.popup .pop-close:before { position: absolute; left: 15px; top: 5px; content: ' '; height: 20px; width: 2px; background-color: #fff; }
.popup .pop-close:before { transform: rotate(45deg); }
.popup .pop-close:after { transform: rotate(-45deg); }
.popup.show .pop-body .btn-wrap { position: absolute; left:0; width:100%; bottom:14px;}
.popup .pop-btn-area { margin-top: 20px; text-align: center; }
.popup .pop-btn-area .btn { margin: 0 3px; }



/* dynatree */
.scoll-box ul.dynatree-container {
    min-height: 200px;
    background-color: #faf9f6;
}

/* jqGrid css */
.ui-jqgrid {
    width: 100% !important;
}
.ui-jqgrid>.ui-jqgrid-view {
    width: 100% !important;
}
.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-hdiv {
    width: 100% !important;
}
.ui-jqgrid .ui-jqgrid-caption, .ui-jqgrid .ui-jqgrid-errorbar-ltr {
    display: none;
}
.ui-jqgrid .ui-jqgrid-htable {
    width: 100% !important;
}
.ui-jqgrid .ui-jqgrid-bdiv {
    width: 100% !important;
}
.ui-jqgrid .ui-jqgrid-btable {
    width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr, .ui-th-ltr {
    border-right:0 none;
    padding:10px;
}
.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr>td {
    padding:10px;
    border-style: dashed;
    border-right:0 none;
    border-color: #e2d7c7;
    text-align: center !important;
}
.ui-jqgrid .ui-jqgrid-view .ui-jqgrid-btable .jqgfirstrow td {
    padding:0 !important;

}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {

    border-color:#a17f49;
    border-style: dashed;
    background:#faf9f6 ;
    color:#a17f49;
}
.ui-widget-content {
    border:0 none;
}
.ui-jqgrid .ui-state-hover {
    background:#e2d7c7 ;
}