@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* 2023이후 만든 기능 이 파일에 모음 이전- layout.css */
::-webkit-scrollbar {width: 8px; height: 8px; border: 4px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}
::-webkit-scrollbar-track {background-color: #F0F0F0; border-radius:3px;}
::-webkit-scrollbar-thumb {height: 50px;width: 50px;background-color:#C0C0C0;-webkit-border-radius: 3px;border-radius: 8px;-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:hover {height: 50px; width: 50px; background-color:#4774B9; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}


.title {
    font-family: 'nanum_basicB';
    font-size: 20px;
    color: #373737;
    padding-top: 20px;
    padding-bottom: 10px;
}
.transaction_print {
    display: inline-block;
    padding: 7px 0;
    background: #008AFF;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    width: 90px;
    cursor:pointer;
}
/**
 * 상품목록에 하단 고정 패널 및 버튼
 */
#prod_manage_panel {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 65px;
    line-height: 65px;
    text-align: center;
    vertical-align: middle;
    z-index: 10;
}
#prod_manage_panel span {
    font-size: 15px;
}
#prod_manage_panel > div {
    /*max-width:1100px;*/
    margin: 0 auto;
    background-color: #FAFAFA;
    border-top: 2px solid #DFDFDF;
    border-left: 1px solid #DFDFDF;
    border-right: 1px solid #DFDFDF;
    font-size: 15px;
    font-weight:bold;
}
#prod_manage_panel .prod_manage_btn {
    display: inline-block;
    width: 120px;
    height: 35px;
    line-height: 35px;
    border: 1.5px solid #B8B8B8;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    margin-left: 15px;
    padding-left: 24px;
    cursor: pointer;
    font-size: 15px;
    font-weight:700;
}
#prod_manage_panel .prod_manage_btn_like {
    color: #2E2E2E;
    background-color: #FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_like_n.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_like:hover {
    color:#008AFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_like_h.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_like:active {
    color:#FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_like_p.png) no-repeat #008AFF;
    background-position-x: 11px;
    background-position-y: center;
    border: 1.5px solid #008AFF;
}
#prod_manage_panel .prod_manage_btn_unlike {
    color: #2E2E2E;
    background-color: #FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_deleted_n.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_unlike:hover {
    color:#008AFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_deleted_h.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_unlike:active {
    color:#FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_deleted_p.png) no-repeat #008AFF;
    background-position-x: 11px;
    background-position-y: center;
    border: 1.5px solid #008AFF;
}
#prod_manage_panel .prod_manage_btn_cart {
    color: #2E2E2E;
    background-color: #FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_cart_n.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_cart:hover {
    color:#008AFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_cart_h.png) no-repeat #FFFFFF;
    background-position-x: 11px;
    background-position-y: center;
}
#prod_manage_panel .prod_manage_btn_cart:active {
    color:#FFFFFF;
    background: url(../../images/user/prod/web_list_bottom_btn_ic_cart_p.png) no-repeat #008AFF;
    background-position-x: 11px;
    background-position-y: center;
    border: 1.5px solid #008AFF;
}
#prod_manage_panel .prod_manage_btn_order {
    color: #FFFFFF;
    background: #0E2E5E;
    padding-left: 0px;
    margin-right:20px;
}
#prod_manage_panel .prod_manage_btn_order:hover {
    background: #0D1F39;
}
#prod_manage_panel .prod_manage_btn_order:active {
    background: #008AFF;
    border: 1.5px solid #008AFF;
}
#prod_manage_panel .prod_manage_btn_temp {
    padding-left: 0px;
}
#prod_manage_panel .prod_manage_btn_temp i {
    font-size: 20px;
    margin-right: 5px;
}

#prod_manage_list {
    display:none;
    position: fixed;
    bottom: 65px;
    width: 100%;
    height: 210px;
    z-index: 10;
}
#prod_manage_list > div {
    width: 100%;
    max-width: 1100px;
    height: 210px;
    margin: 0 auto;
    background-color: #FAFAFA;
    border-top: 1px solid #DFDFDF;
    border-left: 1px solid #DFDFDF;
    border-right: 1px solid #DFDFDF;
}
#prod_manage_list ul {
    margin: 20px 20px 10px 20px;
    height: 157px;
    border: 1px solid #E4E4E4;
    background-color: white;
    overflow-y:scroll;
}
#prod_manage_list ul li {
    border-bottom: 1px solid #E4E4E4;
}
#prod_manage_list ul li div {
    display: inline-block;
    height:38px;
    line-height:38px;
}
#prod_manage_list ul li div i { cursor:pointer; }
#prod_manage_list ul li div:nth-child(1) { min-width:80px; text-align:center; padding-left:5px;  }
#prod_manage_list ul li div:nth-child(2) {  }
#prod_manage_list ul li div:nth-child(3) {  }

#prod_manage_list ul li div:nth-child(4) { min-width:40px; float:right; text-align: center; padding: 0px; }
#prod_manage_list ul li div:nth-child(5) { min-width:110px; float:right; text-align: left; padding: 5px; }
#prod_manage_list ul li div:nth-child(6) { min-width:100px; float:right; text-align: center; padding: 0px; }
/*#prod_manage_list ul li div:nth-child(7) { min-width:40px; float:right; text-align: right; padding: 0px; }
#prod_manage_list ul li div:nth-child(8) { min-width:100px; float:right; text-align: center; padding: 0px; }*/
#prod_manage_list .quantity-button.quantity-down { bottom:11px; }
#prod_manage_list .prod_manage_list_total {
    text-align: right;
    width: 100%;
    padding-right: 20px;
}
#prod_manage_list .prod_manage_list_total > div {
    display:inline-block;
    font-size:17px;
    font-weight:bold;
}
#prod_manage_list .prod_manage_list_total > div p {
    display: inline-block;
    font-size: 17px;
    font-weight: bold;
    color: #f14949;
}
@media(max-width:767px) {
    #prod_manage_panel .prod_manage_btn, #prod_manage_panel .prod_manage_btn:hover {
        /*width: 80px;
        margin-left: 0px;
        padding-left: 0px;
        background-image: none;*/
    }
    #prod_manage_list {
        /*display: none !important;*/
    }
    #prod_manage_panel .prod_manage_btn_temp {
        /*display: none;*/
    }
}
/** 
 *  게시판 형태의 grid 스타일
 */
/* 상단 cnt_info */
.list_cnt      { color: #2E2E2E; text-align: left; }
.list_cnt span { font-weight: 700; color: #FF2C2C; }
.addRequest {float: right; font-family: 'NotoKrM'; font-weight: 400; font-size: 12px;
    line-height: 200%;  color: #2E2E2E;  border: 1px solid #9D9D9D;  padding: 0px 15px;  margin-bottom: 9px;}
.addRequest:hover {color: #008AFF;  border: 1px solid #008AFF;}
.addRequest:active {background: #008AFF; color: #fff;}
/* notice list */
.noticeLink       { cursor: pointer; padding: 10px; }
.noticeLink:hover {text-decoration : underline; font-weight: bold; }
.file_icon { vertical-align: sub; }
/* 기타 */
.mr7 { margin-right: 7px; }
.ml7 { margin-left: 7px; }

table.list_common_table thead tr th,
table.list_ledger_table thead tr th {
    background: #F3F8FF;
    border: 0px solid #bccbff;
    font-weight: 600;
    padding: 5px;
    text-align: center;
}

table.list_common_table,
table.list_ledger_table {
    margin-top: 10px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

table.list_common_table td,
table.list_ledger_table td {
font-size: 12px;
padding: 5px 5px;
text-align: center;
}

table.list_common_table td.tdleft,
table.list_ledger_table td.tdleft  { text-align: left; }
table.list_common_table td.tdright,
table.list_ledger_table td.tdright { text-align: right; }
table.list_common_table thead tr,
table.list_ledger_table thead tr                { height: 30px; border: none; border-bottom: 1px solid #E4E4E4; }
table.list_common_table tr,
table.list_ledger_table tr                      { border-bottom: 1px solid #E4E4E4; }
table.list_common_table thead tr th,
table.list_ledger_table thead tr th             { background: #F9F9F9; border: 1px solid #E4E4E4; }

table.list_common_table thead tr th:first-child,
table.list_ledger_table thead tr th:first-child { border-left: none; }
table.list_common_table thead tr th:last-child,
table.list_ledger_table thead tr th:last-child  { border-right: none; }
table.list_common_table tbody tr td:first-child,
table.list_ledger_table tbody tr td:first-child { border-left : none; }
table.list_common_table tbody tr td:last-child,
table.list_ledger_table tbody tr td:last-child  { border-right: none; }
table.list_common_table td,
table.list_ledger_table td                      { border-left: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4; }
table.list_common_table tr, table.list_prod_table tr,
table.list_ledger_table tr { height: 35px; }
table.list_prod_table td { font-size:12px; }
table.list_prod_table tr:nth-child(2n) { border-bottom: 1px solid #E4E4E4; }
table.list_common_table:not(.list_prod_table) tbody > tr:hover,
table.list_ledger_table:not(.list_prod_table) tbody > tr:hover { background-color: #D8EAFA; }

table.list_common_table.file_icon,
table.list_ledger_table.file_icon { vertical-align: sub; }
table.list_common_table:not(.list_prod_table) tr:nth-child(2n),
table.list_ledger_table:not(.list_prod_table) tr:nth-child(2n) { background: #FAFAFA; }
table.list_prod_table .tr2ed { background: #FAFAFA; }

input.prod_list_check   { width: 16px; height: 16px; }
input.prod_list_number  { width: 60px; height: 24px; text-align: right; font-size: 12px; border: 1px solid #D3D3D3; }
input.prod_img_check   { width: 16px; height: 16px; position:absolute; top:10px; right:10px; z-index:1; }
div.quantity { display: inline-block; }
.prod_list_number::-webkit-inner-spin-button { opacity: 1; cursor:pointer; }

table.list_common_table td.no_prod,
table.list_ledger_table td.no_prod { border-left: none; border-right: none; padding-top: 30px; }
/* 게시판 페이징 */
div.paging           { margin: 0 auto; text-align: center; margin: 15px 0; font-size: 10px; width: 100%; }
div.paging ul        { text-align: center; font-size: 10px; letter-spacing: 2px; } 
div.paging ul strong { padding: 5px 8px 6px 10px; border: 0px solid #707070; background: #048ABF; color: #fff; margin: 0 3px; border-radius: 5px; font-weight: 500; }
div.paging ul strong { background: none; color: #3D3D3D; font-weight: 800; font-size: 12px; }
div.paging ul a      { padding: 5px 8px 6px 10px; border: 0px solid #707070; color: #757575; margin: 0 3px; font-weight: 500; }
div.paging ul a      { font-size: 12px; font-weight: 400; color: #A3A3A3; }


 /** 
  *  게시판 형태의 grid 반응형, 라벨링은 MasterBase.js의 mediaGridheader 함수 참고
  */
@media(max-width:767px) {

    .BasicFloat                 { display: block !important; }
    .list_common_table          { width: 100%; }
    .list_common_table colgroup { display: none; }
    .list_common_table tr       { border-bottom: 0px !important; }
    .list_common_table tr td    { height: 24px; }

    .list_common_table:not(.list_prod_table) tr:nth-child(2n) { background: #FAFAFA !important; }
    /*.list_common_table thead tr {border-top:0px !important;position:sticky !important;}*/
    

    .list_common_table table,
    .list_common_table thead,
    .list_common_table tbody,
    .list_common_table tr,
    .list_common_table th,
    .list_common_table td {
        border: 0px solid #d2d2d2;
        font-size: 12px;
        width: 100%;
        display: block;
        float: none;
    }
    .list_common_table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .list_common_table tbody tr td {
        border: none;
        border-bottom: 0px solid #d2d2d2;
        position: relative;
        padding-left: 35%;
        text-align: left !important;
        padding-top: 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .list_common_table td:before { position: absolute; top: 0; left: 6px; width: 35%; padding-top: 3px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
    .list_common_table thead     { border-top: 2px solid #E4E4E4; }
    .list_common_table thead tr  { border-top: 2px solid #E4E4E4; position: absolute; }
    .list_common_table tr        { margin: 0 0 0 0; border-bottom: 2px solid #E4E4E4; height: initial !important; }
    .list_common_table td:before { position: absolute; top: 0; left: 6px; width: 35%; padding-top: 3px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

    /* 상품목록*/
    .quantity input {margin-left: 0; width: 30%;}
    .list_common_table tbody tr td.tdrownum {padding-left: 15px; font-weight: 700; font-size: 20px; padding-top: 10px; margin-bottom: 10px; overflow: unset;}
    .list_common_table tbody tr td.tdimg { height: 100px;}
    .list_common_table tbody tr td.tdquantity { display: inline-block; width: 57%; overflow: unset;}
    .list_common_table tbody tr td.tdchk {margin-top: 3px; margin-bottom: 7px; width: 25%; float: right; margin-right: 18%; padding-left: 0;}
    .list_common_table thead {border: none;}
    table.list_common_table {margin-top: 0;}
    .list_prod_table tbody tr:nth-child(2n - 1) td:nth-child(2):before {padding-top: 40px;}
    .quantity input.prod_list_number {width: 70%; margin-left: 0; height: 22px;}
    .list_common_table tr td {height: 26px;}
    .list_prod_table tbody tr:nth-child(2n - 1) td:nth-child(8):before {padding-top: 7px;}
    /*#prod_manage_panel {padding-right: 20px;}*/
    div.prod_detail_tab ul li { text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;}
    .tab_common_view {padding: 10px;}
}


/* 마이페이지, 주문 조회 */
.mypage_header {
    width: 100%;
    height: 116px;
    padding: 20px 0px;
    background-color: #FAFAFA;
    border-top: 2px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
    vertical-align: middle;
}
.mypage_header_userinfo                 { display: inline-block; vertical-align:middle; }
.mypage_header_userinfo > div           { display: inline-block; }
.mypage_header_userinfo p               { margin: 10px 0px; cursor:pointer;}
.mypage_header_userinfo_point p span:first-child {margin-right: 5px; width:40px; display:inline-block;}
.mypage_header_userinfo_point p span:last-child  {color: #008AFF; padding-left: 30px; padding-right: 5px;}
.mypage_header_userinfo_level strong    { font-size: 20px; }
.mypage_header_userinfo_point           { display: inline-block; min-width: 230px; font-weight:bold; }
.mypage_header_userinfo_level           { display: inline-block; padding-left: 128px; min-width: 320px; }
.mypage_header_userinfo_level           { background: url(../../images/user/mypage/web_searchzone_ic_profile.png) no-repeat; background-position-x: 48px; background-position-y: center; background-size: 60px; }
.mypage_header_menu > div               { display: inline-block; }
.mypage_header_menu > div:nth-child(1)  { margin-left: 60px; }
.mypage_header_menu > div:nth-child(2)  { margin-left: 80px; }
.mypage_header_menu > div:nth-child(3)  { margin-left: 80px; }
.mypage_header_menu                     { display:inline-block; vertical-align:middle;}
.mypage_header_menu_title               { font-size: 15px; font-weight:bold; color:#9D9D9D; }
.mypage_header_menu img                 { margin-left:6px; }
.mypage_header_menu img:nth-child(2)    { margin-left:0px; }
@media(max-width:767px) {
    .mypage_header {
        display:none;
    }
}
@media(max-width:1060px) {
    .mypage_header_userinfo_point {min-width: 160px;}
    .mypage_header_menu > div:nth-child(1), .mypage_header_menu > div:nth-child(2),
    .mypage_header_menu > div:nth-child(3) { margin-left: 30px; }
}
@media(max-width:860px) {
    .mypage_header_menu > div:nth-child(1), .mypage_header_menu > div:nth-child(2),
    .mypage_header_menu > div:nth-child(3) { margin-left: 30px; }
    .mypage_header_menu > div > a > img {width: 50px;}
    .mypage_header_menu_title {font-size: 13px}
    .mypage_header_userinfo_level {min-width: 245px; padding-left: 90px;}
    .mypage_header_userinfo_level {background-position-x: 20px; background-size: 55px;}
}