:root {
    --main-color: #55504C;
    --sub-color: #EEECE0;
    --bg-color: #F9F9F9;
    --black-color: #1A1A1A;
    --sub-txt-color-01: #555555;
    --sub-txt-color-02: #777777;
    --sub-txt-color-03: #999999;
    --border-color: #EEEEEE;
    --red-color: #cf3a3a;
}

@media screen and (max-width: 1520px) {
    .wrap {
        padding: 0 16px;
    }
    .header-wrap .tp {
        padding: 0 16px;
    }
    .gnb-area {
        padding: 0 16px;
    }
    /*메인*/
    .ad-banner .txt {
        padding: 0 16px;
    }
}
@media screen and (max-width: 1280px) {
    /*header*/

    /*main*/
    .main-banner .txt p:first-child {
        font-size: 42px;
    }
    .main-banner .txt p:last-child {
        font-size: 16px;
    }
    /*paes*/
    .sub-banner .txt {
        font-size: 42px;
    }
}
@media screen and (max-width: 1024px) {
    /*header*/
    .ham {
        display: block;
    }
    .header-wrap {
        height: 80px;
        background-color: var(--main-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }
    .container {
        width: 100%;
        height: calc(100vh - 80px);
        position: fixed;
        top: 80px;
        left: 0;
        overflow: hidden;
        overflow-y: auto;
        padding: 16px 16px 50px;
        background-color: var(--black-color);
        display: none;
    }
    .mbg {
        border-radius: 3px;
    }
    .header-wrap .tp {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }
    .gnb-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 16px 0;
    }
    .gnb-area > ul {
        width: 100%;
        flex-direction: column;
        gap: 16px;
    }
    .gnb-area > ul:first-child {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    .gnb-area > ul > li > a {
        padding: 0;
    }
    .gnb-area > ul > li > a img {
        display: none;
    }
    .gnb-sub {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: transparent;
        padding: 12px 0;
    }
    .gnb-sub li a {
        color: #bbb;
    }
    .logo {
        width: 150px;
    }
    .header-wrap .logo {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
    }
    .header-search {
        width: 100%;
    }
    .header-search input {
        width: 100%;
    }
    .user-btn {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    .user-btn a, .user-btn div {
        font-size: 12px;
    }
    /*footer*/
    .footer-wrap {
        flex-direction: column;
    }
    .footer-wrap .lt {
        width: 100%;
        align-items: center;
    }
    .footer-wrap .lt .hd {
        align-items: center;
    }
    .footer-wrap .lt .hd .info {
        justify-content: center;
    }
    .footer-wrap .lt .bt {
        width: 100%;
        align-items: center;
    }
    .footer-wrap .rt {
        width: 100%;
        align-items: center;
        gap: 16px;
    }
    .footer-wrap .rt .hd {
        width: 100%;
        align-items: center;
    }
    .footer-wrap .rt .hd .fnb {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-wrap .lt .bt a {
        font-size: 24px;
    }
    /*main*/
    .main-banner .txt p:first-child {
        font-size: 36px;
    }
    .main-area {
        gap: 100px;
        padding: 100px 0 0;
    }
    /*pages*/
    .sub-banner {
        height: 450px;
    }
    .sub-banner .txt {
        font-size: 36px;
        padding-top: 40px;
    }
    .page-area {
        padding: 100px 0;
    }
    .product .page-tit {
        font-size: 28px;
        margin-bottom: 24px;
    }
    .product-list .item .txt .bt .price {
        font-size: 20px;
    }
    .product-tp {
        gap: 24px;
    }
    .product-tp .lt {
        width: 350px;
    }
    .product-tp .rt {
        gap: 24px;
    }
    .product-tp .rt .rt-tit {
        gap: 12px;
    }
    .product-tp .rt .rt-tit p:first-child {
        font-size: 20px;
    }
    .product-tp .rt .rt-tit p:nth-child(2) {
        font-size: 14px;
    }
    .basic-area {
        padding: 150px 0 100px;
    }
    .basic-tit {
        font-size: 36px;
    }
    .order-dashboard {
        margin-top: 24px;
        gap: 24px;
    }
    .product-bt .tab-menu {
        top: 80px;
    }
    .page-category a {
        font-size: 16px;
        padding-bottom: 12px;
    }
    .list-total {
        font-size: 14px;
    }
    .photo-list .item .txt {
        padding: 16px 12px;
    }
    .photo-list .item .txt .tit {
        font-size: 16px;
    }
    .photo-list .item .txt .info {
        margin-bottom: 16px;
    }
    .board table th, .board table td {
        padding: 12px;
    }
    .reply-box {
        padding: 16px;
    }
    .reply-box .tp {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .reply-box .tp span {
        font-size: 14px;
    }
    .reply-box .bt span {
        font-size: 14px;
    }
    .step-area {
        gap: 24px;
    }
    .step-area .item {
        padding: 24px;
        gap: 12px;
    }
    .step-area .item p:first-child {
        font-size: 16px;
    }
    .link-area .item {
        padding: 24px;
    }
    .link-area .item > p {
        font-size: 16px;
    }
    .link-area .item > img {
        height: 25px;
    }
    .link-area .item .box-flex .box {
        padding: 16px;
    }
    .tit-area .tit-box .info {
        gap: 8px 16px;
    }
    .board .status {
        font-size: 12px;
    }
    .tit-area .tool a img, .tit-area .tool button img {
        width: 20px;
        min-width: 20px;
    }
    .btn-wrap.gap {
        justify-content: center;
    }
}
@media screen and (max-width: 840px) {
    .btn {
        max-width: 150px;
    }
    /*modal*/
    .modal .modal-box {
        max-width: calc(100% - 32px);
    }
    /*main*/
    .main-banner .txt p:first-child {
        font-size: 28px;
    }
    .main-banner .txt p:last-child {
        font-size: 14px;
    }
    .main-area .box .wrap > p {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        font-size: 14px;
    }
    .main-area .box .wrap > p b {
        font-size: 28px;
        margin-right: 0;
    }
    .product-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 16px;
    }
    .ad-banner {
        height: 350px;
    }
    .ad-banner .txt p:first-child {
        font-size: 28px;
    }
    .ad-banner .txt p:last-child {
        font-size: 14px;
    }
    .product-tp {
        flex-direction: column;
    }
    .product-tp .lt {
        width: 100%;
    }
    .sub-banner .txt {
        font-size: 28px;
    }
    .basic-tit {
        font-size: 28px;
    }
    .basic-tit::after {
        width: 48px;
    }
    .board table th, .board table td {
        padding: 16px 8px;
    }
    .faq-list > li .tit-box {
        padding: 16px;
    }
    .faq-list > li .tit-box .box {
        font-size: 14px;
    }
    .faq-list > li .toggle-content {
        font-size: 14px;
        padding: 16px;
    }
    .support-list > li .tit-box {
        padding: 16px 0;
    }
    .support-list > li .toggle-content {
        padding: 16px;
    }
    .mypage-tab button, .mypage-tab a {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
    }
    .terms-expl {
        padding: 16px 16px 16px 36px;
    }
    .order-table {
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
    .order-table table th .order-type img {
        display: none;
    }
    .ballon {
        display: none !important;
    }
    .order-dashboard {
        flex-direction: column;
    }
    .order-dashboard .lt {
        width: 100%;
    }
    .order-dashboard .rt {
        width: 100%;
    }
    .simple-info .item {
        padding: 16px;
    }
    .simple-info .item span {
        font-size: 14px;
    }
    .tit-area {
        flex-direction: column;
        align-items: flex-start;
    }
    .photo-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 16px;
    }
    .step-area .item {
        padding: 16px;
    }
    .link-area {
        flex-direction: column;
    }
    .product .page-tit {
        font-size: 20px;
    }
    .file-box .item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 16px;
    }
    .file-box .item img {
        width: 24px;
    }
}
@media screen and (max-width: 480px) {
    /*main*/
    .main-banner .txt p:first-child {
        font-size: 24px;
        word-break: keep-all;
    }
    .product-list {
        grid-template-columns: repeat(1, 1fr);
    }
    .ad-banner .txt p:first-child {
        font-size: 24px;
        text-align: center;
    }
    .ad-banner .txt p:last-child {
        text-align: center;
        word-break: keep-all;
    }
    /*pages*/
    .basic-tit {
        font-size: 24px;
    }
    .product .category {
        grid-template-columns: repeat(2, 1fr);
        padding: 8px 0;
    }
    .product .category a {
        padding: 8px;
    }
    .product .category a:not(:last-child) {
        border-right: none;
    }
    .product .filter {
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
    .rt-cnt {
        padding: 16px;
    }
    .review-list li {
        flex-direction: column;
        gap: 8px;
    }
    .support-list > li .tit-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .star-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .board table th.hits, .board table td.hits, .board table th.writer, .board table td.writer {
        display: none;
    }
    .support-list > li .tit-box .lt {
        flex-direction: column;
        align-items: flex-start;
    }
    .coupon {
        grid-template-columns: repeat(1, 1fr);
    }
    .simple-info {
        grid-template-columns: repeat(1, 1fr);
    }
    .simple-info .item {
        flex-direction: column;
        gap: 8px;
        margin-left: 0;
        margin-top: -1px;
    }
    .order-dashboard .item .cont .box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .order-dashboard .item .cont .box.center {
        align-items: flex-start;
    }
    .coupon-list {
        width: calc(100vw - 32px);
        min-width: 100%;
    }
    .coupon-list table td {
        word-break: keep-all;
        vertical-align: middle;
    }
    .faq-list > li .tit-box .box {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .faq-list > li .tit-box .que {
        font-size: 12px;
    }
    .photo-list {
        grid-template-columns: repeat(1, 1fr);
    }
    .step-area .item p.sub {
        padding-left: 16px;
    }
    .link-area .item {
        padding: 24px 16px;
    }
}