@charset "UTF-8";

/* -------------- Reset Css -------------- */
/* 기본 Reset */
*{margin:0; padding:0; box-sizing:border-box; word-break: keep-all;}

/* 폰트 초기화 */
html{font-size:16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;}

/* 기본 스타일 제거 */
body{line-height:1.2; font-family: "Noto Sans KR", sans-serif; font-size: 16px; text-rendering:optimizeLegibility; color:var(--black-basic); letter-spacing: -0.02em; max-width: 530px; margin:0 auto; background-color: #fff; position: relative;}


/* 리스트 스타일 제거 */
ul,ol,li,dl{list-style:none;}

/* 링크 스타일 초기화 */
a{text-decoration:none; color:inherit; cursor: pointer;}
a:focus,a:active{text-decoration:none; outline:none;}

/* 버튼 초기화 */
button{background:none; border:none; cursor:pointer;}

/* 테이블 스타일 초기화 */
table{border-collapse:collapse; border-spacing:0;}

/* 이미지 초기화 */
img{max-width:100%; height:auto; vertical-align:middle;}

/* 폼 요소 초기화 */
input,textarea,select,button{font:inherit; color:inherit; border:none; outline:none;}
input:valid {color: var(--black-dark);}
.input_tit {color: var(--black-light); display: block; padding-bottom: 0.75em;}

/* 스크롤바 숨기기 */
::-webkit-scrollbar{width:0px; height:0px;}

/* 텍스트 관련 초기화 */
p{padding: unset; margin: unset;}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:normal; padding: unset; margin: unset;}
.h1,
h1{font-size:2em;}
.h2,
h2{font-size:1.75em;}
.h3,
h3{font-size:1.5em;}
.h4,
h4{font-size:1.25em;}
.h5,
h5{font-size:1em;}
.h6,
h6{font-size:0.875em;}

dd {font-size: 1.25em;}
b,strong{font-weight:bold;}
i,em{font-style:italic;}

.wrap {overflow: hidden;}

.em_y {font-size: 1.25em; color: var(--color-yellow); font-weight: 600; letter-spacing: 0.025em; font-family: var(--font-number);}
.em_m {font-size: 1.25em; color: var(--color-main); font-weight: 600; letter-spacing: 0.025em; font-family: var(--font-number);}

code,pre{font-family:'Courier New',monospace; font-size:1em;}
pre{white-space:pre-wrap; word-wrap:break-word;}
blockquote{margin:0; padding:0; font-style:italic; border-left:4px solid #ccc; padding-left:1em; color:#555;}


.font_gray {color: var(--black-mid);}

.flex {display: flex; gap: 0.5em;}

.checkbox_area,
.radio_area {display: flex; gap: 0.5em;}
.checkbox_area label,
.radio_area label {display: flex; gap: 0.5em;}

/* 빈 데이터 메시지 스타일 */
.no-data {
    text-align: center;
    color: var(--black-light);
    padding: 3em 1em;
    font-size: 1em;
    letter-spacing: -0.02em;
}


.notice {font-size: 0.875em; color: var(--black-light);}
.notice > span {display: inline-block; padding-top: 0.5em; padding-right: 0.5em; vertical-align: middle;}
.notice > p {display: inline-block; vertical-align: middle; word-break: keep-all;}

.rd_notice {font-size: 0.875em; color: var(--black-light); display: flex; gap: 0.25em;}
.rd_notice > span {display: inline-block; vertical-align: middle;}
.rd_notice > p {display: inline-block; vertical-align: middle; word-break: keep-all;}

.label_sub {color: var(--black-mid);}

@media screen and (max-width: 768px) {
    body {font-size: 14px; max-width: 738px;}
}

/* -------------- Reset Css -------------- */


/* -------------- Root Css -------------- */

:root {
    
    --color-main: #4e51bf;
    --color-sub: #fe546f;
    --color-green: #6bbd8c;
    --color-mint: #66cfc1;
    --color-pink: #f780b4;
    --color-blue: #22bdff;
    --color-blue2: #97c9f0;
    --color-yellow: #f3ee78;

    --black-basic: #333;
    --black-dark: #000;
    --black-mid: #808080;
    --black-light: #aaa;

    --color-border: #e9e9e9;
    --color-bgg1: #f4f4f4;
    --color-bgg2: #c4c4c4;

    --font-point : 'RixInooAriDuri';
    --font-number : 'GmarketSans';

    --br-big : 1.5em;
    --br-mid : 1em;
    --br-sm : 0.75em;

    --pd-cnt : 0 50px;
    --pd-lr : 50px;
}


@media screen and (max-width: 768px){

    :root {
        --pd-cnt : 0 7vw;
        --pd-lr : 7vw;
    }


}



/* -------------- Root Css -------------- */


/* -------------- Font Css -------------- */
@font-face {
    font-family: 'GmarketSans';
    src: url('../font/GmarketSansLight.woff2') format('woff2'), url('../font/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('../font/GmarketSansBold.woff2') format('woff2'), url('../font/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('../font/GmarketSansMedium.woff2') format('woff2'), url('../font/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RixInooAriDuri';
    src: url('../font/RixInooAriDuriPR.woff2') format('woff2'), url('../font/RixInooAriDuriPR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* -------------- Font Css -------------- */


/* -------------- Layout Css -------------- */
html {background-color: #f9f9f9;}

.main .wrap {padding-bottom: 7.5em;}
.sub .wrap {padding-bottom: 5em;}

.cnt {padding: var(--pd-cnt);}

.grid {display: grid;}

.dpn {display: none!important;}


/* box */
.box {padding: 1.5em; display: flex; border-radius: var(--br-big);}
.b_box {border: 1px solid var(--color-border); border-radius: 1em; font-size: 0.75em; padding: 0.25em 0.5em;}
.box_num {font-size: 0.875em; width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%;}


.bg_main {background-color: var(--color-main);}
.bg_bl {background-color: var(--color-blue2);}
.bg_gr {background-color: var(--color-bgg1);}
.bg_gn {background-color: var(--color-green);}
.bg_pk {background-color: var(--color-pink);}
.bg_mt {background-color: var(--color-mint);}
.bg_yl {background-color: var(--color-yellow);}

/* font */
.font_sm {font-size: 0.875em;}

.date, .time {letter-spacing: 0.025em;}

/* tit_area */
.tit_area {display: flex; gap: 1em; justify-content: space-between; align-items: center;}
.tit_area h4 {font-weight: 600; white-space: nowrap; flex-shrink: 0;}
.tit_area h4 span {font-weight: initial;}
.tit_area a {display: flex; flex-direction: row; gap: 0.25em; align-items: center;}

/* text_area */
.text_area {}

/* button */
.btn_area {display: flex; gap: 0.5em; flex-direction: row;}
.btn {display: flex; padding: 0.5em 0.75em; border-radius: var(--br-mid); text-align: center;}
.btn:focus {box-shadow: unset;}
.modal-footer>* {flex:1; text-align: center; justify-content: center;}

.del {display: flex; font-size: 0.75em;}
.btn.wh {background-color: #fff; color: var(--black-basic);}
.btn.btn_submit {background-color: var(--color-main); color: #fff;}

.excel_area {display: flex; align-items: center; gap: 0.5em;}
.excel_area .btn {display: flex; gap: 0.25em; align-items: center; font-size: 0.875em;}
.excel_area .btn .icon {width: 1.25em; height: 1.25em;}
.excel_area .rd_notice {width: calc(100% - 0.5em - 127px);}


/* input 캘린더 */
.em_calender {position: relative; display: flex; gap: 0.5em; flex: 1 1 0; min-width: 0;}

.custom-date {border-radius: var(--br-sm); border: 1px solid var(--color-border); padding: 0.5em; flex-grow: 1; min-width: 0; font-size: 0.875em;box-sizing: border-box;}
.custom-date::placeholder {color: var(--black-light);}

.custom-date::-webkit-calendar-picker-indicator {opacity: 0; pointer-events: none; display: none;}
.calendar-icon {width: fit-content; background-color: var(--color-main);}

.em_cal_area {display: flex; gap: 0.5em; align-items: center; color: var(--black-light);}


/* -------------- Layout Css -------------- */
.icon {width: 1em; height: 1em; display: block; white-space: nowrap; flex-shrink: 0;}

/* main_icon */
.ip_cal {background: url(../img/ip_cal.svg) no-repeat 50% 50%; background-size: contain;}
.i_del {background: url(../img/close_btn_cm.svg) no-repeat 50% 50%; background-size: contain; cursor: pointer;}
.arrow_r_wh {background: url(../img/arrow_r_wh.svg) no-repeat 50% 50%; background-size: 95% auto;}
.arrow_r_bk {background: url(../img/arrow_r_bk.svg) no-repeat 50% 50%; background-size: 95% auto;}
.set_gr {background: url(../img/setting_gr.svg) no-repeat 50% 50%; background-size: 90% auto;}
.set_bk {background: url(../img/setting_bk.svg) no-repeat 50% 50%; background-size: 90% auto;}
.set_wh {background: url(../img/setting_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.list_wh {background: url(../img/list_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.wt_wh {background: url(../img/wallet_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.wt_bk {background: url(../img/wallet_bk.svg) no-repeat 50% 50%; background-size: 90% auto;}
.ms_wh {background: url(../img/message_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.ms_s_bk {background: url(../img/message_s_bk.svg) no-repeat 50% 50%; background-size: 90% auto;}
.doc_bk {background: url(../img/document_bk.svg) no-repeat 50% 50%; background-size: 90% auto;}
.doc_wh {background: url(../img/document_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.em_wh {background: url(../img/em_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.pen_wh {background: url(../img/pencil_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.add_mb {background: url(../img/add_member.svg) no-repeat 50% 50%; background-size: 90% auto;}
.icon_excel {background: url(../img/excel.svg) no-repeat 50% 50%; background-size: contain;}
.icon_excel_bk {background: url(../img/excel_bk.svg) no-repeat 50% 50%; background-size: contain;}
.i_photo {background: url(../img/i_photo_gr.svg) no-repeat 50% 50%; background-size: contain;}
.file {background: url(../img/file.svg) no-repeat 50% 50%; background-size: contain;}
.file_gr {background: url(../img/file_gr.svg) no-repeat 50% 50%; background-size: contain;}
.send {background: url(../img/send.svg) no-repeat 50% 50%; background-size: contain;}
.icon_notice {background: url(../img/rd_notice.svg) no-repeat 50% 50%; background-size: contain; margin-top: 2px;}
.rd_arrow {background: url(../img/rd_arrow.svg) no-repeat 50% 50%; background-size: contain;}
.mem_src {background: url(../img/mem_src_wh.svg) no-repeat 50% 50%; background-size:  90% auto;}
.i_check {background: url(../img/check.svg) no-repeat 50% 50%; background-size:  100% auto;}
.i_check_gr {background: url(../img/check_gr.svg) no-repeat 50% 50%; background-size:  100% auto;}
.shop_wh {background: url(../img/shop_wh.svg) no-repeat 50% 50%; background-size: 100% auto;}
.icon_pay {background: url(../img/icon_pay_wh.svg) no-repeat 50% 50%; background-size: 95% auto;}


.input_show {background:url(../img/show_gr.svg) no-repeat 50% 50%; background-size: contain; width: 1.5em; height: 1.5em; cursor: pointer;  margin-right: 0.5em;}
.input_show.active {background:url(../img/show_cm.svg) no-repeat 50% 50%; background-size: contain;}

/* btn_float_icon */
.icon_cate {background: url(../img/cate_wh.svg) no-repeat 50% 50%; background-size: 100% auto;}
.icon_alarm {background: url(../img/alarm_wh.svg) no-repeat 50% 50%; background-size: 110% auto;}
.icon_home {background: url(../img/home_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.icon_cld {background: url(../img/calender_wh.svg) no-repeat 50% 50%; background-size: 90% auto;}
.icon_mypage {background: url(../img/member_wh.svg) no-repeat 50% 50%; background-size: 75% auto;}

/*.icon_cate.active {background: url(../img/cate_wh_active.svg) no-repeat 50% 50%; background-size: 100% auto;} */
.icon_alarm.active {background: url(../img/alarm_wh_active.svg) no-repeat 50% 50%; background-size: 110% auto;}
.icon_home.active {background: url(../img/home_wh_active.svg) no-repeat 50% 50%; background-size: 90% auto;}
.icon_cld.active {background: url(../img/calender_wh_active.svg) no-repeat 50% 50%; background-size: 90% auto;}
.icon_mypage.active {background: url(../img/member_wh_active.svg) no-repeat 50% 50%; background-size: 75% auto;}

.icon_mypage.bk {background: url(../img/member_bk.svg) no-repeat 50% 50%; background-size: 75% auto;}

/* -------------- header -------------- */
/* header */
header {display: block; position: relative; padding: 1.5em 0; background-color: var(--color-main);}
header .cnt {display: flex; gap: 1em; justify-content: space-between; align-items: center;}
header .cnt h2 {color: #fff; font-family: var(--font-point); letter-spacing: 0.02em; line-height: 1; font-weight: 400; margin-bottom: -0.5em;}
header::after {content: ''; display: block; position: absolute; width: 100%; height: 4em; background-color: var(--color-main); border-radius: 0 0 4em; bottom: -88%;}

header .hd_icon {display: flex; gap: 0.5em; align-items: center;}
header .hd_icon .icon {width: 1.5em; height: 1.5em;}

.sub header::after {border-radius: 0 0 0;}

@media screen and (max-width: 768px){


}

/* -------------- footer -------------- */
footer {display: block; padding: var(--pd-cnt); padding-bottom: 5em;}

/* btn_float */
.btn_float {display: flex; padding: 1em 3em; border-radius: var(--br-big); background-color: var(--color-main); position: fixed; bottom: 1.5em; margin: 0 var(--pd-lr); width: calc(100% - (var(--pd-lr) * 2)); max-width: calc(530px - (var(--pd-lr) * 2)); z-index: 100; cursor: pointer; justify-content: space-between; gap: 1em;}
.btn_float a {display: block; width: 2em; height: 2em;}

@media screen and (max-width: 768px){
    .btn_float {max-width: calc(768px - (var(--pd-lr) * 2));gap: 8vw;  padding: 1em; justify-content: center;}
    .btn_float a {display: block; width: 7vw; height: 7vw;}
}



/* -------------- Main Css -------------- */

/* main */
section {display: flex; flex-direction: column; padding: var(--pd-cnt); gap: 0.875em; }


/* main */
main {display: flex; flex-direction: column; gap: 3em; position: relative;}

/* main_attendance */
.main_attendance,
.sub_head {display: flex; border-radius: 4em 4em 4em 0; background-color: var(--color-bgg1); padding: var(--pd-lr) var(--pd-lr); width: calc(100% - var(--pd-lr)); gap: 2em; position:  relative;}
.main_attendance::after,
.sub_head::after {content: ''; display: block; position: absolute; bottom: -4em; left: 0;  width: 4em; height: 4em; background-color: var(--color-bgg1);}

/* 직원 추가 */
.main_attendance .contents.add_mb_area {display: flex; flex-direction: row; gap: 0.5em; align-items: center;}
.main_attendance .contents.add_mb_area .img_area {width: 35%; max-width: 80px;}
.main_attendance .contents.add_mb_area .text_area {display: flex; gap: 1em; flex-direction: column;}
.main_attendance .contents.add_mb_area .text_area p {font-size: 0.875em;}
.main_attendance .contents.add_mb_area .btn_area .btn-secondary {border-color: #fff;}

/* 직원 리스트 */
.main_attendance .contents {display: flex; gap: 0.5em; flex-direction: column;}
.main_attendance .contents .box {background-color: #fff; display: flex; gap: 0.1em; justify-content: space-between; padding: 1em;}
.main_attendance .contents .box a {display: flex; align-items: center; gap: 0.25em;}
.main_attendance .contents .box .b_box.at_work {background-color: var(--color-sub); color: #fff; border-color: var(--color-sub);}
.main_attendance .contents .box p {display: flex; gap: 0.25em; align-items: center;}



.main_attendance .btn {justify-content: center; padding: 1em 1em;    border-radius: var(--br-big);}

/* main_employee */
.main_employee {border-radius: 4em 0 0 0; background-color: #fff; padding: var(--pd-lr) var(--pd-lr) 0; margin-top: -3em; position: relative;}
.main_employee #swiper_me {overflow: visible;}
.main_employee #swiper_me .swiper-wrapper {align-items: stretch;}
.main_employee #swiper_me .box {border: 4px solid var(--color-bgg1); flex-direction: column; gap: 1em; position: relative; flex: 1 1 auto; width: fit-content; min-width: max-content; height: auto;}
.main_employee #swiper_me .box .icon.set_wh {position: absolute; right: 0.75em; top: 0.75em;}

.main_employee #swiper_me .box > * {color: #fff;}
.main_employee #swiper_me .box:nth-child(odd) {background-color: var(--color-main); border-color: var(--color-main);}
.main_employee #swiper_me .box:nth-child(even) {background-color: var(--color-green); border-color: var(--color-green);}
.main_employee #swiper_me .box .pt_info {display: flex; flex-direction: row; gap: 0.25em; align-items: flex-end;}
.main_employee #swiper_me .box .employment_status {font-size: 2em; font-weight: 600;}
.main_employee #swiper_me .box .btn_wrap {display: flex; gap: 0.25em;}
.main_employee #swiper_me .box .btn_wrap a {font-size: 0.875em; display: flex; align-items: center; gap: 0.25em;}
.main_employee #swiper_me .box .btn_wrap a::before {content: ''; width: 1px; height: 80%; display: block; background-color: #fff;}
.main_employee #swiper_me .box .btn_wrap a:first-child:before {display: none;}

/* 직원 추가 버튼 */
.main_employee #swiper_me .box.btn_add_mb a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column; gap: 1em;}
.main_employee #swiper_me .box.btn_add_mb a .icon {width: 40%; height: 40%; background-size: contain;}
.main_employee #swiper_me .box.btn_add_mb a p {font-size: 1.125em; color: var(--black-basic);}
.main_employee #swiper_me .box.btn_add_mb a p span {font-weight: 600;}


/* main_payroll */
main .main_payroll .contents.grid {grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; gap: 0.75em;}
main .main_payroll .contents.grid .box {position: relative; padding: 2em 1em;}
main .main_payroll .contents.grid .icon {width: 1.5rem; height: 1.5rem; position: absolute; right: 0.75em; top: 0.75em}
main .main_payroll .contents.grid .box div.text_area {font-weight: 600; display: flex; gap: 0.25em; align-items: center; color:#fff; font-size: 1.125em; width: calc(100% - 1.5em); flex-wrap: wrap;}
main .main_payroll .contents.grid .box.bg_yl div {color: var(--black-basic);}
main .main_payroll .contents.grid .box div span {font-weight: initial;}
main .main_payroll .contents.grid .box.bg_pk div span.box_num {color: var(--color-pink);}

/* main_notice */
main .main_notice .contents {gap: 1em; display: flex; flex-direction: column;}
main .main_notice .contents .box {background-color: var(--color-bgg1); display: flex; gap: 1em; justify-content: space-between; font-size: 0.875em;}


@media screen and (max-width: 768px){



}



/* -------------- category Css -------------- */

.category {background-color: var(--color-main);}
.category > * {color:#fff;}
.category .wrap {padding: 2em var(--pd-lr); position: relative; min-height: 100dvh; gap: 1em; justify-content: space-between; display: flex; flex-direction: column;}
.category .wrap .cate_top {display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5em;}
.category .wrap .cate_top .btn-close {background: transparent url('../img/close_btn_wh.svg') no-repeat 50% 50%; background-size: contain; width: 1em; height: 1em; display: block; top: 1em; right: 1em; cursor: pointer;}

.category .contents {display: flex; gap: 2em; flex-direction: column; flex-grow: 1;}

.category .info_area {display: flex; gap: 0.3em; flex-direction: column;}
.category .info_area p {font-size: 0.875em;}
.category .info_area p strong {font-size: 1.25em;}

.category .category_area {display: flex; flex-grow: 1; overflow-y: auto; flex-direction: column;}
.category .category_area ul {display: flex; gap: 1.5em; flex-direction: column;}
.category .category_area ul li a {display: flex; gap: 0.75em; align-items: center;}
.category .category_area ul li a .icon {width: 1.5em; height: 1.5em;}
.category .category_area ul li a p {font-size: 1.25em; line-height: 1;}

.category .cate_footer {display: flex; align-items: flex-end; justify-content: space-between; gap: 1em;}

.category .cate_footer .ft_info {flex-grow: 1; display: flex; flex-direction: column; gap: 1em;}
.category .cate_footer .ft_info .logo_area {width: 30%;}
.category .cate_footer .ft_info .cate_info {display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.25em 0.5em;}
.category .cate_footer .ft_info .cate_info p {font-size: 0.875em;}

.category .cate_footer .img_area {width: 400px;}
.category .cate_footer .img_area img {width: 100%; height: auto;}

/* -------------- sub common Css -------------- */
body .wrap .sub_contents {border-radius: 4em 0 0 0; background-color: #fff; padding: var(--pd-lr) var(--pd-lr); position: relative; margin-top: -3em; gap: 1.5em;}
.sub_contents .tit_area {gap: 0.5em; justify-content: flex-start; align-items: flex-start;}
.sub_contents .tit_area .icon {width: 1.5em; height: 1.5em;}
.sub_contents .tit_area p {line-height: 1; padding-top: 3px;}

.state span {font-size: 0.75em; padding: 0.25em 1em; border-radius: 1.5em; color:#fff;}
.state span.work, 
.state span.check {background-color: var(--color-main);}
.state span.leave {background-color: var(--color-green);}
.state span.quit,
.state span.confirmed {background-color: var(--color-bgg2);}

/* -------------- attendance / 출퇴근 관리 Css -------------- */
.sub .wrap .sub_head {width: 100%; border-radius: 4em 0 0 0;}
.sub .wrap .sub_head {padding-bottom: var(--pd-lr);}


.attendance .wrap .sub_contents {gap: 3em; margin-top: 0;}
.attendance .wrap .sub_contents .scan_qr {display: flex; gap: 1em; flex-direction: column;}


/* 250908 수정 */
.attendance .wrap .sub_contents .scan_qr .qr_area {display: flex; padding: 1.5em; border-radius: 1em; background-color: var(--color-bgg1); gap: 2em; justify-content: center; background: #f4f4f4; align-items: center; overflow: hidden;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div.img_area {margin-bottom: -2em;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div.img_area {width: 100%; max-width: 12em;}
.attendance .wrap .sub_contents .scan_qr .qr_area > .text_area {display: flex; flex-direction: column; gap: 0.5em; width: fit-content;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div button {font-size: 0.75em; justify-content: center; padding: 0.5em 0.75em; width: fit-content; font-weight: 700;}

.attendance .wrap .sub_contents .employee_con {display: flex; flex-direction: column; gap: 1em;}
/* 250908 수정 */ 



/* 
.attendance .wrap .sub_contents .scan_qr .qr_area {display: flex; padding: 1em; border-radius: 1em; background-color: var(--color-bgg1); gap: 1em;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div {flex: 1; display: flex; gap: 1em; align-items: flex-end;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div .img_area {flex: 1;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div .text_area {display: flex; flex-direction: column; gap: 0.5em;}


.attendance .wrap .sub_contents .employee_con {display: flex; flex-direction: column; gap: 1em;}
.attendance .wrap .sub_contents .scan_qr .qr_area > div button {font-size: 0.875em; justify-content: center; padding: 0.5em 0.75em;}
*/


.sub .wrap .check_em .swiper-slide {width: auto;}


.attendance .wrap .sub_contents .em_at_data {display: flex; gap: 1em; flex-direction: column;}
.attendance .wrap .sub_contents .em_at_data .box {display: flex; flex-direction: column; width: 100%; padding: 0;  border-radius: var(--br-sm);}
.attendance .wrap .sub_contents .em_at_data .box p {font-size: 0.875em;}
.attendance .wrap .sub_contents .em_at_data .box .box_tit {display: flex; gap: 0.5em; justify-content: space-between; padding: 0.75em; border-radius: 0.75em 0.75em 0.75em 0.75em ; border: 1px solid var(--color-border); }
.attendance .wrap .sub_contents .em_at_data .box .box_tit .tit_info {gap: 0.5em; width: 100%; display: grid; grid-template-columns:  repeat(4, 1fr);}
.attendance .wrap .sub_contents .em_at_data .box.active .box_tit {background-color: var(--color-blue); border-radius: 0.75em 0.75em 0 0; border-color: var(--color-blue);}
.attendance .wrap .sub_contents .em_at_data .box.active .box_tit .icon {transform: rotate(-180deg);  transition: all 0.3s;}
.attendance .wrap .sub_contents .em_at_data .box.active .tit_info p {color:#fff;}

.attendance .wrap .sub_contents .em_at_data .box .box_con {padding: 0.75em; gap: 0.25em; flex-wrap: wrap; background-color: var(--color-bgg1); border-radius: 0 0 0.75em 0.75em; display: none; border: 1px solid var(--color-bgg1);}
.attendance .wrap .sub_contents .em_at_data .box.active .box_con {display: flex; }
.attendance .wrap .sub_contents .em_at_data .box .box_con > div {display: flex; gap: 0.125em; width: calc((100% - 0.25em) / 2);}
.attendance .wrap .sub_contents .em_at_data .box .box_con > div p {flex: 1;}
.attendance .wrap .sub_contents .em_at_data .box .box_con > div p.tit {color: var(--black-light);}
.attendance .wrap .sub_contents .em_at_data .box .box_con > div p {flex: 1;}


.attendance.em .wrap .sub_contents .em_at_data .box .box_tit .tit_info {grid-template-columns:  repeat(3, 1fr);}

@media screen and (max-width: 390px) {

    /* 250908 수정 */
    .attendance .wrap .sub_contents .scan_qr .qr_area,
    .attendance .wrap .sub_contents .scan_qr .qr_area > div {gap: 0.5em;}
    .attendance .wrap .sub_contents .scan_qr .qr_area > div .text_area p {font-size: 0.875em;}
    .attendance .wrap .sub_contents .scan_qr .qr_area > div button {font-size: 0.75em; padding: 0.25em 0.5em;}
    /* 250908 수정 */
    
    /*
    .attendance .wrap .sub_contents .scan_qr .qr_area,
    .attendance .wrap .sub_contents .scan_qr .qr_area > div {gap: 0.5em;}
    .attendance .wrap .sub_contents .scan_qr .qr_area > div .text_area p {font-size: 0.875em;}
    .attendance .wrap .sub_contents .scan_qr .qr_area > div button {font-size: 0.75em; padding: 0.25em 0.5em;}
    */
    
.attendance .wrap .sub_contents .em_at_data .box p {font-size: 0.75em;}
}



/* -------------- member Css -------------- */


.sub .main_employee .contents.add_mb_area {display: flex; flex-direction: row; gap: 0.5em; align-items: center;}
.sub .main_employee .contents.add_mb_area .img_area {flex-grow: 1;}
.sub .main_employee .contents.add_mb_area .text_area {display: flex; gap: 1em; flex-direction: column;}
.sub .main_employee .contents.add_mb_area .text_area p {font-size: 0.875em;}

.sub .main_employee {background: var(--color-bgg1); margin-top: 0;}
.sub .main_employee #swiper_me .box.btn_add_mb {border-color: #fff; background-color: #fff;}
.sub .sub_contents .check_em {display: flex; gap: 1em; flex-direction: column;}
.sub .sub_contents .check_em .checkbox_area {justify-content: flex-start; flex-wrap: wrap; word-wrap: break-word; overflow-wrap: break-word;}

.sub .sub_contents .mem_list {display: flex; flex-direction: column; gap: 0.875em;}
.sub .sub_contents .mem_list .box_area {display: flex; flex-direction: column; gap: 1em;}
.sub .sub_contents .mem_list .box_area .box {padding: 1em 1.25em;  border-radius: var(--br-sm); border: 1px solid var(--color-border); display: flex; gap: 0.5em; justify-content: space-between;}
.sub .sub_contents .mem_list .box_area .box .date {color: var(--black-light); font-size: 0.875em;}
.sub .sub_contents .mem_list .box_area .box .info {display: flex; gap: 0.5em; align-items: center; font-size: 0.75em; color: var(--black-mid);}
.sub .sub_contents .mem_list .box_area .box .info .icon {width: 1.25em; height: 1.25em;}

.sub .sub_contents .input-group {background-color: transparent;}
.sub .sub_contents .input-group>.form-control {margin-right: 0.5em; border: 1px solid var(--color-border);  border-radius: var(--br-sm);}
.sub .sub_contents .input-group .btn {padding: 0.45em 0.5em; display: flex; align-items: center;}
.sub .sub_contents .input-group .btn .icon {width: 1.5em; height: 1.5em;}




@media screen and (max-width: 360px) {
    .sub .sub_contents .box_area .box {font-size: 0.875em;}
}






/* */
.alarm .wrap  .sub_head,
.document .wrap  .sub_head {gap: 1.5em;}
.alarm .sub_head .tit_area,
.document .sub_head .tit_area {display: flex; flex-direction: row; gap: 0.5em; justify-content: flex-start; align-items: flex-start;}
.alarm .sub_head .tit_area .rd_notice,
.document .sub_head .tit_area .rd_notice {padding-top: 4px;}
.alarm .sub_head .box,
.document .sub_head .box {background-color: #fff; flex-direction: column; gap: 0.75em; overflow: hidden;}
.alarm .sub_head .box .swiper,
.document .sub_head .box .swiper {width: 100%;}
.alarm .sub_head .box textarea,
.document .sub_head .box textarea {border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); padding: 0.5em; height: 8em; resize: none; width: 100%; box-sizing: border-box;}
.alarm .box .btn_area,
.document .box .btn_area {justify-content: space-between;}


.af_area {display: flex; gap: 0.25em;}
.af_area > div {font-size: 0.75em; display: flex; align-items: center; cursor: pointer; gap: 0.25em; align-items: center;}


.btn_area .btn_l,
.btn_area .btn_r {display: flex; gap: 0.25em;}
.btn_area div button {border-width: 1px; align-items: center; gap: 0.25em;}



.ms_box {display: flex; flex-direction: column; gap: 0.75em; border-radius: var(--br-sm);}
.ms_box .data {display: flex; gap: 0.5em; justify-content: space-between; align-items: center;}
.ms_box .data > p {font-size: 0.75em; color: var(--black-light);}
.ms_box .data > p .name {color: var(--black-basic); white-space: nowrap; flex-shrink: 0; }

.ms_box .ms_con {display: flex; flex-direction: column; gap: 0.75em; padding-top: 0.75em; border-top: 1px solid var(--color-border);}
.ms_box .ms_con p {font-size: 1em; line-height: 1.4;}
.ms_box .box {display: flex; border: 1px solid var(--color-border); flex-direction: column; gap: 0.5em; padding: 0.5em; border-radius: 0.5em;}

.ms_box .box textarea {font-size: 0.875em; height: 4em; resize: none;}
.ms_box .box button {padding: 0.25em 0.5em; align-items: center; gap: 0.25em;}
.ms_box button {font-size: 0.8em;}

.ms_box .ms_com {display: flex; gap: 0.25em; font-size: 0.875em; padding-top: 0.75em; border-top: 1px solid var(--color-border);}
.ms_box .ms_com p.name {width: 6em; display: flex; gap: 0.25em;}
.ms_box .ms_com div.txt {display: block; flex-direction: column; gap: 0.25em; flex-grow: 1; flex-wrap: wrap;}
.ms_box .ms_com div.txt .img_area {padding-top: 1em;}

.ms_box .mem {display: flex; gap: 0.5em; }
.ms_box .mem p {font-size: 0.75em; display: flex; gap: 0.25em;}

.ms_box .img_area {display: flex; gap: 0.5em; flex-wrap: wrap; cursor: pointer;}
.ms_box .img_area > div { border-radius: var(--br-sm); overflow: hidden; width: 30%; padding-bottom: 30%; position: relative; border: 1px solid var(--color-border);}
.ms_box .img_area > div.add_img_01 {background: url('../img/store.jpg') no-repeat 50% 50%; background-size: cover;}
.ms_box .img_area > div.add_img_02 {background: url('../img/store.jpg') no-repeat 50% 50%; background-size: cover;}
.ms_box .img_area > div.add_img_03 {background: url('../img/store.jpg') no-repeat 50% 50%; background-size: cover;}

.ms_box .img_area > div::after {content: ''; width: 0.75em; height: 0.75em; background: url(../img/zoom.svg)no-repeat 50% 50%; background-size: 100%; top: 0.25em; right: 0.25em; display: block; position: absolute;}
.data_area {display: flex; gap: 0.5em; padding-top: 0.75em; border-top: 1px solid var(--color-border);}
.data_area > div {display: flex; gap: 0.25em; font-size: 0.65em; align-items: center; cursor: pointer;}

.send_area {background-color: var(--color-bgg1);}
.send_area .ms_com,
.send_area.ms_box .ms_con,
.send_area.ms_box .data_area {border-color: #fff;}


.received_area {border: 1px solid var(--color-border);}
.received_area .ms_box .data {padding-bottom: 0.75em; border-bottom: 1px solid var(--color-border);}


@media screen and (max-width: 390px) {
    .btn_area div button {font-size: 0.875em;}
    .af_area > div {font-size: 0.65em;}
}


@media screen and (max-width: 350px) {
    .btn_area div button {font-size: 0.75em;}
} 

 

/* 서류 관리 */
.document .sub_head .input-group {background-color: #fff; border: 1px solid var(--color-border); font-size: 0.875em; border-radius: var(--br-sm);}


.ms_box .img_area > div.add_doc_01 {background: url('../img/doc.jpg') no-repeat 50% 50%; background-size: cover;}
.ms_box .img_area > div.add_doc_02 {background: url('../img/doc_02.jpg') no-repeat 50% 50%; background-size: cover;}


/* -------------- popup Css -------------- */
/* pop_img */
.pop_img .modal-body {border: 1px solid var(--color-border); border-radius: var(--br-big); width: 100%; display: flex; flex-direction: column; padding: 2em 1em; justify-content: center; align-items: center; gap: 1em;}
.pop_img .modal-body .logo_area {width: 7em; height: 7em; }
.pop_img .modal-body p {text-align: center;}
.pop_img .modal-body dt {font-family: var(--font-number); font-weight: 600; line-height: 1.4; font-size: 1.25em; text-align: center; padding-top: 1em;}
.pop_img .modal-body dt span {font-weight: 300; display: block;}

.pop_img .modal-footer {justify-content: center; padding-top: 0;}
.pop_img .modal-footer > * {flex: unset; padding: 0.5em 3em;}


.pop_img .modal-content {overflow: visible;}
.pop_img .modal-content .swiper-button .swiper-button-prev {left: -1.25em; width: 2em; height: 2em; background: url(../img/swa_prev.svg) no-repeat 50% 50%; background-size: 100%;}
.pop_img .modal-content .swiper-button .swiper-button-next {right: -1.25em; width: 2em; height: 2em; background: url(../img/swa_next.svg) no-repeat 50% 50%; background-size: 100%;}
.pop_img .modal-content .swiper-button .swiper-button-next::after,
.pop_img .modal-content .swiper-button .swiper-button-prev::after {display: none;}


.pop_img_2 .modal-dialog,
.pop_img_2 .modal-content {padding: 0; gap: 0; border-radius: var(--br-big);}
.pop_img_2 .modal-body {padding: 0; border: unset;}
.pop_img_2 .modal-body img {border-radius: var(--br-big) var(--br-big) 0 0;}
.pop_img_2 .modal-footer {padding: 1em;}


/* 매장변경 */
.modal-body {display: flex; flex-direction: column; gap: 2em;}
.modal-body .box {text-align: center; background-color: var(--color-bgg1); display: flex; justify-content: center; border-radius: var(--br-sm); padding: 0.75em; color:#666; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.modal-body .box.active {background-color: var(--color-main); border-color: var(--color-main); color:#fff;}

/* 매장변경 */
.cg_store .modal-body {gap: 0.5em;}


/* store */
.store header h2 {font-size: 4em; word-break: keep-all;}

/* 직원 추가 // 직원 수정 */
.pop_list .modal-header {justify-content: flex-end;}
.pop_list .modal-body > div {display: flex; flex-direction: column; gap: 0.75em;}
.pop_list .contents {display: flex; flex-direction: column; gap: 1em;}

.pop_list .modal-body > div.contents > div {display: flex; flex-direction: column; gap: 0.75em;}
.pop_list .modal-body .radio_area {gap: 1.5em;}
.pop_list .modal-body .checkbox_area {display: flex; flex-direction: column; gap: 1em;}
.pop_list .modal-body .checkbox_area.tt_box {flex-direction: row;}
.pop_list .modal-body .checkbox_area .form-check .form-check-label {display: flex; gap: 0.5em; align-items: center; width: calc(100% - (0.5em * 4)); flex-grow: 1;}
.pop_list .modal-body .checkbox_area .form-check .form-check-label .input-box {display: flex; gap: 0.5em; align-items: center; }
.pop_list .modal-body .checkbox_area .form-check .form-check-label .input-box > input { border-radius: var(--br-sm); background-color: var(--color-bgg1); }
.pop_list .modal-body .form-floating .form-control { border-radius: var(--br-sm); background-color: var(--color-bgg1); font-size: 0.875em; text-align: left; height: 75px; padding: 0.75em 1em; resize: none;}

.pop_list .modal-footer .rd_notice {justify-content: flex-start;}
.pop_list .modal-footer .rd_notice p {text-align: left;}

p.tit_area {color: var(--black-light); margin-top: 0.5em;}

.pop_list .tit_area {display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em;}
.pop_list .tit_area > * {text-align: left;}
.pop_list .tit_area > p {font-size: 0.875em; color: var(--black-light);}


/* 매장 정보 수정 */
.pop_list .add_em_info {display: flex; flex-direction: column; gap: 1.5em;}
.pop_list.pop_eds .modal-body .checkbox_area {flex-direction: row;}

/* 급여명세서 */
.list_pay .modal-footer {display: flex; flex-direction: column;}
.list_pay .modal-footer > * {width: 100%;}

.list_pay .tit_area p {font-size: 0.875em;}
.list_pay .tit_area p span {font-size: 1.125em;}

.list_pay  ul.contents {display: flex; flex-direction: column; gap: 0.5em;}
.list_pay  ul.contents > li {display: flex; gap: 0.5em;}
.list_pay  ul.contents > li > * {padding: 0.5em 1em;  border-radius: var(--br-sm); border: 1px solid var(--color-border); font-size: 0.875em; height: 37px; display: flex; align-items: center;}
.list_pay  ul.contents > li .tit {width: 10em; background-color: var(--color-border);}
.list_pay  ul.contents > li .txt {flex-grow: 1;}

.list_pay  ul.contents > li.total * {background-color: var(--color-green); border-color: var(--color-green); color:#fff;}
.list_pay  ul.contents > li.all_total * {background-color: var(--color-blue); border-color: var(--color-blue); color:#fff;}
.list_pay  ul.contents > li.sub .tit {width: 8.5em;}
.list_pay  ul.contents > li.sub .sub_arw {border: unset; padding: 0; width: 1em;}

.list_pay  ul.contents > li.all_total dt {font-weight: 600; font-size: 1.125em;}



/* 250908 수정 */
/* QR 코드 */
.pop_img.pop_qr .modal-body {border: 0px; background-color: var(--color-main); gap: 1.5em; align-items: center; justify-content: center;}
.pop_img.pop_qr .modal-body > * {color: #fff; font-family: var(--font-number)}
.pop_img.pop_qr .modal-body .logo {width: 70%; max-width:12em;}
.pop_img.pop_qr .modal-body .box_qr {background-color: #fff; border-radius: var(--br-mid); border: 0.4em solid var(--color-blue); padding: 1em; width: fit-content}
.pop_img.pop_qr .modal-body dt {padding-top: 0; letter-spacing: 0.02em;}
.pop_img.pop_qr .modal-body dt span {font-weight: 400; display: inline-block; font-size: 0.875em; letter-spacing: -0.02em;}
.pop_img.pop_qr .modal-body p {font-size: 0.75em;}
.pop_img.pop_qr .modal-footer .btn {font-weight: 600;}

/* 250908 수정 */

/* QR 코드 
.pop_img .modal-body .box_qr {border-radius: var(--br-big); border: 5px solid var(--color-main); padding: 1em; text-align: center; width: fit-content; margin: 0 auto;}


.pop_img.pop_qr .modal-content .swiper-button .swiper-button-next {right: -2.25em;}
.pop_img.pop_qr .modal-content .swiper-button .swiper-button-prev {left: -2.25em;}
*/


/* 알바생 */

.main.em .main_payroll .contents.grid {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(1, 1fr); gap: 0.75em;}

.main.em .main_attendance .contents .text_area {flex-grow: 1;}
.main.em .main_attendance .btn_area {width: 100%;}
.main.em .main_attendance .btn_area > button {flex: 1; justify-content: center;}
.main.em .main_attendance .contents .text_area p span {border-radius: 1em; padding: 0.25em 1em; color:#fff; margin-right: 0.5em; font-size: 0.75em;}
.main.em .main_attendance .contents .text_area p span.gowork {background-color: var(--color-main);}
.main.em .main_attendance .contents .text_area p span.gfwork {background-color: var(--color-sub);}

.read_qr dd {text-align: center; font-family: var(--font-number); }
.read_qr dd span {font-weight: 600;}


.login .wrap .store_list {display: flex; flex-direction: column; gap: 2em; background-color: transparent; border-color: var(--color-border);}

.login .wrap .store_list .box {background-color: transparent; border: 1px solid var(--color-border); display: grid; gap: 1em; grid-template-columns: 120px auto; align-items: center; padding: 1em;}
.login .wrap .store_list .box.select {border-color: var(--color-main); background-color: var(--color-main);}
.login .wrap .store_list .box .img_area {height: 120px; display: block; background: var(--color-bgg1); border-radius: var(--br-big);}
.login .wrap .store_list .box .text_area {display: flex; gap: 0.5em; flex-direction: column;}
.login .wrap .store_list .box .text_area dt {font-family: var(--font-number); font-weight: 600; font-size: 1.5em; padding-bottom: 0.3em;}
.login .wrap .store_list .box.select .text_area dt {color: #fff;}
.login .wrap .store_list .box.select .text_area p {color: #fff;}

.sub.em.attendance .main_attendance .tit_area {justify-content: flex-start;}
.sub.em.attendance .main_attendance .tit_area > span {font-size: 0.75em; padding: 0.5em 1em; border-radius: 2em; background: var(--color-sub); color:#fff;}


.login .wrap .store_list .box .img_area.mega_cof {background: var(--color-bgg1) url(../img/mega_coffee.svg) no-repeat 50% 50%; background-size: 45%;}

.pop_alarm_em .modal-header p {color: var(--black-mid);}
.pop_alarm_em .modal-header p span.name {color: var(--black-basic); font-weight: 600;}
.pop_alarm_em .modal-body {border-radius: 0px; border-left: 0px; border-right: 0px; padding: 1em 0; display: flex; gap: 1em;}
.pop_alarm_em .modal-body p {text-align: left;}
.pop_alarm_em .modal-body .img_area {display: flex; gap: 1em; width: 100%;}
.pop_alarm_em .modal-footer {justify-content: flex-start;}
.pop_alarm_em .modal-footer .data_area {border-top: 0px; padding: 0 0 0 0;}


.icon_logout {background: url(../img/logout_wh.svg) no-repeat 50% 50%; background-size: 75% auto;}


.pop_list.pop_ratt .modal-body .checkbox_area,
.pop_list.pop_matt .modal-body .checkbox_area {
    display: flex; 
    gap: 0.5em; 
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 120px; 
    overflow-y: auto; 
    overflow-x: hidden;
}