/* BASIC css start */ .CSSbuttonWhite220 { display: flex; align-items: center; width: 100%; height: 100%; line-height: inherit; background: #acafb9; color: #fff; border: 1px solid #acafb9; white-space: nowrap; padding: 0 8px; box-sizing: border-box; border-radius: 4px; } .CSSbuttonWhite220:hover { background: #fff; color: #acafb9; border: 1px solid #acafb9; } /* 각인신청 레이어 */ #spMask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9991 } #smartPersonalize { display:none; margin:-433px 0 0 -500px; padding:20px 0 70px; position:fixed; top:50%; left:50%; width:1000px; background:#fffdf7; z-index:9999 } #smartPersonalize .spClose { position:absolute; top:28px; right:51px; width:60px; height:60px; background:url(/design/hangso1/phps/common/btn_smart_related_close.gif) 0 0 no-repeat; cursor:pointer } #smartPersonalize .inner { padding:0 40px } #smartPersonalize .spTit { height:75px; border-bottom:1px solid #e7e6e3 } #smartPersonalize .spTit h3 { padding-left:57px; font-size:18px; color:#000; font-weight:bold; line-height:75px } #smartPersonalize .spScrollArea { height:700px; overflow:hidden; overflow-y:auto } #smartPersonalize .spInfo { padding:26px 57px; border-bottom:1px solid #e7e6e3 } #smartPersonalize .infoTop { *zoom:1 } #smartPersonalize .infoTop:after { display:block; clear:both; content:'' } #smartPersonalize .infoTop .ltInfo { float:left; width:296px } #smartPersonalize .infoTop .ltInfo .spPrice { padding-bottom:10px; color:#ea775a; font-weight:bold } #smartPersonalize .infoTop .ltInfo .spPrice .krw { font-size:18px } #smartPersonalize .infoTop .ltInfo .spPrice .price { font-size:36px } #smartPersonalize .infoTop .ltInfo dl { padding-top:5px; *zoom:1 } #smartPersonalize .infoTop .ltInfo dl:after { display:block; clear:both; content:'' } #smartPersonalize .infoTop .ltInfo dt { float:left; width:57px; color:#000; line-height:35px } #smartPersonalize .infoTop .ltInfo dd { float:left; width:239px } #smartPersonalize .infoTop .ltInfo dd select { width:400px; height:35px; border:1px solid #ddd } #smartPersonalize .infoTop .ltInfo dd input.MS_related_option { width:400px; height:33px; text-indent:5px; line-height:33px; border:1px solid #ddd } #smartPersonalize .infoTop .ltInfo dd .MS_related_checkbox { width:17px; height:17px } #smartPersonalize .infoTop .ltInfo .prd-check dt { line-height:17px } #smartPersonalize .infoTop .ltInfo .prd-amount .MS_related_quantity { width:64px; height:30px; font-size:13px; text-align:center !important; border:1px solid #dde0ea } #smartPersonalize .infoTop .ltInfo .prd-amount a { display:inline-block; margin-left:3px; width:32px; height:32px; font-size:30px; color:#fff; text-align:center; line-height:32px; background:#acafb9 } #smartPersonalize .infoTop .ltInfo .prd-amount a.btn-dw { line-height:28px } #smartPersonalize .infoTop .ltInfo .btns { padding-top:30px } #smartPersonalize .infoTop .ltInfo .btns a { display:block; width:294px; height:60px; font-size:16px; color:#fff; text-align:center; line-height:60px; border:1px solid #ec7956; background:#ec7956 } #smartPersonalize .infoTop .ltInfo .btns a:hover { color:#ec7956; border:1px solid #ec7956; background:#fff; cursor:hand } #smartPersonalize .infoTop .ltInfo .btns a:active { position:relative; top:1px } #smartPersonalize .infoTop .rtInfo { float:right; width:282px } #smartPersonalize .infoTop .rtInfo img { width:280px; border:1px solid #ddd } #smartPersonalize .infoTxt { padding-top:50px } #smartPersonalize .infoTxt h4 { font-size:18px; color:#000 } #smartPersonalize .infoTxt ol { padding-top:5px } #smartPersonalize .infoTxt li { font-size:13px; color:#707070; line-height:24px } #smartPersonalize .spContent { padding:25px 57px; border-bottom:1px solid #e7e6e3 } #smartPersonalize .spContent h4 { font-size:18px; color:#000 } #smartPersonalize .spContent h4 .num { display:inline-block; width:28px; height:28px; font-size:16px; color:#ea775a; text-align:center; line-height:28px; border:1px solid #ea775a; border-radius:5px } #smartPersonalize .spContent h4 .ctit { display:inline-block; margin-left:5px; vertical-align:middle } #smartPersonalize .spContent .cont { padding-top:23px } #smartPersonalize .spContent .cont .fontColor { *zoom:1 } #smartPersonalize .spContent .cont .fontColor:after { display:block; clear:both; content:'' } #smartPersonalize .spContent .cont .fontColor li { margin-right:10px; float:left; width:47px; height:47px; border-radius:10px } #smartPersonalize .spContent.last { border-bottom:0 } /* 상세 탭 */ .detailTabWrap { padding-top:30px; position:relative } .detailTabWrap .detailTab { position:relative; height:33px; text-align:center; border-bottom:1px solid #dde0ea } .detailTabWrap .detailTab a { display:inline-block; margin:0 95px; font-size:17px; color:#a8a8a8; line-height:33px; font-family:'Brandon Grotesque Medium';font-weight:normal } .detailTabWrap .detailTab a.active { color:#000; line-height:32px; border-bottom:2px solid #000 } #productDetail .detailContainer { margin:0 auto; position:relative; width:1200px } #productDetail .detailContainer .tab-cont { display:none; position:relative } /* 상품상세 */ .detail_common { text-align:center } /* 배송정보 */ .delivery { padding:30px 0 0 40px; position:relative; *zoom:1 } .delivery:after { display:block; clear:both; content:'' } .delivery .rightDeli { border-left:1px solid #dde0ea } .delivery .deliBx { padding-left:80px; float:left; width:477px } .delivery .deliBx h4 { font-size:36px } .delivery .deliBx dl { padding-top:40px } .delivery .deliBx dt { font-size:16px } .delivery .deliBx dd { padding-top:7px; font-size:16px; color:#5d5d5d; line-height:24px } #productDetail .page-body { margin-top:15px; clear:both; } /* 상단 섬네일, 상품 옵션 정보 */ #productDetail .thumb-info:after { content: ""; display: block; clear: both; } /* 섬네일 */ #productDetail .thumb-info .thumb-wrap { float: left; width:526px } #productDetail .thumb-info .thumb { position:relative; width:100%; text-align: center; overflow:hidden } #productDetail .thumb-info .thumb .multiSlider li img { width:100% } #productDetail .thumb-info .thumb .bx-controls-direction { position:absolute; top:224px; left:0; right:0 } #productDetail .thumb-info .thumb .bx-controls-direction a { display:block; position:absolute; top:0; width:65px; height:80px; text-indent:-9999em; background:url(/design/hangso1/phps/common/sp_detail_multi.png) 0 0 no-repeat } #productDetail .thumb-info .thumb .bx-controls-direction a.bx-prev { left:0; background-position:0 0 } #productDetail .thumb-info .thumb .bx-controls-direction a.bx-next { right:0; background-position:0 -80px } /* #multi-pager { margin-top:10px; width:530px; height:100px; overflow:hidden; text-align:left; border-top:1px solid #dde0ea; border-bottom:1px solid #dde0ea } #multi-pager ul { *zoom:1 } #multi-pager ul:after { display:block; clear:both; content:'' } #multi-pager ul li { margin-right:4px; float:left; width:102px; height:100px } #multi-pager ul li a { display:block; height:100px; border-top:1px solid #dde0ea; border-bottom:1px solid #dde0ea } #multi-pager ul li a.active { border-top:1px solid #000; border-bottom:1px solid #000 } #multi-pager ul li img { width:102px; height:100px } */ #multi-pager { margin-top:10px; width:530px; height:100px; font-size:0; text-align:left; border-top:1px solid #dde0ea; border-bottom:1px solid #dde0ea } #multi-pager a { display:inline-block; margin-right:4px; width:102px; height:100px; vertical-align:top; } #multi-pager a img { width:102px; height:100px } #multi-pager a.active { margin-top:-1px; border-top:1px solid #000; border-bottom:1px solid #000 } #productDetail .thumb-info .thumb-ctrl { clear: both; padding-top: 20px; text-align: center; } #productDetail .thumb-info .thumb-ctrl a { font-size: 11px; } #productDetail .thumb-info .thumb-ctrl a img { vertical-align: middle; margin-right: 3px; } #productDetail .thumb-info .thumb-ctrl a:hover { text-decoration: underline; } /* 상품옵션 정보 */ #productDetail .thumb-info .info { float: right; width:635px; *zoom:1 } #productDetail .thumb-info .info:after { display:block; clear:both; content:'' } #productDetail .thumb-info .info .tit-prd { font-size: 28px; line-height: 36px; color: #211D1D; font-weight: 500; margin-bottom: 4px; } #productDetail .thumb-info .info .sub-prd { color: #767873; font-size: 16px; font-weight: 400; line-height: 24px; } #productDetail .thumb-info .info .sub-prd:not(:empty) { margin-bottom: 12px; } #productDetail .thumb-info .info .tit-sub { margin: 7px 0 0 10px; font-size: 12px; color: #999; } #productDetail .thumb-info .info .info-left { float:left; width:355px } #productDetail .thumb-info .info .info-right { margin-top:68px; padding-top:70px; float:right; width:250px; border:1px solid #dde0ea } #productDetail .thumb-info .info .table-opt table { width: 100%; } #productDetail .thumb-info .info .table-opt th, #productDetail .thumb-info .info .table-opt td { font-size:15px; padding:8px 0 8px } #productDetail .thumb-info .info .table-opt th { font-weight:normal } #productDetail .thumb-info .info .table-opt th div, /* 판매가격 */ #productDetail .thumb-info .info .table-opt .price { font-weight: bold; color: #181818; } /* 주문수량 */ #goods_amount { float: left; width: 32px; border: 0; } #productDetail .thumb-info .info .table-opt .opt-spin { position: relative; width: 52px; height: 15px; } #productDetail .thumb-info .info .table-opt .opt-spin .txt-spin, #productDetail .thumb-info .info .prd-btns { padding: 0; } #productDetail .thumb-info .info .prd-btns .soldout { color:#111; font-size:20px; font-weight:bold } #productDetail .thumb-info .info .prd-btns > a { display:block; margin-top:8px } .MS_amount_basic { height: 16px; border: 1px solid #dedede; padding: 5px; } #productDetail .thumb-info .info .table-opt .opt-spin { width:115px; height:30px } #productDetail .thumb-info .info .table-opt .opt-spin .btns { margin-left:-1px; float:left; width:25px; font-size:0 } #productDetail .thumb-info .info .table-opt .opt-spin .btn-dw { display:inline-block; width:23px; height:13px; font-size:13px; color:#636363; line-height:13px; text-align:center; border:1px solid #dedede; border-top:none } #productDetail .thumb-info .info .table-opt .opt-spin .btn-up { display:inline-block; width:23px; height:12px; font-size:13px; color:#636363; line-height:13px; text-align:center; border:1px solid #dedede } #productDetail .thumb-info .info .table-opt .opt-spin .txt-spin { float:left; width:45px; height:26px; text-align:center; border:1px solid #e0dede; background:#f2f2f2 } /* 통합옵션 */ #productDetail .thumb-info .info .table-opt .opt-wrap { margin-bottom: 16px; } #productDetail .thumb-info .info .table-opt .opt-wrap .tit { display:none; margin-bottom: 8px; padding-left: 10px; color: #111; } #productDetail .thumb-info .info .table-opt .opt-wrap dl { overflow: hidden; width: 100%; } #productDetail .thumb-info .info .table-opt .opt-wrap dt { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; color: #211D1D; font-size: 14px; font-weight: 400; line-height: 20px; } #productDetail .thumb-info .info .table-opt .opt-wrap dt span { color: #FB663A; font-size: 14px; font-weight: 400; line-height: 20px; } #productDetail .thumb-info .info .table-opt .opt-wrap.select-wrap select { width: 100%; } #productDetail .thumb-info .info .table-opt .opt-wrap dd { margin-bottom: 5px; } #productDetail .thumb-info .info .table-opt .opt-wrap .sel-btn { text-align:right } #productDetail .thumb-info .info .table-opt .opt-wrap .opt-btns { position: relative; width: 56px; height: 22px } #productDetail .thumb-info .info .table-opt .opt-wrap .opt-btns input { position: absolute; top: 0; left: 0; width: 30px; height: 16px; padding: 5px; border: 1px solid #ddd; text-align: right; } #productDetail .thumb-info .info .table-opt .opt-wrap .btns1 { margin-left: 41px; float:left; width:25px; font-size:0 } #productDetail .thumb-info .info .table-opt .opt-wrap .opt-btns .btn-up { position: relative; display:inline-block; width:23px; height:12px; font-size:13px; color:#636363; line-height:13px; text-align:center; border:1px solid #dedede } #productDetail .thumb-info .info .table-opt .opt-wrap .opt-btns .btn-dw { position: relative; display:inline-block; width:23px; height:12px; font-size:13px; color:#636363; line-height:13px; text-align:center; border:1px solid #dedede } #productDetail .thumb-info .info .table-opt .opt-wrap dl .opt-count select { float: left; width: 180px; height: 27px; } #productDetail .thumb-info .info .table-opt .opt-wrap dl .opt-count .opt-btns { float: left; width: 56px; margin-left: 5px; } /* 사이즈 차트 */ .box-btn-size-chart { width: 300px; padding: 10px; background: #D9DBDA; text-align: center; } td.area-btn-size-chart a { color: #000000; font-size: 15px; font-weight: bold; } #sizeChart { width:693px; position: absolute; display: none; } #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; } /* 타이틀 공통 */ #productDetail .tit-hd { margin-top: 70px; border-bottom: 1px solid #b8b8b8; padding-left: 4px; } #productDetail .tit-hd .tit-detail { height: 16px; padding-top: 8px; padding-left: 20px; background: url(/images/d3/modern_house/bg_tab.gif) no-repeat 0 0; } #productDetail .tit-hd .btns-part { position: relative; } #productDetail .tit-hd .btns { position: absolute; right: 0; top: -26px; text-align: center; } /* 상품 상세 이미지 */ #productDetail .prd-detail table {table-layout: auto;/* border: 1px solid #e0e0e0; */border-top: 0;} #productDetail .prd-detail { margin-top:50px; width: 100%; overflow: hidden; } #productDetail .prd-detail img { max-width: 100%; } .board-hd { font-size: 16px; font-weight: bold; padding:0 0 10px } /* 관련상품 */ #productDetail .featuredProduct { display:none; padding-top:50px } #productDetail .prd-list { padding-top: 10px; border-top: 1px solid #b4b4b5; } #productDetail .prd-list .thumb { width: 55px; height: 50px; } #productDetail .prd-list th { padding-bottom: 10px; border-bottom: 1px solid #aaa; } #productDetail .prd-list td { padding: 5px 0; border-bottom: 1px solid #aaa; } #productDetail .prd-list .prd-amount { position: relative; width: 52px; height: 15px; } #productDetail .prd-list .prd-amount .txt-spin, #productDetail .prd-list .prd-amount .btns { float: left; } #productDetail .prd-list .prd-amount .txt-spin { width: 41px; height: 13px; padding-left: 2px padding-top: 2px; border: 0; font-size: 11px; } #productDetail .prd-list .prd-amount .btns { width: 17px; height: 15px; } #productDetail .prd-list .prd-amount .btns a { overflow: hidden; float: left; width: 100%; height: 8px; text-indent: -999px; background: none; } #productDetail .prd-list .prd-amount .btns a.btn-up { border-bottom: 1px solid #aaa; background: url(/images/d3/modern_simple/btn/btn_h5_spin_up.gif) no-repeat 50% 50%; } #productDetail .prd-list .prd-amount .btns a.btn-dw { background: url(/images/d3/modern_simple/btn/btn_h5_spin_dw.gif) no-repeat 50% 50%; } #productDetail .related-allbasket { width: 100%; padding-top: 10px; text-align: right; } /* review-write */ #productDetail .review-write { margin-top: 5px; padding-top: 10px; border-top: 1px solid #ccc; } #productDetail .review-write th, #productDetail .review-write td { padding: 5px 0 4px; } #productDetail .review-write th { font-weight: normal; } #productDetail .review-write .frm-w input { width: 150px; height: 26px; line-height: 26px; border: 1px solid #ccc; } /* 댓글리스트 공통 */ #productDetail .table-slide {border-top: 1px solid #bbb;} #productDetail .table-slide thead th {font-weight: normal;background: #fcfcfc; font-size: 14px; color:#454545; } #productDetail .table-slide th, #productDetail .table-slide td {padding: 15px 0;} #productDetail .table-slide th { font-size: 13px; } #productDetail .table-slide tbody td { border-top: 1px solid #e9e9e9; } #productDetail .table-slide tr.cnt { display: none; } #productDetail .table-slide tr.cnt td { cursor: default; } #productDetail .table-slide tr.ndata td {border-bottom: 1px solid #e9e9e9;} #productDetail .table-slide tr.reply .tb-txt { padding-left: 30px; background: url(/images/d3/modern_simple/common/bull_reply.gif) no-repeat 10px 0; } /* review-list */ #productDetail .review-list { margin-top: 5px; } #productDetail .review-list .bg { padding-top: 35px; border-top: 1px solid #eee; } /* qna board */ #productDetail .qna-list { margin-top: 5px; } /* .board-btns */ #productDetail .board-btns { text-align: right; } #productDetail .board-btns img { padding: 0 5px; } textarea.MS_review_content_box { height: 55px; width: 80%; vertical-align: top; } /* ****************** 상품 상세 옵션 ******************** */ .MK_not_choice { color: red; } .MK_optAddWrap, .MK_optAddWrap * { margin: 0; padding: 0; } .MK_optAddWrap { font-size:12px; color: #2d3036 } .MK_optAddWrap li { list-style: none; } /* 옵션선택 */ #MK_optAddList { overflow: hidden; *zoom: 1; } #MK_optAddList li { float: left; width: 100%; margin-top: 5px; } #MK_optAddList .MK_tit, #MK_optAddList .MK_div, #MK_optAddList .MK_st { float: left; } #MK_optAddList .MK_tit, #MK_optAddList .MK_div { font-size: 11px; line-height: 16px; } #MK_optAddList .MK_tit { width: 65px; margin-right: 5px; } #MK_optAddList .MK_div { width: 5px; text-align: center; } #MK_optAddList .MK_st { width: 205px; } #MK_optAddList .MK_st .MK_btn-add { cursor: pointer; } #MK_optAddList .MK_st select { margin-left: 5px; width: 195px; height: 18px; } /* 옵션선택PP */ #MK_optAddListPP { overflow: hidden; *zoom: 1; } #MK_optAddListPP .MK_tit, #MK_optAddListPP .MK_st { float: left; width: auto; } #MK_optAddListPP .MK_tit { margin-right: 5px; margin-top: 3px; } /* 옵션 결과 리스트 */ #MK_innerOpt_01:not(:empty) { border-top: 1px solid #E8E6E1; margin-bottom: 16px; } #MK_innerOptWrap #MK_innerOptScroll.limit { position: relative; height: 150px; overflow-y: auto; } #MK_innerOptWrap .MK_inner-opt-cm li { padding: 28px 0; position: relative; border-bottom: 1px solid #E8E6E1; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl, #MK_innerOptWrap .MK_inner-opt-cm li .MK_price, #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del { position: absolute; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_p-name, #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl, #MK_innerOptWrap .MK_inner-opt-cm li .MK_price, #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del { display: block; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_price { right: 0; bottom: 32px; color: #211D1D; font-family: "HvDTrial Brandon Grotesque"; font-size: 20px; font-weight: 420; line-height: 32px; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del { right: 0; top: 28px; width: 20px; height: 20px; background: url(/design/hangso1/mallskin/pc/images/icon_detail_list_close.png) no-repeat center; } #MK_innerOptWrap .MK_inner-opt-cm li .MK_btn-del img { display:none } #MK_innerOptWrap .MK_inner-opt-cm li .MK_qty-ctrl .basic_option { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 100%; color: #211D1D; font-family: "HvDTrial Brandon Grotesque"; font-size: 20px; font-weight: 390; line-height: 28px; text-align: center !important; margin: 0; border: 0; background: transparent; padding: 0; } /* 사용자 입력 인풋박스 (color, size )*/ .MK_optAddWrap .MK_inner-opt-cm li .MK_txt_uinput { width: 200px; } /* 기본옵션 */ #MK_innerOptWrap #MK_innerOpt_01 li .MK_p-name { color: #211D1D; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 16px; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl { position: relative; width: 160px; height: 48px; padding: 9px 16px; border-radius: 4px; border: 1px solid #5A5858; box-sizing: border-box; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl:before { content: '수량'; position: absolute; top: 0; transform: translateY(-50%); left: 8px; padding: 0 8px; color: #5A5858; text-align: center; font-size: 12px; font-weight: 400; line-height: 16px; background: #FFFCF8; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl input.MK_count { width:64px; height:30px; border:1px solid #dde0ea; text-align:center } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 16px; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a:after { content: ''; position: absolute; width: 1px; height: 30px; background: #5A5858; top: 50%; transform: translateY(-50%); right: -16px; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a { font-size: 0; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a img { display:none } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a.MK_btn-up, #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a:nth-child(2) { left: auto; right: 16px; background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_plus.png'); } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a.MK_btn-up:after, #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a:nth-child(2):after { left: -16px; right: auto; } #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a.MK_btn-dw, #MK_innerOptWrap #MK_innerOpt_01 li .MK_qty-ctrl a:nth-child(3) { background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_minus.png'); } /* 개별옵션 */ #MK_innerOptWrap #MK_innerOpt_02 li .MK_p-name { margin-right: 80px; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl { width: 50px; top: 7px; *top: 2px; right: 120px; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl input.MK_count { width: 30px; height: 16px; line-height: 16px; padding: 2px 0 0 2px; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl a { position: absolute; right: -6px; font-size: 0; line-height: 0; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl a img { vertical-align: top; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl a.MK_btn-up { top: 0; } #MK_innerOptWrap #MK_innerOpt_02 li .MK_qty-ctrl a.MK_btn-dw { top: 11px; } /* 총합계 */ #MK_innerOptTotal { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 16px; } #MK_innerOptTotal > .MK_txt-total, #MK_innerOptTotal .price-box { color: #211D1D; font-size: 16px; font-weight: 500; line-height: 28px; } #MK_innerOptTotal .price-box { display: flex; align-items: center; font-family: "HvDTrial Brandon Grotesque"; font-size: 24px; font-weight: 420; line-height: 32px; } #MK_innerOptTotal .price-box strike { color: #5A5858; text-decoration-line: line-through; font-weight: 300; } #MK_p_total { font-weight: 400; } /* 소리뷰 */ #sorivu { position: relative; margin-top: 20px; } #soriView * { line-height: 1.5 !important; } /* 상품 일반정보(상품정보제공 고시) */ #productWrap { margin: 30px 0 0 0; } #productWrap h3.tb-tit { margin-bottom: 10px; text-align: left; font-size: 16px; font-weight: bold; } #productWrap table { width: 100%; font-size: 12px; border-collapse: collapse; border-width: 1px 0 1px 0; border-color: #b4b4b4; border-style: solid; table-layout: fixed; } #productWrap table th { border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background-color: #f8f8f8; color: #3b3b3d; text-align: left; padding: 10px 0 10px 15px; font-size: 13px;} #productWrap table td { color: #8b8b8b; border-bottom: 1px solid #e0e0e0; word-break: break-all; text-align: left; padding: 10px 0 10px 17px; font-size: 13px; line-height: 24px;} #productWrap table tr:first-child th, #productWrap table tr:first-child td{border-top:1px solid #e0e0e0;} /* 통옵 추가 구성 상품 */ #productDetail .thumb-info .info .table-opt td.add-option-tit { padding:5px 0 0; border-top:1px solid #e4e4e5; color:#000; font-size:13px; } #productDetail .thumb-info .info .table-opt tr.add-option-start > td .add-option-img, #productDetail .thumb-info .info .table-opt tr.add-option-start > td .add-option-wrap { border-bottom:1px solid #e4e4e5; } #productDetail .thumb-info .info .table-opt td.add-option-img { padding-top:0px; border-bottom:1px solid #e4e4e5; vertical-align:top; } #productDetail .thumb-info .info .table-opt td.add-option-img .thumb-s img { max-width:50%; } #productDetail .thumb-info .info .table-opt td.add-option-wrap { padding-top:0px; border-bottom:1px solid #e4e4e5; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .prd-icon, #productDetail .thumb-info .info .table-opt td.add-option-wrap .tit-prd { font-size:15px; padding-left:20px; padding-top:0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt { padding-left:20px; padding-top:0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td select.basic_option, #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td select.addition_option { width:310px; padding-top:0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td input.basic_option, #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td input.addition_option { width:306px; height:22px; line-height:24px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap { padding:5px 0 0 0; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap .tit { display:none; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap dd { width: 110px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap select { width: 100px; } #productDetail .thumb-info .info .table-opt td.add-option-wrap .table-opt td .opt-wrap input { width: 205px; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_p-tit { display:block; width:90%; height:100%; line-height:12px; color:#000; font-weight:bold; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_price { top:40px; right:0; } #productDetail .thumb-info .info .table-opt tr.add-option-end .MK_btn-del { top:0; } /* 선물하기 */ #productDetail .thumb-info .info .prd-btns .btn_gift { display: block; width: 448px; height: 48px; font-size: 12px; color: #f1191f; text-align: center; line-height: 50px; border: 1px solid #f1191f; background: #fff; } #productDetail .thumb-info .info .prd-btns .btn_gift:hover { color: #fff; background: #f1191f; } #productDetail .thumb-info .info .prd-btns .btn_gift:active { position: relative; top: 1px; } #productDetail .thumb-info .info .prd-btns .btn_gift .fa-gift { font-size: 13px; vertical-align: text-bottom; } #productDetail .thumb-info .info .prd-btns .btn_gift .fa-gift:before { margin-right:5px; } /* 원클릭옵션 */ .MK-oneclick-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .MK-oneclick-list:after { content: ""; display: block; clear: both; } .MK-oneclick-list li a { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid #4A4444; box-sizing: border-box; } .MK-oneclick-list li a:hover { border: 1px solid #FB663A; } .MK-oneclick-list li a:hover span { text-decoration: underline; } .MK-oneclick-list li.MK-oneclick-sel a { border: 2px solid #FB663A; background: rgba(251, 102, 58, 0.20); } .MK-oneclick-list li.MK-oneclick-dis a { filter: alpha(opacity=50); -moz-opacity: .5; opacity: .5; pointer-events: none; } .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel a { padding:1px; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; } .MK-oneclick-list li a span { display: block; text-align: center; vertical-align: middle; line-height: 19px; } .MK-oneclick-list li a img { width: 100%; height:100%;} .MK-oneclick-list li.MK-oneclick-image a {height:50px;} .MK-oneclick-list li.MK-oneclick-image a img {width: auto; height: 48px;;} .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a img {height:46px; width: auto;} .MK-oneclick-list li.MK-oneclick-color { width:50px; height: 50px; } .MK-oneclick-list li.MK-oneclick-color a { padding: 2px; } .MK-oneclick-list li.MK-oneclick-color span { width: 44px; height: 44px; } .MK-oneclick-list li.MK-oneclick-color .mk-oo-sel span { width: 27px; height: 27px; } .MK-oneclick-list li.MK-oneclick-text .MK-oneclick-list li.MK-oneclick-text {min-width:35px; max-width:100%; height: 50px; } .MK-oneclick-list li.MK-oneclick-text span { min-width: 29px; line-height: 44px; max-width: 320px; overflow: hidden; height: 44px; } .MK-oneclick-list li.MK-oneclick-text .MS-oneclick-sel span { min-width: 30px; line-height: 27px; } .MK-oneclick-value { display: block; } .MK-oneclick-only-text li.MK-oneclick-text span { display: flex; align-items: center; justify-content: center; color: #211D1D; font-size: 14px; font-weight: 400; line-height: 16px; } .MK-oneclick-only-text li.MK-oneclick-dis { display: none; } .MK-oneclick-only-text li.MK-oneclick-default-dis { display: block !important; } /* 상품옵션 정보 */ #productDetail .thumb-info .info { float: right; position: relative; } #productDetail .thumb-info .info .prd-wish { position: absolute; top: -45px; right: 0; display: inline-block; height: 22px; line-height: 20px; padding: 0 4px 0 24px; border: 1px solid #b9b9b9; border-radius: 3px; font-family: 'malgun gothic'; font-size: 13px; color: #000; background: #fff url('/images/common/ico_wish_detail_count.png') no-repeat 5px center; } #productDetail .thumb-info .info .table-opt th, #productDetail .thumb-info .info .table-opt td { font-size: 11px; padding: 4px 0 3px; } #productDetail .thumb-info .info .table-opt th { font-weight: normal; letter-spacing: -1px; } /*20250630 리뉴얼 추가*/ :root { --scroll-header-top: translateY(156px); } #contentWrapper { padding: 0 16px 80px; background: #FFFCF8 !important; } #contentWrap { max-width: 100%; } #productDetail .detailContainer { width: 100%; } .breadcrumb-wrap { margin-bottom: 16px; } #productDetail .thumb-info { display: flex; gap: 8px; } #productDetail .thumb-info .thumb-wrap { position: relative; flex: 1; min-width: 58%; float: inherit; } #productDetail .thumb-info .thumb-wrap > .inner-box { position: sticky; top: 0; display: flex; gap: 8px; } #productDetail .thumb-info .thumb-wrap > .inner-box > img { width: 100%; max-width: 600px; margin: 0 auto; } #productDetail .thumb-info .thumb-wrap > .inner-box .zoom-wrap { position: absolute; bottom: -48px; right: 0; width: calc(100% - 171px); height: 48px; display: flex; align-items: center; justify-content: center; } #productDetail .thumb-info .thumb-wrap > .inner-box.single { flex-direction: column; gap: 16px; } #productDetail .thumb-info .thumb-wrap > .inner-box.single .zoom-wrap { position: relative; bottom: 0; width: 100%; } #productDetail .thumb-info .thumb-wrap > .inner-box .zoom-wrap .btn-zoom { width: 48px; height: 48px; border-radius: 50%; background: #211D1D url(/design/hangso1/mallskin/pc/images/icon_detail_zoom.png) no-repeat center; transition: all .5s; } #productDetail .thumb-info .thumb-wrap > .inner-box .zoom-wrap .btn-zoom:hover { background: #FB663A url(/design/hangso1/mallskin/pc/images/icon_detail_zoom.png) no-repeat center; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #FFFCF8; z-index: 1000; overflow-y: auto; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap.active { display: block; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap.single .img-wrap { padding: 40px 16px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-height: 100vh; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap.single .img-wrap img { display: block; width: 100%; max-width: 500px; margin: 0 auto; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .btn-close { position: fixed; top: 24px; right: 24px; width: 46px; height: 46px; background: url(/design/hangso1/mallskin/pc/images/icon_img_popup_close.png) no-repeat center; z-index: 11; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap #popupSwiper { height: 100vh; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-slide { padding: 0; height: 100vh; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-slide img { display: block; margin: 0 auto; width: auto; height: 100%; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-pagination { left: 32px; right: auto; flex-direction: column; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev, #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next { display: block; top: 40%; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev:focus, #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next:focus { outline: none; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev:after, #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next:after { width: 40px; height: 40px; background-size: cover; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev { left: 0; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev:after { background-image: url('/design/hangso1/mallskin/pc/images/icon_popup_prev.png'); } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next { right: 0; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next:after { background-image: url('/design/hangso1/mallskin/pc/images/icon_popup_next.png'); } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-pagination span { opacity: 1; border: 1px solid #211D1D; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .pc-pagination-wrap { position: fixed; top: 50%; left: 32px; transform: translateY(-50%); z-index: 1; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .pagination { display: flex; gap: 8px; flex-direction: column; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .pagination > li { display: flex; height: 8px; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .pagination .btn-pagi { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #211D1D; background: #FFFFFF; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .pagination .btn-pagi.active { background: #211D1D; } #productDetail .thumb-info .form-wrap { flex: 1; width: 100%; padding: 34px 48px 24px 24px; box-sizing: border-box; } #productDetail .thumb-info .info { width: 100%; float: inherit; } #productDetail .thumb-info #detailSwiperThumb { min-width: 163px; height: 643px; } #detailSwiper { width: 100%; height: 100%; } #detailSwiperThumb .swiper-slide a { display: block; position: relative; width: 163px; height: 100%; border-radius: 10px; overflow: hidden; border: 1px solid #FFFCF8; box-sizing: border-box; } #detailSwiperThumb .swiper-slide.swiper-slide-thumb-active a { border: 1px solid #FB663A; } #detailSwiperThumb .swiper-slide a:hover { border: 1px solid #a6a4a4; } .main-slider-wrap { display: flex; align-items: center; gap: 8px; width: calc(100% - 171px); max-height: 703px; padding: 30px 0; box-sizing: border-box; } .main-slider-wrap > .arrow { min-width: 62px; height: 100%; background-color: #FFFCF8; background-repeat: no-repeat; background-position: center; z-index: 3; cursor: pointer; opacity: 0; } .main-slider-wrap > .arrow.active { opacity: 1; } .main-slider-wrap > .arrow.btn-prev { background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_slider_prev.png'); } .main-slider-wrap > .arrow.btn-next{ background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_slider_next.png'); } #detailSwiper .swiper-slide a img, #detailSwiperThumb .swiper-slide a img { object-fit: contain; width: 100%; height: 100%; object-position: center; padding: .3125rem; box-sizing: border-box; } #detailSwiperThumb .swiper-slide { padding: 0; margin: 0; } #detailSwiper .swiper-slide a { display: block; margin: auto; width: 100%; height: 100%; } #detailSwiperThumb .swiper-wrapper { padding: 0; margin: 0; border: 0; } .thumb-slider-wrap { position: relative; padding: 30px 0; } .thumb-slider-wrap .swiper-button-next, .thumb-slider-wrap .swiper-button-prev { dispopacity: 0; left: 0; width: 100%; height: 30px; cursor: pointer; margin: 0; } .thumb-slider-wrap .swiper-button-next[role="button"], .thumb-slider-wrap .swiper-button-prev[role="button"] { opacity: 1; } .thumb-slider-wrap .swiper-button-prev { top: 0; bottom: auto; } .thumb-slider-wrap .swiper-button-next { top: auto; bottom: 0px; } .thumb-slider-wrap .swiper-button-next:after, .thumb-slider-wrap .swiper-button-prev:after { content: ''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; } .thumb-slider-wrap .swiper-button-prev:after { background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_slider_up.png'); } .thumb-slider-wrap .swiper-button-next:after { background-image: url('/design/hangso1/mallskin/pc/images/icon_detail_slider_down.png'); } #productDetail .thumb-info .bg { display: none; } #productDetail .thumb-info .info { max-width: 540px; } #productDetail .thumb-info .info > .icon-wrap { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } #productDetail .thumb-info .info > .price-wrap { display: flex; gap: 8px; align-items: center; margin-bottom: 28px; } #productDetail .thumb-info .info > .price-wrap p { color: #211D1D; font-family: "HvDTrial Brandon Grotesque"; font-size: 24px; font-weight: 400; line-height: 32px; } #productDetail .thumb-info .info > .price-wrap > span { color: #5A5858; font-family: "HvDTrial Brandon Grotesque"; font-size: 22px; font-weight: 390; line-height: 32px; text-decoration-line: line-through; } #productDetail .thumb-info .info .prd-btns .delivery-wrap { text-align: left; display: flex; gap: 12px; align-items: center; margin-bottom: 32px; } #productDetail .thumb-info .info .prd-btns .delivery-wrap .icon { display: block; width: 24px; height: 24px; background: url('/design/hangso1/mallskin/pc/images/icon_delivery.png') no-repeat center; } #productDetail .thumb-info .info .prd-btns .delivery-wrap p { color: #54544F; font-size: 14px; font-weight: 400; line-height: 16px; } #productDetail .thumb-info .info .buy-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 64px; } #productDetail .thumb-info .info .buy-wrap .item { display: flex; gap: 8px; } #productDetail .thumb-info .info .buy-wrap .link { display: flex; align-items: center; justify-content: center; height: 48px; flex: 1; border-radius: 4px; border: 1px solid #211D1D; box-sizing: border-box; color: #211D1D; font-size: 16px; font-weight: 500; line-height: 1; transition: all .5s; } #productDetail .thumb-info .info .buy-wrap .link.disabled { pointer-events: none; border: 1px solid #908C8A; color: #908C8A; } #productDetail .thumb-info .info .buy-wrap .link.active { background: #211D1D; color: #FFFFFF; } #productDetail .thumb-info .info .buy-wrap .item .imprint-popup-open { margin: 0; max-width: 100%; background: transparent; border: 1px solid #211D1D; border-radius: 4px; color: #211D1D; font-size: 16px; font-weight: 500; line-height: 1; transition: all .5s; } #productDetail .thumb-info .info .buy-wrap .link:hover, #productDetail .thumb-info .info .buy-wrap .item .imprint-popup-open:hover { border: 1px solid #FB663A; background: #FB663A; color: #FFFFFF; } #productDetail .thumb-info .info .buy-wrap .link-wish { position: relative; min-width: 54px; max-width: 54px; } #productDetail .thumb-info .info .buy-wrap .link-wish #MS_btn_wish { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: url('/design/hangso1/mallskin/pc/images/icon_detail_wish.png') no-repeat center; } #productDetail .thumb-info .info .buy-wrap .link-wish #MS_btn_wish.wish-on { background: url('/design/hangso1/mallskin/pc/images/icon_detail_wish_active.png') no-repeat center; } #productDetail .thumb-info .info .buy-wrap .link-wish:hover { background: transparent; } .accordion-wrap { margin-bottom: 40px; } .accordion-wrap .accordion-header { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 400; background: transparent; } .accordion-wrap .accordion-header:before, .accordion-wrap .accordion-header:after { content: ''; position: absolute; width: 16px; height: 1px; background: #211D1D; top: 50%; transform: translateY(-50%); right: 0; transition: all .5s; } .accordion-wrap .accordion-header:after { transform: translateY(-50%) rotate(-90deg); } .accordion-wrap .accordion-header.active:after { transform: translateY(-50%); } .accordion-wrap .accordion-body { padding-bottom: 9px; } .accordion-wrap .accordion-body, .accordion-wrap .accordion-header .edit { display: none; } .accordion-wrap .accordion-header .edit { align-items: center; gap: 16px; color: var(--Primary-Almost-Black, #211D1D); font-size: 13px; font-weight: 400; line-height: 24px; visibility: inherit; white-space: nowrap; } .accordion-wrap .accordion-header .edit:after { content: ''; display: inline-block; width: 20px; height: 20px; background: url('/design/hangso1/mallskin/pc/images/icon_option_check.png') no-repeat center; } .accordion-wrap .accordion-header.selected .edit { display: flex; } .accordion-wrap .accordion-header.selected:before, .accordion-wrap .accordion-header.selected:after { content: none; } .accordion-wrap .accordion-item + .accordion-item .accordion-header { border-top: 1px solid #E8E6E1; gap: 4px; } .accordion-wrap .complete-text { display: none; color: var(--Primary-Grey, #767873); font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 390; line-height: 24px; margin-bottom: 13px; text-align: left; } .accordion-wrap .accordion-header.selected + .complete-text { display: block; } .accordion-wrap .accordion-header.selected.active + .complete-text { display: none; } .accordion-wrap.detail-accordion-wrap { width: 100%; max-width: 728px; } .accordion-wrap.detail-accordion-wrap .accordion-header { height: 92px; font-size: 20px; font-weight: 600; line-height: 28px; } .accordion-wrap.detail-accordion-wrap .accordion-item:first-child { border-top: 1px solid #211D1D; } .accordion-wrap.detail-accordion-wrap .accordion-item { border-bottom: 1px solid #211D1D; } .accordion-wrap.detail-accordion-wrap .accordion-body { padding: 0 0 32px; color: #5A5858; font-size: 18px; font-weight: 400; line-height: 24px; word-break: keep-all; } .accordion-wrap.detail-accordion-wrap .accordion-body.spec .detail_more { width: 100%; white-space: pre-line; margin-top: -15px; } .accordion-wrap.detail-accordion-wrap .accordion-body p { color: #211D1D; font-size: 16px; font-weight: 500; line-height: 18px; margin-bottom: 8px; } .accordion-wrap.detail-accordion-wrap .accordion-body span { display: block; color: #5A5858; font-size: 14px; font-weight: 400; line-height: 18px; margin-bottom: 24px; } .accordion-wrap.detail-accordion-wrap .accordion-body ul > li:last-child span { margin-bottom: 0; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .title { margin-bottom: 16px; font-size: 20px; font-weight: 500; line-height: 32px; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .sub-title { margin-bottom: 8px; font-size: 16px; font-weight: 500; line-height: 18px; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .list-text { margin-bottom: 24px; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .list-text:last-child { margin-bottom: 0; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .list-text > li { position: relative; padding-left: 11px; color: #5A5858; font-size: 14px; font-weight: 400; line-height: 18px; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .list-text > li:before { content: ''; position: absolute; left: 1px; top: 9px; width: 4px; height: 1px; background: #5A5858; } .accordion-wrap.detail-accordion-wrap .accordion-body.delivery .list-text > li.caution:before { content: '*'; width: auto; height: auto; top: 2px; background: transparent; } .color-list-wrap { margin-bottom: 28px } .color-list-wrap > p { color: #211D1D; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 8px; } .color-list-wrap > ul { display: flex; gap: 16px; flex-wrap: wrap; } .color-list-wrap > ul > li a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid transparent; box-sizing: border-box; } .color-list-wrap > ul > li a.active { border: 1px solid #211D1D; } .color-list-wrap > ul > li a img { display: block; width: 100px; height: 100px; border-radius: 50%; } .page-body > .inner-box { max-width: 1200px; margin: 0 auto; padding-top: 128px; } .page-body > .inner-box .detail_more { text-align: center; } #extraSliderWrap { position: relative; padding: 0 72px; box-sizing: border-box; } #extraSliderWrap .swiper-slide { padding: 0; } #extraSliderWrap .swiper-slide .img-wrap { margin-bottom: 42px; padding-bottom: 76%; background: #FFFCF8; } #extraSliderWrap .price { color: #211D1D; text-align: center; font-family: "HvDTrial Brandon Grotesque"; font-size: 18px; font-weight: 420; line-height: 18px; margin-bottom: 8px; text-align: left; } #extraSliderWrap .name { font-size: 18px; font-weight: 400; max-height: 42px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #extraSliderWrap .swiper { padding-bottom: 58px; margin-bottom: 48px; overflow: hidden; } #extraSliderWrap .swiper-button-prev:after, #extraSliderWrap .swiper-button-next:after { width: 32px; height: 32px; background-size: cover; } #extraSliderWrap .swiper-button-prev, #extraSliderWrap .swiper-button-next { top: calc(50% - 45px); } #extraSliderWrap .swiper-button-next { right: 8px; } #extraSliderWrap .swiper-button-prev { left: 8px; } #extraSliderWrap .icon-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .extra-title { margin: 104px auto 24px; color: #211D1D; font-size: 28px; font-weight: 500; line-height: 32px; text-align: center; } .detail_more img, .moreLink img { max-width: 100%; } .scroll-header-wrap { display: flex; position: fixed; width: 100%; min-height: 100px; left: 0; top: 0; transform: translateY(0); background: #FFFFFF; gap: 8px; justify-content: space-between; align-items: center; padding: 16px; box-sizing: border-box; transition: all .5s ease-in-out; z-index: 1; flex-wrap: wrap; } .scroll-header-wrap:not(.active) { display: none !important; } html:not(.down) .scroll-header-wrap { transform: var(--scroll-header-top); } .scroll-header-wrap > .left { display: flex; gap: 16px; width: 100%; max-width: calc(100% - 611px); } .scroll-header-wrap > .left .img-wrap { position: relative; width: 40px; min-width: 40px; height: 56px; } .scroll-header-wrap > .left > .text-wrap { width: calc(100% - 60px); } .scroll-header-wrap > .left .img-wrap > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; } .scroll-header-wrap .text-wrap > p { color: #211D1D; font-size: 20px; font-weight: 500; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scroll-header-wrap .text-wrap .price-wrap { display: flex; gap: 8px; align-items: center; } .scroll-header-wrap .text-wrap .price-wrap > span { color: #5A5858; font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 400; line-height: 32px; text-decoration-line: line-through; } .scroll-header-wrap .text-wrap .price-wrap p { color: #211D1D; font-family: "HvDTrial Brandon Grotesque"; font-size: 20px; font-weight: 420; line-height: 28px; } .scroll-header-wrap > .right { width: 100%; max-width: 603px; } .scroll-header-wrap > .right .btn-wrap { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .scroll-header-wrap > .right .btn-wrap .link { display: flex; height: 48px; align-items: center; justify-content: center; flex: 1; padding: 0 16px; border-radius: 4px; border: 1px solid #211D1D; background: #FFFFFF; color: #211D1D; font-size: 16px; font-weight: 500; line-height: 1; transition: all .5s; min-width: 100px; max-width: 297px; } .scroll-header-wrap > .right .btn-wrap .link.active { color: #FFFFFF; background: #211D1D; border: 1px solid #211D1D; } .scroll-header-wrap > .right .btn-wrap .link:hover { background: #FB663A; border: 1px solid #FB663A; color: #FFFFFF; } #productDetail .thumb-info .bg.active { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #211D1D; opacity: 0.5; z-index: 1000; } #productDetail .thumb-info .form-wrap.popup { position: fixed; right: -100%; top: 0; width: 100%; height: 100vh; max-width: 376px; background: #FFFCF8; z-index: 1001; overflow-y: auto; transition: right .5s ease-in-out; padding: 66px 24px 24px; border-radius: 16px 0px 0px 16px; } #productDetail .thumb-info .form-wrap.popup .tit-prd, #productDetail .thumb-info .form-wrap.popup .sub-prd, #productDetail .thumb-info .form-wrap.popup .price-wrap, #productDetail .thumb-info .form-wrap.popup .accordion-wrap.detail-accordion-wrap { display: none; } #productDetail .thumb-info .form-wrap.popup.active { right: 0; } #productDetail .thumb-info .form-wrap .btn-popup-close { display: none; position: fixed; top: 16px; right: -100%; width: 16px; height: 16px; background: url('/design/hangso1/mallskin/pc/images/icon_nav_close.png') no-repeat center; z-index: 1002; transition: right .5s ease-in-out; } #productDetail .thumb-info .form-wrap.popup .btn-popup-close { display: block; } #productDetail .thumb-info .form-wrap.popup .btn-popup-close.active { right: 16px; } html.popup-open { overflow: hidden; height: auto; } .sold-out-text { color: #211D1D; font-size: 18px; font-weight: 500; line-height: 24px; margin-bottom: 80px; } .btn-link-wrap { display: flex; justify-content: center; padding-top: 40px; } .btn-link-wrap > a { display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 48px; padding: 0 16px; margin-bottom: -30px; border-radius: 4px; border: 1px solid #211D1D; color: #211D1D; text-align: center; font-size: 20px; font-weight: 500; line-height: 1; transition: all .5s; } .btn-link-wrap > a:hover { background: #FB663A; color: #FFFFFF; border: 1px solid #FB663A; } /*990이하일때*/ @media (max-width: 990px) { #productDetail .thumb-info { flex-direction: column; } #productDetail .thumb-info .thumb-wrap { min-width: 0; width: 100%; } #productDetail .thumb-info .thumb-wrap > .inner-box { position: relative; top: auto; flex-direction: column-reverse; } #productDetail .thumb-info .thumb-wrap > .inner-box.single { flex-direction: column; } #productDetail .thumb-info .info { max-width: 100%; width: 100%; } #productDetail .thumb-info .form-wrap { padding: 40px 0 0; } .accordion-wrap.detail-accordion-wrap { max-width: 100%; } #productDetail .thumb-info #detailSwiperThumb { height: auto; } .main-slider-wrap { width: 100%; max-width: 100%; max-height: 100%; padding: 32px 0 24px; } #detailSwiperThumb .swiper-slide a { width: 100%; height: 130px; } .thumb-slider-wrap { padding: 0 50px 0; } .thumb-slider-wrap .swiper-button-prev { width: 45px; height: 100%; right: auto; top: auto; transform: none; left: 0; bottom: 0; overflow: hidden; } .thumb-slider-wrap .swiper-button-prev:after, .thumb-slider-wrap .swiper-button-next:after { transform: rotate(-90deg); pointer-events: none; } .thumb-slider-wrap .swiper-button-next { width: 45px; height: 100%; left: auto; top: auto; transform: none; right: 0; bottom: 0; overflow: hidden; } #productDetail .thumb-info .thumb-wrap > .inner-box .zoom-wrap { width: 100%; top: 0; position: relative; padding: 16px 0; } .main-slider-wrap > .arrow { display: none; } #detailSwiper .swiper-slide a img, #detailSwiperThumb .swiper-slide a img { width: 100%; } #productDetail .thumb-info { gap: 0; } .accordion-wrap.detail-accordion-wrap { margin-bottom: 0; } .extra-title { margin: 80px auto 24px; } #extraSliderWrap .swiper { padding: 0 40px 40px; } .scroll-header-wrap > .right { max-width: 350px; } .scroll-header-wrap > .left { max-width: calc(100% - 358px); } .scroll-header-wrap { transform: none !important; bottom: 0 !important; top: auto !important; } #detailSwiper .swiper-slide { height: auto; } } @media (max-width: 768px) { #extraSliderWrap { padding: 0; } #extraSliderWrap .name { font-size: 16px; max-height: 40px; } #extraSliderWrap .swiper-button-prev, #extraSliderWrap .swiper-button-next { display: none; } .extra-title { font-size: 26px; } #extraSliderWrap .swiper-slide .img-wrap { padding-bottom: 100%; } #contentWrapper { overflow: hidden; } .scroll-header-wrap > .left { max-width: calc(50% - 8px) } .scroll-header-wrap > .right { max-width: 50% } #productDetail .thumb-info .form-wrap.popup { top: auto; bottom: -100%; right: 0; max-width: 100%; border-radius: 16px 16px 0 0; height: 76vh; transition: bottom .5s ease-in-out; } #productDetail .thumb-info .form-wrap.popup.active { right: 0; top: auto; bottom: 0; } #productDetail .thumb-info .form-wrap.popup .btn-popup-close { top: auto; right: 24px; bottom: 0; transition: bottom .5s ease-in-out; } #productDetail .thumb-info .form-wrap.popup .btn-popup-close.active { top: auto; right: 24px; bottom: calc(76vh - 40px); } #productDetail #nhn_btn, #productDetail .npay_type_A_2 { width: 100% !important; } .thumb-slider-wrap .swiper-button-next, .thumb-slider-wrap .swiper-button-prev { width: 25px; } .thumb-slider-wrap { padding: 0 30px 0; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-slide { padding: 0 0 100px; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-prev:after, #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-button-next:after { display: block; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-pagination { left: 0; flex-direction: row; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap #popupSwiper { height: auto; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap { padding: 90px 8px; box-sizing: border-box; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-slide { height: auto; } #productDetail .thumb-info .thumb-wrap .img-popup-wrap .swiper-slide img { height: auto; width: 100%; } .swiper-button-lock { display: none !important; } } @media (max-width: 500px) { .scroll-header-wrap { flex-wrap: wrap; flex-direction: column; gap: 16px; } .scroll-header-wrap > .left, .scroll-header-wrap > .right { max-width: 100%; } .scroll-header-wrap .text-wrap > p, .scroll-header-wrap .text-wrap .price-wrap p { font-size: 18px; } } @media (max-width: 375px) { .extra-title { font-size: 24px; } #extraSliderWrap .swiper { padding: 0 0 40px; } #extraSliderWrap, #extraSliderWrap .swiper { overflow: visible; } #detailSwiperThumb .swiper-slide a { height: 70px; } } /* 각인서비스 */ * { font-family: "Pretendard Variable", Pretendard; } @font-face { font-display: swap; font-family: Moleskine_icons; font-style: normal; font-weight: 400; src: url(https://www.moleskine.co.kr/design/hangso1/mallskin/pc/fonts/Moleskine_icons-Regular.woff2) format("woff2"),url(https://www.moleskine.co.kr/design/hangso1/mallskin/pc/fonts/Moleskine_icons-Regular.woff) format("woff") } .icon-font-legacy { font-family: Moleskine_icons; height: 35px; padding: 3px; width: 35px; font-size: 2.5rem; } .imprint-top { -webkit-box-align: center; -webkit-box-pack: center; align-content: flex-start; align-items: center; display: -webkit-box; display: flex; flex-flow: wrap; gap: 16px; justify-content: center; left: 10px; padding: 40px 0; position: absolute; top: 20px; width: calc(100% - 70px); } .imprint-patch-item { -webkit-box-flex: 1; flex: 1 0 calc(50% - 32px); max-width: calc(50% - 28px); } .imprint-patch-item > img { height: auto; width: 100%; -o-object-fit: contain; object-fit: contain; } .imprint-top .imprint-patch-item:nth-child(n+4) { display: none; } .text-contents-wrap .imprint-top, .text-contents-wrap .imprint-center { display: none; } .imprint-center { -webkit-box-align: center; -webkit-box-pack: center; align-content: flex-start; align-items: center; display: -webkit-box; display: flex; flex-flow: wrap; justify-content: flex-start; left: 8px; position: absolute; top: 60%; width: calc(100% - 61px) } .imprint-center .imprint-patch-item { max-width: calc(100% - 22px); } .imprint-bottom { position: absolute; left: 50%; bottom: 85px; transform: translateX(-50%); } .imprint-bottom--text { display: none; } .imprint-bottom--mono { display: none; } .imprint-bottom--symbol { display: flex; justify-content: center; -webkit-box-pack: center; } .imprint-bottom--my { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 1.75rem; } .imprint-bottom--moleskine { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 1.75rem; } .font-arial .imprint-bottom--my, .font-arial .imprint-bottom--moleskine { font-family: Arial, sans-serif; font-size: 20px; } .color-gold .imprint-bottom--my, .color-gold .imprint-bottom--moleskine, .color-gold .imprint-bottom--symbol { color: rgba(226, 187, 46, 1); } .color-silver .imprint-bottom--my, .color-silver .imprint-bottom--moleskine, .color-silver .imprint-bottom--symbol { color: rgba(169, 169, 169, 1); } .style-square .imprint-bottom--initials { display: flex; justify-content: center; align-items: center; gap: 10px; } .style-square .imprint-bottom--initials span { font-size: 20px; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; padding: 4px; border-radius: 4px; border: 1px solid; box-sizing: border-box; } .style-circle .imprint-bottom--initials { display: flex; justify-content: center; align-items: center; gap: 10px; } .style-circle .imprint-bottom--initials span { font-size: 20px; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; padding: 4px; border-radius: 50%; box-sizing: border-box; } .style-square.color-gold .imprint-bottom--initials span { color: rgba(226, 187, 46, 1); border-color: #e2bb2e; } .style-square.color-silver .imprint-bottom--initials span { color: rgba(169, 169, 169, 1); border-color: #a9a9a9; } .style-circle.color-gold .imprint-bottom--initials span { color: rgb(0, 51, 73, 1); background-color: #e2bb2e; } .style-circle.color-silver .imprint-bottom--initials span { color: rgb(0, 51, 73); background-color: #a9a9a9; } .patch-contents-wrap .imprint-bottom, .order-contents-wrap .imprint-bottom { bottom: 137px; } /* 공통 */ .imprint-popup-wrap { visibility: hidden; position: fixed; left: 100%; top: 0; width: 100%; height: 100vh; z-index: 9999; transition: all .5s; } .imprint-popup-wrap button { border: 0; } .imprint-popup-wrap button span { visibility: visible; } .imprint-popup-wrap.active { left: 0; visibility: visible; } .contents-wrap { max-width: calc(100% - 153px); height: 100vh; background: var(--Primary-Moleskin-White, #FFFCF8); } .imprint-popup-open { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 183px; height: 48px; line-height: 45px; background: #FFFFFF; border: 1px solid #000000; border-radius: 5px; font-size: 20px; cursor: pointer; color: #000000; margin: 8px auto 0; } .contents-wrap [data-tab] { display: none; height: 100%; } .contents-wrap [data-tab].active { display: block; } .imprint-popup-wrap .btn-back { display: none; position: absolute; align-items: center; right: 177px; top: 24px; color: #767873; font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 420; line-height: 24px; z-index: 2; background: transparent; } .imprint-popup-wrap .btn-back:before { content: ''; width: 16px; height: 16px; display: inline-block; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_back.png') no-repeat center; } /* root css */ :root { --light-gray: #DDDCD7; --Primary-Moleskin-White: #FFFCF8; --Primary-Mid-Grey: #A6A4A4; --Family-Eng: "HvDTrial Brandon Grotesque"; --Primary-Off-White: #F4F2EF; --Primary-Almost-Black: #211D1D; --Primary-Pure-White: #ffffff; --Primary-Moleskine-Orange: #FB663A; --Primary-Grey: #767873; } /* nav 네비게이션 */ .imprint-nav-wrap { position: absolute; right: 0; top: 0; width: 153px; height: 100vh; box-sizing: border-box; border-left: 1px solid var(--light-gray, #DDDCD7); background: var(--Primary-Moleskin-White, #FFFCF8); overflow-y: auto; z-index: 1; } .imprint-nav-wrap .btn-close { display: block; width: 100%; height: 47px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav_close.png') no-repeat center; border-radius: 4px; border-bottom: 1px solid var(--Primary-Mid-Grey, #A6A4A4); opacity: 0.5; } .imprint-nav-wrap .or { background: var(--Primary-Off-White, #F4F2EF); color: var(--Primary-Mid-Grey, #A6A4A4); font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 390; line-height: 21px; text-align: center; height: 25px; } .imprint-nav-wrap .btn-nav { display: block; width: 100%; background: transparent; border-bottom: 1px solid var(--Primary-Mid-Grey, #A6A4A4); } .imprint-nav-wrap .btn-nav span { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 4px; visibility: inherit; color: var(--Primary-Mid-Grey, #A6A4A4); font-size: 14px; font-weight: 400; height: 120px; box-sizing: border-box; } .imprint-nav-wrap .btn-nav span:before { content: ''; display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav01.png'); } .imprint-nav-wrap .btn-nav.mono span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav02.png'); } .imprint-nav-wrap .btn-nav.letter span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav03.png'); } .imprint-nav-wrap .btn-nav.patch span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav04.png'); } .imprint-nav-wrap .btn-nav.order span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav05.png'); } .imprint-nav-wrap .btn-nav.text { border-bottom: 0; } .imprint-nav-wrap .btn-nav.active { background: var(--Primary-Almost-Black, #211D1D); } .imprint-nav-wrap .btn-nav.active span { color: var(--Primary-Pure-White, #FFF); } .imprint-nav-wrap .btn-nav.text.active span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav01_active.png'); } .imprint-nav-wrap .btn-nav.mono.active span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav02_active.png'); } .imprint-nav-wrap .btn-nav.letter.active span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav03_active.png'); } .imprint-nav-wrap .btn-nav.patch.active span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav04_active.png'); } .imprint-nav-wrap .btn-nav.order.active span:before { background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav05_active.png'); } .imprint-nav-wrap .btn-nav.complete span:after { content: ''; display: inline-block; width: 20px; height: 20px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_option_check.png') no-repeat center; margin-top: 4px; } /* 메인 컨텐츠 */ .contents-wrap .main { position: relative; height: 100vh; background: var(--Primary-Moleskin-White, #FFFCF8); overflow: hidden; } .contents-wrap .main:before { content: ''; position: absolute; right: -4px; top: -78px; width: 338px; height: 310px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; } .contents-wrap .main:after { content: ''; position: absolute; left: -4px; bottom: -198px; width: 338px; height: 310px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; } .main .main-contents-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 22px; align-items: center; justify-content: space-between; width: 100%; max-width: 840px; padding: 0 16px; box-sizing: border-box; max-height: 100vh; overflow-y: auto; } .main .main-contents-wrap > span { color: var(--Primary-Mid-Grey, #A6A4A4); text-align: center; font-family: "HvDTrial Brandon Grotesque"; font-size: 32px; font-weight: 390; line-height: 48px; margin-top: 120px; } .main .main-contents-wrap .item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; } .main .main-contents-wrap .item .img-wrap { margin-bottom: 20px; } .main .main-contents-wrap .item .img-wrap > img { display: block; width: 100%; } .main .main-contents-wrap .item strong { display: block; margin-bottom: 24px; color: var(--Primary-Almost-Black, #211D1D); font-size: 36px; font-weight: 500; line-height: 44px; } .main .main-contents-wrap .item p { color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 400; line-height: 24px; word-break: keep-all; margin-bottom: 32px; } .main .main-contents-wrap .item .btn-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; max-width: 268px; border-radius: 4px; background: var(--Primary-Almost-Black, #211D1D); color: var(--Primary-Pure-White, #FFF); font-size: 18px; font-weight: 400; } /*탭-텍스트*/ .text-contents-wrap { display: flex; height: 100%; overflow-y: auto; } .text-contents-wrap .item { flex: 1; } .text-contents-wrap .item.left { position: relative; padding: 240px 0 60px; overflow: hidden; } .text-contents-wrap .item.left:before, .text-contents-wrap .item.left:after { content: ''; width: 338px; height: 310px; position: absolute; right: 8px; top: 58px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; } .text-contents-wrap .item.left:after { right: auto; left: 0; top: auto; bottom: -184px; } .text-contents-wrap .item.left .img-wrap { display: flex; position: relative; padding: 0 16px; } .text-contents-wrap .item.left .img-wrap > .img-inner { position: relative; display: inline-flex; justify-content: space-between; max-width: 100%; margin: 0 auto; } .text-contents-wrap .item.left .img-wrap > .img-inner img { width: 400px; max-width: 100%; } .text-contents-wrap .item.right { max-width: 468px; width: 100%; min-width: 380px; } .option-box { padding: 80px 56px; box-sizing: border-box; text-align: left; word-break: keep-all; } .option-box .title { color: var(--Primary-Almost-Black, #211D1D); font-size: 36px; font-weight: 500; line-height: 44px; margin-bottom: 4px; } .option-box .sub-title { color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 400; line-height: 26px; margin-bottom: 16px; } .option-box .btn-tab-wrap { position: relative; display: flex; margin-bottom: 32px; } .option-box .btn-tab-wrap .btn-tab { position: relative; display: flex; height: 60px; align-items: center; justify-content: center; flex: 1; background: transparent; border-bottom: 2px solid #5A5858; color: var(--Primary-Mid-Grey, #A6A4A4); font-size: 18px; font-weight: 400; overflow: visible; } .option-box .btn-tab-wrap .btn-tab.active { color: var(--Primary-Almost-Black, #211D1D); } .option-box .btn-tab-wrap .btn-tab.active:after { content: ''; width: 100%; height: 4px; position: absolute; left: 0; bottom: -3px; background: var(--Primary-Moleskine-Orange, #FB663A); } .option-box .btn-tab-wrap .or { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; color: var(--Primary-Mid-Grey, #A6A4A4); font-family: "HvDTrial Brandon Grotesque"; font-size: 18px; font-weight: 420; } .option-box .padding-box { padding: 0 20px 24px 0; } .option-box .desc { color: var(--Primary-Mid-Grey, #A6A4A4); font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 16px; } .text-contents-wrap.mono .accordion-wrap { margin-bottom: 16px; } .accordion-wrap { margin-bottom: 40px; } .accordion-wrap .accordion-header { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 400; background: transparent; } .accordion-wrap .accordion-header:before, .accordion-wrap .accordion-header:after { content: ''; position: absolute; width: 16px; height: 1px; background: #211D1D; top: 50%; transform: translateY(-50%); right: 0; transition: all .5s; } .accordion-wrap .accordion-header:after { transform: translateY(-50%) rotate(-90deg); } .accordion-wrap .accordion-header.active:after { transform: translateY(-50%); } .accordion-wrap .accordion-body { padding-bottom: 9px; } .accordion-wrap .accordion-body, .accordion-wrap .accordion-header .edit { display: none; } .accordion-wrap .accordion-header .edit { align-items: center; gap: 16px; color: var(--Primary-Almost-Black, #211D1D); font-size: 13px; font-weight: 400; line-height: 24px; visibility: inherit; white-space: nowrap; } .accordion-wrap .accordion-header .edit:after { content: ''; display: inline-block; width: 20px; height: 20px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_option_check.png') no-repeat center; } .accordion-wrap .accordion-header.selected .edit { display: flex; } .accordion-wrap .accordion-header.selected:before, .accordion-wrap .accordion-header.selected:after { content: none; } .accordion-wrap .accordion-item + .accordion-item .accordion-header { border-top: 1px solid #E8E6E1; gap: 4px; } .accordion-wrap .complete-text { display: none; color: var(--Primary-Grey, #767873); font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 390; line-height: 24px; margin-bottom: 13px; text-align: left; } .accordion-wrap .accordion-header.selected + .complete-text { display: block; } .accordion-wrap .accordion-header.selected.active + .complete-text { display: none; } .input-wrap { position: relative; margin-bottom: 8px; } .input-wrap .cnt-wrap { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #5A5858; font-family: "HvDTrial Brandon Grotesque"; font-size: 14px; font-weight: 390; line-height: 18px; } .input-wrap .cnt-wrap span { color: #5A5858; font-family: "HvDTrial Brandon Grotesque"; font-size: 14px; font-weight: 390; line-height: 18px; } .input-wrap.col-1 { display: inline-block; margin-right: 4px; width: 48px; } .input-wrap.col-1 input { padding: 0 16px; box-sizing: border-box; } .input-wrap.col-1 label { left: 50%; transform: translateX(-50%); } .input-wrap.col-1 input:focus ~ label, .input-wrap.col-1 input:valid ~ label { left: 22px; } .option-box .symbol-wrap { display: none; gap: 16px; flex-wrap: nowrap; overflow-x: scroll; padding-bottom: 24px; } .option-box .symbol-wrap.active { display: flex; } .option-box .symbol-wrap li { position: relative; cursor: pointer; } .option-box .symbol-wrap li.active:after { content: ''; position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); left: 0; top: 0; border: 2px solid var(--Primary-Moleskine-Orange, #FB663A); } .option-box .font-list-wrap { display: flex; gap: 16px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .option-box .font-list-wrap button { display: flex; align-items: center; justify-content: center; min-width: 150px; height: 40px; border-radius: 999px; border: 1px solid #A9A9A9; background: #A9A9A9; color: var(--Primary-Pure-White, #FFF); font-size: 20px; font-style: normal; font-weight: 400; line-height: 20px; } .option-box .font-list-wrap .arial button { font-family: Arial; } .option-box .font-list-wrap li.active button { border: 1px solid #211D1D; background: #211D1D; } .option-box .color-list-wrap { padding-top: 4px; display: flex; gap: 8px; } .option-box .color-list-wrap button { position: relative; width: 32px; height: 32px; border-radius: 50%; background: transparent; } .option-box .color-list-wrap button:before { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #E2BB2E; top: 50%; left: 50%; transform: translate(-50%, -50%); } .option-box .color-list-wrap li.active button.gold { border: 1px solid #E2BB2E; } .option-box .color-list-wrap li.active button.silver { border: 1px solid #A9A9A9; } .option-box .color-list-wrap button.silver:before { background: #A9A9A9; } .option-box .total-price-wrap { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 24px; } .option-box .total-price-wrap + .total-price-wrap { margin-top: -20px; } .option-box .total-price-wrap p { color: var(--Primary-Almost-Black, #211D1D); font-size: 18px; font-weight: 500; } .option-box .total-price-wrap span { color: var(--Primary-Almost-Black, #211D1D); font-family: "Brandon Grotesque"; font-size: 20px; font-weight: 420; line-height: 32px; white-space: nowrap; } .option-box .btn-step-wrap { display: flex; gap: 8px; flex-direction: column; } .option-box .btn-step-wrap .btn-step { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 48px; background: #FFFFFF; border-radius: 4px; border: 1px solid var(--Primary-Almost-Black, #211D1D); color: var(--Primary-Almost-Black, #211D1D); font-size: 18px; font-weight: 400; line-height: 20px; } .option-box .btn-step-wrap .btn-step.next { background: #5A5858; border: 1px solid #5A5858; color: #FFFFFF; } .option-box .btn-step-wrap .btn-step.next.active { background: #000; } .option-box .notice-text { margin-top: 24px; color: var(--Primary-Almost-Black, #211D1D); font-family: "HvDTrial Brandon Grotesque"; font-size: 13px; font-weight: 390; line-height: 20px; word-break: keep-all; } .style-list-wrap { display: flex; gap: 20px; justify-content: space-between; } .style-list-wrap > li { flex: 1; } .style-list-wrap > li > button { position: relative; width: 100%; height: 103px; background: transparent; border-radius: 4px; border: 1px solid var(--Primary-Mid-Grey, #A6A4A4); } .style-list-wrap > li > button > span { visibility: visible; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 4px; border: 1px solid var(--light-gray, #DDDCD7); background: var(--Primary-Grey, #767873); color: var(--Primary-Pure-White, #FFF); font-family: "HvDTrial Brandon Grotesque"; font-size: 18px; font-weight: 390; } .style-list-wrap > li > button.style2 > span { border-radius: 50%; background: var(--Primary-Mid-Grey, #A6A4A4); } .style-list-wrap > li.active > button { border: 1px solid var(--Primary-Mid-Grey, #A6A4A4); background: #000; } .style-list-wrap > li.active > button > span { background: transparent; } .sub-main-wrap { display: flex; justify-content: space-between; gap: 16px; overflow-y: auto; } .sub-main-wrap .img-wrap > img { display: block; max-width: 100%; } .sub-main-wrap .item { flex: 1; } .sub-main-wrap .right { padding: 88px 16px; } .sub-main-wrap .right .inner-box { margin: 0 auto; max-width: 437px; text-align: left; } .sub-main-wrap .right .title { display: block; color: var(--Primary-Almost-Black, #211D1D); font-size: 36px; font-weight: 500; line-height: 44px; margin-bottom: 16px; word-break: keep-all; } .sub-main-wrap .right .sub-title { color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 400; line-height: 24px; margin-bottom: 32px; word-break: keep-all; } .sub-main-wrap .btn-wrap { display: flex; gap: 16px; } .sub-main-wrap .btn-wrap .btn-link { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 150px; height: 48px; border-radius: 4px; background: var(--Primary-Almost-Black, #211D1D); border: 1px solid var(--Primary-Almost-Black, #211D1D); box-sizing: border-box; color: var(--Primary-Pure-White, #FFF); text-align: center; font-size: 18px; font-weight: 400; line-height: 20px; } .sub-main-wrap .btn-wrap .btn-link.skip { background: transparent; color: var(--Primary-Almost-Black, #211D1D); } .letter-contents-wrap { position: relative; display: flex; justify-content: space-between; gap: 16px; height: 100%; padding: 64px 16px 24px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .letter-contents-wrap:before { content: ''; position: absolute; left: -40px; bottom: 120px; width: 338px; height: 310px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; background-size: cover; } .letter-contents-wrap > .left { display: flex; flex-direction: column; width: 100%; max-width: 652px; } .letter-contents-wrap > .right { overflow-y: auto; height: 100%; } .letter-contents-wrap .option-box { padding: 30px 0 24px; } .letter-contents-wrap .btn-mo-detail { position: relative; display: none; width: 100%; height: 65px; padding: 15px 20px 0; align-items: center; gap: 10px; justify-content: space-between; color: var(--Primary-Almost-Black, #211D1D); font-size: 18px; font-weight: 400; background: transparent; } .letter-contents-wrap .btn-mo-detail:after { content: ''; position: absolute; right: 20px; top: 60%; transform: translateY(-50%); width: 16px; height: 16px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_list_arrow.png') no-repeat center; } .letter-contents-wrap .list-header { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; padding: 0 16px 8px; } .letter-contents-wrap .cate-wrap { display: flex; gap: 8px; flex-flow: wrap; } .letter-contents-wrap .mo-title { display: none; color: var(--Primary-Almost-Black, #211D1D); font-size: 34px; font-style: normal; font-weight: 500; text-align: left; } .letter-contents-wrap .cate-wrap li > button { display: flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid #DDDCD7; color: var(--Primary-Mid-Grey, #A6A4A4); font-family: "HvDTrial Brandon Grotesque"; font-size: 14px; font-weight: 390; line-height: 16px; background: transparent; white-space: nowrap; } .letter-contents-wrap .cate-wrap li.active > button { border: 1px solid #211D1D; background: #211D1D; color: #FFFFFF; } .letter-contents-wrap .search-wrap .btn-search { width: 36px; height: 36px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_letter_search.png') no-repeat center; } .letter-contents-wrap .search-popup-wrap { display: none; border: 1px solid #4A4444; border-radius: 4px; width: 100%; position: relative; left: 0; top: 0; height: auto; padding: 0; } .letter-contents-wrap .list-header.active .search-popup-wrap { display: flex; } .letter-contents-wrap .list-header.active .cate-wrap, .letter-contents-wrap .list-header.active .search-wrap { display: none; } .letter-contents-wrap .search-popup-wrap .btn-search { display: flex; width: 86px; height: 48px; align-items: center; justify-content: center; border-radius: 4px; background: var(--Primary-Almost-Black, #211D1D); color: var(--Primary-Pure-White, #FFF); text-align: center; font-family: "HvDTrial Brandon Grotesque"; font-size: 20px; font-weight: 420; line-height: 28px; } .letter-contents-wrap .search-popup-wrap .input-wrap { width: calc(100% - 86px); height: 48px; margin: 0; } .letter-contents-wrap .search-popup-wrap .input-wrap .btn-popup-close { position: absolute; right: 0; top: 0; width: 40px; height: 48px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_nav_close.png') no-repeat center; background-size: 16px; } .letter-contents-wrap .search-popup-wrap input { border: 0; color: #5A5858; font-size: 20px; font-weight: 400; line-height: 150%; padding-right: 40px; } .letter-contents-wrap .list-wrap { padding: 16px; overflow-y: auto; flex: 1; z-index: 1; } .letter-contents-wrap .list-wrap::-webkit-scrollbar { width: 4px; background: #F1F1F1; } .letter-contents-wrap .list-wrap::-webkit-scrollbar-thumb { background: #FB663A; } .letter-contents-wrap .list-wrap::-webkit-scrollbar-track { background: #F1F1F1; } .letter-contents-wrap .list-wrap .list-item { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 10px 18px 10px 10px; cursor: pointer; } .letter-contents-wrap .list-wrap .list-item .left .img-wrap { position: relative; width: 112px; height: 90px; overflow: hidden; background: #FFFCF8; } .letter-contents-wrap .list-wrap .list-item .left .img-wrap img { width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .letter-contents-wrap .list-wrap .list-item .left { display: flex; gap: 16px; align-items: center; } .letter-contents-wrap .list-wrap .list-item .text-box { display: flex; gap: 8px; align-items: center; } .letter-contents-wrap .list-wrap .list-item .text-box .symbol { position: relative; width: 28px; height: 28px; border: 1px solid #000000; border-radius: 50%; box-sizing: border-box; } .letter-contents-wrap .list-wrap .list-item .text-box .symbol:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; } .letter-contents-wrap .list-wrap .list-item .text-box .symbol.gold:before { background: #E2BB2E; } .letter-contents-wrap .list-wrap .list-item .text-box .symbol.silver:before { background: #A9A9A9; } .letter-contents-wrap .list-wrap .list-item .text-box > p { color: var(--Primary-Grey, #767873); font-family: "HvDTrial Brandon Grotesque"; font-size: 18px; font-weight: 390; line-height: 28px; } .letter-contents-wrap .list-wrap .list-item.active { outline: 2px solid #FB663A; outline-offset: -2px; } .letter-contents-wrap .list-wrap > #imprint_product > li { background: var(--Primary-Moleskin-White, #FFFCF8); box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.08); } .letter-contents-wrap .list-wrap > #imprint_product > li + li { margin-top: 8px; } .letter-contents-wrap .list-wrap .right .btn { display: flex; gap: 10px; align-items: center; padding: 0 6px; background: transparent; font-size: 13px; } .letter-contents-wrap .list-wrap .right .btn .icon { position: relative; display: block; width: 12px; height: 12px; visibility: visible; } .letter-contents-wrap .list-wrap .right .btn .icon:before, .letter-contents-wrap .list-wrap .right .btn .icon:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 1px; background: #000000; } .letter-contents-wrap .list-wrap .right .btn .icon:after { transform: translate(-50%, -50%) rotate(90deg); } .letter-contents-wrap .list-wrap .selected-box { gap: 24px; } .letter-contents-wrap .list-wrap .selected-box, .letter-contents-wrap .list-wrap .btn-select { display: none !important; } .letter-contents-wrap .list-wrap .selected-box.active, .letter-contents-wrap .list-wrap .btn-select.active { display: flex !important; } .letter-contents-wrap .list-wrap .list-item.sold-out .selected-box, .letter-contents-wrap .list-wrap .list-item.sold-out .btn-select { display: none !important; } .letter-contents-wrap .list-wrap .btn-delete .icon { transform: rotate(45deg); } .letter-contents-wrap .list-wrap .list-item .sold-out { display: none; align-items: center; gap: 8px; height: 32px; padding: 0 15px; border-radius: 999px; background: var(--Primary-Off-White, #F4F2EF); } .letter-contents-wrap .list-wrap .list-item.sold-out .sold-out { display: flex; } .letter-contents-wrap .list-wrap .list-item .sold-out .icon { display: block; width: 14px; height: 14px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_letter_soldout.png') no-repeat center; } .letter-contents-wrap .list-wrap .list-item .sold-out > p { color: var(--Primary-Grey, #767873); text-align: center; font-size: 13px; font-weight: 400; line-height: 16px; } .count-input-wrap { display: flex; align-items: center; gap: 16px; height: 46px; border-radius: 4px; border: 1px solid var(--Primary-Mid-Grey, #A6A4A4); background: transparent; padding: 0 8px; box-sizing: border-box; } .count-input-wrap > .btn-minus { display: inline-block; width: 16px; height: 16px; background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_minus.png'); background-size: cover; background-repeat: no-repeat; text-indent: -9999px; } .count-input-wrap > .btn-plus { display: inline-block; width: 16px; height: 16px; background-image: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_plus.png'); background-size: cover; background-repeat: no-repeat; text-indent: -9999px; } .count-input-wrap input { width: 32px; height: 28px; text-align: center !important; color: var(--Primary-Almost-Black, #211D1D); font-family: "HvDTrial Brandon Grotesque"; font-size: 20px; font-weight: 390; line-height: 28px; background: transparent; border: 0; box-sizing: border-box; padding: 0; } .count-input-wrap button:before { content: ''; position: absolute; right: -8px; top: 0; width: 1px; height: 16px; background: #A6A4A4; } .count-input-wrap .btn-plus:before { right: auto; left: -8px; } .select-list-wrap { margin-bottom: 32px; } .select-list-wrap .select-list { margin-bottom: 24px; } .select-list-wrap .select-list .list-item { display: flex; gap: 4px; justify-content: space-between; align-items: center; border-bottom: 1px solid #F4F2EF; padding: 8px 8px 8px 0; } .select-list-wrap .select-list .list-item .img-wrap { position: relative; width: 48px; height: 48px; overflow: hidden; } .select-list-wrap .select-list .list-item .img-wrap img { display: block; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .select-list-wrap .select-list .list-item .item { display: flex; gap: 26px; align-items: center; } .select-list-wrap .select-list .list-item .item p { color: var(--Primary-Almost-Black, #211D1D); font-family: "HvDTrial Brandon Grotesque"; font-size: 18px; font-weight: 420; line-height: 28px; } .select-list-wrap .select-list .list-item .price { color: var(--Primary-Grey, #767873); font-family: "HvDTrial Brandon Grotesque"; font-size: 16px; font-weight: 390; line-height: 22px; } .select-list-wrap .select-list .list-item .right { gap: 12px; } .select-list-wrap .select-list .list-item .btn-delete { position: relative; width: 16px; height: 16px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_list_delete.png') no-repeat center; } .select-list-wrap .btn-wrap { display: flex; } .select-list-wrap .btn-wrap .btn-all-delete { display:none; color: var(--Primary-Almost-Black, #211D1D); font-size: 16px; font-weight: 500; line-height: 26px; background: transparent; } .tab-patch { overflow-y: auto; } .patch-contents-wrap { display: flex; position: relative; justify-content: space-between; gap: 96px; height: 100%; padding: 64px 16px 24px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .patch-contents-wrap .option-box .title { font-size: 32px; } .patch-contents-wrap .left { min-width: 320px; flex: 1; } .patch-contents-wrap .right { width: 100%; max-width: 480px; } .patch-contents-wrap .img-wrap { position: relative; } .patch-contents-wrap .img-wrap:before, .patch-contents-wrap .img-wrap:after { content: ''; width: 338px; height: 310px; position: absolute; left: -10px; bottom: 0px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; background-size: cover; } .patch-contents-wrap .img-wrap:after { left: auto; right: 8px; top: 8px; bottom: auto; } .patch-contents-wrap .img-wrap > .img-inner { position: relative; display: inline-flex; justify-content: space-between; width: 100%; max-width: 100%; margin: 0 auto; padding: 40px 0 52px; } .patch-contents-wrap .img-wrap > .img-inner img { display: block; width: 400px; max-width: 100%; margin: 0 auto; } .patch-contents-wrap .option-box .right { width: 100%; max-width: 480px; } .patch-contents-wrap .option-box { padding: 30px 0 24px; } .patch-contents-wrap .option-box .sub-title { color: var(--Primary-Grey, #767873); font-size: 14px; font-weight: 400; line-height: 22px; margin-bottom: 0px; } .patch-contents-wrap .option-box .padding-box { padding: 20px 0; overflow-y: auto; } .patch-contents-wrap .accordion-wrap .accordion-header:before { width: 16px; height: 16px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_list_arrow.png') no-repeat center; transform: translateY(-50%) rotate(-180deg); } .patch-contents-wrap .accordion-wrap .accordion-header.active:before { transform: translateY(-50%) rotate(0); } .patch-contents-wrap .accordion-wrap .accordion-header:after { content: none; } .patch-contents-wrap .option-box .desc { margin-bottom: 10px; } .patch-contents-wrap .patch-list { display: flex; gap: 18px 16px; flex-wrap: wrap; align-items: center; padding: 0 1px 24px; } .patch-contents-wrap .patch-list button { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; } .patch-contents-wrap .patch-list button .count { display: none; visibility: visible; position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 50%; background: var(--Primary-Moleskine-Orange, #FB663A); color: var(--Primary-Pure-White, #FFF); font-family: "HvDTrial Brandon Grotesque"; font-size: 10px; font-weight: 390; line-height: 14px; } .patch-contents-wrap .patch-list li.active button .count { display: flex; } .patch-contents-wrap .patch-list li.active button { outline: 1px solid var(--Primary-Moleskine-Orange, #FB663A); } .patch-contents-wrap .accordion-wrap .accordion-item + .accordion-item .accordion-header { border-top: 0; } .patch-contents-wrap .count-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .patch-contents-wrap .count-wrap .name { color: var(--Primary-Grey, #767873); font-size: 16px; font-weight: 400; line-height: 22px; } .patch-contents-wrap .option-box .total-price-wrap { margin-bottom: 32px; } .patch-contents-wrap .option-box .btn-wrap { margin-bottom: 24px; } .patch-contents-wrap .option-box .btn-wrap .btn-all-delete { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 4px; border: 1px solid var(--Primary-Almost-Black, #211D1D); background: transparent; color: var(--Primary-Almost-Black, #211D1D); text-align: center; font-size: 20px; font-weight: 400; line-height: 20px; } .tab-order { overflow-y: auto; } .order-contents-wrap { display: flex; position: relative; justify-content: space-between; gap: 96px; height: 100%; padding: 64px 16px 24px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .order-contents-wrap .left { min-width: 320px; flex: 1; } .order-contents-wrap .right { width: 100%; max-width: 480px; } .order-contents-wrap .img-wrap { position: relative; } .order-contents-wrap .img-wrap:before, .order-contents-wrap .img-wrap:after { content: ''; width: 338px; height: 310px; position: absolute; left: -10px; bottom: 0px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/main_bg.png') no-repeat center; background-size: cover; } .order-contents-wrap .img-wrap:after { left: auto; right: 8px; top: 8px; bottom: auto; } .order-contents-wrap .img-wrap > .img-inner { position: relative; display: inline-flex; justify-content: space-between; width: 100%; max-width: 100%; margin: 0 auto; padding: 40px 0 52px; } .order-contents-wrap .img-wrap > .img-inner img { display: block; width: 400px; max-width: 100%; margin: 0 auto; } .order-contents-wrap .option-box .right { width: 100%; max-width: 480px; } .order-contents-wrap .option-box { padding: 30px 0 24px; } .order-contents-wrap .option-box .sub-title { color: var(--Primary-Grey, #767873); font-size: 16px; font-weight: 400; line-height: 22px; margin-bottom: 0px; } .order-contents-wrap .option-box .padding-box { padding: 8px 0 20px; overflow-y: auto; } .order-contents-wrap .accordion-wrap .accordion-header:before { content: '' !important; width: 16px; height: 16px; background: url('https://www.moleskine.co.kr/design/hangso1/mallskin/pc/images/icon_list_arrow.png') no-repeat center; transform: translateY(-50%) rotate(-180deg); } .order-contents-wrap .accordion-wrap .accordion-header.active:before { transform: translateY(-50%) rotate(0); } .order-contents-wrap .accordion-wrap .accordion-header:after { content: none; } .order-contents-wrap .patch-list { display: flex; gap: 18px 16px; flex-wrap: wrap; align-items: center; padding: 0 1px 24px; } .order-contents-wrap .patch-list button { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; } .order-contents-wrap .patch-list button .count { display: none; visibility: visible; position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 50%; background: var(--Primary-Moleskine-Orange, #FB663A); color: var(--Primary-Pure-White, #FFF); font-family: "HvDTrial Brandon Grotesque"; font-size: 10px; font-weight: 390; line-height: 14px; } .order-contents-wrap .patch-list li.active button .count { display: flex; } .order-contents-wrap .patch-list li.active button { outline: 1px solid var(--Primary-Moleskine-Orange, #FB663A); } .order-contents-wrap .accordion-wrap .accordion-header { padding-right: 32px; min-height: 42px; height: auto; text-align: left; } .order-contents-wrap .option-box .total-price-wrap { margin-bottom: 32px; } .order-contents-wrap .option-box .desc { margin-bottom: 0; } @media (max-width: 1000px) { .letter-contents-wrap { display: block; padding-bottom: 80px; } .letter-contents-wrap > .left { max-width: 100%; } .letter-contents-wrap { position: inherit; height: 100%; overflow-y: auto; } .letter-contents-wrap .cate-wrap { width: 100%; flex-wrap: nowrap; overflow-x: auto; } .letter-contents-wrap .list-header { flex-direction: column; padding: 0 16px 8px; } .letter-contents-wrap .list-header.active { flex-direction: column; } .letter-contents-wrap .list-header.active .cate-wrap { display: flex; } .letter-contents-wrap .list-header .right { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 12px; } .letter-contents-wrap .list-header.active .search-popup-wrap { margin-bottom: 46px; } .letter-contents-wrap .option-box .title { display: none; } .letter-contents-wrap .list-wrap { padding: 16px 0; } .letter-contents-wrap .list-wrap { overflow-y: visible; } .letter-contents-wrap .mo-title { display: block; } .letter-contents-wrap .btn-mo-detail { display: flex; } .letter-contents-wrap > .right { position: absolute; bottom: 0; left: 0; width: calc(100% - 153px); height: 65px; z-index: 1; background: #FFFCF8; overflow-y: hidden; transition: 0.5s ease all; } .letter-contents-wrap > .right.active { height: 80vh; } .letter-contents-wrap .right.active .option-box { box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.16); padding: 20px; overflow-y: auto; height: calc(80vh - 64px); } .letter-contents-wrap > .right.active .btn-mo-detail:after { transform: translateY(-50%) rotate(180deg); } .letter-contents-wrap:before { content: none; } .sub-main-wrap { display: block; } .sub-main-wrap .img-wrap { position: relative; width: 100%; height: 284px; overflow: hidden; } .sub-main-wrap .img-wrap img { position: absolute; bottom: 0; left: 0; } .sub-main-wrap.patch .img-wrap img { bottom: auto; top: 0; } .sub-main-wrap .right .inner-box { text-align: center; max-width: 638px; } .sub-main-wrap .btn-wrap { flex-direction: column; gap: 8px; } .sub-main-wrap .btn-wrap .btn-link { max-width: 100%; } .patch-contents-wrap { gap: 16px; } .order-contents-wrap { gap: 16px; } } /* 테블릿 */ @media (max-width: 768px) { /*공통*/ .contents-wrap { max-width: 100%; padding-bottom: 60px; height: 100%; overflow-y: auto; } /* nav 네비게이션 */ .imprint-nav-wrap { bottom: 0; left: 0; right: auto; top: auto; width: 100%; height: 60px; display: flex; border-left: 0; border-top: 1px solid var(--Primary-Mid-Grey, #A6A4A4); } .imprint-nav-wrap:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #fffcf8; z-index: -1; } .imprint-nav-wrap .or { display: none; } .imprint-nav-wrap .btn-close { position: fixed; right: 24px; top: 24px; width: 24px; height: 24px; border: 0; } .imprint-nav-wrap .btn-nav { border-bottom: 0; box-sizing: border-box; } .imprint-nav-wrap .btn-nav + .btn-nav, .imprint-nav-wrap .btn-nav.mono { border-left: 1px solid var(--Primary-Mid-Grey, #A6A4A4); } .imprint-nav-wrap .btn-nav span { flex-direction: row; gap: 5px; font-size: 0; padding: 0; height: 100%; } /* 메인 컨텐츠 */ .contents-wrap .main { padding: 75px 24px; height: auto; } .contents-wrap .main:before { left: -100px; right: auto; top: -50px; } .contents-wrap .main:after { content: none; } .main .main-contents-wrap { position: relative; left: 0; top: 0; transform: none; flex-direction: column; padding: 0; gap: 32px; max-height: 100%; overflow: hidden; padding-bottom: 60px; } .main .main-contents-wrap .item .img-wrap { margin-bottom: 16px; } .main .main-contents-wrap .item strong { font-size: 28px; font-weight: 500; line-height: 44px; margin-bottom: 8px; } .main .main-contents-wrap .item p { max-width: 387px; font-weight: 390; margin-bottom: 24px; } .main .main-contents-wrap .item .btn-link { max-width: 387px; } .main .main-contents-wrap > span { margin: 0; font-size: 24px; line-height: 28px; } .text-contents-wrap { flex-direction: column; overflow: hidden; } .text-contents-wrap .item.left { overflow: visible; } .imprint-popup-wrap .btn-back { right: auto; left: 32px; } .text-contents-wrap .item.left { padding: 80px 0 0; } .text-contents-wrap .item.right { min-width: 0; max-width: 100%; height: 100%; } .text-contents-wrap .item.left:after { bottom: 24px; } .option-box { padding: 24px; } .option-box .padding-box { padding: 16px 20px 16px 0; } .contents-wrap [data-tab] { height: auto; padding-bottom: 60px; } .option-box .title { font-size: 28px; line-height: 34px; margin-bottom: 0; } .option-box .btn-tab-wrap { margin-bottom: 0; } .text-contents-wrap .item.left .img-wrap { padding: 0 24px; } .sub-main-wrap .right { padding: 24px 16px 60px; text-align: center; } .sub-main-wrap .right .title { font-size: 28px; font-weight: 500; line-height: 34px; } .sub-main-wrap .right .sub-title { margin-bottom: 24px; } .sub-main-wrap .right .hidden-mo { display: none; } .letter-contents-wrap .list-wrap .list-item .text-box { display: none; } .letter-contents-wrap > .right { width: 100%; bottom: 60px; } .letter-contents-wrap .mo-title { font-size: 28px; } .letter-contents-wrap .option-box .sub-title { display: none; } .patch-contents-wrap { display: block; } .patch-contents-wrap .img-wrap > img { padding: 0; } .patch-contents-wrap .left, .patch-contents-wrap .right { min-width: 0; max-width: 100%; } .patch-contents-wrap .option-box .title { font-size: 28px; line-height: 44px; } .patch-contents-wrap .option-box .desc { font-size: 16px; line-height: 22px; } .patch-contents-wrap .option-box .padding-box, .patch-contents-wrap .option-box { padding-bottom: 0; } .order-contents-wrap { display: block; } .order-contents-wrap .img-wrap > img { padding: 0; } .order-contents-wrap .left, .order-contents-wrap .right { min-width: 0; max-width: 100%; } .order-contents-wrap .option-box .title { font-size: 28px; line-height: 1.2; } .order-contents-wrap .option-box .desc { font-size: 14px; line-height: 22px; } .order-contents-wrap .option-box .padding-box, .order-contents-wrap .option-box { padding-bottom: 0; } .scroll-header-wrap > .right .btn-wrap .link { max-width: 100%; } } @media (max-width: 425px) { .letter-contents-wrap .list-wrap .selected-box.active .btn { gap: 0; font-size: 0; } .patch-contents-wrap .option-box .title { font-size: 28px; line-height: 1.2; } } /* 모바일 */ @media (max-width: 375px) { .main .main-contents-wrap .item strong { font-size: 24px; } .main .main-contents-wrap .item p { font-size: 14px; line-height: 20px; } .letter-contents-wrap .list-wrap .selected-box { gap: 0; } .option-box .title { font-size: 24px; } .sub-main-wrap .right .sub-title { font-size: 14px; line-height: 20px; } .letter-contents-wrap .mo-title { font-size: 24px; line-height: 1.2; } .patch-contents-wrap .option-box .title { font-size: 24px; } .order-contents-wrap .option-box .title { font-size: 24px; } } /* BASIC css end */