/* BASIC css start */ #wrap { padding-top: 40px; } #container {} #contents {} /* ========================================================================== headcategory ========================================================================== */ .headcategory { display: none; width: 100%; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .headcategory ul {} .headcategory ul li { display: inline-block; } .headcategory ul li h2 { text-align: left; line-height: 1em; } .headcategory ul li h2 a { font-size: 12px; color: #000; font-weight: normal; } .headcategory ul li h2 .ar { padding: 0 5px; font-size: 12px; color: #999; font-weight: normal; } .shopdetailInfo { display: flex; width: 100%; margin: 0 auto; } /* ========================================================================== shopdetailInfo > prd-left-area ========================================================================== */ .prd-left-area { width: calc(100% - 540px); margin-right: 60px; } /* ==================== 이미지 영역 ==================== */ .imgArea { width: 100%; } .imgArea .prd-swiper-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } /* list thumb swiper */ .imgArea .listthumb-swiper { position: relative; max-width: 60px; max-height: 800px; min-height: 800px; overflow: hidden; } .imgArea .listthumb-swiper li { width: 100%; border: 1px solid transparent; cursor: pointer; box-sizing: border-box; } .imgArea .listthumb-swiper li img { width: 100%; } .imgArea .listthumb-swiper .swiper-slide-thumb-active { border-color: #000; } .imgArea .listthumb-swiper .listthumb-button-next { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); z-index: 2; pointer-events: none; } .imgArea .listthumb-swiper .listthumb-button-next.swiper-button-disabled { display: none; pointer-events: none; } /* key thumb swiper */ .imgArea .keythumb-swiper { position: relative; flex: 1; overflow: hidden; } .imgArea .keythumb-swiper .swiper-slide img { width: 100%; } .imgArea .keythumb-swiper .swiper-button-next:after, .imgArea .keythumb-swiper .swiper-button-prev:after {display: none;} .imgArea .keythumb-swiper .swiper-button-next {width: 32px; height: 32px; background:url("/design/newcomfort/pc/img/detail-swiper-arrow-r.svg") no-repeat center / 100% auto;} .imgArea .keythumb-swiper .swiper-button-prev {width: 32px; height: 32px; background:url("/design/newcomfort/pc/img/detail-swiper-arrow-l.svg") no-repeat center / 100% auto;} /* keyImg */ .imgArea .keyImg { width: 100%; } .imgArea .keyImg a { display: block; } .imgArea .keyImg a img { width: 100%; } /* ==================== 아코디언 영역 ==================== */ .accordion-container { width: 100%; background: #fff; } .accordion-container .accordion-item { border-top: 1px solid #CDCDCD; } .accordion-container .accordion-item:last-child { border-bottom: 1px solid #CDCDCD; } /* header */ .accordion-container .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0px; cursor: pointer; user-select: none; } .accordion-container .accordion-icon { position: relative; display: inline-block; width: 10px; height: 10px; } .accordion-container .accordion-icon::before, .accordion-container .accordion-icon::after { content: ''; width: 100%; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); right: 6px; background-color: #222; } .accordion-container .accordion-icon::after { width: 1px; height: 100%; transition:opacity .3s ease-out; } .accordion-container .accordion-title { position: relative; font-size: 16px; font-weight: 500; color: #222; } /* content */ .accordion-container .accordion-content { display: block; height: 0; transition: height 0.3s ease; overflow: hidden; } .accordion-container .accordion-item.active .accordion-content { height: auto; overflow: visible; } .accordion-container .accordion-item.active .accordion-icon::after { opacity: 0; } .accordion-container .accordion-content-inner { min-height: 0; padding-bottom: 0px; opacity: 0; height: 0; transition:height .3s ease, opacity .3s ease-out; background: #fff; } .accordion-container .accordion-item.active .accordion-content-inner { width: 100%; padding: 10px 0 30px; opacity: 1; height: auto; overflow: visible; } .accordion-container .accordion-text { color: #222; font-size: 14px; line-height: 1.5; } .accordion-container .accordion-text td { line-height: 1.5; } /* 아코디언 하단 */ .product-info-accordion { width: 100%; margin: 70px 0; } .product-info-accordion .prd-info {} .product-info-accordion .prd-info:not(:first-of-type) { margin-top: 16px; } .product-info-accordion .prd-info .title { font-weight: 600; margin-bottom: 4px; } .product-info-accordion .prd-info i { color: #777; } .product-info-accordion .prd-info dl {} .product-info-accordion .prd-info dl:not(:first-of-type) { margin-top: 10px; } .product-info-accordion .prd-info dl > dt { font-weight: 500; } /* ==================== 이벤트 배너 영역 ==================== */ .prd-slider-banner { margin: 40px 0; } .prd-slider-banner .swiper-slide > a { display: block; width: 100%; } .prd-slider-banner .swiper-slide > a > img { width: 100%; height: auto; } /* ==================== 회원 혜택 영역 ==================== */ .dd-banner-wrap { margin: 40px 0; } .dd-banner-wrap .benefits-title { font-size: 16px; text-align: left; font-weight: 500; color: #222; } .dd-banner-wrap ul { margin-top: 20px; display: flex; justify-content: space-between; gap: 20px; } .dd-banner-wrap ul li {} .dd-banner-wrap ul li a { display: block; } .dd-banner-wrap ul li a img { width: 100%; } /* ========================================================================== shopdetailInfo > prd-left-area > dd-wrap-bottom ========================================================================== */ /* ==================== 상품 상세 탭 메뉴 ==================== */ .fixed-tab-menu { position: sticky; top: var(--header-offset, 108px); left: 0; z-index: 99; background-color: #fff; } .fixed-tab-menu ul { display: flex; } .fixed-tab-menu li { flex: 1; border-bottom: 2px solid #B4B4B4; } .fixed-tab-menu li > a { display: block; padding: 12px 0; text-align: center; font-size: 15px; font-weight: 300; color: #222; } .fixed-tab-menu li > a > span { display: inline-block; } .fixed-tab-menu li.selected { border-color: #222; } .fixed-tab-menu li.selected > a { font-weight: 600; } /* ==================== 관련상품 ==================== */ .related_product { width: 100%; overflow: hidden; box-sizing: border-box; } .related_product .title { margin-bottom: 16px; font-size: 16px; color: #222; font-weight: 500; } .related-prd-wrap { width: 100%; } .related-prd-wrap .thumbnail {} .related-prd-wrap .thumbnail a { display: block; } .related-prd-wrap .thumbnail a img { width: 100%; } .related-prd-wrap .information {} .related-prd-wrap .information .name { margin: 10px 0 5px; font-size: 13px; font-weight: 500; color: #222; line-height: 1.25; } .related-prd-wrap .information .price {} .related-prd-wrap .information .price .price_s { font-size: 11px; color: #777; letter-spacing: 0; } .related-prd-wrap .information .price .price_l { font-size: 13px; font-weight: 500; color: #222; letter-spacing: 0; } /* .xans-product-relation { margin: 60px 0; } .xans-product-relation .relation { padding: 30px 0 0; } .xans-product-relation .relation .prdList { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .xans-product-relation .relation .prdList li { flex: 0 0 calc((100% - 54px) / 4); } .xans-product-relation .relation .prdList li a { display: block; } .xans-product-relation .relation .prdList li a img { width: 100%; } .xans-product-relation .relation .prdList li a .strike { font-weight:normal; text-decoration:line-through; } .xans-product-relation .relation .prdList li ul {} .xans-product-relation .relation .prdList li ul li { margin: 12px 0 0; font-size: 12px; font-weight: 500; color: #222; line-height: 1.5em; } .xans-product-relation .relation .prdList li ul li.related-prd-price { margin-top: 4px; font-size: 12px; font-weight: 500; color: #222; } */ /* ==================== 상품상세정보 ==================== */ #prdDetail { margin: 60px 0; } /* npay 이벤트 배너 */ #prdDetail .npay_event_banner { width: 100%; } #prdDetail .npay_event_banner a { display: block; } /* 사이즈 차트 */ #sizeChart { padding-bottom:10px; width:810px; position: absolute; display: none; background:#fff } #sizeChart .btn-close-box { width: 100%; position: relative; } #sizeChart .btn-close-layer { position: absolute; display: block; width: 15px; height: 14px; top: 10px; right: 10px; color: #FFFFFF; font-size: 15px; font-weight: bold; } .size-chart-box { width: 100%; border: 2px solid #3F4045;} .size-chart-box h4 { width: 100%; margin:0; padding: 10px 0px; color: #FFFFFF; background: #3F4045; text-align: center; } .size-chart-cont { margin:10px auto 0; width:800px; background: #fff } .size-chart-cont table { width: 100%; margin:0; padding:0; border-collapse: collapse; border: 1px solid #D9DBDA; } .size-chart-cont table th, .size-chart-cont table td { padding:8px 0; font-size:13px; font-weight:normal; text-align:center } .size-chart-cont table th { border-bottom:1px solid #d6d6d6 } .size-chart-cont table tr, .size-chart-img {height: 1px;} .size-chart-cont img.sc-img-chart, #sc_img_chart { width: 670px; height: 300px; } .size-chart-cont img.sc-img-guide, #sc_img_guide { width: 190px; height: 240px; } .size-chart-cont p { margin-top: 10px; text-align: left; font-size:13px; color:#a7a7a7 } /* 컬러칩 슬라이더 */ #dd-color-box { margin: 40px auto; } #dd-color-box .color-title { text-align: center; line-height: 1em; font-size: 54px; font-weight: 900; color: #000; } #dd-color-box .color-desc { margin: 10px 0 0; text-align: center; font-size: 24px; color: #000; } #dd-color-box .color-tab { margin: 60px auto 30px; text-align: center; } #dd-color-box .color-tab li { display: inline-block; width: 46px; height: 46px; margin:0 5px; box-sizing: border-box; cursor: pointer; border-radius: 50%; vertical-align: middle; } #dd-color-box .color-tab li.selected { border: 2px solid #ff6d44; } #dd-color-box .color-contents { display: none; } #dd-color-box .color-contents.selected { display: block; } #dd-color-box .color-contents .color-info { margin: 0 0 30px; text-align: center; } #dd-color-box .color-contents .color-info .color { display: inline-block; width: 36px; height: 36px; margin-right: 5px; border-radius: 50%; vertical-align: middle; } #dd-color-box .color-contents .color-info .text { font-size: 32px; color: #000; vertical-align: middle; font-weight: bold; } #dd-color-box .color-contents .color-slider { position: relative; width: 900px; margin: 0 auto; overflow: hidden; padding-bottom: 60px; } #dd-color-box .color-contents .color-slider .swiper-wrapper {} #dd-color-box .color-contents .color-slider .swiper-wrapper .swiper-slide {} #dd-color-box .color-contents .color-slider .swiper-button-next { top: calc(50% - 30px); } #dd-color-box .color-contents .color-slider .swiper-button-prev { top: calc(50% - 30px); } #dd-color-box .color-contents .color-slider .swiper-button-next:after { font-size: 32px; color: #00000080; } #dd-color-box .color-contents .color-slider .swiper-button-prev:after { font-size: 32px; color: #00000080; } #dd-color-box .color-contents .color-slider .swiper-pagination { bottom: 20px; } #dd-color-box .color-contents .color-slider .swiper-pagination-bullet-active { background: #000; } /* ==================== 2604 -- 상품상세정보 추가 ==================== */ .custom_detail_wrap { width: 100%; overflow: hidden; } .custom_detail_wrap img { width: 100%; height: auto; } /* 공통 */ .custom_detail {} .custom_detail .cd__title { padding: 100px 0 20px; font-size: 33px; font-weight: 600; text-align: center; color: #000; } /* 상품 상세 */ .custom_detail_info {} .custom_detail_info .cd__title { padding-bottom: 50px; } .custom_detail_info .cd__point { width: 100%; /*calc(100% - 145px);*/ margin-bottom: 45px; } .custom_detail_info .cd__point--img {} .custom_detail_info .cd__point--text { padding: 0 16px; } .custom_detail_info .cd__point--text .tit { display: block; padding: 30px 0 16px; font-size: 25px; font-weight: 600; } .custom_detail_info .cd__point--text .desc { margin-bottom: 24px; font-size: 20px; line-height: 1.6; } .custom_detail_info .cd__point--text a { line-height: 1.25; font-size: 20px; display: inline-block; font-weight: 500; cursor: pointer; color: #222; border-bottom: 1px solid #222; } .custom_detail_info .cd__point--text a:not(:first-of-type) { margin-top: 10px; } .custom_detail_info .cd__image { position: relative; margin: 100px auto; } .custom_detail_info .cd__image img { display: block; max-width: 100%; margin: 0 auto; } .custom_detail_info .cd__image .swiper-button-prev:after, .custom_detail_info .cd__image .swiper-button-next:after { display: none; } .custom_detail_info .cd__image .swiper-button-prev { width: 32px; height: 32px; left: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-l.svg") no-repeat center / 100% auto; } .custom_detail_info .cd__image .swiper-button-next { width: 32px; height: 32px; right: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-r.svg") no-repeat center / 100% auto; } .custom_detail_info .cd__lookbook { position: relative; margin-top: 100px; } .custom_detail_info .cd__lookbook .swiper-button-prev:after, .custom_detail_info .cd__lookbook .swiper-button-next:after { display: none; } .custom_detail_info .cd__lookbook .swiper-button-prev { width: 32px; height: 32px; left: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-l.svg") no-repeat center / 100% auto; } .custom_detail_info .cd__lookbook .swiper-button-next { width: 32px; height: 32px; right: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-r.svg") no-repeat center / 100% auto; } /* 상품 컬러 */ .custom_detail_color { position: relative; } .custom_detail_color .cd__title {} .custom_detail_color .cd__color {} .custom_detail_color .cd__color_thumb_slider { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; max-width: 340px; margin: 0 auto; } .custom_detail_color .cd__color--chip { position: relative; width: 30px; height: 30px; box-sizing: border-box; border-radius: 100%; overflow: hidden; border: 1px solid #ddd; padding: 3px; cursor: pointer; } .custom_detail_color .cd__color--chip.is-active { border-color: #222; } .custom_detail_color .cd__color--chip span { display: inline-block; width: 100%; height: 100%; border-radius: 100%; } .custom_detail_color .cd__color_product_slider { position: relative; overflow: hidden; } .custom_detail_color .cd__color--wrap {} .custom_detail_color .cd__color--wrap .cd__color_inner_slider { overflow: hidden; } .custom_detail_color .cd__color--img {} .custom_detail_color .cd__color--text { margin: 20px auto; } .custom_detail_color .cd__color--text p { text-align: center; font-size: 15px; } .custom_detail_color .swiper-button-prev:after, .custom_detail_color .swiper-button-next:after { display: none; } .custom_detail_color .swiper-button-prev { width: 32px; height: 32px; left: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-l.svg") no-repeat center / 100% auto; } .custom_detail_color .swiper-button-next { width: 32px; height: 32px; right: 16px; background:url("/design/newcomfort/m/img/detail-swiper-arrow-r.svg") no-repeat center / 100% auto; } /* 상품 사이즈 */ .custom_detail_size {} .custom_detail_size .cd__title {} .custom_detail_size .cd__desc { padding: 0 16px; text-align: center; font-size: 16px; } .custom_detail_size .cd__size { margin-top: 40px; } /* 상품 팝업 */ .custom_layer_popup { position: fixed; inset: 0; z-index: 10000001; pointer-events: none; } .custom_layer_popup .custom_layer--dim { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.3s ease; } .custom_layer_popup .custom_layer--panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 560px; max-height: 80vh; background-color: #fff; opacity: 0; transition: opacity 0.3s ease; box-sizing: border-box; overflow: hidden; } .custom_layer_popup .custom_layer--header { position: relative; padding: 40px; } .custom_layer_popup .custom_layer--close { all: unset; display: inline-block; position: absolute; top: 33px; right: 33px; width: 48px; height: 48px; font-size: 0; cursor: pointer; background: url('https://newcomfort.img11.kr/pc/_didot/img/ico_close.svg') no-repeat center / auto; } .custom_layer_popup .custom_layer--content { padding: 0 40px 40px; overflow-y: auto; max-height: calc(80vh - 160px); -webkit-overflow-scrolling: touch; } .custom_layer_popup .custom_layer--content img { display: block; max-width: 100%; } .custom_layer_popup .custom_layer--title { font-size: 25px; font-weight: 600; text-align: center; } .custom_layer_popup .custom_layer--desc { margin-top: 20px; font-size: 20px; } body.is-sheet-open { overflow: hidden; } .custom_layer_popup.is-active { pointer-events: auto; } .custom_layer_popup.is-active .custom_layer--dim { background: rgba(0, 0, 0, 0.3); } .custom_layer_popup.is-active .custom_layer--panel { opacity: 1; } /* ==================== 제품 디테일 ==================== */ #prdInfo { margin: 60px 0; } #prdInfo img { width: 100%; } #prdInfo .dd-prd-img { text-align: center; display: none; } #prdInfo .dd-common-img { text-align: center; } /* 상세하단 공통 가이드영역 */ #prdInfo .dd-common-img > a { display: block; width: 100%; padding: 20px 10px; margin: 20px 0; font-size: 16px; color: #000; background: #f5f5f5; box-sizing: border-box; text-align: center; line-height: 1; } #prdInfo .comfortlab-guide { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index: 999; overflow-y: scroll; background:rgba(0,0,0,0.7); } #prdInfo .comfortlab-guide .guide-contents { position:relative; max-width:1000px; background:#fff; padding:16px; margin:16px auto; text-align:center; } #prdInfo .comfortlab-guide .guide-contents > a { display:block; cursor: pointer; position:fixed; top:20px; margin-left:950px; } #prdInfo .comfortlab-guide .guide-contents .type { display:none; } #prdInfo .comfortlab-guide .guide-contents .iframe_wrap { position: relative; width: 100%; margin-top:60px; height: 0; padding-bottom: 56.25%; border-radius: 24px; overflow: hidden; } #prdInfo .comfortlab-guide .guide-contents .iframe_wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /* ==================== 상품사용후기 ==================== */ #prdReview { margin: 70px 0 50px; padding-top: 10px; } #prdReview .review-title a { display: block; } #prdReview .review-title a img { width: 100%; } /* 기본 게시판 소스 -- 수정하지 않음 */ .xans-product-additional div.board{padding:10px 0 60px;border:0px solid #000;border-top:0;margin-top:0px;} .xans-product-additional div.board h3{padding:0 0 20px;font-size:12px;color:#000;} .xans-product-additional div.board p.desc{display:none;padding:0 10px 0 9px;} .xans-product-additional div.board p.nodata{padding:40px 0;background:#f9f9f9;color:#666;text-align:center;} .xans-product-additional .board .btn{padding:20px 0;} .xans-product-additional table.board{margin:0;border-top:1px solid #d7d5d5;border-bottom:1px solid #d7d5d5;} .xans-product-additional table.board th{padding:10px 0 10px;border-right:0px solid #e3e3e3;background:#fbfafa;font-weight:normal;display:none;} .xans-product-additional table.board td{padding:10px 0 10px;border-top:1px solid #e3e3e3;border-right:0px solid #e3e3e3;text-align:center;vertical-align:middle;} .xans-product-additional table.board th:last-child,.xans-product-additional table.board td:last-child{border-right:none;} .xans-product-additional table.board a,.xans-product-additional table.board a:hover{color:#353535;} .xans-product-additional table.board .subject{padding-left:8px;color:#f76560;text-align:left;word-break:break-all;} .xans-product-additional table.board .subject img{vertical-align:middle;margin:0 1px;} .xans-product-additional table.board .txtLess{color:#939393;font-size:11px;} .xans-product-additional table.board td .view{padding:20px 30px;line-height:18px;text-align:left;color:#000;} .xans-product-additional table.board td .view img{max-width:1200px;height:auto !important;} .xans-product-additional table.board td .view .btnArea{margin:20px 0 0;} #commentWriteForm_4{padding:0;} #SecretForm_4{background:#fbf9fa;} #SecretForm_4 .view{padding:8px 0 8px;} #SecretForm_4 input{width:41px;height:24px;margin:0 0 0 6px;border:0;font-size:0;line-height:0;cursor:pointer;background:url("/design/newcomfort/pc/img/btn_ico_submit.gif") no-repeat 0 0;} #SecretForm_4 input#secure_password{width:130px;height:18px;margin-left:11px;padding:2px 2px 2px 4px;border:1px solid #d9d9d9;font-size:12px;line-height:14px;cursor:text;background:#fff;} #product-review-read td,#product-qna-read td{padding:0;} #product-review-read td #SecretForm_4 .view{padding-left:79px;} #product-qna-read td #SecretForm_4 .view{padding-left:213px;} .xans-product-additional .boardComment{padding:0 30px;} .xans-product-additional .boardComment li{position:relative;overflow:hidden;margin:10px 0 0 0;padding:12px 0 0;border-top:1px solid #d7d5d6;color:#353535;text-align:left;line-height:14px;} .xans-product-additional .boardComment li:first-child{margin-top:0;} .xans-product-additional .boardComment li .comment{margin:9px 0 0;padding:16px 0 15px 9px;border-top:1px solid #e9e9e9;line-height:18px;word-break:break-all;} .xans-product-additional .boardComment li .name{margin:0 21px 0 0;} .xans-product-additional .boardComment li .name input{width:13px;height:13px;margin:0 2px 0 0;vertical-align:-2px;*vertical-align:2px;} .xans-product-additional .boardComment li .date{margin:0 10px 0 0;font-size:11px;} .xans-product-additional .boardComment li .grade{margin:0 10px 0 0;} .xans-product-additional .boardComment li .button{position:absolute;right:0;top:6px;} .xans-product-additional .memoCont{margin:0px 30px 20px;padding:10px 20px 15px 20px;border:1px solid #e9e9e9;color:#353535;text-align:left;background:#fbfafa;} .xans-product-additional .memoCont .user{overflow:hidden;padding:0 90px 0 0;} .xans-product-additional .memoCont .user input,.xans-product-additional .memoCont .user textarea{border:1px solid #d9d9d9;} .xans-product-additional .memoCont .user input{width:135px;height:18px;margin:0 10px 0 9px;padding:2px 2px 2px 4px;} .xans-product-additional .memoCont .user .secret input{width:13px;height:13px;margin-right:3px;} .xans-product-additional .memoCont .user .secret{margin:0 20px 0 0;} .xans-product-additional .memoCont .user textarea{float:left;width:100%;padding:2px 0;height:44px;text-indent:4px;*margin-right:10px;} .xans-product-additional .memoCont .user a{float:right;margin:0 -90px 0 0;} .xans-product-additional .memoCont .nameArea{display:block;margin:0 0 10px;} .xans-product-additional .memoCont .rating{margin:12px 0 0;} .xans-product-additional .memoCont .rating input{width:13px;height:13px;margin:0 2px 0 0;padding:0;border:0;vertical-align:-2px;*vertical-align:1px;} .xans-product-additional .memoCont .rating label{padding:0 10px 0 0;} .xans-product-additional .memoCont .rating em{font-style:normal;} .xans-product-additional .memoCont .text{margin:5px 0 0;font-size:11px;} .xans-product-additional .memoCont .text span{color:#008bcc;} .xans-product-additional .memoCont .captcha{margin:8px 0 0;padding:10px 0 0;border-top:1px solid #e9e9e9;color:#757575;} .xans-product-additional .memoCont .captcha img{vertical-align:middle;} .xans-product-additional .memoCont .captcha input{margin:0 10px 0 20px;font-size:12px;} .xans-product-additional table.board td .view + form .memoCont{margin-top:0;} .xans-product-additional .boardComment li.replyArea{margin:-1px 0 0;padding:10px 0 7px 33px;border:1px solid #e9e9e9;background:url("/design/newcomfort/pc/img/ico_comment.gif") no-repeat 20px 15px;} .xans-product-additional .boardComment li.replyArea .commentSecret{margin-right:30px;} .xans-product-additional .boardComment li.replyArea .comment{margin:7px 0 0;padding:0;border-top:0;} .xans-product-additional .noAccess{margin:15px 0 10px;border:1px solid #d7d5d5;font-weight:bold;color:#008bcc;line-height:39px;text-align:center;} .xans-product-additional .minor{margin:15px 0 0;padding:35px 0 24px;border:1px solid #d7d5d5;font-weight:bold;color:#353535;line-height:14px;text-align:center;} .xans-product-additional .minor p:first-child img{margin:-11px 8px 0 0;vertical-align:top;} .xans-product-additional .minor strong{color:#008bcc;} .xans-product-additional .minor .button{margin:-7px 0 0;} .xans-product-additional .commentSecret{margin:10px 10px 5px 0;padding:10px 15px;border:1px solid #e9e9e9;background-color:#fbfafa;color:#353535;} .xans-product-additional .commentSecret input[type=password]{height:20px;padding:2px 2px 2px 4px;border:1px solid #d9d9d9;} /* 무단 도용 금지 */ .copyright-notice {} .copyright-notice img { width: 100%; height: auto; } /* ========================================================================== shopdetailInfo > prd-right-area ========================================================================== */ /* .prd-right-area { position: sticky; top: 100px; width: 100%; height: calc(100vh - 200px); padding-right: 18px; overflow-y: auto; overflow-x: hidden; z-index: 5; -webkit-overflow-scrolling: touch; } */ .prd-right-area { position: sticky; top: calc(var(--header-offset, 108px) + 20px); width: 100%; height: calc(100vh - (var(--header-offset, 108px) + 20px)); padding-right: 18px; overflow-y: auto; overflow-x: hidden; z-index: 5; -webkit-overflow-scrolling: touch; } .prd-right-area::-webkit-scrollbar { width: 2px; background-color: #f8f8f8; } .prd-right-area::-webkit-scrollbar-thumb { background: #222; } /* ==================== 기본 정보 ==================== */ .prd-option-panel .icon {} .prd-option-panel .prd-name { margin: 12px 0; font-size: 24px; color: #222; font-weight: 600; line-height: 1.25em; } .prd-option-panel .prd-subname { font-size: 14px; color: #999; line-height: 1.5em; } .prd-option-panel .prd-price-review { display: flex; justify-content: space-between; align-items: flex-end; margin: 20px 0; } .prd-option-panel .prd-price {} .prd-option-panel .prd-price .price_s { display: block; margin: 4px 0; font-size: 12px; color: #757575; } .prd-option-panel .prd-price .price_m { font-size: 12px; color: #757575; } .prd-option-panel .prd-price .price_group { display: flex; gap: 8px; align-items: center; } .prd-option-panel .prd-price .price_l { font-size: 18px; color: #222; font-weight: 600; } .prd-option-panel .prd-price .price_d { font-size: 18px; color: #FF4D4F; font-weight: 600; } .prd-option-panel .review_info { padding: 4px 0; } .prd-option-panel .review_info span { display: inline-block; font-size: 12px; font-weight: 300; letter-spacing: 0; color: #222; } /* ==================== 비회원 노출 - 회원가입 쿠폰 ==================== */ .join-coupon-wrap { width: 100%; margin: 20px 0 40px; } .join-coupon-wrap .join-coupon { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; text-align: center; border: 1px solid #cdcdcd; } .join-coupon-wrap .join-coupon:hover { color: #222; } .join-coupon-wrap .join-coupon span { flex: 1; font-size: 15px; font-weight: 400; color: #222; line-height: 1; } .join-coupon-wrap .join-coupon .icon-coupon-arrow { position: absolute; right: 16px; display: inline-block; width: 8px; height: 12px; background: url("/design/newcomfort/pc/img/img-coupon-arrow.svg") no-repeat center / 100% auto; } /* ==================== 옵션 선택 ==================== */ .option-select { border-bottom: 1px solid #CDCDCD; } .option-select .option-wrap { margin: 30px 0; } .option-select .option-wrap .opt-wrap {} .option-select .option-wrap .opt-wrap dl {} .option-select .option-wrap .opt-wrap dl dt { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 16px; } .option-select .option-wrap .opt-wrap dl dt .opt-name { display: flex; align-items: center; font-size: 16px; line-height: 1; color: #222; font-weight: 500; } .option-select .option-wrap .opt-wrap dl dt .opt-value { display: inline-block; margin-left: 10px; font-size: 14px; color: #555; font-weight: normal; } .option-select .option-wrap .opt-wrap dl dt .btn-size-popup { font-size: 14px; font-weight: normal; color: #222; background: transparent; text-decoration: underline; } .option-select .option-wrap .opt-wrap dl dd { position: relative; margin-top: 16px; } /* 기본옵션 - 셀렉트 */ .option-select .option-wrap .opt-wrap dl dd select { width: 100%; height: auto; padding: 16px 32px 16px 16px; font-size: 13px; color: #222; border: 1px solid #ddd; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background: url("//newcomfort.img11.kr/pc/_didot/img/img-down-arrow.svg") no-repeat right 16px center / 12px auto; text-overflow: ellipsis; } .option-select .option-wrap .opt-wrap .sel-btn { width: 100%; margin: 20px 0; background-color: #222; } .option-select .option-wrap .opt-wrap .sel-btn a { padding: 10px 0; display: block; color: #fff; font-size: 16px; text-align: center; font-weight: 400; } /* 원클릭옵션 - 공통 */ .MK-oneclick-list { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: -9px; } .MK-oneclick-list li { margin: 9px 8px 0 0; } .MK-oneclick-list li a { display: block; } .MK-oneclick-list li a img { width: 100%; height: 100%; } .MK-oneclick-list li.MK-oneclick-dis a {} /* 원클릭옵션 - 컬러 */ .MK-oneclick-list li.MK-oneclick-color { width: 32px; height: 32px; border-radius: 100%; } .MK-oneclick-list li.MK-oneclick-color a { display: block; padding: 3px; border-radius: 100%; border: 1px solid #ddd; box-sizing: border-box; } .MK-oneclick-list li.MK-oneclick-color span { display: block; width: 24px; height: 24px; border-radius: 100%; } .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel { border-color: #222;} .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel a { border-color: #222; } .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel a span {} .MK-oneclick-list li.MK-oneclick-color.dd-soldout a { position: relative; } .MK-oneclick-list li.MK-oneclick-color.dd-soldout a:after { content:''; display: block; width: 100%; height:1px; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: rotate(45deg); } /* 원클릭옵션 - 텍스트 */ .MK-oneclick-list.MK-oneclick-only-text { column-gap: 8px; row-gap: 9px; margin-top: 0; } .MK-oneclick-list li.MK-oneclick-text { margin: 0; flex: 0 0 calc((100% - 16px) / 3); border: 1px solid #ddd; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .grid2 .MK-oneclick-list li.MK-oneclick-text { flex: 0 0 calc((100% - 8px) / 2); } .MK-oneclick-list li.MK-oneclick-text a { display: block; width: 100%; padding: 12px 6px; text-align: center; } .MK-oneclick-list li.MK-oneclick-text a span { display: block; font-size: 13px; color: #999; font-weight: 400; } /* 선택 비활성화 */ .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-dis { background-color: #F8F8F8; } .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-dis a[title*="품절"] span { text-decoration: line-through; } /* .MK-oneclick-list li.MK-oneclick-text.dd-soldout { text-decoration: line-through; } */ /* 선택 활성화 */ .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-sel { border-color: #222; } .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-sel a { border-color: #222; } .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-sel span { color: #222; } /* 원클릭옵션 - 이미지 */ .color-opt .MK-oneclick-list li.MK-oneclick-image { width: 32px; height: 32px; border-radius: 100%; } .color-opt .MK-oneclick-list li.MK-oneclick-image a { display: block; padding: 3px; border-radius: 100%; border: 1px solid #ddd; box-sizing: border-box; } .color-opt .MK-oneclick-list li.MK-oneclick-image img { display: block; width: 24px; height: 24px; border-radius: 100%; } .color-opt .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel { border-color: #222; } .color-opt .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a { border-color: #222; } .color-opt .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a img {} .color-opt .MK-oneclick-list li.MK-oneclick-image.dd-soldout a { position: relative; } .color-opt .MK-oneclick-list li.MK-oneclick-image.dd-soldout a:after { content:''; display: block; width: 100%; height:1px; background-color: #ddd; position: absolute; top: 50%; left: 0; transform: rotate(45deg); } /* 추가 사이즈 정보 */ .option-select .size-info-wrap .size-etc-info { display: none; color: #777; font-size: 13px; font-weight: 400; line-height: 1; margin-bottom: 10px; } .option-select .sizeInfoText { margin-bottom: 10px; font-size: 14px; color: #222; font-weight: 400; } /* 묶음 할인 옵션 */ .bundle-options { display:flex; gap:20px; border-top:1px solid #e4e4e5; padding:20px 0 18px; } .bundle-options.first { border:0; } .bundle-option-img { vertical-align:top ;} .bundle-option-img img { width:100px; height:100px; } .bundle-option-wrap .tit-prd .sub-txt { color:#969696; font-size:12px; } .bundle-option-wrap .opt-wrap dl { display:flex; align-items:center; } .bundle-option-wrap .opt-wrap dl dt, .bundle-option-wrap .opt-wrap dl dd { display: inline-block; vertical-align: top; } .bundle-option-wrap .opt-wrap dl dt { white-space: nowrap; } .bundle-option-wrap .opt-wrap dl dd { width: auto; } .bundle-option-wrap .opt-wrap select { width: 100%; } .bundle-option-wrap .opt-wrap .MK-oneclick-value { padding:0; } .bundle-option-wrap .opt-wrap .MK-oneclick-list li { margin:8px 2px 0 0; } .bundle-option-wrap .opt-wrap .MK-oneclick-list li.MK-oneclick-color { width: 34px; height: 34px; margin: 5px 5px 0 0; } .bundle-option-wrap .opt-wrap .MK-oneclick-list li.MK-oneclick-color span { width:32px; height:32px; } /* ==================== 옵션 결과 ==================== */ .option-result { margin: 30px 0; } .option-result .MK_optAddWrap {} #MK_innerOptWrap {} #MK_innerOptWrap .MK_inner-opt-cm {} #MK_innerOptWrap .MK_inner-opt-cm li { position: relative; padding: 20px; background: #F8F8F8;} #MK_innerOptWrap .MK_inner-opt-cm li + li { margin-top: 12px; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name { display: block; padding-right: 40px; word-break: break-all; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name p {} #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name p strong { font-size: 13px; color: #222; line-height: 1.5em; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name .extra_option_name { display: block; margin-top: 8px; font-size: 13px; color: #999; font-weight: normal; line-height: 1.5em; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl { position: relative; display: flex; align-items: center; justify-content: flex-start; margin-top: 20px; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl .basic_option, #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl .addition_option { order: 2; width: 40px; height: 30px; line-height:24px; border: 1px solid #ddd; text-align:center !important; border-left: 0; border-right: 0; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a { display: inline-block; width: 30px; height: 30px; text-indent: -9999em; vertical-align: top; background: #fff url("/design/newcomfort/pc/img/plus_icon.svg") no-repeat center / 12px 12px; border: 1px solid #ddd; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-up { order: 3; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl a.MK_btn-dw { order:1; background-image: url("/design/newcomfort/pc/img/minus_icon.svg"); } #MK_innerOptWrap .MK_inner-opt-cm li .MK_price { position: absolute; right: 20px; bottom: 24px; display: block; font-size: 14px; color: #222; font-weight: normal; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_price span { font-weight: normal; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del { position: absolute; display: block; right: 20px; top: 20px; width: 20px; height: 20px; text-indent: -9999em; background: url(/design/newcomfort/pc/img/icon_detail_close.svg) no-repeat center / cover; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del img { display: none; } /* ==================== 총 금액 ==================== */ .prd-option-panel .total-price {} .prd-option-panel .total-price .total { text-align: right; font-size: 20px; color: #222; font-weight: 500; } .prd-option-panel .total-price .total strong { margin-right: -4px; } /* ==================== 액션 버튼 ==================== */ .action-wrap { margin: 20px 0; } .action-wrap .btn-wrap { margin: 0 0 20px; display: flex; } .action-wrap .btn-wrap .btn { flex: 1; } .action-wrap .btn-wrap .btn a { display: block; width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 18px; font-weight: 500; border: 1px solid #222; box-sizing: border-box; } .action-wrap .btn-wrap .btn span { display: block; width: 100%; height: 55px; line-height: 55px; text-align: center; font-size: 18px; font-weight: 500; border: 1px solid #222; box-sizing: border-box; } .action-wrap .btn-wrap .wishlist a { color: #222; } .action-wrap .btn-wrap .wishlist a:hover { color: #222; } .action-wrap .btn-wrap .soldout span { background-color: #222; color: #fff; } .action-wrap .btn-wrap .soldout span:hover { color: #fff; } .action-wrap .btn-wrap .basket a { color: #222; } .action-wrap .btn-wrap .basket a:hover { color: #222; } .action-wrap .btn-wrap .immediate a { background-color: #222; color: #fff; } .action-wrap .btn-wrap .immediate a:hover { color: #fff; } /* 페이 버튼 */ #nhn_btn {} .npay_storebtn_bx.npay_type_A_2 { width: 100% !important; } #checkoutContainer.__checkout_buy_container { width: 100% !important; } #checkoutContainer.__checkout_buy_container.__checkout_buy_s1 .__checkout_buy_contents { padding-left: 86px!important; } /* ==================== 추가 구성 상품 ==================== */ .additional_product { margin: 30px 0 40px; } .additional_product .extra-prd-wrap { width: 100%; } .additional_product .extra-prd-wrap .swiper-slide {} .additional_product .extra-prd-wrap .product-image {} .additional_product .extra-prd-wrap .product-image a { display: block; } .additional_product .extra-prd-wrap .product-image a img { width: 100%; } .additional_product .extra-prd-wrap .product-info {} .additional_product .extra-prd-wrap .product-info .extra-prd-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 30px; margin: 10px 0 5px; font-size: 13px; font-weight: 500; color: #222; line-height: 1.25; } .additional_product .extra-prd-wrap .product-info .extra-prd-price { font-size: 13px; font-weight: 500; color: #222; } .additional_product .extra-prd-wrap .product-info .extra-prd-option { margin: 12px 0 0; } .additional_product .extra-prd-wrap .product-info .extra-prd-option dl {} .additional_product .extra-prd-wrap .product-info .extra-prd-option dl dt { display: none; font-size: 13px; color: #222; } .additional_product .extra-prd-wrap .product-info .extra-prd-option dl dd { margin-top: 8px; } .additional_product .extra-prd-wrap .product-info .extra-prd-option dl dd select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 40px; padding: 0 24px 0 12px; line-height: inherit; text-align: left; font-size: 12px; font-weight: 400; color: #222; border: 1px solid #9c9c9c; background: url('https://newcomfort.img11.kr/pc/_didot/img/icon_chevron-down.svg') no-repeat center right 10px / auto 16px, #fff; border-radius: 0; -webkit-border-radius: 0; cursor: pointer; } .additional_product .extra-prd-wrap .product-info .extra-prd-option dl + dl { margin-top: 8px; } /* ========================================================================== END ========================================================================== */ /*애널리언스 마이닝*/ .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .sect-tit {margin: 30px 0 40px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap {position:relative;height: 145px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per-graph {width: 380px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per-graph li {float:left;position:relative;width:50%;height: 110px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .sect-percent-woman {background:url('https://image.makeshop.co.kr/log/image/analyans_woman.png') no-repeat 0 0;background-size: 400px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .sect-percent-bg {position:absolute;top:0;left:50%;width:466px;height:169px;margin-left: -194px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per li {float:left;width:50%; padding-top:0px !important; text-align:left;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per {position:absolute;top:0;left:50%;width: 402px !important;margin-left: -200px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per-graph {width:466px;height: 102px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per-graph li {float:left;position:relative;width:50%;height: 102px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-wrap .per-graph {width:466px;height:126px;padding-top: 36px !important;} .analyans-all .analyans-wrap.analyans-w01 .analyans-conts .sect-wrap.sect-percent .per-txt li {float:left;width: 42% !important;} .analyans-all .analyans-wrap.analyans-w02 .analyans-conts .analyans-slider-now dl dt img {width:136px !important;height:136px !important;margin:2px 0 0;} /*함께구매 - 현재 보고있는 상품 이미지*/ .analyans-all .analyans-wrap .analyans-conts .analyans-slider li dl dt img { width:140px !important; height:140px !important; }/*함께구매 - 우측 상품 이미지*/ .analyans-all .analyans-wrap.analyans-w02 .analyans-conts .analyans-slider-now dl {width:140px !important;height: 180px !important;background:#fa323d;text-align:center;}/*함께구매 - 현재 보고있는 상품 bg 사이즈*/ #min_withbuy > #analyans-all > .analyans-wrap.analyans-w02> div.analyans-conts > div.bx-wrapper {max-width:560px !important;} /*함께구매 - 우측 이미지 간격 조정*/ .analyans-all .analyans-wrap.analyans-w02 .analyans-conts .analyans-slider-now.slider-sm {width: 178px !important;margin: 0 10px 0 74px;} /*함께구매 - +버튼 간격*/ #min_agebest > #analyans-all > div > div.analyans-conts > .bx-wrapper {max-width:750px !important;}/*연령별 베스트 상품 간격 조정*/ /* BASIC css end */