#search-box {
    margin: 10px auto 0 auto;
    height: 60px;
    background: #cfcfcf;
    border-radius: 6px;
    max-width: 1200px;
    border: 4px solid #cfcfcf;
}

#txt_search {
    background-color: #f1f1f1;
    border-width: 0;
    box-sizing: border-box;
    color: #125063;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 18px;
    height: 52px;
    line-height: 40px;
    margin: 0;
    padding: 10px;
    width: calc(100% - 100px);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#btn_search {
    color: #ffffff;
    background-color: #020202;
    border-width: 0;
    float: right;
    width: 80px;
    height: 40px;
    font-size: 20px;
    margin: 10px;
    font-weight: bold;
    border-radius: 15px;
}
.btn-search-pt-en{
    font-size:16px !important;
}

.btn-disabled {
    color: #e3e3e3 !important;
    background-color: #bbbbbb !important;
}

.ui-helper-hidden-accessible {
    display:none;
}

.ui-menu {
   width: 333px;
}

.ui-menu-item {
    list-style-type: none;
    margin: 10px -30px;
    font-size: 18px;
}

ul.ui-menu{
    background: #d5d5d5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #125063;
    font-weight: bold;
    z-index: 2;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background:#ffffff;
  width:100%;
  border-radius:4px;
} 

ui-menu-item .ui-menu-item-wrapper:hover {
  background:#ffffff;
  width:100%;
  border-radius:4px;
}

.ui-helper-hidden-accessible div {
    background: #ffffff;
}

.ui-state-active {
     width: 352px !important;
}


#cu_total {
    text-align: center;
    margin: 15px auto;
    font-size: 24px;
    font-weight: bolder;
    color: white;
    background: #0A8A85;
    width: fit-content;
    padding: 10px 25px;
    border-radius: 20px;
    box-shadow: 2px 3px 7px #979797;
}

#logo-panel {
    width: fit-content;
    margin: 30px auto;
    text-align: center;
    height: 120px;
}

.logo_chk {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #ffc10b;
    border-radius: 50px;
    border: 2px solid #f5a54e;
    margin: 90px 0 0 86px;
    text-align: center;
    font-size: 18px;
    color: #264BA1;
    font-weight: bolder;
    z-index: 2;
}

#D_chk {
   margin: 90px 0 0 154px;
}

#Q_chk {
   margin: 90px 0 0 80px;
}

#M_chk {
   margin: 90px 0 0 135px;
}

.logo input {
    height: 90px;
    margin: 10px;
    position:relative;
    z-index: 1;
}

.logo input:hover {
    transform: scale(1.1);
}

#decorate-panel {
    width: 100%;
    height: 100px;
    position: relative;
    top: -100px;
}

#dot_1 {
    top: -20px;
    left: -20px;
    width: 50px;
    height: 50px;
    background: #ffe295;
}


#dot_2 {
    top: 70px;
    left: 100px;
    width: 30px;
    height: 30px;
    background: #b6d2ff;
}

#dot_3 {
    top: -30px;
    left: 210px;
    width: 40px;
    height: 40px;
    background: #043593;0;
}

#dot_4 {
    top: 70px;
    left: 510px;
    width: 26px;
    height: 26px;
    background: #737373;
}

#dot_5 {
    left: 400px;
    width: 30px;
    height: 30px;
    background: #cfc5ad;

}

#dot_6 {
    top: -10px;
    left: 670px;
    width: 35px;
    height: 35px;
    background: #a2d1b5;
}

.dot {
    position: absolute;
    border-radius: 100%;
    z-index: 0;
}

table#dl_class {
    margin: auto;
}

#filter-panel {
    background: #fdffc1;
    width: fit-content;
    margin: auto;
    padding: 10px;
    border-radius: 30px;
}

.filter-class {
    margin: 0 10px;
}

.filter-item {
    background: antiquewhite;
    width: 120px;
    height: 120px;
    text-align: center;
    padding: 20px 10px;
    border-radius: 100%;
    color: #000000;
    font-weight: bold;
}

.filter-item:hover {
    transform: scale(1.05);
    border-radius: 100%;
}

tr td:nth-child(1) div.filter-class .filter-item { 
    background: #5498a7;
    border: 4px solid #c5ffe9;
}

tr td:nth-child(2) div.filter-class .filter-item { 
    background: #40bbbb;
    border: 4px solid #bcfffc;
}

tr td:nth-child(3) div.filter-class .filter-item { 
    background: #65c18e;
    border: 4px solid #63df84;
}

tr td:nth-child(4) div.filter-class .filter-item { 
    background: #368770;
    border: 4px solid #52b59a;
}

tr td:nth-child(5) div.filter-class .filter-item { 
    background: #fcbf49;
    border: 4px solid #ffdd91;
}

tr td:nth-child(6) div.filter-class .filter-item { 
    background: #867128;
    border: 4px solid #e3dd88;
}

.css_pt input#img_btn_cat {
    margin-top: -12px;
}

.filter-class>.css_en:nth-child(1) div{
    font-size: 14px;
}

.filter-cat>.css_pt:nth-child(1) div{
    font-size: 12px;
}

.filter-cat>.css_en:nth-child(1) div{
    font-size: 14px;
}

div.filter-cat .filter-item {
    margin:10px;
}

div.filter-cat .item-cat-1 {
    background: #5498a7;
    border: 4px solid #c5ffe9;
}

div.filter-cat .item-cat-2 {
    background: #40bbbb;
    border: 4px solid #bcfffc;
}

div.filter-cat .item-cat-3 {
    background: #65c18e;
    border: 4px solid #63df84;
}

div.filter-cat .item-cat-4 {
    background: #368770;
    border: 4px solid #52b59a;
}

div.filter-cat .item-cat-5 {
    background: #fcbf49;
    border: 4px solid #ffdd91;
}

div.filter-cat .item-cat-6 {
    background: #867128;
    border: 4px solid #e3dd88;
}

.filter-group-type {
    background: #ffffff;
    border-radius: 15px;
    border: 4px solid #ffb300;
}

table#dl_type {
    width: fit-content;
    margin: auto;
}

.filter-type.item-type {
    margin: 20px 10px;
}

a#lk_btn_type {
    background-color: #fff064;
    border-radius: 6px;
    padding: 10px;
    color: #0e2342;
    font-weight: bolder;
    border: none;
    font-size: 18px;
    width: 150px;
    display: block;
    text-align: center;
}

.css_pt a#lk_btn_type {
    font-size: 14px;
    overflow-wrap: break-word;
    inline-size: 150px;
    height: 80px;
    white-space: normal;
}

.css_en a#lk_btn_type {
    font-size: 14px;
    overflow-wrap: break-word;
    inline-size: 150px;
    height: 80px;
    white-space: normal;
}

table.GridShop {
    width:100% !important; 
}

table.GridShop th {
    font-size:18px;
    padding:4px;
}

.type-desc {
    font-size: 16px;
}


.sel-cat {
    border:4px solid #fdc92f !important;
}

.sel-type {
    border:4px solid #fdc92f !important;
    border-radius: 10px;
}


#list_count {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #616161;
    margin: 4px 0;
    padding: 4px 8px;
    width: fit-content;
    border-radius: 10px;
}

.ShopName a{
    font-weight:bold;
    color: #004b81 !important;
}

.ShopName a:hover{
    color: #ffc02b !important;
}


.fadeInLeft {
    animation: fadein_left 2s;
}

.fadeInRight {
    animation: fadein_right 2s;
}

.fadeInTop {
    animation: fadein_top 2s;
}

.fadeInBottom {
    animation: fadein_bottom 2s;
}

@keyframes fadein_left {
    0% {
        opacity: 0;
        transform: translate3d(-1500px, 0, 0);
    }

    60% {
        opacity: 0.3;
        transform: translate3d(0, 0, 0);
    }

    75% {
        opacity: 0.6;
        transform: translate3d(0, 0, 0);
    }

    90% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}


@keyframes fadein_right {
    0% {
        opacity: 0;
        transform: translate3d(1500px, 0, 0);
    }

    60% {
        opacity: 0.3;
        transform: translate3d(0, 0, 0);
    }

    75% {
        opacity: 0.6;
        transform: translate3d(0, 0, 0);
    }

    90% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadein_top {
    0% {
        opacity: 0;
        transform: translate3d(0, -800px, 0);
    }

    60% {
        opacity: 0.3;
        transform: translate3d(0, 0, 0);
    }

    75% {
        opacity: 0.6;
        transform: translate3d(0, 0, 0);
    }

    90% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadein_bottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    60% {
        opacity: 0.3;
        transform: translate3d(0, 0, 0);
    }

    75% {
        opacity: 0.6;
        transform: translate3d(0, 0, 0);
    }

    90% {
        opacity: 0.9;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}


@media only screen and (max-width: 650px) {
    #content {
        padding-top: 120px;
    }

    #cu_total {
        font-size: 20px;
    }

    #logo-panel {
        margin: auto;
        height: 200px;
        z-index: 0;
        position: relative;
    }

    .logo input {
        width: 90px;
        height: 80px;
    }

    #decorate-panel {
        top: -190px;
        z-index: 0;
    }

    #dot_4 {
        left: 310px;
    }

    #dot_5 {
        left: 360px;
    }

    #dot_6 {
        top: -24px;
        left: 316px;
    }
    #D_chk {
        margin: unset;
        margin-left:80px;
        bottom: -2px;
    }
    #M_chk {
        margin: unset;
        margin-left: 80px;
        bottom: -2px;
    }

    #filter-panel {
        padding: 4px;
    }

    .filter-class {
        margin: 1px;
    }

    .filter-item {
        width: unset;
        height: unset;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .filter-item.item-class.css_pt {
        height: 100px;
        font-size: 12px;
        overflow-wrap: break-word;
        height: 100px;
        width: 58px;
    }

    .filter-item.item-class.css_en {
        height: 100px;
        overflow-wrap: break-word;
        height: 100px;
        width: 57px;
    }

    .filter-item.item-class.css_en > div {
        font-size: 12px !important;
    }

    .filter-item.item-cat.item-cat-1.css_pt {
        font-size: 12px;
        overflow-wrap: break-word;
        height: 130px;
        width: 74px;
        padding-top: 20px;
        margin: unset;
    }

    .filter-item.item-cat.item-cat-1.css_en {
        font-size: 12px;
        overflow-wrap: break-word;
        height: 130px;
        width: 74px;
        padding-top: 20px;
        margin: unset;
    }
        
    .filter-item.item-cat {
        overflow-wrap: break-word;
        height: 130px;
        width: 74px;
        padding-top: 20px;
        margin: unset !important;
    }

    .filter-cat > div {
        font-size: 12px !important;
    }

    .filter-type.item-type {
        margin: 2px; 
    }

    .css_pt a#lk_btn_type {
        font-size: 12px;
        overflow-wrap: break-word;
        inline-size: 66px;
    }

    a#lk_btn_type {
        width: unset;
        min-height: 100px;
    }

    table.GridShop td {
        width: 1px !important;
    }
}