/*하카 쇼핑몰 CSS*/ #shop_banners__wrap {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;} #shop_banners__wrap a {display: block; width: 50%; overflow: hidden;} #shop_banners__wrap a img {width: 100%;} .shop_section {} .shop_contents {max-width:1440px; margin: 0 auto;} @media (max-width: 1440px) { .shop_contents {padding-left: 20px; padding-right: 20px;} } .detail_img .pc {display: block;} .detail_img .mobile {display: none;} @media (max-width: 980px) { .detail_img .pc {display: none !important;} .detail_img .mobile {display: block !important; } .shop_contents {padding-left: 15px; padding-right: 15px; position: relative; z-index: 10; background-color: transparent !important; } #shop_banners__wrap {position: sticky; top: 85px; left: 0; z-index:1;} } button.shop-btns {width: 50px; height: 50px; border: 1px solid #efefef; background-size: 15px; text-indent: -99999px; border-radius: 100%; cursor: pointer; background-color: transparent; background-position: center; background-repeat: no-repeat;} button.add_cart {background-image: url(/images/icon/cart_b.png); background-color: #fff; background-size: 30px;} button.like {background-image: url(/images/icon/icon-like-b.png);} button.buy {width: 485px; height: 60px; border-radius: 50px; box-sizing: border-box; font-size: 15px; color: #fff; background: #000;} button.more_info {width: 300px; height: 60px; border-radius: 50px; box-sizing: border-box; font-size: 15px; color: #000; background-color: #fff; border: 1px solid #000; margin: 0 auto; display: block;} button.more_info span {background-image: url("/images/icon/btn_unfold.png"); background-repeat: no-repeat; background-position: center right; padding-right:25px; font-family: 'NotoSans-Light', sans-serif; font-weight: 600; background-size: 14px; } button.more_info.download span {background-image: url("/images/icon/icon-down-b.png"); background-size: 25px; padding-right: 30px;} button.res-cart {width: 100%; height: 60px; border-radius: 50px; box-sizing: border-box; font-size: 15px; color: #fff; background: #000; } .action_btns {position: relative; width: 100%; justify-content: space-between; display: flex; flex-wrap: wrap;} /*컬러옵션*/ ul.color_option {display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 15px;} ul.color_option li {margin-right: 5px; font-weight: 600;} ul.color_option li span {position: relative; display: block; width: 13px; height: 13px; border-radius: 100%; box-sizing: border-box;} span.red {background: #dd7575;} span.blue {background: #7f9bd6;} span.green {background: #80c269;} span.yellow {background: #fff45c; } span.black {background: #232124;} span.white {background: #fff; border: 1px solid #eee} span.pink {background: #f382a0;} span.violet {background: #472e65;} span.silver {background: #dee2e9;} span.brown {background: #6c5b4b;} span.gray {background: #7b839a} /*== 리스트형 라디오&체크박스 ==*/ ul.multi_line {box-sizing:border-box; display: flex; flex-wrap: wrap;} ul.multi_line li {position:relative; cursor: pointer;} ul.multi_line li input[type="radio"] {display:none;} ul.multi_line li input[type="radio"] + label {position: relative; width: 13px; height: 13px; border-radius: 100%; box-sizing: border-box; cursor: pointer;} /*ul.multi_line li input[type="radio"] + label span::after {display: none; width: 19px; height: 19px; border-radius: 100%; border: 1px solid #000; background-color: transparent; content: ''; position: absolute; top: -4px !important; left: -2px !important;}*/ ul.multi_line li input[type="radio"]:checked + label {} ul.add_option{display: flex; justify-content: space-around;} ul.add_option li{position: relative; cursor: pointer; margin-right: 20px;} ul.add_option li:last-child{margin-right: 0} ul.add_option li label {position: relative; cursor: pointer;} ul.add_option li label input[type="checkbox"] {display:none;} ul.add_option li label i {position: relative; display: inline-block; width:19px; height: 19px; border-radius: 100%; background-color: #fff; border: 1px solid #aaa; margin-right: 6px;} ul.add_option li label i::after {display: none; position: absolute; top: 3px; left: 3px; width:11px; height: 11px; border-radius: 100%; background-color: #555; margin-right: 6px; content: '';} ul.add_option li label input[type="checkbox"]:checked + i::after {display:block;} ul.add_option li label span {position: relative; font-size: 15px; color: #555; font-weight: 300;} ul.multi_line li label span::after {display: none; width: 19px; height: 19px; border-radius: 100%; border: 1px solid #000; background-color: transparent; content: ''; position: absolute; top: -2px; left: -2px; /*top:50%; left: 50%; transform: translate(-50%,-50%);*/} ul.multi_line li input[type="radio"]:checked + label span::after {display: block;} @media only screen and (max-width: 980px){ button.more_info {height: 50px; font-size: 14px;} button.buy {width: 50px; height: 50px;} button.res-cart {display: block;} /* .action_btns button.buy {display: none} .action_btns button.add_cart {display: none}*/ } @media only screen and (max-width: 768px){ #item_infoList .action_btns {padding-right: 0} button.buy {width: 40px; height: 40px;} button.more_info {height: 40px; font-size: 13px; width: 230px;} button.more_info span {background-size:12px; } button.shop-btns {width: 40px; height: 40px; background-size: 12px} ul.add_option li{margin-right: 10px;} ul.add_option li label i {width:15px; height: 15px; margin-right: 4px;} ul.add_option li label i::after {top: 2px; left: 2px; width:9px; height: 9px;} ul.add_option li label span {font-size: 13px; color: #555; font-weight: 300;} } /* 제품리스트페이지 =======================================================================================================*/ /*상품리스트 상단 비주얼*/ #shop_visual {position: relative; padding: 0;} .shop_visual-slider {width: 100%; overflow: hidden;} .shop_visual-slider .swiper-slide {position: relative;} .shop_visual-slider .swiper-slide.sv1 {background: #000} .shop_visual-slider .swiper-slide.sv2 {background: #f7f3f2} .shop_visual-slider .swiper-slide .bg {} .shop_visual-slider .swiper-slide .bg img {width: 100%} .shop_visual-slider .swiper-slide .text {width: 55%; position: absolute; top: 0; left: 0; height: 100%; display: table; box-sizing: border-box; padding:0 80px;} .shop_visual-slider .swiper-slide .text .text_wrap {display: table-cell; vertical-align: middle; width: 100%; height: 100%;} .shop_visual-slider .swiper-slide .text span.visual_btn {width: 175px; height: 50px; display: block; border-radius: 50px; box-sizing: border-box; text-align: center; line-height: 50px; font-size: 14px; color: #333; border: 1px solid #333; margin: 50px auto 0 auto;} .shop_visual-slider .swiper-slide .text p {text-align: center; font-size: 15px;} .shop_visual-slider .swiper-slide .text p strong {} .shop_visual-slider .swiper-slide .text p.mid {font-size: 24px; font-weight: 700;} .shop_visual-slider .swiper-slide .text p.small {font-size: 18px; font-weight: 700;} .shop_visual-slider .swiper-slide .text p.title {font-size:65px; font-weight: 800; font-family: 'NotoSansKR-Bold'} .shop_visual-slider .swiper-slide .text p.desc {margin: 20px 0} .shop_visual-slider .swiper-slide.sv1 {} .shop_visual-slider .swiper-slide.sv1 .text span.visual_btn {border-color:#fff; color: #fff;} .shop_visual-slider-pagination {position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 20px 0; z-index: 1;} .shop_visual-slider-pagination span {width: 10px; height: 10px; background: #000; box-sizing: border-box;} .shop_visual-slider-pagination span.swiper-pagination-bullet-active {border: 1px solid #fff;} #shop_main {padding-top: 35px;} #shop_list_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;} #shop_list_wrap h5 {color: #333; font-size: 23px; font-family: 'NotoSans-Bold',sans-serif} /*상품카테고리*/ #item_category {width: 15%;} #item_category h5 {line-height: 60px; border: 1px solid #dedede; border-width:1px 0; position: relative; box-sizing: border-box; padding-left: 15px;} #item_category h5 button {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); display: none;} #item_category h5 button.up {transform: rotate(-180deg); margin-top: -10px; right: 15px;} #item_category dl {margin: 35px 0; box-sizing: border-box; padding-left: 15px; padding-right: 15px;} #item_category dl dt a, #item_category dl dd a {color: #333; margin: 0; padding: 0; text-align: left;} #item_category dl dt {font-family: 'NotoSans-Medium'} #item_category dl dt a {font-size: 19px; } #item_category dl dd {margin: 12px 0} #item_category dl dd a {font-size: 14px;} #item_category dl dt.on a {color: #a00033;} #item_category dl dd.on a {color: #a00033;} /*상품리스트*/ #item_list_wrap {width:83%;} #item_list_wrap .arr_options {width:100%; border: 1px solid #dedede; border-width: 1px 0; display: flex; justify-content: space-between; margin-bottom: 35px;} #item_list_wrap .arr_options h5 {line-height: 60px;} #item_list_wrap .arr_options select {width: 190px; height: 60px; border:0; border-left: 1px solid #dedede; box-sizing: border-box; font-size: 14px; } #item_list {width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;} #item_list .itemBox {width: 30.5%; margin-right: 4%; margin-bottom: 60px;} #item_list .itemBox .thumb {position: relative; overflow: hidden; width: 100%; padding-bottom: 100%;} #item_list .itemBox .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} #item_list .itemBox .info {position: relative; padding: 25px 0} #item_list .itemBox .info p {text-align: left; font-family: 'NotoSans-Light'; margin-bottom: 13px; line-height: 1;} #item_list .itemBox .info p.name {font-size: 19px; font-family: 'NotoSans-Medium',sans-serif} #item_list .itemBox .info p.price {font-size: 14px; font-weight: 600;} #item_list .itemBox .info button.add_cart {position: absolute; right: 0; top: 30px;} #new-item_list_wrap {width:100%;} #new-item_list_wrap .arr_options {width:100%; border: 1px solid #dedede; border-width: 1px 0; display: flex; justify-content: space-between; margin-bottom: 35px;} #new-item_list_wrap .arr_options h5 {line-height: 60px; font-size: 20px;} #new-item_list_wrap .arr_options select {width: 190px; height: 60px; border:0; border-left: 1px solid #dedede; box-sizing: border-box; font-size: 14px; } @media all and (min-width: 980px) { #item_list .itemBox:nth-of-type(3n) {margin-right: 0} } @media all and (max-width: 980px) { #shop_visual .shop_contents {padding: 0} .shop_visual-slider{height: auto;} .shop_visual-slider .swiper-slide {overflow: hidden;/* padding-bottom: 60%;*/} .shop_visual-slider .swiper-slide .text {position: relative; top: auto; left: auto; width: 100%; height: auto; display: block; padding: 50px 15px 0 15px; box-sizing: border-box; z-index: 1;} .shop_visual-slider .swiper-slide .text .text_wrap {display: block;} .shop_visual-slider .swiper-slide .text p {font-size: 14px;} .shop_visual-slider .swiper-slide .text p img {width: 80%;} .shop_visual-slider .swiper-slide .text p.desc {margin: 15px 0} .shop_visual-slider .swiper-slide .text p.title {font-size: 45px;} .shop_visual-slider .swiper-slide .text p.mid {font-size: 19px;} .shop_visual-slider .swiper-slide .bg {transform: translateX(-58%); position: absolute; bottom: 20px; left: 0;} .shop_visual-slider .swiper-slide .bg img {width: 150%; } .shop_visual-slider .swiper-slide .text span.visual_btn {height: 40px; line-height: 40px; width: 155px; margin-top: 30px; font-size: 13px;} #shop_list_wrap {display: block;} #item_category {width: 100%; display: block;/* position: sticky; top: 84px; left: 0; z-index: 999;*/ background: #fff;} #item_category h5 {line-height: 65px;} #item_category h5 button {display: block;} #item_category dl {display: none; margin: 18px 0; flex-wrap: wrap;} #item_category dl.show {display: flex;} #item_category dl dt {margin-right: 10px; } #item_category dl dt a {font-size: 17px;} #item_category dl dd {margin: 0; margin-bottom: 13px;} #item_category dl dd a {margin: 0 7px;} #item_list_wrap {width: 100%;} #item_list_wrap .arr_options h5 {font-size: 21px; line-height: 65px;} #item_list_wrap .arr_options select {height: 65px;} #item_list .itemBox {width: 48%; margin-right: 3.5%;} } @media all and (min-width: 768px) and (max-width: 980px) { #item_list .itemBox:nth-of-type(2n) {margin-right: 0} } @media all and (max-width: 768px) { #item_category h5 {line-height: 50px; font-size: 16px;} #item_list_wrap .arr_options h5 {font-size: 18px; line-height: 50px;} #item_list_wrap .arr_options select {height: 50px;} #item_list .itemBox {width: 100%; margin-right: 0; margin-bottom: 30px;} #item_list .itemBox .info {padding: 10px 0} #item_list .itemBox .info p.name {font-size: 17px;} #item_list .itemBox .info p.price {font-size: 13px;} #item_list .itemBox .info button.add_cart {top: 15px; background-size: 20px; background-position: center left 8px;} #item_category dl {position: relative; padding-left: 90px; box-sizing: border-box; margin: 15px 0} #item_category dl dt {position: absolute; top: 10px; left:15px;} #item_category dl dt a {font-size: 15px;} #item_category dl dd {margin-top: 10px;} #item_category dl:first-of-type {padding-left: 15px} #item_category dl:first-of-type dt {position: relative; top: auto; left: auto;} #new-item_list_wrap .arr_options h5 {line-height: 50px; font-size: 18px;} #new-item_list_wrap .arr_options select {height: 50px;} } @media all and (max-width:480px){ .shop_visual-slider .swiper-slide .bg {bottom: 40px;} .shop_visual-slider .swiper-slide.sv1 .bg{bottom: 120px;} .shop_visual-slider .swiper-slide .bg img {} } @media only screen and (max-width: 734px){ .shop_section {padding: 50px 0;} #shop_main {padding-top: 0} } /* 제품상세페이지 =======================================================================================================*/ .itemDetail_seciton {position: relative; width: 100%; padding-top: 80px;} #itemDetail-head { /*background: #fafafa;*/} #itemDetail-head #itemDetail-head-wrap {display: flex; flex-wrap: wrap; justify-content:space-between;} #itemDetail-head #itemDetail-head-wrap .wrap {width: 50%; position: relative; box-sizing: border-box; padding: 0 80px;} #itemDetail-head .action.back {font-weight: bold; margin-top: -20px; font-size: 14px; color: #3F4053; margin-bottom: 15px; display: block; padding-left: 22px; background-image: url(/images/icon/icon-back.png); background-repeat: no-repeat; background-position: center left; background-size: 16px;} .item_thumb-slider {width: 100%; overflow: hidden; position: relative;} .item_thumb-slider .swiper-slide {} .item_thumb-slider .swiper-slide .pics {position: relative; width: 100%; max-width: 600px; margin: 0 auto; max-height: 600px; padding-bottom: 100%; overflow: hidden;} .item_thumb-slider .swiper-slide .pics img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; max-width: 600px;} .item_thumb-slider-btn {position: absolute; top: 50%; transform: translate(0, -50%); cursor: pointer; z-index: 1; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #efefef; box-sizing: border-box; text-align: center; line-height: 35px; background: #fff;} .item_thumb-slider-btn img {width: 50%;} #item_thumb-slider-prev {left: 0;} #item_thumb-slider-next {right: 0;} #item_infoList {} #item_infoList p {position: relative; font-size: 15px; line-height: 1.65; color: #555555; margin: 35px 0; font-weight: 600;} #item_infoList p.name {font-size: 35px; font-weight: 700; font-family: 'NotoSans-Bold',sans-serif; color: #111; box-sizing: border-box; padding-right: 60px; line-height: 1.3;} #item_infoList button.like {position: absolute; top: 50%; transform: translate(0,-50%); right: 0; border-color:#e1e1e1;} #item_infoList button.add_cart {width: 60px; height: 60px; border-color:#000;} #item_infoList ul.color_option {margin-bottom: 30px;} #item_infoList ul.color_option li { margin-right: 10px; font-size: 15px; font-weight: 600; color: #000;} #item_infoList ul.color_option li span {position: relative; width: 15px; height: 15px;} #item_infoList ul.color_option li span.on {border:2px solid #000} #item_infoList dl {width:100%; position: relative; border-top: 1px solid #ddd; padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;} #item_infoList dl:first-of-type {border-top: 0} #item_infoList dl dt, #item_infoList dl dd {font-family: 'NotoSans-Bold',sans-serif; color: #111; font-weight: 700; vertical-align: middle;} #item_infoList dl dt {font-size: 15px;} #item_infoList dl dd {font-size: 19px;} #item_infoList .action_btns {margin-top: 35px;} .add-action {position: relative; font-size: 22px; width: 25px; height: 25px; border: 1px solid #000; display: inline-block; vertical-align: bottom; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer;} .input-text.qty {background: none; height: 25px; border: 0; font-size: 19px; font-weight: 700; width: 40px; padding: 0; text-align: center;} #itemDetail-body {} .shop_bannersWrap {width: 100%; overflow: hidden;} .shop_bannersWrap .banners img {width: 100%;} .detail_img {position: relative;/* margin: 100px 0*/} .detail_img img {width: 100%;} .detail_img::after {position: absolute; bottom: 0; left: 0; width: 100%; height: 90px; background-image:linear-gradient(to bottom, transparent, #fff); content: ''; z-index: 1;} /*내부섹션*/ .itemDetail_inner_seciton {position: relative; width: 100%; margin: 60px 0} .itemDetail_inner_seciton:last-of-type {margin-bottom: 0} .itemDetail_inner_seciton h5 {color: #333; font-size: 23px; font-family: 'NotoSans-Bold',sans-serif; padding: 20px 0; } .itemDetail_inner_seciton p {font-size: 14px; line-height: 1.67; margin: 10px 0} .itemDetail_inner_seciton p strong {font-weight: 700;} .itemDetail_inner_seciton .line {margin: 35px 0} .itemDetail_inner_seciton#item_information h5 {margin-bottom: 0} .itemInfo_table {border:1px solid #dedede; box-sizing: border-box; width: 100%; border-width: 0 1px;;} .itemInfo_table .col {border-bottom: 1px solid #dedede; box-sizing: border-box; width: 100%; display: table;} .itemInfo_table .col .subj, .itemInfo_table .col .desc {display: table-cell; vertical-align: middle; font-size: 14px; padding: 20px; text-align: left; line-height: 1.67;} .itemInfo_table .col .subj {font-weight: 600; color:#000; width: 250px; border-right: 1px solid #dedede;} .itemInfo_table .col .desc {} .in-box {margin: 80px 0} .in-box ul {display: flex; justify-content: center;} .in-box ul li {padding: 0 50px; font-size: 18px; line-height: 18px; font-weight: 700;} .in-box ul li:first-child {padding-left: 0;} .in-box ul li:last-child {padding-right: 0;} .in-box ul li .inner {font-family: 'NotoSans-Bold',sans-serif; width: 100%; text-align: center;} .in-box ul li .inner em {font-style: normal;} .in-box ul li .icon {position: relative; margin: 0 auto 16px; display: block; width: 180px; height: 180px;} .in-box ul li .icon img {width: 100%;} .faq_list {} .faq_list li .acc_content {margin-bottom: 80px;} .faq_list li .subject {display: flex; justify-content: space-between; border-bottom: 2px solid #333; cursor: pointer;} .faq_list li .subject h5 {} .faq_list li .subject .more {position: relative; font-size: 22px; width: 25px; height: 25px; border: 1px solid #000; display: inline-block; vertical-align: bottom; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer;margin-top: 20px; transition: 0.3s;} .faq_list li .subject:hover .more {/*transform: rotate(-180deg);*/ background: #000; color: #fff;} /*추천상품슬라이더*/ .rcmd_item-slider {max-width: 1440px; overflow: hidden; display: block;} .rcmd_item-slider#item_list .itemBox {width: 100%; margin: 0;} .rcmd_item-slider-btn {position: absolute; top: 50%; transform: translate(0, -50%); cursor: pointer; z-index: 1;} #rcmd_item-slider-prev {left: -50px;} #rcmd_item-slider-next {right: -50px;} /*하단고정 퀵메뉴*/ /*#itemDetail-tail {position: sticky;bottom: 0; left: 0; background: #000; z-index: 999; padding: 30px 0} #itemDetail-tail dl {display: table; float: left; margin-right: 40px;} #itemDetail-tail dl dt, #itemDetail-tail dl dd {color: #fff; font-size: 17px; vertical-align: middle; display: table-cell; line-height: 60px;} #itemDetail-tail dl dt {font-family: 'NotoSans-Medium'; padding-right: 30px;} #itemDetail-tail dl dd {font-family: 'NotoSans-Light', sans-serif; font-weight: 500;} #itemDetail-tail dl dd strong {font-family: 'NotoSans-Bold'; color: #ff4800; font-size: 27px;} #itemDetail-tail .shop_contents {display: flex; justify-content: space-between;} #itemDetail-tail .shop_contents .total {} #itemDetail-tail .action_btns {width: auto; float: left;} #itemDetail-tail button.buy {width: 260px; background: #ff4800; margin-right: 15px;} #itemDetail-tail button.add_cart {border-color: #fff; background-image: url(/images/icon/icon-cart-w.png); background-color: transparent;}*/ #itemDetail-tail {position: sticky;bottom: 0; left: 0; background-color: transparent; z-index: 999; padding: 20px 0} #itemDetail-tail .buy_btn{text-align: center;} #itemDetail-tail .buy_btn button{display: inline-block; padding: 15px 60px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; background-image: url(/images/sub/tail_buy_bg.jpg); background-repeat: no-repeat; background-position: center; border-radius: 50px;} #itemDetail-tail .buy_btn button span{} @media only screen and (max-width: 1440px){ #itemDetail-head #itemDetail-head-wrap .wrap {padding: 0 50px;} #rcmd_item-slider-prev {left: -15px;} #rcmd_item-slider-next {right: -15px;} } @media only screen and (max-width: 1200px){ #itemDetail-head #itemDetail-head-wrap .wrap {padding: 0 25px;} button.buy {width: 80%} } @media only screen and (max-width: 980px){ #itemDetail-head .action.back {font-size: 12px; padding-left: 17px; background-size: 11px;} .itemDetail_seciton {padding: 45px 0;} #itemDetail-head #itemDetail-head-wrap .wrap {width: 100%; padding: 0 0;} #item_infoList p {margin: 25px 0; font-size: 14px;} #item_infoList p.name {font-size: 25px} #item_infoList .action_btns {padding-right: 0; box-sizing: border-box; position: relative; margin-top: 30px;} .action_btns {position: relative;} #item_infoList button.add_cart {position: absolute; top:0; right: 0; height: 50px; width: 50px; background-position: center left 8px;} .action_btns button.buy {width: 100%; font-size: 14px;} .item_thumb-slider {padding: 0 10%;} #item_infoList ul.color_option li.color_name {position: absolute; right: 0; font-size: 14px;} .detail_img {margin: 50px 0} .itemInfo_table .col .subj, .itemInfo_table .col .desc {padding: 15px 10px;} .itemInfo_table .col .subj {width: 25%;} .itemInfo_table .col .desc {width: 75%} #itemDetail-tail {padding: 13px 0} #itemDetail-tail .shop_contents {display: block;} #itemDetail-tail dl {float: none; margin: 15px 0; width: 100%;} #itemDetail-tail dl dt, #itemDetail-tail dl dd {line-height: 1; font-size: 14px;} #itemDetail-tail dl dt {width: 20%; padding-right: 0} #itemDetail-tail dl dd {width: 80%; text-align: right;} #itemDetail-tail dl dd strong {font-size: 19px;} #itemDetail-tail .action_btns {float: none;} #itemDetail-tail .buy_btn button {padding: 10px; width: 100%; font-size: 17px;} /* #item_infoList ul.color_option {max-width: 140px;}*/ #item_infoList ul.color_option li{margin-bottom: 7px;} #item_infoList ul.color_option li span {width: 25px; height: 25px;} ul.multi_line li label span::after { width: 25px; height: 25px; top: 0; left: 0; } #item_infoList ul.color_option li {line-height: 25px;} } @media only screen and (max-width: 768px) { .itemDetail_inner_seciton h5 {font-size: 19px;} .in-box {margin: 50px 0} .in-box h4 {font-size: 36px;line-height: 44px;} .in-box ul {display: flex;flex-wrap: wrap;flex-direction: row; justify-content: unset} .in-box li {flex: none;width: 50%;padding: 0 13px !important;box-sizing: border-box;font-size: 14px;line-height: 24px;} .in-box li .inner {padding-bottom: 30px;} .in-box ul li .icon {width: 130px; height: 130px; margin-bottom: 12px;} .in-box ul li .inner em {font-size: 15px;} .rcmd_item-slider#item_list .itemBox .info p {margin: 7px 0} .rcmd_item-slider#item_list .itemBox .info p.name {font-size: 16px;} .rcmd_item-slider-btn img {width: 25px;} .item_thumb-slider{padding: 0 5%;} .item_thumb-slider-btn {width: 30px; height: 30px; line-height: 25px;} #item_thumb-slider-prev {left: 15px} #item_thumb-slider-next {right: 15px} #itemDetail-tail {} #itemDetail-tail button.buy {width: 100%; font-size: 14px;} #itemDetail-tail .action_btns {padding-right: 50px;} #itemDetail-tail button.buy {margin-right: 0} #item_infoList .action_btns {padding-right: 0;} #item_infoList button.add_cart, .action_btns button.add_cart {height: 40px; width: 40px;} #item_infoList button.add_cart{background-size: 20px;} } /* 샵 입구컷 =======================================================================================================*/ #shop_intro {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 9999; display: table;} /* 230329 배경색 흰색으로 변경요청 */ #shop_intro_wrapper {width: 100%; height: 100%; display: table-cell; vertical-align: middle; box-sizing: border-box;} #shop_intro_wrapper h1 {text-align: center;} #shop_intro_wrapper p {font-size: 19px; color: #666; line-height: 1.67; font-family: 'NotoSans-Medium'; text-align: center; margin: 30px 0} #shop_intro_wrapper select {height: 55px; width: 280px; border: 1px solid #000; background: #fff; font-size: 14px; color: #000; margin: 30px auto; padding:0; display: block; text-align: center;} #shop_intro_wrapper button {position: relative; width: 300px; height: 55px; border-radius: 50px; background: #000; font-size: 16px; color: #fff; border: 0; font-family: 'NotoSans-Medium'; display: block; margin: 0 auto 20px auto;} #shop_intro_wrapper a.kakao {display: block; margin: 0 auto 20px auto; width: 300px; height: 55px; border-radius: 50px; background: #FEE500; text-align: center; line-height: 55px; position: relative;} #shop_intro_wrapper a.kakao span {font-size: 16px; color: rgba(0, 0, 0, .85); padding-left: 27px; background: url(/images/icon/kakao_symbol.svg) no-repeat center left; background-size: 20px; font-family: 'NotoSans-Medium';} #shop_intro_wrapper a.kakao span strong{font-weight: 700;} .show-768 {display: none} @media only screen and (max-width: 768px) { #shop_intro_wrapper {padding-left: 20px; padding-right: 20px;} #shop_intro_wrapper h1 img {width: 130px;} #shop_intro_wrapper p {font-size: 14px;} #shop_intro_wrapper select {height: 50px;} #shop_intro_wrapper button {width: 100%; height: 50px;} #shop_intro_wrapper button::after {width: 100%; left: 0; margin-left: 0} #shop_intro_wrapper a.kakao {width: 100%; height: 50px; line-height: 50px;} .show-768 {display: block;} } /* 20230127 리뉴얼 =======================================================================================================*/ #item_category.ver2 {display: none;} .item_category_section {padding: 80px 0} .item_category_section .section_title {margin-bottom: 50px;} .item_category_section .section_title h3 {font-size: 55px; color: #000; text-align: center; font-family: 'NotoSans-Bold',sans-serif; margin-bottom: 15px;} .item_category_section .section_title p {font-size: 20px; color: #999; text-align: center;} .shop_category {width: 100%; border: solid #e1e1e1; box-sizing: border-box; border-width: 1px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .shop_category ul {display: flex; flex-wrap: wrap; justify-content: flex-start;} .shop_category ul li {padding: 0 20px;} .shop_category ul li a {color: #000; font-size: 15px;} .shop_category ul li.on a {color: #a00033;} .shop_category select {width: 190px; height: 60px; border:0; border-radius: 0; border-left: 1px solid #dedede; box-sizing: border-box; font-size: 14px; } .shop_item_slider {width: 100%; overflow: hidden; position: relative; } .shop_item_slider .swiper-slide .pics {text-align: center;} .shop_item_slider .swiper-slide .pics img {width: 100%; transition: 0.8s; opacity: 0.4;} .item_info {padding: 20px 0;} .item_info p {text-align: center; font-family: normal 16px/1 'NotoSans-Light', sans-serif; color: #000;} .item_info p.item_name {font-size: 35px;} .item_info p.item_price {font-size: 25px; margin: 15px 0 25px 0; font-family: 'NotoSans-Bold',sans-serif;} .item_info a {width: 175px; height: 50px; border-radius: 5px; background: #fff; display: block; margin: 0 auto; text-align: center; font-size: 14px; color: #000; box-shadow: 0 0 10px rgba(0,0,0,0.2); line-height: 50px; font-family: 'NotoSans-Bold',sans-serif; } .shop_item_slider .swiper-slide.swiper-slide-next .pics img {opacity: 1;} .shop_item_slider .swiper-slide.swiper-slide-next .item_info {opacity: 1;} .shop_item-slider-btns {width: 50px; position: absolute; top: 250px; left: 50%; z-index: 10; cursor: pointer;} .shop_item-slider-btns img {width: 100%;} .shop_item-slider-btns.shop_item_slider-prev {margin-left: -280px;} .shop_item-slider-btns.shop_item_slider-next {margin-left: 225px;} .shop_item_slider-pagination {transform: translateX(-50%); top: auto !important; left: 50% !important; margin: 50px auto; width: 1000px !important; border-radius: 50px; overflow: hidden; bottom: 190px;} .shop_item_slider-pagination .swiper-pagination-progressbar-fill {background: #03ab9a !important;} @media only screen and (max-width: 980px) { .shop_category {display: none;} .item_category_section {padding: 60px 0} .shop_item_slider {padding-left: 50px; padding-right: 50px; box-sizing: border-box;} .shop_item_slider .swiper-slide .pics img {opacity: 1} .item_info {opacity: 1;} .item_info {margin-top: 30px;} .item_info p.item_name {font-size: 25px; } .item_info p.item_price {font-size: 17px; margin: 10px 0 15px 0} .item_info a {height: 40px; line-height: 40px;} .shop_item-slider-btns {margin-left: 0 !important;} .shop_item-slider-btns.shop_item_slider-prev {left: -10px;} .shop_item-slider-btns.shop_item_slider-next {left: auto; right: -10px;} .shop_item_slider-pagination {width: 80% !important; bottom: 110px;} .item_category_section .section_title h3 {font-size: 40px;} .item_category_section .section_title p {font-size: 18px;} } @media only screen and (max-width: 640px) { .item_category_section {padding: 50px 0} .shop_item-slider-btns {top: 30%;} .shop_item-slider-btns.shop_item_slider-prev {left: -5px;} .shop_item-slider-btns.shop_item_slider-next {right: -5px;} .item_category_section .section_title h3 {font-size: 30px;} .item_category_section .section_title p {font-size: 15px;} } /*230228 추가*/ .new-shop_contents {width: 1300px; box-sizing: border-box; margin: 0 auto;} #top_nav {background: url('/images/product/shop_head_bg.png') no-repeat center; background-size: cover; padding: 20px 0;} #top_nav .nav_wrap {display: flex; flex-wrap: wrap; justify-content: flex-start;} #top_nav .nav_wrap a {display: block; width: 50%; position: relative; text-align: center;} #top_nav .nav_wrap a::after {position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: rgba(255,255,255,0.5); content: '';} #top_nav .nav_wrap a:first-of-type::after {display: none;} .new-shop_category {width: 100%; border: solid #e1e1e1; box-sizing: border-box; border-width: 1px 0; margin: 25px 0;} .new-shop_category ul {display: flex; flex-wrap: wrap; justify-content: center; } .new-shop_category ul li a {color: #000; font-size: 15px; padding: 25px 35px; display: block;} .new-shop_category ul li.on a {color: #a00033;} .new-shop_category select {width: 190px; height: 60px; border:0; border-radius: 0; border-left: 1px solid #dedede; box-sizing: border-box; font-size: 14px; } ul.colors {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px;} ul.colors li {display: block; width: 25px; height: 25px; border-radius: 100%; margin: 0 5px; box-sizing: border-box; border: 1px solid #f1f1f1; text-indent: -99999px;} ul.colors li.color_op1 {background: #a091ba} ul.colors li.color_op2 {background: #e2aa57;} ul.colors li.color_op3 {background: #b3b264} ul.colors li.color_op4 {background: #d8545b} ul.colors li.color_op5 {background: #3385b7} ul.colors li.color_op6 {background: #f8b1c1} ul.colors li.color_op7 {background: #86858d;} .new-shop_section {padding: 100px 0; border-bottom: 1px solid #e4e4e4} .item_name, .item_pics {text-align: center;} .item_pics {margin: 80px 0;} #shop_itemList__wrap {margin-top: -1px;} @media all and (max-width:1300px ){ .new-shop_contents {width: 100%; box-sizing: border-box; padding-left: 50px; padding-right: 50px;} } @media all and (max-width:980px ){ .new-shop_contents {padding-left: 30px; padding-right: 30px;} .new-shop_category {margin: 20px 0;} .new-shop_category ul li a {padding: 20px;} ul.colors li {width: 20px; height: 20px; margin: 0 3px;} .item_name img {width: 90%} .item_pics img {width: 90%;} #top_nav .nav_wrap a {box-sizing: border-box; padding: 0 30px 0 30px;} #top_nav .nav_wrap a img {width: 100%} #shop_itemList__wrap {padding-top: 0 !important; } } @media all and (max-width:768px ){ .new-shop_contents {padding-left: 15px; padding-right: 15px;} .new-shop_category ul li a {font-size: 14px;} .new-shop_category {margin: 15px 0;} } #modal {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999999;} #modal .modal-cont {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; border-radius: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); box-sizing: border-box; padding: 0 20px; max-width: 450px;} #modal .modal-cont p {font-size: 16px; color: #212121; text-align: center; font-weight: 500; margin: 50px 0; line-height: 1.45;} #modal .modal-cont .btn__wraps {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 20px 0;} #modal .modal-cont .btn__wraps button {width: 48%; height: 50px; border: 0; background: #000; font-size: 15px; box-sizing: border-box; color: #fff; border-radius: 10px;} #modal .modal-cont .btn__wraps button.ver2 {border: 1px solid #000; color: #000; background-color: #fff;} @media all and (max-width:980px){ #modal .modal-cont {border-radius: 10px;} #modal .modal-cont p {font-size: 14px; margin: 40px 0} #modal .modal-cont .btn__wraps button {font-size: 14px; height: 40px; border-radius: 5px;} } #shop_notice {font-size: 14px; color: #fff; background: #000; box-sizing: border-box; padding: 7px 5px; text-align: center; line-height: 1.45;} #shop_notice br { display:none } @media all and (max-width:980px){ #shop_notice {font-size: 12px; } #shop_notice br { display:block } }