/* BASIC css start */ /* section common */ .section{margin-bottom: 100px;} .section h2{text-align: center; color: #222222; font-size: 28px; font-weight: 500; margin-bottom:50px; } .sec_inner{width: 1600px; margin: 0 auto;} .section .more_item{display: flex; align-items: center; justify-content: center;margin-top:60px} .section .more_item a{display: flex; align-items: center;transition: all .2s; justify-content: center;gap: 10px; border: 1px solid #ccc; padding: 20px 130px;} .section .more_item a:hover{border-color: #000;} .section .more_item a p{color: #000; font-size: 15px; font-weight: 500;} .section .more_item a img{} /* sec1 */ #sec1{max-width:1920px; margin:0 auto; margin-bottom:120px;} #sec1 .swiper{} #sec1 .swiper-slide {max-width:1600px;} #sec1 .swiper .swiper-slide:not(.swiper-slide-active,.swiper-slide-next){opacity: .3;} #sec1 .swiper .swiper-slide:not(.swiper-slide-active,.swiper-slide-prev){opacity: .3;} #sec1 .swiper .swiper-slide{transition: opacity .2s;} #sec1 .swiper .swiper-button-next, #sec1 .swiper .swiper-button-prev {top:calc(50% - 44px);} #sec1 .swiper .swiper-slide .swiper-inner-text {position:absolute;z-index: 5;display: inline-block;top: 35%;left: 47%;} #sec1 .swiper .swiper-slide .swiper-inner-text h1 {font-size: 3.5em;font-weight: 700;margin-bottom: 20px;} #sec1 .swiper .swiper-slide .swiper-inner-text h3 {font-size: 1.5em; margin-bottom: 40px;} #sec1 .swiper .swiper-slide .swiper-inner-text a {background: #000000; color: #ffffff; padding: 10px 20px; font-size: 13px; border-radius: 50px; transition:0.3s;} #sec1 .swiper .swiper-slide .swiper-inner-text a:hover {background: #f37021;} #sec1 .swiper ul{margin-left: calc((100% / 3) / 2);} /* #sec1 .swiper ul li{transition: opacity .2s; width: calc(100% / 3);} */ #sec1 .swiper ul li{transition: opacity .2s; max-width: 1600px;} #sec1 .swiper>ul>li:not(.swiper-slide-active,.swiper-slide-next){opacity: .3;} #sec1 .swiper ul li a{display: block; width: 100%;} #sec1 .swiper ul li a img{width: 100%;} #sec1 .swiper ul li .txt_area{padding-top: 15px;} #sec1 .swiper ul li .txt_area p{font-family: 'Noto Sans KR', sans-serif;} #sec1 .swiper ul li .txt_area p.big{color: #222;font-size: 28px; font-weight: 500; margin-bottom: 13px;} #sec1 .swiper ul li .txt_area p.small{color: #999999; font-size: 17px; font-weight: 400;} #sec1 .swiper .btn_wrap{padding: 30px; position: absolute; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: max-content;display: flex; align-items: center;} #sec1 .swiper .btn_wrap>*{} #sec1 .swiper .btn_wrap>ul{display: flex; align-items: center;gap: 3px;} #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 li:has(.swiper-pagination){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-left: 8px;} #sec1 .swiper .btn_wrap .control a{cursor: pointer; display: flex;transition: all .1s; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid #afafaf;} #sec1 .swiper .btn_wrap .control a.clicked{ background-color: rgb(233, 233, 233);} #sec1 .swiper .btn_wrap .control a img{} #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;padding: 10px 0;} #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:hover {box-shadow: 0 0 10px #e0e0e0; transform: scale(1.01);} #sec2_1 .item-wrap .item-cont .item-list .thumb {width: 90px;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: 20px 0 20px;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 */ #sec2{} #sec2 .sec_inner{} #sec2 .sec_inner ul{display: flex; flex-wrap: nowrap; justify-content: space-between;} #sec2 .sec_inner ul li{} #sec2 .sec_inner ul li a{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;} #sec2 .sec_inner ul li a img{display: inline-block; border-radius:15px; } #sec2 .sec_inner ul li a img:hover{opacity:.8} #sec2 .sec_inner ul li a p{ font-family: 'Noto Sans KR', sans-serif; color: #333333; font-size: 15px; font-weight: 500;} /* 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,.sec5_cate){margin-bottom: 45px;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_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,.sec5_cate) ul li{width: 19%;float: left;clear: both;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_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,.sec5_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,.sec5_cate) ul li.on>a {color: #e76d26;font-weight: 600;} :is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul li a img:hover{opacity: 1; box-shadow:0px 0px 5px #9e9e9e;} :is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd){} :is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div{display: none; position:relative;opacity:0; transition:opacity .5s} :is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div.show{display: block;} :is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div.act{opacity:1} #sec3 {background:#f7f7f7; padding: 100px 0; margin-bottom: 0;} #sec3 .item_list .thumb>a:before {background-color:unset;} #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'); z-index:100;} #sec5 .side_bn p {font-size: 2em; font-weight: 600; margin-top: 50px;} #sec5 .side_bn a {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 {background: #1b1b1b;} #sec6 {background: #38d466;;} :is(#sec4,#sec6){height: 450px;} :is(#sec4,#sec6) .sec_inner{} :is(#sec4,#sec6) .sec_inner a{display: block; width: 100%; text-align:center;} :is(#sec4,#sec6) .sec_inner a img{} #sec6 {margin-bottom:0;} #sec7{} #sec7 .sec_inner{} #sec7 .sec_inner .sec7_cont{display: flex; justify-content: space-between; gap:40px } #sec7 .sec_inner .sec7_cont>div{ width: calc((100% - 40px) / 2);} #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: 20px 0; margin-top:40px} #sec7 .sec_inner .sec7_cont>div ul.item_cont li{display:flex; flex-wrap: nowrap; gap: 20px; width: 50%;} #sec7 .sec_inner .sec7_cont>div ul.item_cont li .thumb{width: 110px; height: 110px;} #sec7 .sec_inner .sec7_cont>div ul.item_cont li .info{flex-grow: 1; padding:0; display:flex; justify-content:center; flex-direction:column;} #sec7 .sec_inner .sec7_cont>div .more_item a{width: 100%;} #sec8 {} #sec8 .sec_inner{height:auto; margin-bottom:200px;} #sec8 .sec_inner .sec8_cont{position:relative;height: 1150px;} #sec8 .sec_inner .sec8_cont > div {float:left;position:absolute;} #sec8 .sec_inner .sec8_cont > div:nth-child(1) {top: 0px; left: 0px;} #sec8 .sec_inner .sec8_cont > div:nth-child(2) {top: 0px; left: 50%; margin-left:-250px;} #sec8 .sec_inner .sec8_cont > div:nth-child(3) {top: 0px; right: 0px;} #sec8 .sec_inner .sec8_cont > div:nth-child(4) {top: 560px; left: 0px;} #sec8 .sec_inner .sec8_cont > div:nth-child(5) {top: 360px; left:50%; margin-left:-250px;} #sec8 .sec_inner .sec8_cont > div:nth-child(6) {top: 460px; right: 0px;} #sec8 .sec_inner .sec8_cont div a img {border-radius:20px} #sec8 .sec_inner .sec8_cont div:nth-child(1) a img {width:500px; height:500px;} #sec8 .sec_inner .sec8_cont div:nth-child(2) a img {width:500px; height:300px;} #sec8 .sec_inner .sec8_cont div:nth-child(3) a img {width:500px; height:400px;} #sec8 .sec_inner .sec8_cont div:nth-child(4) a img {width:500px; height:500px;} #sec8 .sec_inner .sec8_cont div:nth-child(5) a img {width:500px; height:700px;} #sec8 .sec_inner .sec8_cont div:nth-child(6) a img {width:500px; height:600px;} #sec8 .sec_inner .sec8_cont div p.big {text-align:center; font-size:18px; font-weight:500; margin-top:10px;} #sec8 .sec_inner .sec8_cont .more_item{} #sec9{background:#f7f7f7;} #sec9 .ifm_margin {width:326px; height:100px;} #sec9 iframe{width:326px; height:579px; border-radius:20px !important; border:1px solid rgb(219, 219, 219);} #sec9 .sec_inner{padding:0} #sec9 .sec_inner .sec9_cont{} #sec9 .sec_inner .sec9_cont ul{margin-bottom: 30px;} #sec9 .sec_inner .sec9_cont ul li{width:68%} #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;} #sec9 .sec_inner .sec9_cont .more_item{} /* BASIC css end */