@charset 'utf-8';

:root {
    --w-width :1200px;
    
}

body {background-color:var(--bs-gray-100)}
body.fixed {overflow:hidden}



.area {width:var(--w-width); margin:0 auto}
.area h3 span {font-size:16px}

.swiper-scrollbar-drag {background:var(--bs-white,rgba(0,0,0,.5))}
.swiper-scrollbar {width:calc(100% - 140px) !important}
.swiper-button-next, .swiper-button-prev {color:var(--bs-white)}
.swiper-button-prev:after, .swiper-button-next:after {font-size:30px}

#lbt-headertop > *:not(#lbt-close_lightbox) {display:none}
#lbt_next, #lbt_previous {background-color: transparent; width:60px;}
#lbt_next {padding-right:25px; padding-left:0}



.btn-theme {background-color:var(--bs-theme); color:var(--bs-white)}
.btn-theme:hover {background-color:var(--bs-theme-active); color:var(--bs-white)}

.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"] {--bs-form-check-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23e63895' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>"); background-color:var(--bs-white); border-color:var(--bs-theme)}

.price {position:relative; padding-right:30px; text-align:right; min-height:20px; font-size:15px}
.price:after {content:'\b9cc\c6d0'; position:absolute; right:0}


.link {text-decoration:none}
.link:hover {text-decoration:underline}

.chk_box {background-color:var(--bs-white); padding:15px 30px; border:1px solid var(--bs-border-color); cursor:pointer}
input[type='checkbox']:checked + label {border-color:var(--bs-secondary); background-color:var(--bs-secondary); color:var(--bs-white)}

.gall {width:calc(100% + 20px); margin-left:-20px; display:inline-block}
.gall li {margin:20px 0 0 20px; width:calc(33.33% - 20px); height:410px; float:left; overflow:hidden}
.gall li a {width:100%}
.gall li .img {height:190px; overflow:hidden}
.gall li .img img {transition:transform .2s cubic-bezier(.165,.84,.44,1)}

.gall li a:hover img{transform:scale(1.05)}
.gall .info {height:120px; padding:10px}
.gall .info strong {font-size:20px; height:40px; padding:5px 0; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gall .info p > span {position:relative; padding:0 10px; font-size:15px}
.gall .info p > span:first-child {padding-left:0}
.gall .info p > span:first-child:after {content:'\007c'; position:absolute; right:-3px}



header {width:100%; height:70px; background-color:var(--bs-white); transition:width 0.15s ease-out; box-shadow:rgba(0, 0, 0, 0.35) 0px 0px 5px; z-index:99}
header .gnb {height:70px}
header .gnb ul {float:right}
header .gnb ul li{float:left}
header .gnb ul li a {padding:0 25px; line-height:70px; font-weight:bold}
header .gnb .btn_login,
header .gnb .btn_logout {background-color:var(--bs-gray-200)}
header .gnb .btn_logout {display:none}

header .filter {height:50px; text-align:right; background-color:var(--bs-white); border-width:1px 0; border-style:solid; border-color:var(--bs-border-color); display:none}
header .filter .btn {font-size:20px}

header .navbar-toggler {width:70px; height:70px; background-color:var(--bs-theme); float:right; padding:0; display:none}
header .navbar-toggler i {font-size:20px; color:var(--bs-white)}

header .p_logo {width:200px; padding:22px 0 0 30px}
header .m_logo {width:60px; display:none}
header .menu {line-height:37px; float:right}
header .menu li {display:inline-block; width:auto; padding:0 15px}
header .menu a:hover {color:var(--bs-primary);font-weight:bold}
header .menu a.active {font-weight:bold}
header .last {float:right; display:inline-block}
header .last a {display:inline-block}
header .last a:not(.btn_bell, .btn_login, .btn_admin, .btn):before{content:'\007c'; padding:0 10px}
header .last a:not(.btn) {line-height:37px}
header .last a.btn_bell {width:30px; height:30px; line-height:30px; border-radius:50%; text-align:center; background-color:var(--bs-gray-200); margin:5px 13px 0 0; position:relative}
header .last a.btn_bell .cnt {position:absolute; min-width:17px; height:17px; line-height:8px; font-size:10px; right:-7px; bottom:-3px; padding:5px; border-radius:50%; background-color:var(--bs-danger); color:var(--bs-white)}
header .last a.btn_admin {display:none}





header.fix{ position:fixed; left:0 !important; top:0 !important; width:100% !important}





.navbar {padding:0; position:fixed; left:0; top:70px; width:100%; background-color:var(--bs-white); z-index:99}
.navbar .navbar-collapse {padding:15px}
.navbar .navbar-vertical-content {height:calc(100vh - 165px)}


.wrap {display:inline-block; width:100%}

.wrap aside {width:350px; min-height:600px; padding:0 30px; display:inline-block; float:left}
.wrap aside > div {width:290px; position:fixed; top:120px}
.wrap aside .search {position:relative}
.wrap aside .search input{padding-right:40px}
.wrap aside .search button {position:absolute; right:10px; top:10px; background-color:transparent}
.wrap aside .btn-theme {margin-top:170px}

.wrap aside + .area {width:calc(100% - 390px); margin:0 20px; display:inline-block}





.mudi_001 header {width:var(--w-width); position:fixed; left:calc(50% - var(--w-width)/2); top:30px; z-index:99}
.mudi_001 header + .wrap {padding-top:0}
.mudi_001 .swiper_main .area {position:absolute; left:calc(50% - var(--w-width)/2); width:var(--w-width); color:var(--bs-white)}
.mudi_001 .swiper_main .swiper-slide .area {bottom:150px}
.mudi_001 .swiper_main .swiper-slide .area > * {text-shadow:3px 4px 5px #000}
.mudi_001 .swiper_main .swiper-slide .area a {padding-top:40px; font-size:18px}
.mudi_001 .swiper_main .swiper-slide .area a span{float:right}
.mudi_001 .swiper_main > .area {bottom:30px}
.mudi_001 .swiper_main .swiper-button-prev {right:50px; left:unset}
.mudi_001 .swiper_main .swiper-button-next {right:0; left:unset}
.mudi_001 .area > .tit {padding:100px 0 10px}
.mudi_001 .tit {display:inline-block; width:100%}
.mudi_001 .tit h3 {float:left; margin-bottom:0}
.mudi_001 .tit a {float:right; margin-top:8px}
.mudi_001 .tit a span {float:right; font-size:18px}
.mudi_001 .btn_more {margin:50px auto; width:150px; height:45px; line-height:28px}
.mudi_001 .btn_more:not(:hover) {background-color:var(--bs-white)}


.mudi_003 .wrap {padding-left:30px; padding-right:30px}
.mudi_003 .info {background-color:var(--bs-white); padding:30px; display:inline-block; width:100%}
.mudi_003 .info > div{padding-bottom:15px}
.mudi_003 .info > div:not(.w-100) {width:50%; float:left}
.mudi_003 .info > div span {font-size:15px}
.mudi_003 .info > div span:first-child {color:var(--bs-secondary); min-width:60px; display:inline-block}
.mudi_003 .info > div span:last-child {font-size:15px; padding-left:15px; font-weight:bold}

.mudi_004 .cont {width:980px; margin:0 auto}
.mudi_004 .btn_zip {width:40px; height:40px; line-height:40px}

.mudi_023 {width:1000px; margin:20px auto 0}
.mudi_023 .th_tit {line-height:50px; font-size:18px}
.mudi_023 .table thead th + th,
.mudi_023 .table tbody td + td {border-left:1px solid var(--bs-border-color)}
.mudi_025 .table tbody th:first-child {border-right:1px solid var(--bs-border-color)}


@supports (-webkit-appearance: none) {
  .mudi_023 table {
    border-collapse: separate; /* Safari에서만 적용 */
  }
}



@media (max-width: 1200px) {

    header,
    .mudi_001 header {width:100%}
    header:not(.fix),
    .mudi_001 header:not(.fix) { position:unset}
    header .gnb ul {display:none}
    header .navbar-toggler {display:block}
    header .p_logo {display:none}
    header .m_logo {margin:15px; float:left; display:block}
    header .filter {display:block}

    

    header + .wrap {padding-top:0px}
    .area {width:100% !important; padding:0 20px}

    .wrap aside {width:100%; height:calc(100vh - 120px); position:fixed; top:120px; background-color:var(--bs-white); z-index:9; display:none}
    .wrap aside.show {display:block}
    .wrap aside > div {top:170px; width:calc(100% - 60px)}
    .wrap aside + .area {padding-top:50px; width:100%; margin:0}

    
    .mudi_001 .swiper_main .area {width:calc(100% - 40px) !important; left:20px}
    .mudi_001 .swiper_main .swiper-slide .area {bottom:80px}
    .mudi_001 .swiper-slide h3 {font-size:20px}
    .mudi_001 .swiper-slide h1 {font-size:24px}
    .mudi_001 .swiper_main .swiper-slide .area a {padding-top:20px; font-size:16px}
    .mudi_001 .gall li {width:calc(50% - 20px)}


    .mudi_002 header{height:120px}
    .mudi_004 .cont {width:100%; padding-top:50px}
    .mudi_004 .cont > div {padding-left:0 !important; padding-right:0 !important}
    
}

/*ipad 4세대 - 가로모드*/
@media (max-width: 1194px) {
    .login > .row {width:100%}
    .wrap aside > div {height:calc(100% - 200px); padding-right:10px; overflow-y:auto}
    .mudi_002 #list .box img {width:100%}
}

/*ipad 4세대 - 세로모드*/
@media (max-width: 834px) {
    .mudi_004 label[for=chk_col38] {margin-top:1rem}
}

@media (max-width: 785px) {

    
    header {top:0; left:0; width:100%}
    header + .weap {padding-top:70px}

    .row {margin-left:0; margin-right:0}
    div[class *= 'col-'] {width:100% !important}


    .area {width:100%; padding:0 15px}
    
    .gall {width:calc(100%) !important; margin-left:0 !important}
    .gall li {width:100% !important; margin-left:0 !important}

    .mudi_004 .cont .chk_box_area > div{width:calc(25% - 15px)} 
    .mudi_004 .cont .chk_box_area > div:nth-child(4n) {margin-right:0 !important}
    .mudi_004 .cont .chk_box_area > div:nth-child(5n + 1) {margin-top:15px}
    .mudi_004 .cont .chk_box_area .chk_box {width:100%; text-align: center; padding-left:0; padding-right:0}
    .mudi_004 .cont .btn-theme {width:80% !important; margin-bottom:30px}
    
    .mudi_025 {width:calc(100%); overflow:hidden auto;}
}