@charset "utf-8";

:root{
    --header-height:130px;
    --footer-height:255px;
    --container-width:1400px;
    --container-padding:50px;
    --primary-color: #13a9e9;
    --point-color: #006e9d;
    --base-font-color:#161616;
    --white-color:#ffffff;
    --placeholder-color:#636363;
    --input-bg:#f5f5f5;
    --input-color:#3c3c3c;
    --input-height: 50px;
}

/*공통 영역*/
* {font-family: Pretendard,sans-serif;}
.container{margin: 0 auto;width: var(--container-width); padding:0 var(--container-padding);}
html,body{height: 100%;}
.wrapper{min-width: var(--container-width);    height: 100%;padding-top: var(--header-height);}

/*공통 style*/
.button {background-color: var(--primary-color);width: 136px;height: 44px;display: inline-flex;border-radius: 7px;justify-content: center;align-items: center;color:var(--white-color);font-size: 17px;letter-spacing: -0.01em;font-weight: 500;transition-duration: 0.3s;transition-property: box-shadow,transform;}
.button.color-p{background-color: var(--point-color);}
.button.color-w{background-color: var(--white-color);color:#2d2d2d;}
.button.color-b{background-color: #23c4f9;color:var(--white-color);}
.button.submit{width:325px;height: 60px; font-size: 21px;font-weight: 800;}
.button.blue{background-color: #595959;width: 150px;font-size: 15px;}
.button.black{background-color: var(--point-color);width: 150px;font-size: 15px;}
.button.small{width:87px;height: 29px;font-size: 12px;}
.button.excel{background-color: #21a265;width: 150px;font-size: 15px;}
.button.excel::before{content:'';display: inline-block;background-image: url("../images/icon-excel.png");width: 29px;height: 28px;margin-right: 7px;}
.button:hover{box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);transform: translateY(-3px);}/*hover event*/


/*헤터 스타일*/
.site-header{width: 100%;background-color: #ffffff;height: var(--header-height);z-index: 3;position: fixed;top:0;left: 0;transition-duration: 0.3s;}
.site-header .header-container{width: var(--container-width);height:100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
.site-header .site-menu{display: flex;column-gap: 62px;align-items: center}
.site-header .site-menu .logo-item > img{width: 188px;height: 69px;display: block;}
.site-header .site-menu .menu-box{}
.site-header .site-menu .menu-box .menu-list{display: flex;column-gap: 62px;}
.site-header .site-menu .menu-box .menu-list .menu-item{position: relative;padding: 20px 0;}
.site-header .site-menu .menu-box .menu-list .menu-item > a{font-family: Pretendard,sans-serif;font-size: 22px;font-weight:500;letter-spacing: -0.025em;color:var(--base-font-color);}

.site-header .site-menu .submenu-list{position: absolute;border:1px solid #a8a8a8;min-width: 150px;left: 50%;border-radius: 10px;box-shadow: 3px 3px 5px rgba(0,0,0,0.05);opacity: 0;pointer-events: none;transform: translate(-50%,0);background-color: var(--white-color);transition-duration: 0.3s;transition-property: opacity,transform;overflow: hidden;}
.site-header .site-menu .submenu-list .submenu-item > a{font-family: Pretendard,sans-serif;font-size: 18px;font-weight:300;letter-spacing: -0.025em;color:#535353;height: 40px;display: flex;justify-content: center;align-items: center;transition-duration: 0.3s;transition-property: background-color;}
.site-header .site-menu .submenu-list .submenu-item > a:hover{background-color: #e3f7ff;  font-weight:500;}
.site-header .site-menu .menu-box .menu-list .menu-item.submenu:hover .submenu-list{opacity: 1;pointer-events: auto;transform: translate(-50%,15px);}

.site-header .member-button{display: flex;column-gap: 4px;}
.site-header .member-button .m-button{width: 100px;height: 35px;display: inline-flex;justify-content: center;align-items: center;border-radius: 4px;font-family: Pretendard,sans-serif;font-size: 16px;color:var(--white-color);font-weight: 500;letter-spacing: -0.025em;}
.site-header .member-button .m-button.login{background-color: var(--primary-color);}
.site-header .member-button .m-button.join{background-color: var(--point-color);}
.site-header .member-button .m-button.logout{background-color: var(--point-color);}

.site-header .member-info{display: flex;align-items: center;margin-right: 15px;color:#8b8a8a;}
.site-header .member-info :nth-of-type(n + 1){}
.site-header .member-info .bar{margin: 0 10px;}
.site-header .member-info .member-pointer{font-size: 15px;font-weight: 500;font-family: Pretendard, sans-serif;}
.site-header .member-info .member-pointer::before{content:'보유포인트 :';margin-right: 5px;}
.site-header .member-info .member-name{font-size: 20px;font-weight: 700;color:var(--primary-color);font-family: Pretendard,sans-serif;}
.site-header .member-info .member-name::after{content:'님';font-weight: 500;color: #8b8a8a;margin-left: 5px;}

.site-footer{display: flex;align-items: center;height: var(--footer-height);}
.site-footer .footer-logo{display: inline-block;margin-right: 240px;}
.site-footer .footer-content{display: inline-block;}
.site-footer .footer-content address{font-family: Pretendard,sans-serif;display: inline-block;font-size: 16px;letter-spacing: -0.025em;color:#424242;line-height: 1.75;}
.site-footer .footer-content address a{font-family: Pretendard,sans-serif;color:inherit;}
.site-footer .footer-content address .company-name{font-weight: 800;}
.site-footer .footer-content .copyright{font-family: Pretendard,sans-serif;font-size: 14px;letter-spacing: -0.025em;color:#424242;line-height: 2.35;font-weight: 600;}

body .site-header.fix{box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}
body.sub .site-header{box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}
body.sub .site-footer{box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}

.full-content{height: calc(100% - var(--footer-height));}
.hide-label{display: none;}


/*form style*/
.form-box{}
.form-box .row-group{display: flex;flex-direction: column;row-gap: 23px;padding:42px 0;}
.form-box .row-group:nth-of-type( n + 2){border-top:1px solid #ebebeb;}
.form-box .row-box{display: flex;}
.form-box.center .row-box{justify-content: center;}
.form-box .row-box .form-label {width: 155px;color:#212121;letter-spacing: -0.025em;font-size: 18px;font-weight: 700;padding-top: 14px;position: relative;padding-left: 18px;line-height: 1.38;}
.form-box .row-box .form-label .info-text{font-size: 12px;letter-spacing: -0.025em;display: block;font-weight: 400;margin-top: 10px;}
.form-box .row-box.required .form-label{padding: 14px 10px 0 17px;}
.form-box .row-box.required .form-label::before {content:'*';font-size: 25px;font-weight: 800;letter-spacing: -0.025em;color:var(--primary-color);position: absolute;left: 0;top:13px;}
.form-box .input-box{width: 460px;min-height:var(--input-height);}
.form-box .input-box :is(input[type='text'],input[type='password'],input[type='datetime-local']){width: 100%;height: var(--input-height);border: 0;background-color:var(--input-bg);border-radius: 10px;padding:0 26px;color:var(--input-color);font-family: Pretendard,sans-serif;font-size: 17px;font-weight: 500;letter-spacing: -0.025em;}
.form-box .input-box.date{justify-content: space-between;display: flex;align-items: center;font-size: 25px;color:#a8a8a8;}
.form-box .input-box.date :is(input[type='text'],input[type='password'],input[type='datetime-local']){width: calc((100% - 50px) / 2)}
.form-box .input-box textarea{width: 100%;height: 180px;border: 0;background-color:var(--input-bg);border-radius: 10px;padding:20px;color:var(--input-color);font-family: Pretendard,sans-serif;font-size: 17px;font-weight: 500;letter-spacing: -0.025em;resize: none;}
.form-box .input-box.textarea-input{position: relative}
.form-box .input-box.textarea-input .count{position: absolute;right: 20px;bottom: 20px;font-size: 17px;letter-spacing: -0.025em;font-weight: 500;color:#c8c8c8;}
.form-box .input-box.radio-input{display: flex;column-gap: 25px;}
.form-box .input-box.button-input{display: flex;column-gap: 10px;}
.form-box .input-box.button-input .button{height: 100%;}
.form-box .input-box.full {width: 100%;}
.form-box .input-box :is(input[type='radio'],input[type='checkbox']){display: none;}
.form-box .input-box :is(input[type='radio'],input[type='checkbox']) + label{font-size: 17px;font-weight: 500;letter-spacing: -0.025em;color:var(--input-color);display: flex;align-items: center;cursor: pointer;}
.form-box .input-box :is(input[type='radio'],input[type='checkbox']) + label::before{content:'';background-image: url("../images/input-radio_off.png");background-size:cover;width: 18px;height: 18px;display: inline-block;margin-right: 9px;}
.form-box .input-box :is(input[type='radio'],input[type='checkbox']):checked + label::before{background-image: url("../images/input-radio_on.png");}
.form-box .input-box :is(input[type='file']){display: none;}
.form-box .input-box :is(input[type='file']) + label{background-color: #f5f5f5;width: 100%;height: 126px;display: flex;justify-content: center;;align-items: center;border-radius: 10px;cursor: pointer;}
.form-box .input-box :is(input[type='file']) + label span{font-weight: 500;font-size: 15px;letter-spacing: -0.025em;color:#9d9d9d;display: flex;flex-direction:column;justify-content: center;align-items: center;row-gap: 12px;}
.form-box .input-box :is(input[type='file']) + label span::before{content:"";background-image: url("../images/icon-file-plus.png");width: 31px;height: 32px;display: block;}
.form-box .file-input{display: flex;flex-direction: column;row-gap: 17px;}
.form-box .file-list{padding: 8px 0;display: flex;flex-direction: column;row-gap: 5px}
.form-box .input-box .file-name{font-size: 13px;font-weight: 500;letter-spacing: -0.025em;color:var(--primary-color);display: flex;align-items: center;}
.form-box .input-box .file-name .del-button{background-image: url("../images/icon-file-del.png");width: 13px;height: 14px;margin-left: 5px;}
.form-box .button-box{display: flex;justify-content: center}

/*table style*/

.table-box {width: 100%;border:1px solid #e1e1e1;overflow: hidden;border-radius: 10px;margin-top: 20px;}
.table-box table{width: 100%;  border-collapse : collapse;font-family: Pretendard,sans-serif;}
.table-box table th{height: 50px;background-color: #006e9d;font-weight: 700;font-size: 17px;letter-spacing: -0.025em;color:var(--white-color);vertical-align: middle;}
.table-box table td{font-weight: 500;font-size: 15px;letter-spacing: -0.025em;color:#2b2b2b;line-height: 1.4;text-align: center;background-color: #f6f6f6;vertical-align: middle;}
.table-box table :is(th,td){border-bottom:1px solid rgba(183,183,183,0.5);padding: 10px}
.table-box table :is(th,td).left {text-align: left;}
.table-box table .button{font-size: 13px;width: 67px;height: 27px;border-radius: 10px;transition-property: box-shadow,transform,background-color;}
.table-box table .button.gary{width:45px;background-color: #c0c0c0;}
.table-box table .button:hover{background-color: #00c40e;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);transform: translateY(-2px);}/*hover event*/
.table-box table .state::before{content:"";font-size: 15px;}
.table-box table .state.running::before{content:"진행중";color: #00c40e;font-weight: 700;}
.table-box table .state.end::before{content:"종료";}

.form-box .input-box.date.full-input {flex-wrap: wrap;row-gap: 5px;}
.form-box .input-box.date.full-input :is(input[type='text'],input[type='password'],input[type='datetime-local']):nth-of-type(1){width: 100%}
.form-box .input-box.date.full-input :is(input[type='text'],input[type='password'],input[type='datetime-local']):nth-of-type(2){width: calc(100% - 30px);}

/*filter-box*/
.filter-box{display: flex;flex-direction: column;align-items: flex-end;row-gap: 12px;font-family: Pretendard,sans-serif;}
.filter-box .info-text{font-size: 11px;color:#808080;letter-spacing: -0.025em;}
.filter-box .bar{display: flex;width: 9px;justify-content: center;z-index: 3}
.filter-box .date-box{display: flex;align-items:center;column-gap: 8px;position: relative;z-index: 2}
.filter-box .date-box .input-box{z-index: 3}
.filter-box .date-box .button{z-index: 3}
.filter-box .date-box .calendar{position: absolute;background-color: var(--white-color);width: 597px;right: -17px;top:-17px;border-radius: 10px;border:1px solid #e1e1e1;padding:20px 27px;opacity: 0;transition-duration: 0.3s;pointer-events: none;transition-property: opacity;}
.filter-box .date-box .calendar .calendar-board{margin-top: 10px;gap: 30px}
.filter-box .date-box .calendar .calendar-header{display: flex;justify-content: center;align-items: center;height: 60px;position: relative;}
.filter-box .date-box .calendar .calendar-header .month{font-weight: 700;font-size: 16px;letter-spacing: -0.025em;color:#212121;}
.filter-box .date-box .calendar .calendar-header .prev-month{background-image: url("../images/icon-prev.png");width: 8px;height: 14px;position: absolute;left: 0;}
.filter-box .date-box .calendar .calendar-header .next-month{background-image: url("../images/icon-next.png");width: 8px;height: 14px;position: absolute;right: 0;}
.filter-box .date-box .calendar .button {width: 60px;height: 30px;font-size: 12px;border-radius: 10px;background-color: #b3b3b3;}
.filter-box .date-box .calendar .button.active{background-color: var(--primary-color);}
.filter-box .date-box .calendar .calendar-board{display: flex;}
.filter-box .date-box .calendar .calendar-list{display: flex;flex-wrap: wrap;row-gap: 6px;}
.filter-box .date-box .calendar .calendar-list .day{width: calc(100% / 7);font-weight: 300;font-size: 14px;color:#5d5d5d;text-align: center;line-height:25px;cursor: pointer;}
.filter-box .date-box .calendar .calendar-list .day.on{background-color: #e8f6fc;}
.filter-box .date-box .calendar .calendar-list .day.no{color:#bfbfbf;cursor: default;}
.filter-box .date-box .calendar .calendar-list .day:nth-of-type(7n){border-radius:  0 12px 12px 0;}
.filter-box .date-box .calendar .calendar-list .day:nth-of-type(7n + 1){border-radius: 12px 0 0 12px;}
.filter-box .date-box .calendar .calendar-list .day.start{border-radius: 12px 0 0 12px;font-weight: 700;color:var(--primary-color);}
.filter-box .date-box .calendar .calendar-list .day.end{border-radius:  0 12px 12px 0;font-weight: 700;color:var(--primary-color);}
.filter-box .date-box.active .calendar {opacity: 1;pointer-events: auto;}
.filter-box .search-box{display: flex;align-items:center;column-gap: 8px;}
.filter-box :is(input,select){width: 150px;height: 38px;background-color: #f5f5f5;border:1px solid #e1e1e1;border-radius: 10px;padding:0 15px;font-size: 15px;font-weight: 500;letter-spacing: -0.01em;color:#777778;}
.filter-box .long :is(input,select){width: 325px;}
.filter-box .button{width: 75px;height: 38px;font-size: 15px;border-radius: 10px;}

/*페이징*/
.pagination-box .pagination-list{display: flex;justify-content: center;column-gap: 8px;padding:50px;margin-top: 10px;}
.pagination-box .pagination-list .pagination-item{width: 25px;height: 25px}
.pagination-box .pagination-list .pagination-item a{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-family: Pretendard,sans-serif;color:#2b2b2b;font-size: 23px;font-weight: 400;}
.pagination-box .pagination-list .pagination-item.active a{color:var(--primary-color);font-weight: 800;}
.pagination-box .pagination-list .pagination-item.prev{}
.pagination-box .pagination-list .pagination-item.prev > a::after{content:'';position: absolute;display: block;background-image: url("../images/pagination-prev.png");background-size: cover;width: 10px;height: 17px;transition-duration: 0.3s;transition-property: background-image;}
.pagination-box .pagination-list .pagination-item.prev:hover > a::after{background-image: url("../images/pagination-prev_on.png");}
.pagination-box .pagination-list .pagination-item.next{}
.pagination-box .pagination-list .pagination-item.next > a::after{content:'';position: absolute;display: block;background-image: url("../images/pagination-next.png");background-size: cover;width: 10px;height: 17px;transition-duration: 0.3s;transition-property: background-image;}
.pagination-box .pagination-list .pagination-item.next:hover > a::after{background-image: url("../images/pagination-next_on.png");}


.pagination-box .pagination-list .pagination-item.start{}
.pagination-box .pagination-list .pagination-item.start > a::after{content:'';position: absolute;display: block;background-image: url("../images/pagination-start.png");background-size: cover;width: 19px;height: 17px;transition-duration: 0.3s;transition-property: background-image;}
.pagination-box .pagination-list .pagination-item.start:hover > a::after{background-image: url("../images/pagination-start_on.png");}
.pagination-box .pagination-list .pagination-item.end > a::after{content:'';position: absolute;display: block;background-image: url("../images/pagination-end.png");background-size: cover;width: 19px;height: 17px;transition-duration: 0.3s;transition-property: background-image;}
.pagination-box .pagination-list .pagination-item.end:hover > a::after{background-image: url("../images/pagination-end_on.png");}


/*select custom*/
.select-box{position: relative;height: 44px;}
.select-box .label{height: 44px;font-size: 15px;font-weight: 500;color: #a8a8a8;letter-spacing: -0.025em;min-width: 120px;text-align: left;border-radius: 10px;overflow: hidden;background-color: #f5f5f5;border:2px solid transparent;padding:0 46px 0 17px;cursor: pointer;position: relative;z-index: 1;width: 100%;}
.select-box .label::after{content:'▼';display: inline-block;position: absolute;right: 0;top:50%;transform: translate(-17px,-50%);}
.select-box .optionList{transform: translateY(-44px);position: relative;top:0;left: 0;width: 100%;padding-top: 44px;border-radius: 10px;overflow: hidden;border:1px solid #e1e1e1;opacity: 0;transition-duration:0.3s;transition-property: opacity;}
.select-box .optionList .optionItem{height: 44px;display: flex;align-items: center;padding:0 17px;font-size: 15px;font-weight: 600;color: #777778;letter-spacing: -0.025em;background-color: var(--white-color);cursor: pointer;transition-duration: 0.3s;transition-property: background-color;}
.select-box .optionList .optionItem:hover{background-color: #e3f7ff;}
.select-box.active .optionList{opacity: 1;}
.select-box.active .label{border:2px solid var(--primary-color)}
.select-box.active .label::after{color:var(--primary-color);}

/*layer  팝업 스타일*/
.layer-box{width: 100%;height: 100%;background-color: rgba(0,0,0,.3);position: fixed;left: 0;top:0;display: flex;justify-content: center;align-items: center;padding:0 20px;opacity: 0;transition-duration: 0.3s;transition-property: opacity;pointer-events: none;}
.layer-box .layer-wrapper{width: 100%;max-width: 500px;background-color: #ffffff;border-radius: 20px;padding:20px;}
.layer-box .layer-wrapper .layer-header{text-align: right;}
.layer-box .layer-wrapper .layer-content{text-align: center;}
.layer-box .layer-wrapper .layer-content .auto-scroll{overflow-y: auto;max-height: 500px;padding:30px 0;-ms-overflow-style: none;scrollbar-width: none;}
.layer-box .layer-wrapper .layer-content .auto-scroll::-webkit-scrollbar {display: none;}
.layer-box .layer-wrapper .layer-content h1{font-family: Pretendard,sans-serif;font-size: 26px;font-weight: 500;}
.layer-box .layer-wrapper .layer-content p{font-family: Pretendard,sans-serif;font-size: 15px;font-weight: 400;color:#535353;letter-spacing: -0.05em}
.layer-box .layer-wrapper .layer-content p strong{color:#2e2e2f;font-size: 16px;font-weight: 500;}
.layer-box .layer-wrapper .layer-content p em{color:#2e2e2f;font-size: 17px;font-weight: 600;margin-bottom: 0.5em;display: inline-block;}

body:is(.agree001layer,.agree002layer){height: 100%;overflow: hidden;}
body.agree001layer .layer-box#agree001layer{opacity: 1;pointer-events: auto;}
body.agree002layer .layer-box#agree002layer{opacity: 1;pointer-events: auto;}