@CHARSET "UTF-8";

@media screen and (max-width: 768px){
    header {
        display: block;
        padding: 10px;
    }
    header ul.right-menu {
        justify-content: center;
        margin-top: 10px;
    }
    main {
        height: calc(100vh - 100px);
    }
    main .main-box,
    .search-wrap .search-box {
        width: 94%;
        left: 3%;
    }
    main .main-box .form-wrap.input-keyword,
    .search-wrap .search-box .form-wrap.input-keyword {
        width: 40%;
        padding: 5px;
        padding-right: 0;
    }
    main .main-box .form-wrap.select-category,
    .search-wrap .search-box .form-wrap.select-category {
        width: 40%;
        padding: 5px;
        padding-left: 10px;
    }
    main .main-box button,
    .search-wrap .search-box button {
        width: 20%;
    }
    main .main-box input,
    .search-wrap .search-box input {
        font-size: 12px;
    }
    main .main-box select,
    .search-wrap .search-box select {
        font-size: 12px;
        text-align: left;
    }
    main .main-box .form-wrap.select-category:after,
    .search-wrap .search-box .form-wrap.select-category:after {
        font-size: 14px;
        right: 5px;
        margin-top: -10px;
    }
    main .favorite-box {
        width: 94%;
        left: 3%;
        top: 40%;
        display: block;
    }
    main .favorite-box p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    main .favorite-box .favorite-button-wrap {
        display: block;
    }
    main .favorite-box .favorite-button-wrap a {
        font-size: 12px;
    }
    section.category h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    section.category {
        padding: 15px;
    }
    section.keyword {
        padding: 15px;
    }
    section.keyword .keyword-wrap {
        display: block;
    }
    section.keyword .keyword-wrap .keyword-title {
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    section.keyword .keyword-wrap .keyword-list {
        padding: 10px 0 0;
        border-left: none;
    }
    section.keyword .keyword-wrap .keyword-list a {
        font-size: 14px;
    }
    .search-wrap .search-box {
        width: calc(100% - 20px);
        margin: 10px 10px 20px;
        left: 0;
    }
    footer {
        padding: 15px;
    }
    footer .footer-map h4 {
        font-size: 16px;
    }
    footer h3.footer-message {
        font-size: 14px;
    }
    section.search-result h4.result-title {
        font-size: 12px;
    }
    section.search-result {
        padding: 0 10px;
    }
    .image-box {
        width: 33.3333%;
    }
    section.cart .cart-wrap .cart-items-wrap p.column-name span:nth-child(1) {
        width: 65%;
    }
    section.cart .cart-wrap .cart-items-wrap p.column-name span:nth-child(2) {
        width: 35%;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-info {
        width: 65%;
        gap: 15px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-price {
        width: 35%;
        text-align: right;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-info .cart-item-image {
        width: 70px;
        height: 100px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-info .cart-item-description p.image-title {
        font-size: 14px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-info .cart-item-description p.image-category {
        font-size: 10px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-info .cart-item-description p.image-tags {
        font-size: 10px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-price p {
        margin-bottom: 10px;
        font-size: 14px;
    }
    section.cart .cart-wrap .cart-items-wrap .cart-items-detail .cart-item-box .cart-item-price button {
        margin-right: 0;
    }
    footer p.signing {
        padding-bottom: 20px;
    }
    footer p.signing a {
        bottom: -5px;
    }
    section.law .law-box table th, section.law .law-box table td {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 480px){
    .image-box {
        width: 50%;
    }
}