/* BASIC css start */ /* 상품진열 순위 */ .prd-list .thumb .num {position:absolute;top:-45px;left:0;z-index:6;font-size:20px;font-family:'Roboto', sans-serif; font-weight:700; line-height:1;color:#333; padding:0 0px 5px;border-bottom: 2px solid #222;} .main_title {border-top:1px solid #ededed;padding-top:60px;} /* 타이틀, 중분류 리스트 */ #productClass .cate-wrap .bcate {min-height:30px; margin:60px 0 25px;text-align:center;padding:0; color:#000; font-size:24px;line-height:1;font-weight:700;font-family:'Raleway','Nanum Gothic',sans-serif; } #productClass .cate-wrap { overflow:hidden; text-align:center; } #productClass .cate-wrap .class-list ul { float:left; } #productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' } #productClass .cate-wrap .class-list ul li {display:inline-block;width:160px; margin:3px; padding:0; font-size:14px; line-height:14px; vertical-align:top; } #productClass .cate-wrap .class-list ul li a {padding:17px 0;font-weight:500;color:#777; font-family:'Nanum Gothic'; font-size:20px; background:none;border:1px solid #e5e5e5;letter-spacing:-0.025em;display:block;-webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; text-align:center;} #productClass .cate-wrap .class-list ul li a.sel, #productClass .cate-wrap .class-list ul li a:hover {color:#000; text-decoration:none;border:1px solid #222; font-weight:600;} /* 타이틀, 중분류 리스트 */ .item-wrap .item-info { zoom: 1; overflow:hidden; padding:20px 10px 20px; margin-bottom:40px;border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;} .item-wrap .item-info .item-order li a {-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;} .item-wrap .item-info .item-order li a:hover {color:#000;} #main_title { font-size:2.3em; padding-top:65px; font-weight:600; text-align:center; } #wrapper { padding-top:100px; } #frame { max-width:100%; height:100%; background:#ffffff; position:relative; } .shopdesc { font-size:1.2em; font-weight:700; padding-top:20px; text-align:center; } .shoptitle { font-size:1.6em; font-weight:500; padding-top:15px; text-align:center; } .relativetitle { font-size:1.6em; padding-top:20px; } .img-wrapper { max-width:100%; height:auto; position:relative; cursor:pointer; } .img-wrapper img { max-width:100%; height:auto; width:inherit; height:inherit; } #tit2_out{ width:100%; text-align:center; padding-top:15px; padding-bottom:10px; } #tit2_in { display:inline-block; width:30%; border:1px solid #121212; height 100px; font-size:1.0em; } /* 샵이미지1_버튼 */ .btn-plus1_1 { position:absolute; top: 65%; left:7%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_2 { position:absolute; top: 73%; left:25%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_3 { position:absolute; top: 47%; left:18%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_4 { position:absolute; top: 65%; left:50%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_5 { position:absolute; top: 73%; left:65%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_6 { position:absolute; top: 42%; left:25%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_7 { position:absolute; top: 48%; left:40%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_8 { position:absolute; top: 37%; left:35%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_9 { position:absolute; top: 35%; left:46%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_10 { position:absolute; top: 42%; left:57%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_11 { position:absolute; top: 23%; left:85%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus1_1 span { font-size:3.2em; color:#ff0084; } .btn-plus1_2 span { font-size:3.2em; color:#ff0084; } .btn-plus1_3 span { font-size:3.2em; color:#ff0084; } .btn-plus1_4 span { font-size:3.2em; color:#ff0084; } .btn-plus1_5 span { font-size:3.2em; color:#ff0084; } .btn-plus1_6 span { font-size:3.2em; color:#ff0084; } .btn-plus1_7 span { font-size:3.2em; color:#ff0084; } .btn-plus1_8 span { font-size:3.2em; color:#ff0084; } .btn-plus1_9 span { font-size:3.2em; color:#ff0084; } .btn-plus1_10 span { font-size:3.2em; color:#ff0084; } .btn-plus1_11 span { font-size:3.2em; color:#ff0084; } /* 추가된 부분 */ .img-wrapper:hover .btn-plus1_1 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_2 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_3 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_4 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_5 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_5 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_6 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_7 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_8 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_9 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_10 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus1_11 { opacity:1; transform:scale(1); } .swiper1 {width:96%;margin:0 auto; } .swiper1 .swiper-slide li { float:left; border:1px solid #424242; padding:5px; border-radius: 10px; } .swiper1 .swiper-slide li img {width:100%;} /* 샵이미지1_버튼 */ .btn-plus2_1 { position:absolute; top: 67%; left:92%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus2_2 { position:absolute; top: 77%; left:68%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus2_3 { position:absolute; top: 50%; left:47%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus2_4 { position:absolute; top: 55%; left:68%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus2_5 { position:absolute; top: 37%; left:35%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus2_1 span { font-size:3.2em; color:#ff0084; } .btn-plus2_2 span { font-size:3.2em; color:#ff0084; } .btn-plus2_3 span { font-size:3.2em; color:#ff0084; } .btn-plus2_4 span { font-size:3.2em; color:#ff0084; } .btn-plus2_5 span { font-size:3.2em; color:#ff0084; } /* 추가된 부분 */ .img-wrapper:hover .btn-plus2_1 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus2_2 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus2_3 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus2_4 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus2_5 { opacity:1; transform:scale(1); } .swiper2 {width:96%;margin:0 auto; } .swiper2 .swiper-slide li { float:left; border:1px solid #424242; padding:5px; border-radius: 10px; } .swiper2 .swiper-slide li img {width:100%;} /* 샵이미지1_버튼 */ .btn-plus3_1 { position:absolute; top: 85%; left:25%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_2 { position:absolute; top: 89%; left:43%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_3 { position:absolute; top: 64%; left:22%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_4 { position:absolute; top: 58%; left:38%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_5 { position:absolute; top: 33%; left:32%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_6 { position:absolute; top: 32%; left:20%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_7 { position:absolute; top: 70%; left:60%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_8 { position:absolute; top: 38%; left:55%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_9 { position:absolute; top: 23%; left:55%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_10 { position:absolute; top: 70%; left:69%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_11 { position:absolute; top: 33%; left:66%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_12 { position:absolute; top: 29%; left:73%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_13 { position:absolute; top: 31%; left:79%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_14 { position:absolute; top: 35%; left:90%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_15 { position:absolute; top: 50%; left:86%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_16 { position:absolute; top: 60%; left:82%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_17 { position:absolute; top: 80%; left:88%; width:5px; height:5px; border-radius:50%; text-align:center; } .btn-plus3_1 span { font-size:3.2em; color:#ff0084; } .btn-plus3_2 span { font-size:3.2em; color:#ff0084; } .btn-plus3_3 span { font-size:3.2em; color:#ff0084; } .btn-plus3_4 span { font-size:3.2em; color:#ff0084; } .btn-plus3_5 span { font-size:3.2em; color:#ff0084; } .btn-plus3_6 span { font-size:3.2em; color:#ff0084; } .btn-plus3_7 span { font-size:3.2em; color:#ff0084; } .btn-plus3_8 span { font-size:3.2em; color:#ff0084; } .btn-plus3_9 span { font-size:3.2em; color:#ff0084; } .btn-plus3_10 span { font-size:3.2em; color:#ff0084; } .btn-plus3_11 span { font-size:3.2em; color:#ff0084; } .btn-plus3_12 span { font-size:3.2em; color:#ff0084; } .btn-plus3_13 span { font-size:3.2em; color:#ff0084; } .btn-plus3_14 span { font-size:3.2em; color:#ff0084; } .btn-plus3_15 span { font-size:3.2em; color:#ff0084; } .btn-plus3_16 span { font-size:3.2em; color:#ff0084; } .btn-plus3_17 span { font-size:3.2em; color:#ff0084; } /* 추가된 부분 */ .img-wrapper:hover .btn-plus3_1 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_2 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_3 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_4 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_5 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_6 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_7 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_8 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_9 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_10 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_11 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_12 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_13 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_14 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_15 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_16 { opacity:1; transform:scale(1); } .img-wrapper:hover .btn-plus3_17 { opacity:1; transform:scale(1); } .swiper3 {width:96%;margin:0 auto; } .swiper3 .swiper-slide li { float:left; border:1px solid #424242; padding:5px; border-radius: 10px; } .swiper3 .swiper-slide li img {width:100%;} /* BASIC css end */