/*!

__/\\\\\\\\\\\\\\\_______/\\\\\_________/\\\\\\\\\______/\\\________/\\\______/\\\\\\\\\____
 _\/\\\///////////______/\\\///\\\_____/\\\///////\\\___\/\\\_____/\\\//_____/\\\///////\\\__
  _\/\\\_______________/\\\/__\///\\\__\/\\\_____\/\\\___\/\\\__/\\\//_______/\\\______\//\\\_
   _\/\\\\\\\\\\\______/\\\______\//\\\_\/\\\\\\\\\\\/____\/\\\\\\//\\\______\//\\\_____/\\\\\_
    _\/\\\///////______\/\\\_______\/\\\_\/\\\//////\\\____\/\\\//_\//\\\______\///\\\\\\\\/\\\_
     _\/\\\_____________\//\\\______/\\\__\/\\\____\//\\\___\/\\\____\//\\\_______\////////\/\\\_
      _\/\\\______________\///\\\__/\\\____\/\\\_____\//\\\__\/\\\_____\//\\\____/\\________/\\\__
       _\/\\\________________\///\\\\\/_____\/\\\______\//\\\_\/\\\______\//\\\__\//\\\\\\\\\\\/___
        _\///___________________\/////_______\///________\///__\///________\///____\///////////_____

*/

@media (max-width: 1200px) {
    body {
        border: 1px solid red;
    }
    .main .page-inner {
        margin-bottom: 1.875rem  /* 30/16 */;
    }
    .container {
        max-width: 100%;
        width: 100%;
        padding: 0 30px;
    }

    /* gnb */
    #mainMenu .nav-gnb > li > a {
        padding: 0 13px;
    }

    /* Header */
    #mainMenu.menu-creative nav>ul>li.menu-vline {
        margin-left: 1.2rem !important;
    }
    #mainMenu.menu-lines nav>ul>li>a i {
        display: none;
    }

    /* 페이지 제목 */
    .heading-text.heading-section {
        margin-bottom: 50px;
    }
    .heading-text.heading-section .lb {
        display: inline-block;
    }
    .page-main-title {
        padding: 0 0 3rem 0;
    }

    .page-wrap.page-grid-2 {
        flex-direction: column;
    }

    /* page submenu */
    .page-lnb-left {
        display: none;
    }
    .page-lnb-top {
        display: block;
    }
    .page-sub-lnb .page-lnb .lnb-content {
        justify-content: flex-start;
    }
    .page-sub-lnb .page-lnb .lnb-content .swiper-slide:first-child a {
        padding-left: 0;
    }
}

@media (max-width: 1024px) {
    body {
        border: 1px solid yellow;
    }

    .container-small {
        width: 70%;
        max-width: 70%;
    }
    .container-mini {
        width: 56%;
        max-width: 56%;
    }

    /* 페이지 제목 */
    #page-title .page-title .title {
        margin-bottom: 0;
    }

    #page-title[data-bg-parallax] .breadcrumb ul li a {
        font-size: 0.875rem  /* 14/16 */;
    }

    .heading-text.heading-section {
        margin-bottom: 50px;
    }
    .heading-text.heading-section .title {
        font-size: 1.5rem  /* 24/16 */;
    }

    /* Header */
    #header[data-transparent=true]+#page-title {
        padding: 150px 0 60px;
    }

    #header.header-sticky.sticky-active #mainMenuMobile {
        /*display: none;*/
    }

    /* pc gnb */
    #mainMenu {
        display: none !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    /* mobile gnb */
    #mainMenuBg {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
    }

    #mainMenuMobile {
        display: block;
        width: 100%;
        height: 50px;
        padding: 13px 0;
        border: 0;
        border-top: 1px solid var(--color-lightborder);
        border-bottom: 1px solid #e0e0e0;
    }
    #mainMenuMobile .main-menu-mobile {
        position: relative;
        z-index: 10;
        width: 100%;
        /*height: 100vh;*/
    }
    #mainMenuMobile .main-menu-mobile:after {
        content: '';
        position: absolute;
        left: 0;
        top: -10px;
        z-index: 1;
        width: 40px;
        height: 38px;
        background-color: #fff;
        box-shadow: 5px 2px 6px #fff;
    }
    #mainMenuMobile .main-menu-mobile .btn-side-menu {
        position: absolute;
        top: -8px;
        left: 0;
        z-index: 11;
        width: 30px;
        height: 38px;
        border: 0;
        background-color: transparent;
        transition: all 0.2s ease;
    }
    #mainMenuMobile .main-menu-mobile .btn-side-menu span {
        width: 22px;
        height: 2px;
        position: relative;
        display: block;
        background: #000;
        transition: all 0.2s ease;
        animation: motion .5s linear 0s 2 alternate;
    }
    #mainMenuMobile .main-menu-mobile .btn-side-menu span::before, #mainMenuMobile .main-menu-mobile .btn-side-menu span::after {
        height: 2px;
    }
    #mainMenuMobile .main-menu-mobile .btn-side-menu span::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #252525;
        transition: all 0.2s ease;
    }
    #mainMenuMobile .main-menu-mobile .btn-side-menu span::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #252525;
        transition: all 0.2s ease;
    }
    #mainMenuMobile .menu-gnb {
        position: relative;
        width: 100%;
        margin-bottom: 0;
        padding-left: 8%;
        line-height: 1;
        overflow: hidden;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide {
        position: relative;
        width: auto;
        height: 100%;
        padding: 0;
        z-index: 1;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide a {
        position: relative;
        color: #252525;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1;
        padding: 10px 14px;
        transition: all 0.5s;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide a.em::before {
        content: '';
        position: absolute;
        top: 8px;
        right: 7px;
        width: 5px;
        height: 5px;
        background-color: var(--color-red);
        border-radius: 50%;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide:first-child a {
        padding-left: 16px;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide:hover a,
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide.active a,
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide a.active {
        color: var(--color-blue) !important;
    }
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide a:hover:after,
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide.active:after,
    #mainMenuMobile .menu-gnb .gnb-content .swiper-slide a.active:after {
        width: 100%;
        transition: all 0.5s;
    }

    /* 모바일 사이드 메뉴 */
    #mainSideMenu {
        display: block !important;
        position: fixed;
        top: 0;
        left: -476px;
        width: 476px;
        max-width: 476px;
        height: 100%;
        z-index: 100;
        transition: all 0.2s ease;
        overflow-y: scroll;
        background-color: #fff;
        padding: 0 10px;
    }
    #mainSideMenu.on {
        left: 0;
    }
    #mainSideMenu::-webkit-scrollbar {
        width: 1px;
    }
    #mainSideMenu::-webkit-scrollbar-thumb {
        background-color: #e5e5e5;
        border-radius: 0;
        transition: all 0.5s;
    }
    #mainSideMenu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 0;
    }
    #mainSideMenu.on {
        width: 100%;
        left: 0;
    }
    #mainSideMenu .heading {
        padding-top: 20px;
        font-size: 1.067rem  /* 16/15 */;
        font-weight: 600;
        letter-spacing: -1px;
        color: #000;
        border-top: 1px solid var(--color-line);
    }
    #mainSideMenu .side-menu-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #mainSideMenu .side-menu-top .brand-logo {
        margin: 20px 0 30px 3%;
    }
    #mainSideMenu .side-menu-top .brand-logo img {
        width: 12rem  /* 180/15 */;
    }
    #mainSideMenu .side-menu-top .btn-menu-close {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-color: #fff;
        border: 0;
    }
    #mainSideMenu .side-menu-top .btn-menu-close::before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -20px;
        width: 30px;
        height: 1px;
        content: '';
        transform: rotate(-45deg);
        background: #262626;
    }
    #mainSideMenu .side-menu-top .btn-menu-close::after {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -20px;
        width: 30px;
        height: 1px;
        content: '';
        transform: rotate(45deg);
        background: #262626;
    }

    #mainSideMenu .member-menu {
        position: relative;
    }
    #mainSideMenu .member-menu .member-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 20px 0;
        /*border-bottom: 1px solid var(--color-line);*/
        margin: -5px;
    }
    #mainSideMenu .member-menu .member-content .item {
        flex: 0 0 calc(33.333% - 10px);
        margin: 5px;
    }
    #mainSideMenu .member-menu .member-content .item a {
        display: block;
        width: 100%;
        background-color: #fff;
        font-size: 0.9375rem  /* 15/16 */;
        font-weight: 400;
        padding: 5px 15px;
        box-sizing: border-box;
        transition: all .4s ease-out;
        text-align: center;
        border: 1px solid var(--color-border);
        color: var(--color-black);
    }
    #mainSideMenu .member-menu .member-content .item a i {
        padding-right: 6px;
    }
    #mainSideMenu .member-menu .member-content .item .member-login {
        border: 1px solid var(--color-primary);
        color: #fff !important;
        background-color: var(--color-primary);
    }

    #mainSideMenu .main-prd-category {
    }
    #mainSideMenu .prd-category {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: -5px;
    }
    #mainSideMenu .prd-category .item {
        flex: 0 0 calc(50% - 10px);
        margin: 5px;
    }
    #mainSideMenu .prd-category .item a {
        width: 100%;
        display: inline-block;
        font-size: 0.9375rem  /* 15/16 */;
        /*letter-spacing: -1px;*/
        color: var(--color-black);
        background-color: #eaeaea;
        border: 1px solid #eaeaea;
        padding: 10px 10px;
    }
    #mainSideMenu .prd-category .item a:hover, #mainSideMenu .prd-category .item a:focus {
        background-color: #fff;
        border: 1px solid var(--color-border);
    }
    #mainSideMenu .main-cs-category {
        padding-top: 15px;
    }
    #mainSideMenu .main-cs-category .customer-category {
        display: flex;
        margin: -10px;
        padding-bottom: 15px;
        padding-top: 10px;
    }
    #mainSideMenu .main-cs-category .customer-category .item {
        padding: 0 15px;
        flex: 0 0 calc(25% - 5px);
        margin: 5px;
    }
    #mainSideMenu .main-cs-category .customer-category .item a {
        display: flex;
        flex-direction: column;
        gap: 2px 0;
        font-size: 0.8125rem  /* 13/16 */;
        font-weight: 400;
        text-align: center;
    }
    #mainSideMenu .main-cs-category .customer-category .item i {
        font-size: 1.4375rem  /* 23/16 */;
        font-weight: 400;
    }

    /* header search box */
    #hd_sch {
        width: 340px;
        margin-left: 35px;
    }
    #headerUtil #logo img {
        height: 29px;
        max-height: 29px;
    }

    /* page nav */
    .page-menu nav {
        width: 17.5rem  /* 280/16 */;
        border: 1px solid var(--color-border);
    }
    .page-menu nav > ul li a {
        padding: 10px;
    }

    /* button */

    /* footer */
    #footer .footer-copyright .copyright-text {
        font-size: 0.75rem  /* 12/16 */;
    }
    #footer .widget .btn-list {
        gap: 0 5px;
    }
    #footer .widget-address {
        display: block;
        width: 100%;
    }
    #footer .widget-menu {
        display: none;
    }
}

/* mobile */
@media (max-width: 768px) {
    body {
        border: 1px solid blue;
    }
    html, body {
        font-size: 15px;
    }
    .main .page-inner {
        margin-bottom: 2rem  /* 30/15 */;
    }
    .container-box,  .container-line {
        border-radius: 0;
    }
    .container-small {
        width: 80%;
        max-width: 80%;
    }
    .container-mini {
        width: 70%;
        max-width: 70%;
    }

    /* 검색 */
    #hd_sch form {
        justify-content: space-between;
    }
    #hd_sch #sch_stx {
        width: 100%;
    }

    /* heading text */
    .heading-text {
        margin-bottom: 1.5rem;
        line-height: var(--line-height);
    }

    .heading-1, .heading-text h1, .heading-text .h1, #page-title .page-title .title {
        font-size: 1.5rem  /* 22.5/15 */;
        line-height: var(--line-height);
    }
    .heading-2, .heading-text h2, .heading-text .h2  {
        font-size: 1.375rem  /* 20.625/15 */;
        margin-bottom: .5rem;
    }
    .heading-3, .heading-text h3, .heading-text .h3 {
        font-size: 1.25rem  /* 18.75/15 */;
        margin-bottom: .5rem;
        line-height: var(--line-height);
    }
    .heading-4, .heading-text h4, .heading-text .h4 {
        font-size: 1.125rem  /* 16.875/15 */;
        margin-bottom: .5rem;
        line-height: var(--line-height);
    }

    /* form */
    .btn-submit, .btn-primary, .btn-secondary, .btn-action, .btn-outline {
        border-radius: 0 !important;
        font-size: 0.9375rem  /* 15/16 */;
        /*padding: 10px 10px;*/
    }

    .btn, .form-btn, textarea, select, .frm_input, .frm_file, input[type='text'], input[type='password'], button, .bo_sch, .bo_sch .sch_bar, .card, .mng-btn {
        border-radius: 0 !important;
    }
    #captcha #captcha_reload, #captcha #captcha_key, #captcha #captcha_img {
        border-radius: 0 !important;
    }
    .inner-box {
        border-radius: 0;
    }

    /* table */
    .table tbody td {
        padding-left: 0;
        padding-right: 0;
    }
    .table.table-borderless tr:last-child td {
        border-bottom: 0 !important;
    }
    .table.table-borderless > tbody {
        border-top: 0;
        border-bottom: 0;
    }
    .table.table-type-default th, .table.table-type-default td {
        display: block;
        padding: .5rem .9rem !important;
    }
    .table.table-type-default th {
        color: var(--color-dark);
        font-weight: 500;
    }
    .table .td-md, .div-md {
        display: none;
    }
    .table .td-sm, .div-sm {
        display: inline-block;
    }

    /* list */
    .list-group-item {
        padding: 1rem 1rem;
    }
    .list-icon li {
        padding-left: 1.2rem  /* 18/15 */;
        line-height: var(--line-height);
    }
    .list-icon li:before {
        margin-left: -2rem  /* -30/15 */;
        margin-top: 0;
    }

    /* main layout */
    .main {
        padding: 10px 0 30px 0;
    }
    .main.single {
        padding: 30px 0 30px 0;
    }
    .main .page-inner {
        margin-bottom: 30px;
    }

    /* header */
    #header[data-transparent=true] + main {
        top: 100px;
        margin-bottom: 0;
    }
    #header.header-sticky.sticky-active .header-util {
        /*border: 1px solid red !important;*/
        /*display: none;*/
    }
    #header.header-sticky.sticky-active #logo,  #header.header-sticky.sticky-active .mobile {
        display: none;
    }

    /* header util */
    #headerUtil {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 18px 0;
        padding: 10px 0 10px 0;
    }
    #headerUtil #logo {
        float: none !important;
        flex: 0 0 auto;
        width: auto;
        height: 2rem  /* 32/16 */;
    }
    #headerUtil #logo img {
        width: auto;
        height: 1.867rem  /* 28/15 */;
        max-height: 1.867rem  /* 28/15 */;
    }
    #headerUtil .header-search {
        flex: 0;
        width: 100%;
    }
    #headerUtil .header-mypage {
        flex: 0;
        display: none;
    }
    #headerUtil .header-mypage.mobile {
        position: absolute;
        right: 0;
        top: 9px;
        height: auto;
        display: flex;
        gap: 0 20px;
    }
    #headerUtil .header-mypage .item .icon {
        line-height: 1;
        margin-bottom: 0;
        width: auto;
        max-width: 100%;
    }
    #headerUtil .header-mypage .item .count {

    }

    /* header search box */
    #hd_sch {
        padding: 0;
        width: 100%;
        margin-left: 0;
    }
    #hd_sch form {
        display: flex;
        align-items: center;
    }
    #hd_sch #sch_str {
        width: 100%;
        border-radius: 0;
        border: 2px solid var(--color-primary);
        border-right: 0;
    }
    #hd_sch #sch_stx {
        width: 100%;
        border: 2px solid var(--color-primary);
        border-right: 0;
    }
    #hd_sch #sch_submit {
        color: var(--color-primary);
        /*border-radius: 0 10px 10px 0;*/
        border-radius: 0;
        border: 2px solid var(--color-primary);
        border-left: 0;
    }

    /* page menu  */
    .page-sub-lnb {
        position: relative;
    }
    .page-sub-lnb .page-lnb .lnb-content .swiper-slide a {
        padding: 14px 14px;
        /*display: block;*/
    }
    .page-sub-lnb .page-lnb .lnb-content .swiper-slide a:after {
        top: 37px;
    }
    .page-sub-lnb .page-lnb {
        position: relative;
        height: 40px;
        margin-bottom: 30px;
    }

    /* tab menu */
    .nav-tabs .nav-link {
        font-size: 0.875rem  /* 13.125/15 */;
    }

    .empty_table .title {
        font-size: 1rem  /* 15/15 */;
    }

    /* footer */
    #footer .top-nav li {
        padding: 0 8px;
    }
    #footer .footer-content {
        padding: 1.875rem  /* 30/16 */ 0;
    }
    #footer .widget {
        padding-bottom: 30px;
    }
}

@media (max-width: 576px) {
    body {
        border: 1px solid black;
    }
    .container {
        padding: 0 10px;
    }

    .btn {
        min-width: auto;
        /*border: 1px solid red !important;*/
    }
}

@media (max-width: 480px) {
    body {
        border: 1px solid green;
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* 가로 스크롤 차단 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    body::-webkit-scrollbar {
        display: none;
    }

    .container-small {
        width: 100%;
        max-width: 100%;
    }
    .container-mini {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    #mainSideMenu .prd-category .item a {
        font-size: 0.75rem  /* 12/16 */
    }
}