/* 기본(default) */ body{background-color:#fff; color:var(--color-text); overflow-x:hidden; -ms-overflow-style: none} div#lnb{display: none} h1, h2, h3, p{color:var(--color-text); word-break:keep-all} div.wrapper{height:100%; font-family:'pretendard','Noto Sans KR'} .inner{width: 1600px; max-width: 100%; box-sizing: border-box; padding: 0 3vw; margin: 0 auto; position: relative} table{border-collapse: collapse} #contents{padding:0; margin: 3rem 0 5rem; background-color:#fff} @media screen and (max-width:1280px){ .inner{padding: 0 1rem} } @media screen and (max-width:320px){ html,body{font-size:12px} #contents{font-size:12px} } @media screen and (min-width:321px) and (max-width:360px){ html,body{font-size:12px} #contents{font-size:12px} } @media screen and (min-width:361px) and (max-width:383px){ html,body{font-size:13px} #contents{font-size:13px} } @media screen and (min-width:384px) and (max-width:428px){ html,body{font-size:13px} #contents{font-size:13px} } @media screen and (min-width:429px) and (max-width:767px){ html,body{font-size:14px} #contents{font-size:14px} } @media screen and (min-width:768px) and (max-width:1024px){ html,body{font-size:14px} #contents{font-size:14px} } @media screen and (min-width:1025px) and (max-width:1280px){ html,body{font-size:15px} #contents{font-size:15px} } @media screen and (min-width:1281px){ .inner{padding: 0 1rem} } @media screen and (min-width:1281px) and (max-width:1399px){ html,body{font-size:12px} #contents{font-size:12px} } @media screen and (min-width:1400px) and (max-width:1599px){ html,body{font-size:13px} #contents{font-size:13px} } @media screen and (min-width:1600px) and (max-width:1679px){ html,body{font-size:14px} #contents{font-size:14px} } @media screen and (min-width:1680px) and (max-width:1919px){ html,body{font-size:15px} #contents{font-size:15px} } @media screen and (min-width:1920px){ html,body{font-size:16px} #contents{font-size:16px} } /* 기본(default) */ /*FAQ*/ body.faq h2{display: none} #contents ul.faqTab a{border-radius: 0 !important} #contents ul.faqTab a.on{background-color: var(--color-background-3) !important; border-color: var(--color-border-1) !important} #contents ul.faqTab a:hover{color: var(--color-text-2) !important; background-color: var(--color-background-3) !important} #contents div.paging ol li{border: none !important} #contents div.paging ol li.on a{color: var(--color-primary) !important} #contents div.paging ol li a:hover, #contents div.paging ol li.on{background-color: transparent !important} @media screen and (max-width:1280px){ #contents{margin: 7.25rem 0 !important} #contents ul.faqTab a, ul.faqUl li div.question div._question, ul.faqUl li div.answer div._answer{font-size: 14px !important} } @media screen and (min-width:1281px){ #contents{margin: 12.81rem 0 !important} } /*FAQ*/ /*리뷰 모달*/ #review-ctn > .contents > ._row > .profile div.rating span.star:before{color: var(--color-background-10) !important} #review-ctn > .contents > ._row > .profile div.rating span.on:before{color: var(--color-primary) !important} /*리뷰 모달*/ /*상품 뷰페이지 리뷰*/ span.review-list-star-on:before{color: var(--color-primary) !important} button.review-lists-header-btn{color: #717171 !important} button.review-lists-header-btn-on{color: #333 !important} div.review-lists-header{border-top: none !important} button.review-lists-header-btn:after{content: ''; display: inline-block; width: 1px; background-color: var(--color-border-4)} button.review-lists-header-btn:last-child:after{display: none !important} .ratingText span > i{position: absolute} .review-list-like{display: none} .review-list-profileImg{display: none} div.review-list-row{color: var(--color-text-light)} @media screen and (max-width:1280px){ button.review-lists-header-btn {margin: 0 8px 0 0 !important; font-size: 13px !important} button.review-lists-header-btn:after{height: 8px; margin-left: 8px} a.review-list-text{font-size: 1rem !important} div.review-lists{padding: 5em 0 5rem !important; margin: 0} div.review-list-row{font-size: 14px} .review-cnt {margin:0 0 0 0.6rem; font-size: 1.2rem} div.review-lists-header-group h2{font-size: 1.25rem} div.review-list-content {margin: 0 !important} } @media screen and (min-width:1281px){ button.review-lists-header-btn {font-size: 1rem !important; margin: 0 0 0 10px !important} button.review-lists-header-btn:after{height: 10px; margin-left: 10px} a.review-list-text{font-size: 1rem !important} div.review-lists-header-left h2{font-size: 1.875rem} div.review-list-row{font-size: 1rem} div.review-lists{margin: 6.5625rem 0 12.5rem !important} .review-cnt {margin:0 0 0 0.6rem; font-size: 1.5rem;} } /*상품 뷰페이지 리뷰*/ /*리뷰 작성 모달*/ div.review-write-header{background-color: var(--color-primary) !important} div.review-write-layer ul.form{background-color: var(--color-background-12) !important} button.review-write-media-btn{border: 1px solid var(--color-border-1) !important; color: var(--color-text-6) !important} label.review-write-rating-star:hover{color: var(--color-primary) !important} input.review-write-btn-submit{background-color: var(--color-background-3) !important; border: 1px solid var(--color-border-1) !important} input.review-write-btn-submit:hover{background-color: var(--color-background-8) !important} input.review-write-btn-cancel{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border-color: var(--color-border-5) !important} input.review-write-btn-cancel:hover{background-color: var(--color-background-lightest) !important; border: 1px solid var(--color-border-1) !important} /*리뷰 작성 모달*/ /*장바구니*/ #contents div.cart{border-top: 2px solid var(--color-primary) !important} #contents div.cart > div.cartHeader{background: var(--color-background-lightest) !important} #contents div.cartInfo{border-top: 1px solid var(--color-border-3) !important; border-bottom: 1px solid var(--color-border-3) !important} #contents div.cart dl > dd.oPrice strong{font-size: 1rem !important; color: var(--color-primary) !important} #contents div.cartInfo div.totalPrice{color: var(--color-text-2); display:flex; align-items: center; gap: 10px} #contents div.cartInfo div.totalPrice strong.totalPrice{color: var(--color-primary) !important} #contents div.cartInfo{background-color: var(--color-background-lightest) !important} #contents div.cartInfo button.order{background-color: var(--color-background-3) !important; border-radius: 500px !important;} #contents div.cartInfo button.order:hover{background-color: var(--color-background-8) !important} #contents div.cart dl > dd.oPrice button{border-radius: 500px; margin: 10px 0} #contents div.cart dl > dd.oPrice button.order{background-color: var(--color-background-3) !important; border: none;} #contents div.cart dl > dd.oPrice button.order:hover{background-color: var(--color-background-8) !important} #contents div.cart dl > dd.oPrice button:hover{border-color: var(--color-background-8) !important} #contents div.cart dl > dd.qty button.updateQty{border-radius: 500px !important; background-color: var(--color-background-primary) !important; color: var(--color-text-3) !important;} #reaction div.contents footer a.btn{border-color: var(--color-background-3) !important; background-color: var(--color-background-3) !important} #reaction div.contents footer a.btn:hover{border-color: var(--color-background-8) !important; background-color: var(--color-background-8) !important} #reaction div.contents footer button.btn:hover{border-color: var(--color-background-3) !important} #contents div.cart dl.empty > dt{color: var(--color-text-5)} @media screen and (max-width:1280px){ #contents h1{margin-bottom: 15px !important; padding: 0 !important} #contents div.cart > div.cartHeader p{font-size: 15px} #contents div.cart dl > dd.qty button.updateQty{font-size: 14px !important} } @media screen and (min-width:1281px){ #contents h1{margin-bottom: 20px !important} #contents div.cart dl > dd.oPrice button{border: 1px solid #9E8686; color: #9E8686} #contents div.cart > div.cartHeader p{font-size: 15px} #contents div.cartInfo div.totalPrice strong.totalPrice{font-size: 24px !important} #contents div.cartInfo{padding: 35px 20px !important} #contents div.cart dl > dd.qty button.updateQty{font-size: 14px !important} div.cart dl > dd.price span{font-size: 15px} #contents div.btnWrap button.del{font-size: 13px} #contents div.cartInfo div.totalPrice p{font-size: 16px} #contents div.cart dl > dd.oPrice button{font-size: 14px !important} #contents div.cart dl.empty > dt{font-size: 1rem; display: flex; justify-content: center; align-items: center} } /*장바구니 체크박스*/ #contents div.cart .chk label{margin: 0 !important} #contents div.cart .chk input[type="checkbox"]{display: none} #contents div.cart .chk .check_custom{display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-background-3); position: relative; cursor: pointer} #contents div.cart .chk input[type="checkbox"]:checked + .check_custom::after{content: '\f00c'; font-family: 'FontAwesome'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: white} /*장바구니 체크박스*/ /*장바구니*/ /*로그인*/ #loginLayer ul li.submit button.submit{background-color: var(--color-primary) !important} #loginLayer ul li.input:hover div.mask{border-color: var(--color-primary) !important} #loginLayer ul li.input.on div.mask{border-color: var(--color-primary) !important} #loginLayer ul li.input label.lbl{color: var(--color-primary) !important} #loginLayer ul li.bottom input[type="checkbox"]:checked + label.saveId:before{border-color: var(--color-background-3) !important; background-color: var(--color-background-3) !important} /*로그인*/ /* 아이디/비밀번호찾기 */ body.findUser div.wrapper{display: flex; flex-direction: column; justify-content: center} img.findUser-header-logo{max-width: 150px} input.findUser-submit{background: var(--color-background-3) !important} form.findUser-form {flex: 1} #findUser .findUser-contents .findId{display: flex; flex-direction: column} ul.findUser-ul{display: flex; flex-direction: column; height: 100%} li.findUser-li:last-child{margin-top: auto !important} label.findUser-lbl{font-size: 16px !important} #findUser .findUser-contents .findUser-formBox ul li.input input{border-radius: 0 !important; border: 1px solid var(--color-border) !important; background-color: var(--color-background-11) !important; font-family: 'pretendard', 'Noto Sans KR';} @media screen and (max-width: 656px) { div.findUser-header{padding: 20px 0 50px 0 !important} img.findUser-header-logo{max-width: 150px !important} } @media screen and (min-width: 657px) { #findUser{max-width:100%; width:100% !important} div.findUser-header{padding: 0 0 50px !important} div.findUser-contents{padding: 0 3vw; box-sizing: border-box; gap: 30px; max-width: 983px; width: 100% !important} #findUser .findUser-contents .findId{padding:0 !important} #findUser .findUser-contents .findPass{padding:0 !important} } @media screen and (max-width: 1280px) { #findUser .findUser-contents .findUser-formBox ul li.input input{font-size: 1.07em !important; height: 2.5em !important; padding: 0 0.94em !important} input.findUser-submit{height: 3.4em !important; font-size: 1.07em !important} #findUser .wrapper footer{padding:2rem !important} } @media screen and (min-width:1281px){ #findUser .findUser-contents .findUser-formBox ul li.input input{font-size:1.13rem !important} #findUser .wrapper footer{padding:50px !important} } /* 회원가입 */ #register input.submit{border: 1px solid var(--color-background-3) !important; background-color: var(--color-background-3) !important; color: #fff;} #register input.submit:hover{background-color: var(--color-background-8) !important} #register_layer ul.form > li label.req span.req{color: var(--color-primary) !important; font-size: 14px !important; margin-top:3px} #register_layer ul.form > li input.radio[type="radio"]:checked + label.memberType:before{border-color:var(--color-background-3) !important;background-color: var(--color-background-3) !important} #register_layer ul.form > li input.input{background-color: var(--color-background-11) !important} #register_layer ul.form > li div.input_wrap{border: 1px solid var(--color-border) !important; background-color: var(--color-background-11) !important} #register_layer ul.form > li .input_wrap i{color:var(--color-background-11) !important} #register_layer ul.form > li .input_wrap i.reject{color:var(--color-primary) !important} input.input{ font-family: 'pretendard', 'Noto Sans KR' !important;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0px 40rem var(--color-background-11) inset !important} #register_layer ul.form > li p.error{color: var(--color-primary) !important} #register_layer ul.form > li ul.postcode li.btnw input{border: 1px solid var(--color-background-3) !important; background-color: var(--color-background-3) !important;} #register input.cancel{border: 1px solid #9E8686 !important; background-color: #fff !important; color: #9E8686 !important} #register_layer ul.form > li input.radio[type="checkbox"]:checked + label.memberType:before{border-color: var(--color-background-3) !important; background-color: var(--color-background-3) !important} @media screen and (min-width: 1281px) { #register div.header{padding: 60px 0 50px 0 !important} } /* 비회원 주문결제 */ body.nonmember div#page-title-34{display: none} body.nonmember #contents div.contents div.section{padding:0} body.nonmember ._row{border: 0 !important} body.nonmember #contents div.contents{border:1px solid var(--color-border) !important; box-sizing: border-box} body.nonmember #contents ul.order > li input.txt{background-color: var(--color-background-11) !important} body.nonmember #contents input.submit{border: 1px solid var(--color-background-3) !important; background-color: var(--color-background-3) !important;} body.nonmember #contents input.submit:hover{background-color: var(--color-background-8) !important} body.nonmember #contents ul.order > li input.txt{font-family: 'pretendard', 'Noto Sans KR' !important} body.nonmember #contents ul.order > li input.txt::placeholder{font-family: 'pretendard', 'Noto Sans KR' !important; color:var(--color-text-5)} @media screen and (max-width: 1280px) { body.nonmember #contents input.submit{height: 3.4em !important; font-size: 1.07em !important} body.nonmember #contents ul.order > li input.txt{font-size: 16px !important; height: 2.5em !important; padding: 0 0.94em !important} } @media screen and (min-width: 1281px) { body.nonmember #contents div.contents{padding: 50px !important} body.nonmember #contents ul.order > li input.txt{font-size: 1.13rem !important; height: 2.72em !important; padding: 0 1.11em !important} body.nonmember #contents ul.order > li input.txt::placeholder{font-size: 1.13rem !important} } /*주문/결제 페이지*/ #contents{font-family: 'pretendard' !important} body.order #contents h1{color:var(--color-text)} body.order #contents h2{color:var(--color-text)} #contents div.order{border-top: 2px solid var(--color-primary) !important} #contents div.order > div.odrHeader{background-color: var(--color-background-lightest) !important; color: var(--color-text-2)} #contents div.order dl, #contents div.order dl > dt strong{color: var(--color-text-2)} #contents div.order dl > dd.oPrice strong{color: var(--color-primary) !important} #contents div.orderInfo{border-top: 2px solid var(--color-primary) !important} #contents div.orderInfo header.odrInfo, #contents div.orderInfo div.article{background-color: var(--color-background-lightest) !important} #contents div.orderInfo header.odrInfo button.shipList{font-family: 'pretendard', 'Noto Sans KR' !important; border-radius: 500px !important; border: 1px solid var(--color-background-3) !important; background-color: var(--color-background-3) !important; color: #fff;} #contents div.orderInfo header.odrInfo button.shipList:hover{background-color: var(--color-background-8) !important} #contents div.orderInfo div.article > ul > li ul.postcode li._btnw input.btn{font-family: 'pretendard', 'Noto Sans KR' !important; border-radius: 500px !important; border: 1px solid var(--color-background-3) !important; background-color: var(--color-background-3) !important; color: #fff} #contents div.orderInfo div.article > ul > li ul.postcode li._btnw input.btn:hover{background-color: var(--color-background-8) !important} #contents input.txt:focus{border-color: var(--color-border-1) !important} #contents span.rq{color: var(--color-primary) !important} #contents input.txt, #contents label{color: var(--color-text-2) !important} #contents div.point{background-color: var(--color-background-lightest) !important; border-top: 2px solid var(--color-primary) !important} #contents div.point > ul > li.have > div.v{color: var(--color-primary) !important} #contents div.point > ul > li.use > input.btn{background-color: var(--color-background-3) !important} #contents div.point > ul > li.use > input.btn:hover{background-color: var(--color-background-8) !important} #contents div.payType{border-top: 2px solid var(--color-primary) !important} #contents div.payType header.payType{background-color: var(--color-background-lightest) !important} #contents h2{font-weight: 700 !important} #contents div.totalInfo{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border-top: 2px solid var(--color-primary) !important} #contents div.totalInfo div.priceLayer > span.icoBx{background-color: var(--color-background-primary) !important} #contents div.totalInfo div.priceLayer > span.icon, #contents div.totalInfo div.priceLayer > span.icoBx > i.fa{color: var(--color-text-2) !important} #contents div.totalInfo input.order{background-color: var(--color-background-3) !important} #contents div.totalInfo input.order:hover{background-color: var(--color-background-8) !important} body.order #contents input.txt{border: 1px solid var(--color-border); border-radius: 0; background-color: var(--color-background-11);} @media screen and (max-width:1280px){ #contents div.order dl{box-shadow: unset !important} #contents div.order dl > dd.delivery, #contents div.order dl > dd.qty, div.order dl > dd.price{padding: 8px 10px 0 85px !important} #contents div.orderInfo div.article > ul > li{margin: 0 0 10px 0 !important} #contents div.mobilePrice{border-top: 2px solid var(--color-primary) !important; margin: 0 10px 30px 10px !important} #contents div.mobilePrice div.totalPrice{background: unset !important} #contents div.mobilePrice div.totalPrice strong{color: var(--color-primary) !important} #contents div.order dl > dt strong, #contents div.order dl > dd.delivery header.col, #contents div.order dl > dd.qty header.col, div.order dl > dd.price header.col, #contents div.order dl > dd.delivery, #contents div.order dl > dd.qty span, #contents label,#contents span.rq, #contents input.txt, div.order dl > dd.price span, #contents div.totalInfo input.order{font-size: 15px !important} #contents p.info, #contents div.orderInfo div.article > ul > li ul.postcode li._btnw input.btn, #contents div.orderInfo > header.odrInfo > ul > li button.shipList, #contents div.mobilePrice, #contents div.point > ul > li.use > input.btn{font-size: 14px !important} #contents div.point > ul > li.use > div.v > span.unit{font-size: 13px !important} } @media screen and (min-width:1281px){ #contents div.order, #contents div.order dl > dt strong{font-size: 15px !important; font-weight: 600 !important} #contents div.order, #contents div.orderInfo, #contents div.point, #contents div.payType{margin-bottom: 50px !important} #contents label{font-size: 16px !important} #contents span.rq, #contents input.txt{font-size: 14px !important} #contents div.orderInfo header.odrInfo li button.shipList, #contents p.info{font-size: 13px !important} #contents h2{font-size: 1.87rem !important; margin-bottom: 1.25rem !important} #contents div.orderInfo header.odrInfo button.shipList{padding: 5px 15px !important} } /*주문/결제 페이지*/ /* 마이페이지(mypage)*/ #contents.mypage.mypageList ul.mypageList li:nth-child(2), #contents.mypage.mypageList ul.mypageList li:nth-child(3){display: none} #contents.mypage{font-family:'Pretendard', 'Noto Sans KR' !important} #contents.mypage table._tbl th{border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border)} #contents.mypage #orderList header p{border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border)} #contents.mypage #orderList dl.empty{border-bottom: 1px solid var(--color-border)} #contents.mypage ul#request > li{border-bottom: 1px solid var(--color-border); font-family: 'Pretendard', 'Noto Sans KR'; text-align: center} #contents.mypage.mypageList{background-color:#fff} #contents.mypage h2.mypage{color:var(--color-text) !important} #contents.mypage p.hdrDesc{line-height: 130%; color: var(--color-text-light) !important} #contents.mypage.mypageList ul.mypageList a{} #contents.mypage.mypageList ul.mypageList > li a{background-color: var(--color-background-11); border: 1px solid #ebebeb} #contents.mypage.mypageList ul.mypageList svg{overflow: initial; fill: var(--color-primary); color: var(--color-primary)} #contents.mypage.mypageList ul.mypageList svg g{stroke:var(--color-icon-fill-primary)} #contents.mypage.mypageList ul.mypageList h3{color: var(--color-text)} #contents.mypage.mypageList ul.mypageList div.desc{word-break: keep-all; color: var(--color-text-date); line-height: 150%; font-size: 15px} #contents.mypage.orderList div.search ul.calendarSearch > li.btn button{border-radius: 0; border: 1px solid var(--color-button-border-secondary); background-color: var(--color-button-background-secondary)} #contents.mypage.orderList .ui-widget input, .ui-widget select,#contents.mypage.orderList .ui-widget textarea,#contents.mypage.orderList .ui-widget button{font-family:'Pretendard', 'Noto Sans KR'} #contents.mypage.orderList div.search ul.periodBtn > li > button{border: 1px solid var(--color-border); border-radius: 0; background-color: var(--color-background-primary); font-family: 'Pretendard', 'Noto Sans KR'} #contents.mypage.orderList div.search ul.calendarSearch > li.subscribe-status select{border-color: var(--color-border); padding: 0 6px} #contents.mypage.orderList .card__regist{background: var(--color-button-background); font-size: 14px} #contents.mypage.user #user div.sect.user{border-top: 2px solid var(--color-primary); border-bottom: 1px solid var(--color-border)} #contents.mypage.user #user div.profileImg div.img{background-color: var(--color-background-primary)} #contents.mypage.user #user ul.form{background-color: #fff} #contents.mypage.user #user ul.form > li label.lbl{height:auto; font-size:15px; letter-spacing:0} #contents.mypage.user #user ul.form > li label.req span.req{font-size: 12px; color: var(--color-secondary)} #contents.mypage.user #user ul.form > li label.memberType{font-size: 15px} #contents.mypage.user #user ul.form > li .radio_wrap{height:auto; line-height:normal} #contents.mypage.user #user ul.form > li ul.postcode li.btnw input{font-family:'Pretendard', 'Noto Sans KR'; border-radius: 0; border: 1px solid var(--color-button-border-secondary); background-color: var(--color-button-background-secondary)} #contents.mypage.user ul.userCate li{display: flex; align-items: center} #contents.mypage.user input[type="radio"]{display: none} #contents.mypage.user div.orderInfo label{top:0} #contents.mypage.user input[type="radio"] + label.memberType{display: inline-block !important; font-size: 0 !important; width: 20px !important; height: 20px; border-radius: 50%; background-color: var(--color-background-primary); position: relative !important} #contents.mypage.user input:checked + label.memberType::after{content:''; background-image:url('/image/cart/check.png'); background-size: 10px; background-repeat: no-repeat; background-position: 50%; width: 20px; height: 20px; text-align: center; position: absolute; border-radius: 50%; background-color: var(--color-primary); left: 0; top:0} #contents.mypage.user ul.userCate li:nth-child(1):after{content: '개인회원'; margin-left: 10px; font-size: 15px} #contents.mypage.user ul.userCate li:nth-child(2):after{content: '사업자회원'; margin-left: 10px; font-size: 15px} #contents.mypage.user #email-cert-btn, #email-cert-check{font-family:'Pretendard', 'Noto Sans KR'; width: auto; border-radius: 0; border: 1px solid var(--color-button-border-secondary); background-color: var(--color-button-background-secondary)} #contents.mypage.user input[type="checkbox"]{display: none} #contents.mypage.user input[type="checkbox"] + label.memberType{display: block !important; font-size: 0 !important; cursor: pointer; width: 20px !important; height: 20px; border-radius: 50%; background-color: var(--color-background-primary); position: relative !important} #contents.mypage.user input:checked + label.memberType::after{content:''; background-image:url('/image/cart/check.png'); background-size: 10px; background-repeat: no-repeat; background-position: 50%; width: 20px; height: 20px; text-align: center; position: absolute; border-radius: 50%; background-color: var(--color-primary); left: 0; top:0} #contents.mypage.user ul.form li.sms:before{content: 'SMS 수신여부'; font-size: 15px; position: absolute} #contents.mypage.user #user ul.form > li p.info{margin: 8px 0 0 0; font-size: 14px; color: var(--color-text-light)} #contents.mypage.user #user ul.form > li p.info i.fa{font-size: 15px; margin: 0 5px 0 0} #contents.mypage.user #user input.submit{border: 1px solid var(--color-button-border); border-radius: 0; background-color: var(--color-button-background)} #contents.mypage.user #user div.leave a{color: var(--color-primary); font-weight: 600; text-decoration: underline} @media screen and (max-width:428px){ #contents.mypage.mypageList ul.mypageList > li{width:100%} } @media screen and (min-width:429px) and (max-width:797px){ #contents.mypage.mypageList ul.mypageList > li{width: calc(100% / 2); padding: 10px; margin: 0} } @media screen and (min-width:798px) and (max-width:1280px){ #contents.mypage.mypageList ul.mypageList > li{width: calc(100% / 3); padding: 10px; margin: 0} } @media screen and (max-width:1280px){ #contents.mypage.mypageList ul.mypageList{left: auto; width: auto; margin: -10px; flex-wrap:wrap} #contents.mypage.mypageList ul.mypageList > li{padding: 10px; margin: 0} #contents.mypage.mypageList ul.mypageList a{padding: 30px 20px} #contents.mypage.mypageList ul.mypageList div.icoW{width: 20%; margin: 0 0 20px 0} #contents.mypage.mypageList ul.mypageList h3{margin: 0 0 10px 0} #contents.mypage.user #user ul.form{padding: 20px 0} #contents.mypage.user #user ul.form > li{margin: 0 0 20px 0} #contents.mypage.user #user ul.form > li label.lbl{margin: 0 0 10px 0} #contents.mypage.user #user ul.form > li label.req span.req{margin-left:5px} #contents.mypage.user #email-cert-btn, #email-cert-check{padding: 10px; font-size: 14px} #contents.mypage.user ul.form li.sms:before{top: 29px; left: 30px} #contents.mypage.user #user input.submit{height: 38px} #contents.mypage #user input.submit{height: 38px} } @media screen and (min-width:1281px){ #contents.mypage.mypageList ul.mypageList{left: auto; width: auto; margin: -10px} #contents.mypage.mypageList ul.mypageList > li{aspect-ratio: 1 / 1; width: calc(100% / 4); padding: 10px; margin: 0} #contents.mypage.mypageList ul.mypageList a{padding: 30px} #contents.mypage.mypageList ul.mypageList div.icoW{width: 15%; margin: 0 0 30px 0} #contents.mypage.mypageList ul.mypageList h3{margin: 0 0 15px 0} #contents.mypage.orderList div.search{border: 1px solid var(--color-border); padding: 0 0 0 108px} #contents.mypage.orderList div.search > header{display: flex; justify-content: center; align-items: center; width: auto; padding:20px; box-sizing: border-box; border-right: 1px solid var(--color-border); background-color: var(--color-background-primary); color: var(--color-text); line-height: normal; font-size: 15px} #contents.mypage.orderList #orderList{border-top: 2px solid var(--color-primary)} #contents.mypage.user #user ul.form{padding: 30px 20px} #contents.mypage.user #user ul.form > li label.req span.req{margin-top:3px} #contents.mypage.user #user ul.form > li ul.postcode li.btnw input{padding: 10px 15px; font-size: 15px} #contents.mypage.user #user div.profileImg{width: 100px; height: 100px} #contents.mypage.user #user div.profileImg i.fa-camera{right: 0px; bottom: 0px} #contents.mypage.user #email-cert-btn, #email-cert-check{padding:10px 15px; font-size:15px; line-height: normal} #contents.mypage.user ul.form li.sms:before{top: 2px; left: 140px} #contents.mypage.user #user input.submit{height: 44px; font-size: 16px} #contents.mypage #user input.submit{height: 44px} } /*마이페이지(mypage) */ /*주문내역 조회*/ #contents.mypage.orderList div.search ul.calendarSearch > li.btn button{background-color: var(--color-background-3) !important} #contents.mypage.orderList div.search ul.calendarSearch > li.btn button:hover{background-color: var(--color-background-8) !important} /*주문내역 조회*/ /*회원정보*/ #contents div.contents{float: unset !important; width: 100% !important; border: none !important} #contents.mypage.user #user ul.form > li label.req span.req{color: var(--color-primary) !important} input.transition:focus{border-color: var(--color-border-1) !important} #contents.mypage.user #email-cert-btn, #contents.mypage.user #user ul.form > li ul.postcode li.btnw input{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border: 1px solid var(--color-border-5)} #contents.mypage.user #email-cert-btn:hover, #contents.mypage.user #user ul.form > li ul.postcode li.btnw input:hover{border-color: var(--color-border-1)} #contents.mypage.user #user input.submit{background-color: var(--color-background-3) !important; border-color: var(--color-background-3) !important} #contents.mypage.user #user input.submit:hover{background-color: var(--color-background-8) !important} /*회원정보*/ /*비밀번호 수정*/ .password #user ul.form{border-top: 2px solid var(--color-primary) !important; background-color: var(--color-background-lightest) !important} .password #user ul.form > li label.req span.req{color: var(--color-primary) !important} .password #user input.submit{background-color: var(--color-background-3) !important; border-color: var(--color-background-3) !important} .password #user input.submit:hover{background-color: var(--color-background-8) !important} @media screen and (max-width:1280px){ } @media screen and (min-width:1281px){ .password #user input.submit{font-size: 18px !important} } /*비밀번호 수정*/ /*배송지 관리*/ #contents.shipping div.input button.input{background-color: var(--color-background-3) !important; border-color: var(--color-background-3) !important} #contents.shipping div.input button.input:hover{background-color: var(--color-background-8) !important} #hidden_layer #shipWrite div.writeLayer div.header{background-color: var(--color-primary) !important} #hidden_layer #shipWrite div.writeLayer ul.postcode > li.btnw input{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border-color: var(--color-border-5) !important} #hidden_layer #shipWrite div.writeLayer ul.postcode > li.btnw input:hover{border-color: var(--color-border-1) !important} #hidden_layer #shipWrite div.writeLayer input.input:focus{border-color: var(--color-border-1) !important} #hidden_layer #shipWrite div.writeLayer div.btn div > input.btn.cancel{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border:1px solid var(--color-border-5) !important} #hidden_layer #shipWrite div.writeLayer div.btn div > input.btn.cancel:hover{border-color: var(--color-border-1) !important} #hidden_layer #shipWrite div.writeLayer div.btn div > input.btn.submit{background-color: var(--color-background-3) !important} #hidden_layer #shipWrite div.writeLayer div.btn div > input.btn.submit:hover{background-color: var(--color-background-8) !important} .shipping tbody{color:var(--color-text-2) !important} #contents.shipping table._tbl p.defaultShip{border-color: var(--color-primary) !important; color: var(--color-primary) !important} #contents.shipping table._tbl button.btn:hover{background-color: var(--color-background-3) !important; color: var(--color-text-1) !important} /*배송지 관리*/ /*포인트 조회*/ #contents table._tbl{border-top: 2px solid var(--color-primary) !important} /*포인트 조회*/ /*찜한상품*/ #contents div.header button.allDel:hover, #contents div.header button.allCheckLikePrd:hover, #contents ul.likeList > li button.btn.check:hover, #contents ul.likeList > li button.btn.del:hover {border-color: var(--color-border-1) !important} @media screen and (max-width:1280px){ #contents.mypage h2.mypage{font-size: 18px !important} } @media screen and (min-width:1281px){ #contents.mypage h2.mypage{font-size: 28px !important} #contents.shipping div.input button.input{font-size: 18px !important} ul#request > li a > p.company > span.name, ul#request > li .info > span.time, ul#request > li > div.return table._tbl{font-size: 14px !important} } /*찜한상품*/ /*1:1 문의 내역*/ ul#request > li > div.return button.fa-times{background-color: var(--color-background-3) !important} ul#request > li > div.return table._tbl th:nth-of-type(2), ul#request > li > div.return table._tbl td:nth-of-type(2){display: none} @media screen and (max-width:1280px){ #contents.mypage ul#request > li{font-size: 14px !important} } @media screen and (min-width:1281px){ } /*1:1 문의 내역*/ /*결제완료페이지*/ .mypage.orderView div.status{text-shadow: unset !important} .mypage.orderView ul.orderId strong.orderId, .mypage.orderView strong.orderId{color: var(--color-primary) !important} .mypage.orderView ul.order > li > header, .mypage.orderView div._tbl > header, .mypage.orderView ul.orderPlace > li > header{background-color: var(--color-background-12) !important; text-align: center} .mypage.orderView ul.order, .mypage.orderView div._tbl, .mypage.orderView ul.orderPlace{border-top: 2px solid var(--color-primary) !important} .mypage.orderView ul.order > li a.btn:last-child:hover{border-color: var(--color-border-1) !important} .mypage.orderView a.toList{background-color: var(--color-background-3) !important; border-color: var(--color-background-3) !important; border-radius: 6px} .mypage.orderView a.toList:hover{background-color: var(--color-background-8) !important; color: var(--color-text-1) !important} @media screen and (max-width:1280px){ #contents.mypage ul#request > li{font-size: 14px !important} } @media screen and (min-width:1281px){ .mypage.orderView ul.order, .mypage.orderView div._tbl, .mypage.orderView ul.orderPlace{font-size: 15px !important} } /*결제완료페이지*/ /*결제취소 팝업창*/ #orderCancel .modify_layer > div.header{background-color: var(--color-primary) !important} #orderCancel .modify_layer > form > ul{background-color: var(--color-background-12) !important} #orderCancel textarea._textarea:focus{border-color: var(--color-border-1) !important} #orderCancel .modify_layer > div.footer > input.btn.submit{background-color: var(--color-background-3) !important; border-radius: 6px} #orderCancel .modify_layer > div.footer > input.btn.submit:hover{background-color: var(--color-background-8) !important} #orderCancel .modify_layer > div.footer > input.btn.cancel{background-color: var(--color-background-lightest) !important; color: var(--color-text-2) !important; border: 1px solid var(--color-border-5); border-radius: 6px} #orderCancel .modify_layer > div.footer > input.btn.cancel:hover{border-color: var(--color-border-1) !important} /*결제취소 팝업창*/ /*페이지 타이틀 배경 지정*/ body.community .page-title-bg{background: url(/image/pageTitle/community.png) no-repeat 50% 0; background-size:cover} body.mypage .page-title-bg{background: url(/image/pageTitle/mypage.jpg) no-repeat 50% 0; background-size:cover} /*페이지 타이틀 배경 지정*/