/* BASIC css start */ #header .head_inner .head_bottom ul li:first-child a{border-bottom:2px solid #000; font-weight:700} /* section common */ .section{padding-bottom: 20px;} .section *{box-sizing:border-box} .section h2{text-align: center; color: #222222; font-size: 18px; font-weight: 600; font-family: 'Noto Sans KR', sans-serif; margin-bottom:12px; } .sec_inner{padding:0 3%} .section .more_item{display: flex; align-items: center; justify-content: center;margin-top:40px} .section .more_item a{display: flex; align-items: center;transition: all .2s; justify-content: center;gap: 6px; border: 1px solid #e4e4e4; padding: 14px 0; width:100%} .section .more_item a p{color: #999999; font-size: 13px; font-weight: 500;} .section .more_item a img{transform:scale(.66); transform-origin:center center} /* sec1 */ #sec1{} #sec1 .swiper {} #sec1 .swiper .swiper-wrapper {} #sec1 .swiper .swiper-wrapper .swiper-slide {} #sec1 .swiper .swiper-wrapper .swiper-slide a {display: block; width: 100%;} #sec1 .swiper .swiper-wrapper .swiper-slide a img {width: 100%;} #sec1 .swiper .swiper-wrapper .swiper-slide a video {width: 100%;} #sec1 .swiper .swiper-wrapper .swiper-slide a .main_text {position: absolute;bottom: 0;left: 0;width: 100%;padding-top: 200px;background-image: linear-gradient(to bottom, #43434300 20%, #434343bd 100%);} #sec1 .swiper .swiper-wrapper .swiper-slide a .main_text > span {background: #ffffffbd;padding: 4px 10px;border-radius: 20px;font-weight: 400;color: #e76d26;border: 1px #ffcdaf solid;margin-left: 8%;} #sec1 .swiper .swiper-wrapper .swiper-slide a .main_text p {font-size: 2.3em;font-weight: 800;letter-spacing: -1px;margin: 3% 0 8% 8%;color: #fff;} #sec1 .swiper .swiper-wrapper .swiper-slide a .main_text p > span {font-size: 0.8em;font-weight: 400;letter-spacing: -1px;color: #fff;padding: 0;border-radius: 0;background: none;margin: 0;border: none;} #sec1 .swiper .btn_wrap{display: flex; align-items: center;padding:6px; 5%} #sec1 .swiper .btn_wrap img{transform:scale(.66); transform-origin:center center} #sec1 .swiper .btn_wrap>ul{display: flex; align-items: center;flex-grow:1} /*#sec1 .swiper .btn_wrap>ul li:not(:has(.swiper-pagination)){border: 1px solid #afafaf;} #sec1 .swiper .btn_wrap>ul li>div:has(img){display: flex; align-items: center; justify-content: center; width: 25px; height: 25px;}*/ #sec1 .swiper .btn_wrap>ul li .swiper_prev{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_prev img{} #sec1 .swiper .btn_wrap>ul li .swiper-pagination{position: unset;color: #afafaf;font-size: 15px;display: flex; align-items: center; gap: 1px;} #sec1 .swiper .btn_wrap>ul.paginationWrap li{margin: 0 10px;} #sec1 .swiper .btn_wrap>ul li .swiper-pagination span{display: inline-block; font-size: 16px;font-weight: 500; font-family: 'Jost', sans-serif;} #sec1 .swiper .btn_wrap>ul li .swiper-pagination span.swiper-pagination-current{color: #000;} #sec1 .swiper .btn_wrap>ul li .swiper_next{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_next img{} #sec1 .swiper .btn_wrap .control{margin-right: 8px;} #sec1 .swiper .btn_wrap .control a{cursor: pointer; display: flex;transition: all .1s; align-items: center; justify-content: center; width: 25px; height: 25px; } #sec1 .swiper .btn_wrap .control a.clicked{ background-color: rgb(233, 233, 233);} #sec1 .swiper .btn_wrap .control a img{} #sec1 .swiper .btn_wrap .sec1_more a{display:flex; align-items:center ;gap:5px; color:#777777; font-size:14px; font-weight:400} /* 신규상품 */ #sec2_1 .swiper3 {width:100%; max-width:1600px; margin:0 auto;padding-bottom: 30px;} #sec2_1 .swiper3 .thumb {width:100%; font-size:0;} #sec2_1 .swiper3 .thumb a {display:block;width:100%;text-align:center;box-sizing:border-box;} /* .item-wrap */ #sec2_1 .item-wrap { overflow: hidden; } #sec2_1 .item-wrap .item-hd { margin: 40px 0 20px 0 } #sec2_1 .item-wrap .nbg { background: none; text-align: center; } #sec2_1 .item-wrap .item-info { zoom: 1; overflow: hidden; padding: 35px 0 10px; margin-bottom:10px } #sec2_1 .item-wrap .item-info:after { display:block; clear:both; content:'' } #sec2_1 .item-wrap .item-info .item-total { float: left; font-size:14px; color:#7b7b7b } #sec2_1 .item-wrap .item-info .item-total span { color: #0e0d0d } #sec2_1 .item-wrap .item-info .item-order { float: right } #sec2_1 .item-wrap .item-info .item-order li { float: left; padding: 0 15px; line-height:12px; border-right:1px solid #ddd } #sec2_1 .item-wrap .item-info .item-order li.nobg { padding-right:0; border-right:none } #sec2_1 .item-wrap .item-info .item-order li a { font-size: 12px; color:#a6a6a6; line-height:12px; vertical-align:top } #sec2_1 .item-wrap .item-info .item-order li a .on { color: #111 } #sec2_1 .item-wrap .item-cont {width:1122px; *zoom:1;} #sec2_1 .item-wrap .item-cont:after { content: ""; display: block; clear: both } #sec2_1 .item-wrap .item-cont .item-list {/* background: #f7f7f7; *//* box-shadow: 0 0 3px #f9f9f9; */border-radius: 20px;padding-right:0;/*transition:.3s;*/} #sec2_1 .item-wrap .item-cont .item-list .thumb {width: 40%;height: auto;overflow:hidden;padding: 25px 15px;float: left;} #sec2_1 .item-wrap .item-cont .item-list .thumb img {width: 100%;height: auto;border-radius: 14px;} #sec2_1 .item-wrap .item-cont .item-list .prd-info {padding: 30px 15px 20px 0;width: 60%;overflow:hidden;float: left;text-align: left;letter-spacing: -0.5px;} #sec2_1 .item-wrap .item-cont .item-list .prd-ico img { margin:2px } #sec2_1 .item-wrap .item-cont .item-list .prd-name {padding-top:5px;} #sec2_1 .item-wrap .item-cont .item-list .prd-name a {display:block;color:#1c1c1c;line-height: 120%;text-overflow:ellipsis;word-wrap:normal;font-size: 15px;font-weight: 400;padding-bottom: 7px;} #sec2_1 .item-wrap .item-cont .item-list .salebox {font-size: 16px;padding-left: 2px;color: #d1d1d1;font-weight: 400;display: inline;} #sec2_1 .item-wrap .item-cont .item-list .prd-price {padding-top: 2px;font-family: "Varela Round", sans-serif; font-size: 1.5em;font-weight: 600;} #sec2_1 .item-wrap .item-cont .item-list .prd-price strike {color: #b1b1b1;} #sec2_1 .item-wrap .item-cont .item-list .prd-price .price {color: #f37021;} #sec2_1 .item-wrap .item-cont .item-list .prd-color { padding-top:5px } #sec2_1 .item-wrap .item-cont .item-list .prd-preview { padding-top:5px } #sec2_1 .item-wrap .item-cont .item-list .prd-preview .btn-preview { display:inline-block; width:69px; height:17px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/btn_preview.gif) 0 0 no-repeat } #sec2_1 .item-wrap .item-cont .item-list .prd-benefit { padding-top:5px } #sec2_1 .item-wrap .item-cont .item-list .prd-wish { padding-top: 14px; } #sec2_1 .item-wrap .item-cont .item-list .prd-wish a { font-family: 'malgun gothic'; font-size: 14px; color: #000; } #sec2_1 .item-wrap .item-cont .item-list .prd-wish i.fa { margin-right: 4px; color: #c8c8c8; font-size: 22px; vertical-align: text-top; cursor:pointer; } #sec2_1 .item-wrap .item-cont .item-list .prd-wish i.fa-heart { display:none; color: #f41f3a; } #sec2_1 .item-wrap .item-cont .item-list .prd-wish .wish-on i.fa-heart { display:inline-block; } #sec2_1 .item-wrap .item-cont .item-list .prd-wish .wish-on i.fa-heart-o { display:none; } #sec2_1 .item-wrap .item-cont .item-list .prd-subname { margin-top:15px; padding-top:15px; color:#8b8b8b; text-align:left; border-top:1px dashed #c6c6c6 } #sec2_1 .item-wrap .item-cont .item-list .MK-product-icons img { vertical-align: middle } #sec2_1 .item-wrap .item-cont .nomg { padding-right: 0px } #sec2_1 .item-wrap .item-page { margin-top: 50px; text-align: center; } #sec2_1 .item-wrap .item-page a { padding: 0 5px } #sec2_1 .item-wrap .item-page a:hover, .item-wrap .item-page a.now { color: #111; font-weight: bold; letter-spacing: -1px; } #sec2_1 .wrap_swiper_bt {position:relative; width:10%; float:right; margin-top:25px;} #sec2_1 .swiper-pagination-fraction {font-size:14px; bottom:-8px !important; } #sec2_1 .item-wrap .item-cont .item-list .prd-brand span {background: #ffead6; padding: 1% 2.5%; border-radius: 20px; font-size: 12px; color: #cb6042;} /* sec2 */ #sec2{} #sec2 .sec_inner{} #sec2 .sec_inner ul{display: flex; flex-wrap: wrap; justify-content: space-between;gap:15px} #sec2 .sec_inner ul li{width:calc((100% - 60px) / 5)} #sec2 .sec_inner ul li a{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;} #sec2 .sec_inner ul li a img{display: inline-block; border-radius:15px; width:100%} #sec2 .sec_inner ul li a p{ font-family: 'Noto Sans KR', sans-serif; color: #333333; font-size: 13px; font-weight: 400;} /* sec3, 5 */ :is(#sec3,#sec5) .sec_inner{} :is(#sec3,#sec5) .sec_inner .sec3_prd h1 {font-size: 20px; font-weight: 600; border-top: 1px #d7d7d7 solid; padding-top: 35px; padding-left: 5px;} :is(#sec3,#sec5) .sec_inner .sec3_prd h2 {color: #999999; font-weight: 400; font-size: 18px; text-align: left; padding-left: 5px;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate){margin-bottom: 45px;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul{display:flex;width: 98%;/* border-top:1px solid #eaeaea; *//* border-bottom:1px solid #eaeaea; *//* border-left:1px solid #eaeaea; *//* border-right:1px solid #eaeaea; */flex-wrap: wrap;justify-content: space-between;margin: 0 auto;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul li{width: 30%;float: left;clear: both;} /*:is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul li:nth-child(2n+1) {margin-right:1%}*/ :is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul li a{display:block;width: 100%;padding:15px 0;text-align:center;text-align:center;color:#000;font-size: 15px;font-weight: 500;transition:all .1s} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul li a img {width:100%;border-radius:9px;margin-bottom:8px;opacity: 0.85; transition:0.2s;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate) ul li.on>a {color: #e76d26;font-weight: 600;} :is(#sec3,#sec5) :is(.sec3_prd){} :is(#sec3,#sec5) :is(.sec3_prd)>div{display: none; position:relative;opacity:0; transition:opacity .5s} :is(#sec3,#sec5) :is(.sec3_prd)>div.show{display: block;} :is(#sec3,#sec5) :is(.sec3_prd)>div.act{opacity:1} #sec3 {/*background:#f7f7f7;*/ padding: 0; margin-bottom: 0;} #sec3 .item_list .thumb>a:before {background-color:unset;} #sec3 p {font-size: 0.8em; letter-spacing: -0.5px;} #sec5 {padding-top:30px;} #sec5 .side_bn {width: 300px;height: 800px; float: left;margin-right: 12px;text-align: center;border-radius:20px; position:sticky;top:75px;background-image: url('/design/careway/mam/PC/sec5_side.jpg');} #sec5 .side_bn p {font-size: 2em; font-weight: 600; margin-top: 50px;} #sec5 .side_bn span {font-size: 15px; margin: 0 auto; border: 1px #000 solid; padding: 6px 20px; border-radius: 30px; position: absolute;bottom: 60px;right: 32%;} /* sec4 , 6*/ #sec4 .sec_inner{background:#1b1b1b;} #sec6 .sec_inner{background:#38d466;} :is(#sec4,#sec6){} :is(#sec4,#sec6) .sec_inner{} :is(#sec4,#sec6) .sec_inner a{display: block; width: 100%;} :is(#sec4,#sec6) .sec_inner a img{width: 100%;} #sec7{padding-top:20px;} #sec7 .sec_inner{} #sec7 .sec_inner .sec7_cont{ } #sec7 .sec_inner .sec7_cont>div{margin-bottom:40px; } #sec7 .sec_inner .sec7_cont>div .banner{} #sec7 .sec_inner .sec7_cont>div .banner>a{display: block; width: 100%;} #sec7 .sec_inner .sec7_cont>div .banner>a img{width:100%} #sec7 .sec_inner .sec7_cont>div ul.item_cont{display: flex; flex-wrap: wrap; gap: 10px; margin-top:20px; justify-content:space-between;} #sec7 .sec_inner .sec7_cont>div ul.item_cont li{width: calc((100% - 20px) / 3)} #sec7 .sec_inner .sec7_cont>div ul.item_cont li .thumb{} #sec7 .sec_inner .sec7_cont>div .more_item a{width: 100%;} #sec7 .sec_inner .sec7_cont>div ul.item_cont li.item_list .info {padding:10px 0} #sec7 .sec_inner .sec7_cont>div ul.item_cont li.item_list .info .prdprice {margin-top:7px;} #sec7 .sec_inner .sec7_cont>div ul.item_cont li.item_list .info .prdprice .price{font-size:14px;} #sec8{padding-top: 40px;background: #f5f4f4;} #sec8 .sec_inner{padding:0} #sec8 .sec_inner .sec8_cont{} #sec8 .sec_inner .sec8_cont ul{margin-bottom: 30px;} #sec8 .sec_inner .sec8_cont ul li{width:68%} #sec8 .sec_inner .sec8_cont ul li a{display: block; width:100% } #sec8 .sec_inner .sec8_cont ul li a img{width:100%; border-radius:20px;} #sec8 .sec_inner .sec8_cont ul li .txt_area{margin-top: 12px;gap: 5px; display: flex; flex-direction: column;} #sec8 .sec_inner .sec8_cont ul li .txt_area p{font-weight: 500; } #sec8 .sec_inner .sec8_cont ul li .txt_area p.big{color: #222222; font-size: 14px;text-align:center;} #sec8 .sec_inner .sec8_cont ul li .txt_area p.small{color: #999999; font-size: 13px;} #sec8 .sec_inner .sec8_cont .more_item{} #sec9 {background:#f7f7f7; padding-top:30px;} #sec9 iframe {width:100%;aspect-ratio: 1920/1080;border-radius:20px !important;border:1px solid rgb(219, 219, 219);} #sec9 .sec_inner {padding:0 3%;display: flex;} #sec9 .sec_inner .sec9_cont {} #sec9 .sec_inner .sec9_cont ul{margin-bottom: 10px;} #sec9 .sec_inner .sec9_cont ul li {} #sec9 .sec_inner .sec9_cont ul li a{display: block; width:100% } #sec9 .sec_inner .sec9_cont ul li a img{width:100%} #sec9 .sec_inner .sec9_cont ul li .txt_area{margin-top: 12px;gap: 5px; display: flex; flex-direction: column;} #sec9 .sec_inner .sec9_cont ul li .txt_area p{font-weight: 500; } #sec9 .sec_inner .sec9_cont ul li .txt_area p.big{color: #222222; font-size: 14px;} #sec9 .sec_inner .sec9_cont ul li .txt_area p.small{color: #999999; font-size: 13px;} #sec10 {padding-top:20px;padding-bottom: 40px;} #sec10 .sec10_cont {width:100%;} #sec10 .sec10_cont ul {} #sec10 .sec10_cont ul li {width:68% !important;} #sec10 .sec10_cont ul li img {width: 100%; border-radius: 20px;} #sec10 .sec10_cont ul li p {} #sec11 {background: #fffcfb; padding: 15% 0; margin-bottom: 0;} #sec11 ul {display: flex;flex-direction: column;border-bottom: 1px #ffb68c dotted;border-top: 1px #ffb68c dotted;} #sec11 ul:nth-child(1) {border-bottom:none;margin-bottom: 30px;} #sec11 ul li:nth-child(1) {width: 100%;font-weight: 600;padding: 20px 0;font-size: 18px;display: flex;justify-content: space-between;} #sec11 ul li:nth-child(1) span {} #sec11 ul li:nth-child(1) span a {color: #a3a3a3;font-size: 11px;} #sec11 ul li:nth-child(1) span a:after {content:'\226B'; padding-left:5px} #sec11 ul li:nth-child(2) {width: 100%;} #sec11 ul li:nth-child(2) p {border-bottom: 1px #ebebeb solid;padding: 15px 0 15px 7px;padding-left: 10px;background: #fffcfb;transition:0.3s;width: 98%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} #sec11 ul li:nth-child(2) p:hover {background:#fff; font-weight:600;} #sec11 ul li:nth-child(2) p:nth-last-child(1) {border-bottom: none;} #sec11 ul li:nth-child(2) p a {font-size: 15px;} /* BASIC css end */