/* BASIC css start */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/* 메이크샵 모바일 CSS */
/* 롤링배너 */
#event {position:relative;}
#event .MS_img-wrap {position:relative; width:100%; overflow:hidden;}
#event .MS_img-wrap .event-imgs {position:relative;}
#event .MS_img-area {float:left;}
#event .MS_img-area:not(:first-child) {display:none;}
#event .MS_img-area img {width:100%;}
#event .pagination {position:relative;top:-10px; width:100%;text-align:center; font-size:0; line-height:0;}
/* #event .pagination .swiper-pagination-switch {display:inline-block; width:6px; height:6px; margin:0 2px; background:#373737; border-radius:3px;} */
#event .pagination .swiper-pagination-switch {display:inline-block; width:7.5px; height:7.5px; margin:0 3px; background:#f8e0dc; border-radius:3px;opacity: 1;}
#event .pagination .swiper-active-switch {background:#d4d4d4;}
/* #event .pagination .swiper-active-switch {background:white;} */

/* //롤링배너 */
.main h3 {margin:40px 5px 20px; text-align:center; background:url(/images/d3/psdesign/makeshop/m_makeshop/common/bg_heading.gif) repeat-x 0 50%; background-size:15px 5px;}
.main h3 span {display:inline-block; padding:0 15px; background:#fff; font-size:1.25em;}
.main .list_category {overflow:hidden;}
.main .list_category li {float:left; width:25%; height:32px; padding:8px 0; border-bottom:1px solid #ddd; box-sizing:border-box;}
.main .list_category li a {display:block; border-right:1px solid #ddd; text-align:center; text-overflow: clip; white-space: nowrap; overflow: hidden;font-size:14px;}
.main .list_category li:nth-child(4) a {border-right:0px none;}
.main .list_category li:nth-child(8) a {border-right:0px none;}
.main .list_category li:nth-child(12) a {border-right:0px none;}
.main .list_category li:nth-child(16) a {border-right:0px none;}
.main .bner {margin-top:40px;}
.main .bner img {width:100%;}


/* 위사 모바일 CSS */

/* 푸터 마진 재조정 */
.footer {
    margin-top:0px !important;
}

/* 카테고리 슬라이더 */
.main .category-scroll {
    overflow:hidden;
    position:relative;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    
}
.main .category-scroll .swiper-slide {
    display:inline-block;
    width:auto;
    margin:0px 7.5px;
    color:#333;
    font-size:13px;
    font-weight:bold;
    line-height:38px;
}
.main .category-scroll .swiper-slide:first-child {
    margin-left:10px;
}
.main .category-scroll .swiper-slide:last-child {
    margin-right:50px;
}

/*전체 width값 고정*/
#container{
    overflow-x: hidden;
    overflow-y: visible;
}

/* 메인 비쥬얼 슬라이더 */

.main .banner-section .banner-slide {
    position:relative;
    overflow:hidden;
}
.main .banner-section .banner-slide .swiper-slide {
}
.main .banner-section .banner-slide .swiper-slide a {
    display:inline-block;
    width:100%;
}
.main .banner-section .banner-slide .swiper-slide a img {
    width:100%;
    max-width:none;
}
.main .banner-section .banner-slide .swiper-pagination {
    bottom:20px;
}
.main .banner-section .banner-slide .swiper-pagination .swiper-pagination-bullet {
    width:7px;
    height:7px;
    margin:0px 2.5px;
    border-radius:7px;
    background:white;
    opacity:1;
}
.main .banner-section .banner-slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background:#f8e0dc;
    opacity:1;
}

/* 서브 비쥬얼 슬라이더 */
.main .banner-section .sub-banner {
    position:relative;
    margin-top:10px;
    overflow:hidden;
}

.main .banner-section .sub-banner .swiper-slide {
    width:250px;
    height:170px;
}
.main .banner-section .sub-banner .swiper-slide img {
    width:100%;
    height:100%;
}





/* 상품 리스트 공통 CSS 시작(일부는 각 페이지마다 수정하면 됨.) */
.section {
    padding-bottom:30px;
    
}
.section .view-mode {
    padding-top:17px;
    font-size:0px;
    line-height:0px;
    text-align:center;
}
.section .view-mode a {
    display:inline-block;
    width:20px;
    height:20px;
    margin:0px 7.5px;
    text-indent:-999em;
    overflow:hidden;
}
.section .view-mode a.one {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode1-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.one.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode1-on.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.two {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode2-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.two.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode2-on.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.three {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode3-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.three.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode3-on.jpg') no-repeat center center;
    background-size:20px 20px;
}

.section .section-title {
    line-height:1em;
    margin-top:15px;
    margin-bottom:15px;
    color:#444444;
    font-family:'Roboto';
    font-size:20px;
    font-weight:bold;
    text-align:center;
}

.section .items {
}
.section .items:after {
    display:block;
    clear:both;
    content:"";
}

.section .more {
    margin-top:10px;
    text-align:center;
}
.section .more a {
    display:inline-block;
}
.section .more a button {
    display:inline-block;
    width:155.5px;
    height:45px;
    background:white;
    border:1px solid #333;
    color:#333;
    font-size:16px;
    line-height:43px;
    letter-spacing:-0.5px;
    box-sizing:border-box;
}

/* 1단 보기 */
.section .list-wrap.one li {
    display:block;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.one li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.one li a .img {
}
.section .list-wrap.one li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.one li a .text {
    display:none;
}
.section .list-wrap.one li a .text.text-one {
    display:block;
    padding:0px 10px;
}
.section .list-wrap.one li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:10px;
    color:#333333;
    font-size:17px;
    line-height:20px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    height: 30px; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.section .list-wrap.one li a .text .dis_price_box {
    margin-top:10px;
    padding-bottom:10px;
    /*border-bottom:1px solid #dddddd;*/
    font-size:0px;
    line-height:0px;
}
.section .list-wrap.one li a .text .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section .list-wrap.one li a .text .dis_price_box .dis_percent {
    display:inline-block;
    margin-right:15px;
    vertical-align:middle;
    float:right;
}
.section .list-wrap.one li a .text .dis_price_box .dis_percent span {
    color:#333333;
    font-size:20px;
    font-weight:300;
    line-height:25px;
    letter-spacing:-0.5px;
}
.section .list-wrap.one li a .text .dis_price_box .del-price {
    display:inline-block;
    color:#888888;
    font-size:15px;
    line-height:30px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
    font-weight: 300;
}
.section .list-wrap.one li a .text .dis_price_box .normal-price {
    display:inline-block;
    margin-right:15px;
    color:#333333;
    font-size:18px;
    font-weight:400;
    line-height:30px;
    letter-spacing:-0.5px;
    vertical-align:middle;
}

.section .list-wrap.one li a .text .dis_price_box .time {
    float:right;
    margin-top:6px;
    padding:0px 6px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:12px;
    line-height:15px;
    text-align:center;
    box-sizing:border-box;
}

.section .list-wrap.one li a .text .option_preview {
    margin-top:10px;
    font-size:0px;
}
.section .list-wrap.one li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    /*margin:3px 0px;*/
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.one li a .text .option_preview .size {
    float:left;
    color:#888;
    font-size:13px;
    line-height:12px;
    letter-spacing:-0.5px;
}
.section .list-wrap.one li a .text .size {
    color: #888;
    /* color: #fa71a9; */
    font-size: 13px;
    /* font-weight: bold; */
    margin-top: 10px;
    margin-bottom: 5px;
    line-height: 12px;
    letter-spacing: -0.5px;
}

/* 2단 보기 */
.section .list-wrap.two li {
    float:left;
    width:50%;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.two li:nth-child(2n+1) {
    padding-right:2.5px;
}
.section .list-wrap.two li:nth-child(2n) {
    padding-left:2.5px;
}
.section .list-wrap.two li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.two li a .img {
}
.section .list-wrap.two li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.two li a .text {
    display:none;
}
.section .list-wrap.two li a .text.text-two {
    display:block;
    padding:0px 10px;
}
.section .list-wrap.two li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:10px;
    color:#333333;
    font-size:14px;
    line-height:17px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

.section .list-wrap.two li a .text .dis_price_box {
    margin-top:7px;
    font-size:0px;
    line-height:0px;
}
.section .list-wrap.two li a .text .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section .list-wrap.two li a .text .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.section .list-wrap.two li a .text .dis_price_box .dis_percent span {
    color:#333333;
    font-size:15px;
    font-weight:300;
    line-height:26px;
    letter-spacing:-0.5px;
}

.section .list-wrap.two li a .text .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
}
.section .list-wrap.two li a .text .dis_price_box .price-box .del-price {
    display:inline-block;
    color:#888888;
    font-size:11px;
    font-weight: 300;
    line-height:26px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-top: 2px;
}
.section .list-wrap.two li a .text .dis_price_box .price-box .normal-price {
    display:inline-block;
    color:#333333;
    font-size:14.5px;
    font-weight:400;
    line-height:26px;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-right:8px;
}

.section .list-wrap.two li a .text .dis_price_box .time {
    display:block;
    width:100%;
    line-height:15px;
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:12px;
    line-height:15px;
    text-align:center;
    box-sizing:border-box;
}

.section .list-wrap.two li a .text .option_preview {
    font-size:0px;
    margin-top:5px;
}
.section .list-wrap.two li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    /*margin:3px 0px;*/
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.two li a .text .option_preview .size {
    float:left;
    color:#888;
    font-size:13px;
    line-height:12px;
    letter-spacing:-0.5px;
}
.section .list-wrap.two li a .text .size {
    color: #888;
    /* color: #fa71a9; */
    font-size: 13px;
    /* font-weight: bold; */
    /*margin-top: 10px;*/
    margin-bottom: 5px;
    line-height: 12px;
    letter-spacing: -0.5px;
}

/* 3단 보기 */
.section .list-wrap.three {
    margin:0px -2.5px;
}
.section .list-wrap.three li {
    float:left;
    width:33.33%;
    padding:0px 2.5px;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.three li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.three li a .img {
}
.section .list-wrap.three li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.three li a .text {
    display:none;
}
.section .list-wrap.three li a .text.text-three {
    display:block;
    padding:0px 5px;
}
.section .list-wrap.three li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:7.5px;
    color:#333333;
    font-size:14px;
    line-height:18px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.section .list-wrap.three li a .text .dis_price_box .del-price {
    display:inline-block;
    color:#888888;
    font-size:10px;
    font-weight: 300;
    line-height:18.5px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
}
.section .list-wrap.three li a .text .dis_price_box .normal-price {
    display:inline-block;
    color:#333333;
    font-size:13px;
    font-weight:400;
    line-height:18.5px;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-right:6px;
}
.section .list-wrap.three li a .text .dis_price_box .time {
    display:block;
    width:100%;
    height:15px;
    margin-top:5px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:11px;
    line-height:13px;
    text-align:center;
    overflow:hidden;
    box-sizing:border-box;
}

.section .list-wrap.three li a .text .option_preview {
    margin-top:5px;
    font-size:0px;
}
.section .list-wrap.three li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.three li a .text .option_preview .size {
    margin-top:8px;
    color:#888;
    font-size:13px;
    line-height:12px;
    letter-spacing:-0.5px;
}
.section .list-wrap.three li a .text .size {
    color: #888;
    /* color: #fa71a9; */
    font-size: 11px;
    /* font-weight: bold; */
    /*margin-top: 10px;*/
    margin-bottom: 5px;
    line-height: 12px;
    letter-spacing: -0.5px;
}


/* 상품 리스트 공통 CSS 끝 */





.section.tab {
    padding-top:20px;
    padding-bottom:20px;
    background:#fcfaf0;
}

.section.tab .section-title {
    margin-top:0px;
    margin-bottom:15px;
    color:#444444;
    font-size:20px;
    font-weight:bold;
    line-height:25px;
    text-align:center;
}

.section.tab .list-tab {
    margin-bottom:35px;
}
.section.tab .list-tab:after {
    display:block;
    clear:both;
    content:"";
}

.section.tab .list-tab a {
    float:left;
    width:20%;
    background:#ffffff;
    border-top:1px solid #ede9da;
    border-left:1px solid #ede9da;
    border-bottom:1px solid #ede9da;
    color:#333333;
    font-size:13px;
    line-height:38px;
    text-align:center;
    box-sizing:border-box;
}
.section.tab .list-tab a:first-child {
    border-left:none;
}
.section.tab .list-tab a.active {
    background:#f6e3e7;
    font-weight:bold;
}

.section.tab .list-wrap {
    padding:0px 10px;
}
.section.tab .list-wrap:after {
    display:block;
    clear:both;
    content:"";
}

.section.tab .list-wrap.two .first {
    position:relative;
    margin-bottom:15px;
}
.section.tab .list-wrap.two .first a {
    position:absolute;
    top:0px;
    bottom:0px;
    display:inline-block;
    width:100%;
}
.section.tab .list-wrap.two .first .info {
    display:block;
    padding:12.5px 10px 12.5px 15px;
    background:white;
}
.section.tab .list-wrap.two .first .info .name {
    display: inline-block;
    width: 100%;
    color:#333333;
    font-size:17px;
    line-height:29px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-align: left; 
    word-wrap: break-word; 
}
.section.tab .list-wrap.two .first .info .dis_price_box {
    font-size:0px;
    line-height:0px;
}
.section.tab .list-wrap.two .first .info .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section.tab .list-wrap.two .first .info .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.section.tab .list-wrap.two .first .info .dis_price_box .dis_percent span {
    color:#333333;
    font-size:12px;
    font-weight:300;
    line-height:18.5px;
    letter-spacing:-0.5px;
}

.section.tab .list-wrap.two .first .info .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
}
.section.tab .list-wrap.two .first .info .dis_price_box .price-box:after {
    display:block;
    clear:both;
    content:"";
}
.section.tab .list-wrap.two .first .info .dis_price_box .price-box .del-price {
    float:right;
    color:#888888;
    font-size:10px;
    line-height:31px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
}
.section.tab .list-wrap.two .first .info .dis_price_box .price-box .normal-price {
    float:right;
    margin-right:10px;
    color:#333333;
    font-size:15px;
    font-weight:400;
    line-height:31px;
    letter-spacing:-0.5px;
}

.section.tab .list-wrap.two .first .info .dis_price_box .time {
    float:right;
    padding:0px 6px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:11px;
    line-height:13px;
    text-align:center;
    margin-top:8px;
    box-sizing:border-box;
}

.section.tab .list-wrap.two .normal {
    position:relative;
    display:inline-block;
    width:50%;
    margin-bottom:30px;
    vertical-align:top;
    box-sizing:border-box;
}
.section.tab .list-wrap.two .normal:nth-child(2), .section.tab .list-wrap.two .normal:nth-child(4) {
    padding-right:5px;
}
.section.tab .list-wrap.two .normal:nth-child(3), .section.tab .list-wrap.two .normal:nth-child(5) {
    padding-left:5px;
}
.section.tab .list-wrap.two .normal a {
    position:absolute;
    top:0px;
    bottom:0px;
    display:inline-block;
    width:100%;
}
.section.tab .list-wrap.two .normal .thumb {
}
.section.tab .list-wrap.two .normal .thumb img {
    width:100%;
    height:auto;
    max-width:auto;
}

.section.tab .list-wrap.two .normal .info {
    display:block;
}
.section.tab .list-wrap.two .normal .info .name {
    display: inline-block;
    width: 100%;
    margin-top:7.5px;
    color:#333333;
    font-size:14px;
    line-height:19px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

.section.tab .list-wrap.two .normal .info .dis_price_box {
    margin-top:5px;
    font-size:0px;
    line-height:0px;
}
.section.tab .list-wrap.two .normal .info .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section.tab .list-wrap.two .normal .info .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.section.tab .list-wrap.two .normal .info .dis_price_box .dis_percent span {
    color:#333333;
    font-size:12px;
    font-weight:300;
    line-height:18.5px;
    letter-spacing:-0.5px;
}

.section.tab .list-wrap.two .normal .info .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
}
.section.tab .list-wrap.two .normal .info .dis_price_box .price-box .del-price {
    color:#888888;
    font-size:12px;
    line-height:16px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
}
.section.tab .list-wrap.two .normal .info .dis_price_box .price-box .normal-price {
    color:#333333;
    font-size:17px;
    font-weight:400;
    line-height:24px;
    letter-spacing:-0.5px;
}

.section.tab .list-wrap.two .normal .info .dis_price_box .time {
    display:block;
    width:100%;
    line-height:13px;
    margin-top:7.5px;
    margin-bottom:10px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:12px;
    text-align:center;
    box-sizing:border-box;
}

.section.banner {
    padding-bottom:0px;
    font-size:0px;
}
.section.banner:after {
    display:block;
    clear:both;
    content:"";
}
.section.banner .item {
    font-size:0px;
    line-height:0px;
}
.section.banner .item.col1 {
    float:left;
    width:100%;
    margin-bottom:3px;
}
.section.banner .item.col2 {
    float:left;
    width:50%;
    box-sizing:border-box;
}
.section.banner .item.col2:nth-child(odd) {
    padding-right:1.5px;
    padding-bottom:3px;
}
.section.banner .item.col2:nth-child(even) {
    padding-left:1.5px;
    padding-bottom:3px;
}
/*.section.banner .item.col2:nth-child(3) {
    padding-left:1px;
    padding-bottom:1px;
}
*/
.section.banner .item a {
    display:inline-block;
    width:100%;
    font-size:0px;
    line-height:0px;
}
.section.banner .item a img {
    width:100%;
    max-width:none;
    vertical-align:middle;
}

.normal-price{
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 25px;
}

.style-code{
    /*margin-top: 10px;*/
    /* float: left; */
    font-size: 11px;
    /* letter-spacing: -0.5px; */
    color: #999;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/*전상품세일 - 할인율, 할인가 컬러 변경*/
//.normal-price {color: #ee0000 !important;}
//.dis_percent span {color: #ee0000 !important;}

/* BASIC css end */