@charset "utf-8";

/* ==========================================================================
    Searchbar
   ========================================================================== */
.searchbar01 {
    display: flex;
    width: 100%; max-width: 460px; height: 42px;
    background-color: #eee;
    border-radius: 30px;
    overflow: hidden;
    input[type="text"]{flex: 1; height: 100%; font-size: 16px; font-weight: bold; color: var(--basic-color); padding: 0 10px 0 40px; border:0; background: #eee url('/assets/site/img/common/ico-search02.png') no-repeat 18px center / 16px auto;}
    input[type="text"]::placeholder{font-weight: bold; color: rgba(34,34,34,.3);}
    .btn-search{display: flex; align-items: center; font-size: 12px; font-weight: bold; color: var(--basic-color); padding: 0 21px 0 10px; background-color: #eee; text-transform: uppercase;}
    &.white-search {
        display: inline-flex;
        height: 58px;
        input[type="text"]{padding: 0 15px 0 54px; background: #fff url('/assets/site/img/common/ico-search01.png') no-repeat 22px center / 20px auto;}
        .btn-search{font-size: 14px;padding: 0 25px 0 10px;  background-color: #fff;}
    }
    @media (width <= 640px) {
        input[type="text"]{font-size: 15px;}
    }
}

/* ==========================================================================
   PAGING
   ========================================================================== */
.paging {
    display: flex; justify-content: center;
    padding-bottom: 20px;
    user-select: none;
    > ul {display: flex; align-items: center; gap: 4px;}
    .page-item a,
    .page-prev a, .page-next a{display: flex; justify-content: center; align-items: center; width: 36px; aspect-ratio: 1 / 1;}
    .page-first a, .page-last a{display: flex; justify-content: center; align-items: center; width: 24px; aspect-ratio: 1 / 1;}
    .page-item a{font-size: 18px; font-weight: bold; color: #bbb; text-decoration: none;}
    .page-item a:hover{color: var(--point-color02);}
    .page-item a.active{color: var(--basic-color);}
    .page-prev{margin-right: 4px;}
    .page-next{margin-left: 4px;}
    .page-prev img, .page-next img{position: relative; top: 1px; width: 17px;}
    .page-first{margin-right: 0;}
    .page-last{margin-left: 0;}
    .page-first img, .page-last img{position: relative; top: 1px; width: 14px;}
}

/*  ==========================================================================
    Accordion
   ========================================================================== */


/* ==========================================================================
    Tab
   ========================================================================== */

/* ==========================================================================
    Modal
   ========================================================================== */


/* ==========================================================================
    Tooltip
   ========================================================================== */


/* ==========================================================================
    Loader
   ========================================================================== */
#loader{position: fixed; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 10000; visibility: visible; opacity: 1; transition: .3s ease-in-out;}
#loader.load{visibility: hidden; opacity: 0;}
.lds-ellipsis{display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div{position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--point-color01); animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1){left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2){left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3){left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4){left: 56px; animation: lds-ellipsis3 0.6s infinite;}