/* 페이지로딩(공통) */
.PageLoading {position:fixed; left:50%; top:50%; width:200px; height:200px; transform:translate(-50%, -50%); z-index:1002; border-radius:100px; box-shadow:0 0 20px rgba(0,0,0,0.1); display:flex; justify-content:center; align-items:center; flex-direction:column; background-color:#fff; opacity:0.97;}
.PageLoading .load {text-align:center; font-size:12px; font-weight:500; color:#333; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px}
.PageLoading .load:before {content:""; width:70px; height:70px; background:#fff url('../images/page_loading.gif') center center no-repeat; background-size:auto 60px; border-radius:100px; display:block;}




/* 사용처 안내 레이어 ======================================== */
.LayerPop {flex:1; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; padding:15px 0 30px 0; box-sizing:border-box; overflow: hidden;}
.LayerPop .layout_fix {flex:1; box-sizing:border-box; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; width:100%; overflow:hidden;}
.LayerPop .title {color:#000; font-size:21px; font-weight:600; box-sizing:border-box; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;}
.LayerPop .scroll_content {flex:1; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;}
.LayerPop .scroll_content> .c_btnbox {margin-bottom:0px;}
.LayerPop .guide_comment {margin-bottom:15px; font-size:14px; font-weight:500; word-wrap:break-word; word-break:keep-all; white-space:normal; border-radius:5px; padding:15px 12px; background:#f0f0f0;}
.LayerPop .full_text {font-size:14px; color:#5d6b82; line-height:1.45;}
.LayerPop .url_link {display:flex; justify-content:start; align-items:flex-start; flex-direction:row; gap:5px; background:#f0f0f0; padding:15px; font-size:15px; border-radius:8px; color:var(--color-blue); line-height:1.1;}
.LayerPop .find_form {display:flex; justify-content:flex-start; align-items:center; gap:10px; flex:none; margin-bottom:15px; background:#f5f5f5; padding:20px; border-radius:8px;}

.LayerPop .data_wrap {overflow-y:auto; border:1px solid #333; border-radius:5px; position:relative; flex:1}
.LayerPop .data_wrap .before {padding:10px; text-align:center; color:#999; font-size:14px; font-weight:500; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff;}

.LayerPop .data_list {box-sizing:border-box; overflow:hidden}
.LayerPop .data_list .like_table {display:table; width:100%; box-sizing:border-box; border-collapse:separate; border-spacing:0px;}
.LayerPop .data_list ul {display:table-row;}
.LayerPop .data_list ul.thead {background:#4285F426; border-bottom:0; font-weight:500;}
.LayerPop .data_list ul.thead li {padding:10px 0px; color:#666;}
.LayerPop .data_list li {padding:8px; color:var(--color-dark); display:table-cell; font-size:13px; font-weight:500; text-align:center; border-bottom:1px solid #4285F433;}
.LayerPop .data_list ul+ ul {border-top:1px solid #eee;}
.LayerPop .data_list ul:nth-child(odd) {background:#f5f5f5;}
.LayerPop .data_list ul:hover {background:color-mix(in srgb, var(--color-blue) 20%, transparent);}
.LayerPop .data_list ul.t_cancel {background-color: #fddede;}

.LayerPop .c_btnbox .c_btn {flex:none !important;}





/* 인증로그인 ======================================== */
.AuthLogin {width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; flex:1; position:fixed; left:0; top:0; z-index:1000; background:#fff;}
.AuthLogin .layout_fix {width:100%; max-width:350px; }
.AuthLogin .title {display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:20px; font-size:21px; color:#000; font-weight:700;}
.AuthLogin .cont_box {}
.AuthLogin .cont_box li {position:relative; display:flex; justify-content:center; align-items:flex-start; flex-direction:column;}
.AuthLogin .cont_box li+ li {margin-top:10px;}
.AuthLogin .cont_box .input {width:100%; border-radius:8px; height:60px; box-sizing:border-box; border:1px solid #e5e5e5; padding:0 20px; font-size:16px; font-weight:500; color:#343B4F; transition:all 0.3s ease-out;}
.AuthLogin .cont_box .input::-webkit-input-placeholder {color:#CACACA;}
.AuthLogin .cont_box .input::input-placeholder {color:#CACACA;}
.AuthLogin .cont_box .input:focus {border-color:var(--color-blue);}
.AuthLogin .cont_box .input:disabled {background:#eee;}
.AuthLogin .cont_box .btn_ctrl {position:absolute; right:12px; display:flex !important; justify-content:center; align-items:center; flex-direction:column; height:32px; padding:0 10px; color:var(--color-blue); font-size:13px; font-weight:500; border:1px solid #4285F426; border-radius:100px; background:#4285F426;}
.AuthLogin .cont_box .timer {position:absolute; right:15px; color:var(--color-coral); pointer-events:none; font-size:14px; font-weight:600;}
.AuthLogin .agree_more {margin-top:5px; color:#666; word-wrap:break-word; word-break:keep-all; white-space:normal; line-height:1.35;}
.AuthLogin .copyright {font-size:12px; color:#aaa;  margin-top:10px; text-align:center;}



/* 슬라이드 메뉴 ======================================== */
.p_Slide {}
.p_Slide .wrapping {position:fixed; right:0; top:0; width:100%; max-width:430px; height:100%; background:#fff; overflow-y:auto; transform:translateX(100%); box-sizing:border-box; transition:all 0.2s ease-out;  z-index:400; -ms-overflow-style:none; scrollbar-width:none; display:flex; justify-content:center; align-items:stretch; flex-direction:column;}
.p_Slide .slide_bg {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:399; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); visibility:hidden; transition:opacity 0.2s ease-out;}
.p_Slide .top_area {padding:30px; padding-top:20px; background:var(--color-bg); display:flex; justify-content:center; align-items:stretch; flex-direction:column;}
.p_Slide .ctrl_click {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:10px;}
.p_Slide .ctrl_click .btn_close {font-size:22px; color:#000; padding:5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.p_Slide .ctrl_click .btn_logout {font-size:12px; color:#666; font-weight:500; background:#fff; border:1px solid #eee; border-radius:100px; display:flex; justify-content:center; align-items:center; flex-direction:column; height:25px; padding:0 10px;}
.p_Slide .name {font-size:18px; color:var(--color-dark); font-weight:700; flex:1}

.p_Slide .member .point {font-size:21px; color:var(--color-blue); font-weight:500; flex:none; display:flex; justify-content:center; align-items:center; flex-direction:row;}
.p_Slide .member .point strong {font-weight:800;}
.p_Slide .member .point em {font-size:0.9em;}
.p_Slide .member .point .tag {font-size:15px; color:#fff; font-weight:600; background:var(--color-blue); border-radius:100px; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box; width:22px; aspect-ratio:1/1; margin-right:5px;}
.p_Slide .myinfo {margin-top:20px; border-top:1px solid #ddd; padding-top:20px;}
.p_Slide .myinfo dl {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px;}
.p_Slide .myinfo dl+ dl {margin-top:8px;;}
.p_Slide .myinfo dt {flex:none; width:50px; color:#999;}
.p_Slide .myinfo dd {flex:1; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; color:var(--color-dark);}
.p_Slide .myinfo .owner {margin-left:10px; display:flex; justify-content:center; align-items:center; flex-direction:row}
.p_Slide .myinfo .owner:before {content:""; width:1px; height:10px; background:#ccc; display:block; margin-right:10px;}
.p_Slide .menu_list {margin-top:30px; padding:0 30px; }
.p_Slide .menu_list li+ li {margin-top:10px;}
.p_Slide .menu_list .menu_link {font-size:17px; font-weight:600; color:#000; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; height:60px; gap:8px; transition:all 0.3s ease-out; border:1px solid #e5e5e5; border-radius:8px; padding:0 15px; box-sizing:border-box;}
.p_Slide .menu_list .menu_link strong {flex:1;}
.p_Slide .menu_list .menu_link i.arrow {color:#999; font-size:16px;}
.p_Slide .menu_list .menu_link i.picto {color:var(--color-dark); font-size:23px; transition:all 0.3s ease-out;}
.p_Slide .cs_center {margin-top:auto; padding-top:40px; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:8px; padding:30px; }
.p_Slide .cs_center .btn_email {color:var(--color-dark); font-weight:500; font-size:14px; text-decoration:underline; text-underline-offset:4px;}
.p_Slide .cs_center .open_time {font-size:13px; color:#888; line-height:1.4;}
.p_Slide .cs_center .copyright {font-size:13px; color:#aaa;  margin-top:10px;}
.p_Slide.if_open_slide .wrapping {transform:translateX(0);}
.p_Slide.if_open_slide .slide_bg {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); visibility:visible;}

.p_Slide .menu_list .menu_link:hover {color:var(--color-blue); padding-left:25px; background:color-mix(in srgb, var(--color-blue) 10%, transparent); border-color:color-mix(in srgb, var(--color-blue) 30%, transparent);;}
.p_Slide .menu_list .menu_link:hover i.picto {color:var(--color-blue);}




/* 헤더 ======================================== */
.Header {box-sizing:border-box; border-bottom:1px solid #eee; position:sticky; top:0; left:0; backdrop-filter:blur(5px); background-color:rgba(255, 255, 255, 0.8); z-index:10; flex:none}
.Header .layout_fix {display:flex; justify-content:space-between; align-items:center; flex-direction:row; gap:5px 10px; min-height:80px; flex-wrap:wrap; padding-top:15px; padding-bottom:15px;}
.Header .my_info {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:15px;}
.Header .name {font-size:18px; font-weight:700; color:var(--color-dark); display:flex; justify-content:center; align-items:center; flex-direction:row; gap:5px; flex:none}
.Header .name i {font-size:22px;}
.Header .point {font-size:21px; color:var(--color-blue); font-weight:500; flex:none; display:flex; justify-content:center; align-items:center; flex-direction:row; flex:none; line-height:1;}
.Header .point:before {content:""; width:1px; height:16px; background:#ccc; margin-right:15px;}
.Header .point strong {font-weight:800; font-size:23px; }
.Header .point .tag {font-size:15px; color:#fff; font-weight:600; background:var(--color-blue); border-radius:100px; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box; width:22px; aspect-ratio:1/1; margin-right:5px;}
.Header .side {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px; flex:none;}
.Header .btn_icon {font-size:22px; color:#000; padding:5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:4px}
.Header .btn_icon strong {font-size:14px; font-weight:600; margin-top:3px;}



/* 목록검색  ======================================== */
.ListSearch {margin:15px 0;  flex:none}
.ListSearch .inner {width:100%; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:10px 20px; padding:20px; background:#f5f5f5; border-radius:8px; box-sizing:border-box;}
.ListSearch .find_form {display:flex; justify-content:flex-start; align-items:center; gap:10px; flex-wrap:wrap; flex:1}
.ListSearch .find_form .input_design {height:40px; flex:1}
.ListSearch .find_form .input_design.type_date {width:100px; background-image:none; text-align:center; padding:0;}
.ListSearch .find_form .input_design.search_word {}
.ListSearch .find_form .dash {color:#333; font-weight:600;}
.ListSearch .find_form i {font-size:22px;}
.ListSearch .tieup {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:5px;}
.ListSearch .tieup.word {flex:1; max-width:300px}
.ListSearch .side {flex:none; display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:5px;}



/* 목록 컨트롤 ========================================= */
.ListCtrl {flex:none; margin-bottom:15px;}
.ListCtrl .layout_fix {display:flex; justify-content:space-between; align-items:center; flex-direction:row; gap:10px 20px; font-size:15px; font-weight:500; flex-wrap:wrap; overflow:visible;}
.ListCtrl .major_area {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px;}
.ListCtrl .major_area .title {font-size:18px; font-weight:700; color:var(--color-dark); flex:none}

.ListCtrl .list_menu {position:relative; min-width:250px; flex:none}
.ListCtrl .list_menu .menu {display:flex; justify-content:center; align-items:center; flex-direction:row; height:40px; box-sizing:border-box; font-weight:700; border:1px solid #ccc; padding:0 10px; border-radius:4px; gap:8px; font-size:14px; font-weight:600; color:var(--color-dark);}
.ListCtrl .list_menu .menu strong {flex:1}
.ListCtrl .list_menu .menu i {font-size:20px;}
.ListCtrl .list_menu .menu i.this_arrow {font-size:16px;}
.ListCtrl .list_menu .open_menu {position:absolute; left:0; top:39px; width:100%; z-index:100; background:#f5f5f5; display:none; overflow:hidden;}
.ListCtrl .list_menu .open_menu ul {box-sizing:border-box; border:1px solid #ccc; padding:10px 0;  overflow-y:auto; max-height:350px;}
.ListCtrl .list_menu .open_menu .opt {display:block; color:#333; font-weight:500; padding:6px 15px; font-size:14px;}
.ListCtrl .list_menu .open_menu .opt.hit {color:var(--color-blue) ;}
.ListCtrl .list_menu.if_open .menu {border-bottom-left-radius:0; border-bottom-right-radius:0;}
.ListCtrl .list_menu.if_open .menu i.fi {transform:rotate(-180deg);}
.ListCtrl .list_menu.if_open .open_menu {display:block;}
.ListCtrl .side_area {flex:none; display:flex; justify-content:flex-end; align-items:center; flex-direction:row; flex-wrap:wrap; gap:10px}
.ListCtrl .side_form {flex:1; display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:10px;}



/* 쿠폰목록 ========================================= */
.ListData {max-width:100%; box-sizing:border-box; padding:0 0 50px 0; flex:1}
.ListData .data_list_wrap {width:100%; max-width:100%; min-width:0;}
.ListData .data_list_wrap:not(.if_dual_scroll) .data_list_top_scroll {height:0; min-height:0; max-height:0; margin:0; padding:0; overflow:hidden; opacity:0; pointer-events:none;}
.ListData .data_list_wrap.if_dual_scroll .data_list_top_scroll {overflow-x:auto; overflow-y:hidden; line-height:0; min-height:22px; max-height:28px; box-sizing:border-box;}
.ListData .data_list_top_scroll_spacer {display:block; height:1px; width:0;}
.ListData .data_list {border-top:2px solid var(--color-blue); overflow-x:auto; width:100%; max-width:100%; min-width:0; box-sizing:border-box;}
.ListData .data_list .inner_scroll {display:table; min-width:100%; width:max-content;}
.ListData .data_list ul {display:table-row; position:relative;}
.ListData .data_list li {display:table-cell; height:40px; font-size:13px; vertical-align:middle; text-align:center; min-width:40px; padding:5px; box-sizing:border-box;}
.ListData .data_list ul.thead {background:#4285F426; border-bottom:0; font-weight:500; border-bottom:1px solid #4285F433;}
.ListData .data_list ul.tbody {border-bottom:1px solid #ddd;}
.ListData .data_list ul.tbody li+ li {border-left:1px solid #e5e5e5;}
.ListData .data_list li.t_right {text-align:right}
.ListData .data_list li.t_bold {font-weight:600;}
.ListData .data_list li.check {width:50px;}

.ListData .lineup_column {display:flex; justify-content:center; align-items:center; flex-direction:column; gap:4px}
.ListData .lineup_row {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:4px}
.ListData .t_coral {color:var(--color-coral);}
.ListData .t_blue {color:var(--color-blue);}
.ListData .t_black {color:var(--color-dark);}
.ListData .t_light {color:#999;}



/* 선택출금 안내팝업 -- CTM:604271:JJC:B2B통합관리자 ========================================= */
.p_Layer_pop {position:absolute; left:0; top:0; width:100%; height:100%; z-index:10000; display:flex; justify-content:center; align-items:center; flex-direction:column; background:rgba(0,0,0,0.5); visibility:hidden;}
.p_Layer_pop {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
.p_Layer_pop * {color:#000; font-weight:500;}
.p_Layer_pop .inner {position:relative; z-index:1; background:#fff; width:400px;  min-height:300px; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; padding-top:25px;}
.p_Layer_pop .inner {box-sizing:border-box; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; transform:translateY(50px); }
.p_Layer_pop li {list-style:none;}
.p_Layer_pop .title {text-align:center; font-size:18px; font-weight:600; margin-bottom:10px;}
.p_Layer_pop .content {flex:1; padding:0 30px; text-align:center; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column;}
.p_Layer_pop .content > dl {padding:15px 10px; flex:1; display:flex; justify-content:center; align-items:center; flex-direction:column; border:2px solid #000;}
.p_Layer_pop .content > dl dt {font-size:16px; font-weight:600;}
.p_Layer_pop .content > dl dd {margin-top:5px; color:#005aff; font-size:16px; font-weight:600;}
.p_Layer_pop .content > dl dd strong {text-decoration:underline; color:inherit;}
.p_Layer_pop .content .guid {color:#333; font-size:14px; margin-top:15px; text-align:left; padding:15px 20px; background:#f5f5f5;}
.p_Layer_pop .content .guid strong {font-weight:600; text-decoration:underline; color:#ff0000;}
.p_Layer_pop .content .guid dt {font-size:15px; font-weight:600; padding-bottom:10px;}
.p_Layer_pop .content .guid dd {border-top:1px dashed #ccc; padding:6px 0; position:relative; line-height:1.4; color:#666; padding-left:10px; font-weight:400;}
.p_Layer_pop .content .guid dd:before {content:""; width:3px; height:3px; background:#666; position:absolute; left:0; top:14px;}
.p_Layer_pop .content .guid dd.confirm {color:#000; font-weight:600; padding-bottom:0px; padding-left:0px;}
.p_Layer_pop .content .guid dd.confirm:before {display:none;}
.p_Layer_pop .content .reject {background:#f2f2f2; flex:1; font-size:17px; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.p_Layer_pop .content .otp_form {margin-top:15px;}
.p_Layer_pop .content .input_otp {width:100%; height:60px; border-radius:0px; border:1px solid #ccc; box-sizing:border-box; padding:0 15px; font-size:18px; background:#fff; outline:none; color:#000;}
.p_Layer_pop .content .input_otp {text-align:center; font-weight:600;}
.p_Layer_pop .content .input_otp::placeholder {color: #999 !important;}
.p_Layer_pop .content .input_otp::-webkit-input-placeholder {color: #999 !important;}
.p_Layer_pop .content .input_otp::-ms-input-placeholder {color: #999 !important;}
.p_Layer_pop .content .input_otp::-moz-placeholder {color: #999 !important;}
.p_Layer_pop .content .input_otp:focus {border-color:#333;}
.p_Layer_pop .button {margin-top:30px;}
.p_Layer_pop .button ul {display:flex; justify-content:center; align-items:center; flex-direction:row;}
.p_Layer_pop .button li {flex:1;}
.p_Layer_pop .button .btn_ctrl {display:flex; justify-content:center; align-items:center; flex-direction:column; height:50px; font-size:14px;}
.p_Layer_pop .button .btn_ctrl.type_ok {background:#005aff; color:#fff;}
.p_Layer_pop .button .btn_ctrl.type_no {background:#000; color:#fff;}
.p_Layer_pop.if_open {visibility:visible; opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100);}
.p_Layer_pop.if_open .inner {transform:translateY(0); }




/* 쿠폰대량입력 ========================================= */

    @media screen and (min-width:900px) {
        .ListCtrl .list_menu .open_menu .opt:hover {text-decoration:underline;}
        .ListData .data_list ul:hover {background:#f5f5f5;}
    }

    @media screen and (max-width:900px) {
        .ListSearch .inner {flex-direction:column; align-items:stretch; }
        .ListSearch .tieup.word {max-width:100%}
        .ListCtrl .layout_fix {flex-direction:column; align-items:stretch; }
        .ListCtrl .list_menu {max-width:100%; min-width:0;}
        .ListCtrl .major_area {}
    }

    @media screen and (max-width:600px) {
        .ListSearch .find_form {flex-direction:column; align-items:stretch; }
    }



.if_hide {display:none !important;}