/* BASIC css start */ /* 메인페이지 상품 가격 밑 이벤트 문구 #sec4 .item-wrap .item-cont .item-list .prd-price .price-add-text {display: none;} none 풀어서 사용 */ /* 메인페이지 가격 할인 표시 #sec4 .item-wrap .item-cont .item-list .prd-price strike {font-weight:800; color:#f57070;} */ /* 섹션공통 */ .section{margin-bottom: 10px;} .sec_inner{width: 1500px;margin: 0 auto;} .section h2{font-family: 'Montserrat', sans-serif; font-size: 26px; color: #000; font-weight: 700; margin-bottom: 50px; line-height: 1.3;} .section h2:has(a){display: flex; justify-content: space-between; align-items: center;} .section h2:has(a) a{text-decoration: underline; color: #000;font-family: 'Montserrat', sans-serif; font-size: 13px;font-weight: 600;} /* sec1 */ #sec1{} #sec1 .swiper{} #sec1 .swiper ul{} #sec1 .swiper ul li{position: relative;} #sec1 .swiper ul li>a{display: block;width: 100%;} #sec1 .swiper ul li>a>img{width: 100%;} #sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); padding-left: 80px;} #sec1 .swiper ul li .area2{overflow: visible; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); padding-left: 160px;} #sec1 .swiper ul li .area3{overflow: visible; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); padding-left: 160px; color:#fff;} #sec1 .swiper ul li .txt_area p.big-wh{font-size: 26px; color: #fff; font-weight: 800; transition: all .5s;line-height: 1.3; margin-bottom: 20px;} #sec1 .swiper ul li .txt_area p.sub-wh{color: #fff; font-size: 17px; font-weight: 500; transition: all .4s; transition-delay: .25s; line-height: 1.6;} #sec1 .swiper ul li .txt_area p{ font-family: 'Montserrat', sans-serif; opacity: 0;} #sec1 .swiper ul li .txt_area.act p{transform: translateY(30px); opacity: 1;} #sec1 .swiper ul li .txt_area.act a.more{transform: translateY(30px); opacity: 1;} #sec1 .swiper ul li .txt_area p.big{font-size: 26px; color: #000; font-weight: 800; transition: all .5s;line-height: 1.3; margin-bottom: 20px;} #sec1 .swiper ul li .txt_area p.bold{font-family:"Gloock", serif; font-size: 42px; color: #000; font-weight: 600; letter-spacing: 2px; transition: all .5s;line-height: 1.3; margin-bottom: 10px;} #sec1 .swiper ul li .txt_area p.sub{color: #000; font-size: 17px; font-weight: 500; transition: all .4s; transition-delay: .25s; line-height: 1.6;} #sec1 .swiper ul li .txt_area p.sub2{color: #343434; font-family:"Noto Sans KR", sans-serif; font-size: 20px; font-weight: 400; transition: all .4s; transition-delay: .25s; line-height: 1.6;} #sec1 .swiper ul li .txt_area a.more{ font-family:"Gloock", serif; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; letter-spacing:1px; background-color:#000; /* border: 1px solid #000 ; */ padding: 10px 30px; color: #fff; font-size: 16px; font-weight: 400; margin-top: 30px;} /*-- #sec1 .swiper ul li .txt_area a.more:hover{background-color: #000; color: #fff;} --*/ #sec1 .swiper-pagination{width: auto; top: 50%; right: 50%; bottom: unset; left: unset; z-index: 19; transform: translateX(750px);} #sec1 .swiper-pagination-bullet{background-color: #000; display: block;margin: 10px 0;} #sec1 .swiper_btn_next{position: absolute; bottom: 40px; z-index: 10; left: 50%; transform: translateX(-50%); cursor: pointer;} #sec1 .swiper-button-disabled{opacity: .3;} /* gif sec : gif 배너 바디워시 */ #gif-sec { width:100%; height: auto; position: relative; margin-top:10px; display: none;} #gif-sec .gif-container {width: 100%;height: auto;} #gif-sec .gif-container .inner-gif { position: absolute; left:150px; bottom:100px; width:860px; height: auto; box-shadow: 3px 3px 10px #4b4b4b9d;} #gif-sec .gif-container .inner-text {position: absolute; right :280px; bottom:180px; width:500px; height: auto; color: #333; text-decoration: none;} #gif-sec .gif-container .inner-text > a{color: #e1dfd7; text-decoration: none; } #gif-sec .gif-container .inner-text > a > h2 {font-size: 40px; font-weight:600; color:#e1dfd7;} #gif-sec .gif-container .inner-text > a > h3 {font-size: 80px; line-height: 80px; margin-top: 10px; margin-bottom:40px; font-weight:800; color:#e1dfd7;} #gif-sec .gif-container .inner-text > a > p { font-size: 18px;} #gif-sec .gif-container .inner-text > a > p2 {margin-top: 40px; font-size: 20px; font-weight:600;} /* sec2 : sec2 : 추천상품 스와이퍼 아이템 제작중 */ .swiper-hot-item {background-color: #f3f1ed;} .swiper-hot-item > img {text-align:center; margin-left:auto; margin-right:auto; display:block; margin-top:50px; } .swiper-hot-item .swiper {width:1600px; height:530px; margin-bottom:50px; padding-top:20px; } .ht-item {background-color:#transparent;} .sec2-name {font-size:30px; font-weight:500; padding-top: 60px; padding-bottom:80px; width:1600px; margin: auto; auto; text-align: center; letter-spacing:5px;} .img-wrapper {position : relative; width :100%; background-color:#f3f1ed;} .img-wrapper >a {display :block ; overflow : hidden; cursor : pointer ; position:relative; width:100%; } .img-wrapper > a > img { width: 100%;} .text-wrapper {text-align : center; margin-top :20px;} .brand-sec {font-size:15px; font-weight :500 ; padding-bottom : 5px;} .pd-name-sec {font-size:14px; font-weight :400; color:#343434; padding-bottom : 5px;} .price-sec {font-size :14px; font-weight :500;} .ht-item-scroll { height:4px !important; background:#fff; border-top: 1px solid #fff; border-bottom: 1px solid #e8e8e8; } .ht-item-scroll .swiper-scrollbar-drag {background : #d7d3ba;} /* brand sec */ #brand-4col-sec {width:100%; height:715px; display:flex; justify-content:center; gap:10px; } #brand-4col-sec .brand-4col-container {width:460px; height:715px; position:relative; } #brand-4col-sec .brand-4col-container .col-1 {background-image:url('http://andbeauty.img15.kr/MainPage/BRAND%20SEC/OKORU_BACK_460.jpg'); height:715px;} #brand-4col-sec .brand-4col-container .col-2 {background-image:url('http://andbeauty.img15.kr/MainPage/BRAND%20SEC/BYOLEE_BACK_460.jpg'); height:715px;} #brand-4col-sec .brand-4col-container .col-3 {background-image:url('http://andbeauty.img15.kr/MainPage/BRAND%20SEC/MTS_BACK_460.jpg'); height:715px;} #brand-4col-sec .brand-4col-container .col-4 {background-image:url('http://andbeauty.img15.kr/MainPage/BRAND%20SEC/LUMI_BACK_460.jpg'); height:715px;} #brand-4col-sec .brand-4col-container p2{font-size:15px;color:#fff; font-weight:600; padding-bottom:10px; text-align:center; line-height:18px;} #brand-4col-sec .brand-4col-container span2 {font-size:12px; color:#fff; font-weight:400; padding-bottom:20px; text-align:center; line-height:15px; } #brand-4col-sec .brand-4col-container .brand-inner-sec {position:absolute; width:350px; height:auto; left:50px; bottom:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; opacity:0.7; transition:all 0.85s ease-in-out;} #brand-4col-sec .brand-4col-container .brand-inner-sec:hover {opacity:1; scale:1.1; } #brand-4col-sec .brand-4col-container .brand-inner-sec > img {height:50px; object-fit:cover; } #brand-4col-sec .brand-4col-container .brand-inner-sec > p {font-size:25px; color:#fff; font-weight:400; padding-top:10px; padding-bottom:20px; text-align:center;} #brand-4col-sec .brand-4col-container .brand-inner-sec > span {font-size:14px; color:#fff; font-weight:400; padding-bottom:20px; text-align:center; line-height:20px; } #brand-4col-sec .brand-4col-container .brand-inner-sec .inner-enter {margin:0 auto; width:350px; height:30px; background-color:#fff; text-align:center; } #brand-4col-sec .brand-4col-container .brand-inner-sec .inner-enter >h2 {font-size:12px; font-weight:800; line-height:30px; color:#2C2C2C;} #brand-4col-sec .brand-4col-container .brand-inner-sec2 {position:absolute; width:350px; height:auto; right:50px; bottom:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; opacity:0.7; transition:all 0.85s ease-in-out;} #brand-4col-sec .brand-4col-container .brand-inner-sec2:hover {opacity:1; scale:1.1; } #brand-4col-sec .brand-4col-container .brand-inner-sec2 > img {height:50px; object-fit:cover; } #brand-4col-sec .brand-4col-container .brand-inner-sec2 > p {font-size:25px; color:#fff; font-weight:400; padding-top:10px; padding-bottom:20px; text-align:center;} #brand-4col-sec .brand-4col-container .brand-inner-sec2 > span {font-size:14px; color:#fff; font-weight:400; padding-bottom:30px; text-align:center; line-height:20px; } #brand-4col-sec .brand-4col-container .brand-inner-sec2 .inner-enter {margin:0 auto; width:350px; height:30px; background-color:#fff; text-align:center; } #brand-4col-sec .brand-4col-container .brand-inner-sec2 .inner-enter >h2 {font-size:12px; font-weight:800; line-height:30px; color:#2C2C2C;} #brand-4col-sec .brand-4col-container .brand-inner-sec3 {position:absolute; width:350px; height:auto; left:50px; bottom:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; opacity:0.7; transition:all 0.85s ease-in-out;} #brand-4col-sec .brand-4col-container .brand-inner-sec3:hover {opacity:1; scale:1.1;} #brand-4col-sec .brand-4col-container .brand-inner-sec3 > img {height:50px; object-fit:cover; } #brand-4col-sec .brand-4col-container .brand-inner-sec3 > p {font-size:25px; color:#fff; font-weight:400; padding-top:10px; padding-bottom:20px; text-align:center;} #brand-4col-sec .brand-4col-container .brand-inner-sec3 > span {font-size:14px; color:#fff; font-weight:400; padding-bottom:30px; text-align:center; line-height:20px; } #brand-4col-sec .brand-4col-container .brand-inner-sec3 .inner-enter {margin:0 auto; width:350px; height:30px; background-color:#fff; text-align:center; } #brand-4col-sec .brand-4col-container .brand-inner-sec3 .inner-enter >h2 {font-size:12px; font-weight:800; line-height:30px; color:#2C2C2C;} #brand-4col-sec .brand-4col-container .brand-inner-sec4 {position:absolute; width:350px; auto; left:50px; bottom:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; opacity:0.7; transition:all 0.85s ease-in-out;} #brand-4col-sec .brand-4col-container .brand-inner-sec4:hover {opacity:1; scale:1.1;} #brand-4col-sec .brand-4col-container .brand-inner-sec4 > img { height:50px; object-fit:cover; } #brand-4col-sec .brand-4col-container .brand-inner-sec4 > p {font-size:25px; color:#fff; font-weight:400; padding-top:10px; padding-bottom:20px; text-align:center;} #brand-4col-sec .brand-4col-container .brand-inner-sec4 > span {font-size:14px; color:#fff; font-weight:400; padding-bottom:30px; text-align:center; line-height:20px; } #brand-4col-sec .brand-4col-container .brand-inner-sec4 .inner-enter {margin:0 auto; width:350px; height:30px; background-color:#fff; text-align:center; } #brand-4col-sec .brand-4col-container .brand-inner-sec4 .inner-enter >h2 {font-size:12px; font-weight:800; line-height:30px; color:##2C2C2C;} /* bn-sec : 메인배너 */ #bn-sec {margin:0px auto; width:100%; position:relative;} #bn-sec .bn-container {width:100%; position: relative;} #bn-sec .bn-inner-wrapper {width:450px; height:250px; position:absolute; left:448px; top:530px;display:flex; justify-content:flex-start; } #bn-sec .mg{margin-right:30px;} #bn-sec .bn-inner-item {width:130px; height:250px;} #bn-sec .bn-inner-img{background-image:url('/shopimages/andbeauty/011003000010.jpg?1724371745'); background-size:cover; height:130px; background-color:#ddd9d3; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.12);} #bn-sec .bn-inner-img2{background-image:url('/shopimages/andbeauty/011003000011.jpg?1724371734'); background-size:cover; height:130px; background-color:#ddd9d3; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.12);} #bn-sec .bn-inner-img3{background-image:url('/shopimages/andbeauty/011003000009.jpg?1724371759'); background-size:cover; height:130px; background-color:#ddd9d3; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.12);} #bn-sec .bn-inner-img:hover {box-shadow:0 3px 3px rgba(0,0,0,0.24);} #bn-sec .bn-inner-img:hover+.bn-inner-text > p {color:#ff9000;} #bn-sec .bn-inner-text > p :hover {color:#ff9000;} #bn-sec .bn-inner-text {padding-top:5px;} #bn-sec .bn-inner-text > p {color:#fff2da;} #bn-sec .bn-inner-text .inner-brand {font-size:16px; font-weight:600; padding:2px 0px;} #bn-sec .bn-inner-text .inner-pdname {font-size:15px; padding-bottom:3px;} #bn-sec .bn-inner-text .inner-price {font-size:16px; font-weight:600;} /* sec3 : 리뷰스와이퍼 */ .review-swiper {margin-top:50px;} .review-swiper .swiper {width:1600px; height:600px; margin-bottom:100px;} .review-item-box {background-color:#fff;} .sec3-name {font-size:30px; font-weight:500; padding-top: 100px; padding-bottom:60px; width:1600px; margin: auto; auto; text-align: center; letter-spacing:5px;} .review-swiper > .img-wrapper {position : relative; width :100%;} .review-swiper > .img-wrapper > a {display :block ; overflow : hidden; cursor : pointer ; position:relative; width:100%; } .review-swiper > .img-wrapper > a > img { width: 100%;} .rv-item{background-color:#fefefe;} .rv-item-img {height:400px; object-fit:cover; filter:brightness(0.6);} .rv-text-wrapper {text-align : center; margin-top:40px;} .rv-stars {font-size:15px; color:#ffd116; margin-bottom:10px; letter-spacing:2px; } .rv-title {font-size:25px; font-weight :500 ; padding-bottom : 15px; color:#fff;} .rv-opnion {font-size:15px; font-weight :400; color:#fff; padding-bottom : 20px; line-height:25px;} .rv-product {font-size :13px; font-weight :500; color: #efefef;} .img-cover-text { position:absolute; top:30%; left:50%; width:80%; transform: translate(-50%,-50%); margin:0;} .rv-border {border: solid 0.5px #6c6c6c; margin-top:20px;} .rv-pd-area { margin-top:20px; width:100%; display : flex;} .rv-pd-area > a { width:100%; display:flex;} .rv-pd-area > ul {margin-left : 10px ; left: 10px;} .rv-pd-img { width:100px; height:100px; background-image:; background-repeat:no-repeat; background-size: cover;} .rv-pd-brand {font-size:15px; font-weight:600; margin-bottom:5px; margin-top:5px;} .rv-pd-name {font-size : 15px; margin-bottom:5px} .rv-pd-move {font-size : 13px;} .rv-scroll { height:2px !important; background:#fff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; width:30%;} .rv-scroll .swiper-scrollbar-drag {background : brown;} .rv-pgn {margin:0px;} .rv-pgn .swiper-pagination-bullet {width:25px; height:2px; border-radius:0%; margin:0px !important; background:#918c73;} .rv-pgn .swiper-pagination-bullet-active {background:#d7d3ba; height:4px;} /* sec4 */ #sec4 .cateTit {padding-bottom:60px; padding-top:0px;} #sec4 .cateTit h1 {font-size:30px; font-weight:500; letter-spacing:5px;} #sec4 .item-cont {margin:auto; width:1600px; display:flex; justify-content:start;} #sec4 .item-cont .item-list {padding:0px; float:none; margin-right:20px; width:385px;} #sec4 .item-wrap .item-cont .item-list .thumb {width:300px; height:auto;} #sec4 .item-wrap .item-cont .item-list .thumb img {width:100%; height:auto;} #sec4 .item-wrap .item-cont .item-list .prd-preview {display:none;} #sec4 .item-wrap .item-cont .item-list .prd-wish {display:none;} #sec4 .item-wrap .item-cont .item-list .prd-name {padding:0;} #sec4 .item-wrap .item-cont .item-list .prd-name a {color:#404040; line-height:20px; font-size:13px;} #sec4 .item-wrap .item-cont .item-list .prd-engname a {color:#404040; line-height:20px; font-size:12px;} #sec4 .item-wrap .item-cont .item-list .prd-price strike {font-weight:800; color:#f57070;} #sec4 .item-wrap .item-cont .item-list .prd-price .price-add-text {display: none;} #sec4 .item-wrap .item-cont .item-list .prd-price .price-add-text {color:#404040; line-height:20px; font-size:12px;font-weight:600; } /* sec:insta*/ .insta-wrap{width: 100%; height: auto; margin-top: 50px;} .insta-logo-area {width: 100%; text-align: center;} .insta-logo-area > img {text-align: center; width: 150px; margin-bottom: 20px; } .insta-logo-area > div { background-color: #bfbfbf; padding:0px 10px; color: #efefef; font-size: 15px; font-style: italic; width: 120px; margin: auto; border-radius: 20px; height:35px; line-height: 35px; } .insta-grid-container{ width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: minmax(220px,auto); /* gap: 10px; */ margin-top: 30px; margin-bottom: 100px; } .insta-grid-item{ background-color: bisque; background-size: cover; } .insta-grid-item:nth-child(1) { grid-column: 1/3; grid-row: 1/3; background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg1.jpg"); background-position: 10% 80%; } .insta-grid-item:nth-child(2) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg2.jpg"); background-position: 0% 50%; } .insta-grid-item:nth-child(3) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg3.jpg"); background-position: 0% 50%; } .insta-grid-item:nth-child(4) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg4.jpg"); background-position: 0% 50%; } .insta-grid-item:nth-child(5) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg5.jpg"); background-position: 0% 30%; } .insta-grid-item:nth-child(6) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg6.jpg"); background-position: 0% 90%; } .insta-grid-item:nth-child(7) { background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg7.jpg"); background-position: 0% 30%; } .insta-grid-item:nth-child(8) { grid-column: 5/7; grid-row: 2; background-image: url("http://andbeauty.img15.kr/MainPage/insta_img/insta%2Dimg8.jpg"); background-position: 0% 95%; } /* BASIC css end */