@charset "utf-8";


.search_area {padding:35px 0 31px;display:flex;justify-content: center;align-items: center;background-color:#F6F6F6;margin-bottom:40px;}

.btn_wrap + .total_count_wrap {margin-top:80px;}

.total_count_wrap {display:flex;align-items: center; justify-content: space-between; margin-bottom:10px;font-size:18px;color:#888;}
.total_count_wrap > div {font-size:18px;color:#888;}

.total_count_wrap > div .color_type01 {font-size:18px;color:#E60000;font-weight:500;}

.total_count_wrap.right_type {justify-content: right;}
.total_count_wrap .btn_type_wrap {display:flex;align-items: center;}
.total_count_wrap .btn_type_wrap li {position:relative;margin-left:10px;padding-left:10px;}
.total_count_wrap .btn_type_wrap li::before {content:"";position:absolute;top:50%;left:0;width:2px;height:12px;background-color:#888;transform:translateY(-50%);}
.total_count_wrap .btn_type_wrap li:first-child {margin-left:0;padding-left:0;}
.total_count_wrap .btn_type_wrap li:first-child::before {display:none;}
.total_count_wrap .btn_type_wrap li a {display:inline-block;font-size:18px;color:#888;font-weight:var(--font-weight-500);}
.total_count_wrap .btn_type_wrap li a.active {color:var(--main-color-02);font-weight:var(--font-weight-600);}

.total_count_wrap #total-count {font-size:18px;color:#000;font-weight:var(--font-weight-600);padding-left:5px;}
.total_count_wrap > div.btn_area {display:flex;align-items: center;gap:10px;}

.total_count_wrap .point-count {font-size:18px;font-weight:var(--font-weight-600); color:#E60000;}

.total_count_wrap button {border-radius:5px;border:1px solid var(--main-color-01);background-color:#f3f7fb;font-size:18px;padding:6px 20px;color:var(--main-color-01);font-weight:var(--font-weight-600);}
.total_count_wrap button.type02 {border:1px solid var(--main-color-01);background-color:var(--main-color-01);color:#fff;}

.total_count_wrap > div.right_area {display:flex;align-items: center;gap:10px;}
.total_count_wrap > div.right_area select,
.total_count_wrap > div.right_area input {height:36px;min-width:150px;}

.total_count_wrap button.btn_scrap {
    margin-top: 0;
    height: 40px;
    font-size: 18px;
    color: #222;
    font-weight: var(--font-weight-600);
    border: 1px solid #ddd;
    border-radius: 5px;
    background:#fff;
    cursor:pointer;
}

.top_right_area {display:flex;justify-content: end; align-items:center;gap:10px;margin-top:50px;}
.top_right_area > div {font-size:18px;color:#666;}
.top_right_area > div span {color:var(--main-color-02);font-weight:var(--font-weight-600);font-size:18px;}

.detail_wrap .top_right_area2 {width:100%;display:flex;justify-content: end; align-items:center;gap:10px;padding-top:20px;}
.detail_wrap .top_right_area2 > div {font-size:18px;color:#666;}

.btn_scrap {display:inline-flex; align-items:center; margin-top:30px;height:36px;font-size:18px;color:#222;font-weight:var(--font-weight-600);padding:4px 20px 4px 20px;border:1px solid #ddd;border-radius:5px; gap:0px 5px; cursor:pointer;}
.btn_scrap::Before{content:""; width:18px; height:16px; background:url("../images/main/favorite.svg")center center no-repeat; background-size:100%; transition-duration:0.1s;}
.btn_scrap.on::Before{background:url("../images/main/favorite_on.svg")center center no-repeat; background-size:100%;}

.search_wrap {display:flex;align-self: center;gap:10px;}
.search_wrap.flex_between{width:100%; justify-content: center; padding:0px 15px;}
.search_wrap.flex_between input{margin-left:auto;}
.search_wrap select {width:290px;position:relative;color:#888;font-weight:var(--font-weight-500);border-radius:2px;font-size:18px;border:1px solid #c9c9c9; padding:0 20px;height:44px;background:#fff url("../images/common/bull_select_arrow.svg") right 10px center no-repeat;}
.search_wrap input {width: 425px;color:#111;font-weight:var(--font-weight-500);border-radius:2px;font-size:18px;height: 44px;padding: 0 20px;border: 1px solid #c9c9c9;background-color:#fff; cursor:text;}
.search_wrap input::placeholder {color:#888;}
.search_wrap button {height:44px;flex-shrink: 0; width:112px;border-radius:3px;background:#4f4e4d url("../images/common/btn_seach.png") 25px center no-repeat;color:#fff;font-size:18px;font-weight:var(--font-weight-600);padding:0 30px 0 50px; white-space:nowrap;}

.search_area2 {padding:35px 60px 31px;display:flex;gap:20px;justify-content: space-between;align-items: center;flex-wrap: wrap; background-color:#F6F6F6;margin-bottom:40px;}
.search_area2 > div {display:flex;align-items: center;gap:12px;}
.search_area2 select {width:290px;position:relative;color:#888;font-weight:var(--font-weight-500);border-radius:2px;font-size:18px;border:1px solid #c9c9c9; padding:0 20px;height:44px;background:#fff url("../images/common/bull_select_arrow.svg") right 10px center no-repeat;}
.search_area2 input {width: 425px;color:#111;font-weight:var(--font-weight-500);border-radius:2px;font-size:18px;height: 44px;padding: 0 20px;border: 1px solid #c9c9c9;background-color:#fff;}
.search_area2 input::placeholder {color:#888;}
.search_area2 label {font-size:18px;color:#888;font-weight:var(--font-weight-500);}
.search_area2 button {height:44px;flex-shrink: 0; width:112px;border-radius:3px;background:#4f4e4d url("../images/common/btn_seach.png") 25px center no-repeat;color:#fff;font-size:18px;font-weight:var(--font-weight-600);padding:0 30px 0 50px;}
.search_area2 select.small {width:200px;}

.board_btn_area {display:flex;justify-content: right;margin-top:15px;}
.board_btn_area button {border:1px solid #ddd;color:#666;font-size:13px;padding:5px 10px;border-radius:5px;}
.board_btn_area button + button {margin-left:5px;}
.paging_wrap ul { display: flex; justify-content: center; gap: 0 12px; margin-top: 20px; } 
.paging_wrap ul li a { display: flex; justify-content: center; align-items: center; line-height: 1; width: 35px; height: 35px; font-size: 18px; line-height: 35px; border: 1px solid #bbb; color: #555; border-radius: 2px;font-weight:var(--font-weight-400); } 
.paging_wrap ul li a.on { border: 1px solid var(--main-color-01); background:var(--main-color-01); color: #Fff; font-weight:var(--font-weight-600); } 
.paging_wrap ul li a.disabled {background-color:#eeeeee;border:1px solid #bbb;}

.no_data {padding:100px 0;text-align: center;}

.tb_top_btn_wrap {margin-bottom:20px; display:flex; align-items: center; justify-content: end;}
.tb_top_btn_wrap button {background-color:#f3f7fb; border-radius:5px;border:1px solid #1264BA;padding:5px 20px;color:#1264BA;font-weight:var(--font-weight-600); }

@media screen and (max-width: 1024px) {
    .search_area {margin-bottom:20px;padding:15px;}
    .search_wrap select {width:200px;height:34px;}
    .search_wrap input {width:300px;height:34px;}
    .search_wrap button{height:34px;}
    .search_wrap.flex_between{padding:0px;}
}

@media screen and (max-width: 768px) {
    .search_wrap select {width:100%;font-size:14px;padding:0 10px;}
    .search_wrap input {width:100%;font-size:14px;padding:0 10px;}
    .search_wrap {flex-direction: column;width:100%;gap:5px;}
    .search_wrap button {padding:5px 20px 5px 30px;width:100%;background-position: 13px center;font-size:14px;height:34px;}
    .total_count_wrap {font-size:16px;margin-bottom:5px;}
    .total_count_wrap #total-count {font-size:14px;}

    .paging_wrap ul {gap:0 6px;margin-top:12px;}
    .paging_wrap ul li a {width:24px;height:24px;font-size:14px;}
    .paging_wrap ul li a img {width:auto;height:10px;}
    .total_count_wrap > div,.total_count_wrap .btn_type_wrap li a {font-size:14px;}
    .total_count_wrap > div.btn_area {gap:5px;}
    .total_count_wrap > div.btn_area button{height:40px;}
    .total_count_wrap button {font-size:14px;min-width:0px; height:24px; border-radius:3px; padding:0px 13px;}
    .search_area2 {padding:20px;gap:10px;}
    .search_area2 label {font-size:16px;}
    .search_area2 select {width:100%;max-width:100%;height:34px;font-size:16px;padding:0 10px;}
    .search_area2 input {width:100%;max-width:100%;font-size:16px;height:34px;padding:0 10px;}
    .search_area2 > div {flex-direction: column;align-items: start; width:100%;gap:5px;}
    .search_area2 button {padding:5px 20px 5px 30px;width:100%;background-position: 13px center;font-size:14px;height:34px;}
    .btn_scrap {font-size:14px;margin-top:10px;height:30px;padding:4px 10px 4px 10px;background-position-x: 8px;}

    .top_right_area {margin-top:20px;}
    .top_right_area > div {font-size:14px;}
    .top_right_area > div span {font-size:14px;}

    .total_count_wrap > div.right_area select, .total_count_wrap > div.right_area input {height:24px;min-width:80px; font-size:14px;}
    .total_count_wrap button.btn_scrap {font-size:14px; padding:6px 10px 6px 10px; }

    .total_count_wrap select {
        width:auto;
        min-width:auto;
    }
    .total_count_wrap > div .color_type01 {font-size:14px;}
}