@charset "UTF-8";
@import url('./admin.common.css');
/**************************************************/
/* === page_login === */
#page_login main{ display: flex; align-items: center; justify-content: center;}
#page_login form{ display: flex; flex-flow: column nowrap; align-items: center; width: 100%; max-width: 448px; }
#page_login img{ height: 34px; margin-bottom: 68px; }
#page_login label{ width: 100%; margin-bottom: 22px; font-weight: 500; font-size: 16px; line-height: 23px; }
#page_login input{ width: 100%; margin-top: 10px;}

#page_login button.b_point{ width: 120px; height: 40px; margin-top: 28px; border-radius: 4px; }

/**************************************************/
/* ====================================== 1. promo */
/* === page_promo_list === */


/**************************************************/
/* === page_promo_edit === */
#page_promo_edit main > .wrap_col{ margin-top: 32px; background: #F7F7F7; border: 1px solid #DEDEDE; }
#page_promo_edit main > .wrap_col > *:is(.col_3, .col_9){ min-height: 800px; }
#page_promo_edit main > .wrap_col [class*="btn_"]:not(.btn_thumb, .btn_add, .btn_toggle){ height: 40px; border-radius: 4px; font-weight: 500; }

/* ------ popup */
#page_promo_edit .popup.default .wrap_pop{ display: none;}
#page_promo_edit .popup.default .wrap_pop.active{ display: block; }

/* ------ col_3 */
#page_promo_edit .col_3{ background: #fff; border: 1px solid #DEDEDE;}

/* bx_title */
#page_promo_edit .col_3 .bx_title{ 
    display: flex; align-items: center; height: 100px; margin-bottom: 24px; border-bottom: 1px solid #222; 
}
#page_promo_edit .col_3 .bx_title h3{ width: calc(100% - 48px); font-weight: 500; font-size: 22px; }


/* bx_tabBtn */
#page_promo_edit .col_3 .bx_tabBtn button{ 
    width: 100%; height: 70px; 
    background: url("data:image/svg+xml,%3Csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L9 9L1 17' stroke='%23222222' stroke-width='1.3'/%3E%3C/svg%3E%0A") #fff no-repeat center right 60px; border-bottom: 1px solid #DEDEDE; border-left: 12px solid transparent;
    font-weight: 500; font-size: 16px; text-align: left; text-indent: 48px;
}
#page_promo_edit .col_3 .bx_tabBtn button:first-of-type{  border-top: 1px solid #DEDEDE; }
#page_promo_edit .col_3 .bx_tabBtn button.active{ background-color: #E5E5E5; border-left-color: var(--point); }

/* bx_btn */
#page_promo_edit .col_3 .bx_btn{ margin-top: 62px; }
#page_promo_edit .col_3 .bx_btn button{ width: 110px; font-size: 16px; }
#page_promo_write .col_3 .bx_btn{ gap: 0 15px;}
#page_promo_edit .col_3 .bx_btn{ gap: 0 14px;}

/* ------ col_9 */
#page_promo_edit .col_9{ padding: 20px 52px 55px;}
#page_promo_edit .col_9 .bx_tabBx{ display: none;  flex-flow: column nowrap;}
#page_promo_edit .col_9 .bx_tabBx.active{ display: flex;}

#page_promo_edit .col_9 > *:not(.wrap_col){ max-width: 700px; }

#page_promo_edit .col_9 .t_title{ 
    display:flex; align-items: center; 
    height: 32px; margin: 20px 0 6px; 
    font-weight: 500; font-size: 16px; color: #222; 
}
#page_promo_edit .col_9 .t_title:first-of-type{ margin-top: 0;}
#page_promo_edit .col_9 .bx_tabBx > input:not([type="radio"], [type="checkbox"]){ height: 50px;}
#page_promo_edit .col_9 .bx_tabBx > textarea{ height: 110px; }
#page_promo_edit .col_9 textarea.bx_table{ height: 450px;}
#page_promo_edit .col_9 .t_guide{ margin-top: 16px; color: #A7A7A7 ; font-weight: 500; font-size: 16px; line-height: 23px;}
#page_promo_edit .col_9 .bx_tabBx > .bx_thumb{ height: 173px; }
#page_promo_edit .col_9 .bx_tabBx > .btn_save{ margin-top: 30px;}

#page_promo_edit .col_9 .lb_chk{ margin-left: auto;}
#page_promo_edit .col_9 .btn_add{
    display: flex; align-items: center; justify-content: center; 
    height: 50px; margin: 15px 0 10px; 
    border: 1px solid #E3E3E3; border-radius: 4px; 
    background-color: #fff; box-shadow: 0px 4px 4px rgba(186, 186, 186, 0.25);
    font-weight: 500; font-size: 16px ;color: #777;
}


/* btn_toggle */
#page_promo_edit .col_9 .bx_checkbox{ 
    display: flex; align-items: center; min-height: 32px; font-size: 12px; color: #777;
}
#page_promo_edit .col_9 .btn_toggle{
    position: relative; width: 40px; height: 24px;
    border-radius: 100px;
    background: var(--point);
    overflow: hidden; cursor: pointer;
    transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
}
#page_promo_edit .col_9 .btn_toggle:after{
    position: absolute; top: 0; left: 0;
    width: 24px; height: 24px;
    border-radius: 50%; border: 1px solid var(--point);
    box-sizing: border-box;
    background: #fff;
    content: '';
    -webkit-border-radius: 50%; -moz-border-radius: 50%;
    -ms-border-radius: 50%; -o-border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    -webkit-transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    -moz-transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    -ms-transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    -o-transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#page_promo_edit .col_9 .btn_toggle:has(input:checked){ background:#F3A608; }
#page_promo_edit .col_9 .btn_toggle:has(input:checked):after{ left: 16px; border-color: #F3A608; }

/* ------ col_9 > col_6 */
#page_promo_edit .col_9:has(.col_6) .wrap_col{ flex-flow: row nowrap;}
#page_promo_edit .col_6{ display: flex; flex-flow: column nowrap; }
#page_promo_edit .col_6 .bx_scroll_Y{ display: flex; flex-flow: column nowrap; gap: 15px 0; height: 800px;}
#page_promo_edit .col_6 .bx_scroll_Y li{ 
    display: flex; flex-flow: row wrap;
    border: 1px solid #E3E3E3; border-radius: 4px; 
    background-color: #fff; box-shadow: 0px 4px 4px rgba(186, 186, 186, 0.25);
}

/* bx_list */
#page_promo_edit .col_6.bx_list{ padding-right: 50px; border-right: 1px solid #DEDEDE;}
#page_promo_edit .col_6.bx_list .lb_chk{ height: 32px;}
#page_promo_edit .col_6.bx_list .bx_btn{ justify-content: flex-end; gap: 6px; }
#page_promo_edit .col_6.bx_list .bx_btn button{ 
    width: 110px; background: #fff; border: 1px solid #A7A7A7; border-radius: 0; color: #777; 
}

/* bx_edit */
#page_promo_edit .col_6.bx_edit{ display: none; padding-left: 50px;}
#page_promo_edit .col_6.bx_edit.active{ display: flex;}
#page_promo_edit .col_6.bx_edit .bx_thumb{ width: 100%; height: 173px; }
#page_promo_edit .col_6.bx_edit .bx_btn{ gap: 20px; margin-top: 62px; }
#page_promo_edit .col_6.bx_edit .bx_btn button{ width: 100px; }
#page_promo_edit .col_6.bx_edit p.t_title ~ textarea{ height: 110px;}

/* --- data-index="0" */
#page_promo_edit .col_9 .bx_tabBx[data-index="0"] .btn_thumb{ margin-bottom: 10px; }

/* --- data-index="3" */
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .bx_scroll_Y li{ padding: 30px 42px; gap: 6px;}
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .bx_list .bx_thumb{ width: 136px; height: 158px; }

/* ly_left */
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .ly_left{ width: calc(100% - 142px); }
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .ly_left > *{ 
    display: block; width: 100%; padding: 15px 10px; 
    border: 1px solid #A7A7A7; border-radius: 4px; 
    font-weight: 500; color: rgba(167, 167, 167, 0.8); 
}
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .ly_left div{ height: calc(100% - 52px); margin-top: 6px; }
#page_promo_edit .col_9 .bx_tabBx[data-index="3"] .ly_bottom{ 
    width: 100%; height: 102px; padding: 14px;
    border: 1px solid #A7A7A7; border-radius: 4px; 
    color: rgba(167, 167, 167, 0.8); overflow-y: auto; 
}

/* --- data-index="4" */
#page_promo_edit .col_9 .bx_tabBx[data-index="4"] .bx_scroll_Y li{ padding: 22px 42px 32px;}
#page_promo_edit .col_9 .bx_tabBx[data-index="4"] .bx_scroll_Y li > *:not(.bx_btn){
    display: block; width: 100%; border: 1px solid #A7A7A7; border-radius: 4px;
    color: rgba(167, 167, 167, 0.8);
}
#page_promo_edit .col_9 .bx_tabBx[data-index="4"] .bx_scroll_Y b{ height: 80px; padding: 15px 18px;  overflow-y: auto; }
#page_promo_edit .col_9 .bx_tabBx[data-index="4"] .bx_scroll_Y .bx_thumb{height: 178px; margin: 10px 0;}

/**************************************************/
/* ====================================== 2. bg */
/* === page_bg_list === */
#page_bg_list .tb_list td .bx_thumb{ width: 94px; height: 52px; margin: 0 auto; }
#page_bg_list .tb_list td label.b_red{ cursor: pointer;}
#page_bg_list .tb_list td label.b_red:hover{ filter: brightness(95%);}


/**************************************************/
/* ====================================== 3. account */



/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    
}
@media screen and (max-width: 1680px){

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

}