/* ===== landmain_globals.css ===== */ /*@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");*/ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } /* html, body { margin: 0px; height: 100%; } */ /* a blue color as a generic focus style */ button:focus-visible { outline: 2px solid #4a90e2 !important; outline: -webkit-focus-ring-color auto 5px !important; } a { text-decoration: none; } @font-face { font-family: "Pretendard Variable-Bold"; src: url("https://anima-uploads.s3.amazonaws.com/projects/640764766bf479e1d3dd80f8/fonts/pretendard-bold.otf") format("opentype"); } @font-face { font-family: "Pretendard Variable-Regular"; src: url("https://anima-uploads.s3.amazonaws.com/projects/66d08b3bd824b3c6e4739bc0/fonts/pretendardvariable.ttf") format("truetype"); } @font-face { font-family: "Pretendard Variable-SemiBold"; src: url("https://anima-uploads.s3.amazonaws.com/projects/64fac57db3f905840f5d2394/fonts/pretendardvariable.ttf") format("truetype"); } @font-face { font-family: "Pretendard Variable-ExtraBold"; src: url("https://anima-uploads.s3.amazonaws.com/projects/63edf64aea18a32c49d2231e/fonts/pretendardvariable.ttf") format("truetype"); } @font-face { font-family: "Pretendard Variable-Light"; src: url("https://anima-uploads.s3.amazonaws.com/projects/65a9d3f381c250867f89f8fb/fonts/pretendardvariable.ttf") format("truetype"); } @font-face { font-family: "Pretendard Variable-SemiBold"; src: url("https://anima-uploads.s3.amazonaws.com/projects/64fac57db3f905840f5d2394/fonts/pretendardvariable.ttf") format("truetype"); } /* ===== landmain_styleguide.css ===== */ :root { --web-body-b3-13-med-font-family: "Pretendard Variable", Helvetica; --web-body-b3-13-med-font-weight: 500; --web-body-b3-13-med-font-size: 13px; --web-body-b3-13-med-letter-spacing: -0.52px; --web-body-b3-13-med-line-height: 150%; --web-body-b3-13-med-font-style: normal; --web-body-b3-13-sbold-font-family: "Pretendard Variable", Helvetica; --web-body-b3-13-sbold-font-weight: 600; --web-body-b3-13-sbold-font-size: 13px; --web-body-b3-13-sbold-letter-spacing: -0.52px; --web-body-b3-13-sbold-line-height: 150%; --web-body-b3-13-sbold-font-style: normal; --web-body-b1-16-reg-font-family: "Pretendard Variable", Helvetica; --web-body-b1-16-reg-font-weight: 400; --web-body-b1-16-reg-font-size: 16px; --web-body-b1-16-reg-letter-spacing: -0.64px; --web-body-b1-16-reg-line-height: 150%; --web-body-b1-16-reg-font-style: normal; --web-body-b1-16-med-font-family: "Pretendard Variable", Helvetica; --web-body-b1-16-med-font-weight: 500; --web-body-b1-16-med-font-size: 16px; --web-body-b1-16-med-letter-spacing: -0.64px; --web-body-b1-16-med-line-height: 150%; --web-body-b1-16-med-font-style: normal; --web-body-b3-13-reg-font-family: "Pretendard Variable", Helvetica; --web-body-b3-13-reg-font-weight: 400; --web-body-b3-13-reg-font-size: 13px; --web-body-b3-13-reg-letter-spacing: -0.52px; --web-body-b3-13-reg-line-height: 150%; --web-body-b3-13-reg-font-style: normal; --web-body-b0-18-sbold-font-family: "Pretendard Variable", Helvetica; --web-body-b0-18-sbold-font-weight: 600; --web-body-b0-18-sbold-font-size: 18px; --web-body-b0-18-sbold-letter-spacing: -0.72px; --web-body-b0-18-sbold-line-height: 150%; --web-body-b0-18-sbold-font-style: normal; --web-body-b0-18-med-font-family: "Pretendard Variable", Helvetica; --web-body-b0-18-med-font-weight: 500; --web-body-b0-18-med-font-size: 18px; --web-body-b0-18-med-letter-spacing: -0.72px; --web-body-b0-18-med-line-height: 150%; --web-body-b0-18-med-font-style: normal; --web-body-b2-15-med-font-family: "Pretendard Variable", Helvetica; --web-body-b2-15-med-font-weight: 500; --web-body-b2-15-med-font-size: 15px; --web-body-b2-15-med-letter-spacing: -0.6px; --web-body-b2-15-med-line-height: 150%; --web-body-b2-15-med-font-style: normal; --web-body-b2-15-reg-font-family: "Pretendard Variable", Helvetica; --web-body-b2-15-reg-font-weight: 400; --web-body-b2-15-reg-font-size: 15px; --web-body-b2-15-reg-letter-spacing: -0.6px; --web-body-b2-15-reg-line-height: 150%; --web-body-b2-15-reg-font-style: normal; --web-caption-c1-12-reg-font-family: "Pretendard Variable", Helvetica; --web-caption-c1-12-reg-font-weight: 400; --web-caption-c1-12-reg-font-size: 12px; --web-caption-c1-12-reg-letter-spacing: -0.48px; --web-caption-c1-12-reg-line-height: 139.9999976158142%; --web-caption-c1-12-reg-font-style: normal; --web-headline-h3-20-sbold-font-family: "Pretendard Variable", Helvetica; --web-headline-h3-20-sbold-font-weight: 600; --web-headline-h3-20-sbold-font-size: 20px; --web-headline-h3-20-sbold-letter-spacing: -0.8px; --web-headline-h3-20-sbold-line-height: 139.9999976158142%; --web-headline-h3-20-sbold-font-style: normal; --web-body-b1-16-sbold-font-family: "Pretendard Variable", Helvetica; --web-body-b1-16-sbold-font-weight: 600; --web-body-b1-16-sbold-font-size: 16px; --web-body-b1-16-sbold-letter-spacing: -0.64px; --web-body-b1-16-sbold-line-height: 150%; --web-body-b1-16-sbold-font-style: normal; --web-headline-h0-38-sbold-font-family: "Pretendard Variable", Helvetica; --web-headline-h0-38-sbold-font-weight: 600; --web-headline-h0-38-sbold-font-size: 38px; --web-headline-h0-38-sbold-letter-spacing: -1.52px; --web-headline-h0-38-sbold-line-height: 139.9999976158142%; --web-headline-h0-38-sbold-font-style: normal; --variable-collection-text-black: rgba(17, 17, 17, 1); --variable-collection-text-white: rgba(255, 255, 255, 1); --variable-collection-text-gray-200: rgba(196, 196, 196, 1); --variable-collection-text-gray-500: rgba(118, 118, 118, 1); --variable-collection-common-white: rgba(255, 255, 255, 1); --variable-collection-text-point1: rgba(78, 127, 240, 1); --variable-collection-text-point3: rgba(20, 177, 85, 1); --variable-collection-text-point2: rgba(255, 65, 65, 1); --variable-collection-primary-blue-500: rgba(78, 127, 240, 1); --variable-collection-text-point4: rgba(255, 224, 45, 1); --variable-collection-primary-blue-300: rgba(130, 184, 255, 1); --variable-collection-text-gray-700: rgba(80, 80, 80, 1); --variable-collection-sub-gray-25: rgba(241, 243, 248, 1); --variable-collection-primary-blue-25: rgba(246, 249, 255, 1); --variable-collection-primary-blue-50: rgba(232, 241, 255, 1); --variable-collection-point-red-25: rgba(255, 245, 245, 1); --variable-collection-sub-gray-50: rgba(208, 213, 226, 1); } /* ===== component.css ===== */ legend, .blind, caption { position: absolute; top: 0; height: 0; font-size: 0; line-height: 0; } body { width: 100%; height: 100%; position: relative; } .design-guide-area { padding: 0 80px 80px; width: 100%; height: auto; margin: 0 auto 300px; overflow: hidden; } .design-guide-area .title-info { border-bottom: 1px solid #000; padding-bottom: 16.5px; margin: 80px 0 13.5px; } .design-guide-area .title-info > h4 { font-family: 'Noto Sans KR'; font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing:-1.08px; text-align: left; color: #161616; } .design-guide-area > h5 { font-family: 'Noto Sans KR'; font-size: 20px; margin: 0 0 16px; } /*========== [01] 폰트 시작 ==========*/ .font-style-area { width: 100%; height: auto; display: inline-block; margin: 32.5px 0 0; } .font-style-area li { font-size: 20px; line-height: 1.45; letter-spacing:-1px; text-align: left; color: #161616; margin: 0 0 16px; } /*영문 폰트*/ .font-style-area .eng { float: left; width: 476px; } .font-style-area .eng li { font-family: 'Lato'; } .font-style-area .eng li.lato-light { font-weight: 400; } .font-style-area .eng li.lato-bold { font-weight: 700; } .font-style-area .eng li.lato-black { font-weight: 900; } /*한글 폰트*/ .font-style-area .kor { float: left; width: 476px; } .font-style-area .kor li { font-family: 'Noto Sans KR'; } .font-style-area .kor li.noto-light { font-weight: 300; } .font-style-area .kor li.noto-regular { font-weight: 400; } .font-style-area .kor li.noto-medium { font-weight: 500; } .font-style-area .kor li.noto-bold { font-weight: 700; } .font-style-area .kor li.noto-black { font-weight: 900; } .guide-text { display: block; font-size: 13px; font-weight: 300; line-height: 1.19; letter-spacing:-0.8px; text-align: left; color: #161616; margin-top: 15px; } /*========== [01] 폰트 끝 ==========*/ /*========== [02] 버튼 시작 ==========*/ .btn-style-area h5 { margin-top: 60px; } .btn-style-area { display: inline-block; width: 1600px; padding-bottom: 60px; overflow-x: scroll; } .btn-style-area > div { display: inline-block; width: 6000px; } .btn-style-area .guide-text:first-child { font-size: 16px; } /*버튼 종류*/ .btn-small { display: inline-block; width: 180px; height: 36px; border: solid 1px #161616; background-color: #ffffff; font-size: 12px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 34px; transition: all 0.5s; } .btn-small2 {border-radius:4px; padding:4px 12px;display: inline-block; width: 153px; height: 31px; border: solid 1px #161616; background-color: #ffffff; font-size: 15px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 23px; transition: all 0.5s; } .btn-small3 {border-radius:4px; padding:4px 12px;display: inline-block; width: 177px; height: 32px; border: solid 1px #161616; background-color: #ffffff; font-size: 16px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 23px; transition: all 0.5s; } .btn-small4 {border-radius:4px; padding:4px 12px;display: inline-block; height: 28px; border: solid 1px #161616; background-color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 20px; transition: all 0.5s; } .btn-small5 {border-radius:4px; padding:4px 12px;display: inline-block; width:100%;height: 31px; border: solid 1px #161616; background-color: #ffffff; font-size: 15px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 23px; transition: all 0.5s; } .btn-small.radius { border-radius: 18px; } .btn-small + .btn-small { margin-left: 3px; } .btn-small.type1 { width: 94px; } .btn-small.type2 { width: 64px; } .btn-small.type3 { width: 70px; } .btn-small.type4 { width: 136px; } .btn-small.type5 { width: 108px; } .btn-small.type6 { width: 172px; } .btn-small.type7 { width: 120px; } .chartvbtn-small {padding:4px 12px; display: inline-block; width: 68px; height: 28px;border-radius:4px; border: solid 1px #767676; background-color: #ffffff; font-size: 12px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 19.5px; transition: all 0.5s; } .popbtn-small {padding:4px 12px; display: inline-block; height: 28px;border-radius:4px; border: solid 1px #767676; background-color: #ffffff; font-size: 12px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 19.5px; transition: all 0.5s; } .morebtnnobox-small {padding:4px 12px; display: inline-block; height: 28px;background-color: #ffffff; font-size: 12px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 19.5px; transition: all 0.5s; } .morebtnnobox-small:after{ content: ""; display: block; width: 10px; height: 6px; background: url(/landimg/detailpop/vector-2-1.svg) no-repeat;} .btn-medium { border-radius:4px;padding:6px 12px;display: inline-block; width: 200px; border: solid 1px #161616; background-color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 22.5px; transition: all 0.5s; } .btn-favorite1 { font-weight:500;border-radius:30px;padding:6px 8px;display: inline-block; height:56px;width: 112px; border: solid 1px #4e7ff0; background-color: #4e7ff0; font-size: 16px; letter-spacing:-0.65px; text-align: center; color: #fff; transition: all 0.5s; } .btn-favorite1 img{width:15px;height:14px;} .btn-favorite1:before{ background: url(/landimg/detailpop/favorite_icon.svg) center center no-repeat;content: ''; display: inline-block; width: 15px; height: 14px; } .btn-favorite1:hover{ color: #fff; transition: all 0.2s; background-color: #fff;color:#4e7ff0;} .btn-favorite1:hover:before{ background: url(/landimg/detailpop/favorite_icon_on.svg) center center no-repeat; transition: all 0.2s;} .btn-bidmedium { border-radius:4px;padding:6px 12px;display: inline-block; width: 100%; border: solid 1px #161616; background-color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 22.5px; transition: all 0.5s; } .btn-medium + .btn-medium { margin-left: 14px; } .btn-medium2 { display: inline-block; width: 210px; height: 50px; border: solid 1px #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 48px; transition: all 0.5s; } .btn-medium2 + .btn-medium2 { margin-left: 14px; } .btn-medium2.radius { border-radius: 25px; } .btn-large { display: inline-block; width: 250px; height: 54px; border: solid 1px #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 52px; transition: all 0.5s; } .btn-large.radius { border-radius: 27px; } .btn-large + .btn-large { margin-left: 14px; } .btn-popup { display: inline-block; width: 430px; height: 56px; border: solid 1px #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 54px; transition: all 0.5s; } .btn-small10 { padding:8px 12px;display: inline-block; height: 36px; border: solid 1px #657088; background-color: transparent; font-size: 13px; font-weight: 600; letter-spacing:-0.65px; text-align: center; color: #657088; line-height: 18px; transition: all 0.5s; border-radius:20px;} .btn-small11 { padding:8px 12px;display: inline-block; height: 36px; border: solid 1px #657088; background-color: transparent; font-size: 13px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #657088; line-height: 18px; transition: all 0.5s; border-radius:8px;} .btn-small12 { padding:8px 12px;display: inline-block; height: 39px; border: solid 1px #4E7FF0; background-color: transparent; font-size: 15px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #4E7FF0; line-height: 21px; transition: all 0.5s; border-radius:8px;} .btn-small13 { padding:8px 12px 8px 34px;display: inline-block; height: 39px; border: solid 1px #4E7FF0; background-color: transparent; font-size: 15px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #4E7FF0; line-height: 21px; transition: all 0.5s; border-radius:8px;} .btn-small13::before {content: "";position: absolute;width: 14px;height: 14px;background:url(/landimg/reflush_icon.svg) center center no-repeat; background-size: contain; border: 0;display: inline-flex;margin-left:-18px;margin-top:4px;transition: all 0.5s;} .btn-small14 { width:100px;padding:12px 12px 12px 12px;display: inline-block; height: 51px; border: solid 1px #B5BCCC; background-color: transparent; font-size: 18px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #B5BCCC; line-height: 21px; transition: all 0.5s; border-radius:8px;} .btn-small14::before {content: "";position: absolute;width: 14px;height: 14px;background:url(/landimg/reset_icongray.svg) center center no-repeat; background-size: contain; border: 0;display: inline-flex;margin-left:-18px;margin-top:4px;transition: all 0.5s;} .btn-small14:hover::before {content: "";position: absolute;width: 14px;height: 14px;background:url(/landimg/reflush_white.svg) center center no-repeat; background-size: contain; border: 0;transition: all 0.5s;} .btn-small14:hover{border: solid 1px #B5BCCC; background-color: #B5BCCC; color: #fff; } .btn-small15 { width:100px;padding:12px 12px 12px 12px;display: inline-block; height: 51px; border: solid 1px #4E7FF0; background-color: #4E7FF0; font-size: 18px; font-weight: 500; letter-spacing:-0.65px; text-align: center; color: #fff; line-height: 21px; transition: all 0.5s; border-radius:8px;} .btn-small15:hover{border: solid 1px #4E7FF0; background-color: #fff; color: #4E7FF0; } /*버튼 색상*/ .tabbtn-small{ border-bottom:1px solid #fff;color: #767676; transition: all 0.5s;padding:2px 12px;font-size:18px;font-weight:500;} .tabbtn-small.on{ border-bottom:1px solid #4E7FF0;color: #4E7FF0; transition: all 0.5s;} .tabbtn-small:hover{ border-bottom:1px solid #4E7FF0;color: #4E7FF0; transition: all 0.5s;} .btn-small.disabled, .btn-medium.disabled, .btn-medium2.disabled, .btn-large.disabled, .btn-popup.disabled { border: solid 1px #d6d6d6; background-color: #d6d6d6; color: #ffffff; cursor: no-drop; } .btn-small.white, .btn-medium.white, .btn-medium2.white, .btn-large.white, .btn-popup.white { border: solid 1px #ffffff; background-color: #ffffff; color: #161616; transition: all 0.5s; } .btn-small.black, .btn-medium.black, .btn-medium2.black, .btn-large.black, .btn-popup.black { border: solid 1px #161616; background-color: #161616; color: #ffffff; transition: all 0.5s; } .btn-small.gray, .btn-medium.gray, .btn-medium2.gray, .btn-large.gray, .btn-popup.gray { border: solid 1px #f9f9f9; background-color: #f9f9f9; color: #161616; transition: all 0.5s; } .btn-small.blue,.btn-small2.blue,.btn-small5.blue{ border: solid 1px #4E7FF0; background-color: #4E7FF0; color: #fff; transition: all 0.5s; } .btn-small2.gray,.btn-small5.gray{ border: solid 1px #657088; background-color: #657088; color: #fff; transition: all 0.5s; } .btn-small3.gray{ border: solid 1px #B5BCCC; background-color: #B5BCCC; color: #fff; transition: all 0.5s; } .btn-small4.blue{background:#4E7FF0;color:#fff;border: solid 1px #4E7FF0} .chartvbtn-small.gray{ border: solid 1px #767676; background-color: #fff; color: #767676; transition: all 0.5s; } .popbtn-small.gray{ border: solid 1px #767676; background-color: #fff; color: #767676; transition: all 0.5s; font-size:16px; text-align: right;} .btn-small.line-gray, .btn-medium.line-gray, .btn-medium2.line-gray, .btn-large.line-gray, .btn-popup.line-gray { border: solid 1px #d6d6d6; background-color: #ffffff; color: #868686; transition: all 0.5s; } .btn-small.red, .btn-medium.red, .btn-medium2.red, .btn-large.red, .btn-popup.red { border: solid 1px #e80032; background-color: #e80032; color: #fff; transition: all 0.5s; } .btn-bidmedium.blue,.btn-small.blue, .btn-medium.blue, .btn-medium2.blue, .btn-large.blue, .btn-popup.blue { border: solid 1px #4E7FF0; background-color: #4E7FF0; color: #fff; transition: all 0.5s; } .btn-small.subgray, .btn-medium.subgray, .btn-medium2.subgray, .btn-large.subgray, .btn-popup.subgray { border: solid 1px #657088; background-color: #657088; color: #fff; transition: all 0.5s; } .btn-small.izmir, .btn-medium.izmir, .btn-medium2.izmir, .btn-large.izmir, .btn-popup.izmir { border: solid 1px #9eaaff; background-color: #9eaaff; color: #fff; transition: all 0.5s; } .btn-small.line-blue, .btn-medium.line-blue, .btn-medium2.line-blue, .btn-large.line-blue, .btn-popup.line-blue { border: solid 1px #546bff; background-color: #ffffff; color: #546bff; transition: all 0.5s; } .btn-small.orange, .btn-medium.orange, .btn-medium2.orange, .btn-large.orange, .btn-popup.orange { border: solid 1px orange; background-color: orange; color: #fff; transition: all 0.5s; } .btn-small.green, .btn-medium.green, .btn-medium2.green, .btn-large.green, .btn-popup.green { border: solid 1px green; background-color: green; color: #fff; transition: all 0.5s; } .btn-small.flexible, .btn-medium.flexible, .btn-medium2.flexible, .btn-large.flexible, .btn-popup.flexible { width: 100%; } /*버튼 hover효과*/ .btn-small10:hover{border: solid 1px #657088; background-color: #657088; color: #fff; } .btn-small13:hover::before {content: "";position: absolute;width: 14px;height: 14px;background:url(/landimg/reflush_white.svg) center center no-repeat; background-size: contain; border: 0;transition: all 0.5s;} .btn-small13:hover{border: solid 1px #4E7FF0; background-color: #4E7FF0; color: #fff; } .btn-small11:hover{border: solid 1px #657088; background-color: #657088; color: #fff; } .btn-small12:hover{border: solid 1px #4E7FF0; background-color: #4E7FF0; color: #fff; } .btn-small12.is-active{border: solid 1px #4E7FF0; background-color: #4E7FF0; color: #fff; } .btn-small:hover, .btn-medium:hover, .btn-medium2:hover, .btn-large:hover, .btn-popup:hover { border: solid 1px #161616; background-color: #161616; color: #fff; } .btn-small.disabled:hover, .btn-medium.disabled:hover, .btn-medium2.disabled:hover, .btn-large.disabled:hover, .btn-popup.disabled:hover { border: solid 1px #d6d6d6; background-color: #d6d6d6; color: #ffffff; } .btn-small.white:hover, .btn-medium.white:hover, .btn-medium2.white:hover, .btn-large.white:hover, .btn-popup.white:hover { border: solid 1px #fff; background-color: transparent; color: #fff; } .btn-small.black:hover, .btn-medium.black:hover, .btn-medium2.black:hover, .btn-large.black:hover, .btn-popup.black:hover { border: solid 1px #161616; background-color: #fff; color: #161616; } .btn-small.gray:hover, .btn-medium.gray:hover, .btn-medium2.gray:hover, .btn-large.gray:hover, .btn-popup.gray:hover { border: solid 1px #e6e6e6; background-color: #fff; color: #161616; } .btn-small.blue:hover,.btn-small2.blue:hover,.btn-small5.blue:hover { border: solid 1px #4E7FF0; background-color: #fff; color: #4E7FF0;font-weight:600; } .btn-small2.gray:hover,.btn-small5.gray:hover { border: solid 1px #657088; background-color: #fff; color: #657088;font-weight:600; } .btn-small3.gray:hover { border: solid 1px #B5BCCC; background-color: #fff; color: #B5BCCC;font-weight:600; } .btn-small4.blue:hover{background:#fff;color:#4E7FF0;border: solid 1px #4E7FF0} .chartvbtn-small.gray:hover{ border: solid 1px #fff; background-color: #767676; color: #fff; transition: all 0.5s; } .popbtn-small.gray:hover{ border: solid 1px #fff; background-color: #767676; color: #fff; transition: all 0.5s; } .btn-small.line-gray:hover, .btn-medium.line-gray:hover, .btn-medium2.line-gray:hover, .btn-large.line-gray:hover, .btn-popup.line-gray:hover { border: solid 1px #d6d6d6; background-color: #f6f6f6; color: #767676; } .btn-small.red:hover, .btn-medium.red:hover, .btn-medium2.red:hover, .btn-large.red:hover, .btn-popup.red:hover { border: solid 1px #e80032; background-color: #fff; color: #e80032; } .btn-bidmedium.blue:hover,.btn-small.blue:hover, .btn-medium.blue:hover, .btn-medium2.blue:hover, .btn-large.blue:hover, .btn-popup.blue:hover { border: solid 1px #4E7FF0; background-color: #fff; color: #4E7FF0; } .btn-small.subgray:hover, .btn-medium.subgray:hover, .btn-medium2.subgray:hover, .btn-large.subgray:hover, .btn-popup.subgray:hover { border: solid 1px #657088; background-color: #fff; color: #657088; } .btn-small.izmir:hover, .btn-medium.izmir:hover, .btn-medium2.izmir:hover, .btn-large.izmir:hover, .btn-popup.izmir:hover { border: solid 1px #9eaaff; background-color: #fff; color: #9eaaff; } .btn-small.line-blue:hover, .btn-medium.line-blue:hover, .btn-medium2.line-blue:hover, .btn-large.line-blue:hover, .btn-popup.line-blue:hover { border: solid 1px #546bff; background-color: #546bff; color: #fff; } .btn-small.orange:hover, .btn-medium.orange:hover, .btn-medium2.orange:hover, .btn-large.orange:hover, .btn-popup.orange:hover { border: solid 1px orange; background-color: #fff; color: orange; } .btn-small.green:hover, .btn-medium.green:hover, .btn-medium2.green:hover, .btn-large.green:hover, .btn-popup.green:hover { border: solid 1px green; background-color: #fff; color: green; } /*버튼 그룹화*/ .btn-group-type1 { display: inline-block; width: 100%; height: 100%; margin: 32px auto 0; text-align: center; } .btn-group-type1 button.btn-popup { float: left; width: 49%; } .btn-group-type1 button.btn-popup + .btn-popup { float: right; } .btn-group-type1 button.btn-popup.flexible { width: 100%; } /*========== [02] 버튼 끝 ==========*/ /*========== [03] 체크박스/라디오 시작 ==========*/ .chk-box-radio-box-area { padding-top: 45px; } .chk-box-radio-box-area .chk { float: left; width: 200px; } .chk-box-radio-box-area .radio { float: left; } /*체크박스*/ /* input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; vertical-align: middle; -webkit-appearance: none; margin:-3px 0 0; padding: 0; cursor: pointer; border-radius: 2px; border: 1px solid #d6d6d6; background: #fff; } input[type="checkbox"]:checked { background: #546bff url(/image/web/common/icon_check.png) center center no-repeat; background-size: contain; border: 0; } input[type="checkbox"] + input[type="checkbox"] { margin-left: 16px; } input[type="radio"] { position: relative; display: inline-block; width: 20px; height: 20px; margin:-2px 0 0; vertical-align: middle; text-align: center; -webkit-appearance: none; cursor: pointer; border-radius: 50%; background: #fff; border: 1px solid #d6d6d6; } input[type="radio"]:checked { background: #fff; border: 1px solid #d6d6d6; } input[type="radio"]:checked:before { content: ''; display: inline-block; width: 10px; height: 10px; background: #546bff; border-radius: 50%; vertical-align: middle; margin-top:-5px; position: absolute; top: 50%; left: 50%; margin-left:-5px; } input[type="radio"] + input[type="radio"] { margin-left: 16px; } */ /*========== [03] 체크박스/라디오 끝 ==========*/ /*========== [04] 페이지네이트 시작 ==========*/ .paginate-area { margin: 40px 0; text-align: center; } .paginate-area:after { content: ''; display: block; clear: both; } .paginate-area ul { display: inline-block; } .paginate-area ul li { float: left; margin: 0 1px; } .paginate-area ul li a { display: inline-block; width: 28px; height: 28px; line-height: 26px; text-align: center; padding: 0; vertical-align: middle; text-decoration: none; transition: all 0.5s; font-size: 13px; color: #999; font-weight: 400; } .paginate-area ul .dir { width: 28px; height: 28px; padding: 0 2px; } .paginate-area ul .dir a { display: inline-block; width: 24px; height: 24px; margin: 0; } .paginate-area ul .dir.prev a { background: url(/image/web/common/pagination-prev.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.next a { background: url(/image/web/common/pagination-next.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.start a { background: url(/image/web/common/pagination-start.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.end a { background: url(/image/web/common/pagination-end.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.prev a:hover { background: #f6f6f6 url(/image/web/common/pagination-prev.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.next a:hover { background: #f6f6f6 url(/image/web/common/pagination-next.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.start a:hover { background: #f6f6f6 url(/image/web/common/pagination-start.png) center center no-repeat; background-size: contain; } .paginate-area ul .dir.end a:hover { background: #f6f6f6 url(/image/web/common/pagination-end.png) center center no-repeat; background-size: contain; } .paginate-area ul li.on a { font-weight: 400; background: #546bff; color: #fff; border: 1px solid #546bff; border-radius: 2px; } .paginate-area ul li.on a:hover { background: #546bff; color: #fff; border: 1px solid #546bff; } .paginate-area ul li a:hover { background: #f6f6f6; } /*========== [04] 페이지네이트 끝 ==========*/ /* select{color:#B5BCCC;padding:8px 12px;height:36px;border-radius:8px;border:1px solid #B5BCCC; -webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none;} select::-ms-expand{ display:none;/*for IE10,11*/} select {/*background:url('/landimg/select_downar.svg') no-repeat 90% 50%/11px auto;*/} option { border:1px solid red; } */ /*========== [05] 셀렉트/인풋 시작 ==========*/ .select-input-area { box-sizing: border-box; width: 100%; height: auto; display: inline-block; } .select-input-area .guide-text { margin-bottom: 40px; } .select-input-area ul.input-box-area { margin: 25px 0 0; } .select-input-area ul.input-box-area li { float: left; display: inline-block; width: 200px; margin: 27px 60px 0 0; } /*셀렉트박스*/ .select-box-area { border: 1px solid #e6e6e6; padding: 4px 12px; display: block; width: 200px; height: 100%; position: relative; } .select-box-area > .select-slider { width: 100%; cursor: pointer; display: inline-block; position: relative; background: transparent; } .select-box-area > .select-slider > span { font-size: 13px; color: #161616; } .select-box-area > .select-slider > i { position: absolute; top: 50%; margin-top:-10px; right:-4px; width: 20px; height: 20px; background: url(/image/web/common/icon_arrow_select_down.png) center center no-repeat; background-size: contain; } .select-box-area > .select-slider.on > i { background: url(/image/web/common/icon_arrow_select_up.png) center center no-repeat; background-size: contain; } .select-box-area > #select-type-01 { display: none; padding: 0 16px; } .select-box-area .actual-option { position: absolute; top: calc(100% - 1px); left: 0; display: none; width: 100%; max-height: 120px; box-sizing: border-box; border: 1px solid #e6e6e6; font-size: 13px; overflow-y: scroll; background: #fff; z-index: 10; cursor: pointer; } .select-box-area .actual-option li { position: relative; float: left; width: 100%; clear: both; padding: 8px 16px; transition: all 0.5s; color: #868686; } .select-box-area .actual-option li:hover { color: #161616; background: #f6f6f6; } .select-box-area label { width: 100%; } .select-box-area label.on ~ .actual-option { display: block; } /*인풋박스*/ .input { width: 120px; padding: 4px 8px; border: solid 1px #e6e6e6; background-color: #ffffff; font-size: 13px; letter-spacing:-0.65px; color: #161616; } input[type='text'].input::placeholder { color: #161616; } input[type='text'].input::-webkit-input-placeholder { color: #b6b6b6; } input[type='text'].input::-webkit-moz-placeholder { color: #161616; } input[type='text'].input:-moz-placeholder { color: #161616; } input[type='text'].input::-moz-placeholder { color: #161616; } input[type='text'].input:-ms-input-placeholder { color: #161616; } textarea.input::placeholder { color: #161616; } textarea.input::-webkit-input-placeholder { color: #b6b6b6; } textarea.input::-webkit-moz-placeholder { color: #161616; } textarea.input:-moz-placeholder { color: #161616; } textarea.input::-moz-placeholder { color: #161616; } textarea.input:-ms-input-placeholder { color: #161616; } select.input { padding: 6px 12px; } .input::placeholder { color: #b6b6b6; } .input[disabled] { background: #f6f6f6; border: 0; cursor: not-allowed; color: #868686; } .input[readonly] { background: #f9f9f9; color: #161616; } .input.active, .input:focus { border-color: #46535f; } .input.flexible { width: 100%; } .input.right { text-align: right; } .input.type1 { width: 120px !important; } .input.type2 { width: 280px; } .input.type3 { width: 146px; } /*========== [05] 셀렉트/인풋 끝 ==========*/ /*========== [06] 캘랜더 시작 ==========*/ .calendar-area { width: 100%; height: auto; display: inline-block; } .calendar-area ul.calendar-box-area { margin: 25px 0 0; } .calendar-area ul.calendar-box-area li { float: left; display: inline-block; width: 300px; margin: 27px 60px 0 0; } .input-calendar { width: 200px; padding: 8px 12px; border: solid 1px #e6e6e6; background-color: #ffffff; position: relative; font-size: 13px; letter-spacing:-0.65px; color: #161616; } input[type='text'].input-calendar::placeholder { color: #161616; } input[type='text'].input-calendar::-webkit-input-placeholder { color: #b6b6b6; } input[type='text'].input-calendar::-webkit-moz-placeholder { color: #161616; } input[type='text'].input-calendar:-moz-placeholder { color: #161616; } input[type='text'].input-calendar::-moz-placeholder { color: #161616; } input[type='text'].input-calendar:-ms-input-placeholder { color: #161616; } .input-calendar[disabled] { background: #f6f6f6; border: 0; cursor: not-allowed; color: #868686; } .input-calendar.active, .input-calendar:focus { border-color: #46535f; } .input-calendar.flexible { width: 100%; } .input-calendar.icon-img { } .input-calendar.icon-img { padding-left: 36px; background: #ffffff url(/image/web/common/icon_calendar.png) 6px center no-repeat; background-size: 24px 24px; } .input-calendar.icon-img[disabled] { background: #f6f6f6 url(/image/web/common/icon_calendar.png) 6px center no-repeat; background-size: 24px 24px; } /*flatpickr 커스텀*/ .flatpickr-calendar { width: 260px!important; padding: 20px 20px 10px 20px!important; margin-left:-40px!important; margin-top: 15px!important; border: 1px solid #d6d6d6!important; border-radius: 4px!important; } .flatpickr-weekdays .flatpickr-weekdaycontainer span.flatpickr-weekday { font-size: 12px; color: #b6b6b6; font-weight: 400; } .flatpickr-current-month { padding: 0 0 0 0!important; } .dayContainer { min-width: 100%!important; max-width: 100%!important; width: 100%!important; } .dayContainer .flatpickr-day { width: 28px!important; height: 28px!important; font-size: 12px; max-width: 28px!important; } .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { top: 15px!important; left: 15px!important; } .flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 15px!important; right: 15px!important; } .flatpickr-next-month > svg { fill: #b6b6b6!important; } .flatpickr-prev-month > svg { fill: #b6b6b6!important; } .flatpickr-next-month:hover > svg { fill: #161616!important; } .flatpickr-prev-month:hover > svg { fill: #161616!important; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #d6d6d6!important; } .flatpickr-calendar.arrowBottom:before { border-top-color: #d6d6d6!important; } .flatpickr-calendar:before, .flatpickr-calendar:after { left: 50%!important; } .flatpickr-innerContainer .flatpickr-rContainer { width: 100%; } .numInputWrapper { width: auto; } .numInputWrapper span.arrowUp { display: none; } .flatpickr-current-month input.cur-year { width: 40px; font-size: 0.8125rem!important; font-weight: 500!important; } .flatpickr-current-month span.cur-month { font-size: 0.8125rem; font-weight: 500!important; } .flatpickr-current-month .numInputWrapper { width: auto!important; } .flatpickr-days { width: 100%!important; } .flatpickr-day { line-height: 28px!important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { opacity: 0!important; visibility: hidden!important; } .flatpickr-day.today { border: none!important; border-radius: 50%!important; background: #f6f6f6!important; color: #161616!important; } .flatpickr-day.today:hover { border: none!important; border-radius: 50%!important; background: #f6f6f6!important; color: #161616!important; } .flatpickr-day:hover { border: none!important; border-radius: 50%!important; background: #f6f6f6!important; } .flatpickr-day.selected { background: #299BFF!important; } .flatpickr-day.selected:hover { background: #299BFF!important; } .flatpickr-days .btn_small ~ .btn_small { display: none; } .flatpickr-months .flatpickr-prev-month.disabled, .flatpickr-months .flatpickr-next-month.disabled { display: block!important; opacity: .3!important; } /*========== [06] 캘랜더 끝 ==========*/ /*========== [07] 모달레이어팝업 시작 ==========*/ .modal-area { width: 100%; height: auto; display: inline-block; } .modal-area > button { margin: 60px 0; } .modal-layer-area { display: none; background: #fff; overflow-y: auto; max-height: 720px; min-width: 360px; position: relative; margin: 0 auto; z-index: 100; padding: 40px 24px 24px; box-shadow: 0px 1px 5px rgba(0,0,0,0.2); } .modal-layer-area button.b-close.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: url(/image/web/common/icon_modal_close_n.png) center center no-repeat; background-size: contain; } .modal-layer-area button.b-close.modal-close:hover { background: url(/image/web/common/icon_modal_close_s.png) center center no-repeat; background-size: contain; } .modal-layer-area .modal-content { width: 100%; height: auto; position: relative; text-align: center; margin: 0 auto; } .modal-layer-area .modal-content > h5 { font-size: 20px; font-weight: 500; color: #161616; margin-bottom: 12px; } .modal-layer-area .modal-content > p { font-size: 12px; color: #868686; } /*========== [07] 모달레이어팝업 끝 ==========*/ /*========== [08] 상품타입 시작 ==========*/ .product-area { width: 100%; height: auto; display: inline-block; } .product-area > .guide-text { margin-bottom: 40px; } .product-area > .guide-text2 { margin-bottom: 16px; margin-top: 40px; font-weight: bold; color: blue; } .product-box { width: 100%; height: auto; position: relative; } .product-box > ul { display: inline-block; width: 100%; height: auto; } .product-box > ul li.slider { display: block; float: left; width: 200px; height: auto; } .product-box > ul li.slider:first-child { margin-left: 0!important; } .product-box > ul li.slider > .product-img { display: block; width: 100%; height: 100%; } .product-box > ul li.slider > .product-img > a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .product-box > ul li.slider > .product-img > a > img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box > ul li.slider > .product-img > a:hover img { transform: scale(1.05); } .product-box > ul li.slider > .product-ect { display: block; width: 100%; height: auto; margin-top: 8px; } .product-box > ul li.slider > .product-ect > ul { width: 100%; height: auto; } .product-box > ul li.slider > .product-ect > ul > li.brand { float: left; display: block; font-size: 14px; color: #161616; } .product-box > ul li.slider > .product-ect > ul > li.delivery { float: right; display: block; padding: 2px 6px; border: 1px solid #758baf; color: #758baf; font-size: 10px; margin-top: 1px; } .product-box > ul li.slider > .product-ect > ul > li.shop { float: right; width: 24px; height: 24px; display: block; } .product-box > ul li.slider > .product-ect > ul > li.shop > a { display: block; width: 100%; height: 100%; background: url(/image/web/common/icon_shop.png) center center no-repeat; background-size: contain; text-indent:-9999px; } .product-box > ul li.slider > .product-ect > ul > li.like { float: right; width: 24px; height: 24px; display: block; } .product-box > ul li.slider > .product-ect > ul > li.like > a { display: block; width: 100%; height: 100%; transition: all 0.5s; background: url(/image/web/common/icon_like_n.png) center center no-repeat; background-size: contain; text-indent:-9999px; transform: scale(1.0); } .product-box > ul li.slider > .product-ect > ul > li.like > a:hover { transform: scale(1.08); background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box > ul li.slider > .product-ect > ul > li.like > a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box > ul li.slider > .product-title { display: block; width: 100%; height: auto; margin-top: 8px; } .product-box > ul li.slider > .product-title > a { display: block; font-size: 14px; color: #161616; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; } .product-box > ul li.slider > .product-title > a:hover { text-decoration: underline; } .product-box > ul li.slider > .product-title > p { display: block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; } .product-box > ul li.slider > .product-price { display: block; width: 100%; height: auto; margin-top: 8px; } .product-box > ul li.slider > .product-price > ul { width: 100%; height: auto; } .product-box > ul li.slider > .product-price > ul > li { display: block; float: left; } .product-box > ul li.slider > .product-price > ul > li.discount { font-size: 18px; font-weight: 800; color: #e80032; font-family: 'Lato'; margin-right: 12px; } .product-box > ul li.slider > .product-price > ul > li.price { font-size: 18px; font-weight: 800; color: #161616; font-family: 'Lato'; } .product-box ul li.slider > .product-price > ul > li.origin-price { font-size: 13px; color: #b6b6b6; font-family: 'Lato'; text-decoration: line-through; margin-left: 6px; margin-top: 5px; } /*product-box type-a 일때*/ .product-box.type-a { } .product-box.type-a .like { display: none!important; } .product-box.type-a .shop { display: none!important; } /*product-box type-b 일때*/ .product-box.type-b .delivery { display: none!important; } .product-box.type-b .detail-info { display: none!important; } .product-box.type-b .discount { display: none!important; } .product-box.type-b .origin-price { display: none!important; } /*product-box type-c 일때*/ .product-box.type-c .like { display: none!important; } .product-box.type-c .shop { display: none!important; } .product-box.type-c .delivery { display: none!important; } .product-box.type-c .detail-info { display: none!important; } .product-box.type-c .discount { display: none!important; } .product-box.type-c .origin-price { display: none!important; } /*product-box 사용예제 부모 클래스명 test-box*/ .test-box { width: 1080px; height: auto; background: #b5e1ea; } .test-box > .product-box > ul > li { display: block; float: left; width: calc((100% - 72px)/4); height: auto; margin-left: 24px; } /*product-box type-r 일때*/ .product-box.type-r { width: 100%; height: auto; position: relative; } .product-box.type-r > ul { display: inline-block; width: 100%; height: auto; } .product-box.type-r > ul li.slider { display: block; float: left; width: 200px; height: auto; margin-left: 24px; } .product-box.type-r > ul li:first-child { margin-left: 0; } .product-box.type-r > ul li.slider > .product-img { display: block; width: 100%; height: 100%; } .product-box.type-r > ul li.slider > .product-img > a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .product-box.type-r > ul li.slider > .product-img > a > img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box.type-r > ul li.slider > .product-img > a:hover img { transform: scale(1.05); } .product-box.type-r > ul li.slider > .product-ect { display: block; width: 100%; height: auto; margin-top: 8px; } .product-box.type-r > ul li.slider > .product-ect > ul { width: 100%; height: auto; } .product-box.type-r > ul li.slider > .product-ect > ul > li.score { float: left; display: block; } .product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul { width: 100%; display: inline-block; position: relative; } .product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul > li { width: 12px; height: 12px; display: block; float: left; background: url(/image/web/common/icon_star_n.png) center center no-repeat; background-size: contain; } .product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul > li.on { background: url(/image/web/common/icon_star_s.png) center center no-repeat; background-size: contain; } .product-box.type-r > ul li.slider > .product-ect > ul > li.user-id { float: left; display: inline-block; color: #b6b6b6; font-size: 12px; margin-left: 8px; margin-top: 4px; } .product-box.type-r > ul li.slider > .product-ect > ul > li.date { float: right; display: inline-block; color: #b6b6b6; font-size: 12px; margin-left: 8px; margin-top: 4px; } .product-box.type-r > ul li.slider > .product-title { display: block; width: 100%; height: auto; margin-top: 8px; } .product-box.type-r > ul li.slider > .product-title > a { display:-webkit-box; font-size: 13px; color: #161616; line-height: 1.8em; max-height: 3.6em; white-space: normal; text-overflow: ellipsis; overflow: hidden; width: 95%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-box.type-r > ul li.slider > .product-title > a:hover { text-decoration: underline; } .product-box.type-r > ul li.slider > .product-title > p { display: block; font-size: 11px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; } /*product-box type-d 일때*/ .product-box.type-d { width: 100%; height: auto; position: relative; font-size: 0!important; letter-spacing: 0!important; word-spacing: 0!important; } .product-box.type-d > ul { display: inline-block; width: 100%; height: auto; } .product-box.type-d > ul:first-child li.slider { /*border-top: 1px solid #e6e6e6*/} .product-box.type-d > ul li.slider { display: block; float: left; width: 100%; height: auto; padding: 12px 0; border-bottom: 1px solid #e6e6e6; } .product-box.type-d > ul li.slider:first-child { margin-left: 0!important; } .product-box.type-d > ul li.slider > .product-img { float: left; display: block; width: 160px; height: 160px; margin-right: 24px; } .product-box.type-d > ul li.slider > .product-info { float: left; width: calc(100% - 184px); height: auto; display: block; } .product-box.type-d > ul li.slider > .product-img > a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .product-box.type-d > ul li.slider > .product-img > a > img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box.type-d > ul li.slider > .product-img > a:hover img { transform: scale(1.05); } .product-box.type-d > ul li.slider > .product-info .product-title { float: left; display: block; width: 60%; } .product-box.type-d > ul li.slider > .product-info .product-title .brand { font-size: 14px; display: block; margin-top: 8px; } .product-box.type-d > ul li.slider > .product-info .product-title > a { display: inline-block; font-size: 14px; color: #161616; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 8px; } .product-box.type-d > ul li.slider > .product-info .product-title p.detail-info { display: block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; } .product-box.type-d > ul li.slider > .product-info .product-title .product-price { width: 100%; height: auto; text-align: left; } .product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul { width: 100%; height: auto; display: inline-block; } .product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul > .price { font-size: 18px; margin-top: 16px; font-weight: 800; color: #161616; font-family: 'Lato'; } .product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul > .delivery { float: left; display: block; padding: 2px 6px; border: 1px solid #758baf; color: #758baf; font-size: 10px; margin-top: 8px; } .product-box.type-d > ul li.slider > .product-info .product-ect { float: right; display: block; width: 40%; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul { width: 100%; height: auto; display: inline-block; text-align: left; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop { display: inline-block; width: 100%; height: auto; float: right; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a { float: right; display: inline-block; font-size: 12px; color: #868686; line-height: 24px; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a:hover { text-decoration: underline; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a > span { float: left; width: 24px; height: 24px; display: block; text-indent:-9999px; background: url(/image/web/common/icon_shop.png) center center no-repeat; background-size: contain; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul { display: inline-block; width: 100%; float: right; margin-right: 12px; margin-top: 24px; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score { float: right; display: block; margin-top: 40px; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > span { float: right; line-height: 24px; font-size: 12px; color: #868686; margin-left: 8px; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul { display: inline-block; position: relative; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul > li { width: 16px; height: 16px; display: block; float: left; margin-top: 4px; background: url(/image/web/common/icon_star_n.png) center center no-repeat; background-size: contain; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul > li.on { background: url(/image/web/common/icon_star_s.png) center center no-repeat; background-size: contain; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like { float: right; display: inline-block; margin-top: 40px; margin-left: 24px; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a { float: left; display: block; width: 24px; height: 24px; transition: all 0.5s; background: url(/image/web/common/icon_like_n.png) center center no-repeat; background-size: contain; text-indent:-9999px; transform: scale(1.0); } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a:hover { transform: scale(1.08); background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > span { float: left; line-height: 24px; font-size: 12px; color: #868686; margin-left: 4px; } /*product-box type-e 일때*/ .product-box.type-e .delivery { display: none!important; } .product-box.type-e .detail-info { display: none!important; } .product-box.type-e { width: 100%; height: auto; position: relative; } .product-box.type-e > ul { overflow: hidden; } .product-box.type-e > ul + ul { margin: 60px 0 0; } .product-box.type-e > ul li.slider { display: block; float: left; width: 200px; height: auto; margin-left: 0; } .product-box.type-e > ul li.slider > .product-img { display: block; width: 100%; height: 100%; } .product-box.type-e > ul li.slider > .product-img > a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .product-box.type-e > ul li.slider > .product-img > a > img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-box.type-e > ul li.slider > .product-img > a:hover img { transform: scale(1.05); } .product-box.type-e > ul li.slider > .product-title { display: block; width: 100%; height: auto; padding: 16px 16px 0; } .product-box.type-e > ul li.slider > .product-title > a { display:-webkit-box; font-size: 15px; font-weight: 400; color: #161616; line-height: 1.47; letter-spacing: -0.75px; white-space: normal; text-overflow: ellipsis; overflow: hidden; width: 95%; height: 44px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-box.type-e > ul li.slider > .product-title > a:hover { text-decoration: underline; } .product-box.type-e > ul li.slider > .product-title > p { display: block; font-size: 11px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; } .product-box.type-e > ul li.slider > .product-title > p.shop-name { font-size: 13px; } .product-box.type-e > ul li.slider > .product-price { padding: 8px 16px 16px; } .product-box.type-e > ul li.slider > .product-price > ul > .price { font-size: 18px; font-weight: 900; color: #546bff; } .product-box.type-e > ul li.slider > .product-price > ul > .price:after { content: '원'; display: inline-block; vertical-align: middle; font-size: 14px; color: #546bff; margin: -4px 0 0 4px; } .product-box.type-e > ul li.slider > .product-price > ul li.like { float: right; display: inline-block; } .product-box.type-e > ul li.slider > .product-price > ul li.like > a { float: left; display: block; width: 24px; height: 24px; transition: all 0.5s; background: url(/image/web/common/icon_like_n.png) center center no-repeat; background-size: contain; text-indent:-9999px; transform: scale(1.0); } .product-box.type-e > ul li.slider > .product-price > ul li.like > a:hover { transform: scale(1.08); background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box.type-e > ul li.slider > .product-price > ul li.like > a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .product-box.type-e > ul li.slider > .product-price > ul li.like > span { float: left; line-height: 24px; font-size: 12px; color: #868686; margin-left: 4px; } /*========== [09] 상품타입 끝 ==========*/ /*========== [10] 첨부하기 시작 ==========*/ .board-write-area ul > li > label { display: block; font-size: 12px; color: #161616; margin: 24px 0 5px; text-align: left; } .board-write-area .btn-group-area { margin-top: 40px; } /*사진첨부*/ .img-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; } .img-upload-area > div + div { margin-top: 8px; } .img-upload-area > div > label { display: block; float: left; margin: 0 0 0 0; cursor: pointer; } .img-upload-area > div > input#file-upload { display: none; } .img-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; } .img-upload-area > div + div { margin-top: 8px; } .img-upload-area .btn-small { height: 35px; line-height: 33px!important; } .img-upload-area .btn-plus { width: 35px; height: 35px; border: solid 1px #d6d6d6; margin-left: 8px; transition: all 0.5s; } .img-upload-area .btn-plus span { display: inline-block; width: 23px; height: 23px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_plus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .img-upload-area .btn-minus { width: 35px; height: 35px; border: solid 1px #d6d6d6; margin-left: 8px; transition: all 0.5s; } .img-upload-area .btn-minus span { display: inline-block; width: 23px; height: 23px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_minus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .img-upload-area .btn-plus:hover { background: #f6f6f6; } .img-upload-area .btn-minus:hover { background: #f6f6f6; } .img-upload-area .file-upload-delete { display: inline-block; margin-left: 8px; font-size: 11px; color: #b6b6b6; cursor: pointer; } .img-upload-area .file-upload-delete:hover { text-decoration: underline; } .img-upload-area .file-upload-delete > em { text-indent:-9999px; display: inline-block; width: 18px; height: 18px; background: #b6b6b6 url(/image/web/common/icon_delete.png) center center no-repeat; background-size: contain; margin-right: 8px; transition: all 0.5s; } .img-upload-area .file-upload-delete > em:hover { background: #868686 url(/image/web/common/icon_delete.png) center center no-repeat; background-size: contain; } /*파일첨부*/ .file-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; } .file-upload-area > div + div { margin-top: 8px; } .file-upload-area > div > label { display: block; float: left; margin: 0 0 0 0; cursor: pointer; } .file-upload-area > div > input#file-upload { display: none; } .file-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; } .file-upload-area > div + div { margin-top: 8px; } .file-upload-area .btn-small { height: 35px; line-height: 33px!important; } .file-upload-area .btn-plus { width: 36px; height: 36px; border: solid 1px #d6d6d6; margin-left: 8px; transition: all 0.5s; } .file-upload-area .btn-plus span { display: inline-block; width: 23px; height: 23px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_plus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .file-upload-area .btn-minus { width: 36px; height: 36px; border: solid 1px #d6d6d6; margin-left: 8px; transition: all 0.5s; } .file-upload-area .btn-minus span { display: inline-block; width: 24px; height: 24px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_minus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .file-upload-area .btn-plus:hover { background: #f6f6f6; } .file-upload-area .btn-minus:hover { background: #f6f6f6; } .file-upload-area .file-upload-delete { display: inline-block; margin-left: 8px; font-size: 11px; color: #b6b6b6; cursor: pointer; } .file-upload-area .file-upload-delete:hover { text-decoration: underline; } .file-upload-area .file-upload-delete > em { text-indent:-9999px; display: inline-block; width: 18px; height: 18px; background: #b6b6b6 url(/image/web/common/icon_delete.png) center center no-repeat; background-size: contain; margin-right: 8px; transition: all 0.5s; } .file-upload-area .file-upload-delete > em:hover { background: #868686 url(/image/web/common/icon_delete.png) center center no-repeat; background-size: contain; } /*========== [10] 첨부하기 끝 ==========*/ /* 2019-09-28 수정 요청으로 파일업로드 수정함 */ .img-upload-area.type2 { text-align: left; } .img-upload-area.type2 .btn-small.type4 { float: none; width: 136px; display: block; } .img-upload-area.type2 .file-name { display: inline-block; min-width: 74px; font-size: 11px; color: #b6b6b6; margin-right: 8px; } .img-upload-area.type2 .file-delete-check { display: inline-block; vertical-align: middle; margin-top: 5px; font-size: 11px; color: #b6b6b6; } .img-upload-area.type2 .file-delete-check input[type="checkbox"] { margin-right: 8px; } /*평점*/ .score { float: right; } .score > ul { display: inline-block; width: 100%; height: auto; } .score > ul > li { width: 12px; height: 12px; display: block; float: left; background: url(/image/web/common/icon_star_n.png) center center no-repeat; background-size: contain; } .score > ul > li.on { background: url(/image/web/common/icon_star_s.png) center center no-repeat; background-size: contain; } .score > div .number { display: block; height: 32px; line-height: 32px; font-size: 20px; font-weight: 900; color: #35c5f0; margin: 0 0 6px; } .score > div .number:before { content: ''; width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin: -4px 0 0; background: url(/image/web/common/icon_star_p.png) center center no-repeat; background-size: contain; } .score > div .text { display: block; padding-left: 11px; height: 15px; line-height: 15px; text-align: center; font-size: 10px; color: #b6b6b6; } /*파일업로드*/ .file-upload { overflow: hidden; } .file-upload + .file-upload { margin: 8px 0 0; } .file-upload > div.block + div.block { margin: 8px 0 0; } .file-upload > div.block > * { vertical-align: middle; } .file-upload > div.block input[type='file']{ display: none; } .file-upload > div.block .btn-small { display: inline-block; width: 190px; height: 34px; text-align: center; font-size: 12px; font-weight: 500; color: #868686; cursor: pointer; margin-right: 6px; } .file-upload > div.block .btn-small:hover { border: solid 1px #e6e6e6; background-color: #f6f6f6; color: #767676; } .file-upload > div.name-chk { display: inline-block; width: 100%; height: auto; font-size: 12px; margin: 8px 0 0; } .file-upload > div.name-chk .filename { float: left; display: inline-block; width: 139px; height: 20px; padding-right: 8px; font-size: 12px; font-weight: 500; color: #b6b6b6; max-height: 20px; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; } .file-upload > div.name-chk input[type="checkbox"] { margin-right: 6px; } .file-upload > div.block { position:relative; } .file-upload > div.block > input { display:block!important; position:absolute; top:0; left:0; width:190px; height:34px; opacity:0; cursor:pointer; } .file-upload .btn-plus { width: 36px; height: 36px; border: solid 1px #d6d6d6; transition: all 0.5s; } .file-upload .btn-plus span { display: inline-block; width: 34px; height: 34px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_plus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .file-upload .btn-minus { width: 36px; height: 36px; border: solid 1px #d6d6d6; transition: all 0.5s; } .file-upload .btn-minus span { display: inline-block; width: 34px; height: 34px; margin: 0; vertical-align: middle; background: url(/image/web/common/icon_minus.png) center center no-repeat; background-size: contain; text-indent:-5000px; } .file-upload .btn-plus:hover { background: #f6f6f6; } .file-upload .btn-minus:hover { background: #f6f6f6; } /* datepicker */ .ui-datepicker{width:250px; background:#fafafa; border:1px solid #dcdce7; border-top:0} .ui-datepicker .ui-datepicker-header{position:relative; width:250px; margin-left:-1px; line-height:44px; background:#48a0fc} .ui-datepicker .ui-datepicker-header .ui-datepicker-title{text-align:center; font-size:16px; color:#fff; font-weight:800} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev{position:absolute; left:0; top:0; width:44px; height:44px; background:url(/images/common/ico_cal_prev.png) center no-repeat; text-indent:-9999em; cursor:pointer} .ui-datepicker .ui-datepicker-header .ui-datepicker-next{position:absolute; right:0; top:0; width:44px; height:44px; background:url(/images/common/ico_cal_next.png) center no-repeat; text-indent:-9999em; cursor:pointer} .ui-datepicker .ui-datepicker-calendar{width:210px; margin:10px auto} .ui-datepicker .ui-datepicker-calendar thead th{color:#8891a3} .ui-datepicker .ui-datepicker-calendar th, .ui-datepicker .ui-datepicker-calendar td{text-align:center; font-size:13px; color:#333; line-height:30px} .ui-datepicker .ui-datepicker-calendar td a{display:block; background:url(/images/common/ico_cal_cir.png) center no-repeat} .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{background:#1860ef; border-radius:100%; color:#fff} .rsl-search .rs-field.date button.ui-datepicker-trigger{margin-top:10px;width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;right:10px;}/*종합검색부분*/ .rc-search .rs-field.date button.ui-datepicker-trigger{margin-top:10px;width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;right:10px;}/*법원검색부분*/ .rsoz-search .rs-field.date button.ui-datepicker-trigger{margin-top:10px;width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;right:10px;}/*소재지검색부분*/ .rcar-page .rs-field.date button.ui-datepicker-trigger{margin-top:10px;width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;right:10px;}/*자동차검색부분*/ .rsl-search .wait-yejung-dates button.ui-datepicker-trigger{margin-top:10px;width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;right:10px;}/*예정검색부분*/ /*.rsl-search #calendar_add_end button.ui-datepicker-trigger{width:18px; height:20px; text-indent:-9999em; background:url(/landimg/calendar_icon.svg) no-repeat; outline:0;position:absolute;margin-left:-28px;margin-top: 10px;}*/ /*.w90{width:230px;padding:8px 14px 8px 106px;height:39px;}*/ .checkboxopt { border:1px solid #D0D5E2; color:#505050; border-radius: 8px; min-width:152px; min-height:20px; font-size:13px; font-weight:500; font-family: 'Pretendard Medium'; line-height:20px; text-align:center; line-height: 35px; -webkit-appearance: none; } input.searchlist_checkbox:checked + label {border:1px solid #4E7FF0; color: #4E7FF0;} .rs-expands input[type='checkbox']{-webkit-appearance: none;} .check_nor { display: inline-block; width: 20px; height: 20px; vertical-align: middle; -webkit-appearance: none; /*margin:-3px 0 0; */ padding: 0; cursor: pointer; border-radius: 5px; border: 1px solid #D0D5E2; background: #D0D5E2 url(/landimg/chk_icon1.svg) 1px 4px no-repeat; } .check_nor:checked { background: #4E7FF0 url(/landimg/chk_icon1.svg) 2px 5px no-repeat; /* background-size: contain; */ border: 0; /* padding: 8px; */ border-radius: 5px; } /* ===== common.css ===== */ .mv { min-width: 0; } .mv-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; width:1200px; } .thema-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; width:1200px; } .slide-inner { max-width: 1200px; margin: 0 auto; width:1200px; height:400px; position: relative; /* border:1px solid red;*/ } .slide-inner img{height:499px;} .mv-topnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .moslide-inner { max-width: 1200px; margin: 0 auto; width:1200px; height:100%; max-height:100%; position: relative; /* border:1px solid red;*/ } .moslide-inner img{height:100%;max-height:100%;} .mv-topnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ===== grid.css ===== */ /*--------------------------------------------- 기본 그리드 시스템--------------------------------------------------------- ▶ grid-wrap > grid > grid-item 구조 / d1 = division 1 (1분할) / cbine2 = combine2 grid-item2개를 합치다. ▶ grid-item에 padding 값을 줄수있음 p1, p2, p3, p4, p5 등등 ------------------------------------------------------------------------------------------------------------------------------*/ .grid-wrap { width: 1080px; height: auto; margin: 60px auto; } .grid-wrap > h1 { font-size: 20px; font-weight: 600; } .grid-wrap > h4 { font-size: 14px; margin: 20px 0; } /*그리드 기본*/ .grid { display: inline-block; width: 100%; height: auto; } .grid-item { overflow: hidden; position: relative; float: left; width: 100%; height: auto; min-height: 100px; box-sizing: border-box; } .p1 { padding: 1%!important; } .p2 { padding: 2%!important; } .p3 { padding: 3%!important; } .p4 { padding: 4%!important; } .p5 { padding: 5%!important; } .mt5 { margin-top: 5px!important; } .mt8 { margin-top: 8px!important; } .mt10 { margin-top: 10px!important; } .mt12 { margin-top: 12px!important; } .mt15 { margin-top: 15px!important; } .mt16 { margin-top: 16px!important; } .mt20 { margin-top: 20px!important; } .mt24 { margin-top: 24px!important; } .mt25 { margin-top: 25px!important; } .mt32 { margin-top: 32px!important; } .mt40 { margin-top: 40px!important; } .mt60 { margin-top: 60px!important; } /*그리드 1분할 (d1 안적어도 기본적으로는 100%)*/ .grid.d1 .grid-item { width: 100%; } /*그리드 2분할*/ .grid.d2 .grid-item { width: 50%; } /*그리드 3분할*/ .grid.d3 .grid-item { width: 33.3333%; } .grid.d3 .grid-item.cbine2 { width: 66.6666%; } /*그리드 4분할*/ .grid.d4 .grid-item { width: 25%; } .grid.d4 .grid-item.cbine2 { width: 50%; } .grid.d4 .grid-item.cbine3 { width: 75%; } /*해당 요소 비우기*/ .empty { display: none!important; } /*slick slider 기본옵션 수정*/ /*------------------------------------------------- 타이틀 시작 --------------------------------------------------------- ▶ grid-title > h4 > a / 추가클래스 : line(제목라인생성), list-more(더보기), search-type(검색결과페이지에만사용) ------------------------------------------------------------------------------------------------------------------------------*/ .grid-title { display: inline-block; width: 100%; height: auto; padding-bottom: 24px; } .grid-title h4 { display: block; float: left; font-size: 24px; font-weight: 500; line-height: 24px; } .grid-title a { display: none; } .grid-title.line { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6e6e6; } .grid-title.list-more a { display: block; float: right; line-height: 24px; color: #b6b6b6; font-size: 12px; text-decoration: underline; } .grid-title.list-more a:hover { color: #868686; } .grid-title.search-type { padding-bottom: 0; } .grid-title.line.search-type { padding-bottom: 12px; margin-bottom: 0; } .grid-filter { display: inline-block; width: 100%; height: auto; padding-bottom: 24px; } .grid-filter .list-type { float: right; display: inline-block; } .grid-filter .list-type .gallery { border: 1px solid #e6e6e6; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_n.png) center center no-repeat; background-size: 24px; transition: all 0.5s; } .grid-filter .list-type .gallery:hover { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_s.png) center center no-repeat; background-size: 24px; } .grid-filter .list-type .list { border: 1px solid #e6e6e6; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_n.png) center center no-repeat; background-size: 24px; transition: all 0.5s; } .grid-filter .list-type .list:hover { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_s.png) center center no-repeat; background-size: 24px; } .grid-filter .list-type .gallery.on { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_gallery_s.png) center center no-repeat; background-size: 24px; } .grid-filter .list-type .list.on { border: 1px solid #161616; width: 34px; height: 34px; padding: 5px; background: url(/image/web/common/icon_list_type_list_s.png) center center no-repeat; background-size: 24px; } /*셀렉트박스*/ .select { border: 1px solid #e6e6e6; height: 34px; padding: 4px 12px; display: block; width: 120px; height: 100%; position: relative; } .select .select-slider { width: 100%; cursor: pointer; display: inline-block; position: relative; background: transparent; } .select .select-slider span { font-size: 13px; color: #161616; } .select .select-slider i { position: absolute; top: 50%; margin-top:-10px; right:-4px; width: 20px; height: 20px; background: url(/image/web/common/icon_arrow_select_down.png) center center no-repeat; background-size: contain; } .select .select-slider.on i { background: url(/image/web/common/icon_arrow_select_up.png) center center no-repeat; background-size: contain; } .select #select-type-01 { display: none; padding: 0 16px; } .select .actual-option { position: absolute; top: calc(100% - 1px); left: 0; display: none; width: 100%; max-height: 120px; box-sizing: border-box; border: 1px solid #e6e6e6; font-size: 13px; overflow-y: scroll; background: #fff; z-index: 10; cursor: pointer; } .select .actual-option li { position: relative; float: left; width: 100%; clear: both; padding: 8px 16px; transition: all 0.5s; color: #868686; } .select .actual-option li:hover { color: #161616; background: #f6f6f6; } .select label { width: 100%; } .select label.on ~ .actual-option { display: block; } /*------------------------------------------------- 상품 타입 -------------------------------------------------------------- ▶ product > product-item > img - info - title - price 무료배송/배송료 표시는 .delivery태그에 .free 또는 .charged 를 넣어 구분할 수있다. ------------------------------------------------------------------------------------------------------------------------------*/ /*상품 1개(분할)*/ .grid .grid-item .product.d1 .product-item { width: 100%; } /*상품 2개(분할)*/ .grid .grid-item .product.d2 .product-item { width: 50%; } /*상품 3개(분할)*/ .grid .grid-item .product.d3 .product-item { width: 33.3333%; } .grid .grid-item .product.d3 .product-item.cbine2 { width: 66.6666%; } /*상품 4개(분할)*/ .grid .grid-item .product.d4 .product-item { width: 25%; } .grid .grid-item .product.d4 .product-item.cbine2 { width: 50%; } .grid .grid-item .product.d4 .product-item.cbine3 { width: 75%; } /*상품 5개(분할)*/ .grid .grid-item .product.d5 .product-item { width: 20%; } .grid .grid-item .product.d5 .product-item.cbine2 { width: 40%; } .grid .grid-item .product.d5 .product-item.cbine3 { width: 60%; } .grid .grid-item .product.d5 .product-item.cbine4 { width: 80%; } .grid .grid-item .product.d5 .product-item.p1 { padding: 1%; } .grid .grid-item .product.d5 .product-item.p2 { padding: 2%; } .grid .grid-item .product.d5 .product-item.p3 { padding: 3%; } .grid .grid-item .product.d5 .product-item.p4 { padding: 4%; } .grid .grid-item .product.d5 .product-item.p5 { padding: 5%; } /*상품 기본*/ .grid .grid-item .product { width: 100%; height: auto; display: inline-block; } .grid .grid-item .product .product-item { display: inline-block; width: 100%; height: auto; position: relative; float: left; } .grid .grid-item .product .product-item .img { display: block; width: 100%; height: 100%; } .grid .grid-item .product .product-item .img a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .grid .grid-item .product .product-item .img a img { transform: scale(1.0); transition: all 0.5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid .grid-item .product .product-item .img a:hover img { transform: scale(1.05); } .grid .grid-item .product .product-item .info { display: block; width: 100%; height: auto; position: relative; } .grid .grid-item .product .product-item .info .ect { display: block; width: 100%; height: auto; margin-top: 8px; } .grid .grid-item .product .product-item .info .ect ul { display: inline-block; width: 100%; height: auto; } .grid .grid-item .product .product-item .info .ect ul li.brand { float: left; display: block; font-size: 12px; line-height: 24px; color: #161616; font-weight: 500; } .grid .grid-item .product .product-item .info .ect ul li.like { float: right; display: block; width: 24px; height: 24px; } .grid .grid-item .product .product-item .info .ect ul li.like a { display: block; width: 100%; height: 100%; transition: all 0.5s; background: url(/image/web/common/icon_like_n.png) center center no-repeat; background-size: contain; text-indent:-9999px; transform: scale(1.0); } .grid .grid-item .product .product-item .info .ect ul li.like a:hover { transform: scale(1.08); background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .grid .grid-item .product .product-item .info .ect ul li.like a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; } .grid .grid-item .product .product-item .info .ect ul li.shop { float: right; width: auto; height: 24px; display: block; } .grid .grid-item .product .product-item .info .ect ul li.shop a { display: block; width: auto; height: 24px; } .grid .grid-item .product .product-item .info .ect ul li.shop a:after { content: ''; display: block; float: right; width: 24px; height: 24px; background: url(/image/web/common/icon_shop.png) center center no-repeat; background-size: contain; } .grid .grid-item .product .product-item .info .ect ul li.shop a span.name { float: left; display: block; font-size: 12px; color: #b6b6b6; line-height: 24px; margin-right: 2px; } .grid .grid-item .product .product-item .info .ect ul li.shop a:hover .name { color: #868686; } .grid .grid-item .product .product-item .info .title { display: block; width: 100%; height: auto; } .grid .grid-item .product .product-item .info .title a { display: block; font-size: 14px; color: #161616; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; } .grid .grid-item .product .product-item .info .title a:hover { text-decoration: underline; } .grid .grid-item .product .product-item .info .title p.detail { display: block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 95%; margin-top: 4px; } .grid .grid-item .product .product-item .info .price { display: block; width: 100%; height: auto; margin-top: 8px; } .grid .grid-item .product .product-item .info .price ul { display: inline-block; width: 100%; height: auto; } .grid .grid-item .product .product-item .info .price ul li { display: block; } .grid .grid-item .product .product-item .info .price ul li.discount { float: left; font-size: 18px; font-weight: 800; color: #e80032; font-family: 'Lato'; margin-right: 12px; } .grid .grid-item .product .product-item .info .price ul li.current-price { float: left; font-size: 18px; font-weight: 800; color: #161616; font-family: 'Lato'; } .grid .grid-item .product .product-item .info .price ul li.origin-price { float: left; font-size: 12px; color: #b6b6b6; font-family: 'Lato'; text-decoration: line-through; margin-left: 6px; margin-top: 5px; } .grid .grid-item .product .product-item .info .price ul li.delivery { float: right; display: block; } .grid .grid-item .product .product-item .info .price ul li.delivery span { display: none; } .grid .grid-item .product .product-item .info .price ul li.delivery .charged { display: inline-block; position: relative; color: #758baf; font-size: 10px; padding: 2px 6px 2px 22px; border: 1px solid #758baf; } .grid .grid-item .product .product-item .info .price ul li.delivery .charged:before { left: 2px; top: 50%; margin-top:-8px; position: absolute; content: ''; width: 16px; height: 16px; display: inline-block; margin-right: 4px; background: url(/image/web/common/icon_delivery.png) center center no-repeat; background-size: contain; } .grid .grid-item .product .product-item .info .price ul li.delivery .free { display: inline-block; position: relative; color: #758baf; font-size: 10px; padding: 2px 6px; border: 1px solid #758baf; } .grid .grid-item .product .product-item .info .addition { display: none; } /*------------------------------------------------- 상품 타입 A, B, C, D ------------------------------------------------------ ▶ product 태그에 type-a / type-b / type-c / type-d 클래스명을 넣어주면 된다. ex) product type-a ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .product.type-b .product-item .info .title p.detail { display: none; } .grid .grid-item .product.type-b .product-item .info .price ul li.discount { display: none; } .grid .grid-item .product.type-b .product-item .info .price ul li.origin-price { display: none; } .grid .grid-item .product.type-c .product-item .info .title p.detail { display: none; } .grid .grid-item .product.type-c .product-item .info .price ul li.discount { display: none; } .grid .grid-item .product.type-c .product-item .info .price ul li.origin-price { display: none; } .grid .grid-item .product.type-c .product-item .info .ect ul li.shop a span.name { display: none; } .grid .grid-item .product.type-d .product-item .info .title p.detail { display: none; } .grid .grid-item .product.type-d .product-item .info .price ul li.discount { display: none; } .grid .grid-item .product.type-d .product-item .info .price ul li.origin-price { display: none; } .grid .grid-item .product.type-d .product-item .info .ect ul li.shop a span.name { display: none; } .grid .grid-item .product.list { border-top: 1px solid #e6e6e6; } .grid .grid-item .product.list .product-item { padding: 16px 0; display: inline-block; width: 100%; height: auto; position: relative; border-bottom: 1px solid #e6e6e6; } .grid .grid-item .product.list .product-item .img { float: left; display: block; width: 20%; height: 100%; } .grid .grid-item .product.list .product-item .info { float: left; display: block; width: calc(80% - 16px); height: 100%; position: relative; margin-left: 16px; } .grid .grid-item .product.list .product-item .info .price { margin-top: 8px; display: block; width: 100%; height: auto; } .grid .grid-item .product.list .product-item .info .price ul li.delivery { margin-top: 8px; width: 100%; } .grid .grid-item .product.list .product-item .info .addition { position: absolute; right: 0; bottom: 2px; display: block; } .grid .grid-item .product.list .product-item .info .addition ul { display: inline-block; } .grid .grid-item .product.list .product-item .info .addition ul li { float: left; display: block; } .grid .grid-item .product.list .product-item .info .addition ul li span { float: left; font-size: 12px; color: #868686; margin-left: 8px; } .grid .grid-item .product.list .product-item .info .addition ul li.score span:before { margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_score.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.list .product-item .info .addition ul li.review span:before { margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_review.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.list .product-item .info .addition ul li.like span:before { margin-right: 2px; content: ''; display: block; float: left; width: 16px; height: 16px; background: url(/image/web/common/icon_list_like.png) center center no-repeat; background-size: contain; } /*product type별 min-width*/ .grid .grid-item .product.type-a .product-item { min-width: 240px; } .grid .grid-item .product.type-b .product-item { min-width: 200px; } .grid .grid-item .product.type-c .product-item { min-width: 160px; } .grid .grid-item .product.type-d.gallery .product-item { min-width: 160px; } .grid .grid-item .product.type-d.list .product-item { min-width: 600px; } /*------------------------------------------------------- 상품 슬라이드 ------------------------------------------------------ ▶ product 태그에 slider 태그 추가시 슬라이드 배너 생성 ▶ product 태그에 add-dot, add-pager, add-pager-hover 추가시 각각 하단에 슬라이드 닷, 슬라이드 페이저 생성 add-pager는 보임, add-pager-hover는 hover시만 보임 ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .product.slider .slider-pager { display: none; width: 100%; height: 44px; position: absolute; left: 0; top: 50%; margin-top:-22px; } .grid .grid-item .product.slider .slider-pager .btn-prev { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; left: 0px; width: 44px; height: 44px; display: block; opacity: 0; } .grid .grid-item .product.slider .slider-pager .btn-prev span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.slider .slider-pager .btn-next { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; right: 0px; width: 44px; height: 44px; display: block; transition: all 0.5s; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; opacity: 0; background-size: contain; } .grid .grid-item .product.slider .slider-pager .btn-next span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.slider:hover .slider-pager .btn-prev { opacity: 1; } .grid .grid-item .product.slider:hover .slider-pager .btn-next { opacity: 1; } .grid .grid-item .product.slider:hover .slider-pager .btn-prev:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.slider:hover .slider-pager .btn-next:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .product.slider .slick-dots { display: none!important; position: absolute; bottom: 16px; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .grid .grid-item .product.slider .slick-dots li { position: relative; transition: all 0.5s; display: inline-block; width: 10px; height: 10px; margin: 0 5px; padding: 0; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; } .grid .grid-item .product.slider .slick-dots li.slick-active { background: #e80032; } .grid .grid-item .product.slider .slick-dots li:hover { background: #e80032; } .grid .grid-item .product.slider .slick-dotted.slick-slider { margin-bottom: 0; } .grid .grid-item .product.slider.add-dot .slick-dots { display: block!important; } .grid .grid-item .product.slider.add-pager .slider-pager { display: block!important; } .grid .grid-item .product.slider.add-pager .slider-pager .btn-prev { opacity: 1; } .grid .grid-item .product.slider.add-pager .slider-pager .btn-next { opacity: 1; } .grid .grid-item .product.slider.add-pager-hover .slider-pager { display: block!important; } .grid .grid-item .product.slider.add-pager-hover .slider-pager .btn-prev { left:-20px; } .grid .grid-item .product.slider.add-pager-hover .slider-pager .btn-next { right:-20px; } .grid .grid-item .product.slider.add-pager-hover:hover .slider-pager .btn-prev { left: 0; } .grid .grid-item .product.slider.add-pager-hover:hover .slider-pager .btn-next { right: 0; } /*------------------------------------------------------- 기본 배너 ------------------------------------------------------ ▶ banner-item 태그에 img-type-a, img-type-b, img-type-c 각각 1: 1, 4: 3, 16: 9 비율의 이미지 생성 ▶ banner-item 태그에 img-contain, img-cover 사용시 각각 이미지 크기 조절됨 ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .banner { position: relative; width: 100%; height: auto; display: block; } .grid .grid-item .banner .banner-item { display: inline-block; width: 100%; height: auto; position: relative; } .grid .grid-item .banner .banner-item .img { display: block; width: 100%; height: 100%; } .grid .grid-item .banner .banner-item .img a { display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; transition: all 0.5s; overflow: hidden; overflow: hidden; } .grid .grid-item .banner .banner-item .img a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid .grid-item .banner .banner-item.img-type-a .img a { } .grid .grid-item .banner .banner-item.img-type-b .img a { padding-bottom: 75%; } .grid .grid-item .banner .banner-item.img-type-c .img a { padding-bottom: 56.25%} /*object-fit 태그는 ie에서 지원하지 않는 태그임.*/ .grid .grid-item .banner .banner-item.img-contain .img a img { object-fit: contain; } .grid .grid-item .banner .banner-item.img-cover .img a img { object-fit: cover; } /*------------------------------------------------------- 슬라이드 배너 ------------------------------------------------------ ▶ banner 태그에 slider 태그 추가시 슬라이드 배너 생성 ▶ grid-item 태그에 add-dot, add-pager, add-pager-hover 추가시 각각 하단에 슬라이드 닷, 슬라이드 페이저 생성 add-pager는 보임, add-pager-hover는 hover시만 보임 ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .banner.slider .slider-pager { display: none; width: 100%; height: 44px; position: absolute; left: 0; top: 50%; margin-top:-22px; } .grid .grid-item .banner.slider .slider-pager .btn-prev { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; left: 0px; width: 44px; height: 44px; display: block; opacity: 0; } .grid .grid-item .banner.slider .slider-pager .btn-prev span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .banner.slider .slider-pager .btn-next { z-index: 10; position: absolute; cursor: pointer; top: 50%; margin-top:-22px; right: 0px; width: 44px; height: 44px; display: block; transition: all 0.5s; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; opacity: 0; background-size: contain; } .grid .grid-item .banner.slider .slider-pager .btn-next span { width: 44px; height: 44px; position: absolute; display: block; top: 0; left: 0; background: url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .banner.slider:hover .slider-pager .btn-prev { opacity: 1; } .grid .grid-item .banner.slider:hover .slider-pager .btn-next { opacity: 1; } .grid .grid-item .banner.slider:hover .slider-pager .btn-prev:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_left_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .banner.slider:hover .slider-pager .btn-next:hover { background: rgba(0,0,0,0.05) url(/image/web/common/icon_arrow_right_large.png) center center no-repeat; background-size: contain; } .grid .grid-item .banner.slider .slick-dots { display: none!important; position: absolute; bottom: 16px; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .grid .grid-item .banner.slider .slick-dots li { position: relative; transition: all 0.5s; display: inline-block; width: 10px; height: 10px; margin: 0 5px; padding: 0; cursor: pointer; background: rgba(0,0,0,0.2); border-radius: 50%; } .grid .grid-item .banner.slider .slick-dots li.slick-active { background: #e80032; } .grid .grid-item .banner.slider .slick-dots li:hover { background: #e80032; } .grid .grid-item .banner.slider .slick-dotted.slick-slider { margin-bottom: 0; } .grid .grid-item .banner.slider.add-dot .slick-dots { display: block!important; } .grid .grid-item .banner.slider.add-pager .slider-pager { display: block!important; } .grid .grid-item .banner.slider.add-pager .slider-pager .btn-prev { opacity: 1; } .grid .grid-item .banner.slider.add-pager .slider-pager .btn-next { opacity: 1; } .grid .grid-item .banner.slider.add-pager-hover .slider-pager { display: block!important; } .grid .grid-item .banner.slider.add-pager-hover .slider-pager .btn-prev { left:-20px; } .grid .grid-item .banner.slider.add-pager-hover .slider-pager .btn-next { right:-20px; } .grid .grid-item .banner.slider.add-pager-hover:hover .slider-pager .btn-prev { left: 0; } .grid .grid-item .banner.slider.add-pager-hover:hover .slider-pager .btn-next { right: 0; } /*------------------------------------------------------- 최신 게시물 ------------------------------------------------------ ▶ latest-board > ul > li > a 최신 게시물의 경우 grid-title의 font-size가 작아보여야하는경우가 많기 때문에 grid-title에 latest 태그를 넣어 font-size를 줄인다. ▶ latest-board에 bullet-type-a, bullet-type-b, bullet-type-c 를 넣어 해당 list 항목에 bullet을 추가할수있다. ------------------------------------------------------------------------------------------------------------------------------*/ .grid-title.latest { padding-bottom: 12px; } .grid-title.latest h4 { font-size: 16px; font-weight: 500; line-height: 16px; } .grid .grid-item .latest-board { width: 100%; height: auto; display: block; } .grid .grid-item .latest-board ul { width: 100%; display: inline-block; } .grid .grid-item .latest-board ul li { width: 100%; display: inline-block; text-align: left; } .grid .grid-item .latest-board ul li a { width: 95%; display: inline-block; font-size: 13px; color: #868686; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .grid .grid-item .latest-board ul li a:hover { text-decoration: underline; } .grid .grid-item .latest-board.bullet-type-a ul li a:before { content: ''; display: block; float: left; width: 3px; height: 3px; background: #e80032; margin-right: 12px; margin-top: 10px; } .grid .grid-item .latest-board.bullet-type-b ul li a:before { content: ''; display: block; float: left; width: 3px; height: 3px; background: #e80032; border-radius: 50%; margin-right: 12px; margin-top: 10px; } .grid .grid-item .latest-board.bullet-type-c ul li a:before { content: '-'; display: inline-block; margin-right: 8px; color: b6b6b6; font-size: 13px; } /*------------------------------------------------------- 검색 및 검색결과 ------------------------------------------------------ ▶ search > search-result , 검색결과의 경우 상단 title의 padding-bottom을 지워줘야하므로 title에 search-type을 붙여 날려준다. ▶ search > search-again ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .search { width: 100%; height: auto; display: block; } .grid .grid-item .search .search-result { width: 100%; height: auto; padding: 40px 0; display: block; text-align: center; } .grid .grid-item .search .search-result p { display: inline-block; text-align: center; font-size: 13px; color: #868686; font-weight: 400; } .grid .grid-item .search .search-result p strong { color: #161616; font-weight: 500; margin-right: 2px; } .grid .grid-item .search .search-again { width: 100%; height: auto; display: block; height: 110px; } .grid .grid-item .search .search-again form { width: 100%; height: 100%; padding: 0 24px; background: #f9f9f9; } .grid .grid-item .search .search-again form ul { width: 100%; height: auto; display: inline-block; } .grid .grid-item .search .search-again form ul li { display: inline-block; width: 100%; height: auto; font-size: 12px; color: #868686; } .grid .grid-item .search .search-again form ul li label { display: block; font-size: 12px; color: #161616; margin: 24px 0 5px; } .grid .grid-item .search .search-again form .align-left { width: 45%; float: left; margin-right: 10%; } .grid .grid-item .search .search-again form .align-left input { float: left; width: 48%; height: 36px; } .grid .grid-item .search .search-again form .align-left span { display: block; width: 4%; float: left; text-align: center; line-height: 34px; } .grid .grid-item .search .search-again form .align-right { width: 45%; float: right; } .grid .grid-item .search .search-again form .align-right input { width: 70%; float: left; } .grid .grid-item .search .search-again form .align-right .btn-small { float: left; width: calc(30% - 5px); margin-left: 5px; } /*------------------------------------------------------- 하위 카테고리/브랜드 ------------------------------------------------------ ▶ category / 카테고리의 li 태그의 width는 기본적으로 5분할으로 되어있으며 d5, d6, d8 까지 추가태그로 설정되어있음. ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .category { width: 100%; height: auto; display: block; border: 1px solid #e6e6e6; padding: 24px; font-size: 12px; } .grid .grid-item .category p.category-title { font-size: 12px; color: #161616; margin-bottom: 16px; } .grid .grid-item .category ul { width: 100%; height: auto; display: inline-block; } .grid .grid-item .category ul li { float: left; width: 20%; } .grid .grid-item .category ul li a { width: 100%; padding: 4px 8px; height: auto; transition: all 0.5s; border-radius: 4px; display: inline-block; font-size: 12px; color: #868686; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .grid .grid-item .category ul li a:hover { background: #f9f9f9; color: #161616; } .grid .grid-item .category.d5 ul li { } .grid .grid-item .category.d6 ul li { width: 16.6666%} .grid .grid-item .category.d8 ul li { width: 12.5%; } /*------------------------------------------------------- 실시간 인기검색어 ------------------------------------------------------ ▶ ------------------------------------------------------------------------------------------------------------------------------*/ .grid .grid-item .keyword { display: inline-block; width: 100%; height: auto; border: 1px solid #e6e6e6; padding: 24px; box-sizing: border-box; } .grid .grid-item .keyword p.keyword-title { font-size: 12px; color: #161616; margin-bottom: 16px; } .grid .grid-item .keyword ul { width: 100%; height: auto; } .grid .grid-item .keyword ul li { width: 100%; display: inline-block; height: auto; margin-bottom: 8px; } .grid .grid-item .keyword ul li a { width: 100%; display: block; height: auto; } .grid .grid-item .keyword ul li a em { display: block; width: 16px; height: 16px; text-align: center; line-height: 16px; float: left; font-size: 10px; font-family: 'Lato'; font-weight: 700; color: #fff; background: #d6d6d6; } .grid .grid-item .keyword ul li.on a em { background: #e80032; } .grid .grid-item .keyword ul li a span { display: block; float: left; font-size: 12px; color: #868686; margin-left: 12px; line-height: 16px; width: 75%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden} .grid .grid-item .keyword ul li a span:hover { text-decoration: underline; } .grid .grid-item .keyword ul li.on a span { color: #161616; font-weight: 500; } .grid .grid-item .keyword ul li a strong { display: block; float: right; font-size: 12px; font-family: 'Lato'; font-weight: 700; color: #868686; } .grid .grid-item .keyword ul li a strong.keyword-up { color: #e80032; } .grid .grid-item .keyword ul li a strong.keyword-up:before { width: 10px; height: 10px; content: ''; display: block; float: left; background: url(/image/web/common/icon_arrow_keyword_up.png) center center no-repeat; background-size: contain; margin: 3px 3px 0 0; } .grid .grid-item .keyword ul li a strong.keyword-down { color: #b6b6b6; } .grid .grid-item .keyword ul li a strong.keyword-down:before { width: 10px; height: 10px; content: ''; display: block; float: left; background: url(/image/web/common/icon_arrow_keyword_down.png) center center no-repeat; background-size: contain; margin: 3px 3px 0 0; } /* ===== reset.css ===== */ @charset 'utf-8'; * { box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color: #111; font-weight: 400; letter-spacing:-1.2px; font-family: 'Pretendard Variable-Light',"Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; } body { font-family: 'Pretendard Variable-Light',"Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; background: #ffffff; overflow-x: hidden; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav { display: block; } /*img { display: block; max-width: 100%; height: auto; }*/ a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } body { line-height: 1.5; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input, textarea, button { border: none; padding: 0; border-radius: 0; vertical-align: middle; } a { text-decoration: none; cursor: pointer; } a: active, a:hover, a:focus { text-decoration: none } html { box-sizing: border-box; } button { cursor: pointer; } *, *::before, *::after { box-sizing: inherit; } /* button,input[type='text'],input[type='password'],input[type='tel'],input[type='num'],input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] { -webkit-appearance: none; border-radius: 8px; } */ input[type='text'],input[type='password'],input[type='tel'],input[type='num'],input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] { -webkit-appearance: none; border-radius: 8px; } input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none } input[type=text]::-ms-clear { display: none; } textarea { resize: none; } button { background: transparent; } input[type='text']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='password']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='num']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='tel']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='button']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='submit']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='reset']::placeholder { color: #111; letter-spacing:-0.5px; } input[type='file']::placeholder { color: #111; letter-spacing:-0.5px; } input:focus { outline: none!important; } *:focus { outline: none!important; } /* 스크롤 커스텀 */ /* ::-webkit-scrollbar { width: 6px; height: 100px; } ::-webkit-scrollbar-track { background: #F6F5F2; } ::-webkit-scrollbar-thumb { background: #D8D7D2; } ::-webkit-scrollbar-thumb:hover { background: #E1CFAB; } */ /* ===== header_style.css ===== */ .web-main .notice_alert { display: flex; width: 1200px; height: 44px; position: relative; align-items: center; justify-content: space-between; /*padding: 0px 10px;*/ /* background-color: var(--variable-collection-sub-gray-25);*/ } .web-main .notice_alert .group { position: relative; width: 18.01px; height: 16.02px; } .web-main .notice_alert .vector { position: absolute; top: 0; left: -1px; width: 19px; height: 17px; } .web-main .notice_alert .vector-stroke { position: absolute; width: 33.02%; height: 62.42%; top: 18.79%; left: 33.09%; } .web-main .notice_alert .alert_div { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; flex: 1; flex-grow: 1; } .web-main .notice_alert .closeimg { position: relative; width: 13.5px; height: 13.5px; margin-right: -0.75px; margin-left: -0.75px; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .notice_alert .alert_txt { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b3-13-med-font-family); font-weight: var(--web-body-b3-13-med-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b3-13-med-font-size); text-align: center; letter-spacing: var(--web-body-b3-13-med-letter-spacing); line-height: var(--web-body-b3-13-med-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-med-font-style); } .web-main .top_logo_warp { display: flex; width: 1200px; height: 80px; position: relative; align-items: center; justify-content: space-between; /*padding: 20px 360px;*/ } .web-main .top_logo { position: relative; width: 224px; height: 32px; aspect-ratio: 6.98; object-fit: cover; } .web-main .top_logo img { width: 100%; height: 100%; } .web-main .top_search { display: inline-flex; align-items: flex-end; gap: 12px; position: relative; flex: 0 0 auto; } .web-main .top_search .serch_left { display: inline-flex; align-items: center; gap: 4px; padding: 2px; position: relative; flex: 0 0 auto; background-color: var(--variable-collection-sub-gray-25); border-radius: 50px; } .web-main .top_search .button_on { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 8px; position: relative; background-color: var(--variable-collection-primary-blue-500); border-radius: 100px; border: none; cursor: pointer; } .web-main .top_search .button_on .txtlabel { position: relative; width: fit-content; margin-top: -3.00px; margin-bottom: -1.00px; margin-left: -3.00px; margin-right: -3.00px; font-family: var(--web-body-b3-13-sbold-font-family); font-weight: var(--web-body-b3-13-sbold-font-weight); color: var(--variable-collection-text-white); font-size: var(--web-body-b3-13-sbold-font-size); letter-spacing: var(--web-body-b3-13-sbold-letter-spacing); line-height: var(--web-body-b3-13-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-sbold-font-style); } .web-main .top_search .button_off { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 8px; position: relative; background-color: var(--variable-collection-sub-gray-25); border-radius: 100px; border: none; cursor: pointer; } .web-main .top_search .txtlabeloff { position: relative; width: fit-content; margin-top: -3.00px; margin-bottom: -1.00px; margin-left: -3.00px; margin-right: -3.00px; font-family: var(--web-body-b3-13-sbold-font-family); font-weight: var(--web-body-b3-13-sbold-font-weight); color: var(--variable-collection-text-gray-200); font-size: var(--web-body-b3-13-sbold-font-size); letter-spacing: var(--web-body-b3-13-sbold-letter-spacing); line-height: var(--web-body-b3-13-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-sbold-font-style); } .web-main .top_search .search_right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 4px; position: relative; flex: 0 0 auto; border-bottom-width: 2px; border-bottom-style: solid; border-color: var(--variable-collection-primary-blue-500); } .web-main .top_search .selectbox { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; } .web-main .top_search .opt { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b1-16-reg-font-family); font-weight: var(--web-body-b1-16-reg-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b1-16-reg-font-size); letter-spacing: var(--web-body-b1-16-reg-letter-spacing); line-height: var(--web-body-b1-16-reg-line-height); white-space: nowrap; font-style: var(--web-body-b1-16-reg-font-style); } .web-main .top_search .selectbox .optbtn { width: 16px; height: 16px; position: relative; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .top_search .selectbox img { position: absolute; width: 50.00%; height: 25.00%; top: 34.38%; left: 21.88%; } .web-main .top_search .search_right .line { position: relative; width: 1px; height: 16px; object-fit: cover; } .web-main .top_search .search_right .inputbox_warp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; } .web-main .top_search .search_right .inputbox_warp .txtlabel { position: relative; width: 29px; margin-top: -1.00px; font-family: var(--web-body-b1-16-med-font-family); font-weight: var(--web-body-b1-16-med-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b1-16-med-font-size); letter-spacing: var(--web-body-b1-16-med-letter-spacing); line-height: var(--web-body-b1-16-med-line-height); font-style: var(--web-body-b1-16-med-font-style); } .web-main .top_search .search_right .inputbox_warp .inputbox { width: 236px; color: var(--variable-collection-text-gray-200); font-size: var(--web-body-b1-16-med-font-size); letter-spacing: var(--web-body-b1-16-med-letter-spacing); line-height: var(--web-body-b1-16-med-line-height); position: relative; margin-top: -1.00px; font-family: var(--web-body-b1-16-med-font-family); font-weight: var(--web-body-b1-16-med-font-weight); font-style: var(--web-body-b1-16-med-font-style); border: none; background: transparent; outline: none; } .web-main .top_search .search_right .inputbox_warp .inputbox::placeholder { color: var(--variable-collection-text-gray-200); } .web-main .top_search .search_right .btn { position: relative; width: 24px; height: 24px; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .top_search .search_right .btn .btnimg { position: absolute; width: 66.55%; height: 66.67%; top: 13.54%; left: 13.54%; } .web-main .top_logo_warp .memberinfo { display: flex; width: 106px; align-items: center; justify-content: flex-end; gap: 12px; position: relative; } .web-main .top_logo_warp .memberinfo .txtbtn1 { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b3-13-reg-font-family); font-weight: var(--web-body-b3-13-reg-font-weight); color: var(--variable-collection-text-gray-500); font-size: var(--web-body-b3-13-reg-font-size); letter-spacing: var(--web-body-b3-13-reg-letter-spacing); line-height: var(--web-body-b3-13-reg-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-reg-font-style); text-decoration: none; } .web-main .line-2 { width: 1px; height: 12px; position: relative; object-fit: cover; line-height:10px; } .web-main .navbar { display: flex; width: 1200px; height: 84px; position: relative; align-items: center; justify-content: space-between; /*padding: 20px 360px;*/ } .web-main .navbar .navbtn { display: flex; flex-direction: column; width: 31px; height: 26px; align-items: center; justify-content: center; padding: 4px; position: relative; aspect-ratio: 1.2; background: transparent; border: none; cursor: pointer; } .web-main .navbar .navbtn .btnimg { position: relative; align-self: stretch; width: 100%; aspect-ratio: 1.32; } .web-main .navbar .navtxtbtn { position: relative; width: fit-content; font-family: var(--web-body-b0-18-sbold-font-family); font-weight: var(--web-body-b0-18-sbold-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b0-18-sbold-font-size); letter-spacing: var(--web-body-b0-18-sbold-letter-spacing); line-height: var(--web-body-b0-18-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b0-18-sbold-font-style); text-decoration: none; } .web-main .navbar .mylist_warp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 20px; position: relative; flex: 0 0 auto; } .web-main .navbar .mylist_warp a.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; text-decoration: none; } .web-main .navbar .mylist_warp .vector-wrap { display: flex; flex-direction: column; width: 24px; height: 24px; align-items: center; justify-content: center; gap: 10px; position: relative; } .web-main .navbar .mylist_warp .vector-wrap .imgs { position: relative; width: 20.01px; height: 18.01px; } .web-main .navbar .mylist_warp .txtspan { position: relative; width: fit-content; font-family: var(--web-body-b3-13-reg-font-family); font-weight: var(--web-body-b3-13-reg-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b3-13-reg-font-size); letter-spacing: var(--web-body-b3-13-reg-letter-spacing); line-height: var(--web-body-b3-13-reg-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-reg-font-style); } .web-main .mylist_warp a.btn .div-3 { position: relative; width: 24px; height: 24px; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .mylist_warp a.btn .div-3 .group-2 { position: relative; width: 79.17%; height: 79.17%; top: 12.50%; left: 12.50%; } .web-main .mylist_warp a.btn .div-3 .group-2 .vector-5 { position: absolute; width: 94.70%; height: 94.71%; top: -5.26%; left: -5.26%; } .web-main .mylist_warp a.btn .div-3 .group-2 .vector-6 { position: absolute; width: 52.63%; height: 78.95%; top: 15.79%; left: 42.11%; }======= .web-main .notice_alert { display: flex; width: 1200px; height: 44px; position: relative; align-items: center; justify-content: space-between; /*padding: 0px 10px;*/ /* background-color: var(--variable-collection-sub-gray-25);*/ } .web-main .notice_alert .group { position: relative; width: 18.01px; height: 16.02px; } .web-main .notice_alert .vector { position: absolute; top: 0; left: -1px; width: 19px; height: 17px; } .web-main .notice_alert .vector-stroke { position: absolute; width: 33.02%; height: 62.42%; top: 18.79%; left: 33.09%; } .web-main .notice_alert .alert_div { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; flex: 1; flex-grow: 1; } .web-main .notice_alert .closeimg { position: relative; width: 13.5px; height: 13.5px; margin-right: -0.75px; margin-left: -0.75px; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .notice_alert .alert_txt { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b3-13-med-font-family); font-weight: var(--web-body-b3-13-med-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b3-13-med-font-size); text-align: center; letter-spacing: var(--web-body-b3-13-med-letter-spacing); line-height: var(--web-body-b3-13-med-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-med-font-style); } .web-main .top_logo_warp { display: flex; width: 1200px; height: 80px; position: relative; align-items: center; justify-content: space-between; /*padding: 20px 360px;*/ } .web-main .top_logo { position: relative; width: 224px; height: 32px; aspect-ratio: 6.98; object-fit: cover; } .web-main .top_logo img { width: 100%; height: 100%; } .web-main .top_search { display: inline-flex; align-items: flex-end; gap: 12px; position: relative; flex: 0 0 auto; } .web-main .top_search .serch_left { display: inline-flex; align-items: center; gap: 4px; padding: 2px; position: relative; flex: 0 0 auto; background-color: var(--variable-collection-sub-gray-25); border-radius: 50px; } .web-main .top_search .button_on { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 8px; position: relative; background-color: var(--variable-collection-primary-blue-500); border-radius: 100px; border: none; cursor: pointer; } .web-main .top_search .button_on .txtlabel { position: relative; width: fit-content; margin-top: -3.00px; margin-bottom: -1.00px; margin-left: -3.00px; margin-right: -3.00px; font-family: var(--web-body-b3-13-sbold-font-family); font-weight: var(--web-body-b3-13-sbold-font-weight); color: var(--variable-collection-text-white); font-size: var(--web-body-b3-13-sbold-font-size); letter-spacing: var(--web-body-b3-13-sbold-letter-spacing); line-height: var(--web-body-b3-13-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-sbold-font-style); } .web-main .top_search .button_off { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 8px; position: relative; background-color: var(--variable-collection-sub-gray-25); border-radius: 100px; border: none; cursor: pointer; } .web-main .top_search .txtlabeloff { position: relative; width: fit-content; margin-top: -3.00px; margin-bottom: -1.00px; margin-left: -3.00px; margin-right: -3.00px; font-family: var(--web-body-b3-13-sbold-font-family); font-weight: var(--web-body-b3-13-sbold-font-weight); color: var(--variable-collection-text-gray-200); font-size: var(--web-body-b3-13-sbold-font-size); letter-spacing: var(--web-body-b3-13-sbold-letter-spacing); line-height: var(--web-body-b3-13-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-sbold-font-style); } .web-main .top_search .search_right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 4px; position: relative; flex: 0 0 auto; border-bottom-width: 2px; border-bottom-style: solid; border-color: var(--variable-collection-primary-blue-500); } .web-main .top_search .selectbox { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; } .web-main .top_search .opt { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b1-16-reg-font-family); font-weight: var(--web-body-b1-16-reg-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b1-16-reg-font-size); letter-spacing: var(--web-body-b1-16-reg-letter-spacing); line-height: var(--web-body-b1-16-reg-line-height); white-space: nowrap; font-style: var(--web-body-b1-16-reg-font-style); } .web-main .top_search .selectbox .optbtn { width: 16px; height: 16px; position: relative; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .top_search .selectbox img { position: absolute; width: 50.00%; height: 25.00%; top: 34.38%; left: 21.88%; } .web-main .top_search .search_right .line { position: relative; width: 1px; height: 16px; object-fit: cover; } .web-main .top_search .search_right .inputbox_warp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; flex: 0 0 auto; } .web-main .top_search .search_right .inputbox_warp .txtlabel { position: relative; width: 29px; margin-top: -1.00px; font-family: var(--web-body-b1-16-med-font-family); font-weight: var(--web-body-b1-16-med-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b1-16-med-font-size); letter-spacing: var(--web-body-b1-16-med-letter-spacing); line-height: var(--web-body-b1-16-med-line-height); font-style: var(--web-body-b1-16-med-font-style); } .web-main .top_search .search_right .inputbox_warp .inputbox { width: 236px; color: var(--variable-collection-text-gray-200); font-size: var(--web-body-b1-16-med-font-size); letter-spacing: var(--web-body-b1-16-med-letter-spacing); line-height: var(--web-body-b1-16-med-line-height); position: relative; margin-top: -1.00px; font-family: var(--web-body-b1-16-med-font-family); font-weight: var(--web-body-b1-16-med-font-weight); font-style: var(--web-body-b1-16-med-font-style); border: none; background: transparent; outline: none; } .web-main .top_search .search_right .inputbox_warp .inputbox::placeholder { color: var(--variable-collection-text-gray-200); } .web-main .top_search .search_right .btn { position: relative; width: 24px; height: 24px; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .top_search .search_right .btn .btnimg { position: absolute; width: 66.55%; height: 66.67%; top: 13.54%; left: 13.54%; } .web-main .top_logo_warp .memberinfo { display: flex; width: 106px; align-items: center; justify-content: flex-end; gap: 12px; position: relative; } .web-main .top_logo_warp .memberinfo .txtbtn1 { position: relative; width: fit-content; margin-top: -1.00px; font-family: var(--web-body-b3-13-reg-font-family); font-weight: var(--web-body-b3-13-reg-font-weight); color: var(--variable-collection-text-gray-500); font-size: var(--web-body-b3-13-reg-font-size); letter-spacing: var(--web-body-b3-13-reg-letter-spacing); line-height: var(--web-body-b3-13-reg-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-reg-font-style); text-decoration: none; } .web-main .line-2 { width: 1px; height: 12px; position: relative; object-fit: cover; line-height:10px; } .web-main .navbar { display: flex; width: 1200px; height: 84px; position: relative; align-items: center; justify-content: space-between; /*padding: 20px 360px;*/ } .web-main .navbar .navbtn { display: flex; flex-direction: column; width: 31px; height: 26px; align-items: center; justify-content: center; padding: 4px; position: relative; aspect-ratio: 1.2; background: transparent; border: none; cursor: pointer; } .web-main .navbar .navbtn .btnimg { position: relative; align-self: stretch; width: 100%; aspect-ratio: 1.32; } .web-main .navbar .navtxtbtn { position: relative; width: fit-content; font-family: var(--web-body-b0-18-sbold-font-family); font-weight: var(--web-body-b0-18-sbold-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b0-18-sbold-font-size); letter-spacing: var(--web-body-b0-18-sbold-letter-spacing); line-height: var(--web-body-b0-18-sbold-line-height); white-space: nowrap; font-style: var(--web-body-b0-18-sbold-font-style); text-decoration: none; } .web-main .navbar .menu_dropdown, .web-main .navbar .auction_search_dropdown { position: relative; display: inline-flex; align-items: center; } .web-main .navbar .menu_dropdown .menu_submenu, .web-main .navbar .auction_search_dropdown .auction_submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px 12px; background: var(--variable-collection-bg-white); border: 1px solid var(--variable-collection-border-gray-100); z-index: 50; } .web-main .navbar .menu_dropdown .menu_submenu a, .web-main .navbar .auction_search_dropdown .auction_submenu a { display: block; padding: 4px 0; color: var(--variable-collection-text-black); font-family: var(--web-body-b3-13-reg-font-family); font-weight: var(--web-body-b3-13-reg-font-weight); font-size: var(--web-body-b3-13-reg-font-size); letter-spacing: var(--web-body-b3-13-reg-letter-spacing); line-height: var(--web-body-b3-13-reg-line-height); white-space: nowrap; text-decoration: none; } .web-main .navbar .menu_dropdown .menu_submenu a:hover, .web-main .navbar .auction_search_dropdown .auction_submenu a:hover { color: var(--variable-collection-point-blue-500); } .web-main .navbar .menu_dropdown:hover .menu_submenu, .web-main .navbar .auction_search_dropdown:hover .auction_submenu { display: block; } .web-main .navbar .mylist_warp { display: inline-flex; align-items: center; justify-content: flex-end; gap: 20px; position: relative; flex: 0 0 auto; } .web-main .navbar .mylist_warp a.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; text-decoration: none; } .web-main .navbar .mylist_warp .vector-wrap { display: flex; flex-direction: column; width: 24px; height: 24px; align-items: center; justify-content: center; gap: 10px; position: relative; } .web-main .navbar .mylist_warp .vector-wrap .imgs { position: relative; width: 20.01px; height: 18.01px; } .web-main .navbar .mylist_warp .txtspan { position: relative; width: fit-content; font-family: var(--web-body-b3-13-reg-font-family); font-weight: var(--web-body-b3-13-reg-font-weight); color: var(--variable-collection-text-black); font-size: var(--web-body-b3-13-reg-font-size); letter-spacing: var(--web-body-b3-13-reg-letter-spacing); line-height: var(--web-body-b3-13-reg-line-height); white-space: nowrap; font-style: var(--web-body-b3-13-reg-font-style); } .web-main .mylist_warp a.btn .div-3 { position: relative; width: 24px; height: 24px; aspect-ratio: 1; background: transparent; border: none; padding: 0; cursor: pointer; } .web-main .mylist_warp a.btn .div-3 .group-2 { position: relative; width: 79.17%; height: 79.17%; top: 12.50%; left: 12.50%; } .web-main .mylist_warp a.btn .div-3 .group-2 .vector-5 { position: absolute; width: 94.70%; height: 94.71%; top: -5.26%; left: -5.26%; } .web-main .mylist_warp a.btn .div-3 .group-2 .vector-6 { position: absolute; width: 52.63%; height: 78.95%; top: 15.79%; left: 42.11%; } /* ===== footer_style.css ===== */ /* ===================== 12. 푸터 Frame 1348 ===================== */ .mv-footer { background: #f1f3f8; padding: 60px 0 40px; } .mv-footer__inner { display: grid; grid-template-columns: 194px 904px; column-gap: 103px; align-items: center; } .mv-footer__logo { object-fit: contain; flex-shrink: 0; width: 194px; height: 28px; align-self: center; } .mv-footer__logo--mo { display: none; } .mv-footer__content { display: grid; grid-template-columns: 577px 224px; gap: 103px; align-items: start; } .mv-footer__left { min-width: 0; } .mv-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 20px; } .mv-footer__nav a, .mv-footer__nav span { color: #505050; font-size: 15px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.6px; } .mv-footer__nav a + a::before { content: "|"; margin: 0 20px; color: #505050; } .mv-footer__info, .mv-footer__notice { color: #505050; } .mv-footer__info { margin-bottom: 12px; } .mv-footer__info p, .mv-footer__notice p { margin: 0; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: -0.6px; } .mv-footer__info span { margin: 0 20px; } .mv-footer__right { display: flex; align-items: stretch; min-height: 154px; } .mv-footer__divider { width: 1px; height: 154px; margin-right: 40px; background: #505050; } .mv-footer__support { min-width: 184px; padding-top: 2px; } .mv-footer__support-label { margin: 0 0 0; color: #111; font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: -0.72px; } .mv-footer__support-phone { margin: 0 0 14px; color: #111; font-size: 38px; font-weight: 600; line-height: 53.2px; letter-spacing: -1.52px; } .mv-footer__support-time p { margin: 0; color: #111; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.64px; } /* ===== top_head.css ===== */ /* ===================== 1. 상단 바 Frame 1176 ===================== */ .mv-topbar { height: 44px; background: #f1f3f8; display: flex; align-items: center; } .mv-topbar .mv-inner { display: flex; align-items: center; justify-content: center; } .mv-topbar__notice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 20px; } .mv-topbar__icon { width: 18px; height: 16px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M3.5 9.5 8 1.5l4.5 8M6 8.5h6M7.2 11.5h3.6M8 14.5h2' stroke='%234e7ff0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 18px 16px; } .mv-topbar__text { margin: 0; font-size: 13px; line-height: 19.5px; font-weight: 500; letter-spacing: -0.52px; color: #111; text-align: center; } /* ===================== 2. 헤더 Frame 1192 / 1385 ===================== */ .mv-header { /*height: 42px;*/ border-bottom: 1px solid #e8eaed; display: flex; align-items: center; padding:20px 0; } .mv-header__inner { display: flex; align-items: center; gap: 135px; width: 100%; } .mv-logo { flex-shrink: 0; } .mv-logo__img { display: block; object-fit: contain; } .mv-logo__img--mo { display: none; } .mv-header-search { display: flex; align-items: center; flex: 1; max-width: 538px; height: 40px; gap: 8px; } .mv-header-search__pill { display: flex; align-items: center; gap: 4px; width: 108px; height: 36px; padding: 2px; border-radius: 50px; background: #f1f3f8; flex-shrink: 0; } .mv-header-search__tab { width: 32px; height: 32px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; color: #c4c4c4; font-size: 13px; font-weight: 600; line-height: 19.5px; letter-spacing: -0.52px; } .mv-header-search__pill:hover {cursor:pointer;} .mv-header-search__select:hover{cursor:pointer;} .mv-header-search__tab.active { background: #4e7ff0; color: #fff; } /* .w100 { width: 78px; resize: none; font-size: 13px; margin: 0 2px 0 0; } */ .mv-header-search__input-wrap select{resize:none; height:24px; font-size:16px;font-family:"Pretendard Variable-Regular";} .mv-header-search__input-wrap input{resize:none; height:24px; font-size:16px;font-family:"Pretendard Variable-Regular"; min-width:200px;} .mv-header-search__input-wrap input::placeholder{font-size:16px; margin-top:0;color:#C4C4C4;font-weight:500;text-align:left;padding-left:10px;} .mv-header-search__input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 4px 0 4px; border-bottom: 2px solid #4e7ff0; background: #fff; } .mv-header-search__select { width: 78px; display: flex; align-items: center; gap: 8px; color: #111; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.64px; } .mv-header-search__chev { width: 16px; height: 16px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 16px 16px; } .mv-header-search__divider { width: 1px; height: 16px; background: #999; } .mv-header-search__keyword { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .mv-header-search__keyword-type { color: #111; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.64px; min-width:40px; } .mv-header-search__placeholder { min-width: 0; color: #c4c4c4; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-header-search__magnifier { width: 24px; height: 24px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='6.5' stroke='%234e7ff0' stroke-width='1.8'/%3E%3Cpath d='m16 16 4 4' stroke='%234e7ff0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; background-size: 24px 24px; } .mv-header-account { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; color: #767676; white-space: nowrap; flex-shrink: 0; } .mv-header-account__div { color: #767676; } .mv-menu-sbtn { display: none; } .mv-menu-btn { display: none; width: 31px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; } .mv-mbtn__search { width: 23px; height: 17px; display: block; background: url("/landimg/msearch_icon.svg") no-repeat center; background-size: 23px 17px; } .mv-menu-btn__icon { width: 23px; height: 17px; display: block; background: url("/landimg/m_menuicon.svg") no-repeat center; background-size: 23px 17px; } .menu_step1 { /*height: 64px;*/ background: transparent; display: flex; align-items: center; position:absolute; top:84px; z-index:10; width:100%; display:none; } .menu_step1.menusel1{left:100px;} .menu_step1.menusel2{left:240px;} .menu_step1.menusel3{left:100px;} .menu_step1.menusel4{left:100px;} .menu_step1.menusel5{left:100px;} .menu_step1.menusel6{left:100px;} .mv-navrow__links .on {display:block;/*animation: fadein 0.3s ease-in;*/} @keyframes fadein { from{opacity:0;} to{opacity:1;} } @keyframes fadeout { from{opacity:1;} to{opacity:0;} } .mv-topmenubar-back{ position:absolute;background: rgba(241, 243, 248, 1); height: 64px;width:100%;z-index:9;display:none;} .mv-topmenubar-back.on{display:block;/*animation: fadein 0.3s ease-in;*/} .mv-navrow__links:hover{ color:#4E7FF0; } .mv-navrow__links .menu_step1 a:hover{ color:#4E7FF0;font-weight:500;} .topmenu-inner { width:1200px; /*max-width: 1200px; margin: 0 auto;*/ display:flex; font-family:"Pretendard Variable-Regular"; height:64px; line-height:64px; gap:40px; } .topmenu-inner a{font-size:16px; color:#111;} /* ===================== 3. PC 네비 Frame 1172 84px ===================== */ .mv-navrow { display: flex; align-items: center; border-bottom: 1px solid #e8eaed; position:relative; } .mv-navrow__inner { display: flex; align-items: center; width: 100%; /* position:relative;*/ max-width: 1200px; margin: 0 auto; padding: 0 0px; width:1200px; } .mv-navrow__icon { width: 31px; height: 26px; flex-shrink: 0; margin-right: 10px; } .mv-navrow__icon .box_warp{width:100%;height:100%;position:relative;} .mv-navrow__icon .box_warp .totalmenu { width: 26px; height: 18px; z-index: 600; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0, -50%, 0); position: absolute; top: 14px; left: 4px; } .mv-navrow__icon .box_warp .totalmenu > span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #2f4260; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .mv-navrow__icon .box_warp .totalmenu > span.line1 { top: 0; } .mv-navrow__icon .box_warp .totalmenu > span.line2 { top:50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0, -50%, 0); } .mv-navrow__icon .box_warp .totalmenu > span.line3 { bottom: 0px; } .mv-navrow__links { /* display: flex; align-items: center; gap: 99px; min-width: 0; font-size:18px; */ font-family:'Pretendard SemiBold'; width:100%; float:left; } .mv-navrow__links:hover{color:#4E7FF0;} .mv-navrow__links .on{color:#4E7FF0;} .mv-navrow__link { /* font-size: 18px; font-weight: 600; line-height: 85px; letter-spacing: -0.72px; color: #111; white-space: nowrap; line-height:84px; height:84px; */ } .mv-navrow__links li{width:calc(100% / 6);float:left;font-size: 18px;text-align:center;font-weight: 600; line-height: 84px;letter-spacing: -0.72px;color: #111;white-space: nowrap;height:84px;} .mv-navrow__btns { margin-left: 10px; display: flex; gap: 20px; align-items: center; flex-shrink: 0; } .mv-navrow__cell { width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.52px; color: #111; } .mv-navrow__cell-icon { width: 24px; height: 24px; display: block; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; } .mv-navrow__cell-icon--wish { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 20.5 4.95 13.86C3.02 12.03 3.02 9.08 4.95 7.25a4.46 4.46 0 0 1 6.18 0L12 8.08l.87-.83a4.46 4.46 0 0 1 6.18 0c1.93 1.83 1.93 4.78 0 6.61L12 20.5Z' stroke='%23111' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); } .mv-navrow__cell-icon--recent { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%23111' stroke-width='1.8'/%3E%3Cpath d='M12 7.5v5l3.5 2' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .mv-navrow__cell span { line-height: 1; white-space: nowrap; } /* ===================== 4. 모바일 검색 ===================== */ .mv-searchwrap { display: none; } .mv-topbar .closebtn{position: absolute;right: 20px;} .mv-topbar.off{display:none;} .mv-header-search__select .nice-select{border:none;background:#fff;height:37px;line-height:37px;} .mv-header-search__select .nice-select .current{color:#111;font-size: 16px;} .mv-header-search__select .nice-select:after { border-bottom: 1px solid #111;border-right: 1px solid #111;} select{border:0;} .mm-page{display:none;} .wb-panel-wrap.hid{display:none;} @media (max-width: 920px) { .mv-header {padding:0;} .mv-navrow__links {white-space: nowrap;overflow:hidden;} .mv-navrow__links li{min-width:80px;overflow:hidden;} .mv-navrow__btns {margin-left:5px;} .mv-navrow__icon {margin-right:5px;} } /*=======모바일 메뉴======*/ .mm-page { /* width: 100%; max-width: 32rem; min-height: 100dvh; margin: 0 auto; background: #fff; */ position: absolute; top: 0px; right: 0px; z-index: 99; min-height: 100dvh; background: #fff; min-width:355px; } .momv-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media (min-width: 33rem) { .mm-page { margin-block: 1rem; min-height: 100dvh; /* border: 1px solid #000;*/ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); } } .mm-pad-x { padding-inline: clamp(1rem, 4vw, 1.25rem); } /* 상단 바 — 64px */ .mm-topbar { display: flex; align-items: center; justify-content: flex-end; min-height: 4rem; padding-inline: clamp(1rem, 4vw, 1.25rem); background: #fff; } .mm-topbar__icons { display: flex; align-items: center; gap: 1.25rem; /* 피그마 Frame 1434(세 아이콘) 간격에 맞춤 */ } .mm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: none; border-radius: 0.5rem; background: transparent; color: #111; cursor: pointer; } .mm-icon-btn:focus-visible { outline: 2px solid #2b6afd; outline-offset: 2px; } .mm-icon { width: 1.35rem; height: 1.35rem; } /* 상단: 사람(~20px) · 기어(~20px) · 닫기(~24px) — 피그마 에셋 크기 */ .mm-icon--top { width: 1.25rem; height: 1.25rem; } .mm-icon--top.mm-icon--top-lg { width: 1.4375rem; height: 1.4375rem; } /* 인사말 */ .mm-greet { padding-block: 0 1rem; } .mm-greet__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.04em; color: #000; } .mm-greet__sub { margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; color: #111; } /* 바로가기 — #f6f9ff, 아이콘 블루는 피그마 에셋 톤 */ .mm-quick { --mm-quick-icon: #4c82f5; background: #f6f9ff; padding-block: 1.375rem 1.25rem; padding-inline: clamp(0.75rem, 3vw, 1rem); } .mm-quick__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 100%; } @media (max-width: 20rem) { .mm-quick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mm-quick__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; min-width: 0; } .mm-quick__item:focus-visible { outline: 2px solid #2b6afd; outline-offset: 4px; border-radius: 0.5rem; } .mm-quick__circle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--mm-quick-icon); } .mm-quick__glyph { display: block; width: 1.375rem; height: 1.375rem; flex-shrink: 0; } .mm-quick__label { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; text-align: center; word-break: keep-all; } /* 본문 영역 */ .mm-body { padding-block: 1.25rem 2rem; } .mm-block + .mm-block { margin-top: 0; } .mm-rows { list-style: none; margin: 0; padding: 0; } .mm-row--nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.5rem; padding-block: 0.65rem; text-decoration: none; color: inherit; border-radius: 0.25rem; } .mm-row--nav + .mm-row--nav { padding-top: 0.85rem; } .mm-row--nav:focus-visible { outline: 2px solid #2b6afd; outline-offset: 2px; } .mm-row__title--md { font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #111; } .mm-chevron { flex-shrink: 0; width: 1.5rem; height: 1.5rem; background: no-repeat center / 0.45rem 0.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none'%3E%3Cpath stroke='%23111111' stroke-width='1.5' stroke-linecap='round' d='M1.5 1.5L6.5 7l-5 5.5'/%3E%3C/svg%3E"); opacity: 0.9; } .mm-rule { border: none; height: 1px; margin: 8px 0 8px 0; background: #d0d5e2; } .mm-rule--inset { margin: 0; } /* 경매검색 아코디언 */ .mm-accordion__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin: 1.25rem 0 0; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; } .mm-accordion__head:first-child { margin-top: 0; } .mm-accordion__head:focus-visible { outline: 2px solid #2b6afd; outline-offset: 2px; border-radius: 0.25rem; } .mm-accordion__title { font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #111; } .mm-accordion__toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: 1.0625rem; font-weight: 500; line-height: 1; color: #111; } .mm-accordion__panel { margin-top: 0.85rem; } .mm-accordion__panel[hidden] { display: none; } .mm-link-rows { list-style: none; margin: 0; padding: 0; } /* 경매검색 서브: 피그마 Frame 1445~ — 한 줄, 좌 메뉴명 / 우 보조(gray), 화살표 없음 */ .mm-link-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.125rem; padding-block: 0.5625rem; text-decoration: none; color: inherit; border-radius: 0.25rem; } .mm-link-row:focus-visible { outline: 2px solid #2b6afd; outline-offset: 2px; } .mm-link-row__name { flex: 0 0 auto; padding-left: 0.5rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.38; letter-spacing: -0.04em; color: #111; white-space: nowrap; } .mm-link-row__hint { flex: 1 1 0; min-width: 0; font-size: 0.6875rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.04em; color: #c4c4c4; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 접힘 섹션 (+) */ .mm-fold-list { list-style: none; margin: 0; padding: 0; } .mm-fold-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: 1rem; padding-inline: 0; border: none; background: none; cursor: pointer; font: inherit; text-align: left; color: inherit; } .mm-fold-head:focus-visible { outline: 2px solid #2b6afd; outline-offset: 2px; border-radius: 0.25rem; } .mm-fold-head__title { font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #111; } .mm-fold-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: 1.0625rem; font-weight: 500; color: #111; } .mm-fold-list .mm-rule--inset { margin-top: 0; } @media (min-width: 40rem) { .mm-page { max-width: 40rem; } .mm-greet__title { font-size: 1.0625rem; } } /* @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } */ @media (max-width: 767px) { .momv-inner {width:100%;margin:0;padding:8px 16px;} .mv-menu-sbtn { display: flex; width: 23px; height: 17px; position: relative;width:100%;justify-content: flex-end;} .mv-header{ position:fixed; background:#fff; width:100%; z-index:1100; } } /* 헤더 가로 오버플로우 대응 (2026-05-01) */ @media (max-width: 1199px) { .mv-header__inner { gap: 60px; } } @media (max-width: 768px) { .mv-header__inner { gap: 16px; } .mv-header-search { max-width: none; flex: 1 1 0; min-width: 0; } .mv-header-search__input-wrap input { width: 80px; min-width: 0; } .mv-header-search__keyword-type { display: none; } } .mobilemenu{ position:absolute; top:50%; /*right:15px;left:15px;*/ width:100%; height:100%; /*z-index: 600;*/ -webkit-transform:translate3d(0,-50%,0); -moz-transform:translate3d(0,-50%,0); -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); } .mobilemenu > span.line1 { top: 0; } .mobilemenu > span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #2f4260; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .mobilemenu > span.line2 { top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0, -50%, 0); } .mobilemenu > span.line3 { bottom: 0; } .wb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wb-page { width: 100%; max-width: 23.4375rem; margin: 0 auto; min-height: 100dvh; background: #fff; border-inline: 1px solid #000; } @media (min-width: 24rem) { .wb-page { margin-block: 1rem; min-height: auto; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } } .wb-promo { margin: 0; padding: 0.75rem 1rem; background: #f1f3f8; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; text-align: center; color: #111; } .wb-top { display: flex; align-items: center; justify-content: space-between; min-height: 2.625rem; padding: 0.5rem 1rem; } .wb-top__logo { font-size: 1.125rem; font-weight: 800; color: #4e7ff0; letter-spacing: -0.02em; } .wb-top__menu { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 0.375rem; background: transparent; color: #111; cursor: pointer; } .wb-top__menu:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .wb-panel-wrap { padding: 1rem 1rem 1.5rem; position:absolute; background:#fff; width:100%; z-index:9; top: 37px; } .wb-seg--main { margin-bottom: 0.75rem; } .wb-block { padding: 0; } .wb-seg { display: flex; align-items: center; justify-content: center; gap: 0.25rem; max-width: 12.5rem; margin: 0 auto 0.75rem; padding: 0.25rem; background: #f1f3f8; border-radius: 624.9375rem; } .wb-seg--sm { max-width: 10.75rem; } .wb-seg__btn { flex: 1 1 0; min-width: 0; padding: 0.375rem 0.5rem; border: none; border-radius: 624.9375rem; background: transparent; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.04em; color: #c4c4c4; cursor: pointer; transition: background 0.2s, color 0.2s; } .wb-seg--sm .wb-seg__btn { font-size: 0.8125rem; padding: 0.35rem 0.4rem; } .wb-seg__btn.is-active { background: #4e7ff0; color: #fff; } .wb-seg__btn:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .wb-search { margin: 0; } .wb-search__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.25rem 0.75rem; border: 1px solid #4e7ff0; border-radius: 0.25rem; background: #fff; } .wb-year { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .wb-year::after { content: ""; position: absolute; right: 0; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); pointer-events: none; background: no-repeat center / 0.5rem 0.35rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath stroke='%23111111' stroke-width='1.5' stroke-linecap='round' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E"); opacity: 0.85; } .wb-year__select { margin: 0; padding: 0 1.125rem 0 0; max-width: 6.5rem; border: none; border-radius: 0.25rem; background: transparent; font-family: inherit; font-size: 1.125rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; color: #111; cursor: pointer; -webkit-appearance: none; appearance: none; } .wb-year__select:focus { outline: none; } .wb-year__select:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .wb-vsep { flex-shrink: 0; width: 1px; align-self: stretch; min-height: 1rem; margin: 0.125rem 0; background: #999; } .wb-search__field { display: flex; flex: 1 1 0; align-items: center; gap: 0.375rem; min-width: 0; } .wb-prefix { flex-shrink: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #111; } .wb-input { flex: 1 1 0; min-width: 0; border: none; padding: 0; margin: 0; font-family: inherit; font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #111; background: transparent; -webkit-appearance: none; appearance: none; } .wb-input::placeholder { color: #c4c4c4; } .wb-input:focus { outline: none; } .wb-input--solo { flex: 1 1 0; font-size: 1rem; font-weight: 500; } .wb-search--simple .wb-search__inner { gap: 0.5rem; } .wb-submit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 0.25rem; background: transparent; color: #111; cursor: pointer; } .wb-submit:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } @media (max-width: 22rem) { .wb-year__select { font-size: 1rem; max-width: 5.75rem; } .wb-prefix, .wb-input { font-size: 1rem; } } /* ===== landbasic_style.css ===== */ .content_container{ max-width: 1200px; margin: 0 auto; position: relative; } .top_container{ width:100%; margin: 0 auto; /* position: relative;*/ display: flex; align-content: flex-start; justify-content: space-around; background:#f1f3f8; } .foot_container{ width:100%; margin: 0 auto; /* position: relative;*/ display: flex; align-content: flex-start; justify-content: space-around; background:#f1f3f8; } .web-main { background-color: #ffffff; width: 100%; display: flex; flex-direction: column;s } /* ===== main_style.css ===== */ .mv { min-width: 0; } .mv-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ===================== 5. 히어로 Group 23 ===================== */ .mv-hero { position: relative; /*height: 499px;*/ overflow: hidden; } .mv-hero__img { position: absolute; left: 0; top: 0; /* width: calc(100% - 200px); */ height: 499px; object-fit: cover; } .mv-hero__side { position: absolute; right: 0; top: 0; width: 200px; height: 499px; background: #657088; color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 12px; font-size: 18px; font-weight: 500; line-height: 27px; } .mv-hero__side a { color: #fff; } .mv-hero__side-line { display: block; width: 176px; height: 1px; background: rgba(255,255,255,0.3); margin: 8px 0; } .mv-hero__page { display: none; border-radius: 200px; font-size: 10px; font-weight: 300; } /* ===================== 6. 카드 6개 Frame 1201 ===================== */ .mv-cards { padding: 28px 0; } .mv-cards__inner { display: flex; flex-wrap: wrap; justify-content: center; /* margin: 0 -7px -14px -7px; */ min-width: 0; justify-content: space-between; } .mv-card { /*flex: 0 1 128px;*/ width: 128px; min-width: 90px; max-width: 128px; height: 112px; display:flex; flex-direction: column; align-content: space-around; align-items: center; /* margin: 0 55px 14px 7px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 8px; box-sizing: border-box; */ } .mv-card p{color:#111;font-size:16px;} .mv-card img{width:50px;height:55px;} .mv-card__icon {/* height: 84px; *//* flex-shrink: 0; *//* object-fit: contain; */width: 128px;display: flex;padding: 8px;align-items: center;gap: 16px;} .mv-card__label { font-size: 15px; line-height: 23px; font-weight: 500; color: #111; text-align: center; word-break: keep-all; } /* ===================== 7. 3단 Frame 1371 ===================== */ .mv-three { padding: 20px 0; } .mv-three__inner { display: grid; grid-template-columns: 405px 507px 288px; gap: 20px; justify-content: center; } .mv-three__panel { height: 307px; overflow: hidden; } .mv-three__panel--calendar { padding: 20px; border: 1px solid #f1f3f8; background: #fff; } .mv-three__month { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 12px; font-size: 15px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .mv-three__month-btn { width: 20px; height: 20px; border: none; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.5 5 7.5 10l5 5' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 20px 20px; cursor: pointer; } .mv-three__month-btn--next { transform: rotate(180deg); } .mv-three__calendar-grid { display: grid; grid-template-columns: repeat(7, 48px); grid-template-rows: repeat(5, 48px); justify-content: center; } .mv-three__cell { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .mv-three__cell--muted { color: #c4c4c4; background: #f6f9ff; } .mv-three__cell--active { border-radius: 50px; background: #4e7ff0; color: #fff; } .mv-three__panel--schedule { padding: 17.5px 16px; background: #4e7ff0; color: #fff; } .mv-three__schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 15px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.6px; } .mv-three__schedule-link { flex-shrink: 0; font-size: 12px; font-weight: 400; line-height: 16.8px; letter-spacing: -0.48px; color: #fff; } .mv-three__legend { display: flex; justify-content: flex-end; gap: 16px; height: 25px; padding: 4px 12px; margin-bottom: 10px; border-radius: 4px; background: #f6f9ff; } .mv-three__legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; line-height: 16.8px; letter-spacing: -0.48px; } .mv-three__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mv-three__dot--blue { background: #4e7ff0; } .mv-three__dot--gray { background: #767676; } .mv-three__dot--green { background: #14b155; } .mv-three__dot--red { background: #ff4141; } .mv-three__legend-item:nth-child(1) { color: #4e7ff0; } .mv-three__legend-item:nth-child(2) { color: #767676; } .mv-three__legend-item:nth-child(3) { color: #14b155; } .mv-three__legend-item:nth-child(4) { color: #ff4141; } .mv-three__courts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; height: 204px; padding: 12px 20px; background: #f6f9ff; } .mv-three__courts a { font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; color: #111; } .mv-three__panel--result { padding: 20px; border: 1px solid #4e7ff0; background: #fff; } .mv-three__result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 15px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .mv-three__refresh { width: 16px; height: 16px; border: none; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.333 8A5.333 5.333 0 1 1 11.77 4.23M13.333 2.667v3.2h-3.2' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 16px 16px; cursor: pointer; } .mv-three__result-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .mv-three__result-item { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; border-radius: 4px; background: #f1f3f8; color: #111; font-size: 13px; font-weight: 500; line-height: 19.5px; letter-spacing: -0.52px; } .mv-three__result-item strong { font-weight: 500; } .mv-three__result-item--primary { background: #4e7ff0; color: #fff; } .mv-three__result-item--blue { background: #e8f1ff; color: #4e7ff0; } .mv-three__result-item--red { background: #fff5f5; color: #ff4141; } .mv-three__result-item--muted { color: #767676; } /* ===================== 8. 테마검색 Frame 1349 ===================== */ .mv-section { padding: 28px 0; } .mv-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .mv-section__tit { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; color: #111; } .mv-section__more { font-size: 16px; font-weight: 500; color: #111; display: flex; align-items: center; gap: 4px; } .mv-section__chev { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") no-repeat center; background-size: 20px 20px; } .mv-section__theme-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .mv-section__theme-row:last-child { margin-bottom: 0; } .mv-theme-item { /* height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 12px; background: #f1f3f8; border-radius: 60px; font-size: 15px; font-weight: 500; color: #111; flex-shrink: 0; */ display: flex; padding: 16px 24px; align-items: center; gap: 8px; border-radius: 60px; border: 1px solid var(--Sub-Gray-50, #D0D5E2); background: var(--Common-White, #FFF); } .mv-theme-item__icon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; } /* ===================== 가장 많이 본 물건 Frame 1363 ===================== */ .mv-section--viewed { background: #f6f9ff; padding-top: 28px; padding-bottom: 28px; } .mv-section--viewed .mv-most__head { margin-bottom: 12px; } .mv-most__wrap { display: grid; grid-template-columns: 400px 600px; gap: 100px; justify-content: center; align-items: start; } .mv-most__list { margin: 2px 0 0; padding: 0; list-style: none; } .mv-most__list-item { width: 400px; padding: 0 16px; margin-bottom: 4px; } .mv-most__list-item:last-child { margin-bottom: 0; } .mv-most__mini { display: flex; align-items: center; gap: 20px; min-height: 88px; padding: 14px 20px; border: 1px solid #d0d5e2; border-radius: 4px; background: #fff; color: inherit; } .mv-most__list-item--active .mv-most__mini { border-color: #4E7FF0; background: #4E7FF0; transform: scale(1.04); } .mv-most__mini-media { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .mv-most__rank { width: 24px; height: 24px; border-radius: 999px; background: #4E7FF0; color: #fff; font-size: 13px; font-weight: 500; line-height: 24px; text-align: center; letter-spacing: -0.52px; } .mv-most__list-item--active .mv-most__rank { background: #fff; color: #4e7ff0; } .mv-most__mini-thumb { display: block; width: 88px; height: 60px; object-fit: cover; } .mv-most__mini-body { flex: 1; min-width: 0; } .mv-most__mini-title { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; line-height: 19.5px; letter-spacing: -0.52px; color: #111; } .mv-most__mini-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; color: #111; } .mv-most__mini-price span:last-child { text-align: right; white-space: nowrap; } .mv-most__mini-price--low, .mv-most__mini-price--low .mv-most__mini-percent { color: #4e7ff0; font-weight: 600; } .mv-most__list-item--active .mv-most__mini-title, .mv-most__list-item--active .mv-most__mini-price { color: #fff; } .mv-most__list-item--active .mv-most__mini-price--low, .mv-most__list-item--active .mv-most__mini-price--low .mv-most__mini-percent { color: #ffe02d; } .mv-most__feature { display: block; padding: 24px 28px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; color: inherit; } .mv-most__feature-thumb { display: block; width: 100%; aspect-ratio: 544 / 296; object-fit: cover; } .mv-most__feature-body { padding-top: 12px; } .mv-most__feature-top { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 16px; align-items: start; } .mv-most__feature-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .mv-most__feature-rank { width: 31px; height: 43px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 43' fill='none'%3E%3Cpath d='M15.385 0 30.77 8.632v17.264L15.385 43 0 25.896V8.632L15.385 0Z' fill='%234E7FF0'/%3E%3C/svg%3E") no-repeat center; background-size: 31px 43px; color: #fff; font-size: 20px; font-weight: 600; line-height: 43px; text-align: center; letter-spacing: -0.8px; } .mv-most__feature-title { display: block; min-width: 0; padding-top: 8px; font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: -0.72px; color: #111; } .mv-most__feature-prices { display: flex; flex-direction: column; gap: 0; } .mv-most__feature-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; } .mv-most__feature-price span:first-child { font-weight: 600; } .mv-most__feature-price span:last-child { text-align: right; white-space: nowrap; font-weight: 500; } .mv-most__feature-price--low, .mv-most__feature-price--low .mv-most__feature-percent { color: #4e7ff0; } .mv-most__feature-divider { height: 1px; margin: 8px 0; background: #d0d5e2; } .mv-most__feature-meta { display: flex; flex-direction: column; gap: 0; } .mv-most__feature-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 20px; } .mv-most__feature-left { display: flex; min-width: 0; gap: 4px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; color: #111; } .mv-most__feature-left strong { font-weight: 600; flex-shrink: 0; } .mv-most__feature-left span { font-weight: 400; } .mv-most__feature-keywords { min-width: 0; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; color: #ff4141; } .mv-most__feature-right { flex-shrink: 0; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; color: #111; text-align: right; } /* ===================== 10. 실시간 상승 TOP Frame 1318 ===================== */ .mmv-rise__listv-section--realtime .mv-rise__head { margin-bottom: 20px; } . { /* display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; */ margin: 0; padding: 0; list-style: none; } .mv-rise__item { /*min-width: 0;width:33.333%;*/float:left; } .swiperlist2{width:1200px;overflow:hidden;height:500px;} .mv-rise__card { display: block; color: inherit; } .mv-rise__media { position: relative; border-radius: 4px; overflow: hidden; } .mv-rise__thumb { display: block; width: 100%; aspect-ratio: 389 / 252; object-fit: cover; } .mv-rise__overlay { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; font-weight: 400; line-height: 19.5px; } .mv-rise__overlay span:last-child { text-align: right; } .mv-rise__like { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 17px; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .mv-rise__heart { width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 20.5 4.95 13.86C3.02 12.03 3.02 9.08 4.95 7.25a4.46 4.46 0 0 1 6.18 0L12 8.08l.87-.83a4.46 4.46 0 0 1 6.18 0c1.93 1.83 1.93 4.78 0 6.61L12 20.5Z' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size: 24px 24px; } .mv-rise__body { padding: 8px 8px 0; } .mv-rise__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 31px; } .mv-rise__title { display: block; min-width: 0; font-size: 18px; font-weight: 600; line-height: 27px; letter-spacing: -0.72px; color: #111; } .mv-rise__badge { flex-shrink: 0; height: 31px; padding: 0 8px; border: 1px solid #82b8ff; border-radius: 4px; background: #fff; color: #82b8ff; font-size: 15px; font-weight: 500; line-height: 29px; letter-spacing: -0.6px; } .mv-rise__price { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.64px; color: #111; } .mv-rise__price--low, .mv-rise__price--low .mv-rise__label, .mv-rise__price--low .mv-rise__value, .mv-rise__percent { color: #4e7ff0; } .mv-rise__value { text-align: right; white-space: nowrap; } .mv-rise__divider { height: 1px; margin: 8px 0; background: #d0d5e2; } .mv-rise__meta { min-height: 78px; } .mv-rise__address, .mv-rise__keywords { margin: 0; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: -0.6px; } .mv-rise__address { color: #767676; } .mv-rise__keywords { color: #ff4141; } .mv-rise__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 24px; margin-top: 8px; } .mv-rise__chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .mv-rise__chip { height: 24px; padding: 0 4px; background: #f1f3f8; color: #767676; font-size: 13px; font-weight: 400; line-height: 24px; letter-spacing: -0.52px; } .mv-rise__views { flex-shrink: 0; color: #767676; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.52px; } /* ===================== 11. 2열 카드 Frame 1370 ===================== */ .mv-twocards { padding: 28px 0; } .mv-twocards__inner { display: grid; grid-template-columns: 585px 585px; gap: 29px; justify-content: center; } .mv-twocards__green, .mv-twocards__yellow { height: 240px; border-radius: 8px; overflow: hidden; padding: 24px; position: relative; } .mv-twocards__green { background: #e8fbe8;} .mv-twocards__yellow { background: #fff8de; } .mv-twocards__text { margin: 0 0 12px; font-size: 13px; font-weight: 500; line-height: 20px; color:#0B6037; max-width: 320px; } .mv-twocards__hello { margin: 0 0 4px; font-size: 32px; font-weight: 600; color:#0B6037; } .mv-twocards__sub { margin: 0; font-size: 22px; font-weight: 700; color:#0B6037; } .mv-twocards__thumb { position: absolute; right: 24px; bottom: 24px; width: 170px; height: 220px; object-fit: contain; } .imgswipmobi{display:none;} .imgswip{display:block;} .slide-inner{display: block; } .mobislide-inner{display: none; } .mv-hero{ background-image: url("/landimg/mainslide02bk.png"); background-repeat: no-repeat; } /* ===================== 모바일 (768px 이하) Mobile_Main ===================== */ .mvmobi-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .mobimv-section--realtime{display:none;} .mv-section--realtime{display:block;} @media (max-width: 767px) { .moslide-inner {max-width:100%;min-width:374px;} .tema_scrollx{overflow-x:scroll;width:100%;} .mvmobi-inner { max-width: 100%; margin: 0 auto; padding: 0 20px; } .mobimv-section--realtime{display:block;} .mv-section--realtime{display:none;} .thema-inner{width:100%;} .mv-section__theme-row{width:600px;} .mv { display: flex; flex-direction: column; } .mv-inner { padding: 0 16px; width: 100%;} .mv-hero__img { content: url('/landimg/tmpmomain.png'); } .mv-topbar { height: 42px; } .mv-topbar .mv-inner { justify-content: flex-start; } .mv-topbar__notice { gap: 6px; min-width: 0; } .mv-topbar__icon { width: 16px; height: 14px; background-size: 16px 14px; } .mv-topbar__text { font-size: 12px; line-height: 18px; text-align: left; } /*.mv-header { height: 42px; display: flex;}*/ .mv-header__inner { gap: 12px; justify-content: space-between; } .mv-logo { display: flex; align-items: center; } .mv-logo__img--pc { display: none !important; } .mv-logo__img--mo { display: block !important; width: 140px; height: 20px; } .mv-header-search, .mv-header-account { display: none; } .mv-menu-btn { display: flex; width: 23px; height: 17px; margin-left: auto; position: relative;} .mv-menu-btn__icon { /*width: 31px; height: 26px; background-size: 31px 26px; */} .mv-navrow { display: none; } .mv-searchwrap { display: block; padding: 8px 0 16px; min-height: 100px; } .mv-searchbox { max-width: 343px; height: 36px; padding: 0 12px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f1f3f8; display: flex; align-items: center; gap: 8px; } .mv-searchbox__icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; } .mv-searchbox__input { flex: 1; min-width: 0; border: none; background: none; font-size: 14px; font-family: inherit; } .mv-searchwrap__bar { height: 40px; } .imgswipmobi{display:block;height: 100%;} .imgswip{display:none;} .mv-hero { /*height: 320px; */ background-image: none; background-repeat: no-repeat; margin-top: 36px; } .slide-inner{display: none; } .mobislide-inner{display: block; position:relative;/*height:320px;*/} .mobislide-inner img{/*height:320px;*/width:100%;} .mv-hero__img { width: 100%; height: 160px; } .mv-hero__side { display: none; } .mv-hero__page { display: block; position: absolute; right: 16px; bottom: 12px; padding: 4px 8px; background: #000; color: #fff; font-size: 10px; font-weight: 300; line-height: 14px; border-radius: 200px; } .mv-cards { padding: 16px 0; } .mv-cards__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; width: 100%;} .mv-card { width: 100%; height: 60px; min-height: 60px; margin: 0; flex-direction: row; justify-content: flex-start; padding: 8px 12px; flex: none; } .mv-card__icon { display: flex; /*width: 96px;*/ padding: 4px; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .mv-cards__inner .mv-card:nth-child(1) .mv-card__icon { content: url('/landimg/maintoday_mo.svg'); } .mv-cards__inner .mv-card:nth-child(2) .mv-card__icon { content: url('/landimg/mainapt_mo.svg'); } .mv-cards__inner .mv-card:nth-child(3) .mv-card__icon { content: url('/landimg/maintop50_mo.svg'); } .mv-cards__inner .mv-card:nth-child(4) .mv-card__icon { content: url('/landimg/mainkuk_mo.svg'); } .mv-cards__inner .mv-card:nth-child(5) .mv-card__icon { content: url('/landimg/mainsea_mo.svg'); } .mv-cards__inner .mv-card:nth-child(6) .mv-card__icon { content: url('/landimg/maingongsi_mo.svg'); } .mv-card__label { font-size: 12px; line-height: 20px; text-align: left; } .mv-three { /*order: 2;*/padding: 16px 0; } .mv-three__inner { grid-template-columns: 1fr; gap: 16px; } .mv-three__panel { height: auto; } .mv-three__panel--schedule { order: 1; } .mv-three__panel--calendar { order: 2; padding: 16px; } .mv-three__panel--result { order: 3; padding: 16px; } .mv-three__month { gap: 12px; margin-bottom: 8px; font-size: 14px; } .mv-three__calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .mv-three__cell { aspect-ratio: 1 / 1; font-size: 13px; line-height: 1; } .mv-three__schedule-head { flex-direction: column; align-items: flex-start; margin-bottom: 8px; } .mv-three__schedule-link { font-size: 11px; } .mv-three__legend { justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; height: auto; padding: 8px 12px; } .mv-three__courts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; height: auto; padding: 12px; } .mv-three__courts a { font-size: 12px; line-height: 18px; } .mv-three__result-head { margin-bottom: 10px; font-size: 14px; } { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; width: 100%;} .mv-three__result-list { gap: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; width: 100%; } .mv-three__result-item { height: 30px; font-size: 12px; } .mv-section--theme { order: 1; padding: 16px 0; } .mv-section__tit { font-size: 16px; font-weight: 600; } .mv-section__more { font-size: 14px; font-weight: 500; } .mv-section__theme-row { margin-bottom: 8px; } .mv-theme-item { height: 36px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 60px; } .mv-theme-item__icon { width: 20px; height: 20px; } .mv-section--viewed { order: 3; } .mv-section--realtime { order: 4; } .mv-most__wrap { grid-template-columns: 1fr; gap: 16px; } .mv-most__list, .mv-most__list-item { width: 100%; } .mv-most__list-item { padding: 0; } .mv-most__mini { gap: 12px; padding: 14px 12px; } .mv-most__mini-body { min-width: 0; } .mv-most__mini-title { font-size: 12px; } .mv-most__mini-price { font-size: 12px; } .mv-most__mini-thumb { width: 72px; height: 48px; } .mv-most__feature { padding: 16px; } .mv-most__feature-top { grid-template-columns: 1fr; gap: 12px; } .mv-most__feature-title-wrap { gap: 10px; } .mv-most__feature-rank { width: 28px; height: 40px; background-size: 28px 40px; font-size: 18px; line-height: 40px; } .mv-most__feature-title { padding-top: 6px; font-size: 16px; line-height: 24px; } .mv-most__feature-price { font-size: 14px; line-height: 22px; } .mv-most__feature-line { flex-direction: column; gap: 2px; } .mv-most__feature-left, .mv-most__feature-keywords, .mv-most__feature-right { font-size: 12px; line-height: 18px; } .mv-most__feature-right { text-align: left; } .mv-rise__list { grid-template-columns: 1fr; gap: 16px; } .mv-section--realtime .mv-rise__head { margin-bottom: 16px; } .mv-rise__body { padding: 8px 0 0; } .mv-rise__title-row { gap: 8px; } .mv-rise__title { font-size: 16px; line-height: 24px; } .mv-rise__badge { height: 28px; font-size: 13px; line-height: 26px; } .mv-rise__price { font-size: 14px; line-height: 22px; } .mv-rise__address, .mv-rise__keywords { font-size: 14px; line-height: 21px; } .mv-rise__footer { flex-direction: column; gap: 8px; } .mv-rise__views { align-self: flex-end; } .mv-twocards { order: 5; padding: 16px 0; } .mv-twocards__inner { grid-template-columns: 1fr; gap: 16px; } .mv-twocards__green, .mv-twocards__yellow { height: 164px; padding: 16px; } .mv-twocards__text { font-size: 13px; font-weight: 500; margin-bottom: 8px; } .mv-twocards__hello { font-size: 32px; font-weight: 600; } .mv-twocards__sub { font-size: 22px; font-weight: 700; } .mv-twocards__thumb { width: 80px; height: 60px; right: 16px; bottom: 16px; } .mv-footer { order: 6; padding: 40px 0 60px; } .mv-footer__logo--pc { display: none !important; } .mv-footer__logo--mo { display: block !important; width: 138px; height: 20px; } .mv-footer__inner { display: flex; flex-direction: column; gap: 20px; } .mv-footer__content { grid-template-columns: 1fr; gap: 20px; } .mv-footer__nav { margin-bottom: 12px; } .mv-footer__nav a, .mv-footer__nav span { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .mv-footer__nav a + a::before { margin: 0 8px; } .mv-footer__info { margin-bottom: 12px; } .mv-footer__info p, .mv-footer__notice p { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .mv-footer__info span { display: none; } .mv-footer__right { min-height: 126px; } .mv-footer__divider { height: 120px; margin-right: 20px; } .mv-footer__support { min-width: 0; } .mv-footer__support-label { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .mv-footer__support-phone { margin-bottom: 12px; font-size: 32px; line-height: 44.8px; letter-spacing: -1.28px; } .mv-footer__support-time p { font-size: 14px; line-height: 21px; letter-spacing: -0.56px; } } /* 1270px 이하 PC 그리드 유연화 */ @media (max-width: 1270px) and (min-width: 768px) { .mv-three__inner { grid-template-columns: minmax(320px, 405px) minmax(0, 1.25fr) minmax(260px, 288px); } .mv-three__calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .mv-most__wrap { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 32px; } .mv-most__list-item { width: 100%; padding: 0; } .mv-rise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mv-twocards__inner { grid-template-columns: 1fr 1fr; } } /* ===== searchlist_style.css ===== */ /*@import url("tmplist.css");*/ /* ============================================ merged from responsive-search.css PC: Frame 1910 (1200px) | 모바일: Frame 2230 (375px) ============================================ */ .rsl-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; background: #ffffff; } .rsl-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } /* 네비·리스트 사이 검색 영역: 상단 여백 + 1200px 랩과 리스트(.list-wrapper) 정렬 */ .rsl-search { margin: 24px auto 0; width: 100%; max-width: 1200px; box-sizing: border-box; margin-top: 25px; } .rs { max-width: 1200px; margin: 0 auto; background: #fff; border: 1px solid #b5bccc; } /* 종합검색: 피그마 2열 그리드 (landsearch_box) */ .rs-form-title { font-weight: 600; font-size: 24px; line-height: 1.35; letter-spacing: -0.96px; color: #111; margin: 0 0 12px; padding: 0 20px; } /* 물건상태 라벨: 기본(PC) 물건상태만 표시 */ .rsl-search .rs-label__mob-only { display: none; } .rsl-search .rs-label__desk-only { display: inline; } .rsl-search .rs-label__yongdo-mob { display: none; } .rsl-search .rs-label__yongdo-desk { display: inline; } /* PC: 추가 조건 래퍼는 레이아웃에서 제거(display:contents), 버튼 숨김 */ @media (min-width: 768px) { .rsl-search .rsl-search__more-wrap { display: none !important; } .rsl-search .rsl-search-extra { display: contents; } .rc-search .rsl-search__more-wrap { display: none !important; } .rc-search .rsl-search-extra { display: contents; } .rsoz-search .rsl-search__more-wrap { display: none !important; } .rsoz-search .rsl-search-extra { display: contents; } } .rs-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: start; width: 100%; box-sizing: border-box; padding: 5px 20px 8px; } .rs-form-grid .rs-form-row { margin-bottom: 0; } .rs-form-grid__full { grid-column: 1 / -1; } .rs-form-row--detail-addr .rs-input--detail-addr { flex: 1; min-width: 0; width: 100%; max-width: none; } .rs-form-row--status-combo .rs-inline--status-combo { flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; } .rs-label-inline { font-size: 14px; font-weight: 500; color: #111; margin: 0 2px 0 4px; white-space: nowrap; } .rs-field--status { flex: 1 1 160px; min-width: 140px; max-width: 260px; } .rs-select--uchal { flex: 0 0 auto; min-width: 72px; max-width: 110px; } .rs-form-row--gamdb .rs-label { width: auto; min-width: 0; white-space: nowrap; } .rs-inline--gamdb select { flex: 1 1 100px; } /* PC 종합검색: 감정가대비 라벨 폭을 동일 열의 .rs-label(52px)과 맞춰 입력 시작선 정렬 */ @media (min-width: 768px) { .rsl-search .rs-form-row--gamdb { display: flex; flex-direction: row; align-items: center; gap: 20px; flex-wrap: nowrap; } .rsl-search .rs-form-row--gamdb > .rs-label { flex: 0 0 52px; width: 52px; min-width: 52px; max-width: 52px; flex-shrink: 0; white-space: nowrap; box-sizing: border-box; /* 한 줄 유지, 레이아웃 폭(52px)은 그대로 — 입력 시작선 정렬 유지 */ transform: scale(0.99); transform-origin: left center; } .rsl-search .rs-form-row--gamdb > .rs-inline--gamdb { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; width: auto; max-width: none; justify-content: flex-start; } .rsl-search .rs-form-row--gamdb .rs-inline--gamdb select { flex: 1 1 0; min-width: 0; } } .rs-form-pair--gongsi { margin-top: 4px; margin-bottom: 0; padding: 8px 20px 0; } .rs-special-hint { font-size: 13px; color: #657088; line-height: 1.4; } /* 특수조건(우) | 필지+물건번호(좌): 바깥 rs-label로 건물면적 등과 같은 열 정렬 */ .rs-inline--special-shortcut { gap: 12px; } .rs-inline--special-shortcut select { flex: 1; min-width: 0; } .rs-inline--special-shortcut #rslBtnSpecialOpen { flex-shrink: 0; } .rsl-search .rs .rs-inline--pilji-mulgeon-wrap { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 17px; flex: 1; min-width: 0; } .rsl-search .rs-form-row--pilji-mulgeon .rs-label-inline--pilji-mulgeon-gap { margin-left: 8px; } .rsl-search .rs .rs-inline.rs-inline--range-tilde { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .rsl-search .rs-form-row--pilji-mulgeon .rs-inline--pilji-mulgeon-wrap .rs-inline--range-tilde { flex: 0 1 auto; min-width: 0; } .rs-inline--range-tilde .rs-txt { flex-shrink: 0; } .rsl-search .rs .rs-inline--range-tilde select.rs-select--range { width: 88px; flex: 0 0 88px; min-width: 72px; max-width: 100px; } @media (min-width: 768px) { .rsl-search .rs .rs-inline--pilji-mulgeon-wrap { flex-wrap: nowrap; } /* PC 추가조건: [특수조건] | [필지 개수 + 물건번호] 한 행 (2열 그리드) */ .rsl-search .rsl-extra-row--special-pilji { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: center; width: 100%; box-sizing: border-box; } .rsl-search .rsl-extra-row--special-pilji > .rs-form-row--special-shortcut { min-width: 0; } .rsl-search .rsl-extra-row--special-pilji > .rsl-pilji-mulgeon-wrap { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 12px 24px; min-width: 0; } .rsl-search .rsl-extra-row--special-pilji > .rsl-pilji-mulgeon-wrap > .rs-form-row--pilji-cnt, .rsl-search .rsl-extra-row--special-pilji > .rsl-pilji-mulgeon-wrap > .rs-form-row--mulgeon-no { flex: 1 1 0; min-width: 0; } } @media (max-width: 767px) { .rsl-search .rsl-extra-row--special-pilji { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; box-sizing: border-box; } .rsl-search .rsl-extra-row--special-pilji > .rsl-pilji-mulgeon-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; } .rsl-search .rs .rs-inline--range-tilde select.rs-select--range { flex: 1 1 40%; width: auto; min-width: 0; } } .rs-expands--legacy-yongdo { display: none !important; } .rs-expands--special { position: relative; border-top: none; padding-top: 0; margin-top: 0; } /* 복수선택으로 특수조건 패널이 열릴 때만 구분선·상단 여백 */ .rs-expands--special:has(#rslSpecialPanelBlock.show) { border-top: 1px solid #b5bccc; padding-top: 0px; } #rslSpecialPanelBlock .rsl-special-panel__side, .rs-expands--legacy-yongdo .rsl-special-panel__side { gap: 3px; } /* 특수조건 복수선택 칩 — 클릭 가능 표시 */ #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt { cursor: pointer; } /* PC 전용: 특수조건 칩 4열, 2줄(8개)마다 아래 간격 */ @media (min-width: 768px) { .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; row-gap: 8px; align-items: start; } .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > input.searchlist_checkbox[hidden] { display: none !important; } .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt { width: 100%; min-width: 0; box-sizing: border-box; } .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt:nth-of-type(8n - 3), .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt:nth-of-type(8n - 2), .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt:nth-of-type(8n - 1), .rsl-search #rslSpecialPanelBlock .rsl-special-panel__chips > label.checkboxopt:nth-of-type(8n) { margin-bottom: 20px; } } .rs-expands--special > .rs-expand--sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .rs-expands--special > .rs-expand--sr-only::before { content: none !important; } .rsl-search .rs-input.rs-input--detail-addr::placeholder { color: #b5bccc; opacity: 1; } .rs-recommend { display: flex; align-items: center; gap: 20px; height: 56px; padding: 0 20px; background: #e8f1ff; } .rs-recommend__title { flex-shrink: 0; font-weight: 600; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rs-recommend__pills { display: flex; align-items: center; gap: 8px; } .rs-pill { height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 50px; background: transparent; font-weight: 600; font-size: 13px; letter-spacing: -0.52px; color: #657088; cursor: pointer; } .rs-pill-more { display: inline-flex; align-items: center; height: 36px; font-weight: 500; font-size: 13px; letter-spacing: -0.52px; color: #657088; } .rs-main { padding: 20px 20px 24px; border-top: 1px solid #b5bccc; min-width: 0; } .rs-interest { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } /* 관심검색 태그 바 (Frame2562 스타일을 rs-*에 맞춤) */ .rs-interest--bar { height: 56px; padding: 0 20px; margin: 0; background: #ffffff; border-bottom: 1px solid #b5bccc; overflow: hidden; } .rs-interest--bar + .rs-main { border-top: 0; } .rs-interest__label { flex-shrink: 0; width: 51px; text-align: right; font-weight: 500; font-size: 14px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .rs-interest__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rs-interest__chips--scroll { flex: 1; min-width: 0; } .rs-interest--bar .rs-interest__label { width: auto; text-align: left; white-space: nowrap; } .rs-interest--bar .rs-interest__chips--scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .rs-interest--bar .rs-interest__chips--scroll::-webkit-scrollbar { display: none; } /* 관심검색 태그 바: 한 줄 스크롤(모바일) */ @media (max-width: 768px) { .rs-interest--bar { gap: 12px; height: auto; min-height: 52px; padding: 10px 16px; } } .rs-chip { height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 8px; background: transparent; font-weight: 500; font-size: 13px; letter-spacing: -0.52px; color: #657088; cursor: pointer; } .rs-line { border: none; border-top: 1px solid #b5bccc; margin: 0 0 16px; } .rs-form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 19px; } .rs-label { flex-shrink: 0; width: 52px; font-weight: 500; font-size: 14px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .rs-inline { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .rs-input, .rs-select { height: 39px; padding: 0 12px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; min-width: 0; width: 100%; box-sizing: border-box; } /* 셀렉트 드롭다운에서 옵션 포커스/선택 시 배경 (브라우저·OS 네이티브 리스트는 일부만 적용) */ .rsl-search select option:hover, .rsl-search select option:focus, .rsl-search select option:active, .rsl-search select option:checked { background: var(--Sub-Gray-25, #F1F3F8); color: #111; } .rs-input::placeholder { color: #b5bccc; } .rs-input--full { flex: 1; } .rs-input--unit { width: 90px; flex: none; } .rs-txt { font-weight: 300; font-size: 15px; color: #111; flex-shrink: 0; } .rs-unit { font-size: 15px; color: #657088; flex-shrink: 0; } .rs-btn-add { height: 39px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; } .rs-btn-link { height: 39px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; } #rslYongdoGroup { flex: 1 1 0; min-width: 0; } #rslYongdoDetail { flex: 1 1 0; min-width: 0; } #rslBtnYongdoMulti { flex-shrink: 0; white-space: nowrap; } /* 법원별 검색(landcourt): 매각기일 날짜 필드 — position·flex */ .rc-search .rs-form-pair .rs-field.date { position: relative; flex: 1 1 0; min-width: 0; } .rc-search .rs-form-pair .rs-field.date input.rs-input { padding-right: 32px; /* 캘린더 아이콘 공간 */ } /* 법원별 검색(landcourt): 감정가대비 라벨 — "감정가대비" 5자 모두 표시 */ .rc-search .rs-form-pair .rs-form-row--gamdb > .rs-label { white-space: nowrap; overflow: visible; width: auto !important; flex-shrink: 0; } /* 물건구분 복수선택: 패널을 행 아래 전체 너비로 (landsearch_box — rs-yongdo-multi) */ .rs-form-row--yongdo { flex-direction: column; align-items: stretch; gap: 8px; } .rs-form-row__line--yongdo { display: flex; align-items: center; gap: 20px; width: 100%; min-width: 0; } .rs-form-row--yongdo > .rs-form-row__line--yongdo > .rs-label { flex-shrink: 0; width: 52px; font-weight: 500; } .rs-form-row--status-combo > .rs-label { font-weight: 500; } .rs-inline--yongdo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .rs-btn-yongdo-multi { flex-shrink: 0; white-space: nowrap; } .rs-region-selected--yongdo { align-self: flex-end; width: auto; max-width: calc(100% - 72px); margin-top: 0; } /* addyongdo(피그마) 레이아웃 — 검색박스 톤에 맞춤 */ /* 표시는 HTML hidden 속성만 사용 (display:none + is-open 이중 조건 제거) */ .rs-yongdo-multi { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 1px solid #b5bccc; border-radius: 0; background: #fff; max-height: 360px; overflow: auto; } .rs-yongdo-multi[hidden] { display: none !important; } .rs-yongdo-multi__group { display: grid; grid-template-columns: 124px 1fr; gap: 0 24px; padding: 0px 0px; align-items: stretch; border-top: 1px solid #d0d5e2; position: relative; /* 좌측 헤더 영역 배경이 "칸 전체"로 보이게 하기 위한 값 */ --yongdo-left-col: 124px; --yongdo-side-pad: 16px; } .rs-yongdo-multi__group:first-child { border-top: none; } /* 좌측(그룹명) 칸 전체 배경 처리: label 내부 배경/라운딩 영향 제거 */ .rs-yongdo-multi__group::before { content: ""; position: absolute; left: var(--yongdo-side-pad); top: 0; bottom: 0; width: var(--yongdo-left-col); background: #f6f9ff; z-index: 0; } .rs-yongdo-multi__all { position: relative; z-index: 1; background: transparent; } .rs-yongdo-multi__chips { position: relative; z-index: 1; } .rs-yongdo-multi__all { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; line-height: 21px; letter-spacing: -0.56px; /* 요청: 그룹 전체 헤더를 파랑계열 배경으로 */ background: #f6f9ff; color: #4e7ff0; padding: 10px 10px; border-radius: 0; cursor: pointer; position: relative; width: 100%; box-sizing: border-box; align-self: stretch; } /* 헤더 줄에만 "네모 박스" 표시 (실제 체크표시는 노출하지 않음) */ .rs-yongdo-multi__all::before { content: ""; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #d0d5e2; /* 체크박스 박스도 헤더 파랑 톤에 맞춰서 "왼쪽 일부 하얗게 보이는" 현상 제거 */ background: #f6f9ff; flex: 0 0 16px; } /* 체크되면 네모를 "체크된 표시"로 */ .rs-yongdo-multi__all:has(input:checked)::before { background: var(--Text-Point1, #4E7FF0); border-color: var(--Text-Point1, #4E7FF0); } .rs-yongdo-multi__all:has(input:checked)::after { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-50%) rotate(-45deg); } .rs-yongdo-multi__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 18px; row-gap: 0px; padding-top: 2px; } .rs-yongdo-multi__chip { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 25px; min-width: 0; flex: 0 0 auto; width: 100%; padding: 0; border: none; border-radius: 0; background: transparent; font-weight: 500; font-size: 15px; line-height: 19.5px; letter-spacing: -0.52px; color: #505050; cursor: pointer; box-sizing: border-box; gap: 10px; position: relative; } /* 칩을 체크박스처럼 보이게: input은 숨기되, 라벨의 is-selected 상태로 체크 표시 */ .rs-yongdo-multi__chip::before { content: ""; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #d0d5e2; background: #fff; flex: 0 0 16px; } .rs-yongdo-multi__chip::after { content: ""; position: absolute; /* 체크박스(16px) 중앙 기준으로 미세 오프셋 */ left: 4px; top: 50%; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-50%) rotate(-45deg); opacity: 0; } .rs-yongdo-multi__chip.is-selected { color: #4e7ff0; } .rs-yongdo-multi__chip.is-selected::before { background: #4e7ff0; border-color: #4e7ff0; } .rs-yongdo-multi__chip.is-selected::after { opacity: 1; } .rs-yongdo-multi__chip:hover { color: #111111; } /* 체크박스 UI는 숨기고(기능은 유지), 라벨 클릭으로 선택 */ .rs-yongdo-multi__chip input, .rs-yongdo-multi__all input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rs-btn-pyeong { height: 39px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; flex-shrink: 0; } /* 소재지 검색: 토지·건물면적 — 열 끝까지 입력칸이 늘어나도록(고정 max-width 없음) */ .rsoz-search .rs-inline--area { flex-wrap: wrap; align-items: center; row-gap: 8px; width: 100%; min-width: 0; } .rsoz-search .rs-form-pair .rs-form-row:has(> .rs-inline--area) { min-width: 0; } .rsoz-search .rs-form-pair .rs-form-row:has(> .rs-inline--area) > .rs-inline--area { flex: 1 1 0; min-width: 0; } .rsoz-search .rs-form-pair .rs-inline--area > input.rs-input { flex: 1 1 0; min-width: 0; max-width: none; width: auto; box-sizing: border-box; } .rsoz-search .rsoz-main input.rs-input[name="larea_min"]::placeholder, .rsoz-search .rsoz-main input.rs-input[name="larea_max"]::placeholder, .rsoz-search .rsoz-main input.rs-input[name="barea_min"]::placeholder, .rsoz-search .rsoz-main input.rs-input[name="barea_max"]::placeholder { color: #b5bccc; opacity: 1; } .rsoz-search .rsoz-main input.rs-input[name="larea_min"]:not(:placeholder-shown), .rsoz-search .rsoz-main input.rs-input[name="larea_max"]:not(:placeholder-shown), .rsoz-search .rsoz-main input.rs-input[name="barea_min"]:not(:placeholder-shown), .rsoz-search .rsoz-main input.rs-input[name="barea_max"]:not(:placeholder-shown) { color: #111; } .rsoz-search .rsoz-main input.rs-input[name="larea_min"], .rsoz-search .rsoz-main input.rs-input[name="barea_min"] { padding-left: 15px; } .rs-form-row--region .rs-region { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .rs-form-row--region .rs-region .rs-region-select { width: 128px; flex-shrink: 0; } .rs-form-row--region .rs-region .rs-region-input { flex: 1; min-width: 0; max-width: 185px; } .rs-form-row--region .rs-region .rs-btn-add { flex-shrink: 0; } /* 검색지역 — PC: 왼쪽 라벨 + 헤드(탭만) + 패널 / 모바일: 한 줄 「검색지역 | 지역·법원 | +추가」 + 2×2 그리드 */ .rs-label--region-mobile { display: none; margin: 0; width: auto; flex-shrink: 0; } .rs-region-mobile-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .rs-btn-add--region-monly { display: none; } .rs-btn-add--region-donly { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rs-region--dynamic[data-rsl-active-area="court"] .rs-btn-add--region-monly { display: none !important; } @media (min-width: 768px) { .rs-label--region-mobile { display: none !important; } .rs-btn-add--region-monly { display: none !important; } .rs-region-mobile-head { width: auto; } .rs-label--region-desktop { position: static; width: 52px; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; border: 0; } } .rs-tabs { display: flex; background: #f1f3f8; border-radius: 4px; padding: 2px; } .rs-tab { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border-radius: 4px; color: #b5bccc; } .rs-tab--on { background: #4e7ff0; color: #fff; } .rs-form-row--region-grid { display: none; } .rs-form-row--region { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; } .rs-form-row--region .rs-region { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .rs-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-bottom: 19px; } .rs-form-pair--top { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0 16px; min-width: 0; width: 100%; } .rs-form-pair .rs-form-row { margin-bottom: 0; } .rs-form-pair .rs-inline, .rs-form-pair .rs-input--full { max-width: 488px; } .rsoz-search .rs-form-pair .rs-inline, .rsoz-search .rs-form-pair .rs-input--full, .rcar-search .rs-form-pair .rs-inline, .rcar-search .rs-form-pair .rs-input--full, /* 법원별 검색(landcourt): rs-form-pair 안 인라인도 열 너비까지 쓰기 — 종합검색(단독 rs-form-row)과 동일하게 */ .rc-search .rs-form-pair .rs-inline, .rc-search .rs-form-pair .rs-input--full { max-width: none; } /* 감정가·최저가 등 OptMoney 2칸이 칼럼 안에서 균등 확장 */ .rc-search .rs-form-pair .rs-inline > .rs-field, .rsoz-search .rs-form-pair .rs-inline > .rs-field { flex: 1; min-width: 0; } .rs-form-pair--top .rs-form-row--case .rs-inline, .rs-form-pair--top .rs-form-row--region .rs-region, .rs-form-grid .rs-form-row--case .rs-inline, .rs-form-grid .rs-form-row--region .rs-region { max-width: 488px; } .rs-form-pair--top .rs-form-row--case .rs-inline, .rs-form-grid .rs-form-row--case .rs-inline { gap: 6px; } .rs-form-pair--top .rs-form-row--case .rs-field, .rs-form-grid .rs-form-row--case .rs-field--year { flex: 0 0 100px; } /* .rs-expands .rs-expand:first-child { display: none; } .rs-expands { display: flex; flex-direction: column; margin-top: 16px; } .rs-expand { display: flex; align-items: center; justify-content: center; gap: 8px; height: 55px; border: none; border-bottom: 1px solid #b5bccc; background: #fff; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #111; cursor: pointer; } .rs-expand__icon { color: #4e7ff0; } */ .rs-footer { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 12px; } .rs-footer__left { display: flex; flex-direction: column; align-items: flex-start; padding-left: 20px; gap: 0px; } /* 저장 문구가 save-stack 안으로 들어간 경우 상단 여백은 .rs-footer__save-stack .rs-footer__saved 에서 제어 */ .rs-footer__left > .rs-footer__saved { margin-top: 0; } .rs-form-pair.foot{padding-bottom:16px;border-bottom:1px solid #B5BCCC;margin-bottom:0px;} .rs-form-contain.foot{padding-bottom:16px;border-bottom:1px solid #B5BCCC;} .rs-expands { display: flex; flex-direction: column; border-bottom: 1px solid #b5bccc; padding:16px 20px; } .rs-expands.underline { border-bottom: 1px solid #b5bccc; } .rs-expand { display: flex; align-items: center; justify-content: center; gap: 8px; /*height: 55px;*/ border: none; background: #fff; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #111; cursor: pointer; padding: 16px 0; } .rs-expand::before { content: "+"; color:#4E7FF0; } .rs-expand.active{justify-content: flex-start;} .rs-expand.active::before{ content: "-"; color:#4E7FF0;font-weight:800;} .rs-expand__icon { color: #4e7ff0; } .rs-footer__save { display: flex; align-items: center; gap: 8px; } /* 관심검색+저장 | 검색조건 불러오기 (landsearch_box 푸터) */ .rs-footer__save-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto; } .rs-footer__save-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; gap: 8px; flex-wrap: wrap; min-width: 0; } .rs-footer__save-stack .rs-footer__saved { margin-top: -8px; margin-bottom: 0; width: 100%; max-width: 100%; } .rs-footer__save .rs-label { width: auto; } .rs-link { border: none; background: none; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #4e7ff0; cursor: pointer; } .rs-link--load { font-weight: 400; margin-left: auto; } .rs-footer__saved { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #b5bccc; margin-top: 8px; } .rs-footer__btns { display: flex; gap: 8px; } .rs-btn-reset, .rs-btn-search { width: 100px; height: 51px; border-radius: 8px; font-weight: 500; font-size: 18px; letter-spacing: -0.72px; line-height: 27px; cursor: pointer; } .rs-btn-reset { border: 1px solid #b5bccc; background: #fff; color: #b5bccc; } .rs-btn-search { border: none; background: #4e7ff0; color: #fff; } .rs-form-pair.single { display: grid; grid-template-columns: 1fr; gap: 0 20px; padding:16px 0 0 0; margin-bottom: 19px; } @media (max-width: 767px) { .rs-txtsno {margin:0;} .rs-interest__chips2 .ts-txt{min-width:30px;} .btn-small10{margin-right:8px;white-space: nowrap;} .btn-small11{margin-right:8px;white-space: nowrap;} .rs-recommend__pills .inner{width:1000px;display: flex;} .rs-interest__chips .inner{width:1000px;display: flex;} .rs-interest__chips2 .inner{display: grid;grid-template-columns: 100px 40px 1fr;padding-right:8px;} .rs-interest__chips3 .inner{display: grid;grid-template-columns: 1fr 1fr 68px;padding-right:8px;} .rs-form-pair.single { display: grid; grid-template-columns: 1fr; gap: 0 20px; padding:16px 0 0 0; } .rs-pill-more { font-size: 12px; letter-spacing: -0.48px; min-width: 120px; } .rs-recommend__pills { width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; } .rs-recommend__pills > * { flex: 0 0 auto; } .rs-form-pair .rs-form-row { flex-direction: row; align-items: center; gap: 8px; } .rs-interest__chips { overflow: hidden; overflow-x: scroll; } .rsl-heading { width: 100%; padding: 20px 16px 12px; background: #ffffff; } .rsl-heading__title { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; } .rs { max-width: 100%; min-width: 0; } .rs-recommend { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 50px; padding: 15px 16px 12px; gap: 8px; } .rs-recommend__title { font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-pill { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-pill-more { font-size: 12px; letter-spacing: -0.48px; } .rs-main { padding: 16px 16px 24px; border-top: none; min-width: 0; } .rs-interest { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 0; padding: 12px 0 16px; } .rs-interest__label { width: auto; text-align: left; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-chip { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-line { border-color: #d0d5e2; margin: 0 0 16px; } .rs-form-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; min-width: 0; } .rs-label { width: auto; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-inline { width: 100%; } /* 매각기일 같은 2필드 범위 입력은 모바일에서 줄바꿈 허용 */ .rs-form-row .rs-inline { flex-wrap: wrap; } .rs-form-row .rs-inline > .rs-field.date { flex: 1 1 140px; min-width: 140px; } .rs-input, .rs-select { height: 36px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-input--full { width: 100%; } .rs-input--unit { width: 100%; max-width: none; } .rs-btn-add, .rs-btn-link, .rs-btn-pyeong { height: 36px; font-size: 13px; } #rslYongdoGroup { flex: 0 0 36%; } #rslYongdoDetail { flex: 1; min-width: 0; } /* 물건구분: 모바일 — 첫 줄 가로(라벨+콤보+복수선택), 패널은 아래 전체 너비 */ .rs-form-row--yongdo { flex-direction: column; align-items: stretch; gap: 8px; } .rs-form-row__line--yongdo { flex-direction: row; align-items: center; gap: 8px; width: 100%; min-width: 0; } .rs-form-row--yongdo > .rs-form-row__line--yongdo > .rs-label { flex-shrink: 0; flex: 0 0 28%; width: 28%; min-width: 72px; max-width: 34%; } .rs-inline--yongdo { flex: 1; min-width: 0; width: auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; } .rs-inline--yongdo #rslYongdoGroup { flex: 0 0 28%; min-width: 0; } .rs-inline--yongdo #rslYongdoDetail { flex: 1; min-width: 0; } .rs-inline--yongdo #rslBtnYongdoMulti, .rs-btn-yongdo-multi { flex-shrink: 0; white-space: nowrap; } .rs-form-pair { min-width: 0; overflow: hidden; } .rs-form-pair .rs-form-row { flex-direction: row; align-items: center; gap: 8px; } .rs-form-pair .rs-form-row .rs-label { flex-shrink: 0; width: 52px; } .rs-form-pair .rs-form-row .rs-inline, .rs-form-pair .rs-form-row .rs-input--full { flex: 1; min-width: 0; overflow: hidden; } .rs-form-pair .rs-inline { flex-wrap: nowrap; } .rs-form-pair .rs-inline .rs-input, .rs-form-pair .rs-inline .rs-select { min-width: 0; flex: 1; } .rs-form-pair .rs-txt, .rs-form-pair .rs-unit, .rs-form-pair .rs-btn-pyeong, .rsoz-search .rs-form-pair .rs-inline--area .btn-small13 { flex-shrink: 0; } .rs-form-pair .rs-input--unit { flex: 0 0 36px; min-width: 36px; max-width: 36px; } /* Frame 2226: 검색지역 셀렉트·지번 유지 (잘못된 display:none 제거) */ .rs-label--region-desktop { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 모바일 검색지역 상단: 피그마 — 라벨 + 토글 + 추가 한 줄 */ .rs-label--region-mobile { display: inline !important; } .rs-region-mobile-head { width: 100%; flex-wrap: nowrap; gap: 8px; margin-bottom: 2px; } .rs-region-mobile-head .rs-tabs { flex-shrink: 0; } .rs-btn-add--region-monly { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; } .rs-btn-add--region-donly { display: none !important; } .rs-region--dynamic[data-rsl-active-area="court"] .rs-btn-add--region-monly { display: none !important; } .rs-form-row--region { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; position: relative; } .rs-form-row--region .rs-region { width: 100%; flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 10px; } .rs-form-row--region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 0; margin-bottom: 12px; } .rs-form-row--region-grid .rs-input { grid-column: span 2; } .rs-form-pair { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } .rs-form-pair .rs-form-row { margin-bottom: 0; } .rs-form-pair .rs-inline, .rs-form-pair .rs-input--full { max-width: none; } .rs-form-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px 8px; } /* mosearch 정렬: 카드 안 그리드는 좌우 패딩 rs-main에만 맡김 */ .rsl-search .rsl-search__card .rs-form-grid { padding-left: 0; padding-right: 0; } .rsl-search form.rs--search-card { border: none; background: transparent; } .rsl-search .rsl-search__card { border: 1px solid #b5bccc; background: #fff; overflow: hidden; } /* 종합검색 그리드 행: 라벨 ~28% + 필드(검색지역·물건용도 블록 제외) — 모바일 시안 */ .rsl-search .rs-form-grid > .rs-form-row:not(.rs-form-row--region):not(.rs-form-row--yongdo) { flex-direction: row; align-items: flex-start; gap: 10px; } .rsl-search .rs-form-grid > .rs-form-row:not(.rs-form-row--region):not(.rs-form-row--yongdo) > .rs-label { flex: 0 0 28%; width: 28%; min-width: 72px; max-width: 34%; flex-shrink: 0; padding-top: 8px; } .rsl-search .rs-form-grid > .rs-form-row:not(.rs-form-row--region):not(.rs-form-row--yongdo) > .rs-inline { flex: 1; min-width: 0; width: auto; } .rsl-search .rs-form-grid > .rs-form-row--gamdb > .rs-label { width: 28%; min-width: 72px; max-width: 34%; flex: 0 0 28%; white-space: normal; } /* 모바일: 물건상태 라벨 → 진행상태 */ .rsl-search .rs-label__mob-only { display: inline !important; } .rsl-search .rs-label__desk-only { display: none !important; } .rsl-search .rs-label__yongdo-mob { display: inline !important; } .rsl-search .rs-label__yongdo-desk { display: none !important; } /* 모바일 진행상태: 시안처럼 단일 셀렉트만(유찰·회 숨김) */ .rsl-search .rs-form-row--status-combo .rs-inline--status-combo { flex-direction: column; align-items: stretch; gap: 0; } .rsl-search .rs-form-row--status-combo .rs-field--status { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; } .rsl-search .rs-form-row--status-combo .rs-field--status .status-select, .rsl-search .rs-form-row--status-combo .rs-field--status select { width: 100%; } .rsl-search .rs-form-row--status-combo .rs-label-inline, .rsl-search .rs-form-row--status-combo select[name="uchal_min"], .rsl-search .rs-form-row--status-combo select[name="uchal_max"] { display: none !important; } .rsl-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt { display: none !important; } .rsl-search .rs-form-grid > .rs-form-row--status-combo { align-items: center; } .rsl-search .rs-form-grid > .rs-form-row--status-combo > .rs-label { padding-top: 0; align-self: center; } /* 추가 조건: 구분선 + 텍스트형 버튼 */ .rsl-search .rsl-search__more-wrap { width: 100%; display: flex; justify-content: center; align-items: center; margin: 12px 0 10px; padding-top: 14px; border-top: 1px solid #d0d5e2; grid-column: 1 / -1; } .rsl-search .rsl-search__more-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: none; border-radius: 6px; background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.52px; color: #4e7ff0; cursor: pointer; } .rsl-search .rsl-search__more-btn.is-open { background: rgba(78, 127, 240, 0.08); } .rsl-search .rsl-search__more-btn:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rsl-search .rsl-search-extra:not(.is-open) { display: none !important; } .rsl-search .rsl-search-extra.is-open { display: block; width: 100%; grid-column: 1 / -1; } .rs-form-title { font-size: 20px; padding: 0 16px; margin-bottom: 10px; } .rs-form-pair--top .rs-form-row { flex-direction: column; align-items: flex-start; gap: 8px; } .rs-form-pair--top .rs-form-row .rs-label { width: auto; } /* 사건번호: 라벨 왼쪽, 연도·타경·번호 한 줄 */ .rs-form-pair--top .rs-form-row--case, .rs-form-grid .rs-form-row--case { flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; } .rs-form-pair--top .rs-form-row--case .rs-label, .rs-form-grid .rs-form-row--case .rs-label { flex: 0 0 28%; width: 28%; min-width: 72px; max-width: 34%; flex-shrink: 0; } .rs-form-pair--top .rs-form-row--case .rs-inline, .rs-form-grid .rs-form-row--case .rs-inline { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .rs-form-pair--top .rs-form-row--case .rs-field--year, .rs-form-grid .rs-form-row--case .rs-field--year { flex: 0 0 30%; max-width: 120px; min-width: 72px; } .rs-form-pair--top .rs-form-row--case .rs-field--year .rs-select, .rs-form-pair--top .rs-form-row--case .rs-field--year select, .rs-form-grid .rs-form-row--case .rs-field--year .rs-select, .rs-form-grid .rs-form-row--case .rs-field--year select { width: 100%; min-width: 0; } .rs-form-pair--top .rs-form-row--case .rs-txt, .rs-form-grid .rs-form-row--case .rs-txt { flex-shrink: 0; } .rs-form-pair--top .rs-form-row--case input[name="sno"], .rs-form-grid .rs-form-row--case input[name="sno"] { flex: 1; min-width: 0; } .rs-form-pair--top .rs-form-row .rs-inline, .rs-form-pair--top .rs-form-row .rs-region, .rs-form-grid .rs-form-row .rs-inline, .rs-form-grid .rs-form-row .rs-region { width: 100%; max-width: none; } .rs-form-pair--top .rs-form-row--case .rs-inline, .rs-form-grid .rs-form-row--case .rs-inline { width: auto; max-width: none; } .rs-expands .rs-expand:first-child { display: flex; } .rs-expand { height: 47px; font-size: 13px; letter-spacing: -0.52px; } .rsl-search .rs-expands > button.rs-expand:not(.rs-expand--sr-only) { height: 31px; min-height: 31px; max-height: 31px; } .rs-expand:first-child .rs-expand__icon + * { font-size: 13px; } .rs-footer { flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 16px; } .rs-footer__save { flex-wrap: wrap; } .rs-link { font-size: 13px; letter-spacing: -0.52px; } .rs-footer__saved { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-footer__btns { width: 100%; display: flex; gap: 8px; justify-content: flex-end; } .rs-btn-reset, .rs-btn-search { flex: 1; width: auto; height: 47px; font-size: 13px; letter-spacing: -0.6px; line-height: 22.5px; } } /* html, body { margin: 0; padding: 0; } body { font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; background: #ffffff; overflow-x: hidden; } */ .rsl-page { display: flex; flex-direction: column; gap: 24px; } .rsl-search .rs { margin: 0 auto; } .rsl-search .rs-field { flex: 1; min-width: 0; } .rsl-search .rs-field--status { flex: 1 1 160px; min-width: 140px; max-width: 260px; } .rsl-search .rs-inline > .rs-field { display: flex; min-width: 0; position: relative; } .rsl-search .rs-field--year select { height: 31px; padding: 0 10px; border: 1px solid #b5bccc !important; border-radius: 8px !important; background: #fff; /* -webkit-appearance: none; appearance: none; */ } .rsl-search .rs select, .rsl-search .rs input[type="text"], .rsl-search .rs input[type="search"] { width: 100%; height: 31px; box-sizing: border-box; padding: 0 10px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 500; line-height: 29px; letter-spacing: -0.6px; color: #111; min-width: 0; } /* 검색박스: 버튼 높이 31px(select/input과 통일). 지역복수 모달(.rs-region-addj) 내부는 아래에서 원복 */ .rsl-search .rs .rs-btn-add, .rsl-search .rs .rs-tab, .rsl-search .rs-recommend .btn-small10, .rsl-search .rs-main .btn-small10, .rsl-search .rs-main .btn-small12, .rsl-search .rs-main .btn-small13, .rsl-search .rs-main .btn-small14, .rsl-search .rs-main .btn-small15, .rc-search .rs-recommend .btn-small10, .rc-search .rc-main .btn-small10, .rc-search .rc-main .btn-small12, .rc-search .rc-main .btn-small13, .rc-search .rc-main .btn-small14, .rc-search .rc-main .btn-small15, .rc-search .rs-footer .btn-small14, .rc-search .rs-footer .btn-small15, .rsoz-search .rs-recommend .btn-small10, .rsoz-search .rsoz-main .btn-small10, .rsoz-search .rsoz-main .btn-small12, .rsoz-search .rsoz-main .btn-small13, .rsoz-search .rsoz-main .btn-small14, .rsoz-search .rsoz-main .btn-small15, .rsoz-search .rs-footer .btn-small14, .rsoz-search .rs-footer .btn-small15, .rcar-search .rs-recommend .btn-small10, .rcar-search .rc-main .btn-small10, .rcar-search .rc-main .btn-small12, .rcar-search .rc-main .btn-small13, .rcar-search .rc-main .btn-small14, .rcar-search .rc-main .btn-small15, .rcar-search .rs-footer .btn-small14, .rcar-search .rs-footer .btn-small15, .rsl-search .rs-expands > button.rs-expand:not(.rs-expand--sr-only), .rsl-search .rs-footer button.rs-link, .rc-search .rs-footer button.rs-link, .rsoz-search .rs-footer button.rs-link, .rcar-search .rs-footer button.rs-link { height: 40px; min-height: 31px; max-height: 40px; box-sizing: border-box; line-height: 29px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; } .rsl-search .rs-recommend .btn-small10, .rsl-search .rs-main .btn-small10, .rc-search .rs-recommend .btn-small10, .rc-search .rc-main .btn-small10, .rsoz-search .rs-recommend .btn-small10, .rsoz-search .rsoz-main .btn-small10, .rcar-search .rs-recommend .btn-small10, .rcar-search .rc-main .btn-small10 { padding-left: 12px; padding-right: 12px; } .rsl-search .rs .btn-small12, .rsl-search .rs .btn-small13, .rc-search .rc-main .btn-small12, .rc-search .rc-main .btn-small13, .rsoz-search .rsoz-main .btn-small12, .rsoz-search .rsoz-main .btn-small13, .rcar-search .rc-main .btn-small12, .rcar-search .rc-main .btn-small13 { padding-left: 10px; padding-right: 10px; position: relative; } .rsl-search .rs .btn-small13, .rc-search .rc-main .btn-small13, .rsoz-search .rsoz-main .btn-small13, .rcar-search .rc-main .btn-small13 { padding-left: 28px; } .rsl-search .rs .btn-small13::before, .rc-search .rc-main .btn-small13::before, .rsoz-search .rsoz-main .btn-small13::before, .rcar-search .rc-main .btn-small13::before { margin: 0; left: 10px; top: 50%; transform: translateY(-50%); position: absolute; } .rsl-search .rs .btn-small14, .rsl-search .rs .btn-small15, .rc-search .rs-footer .btn-small14, .rc-search .rs-footer .btn-small15, .rsoz-search .rs-footer .btn-small14, .rsoz-search .rs-footer .btn-small15, .rcar-search .rs-footer .btn-small14, .rcar-search .rs-footer .btn-small15 { width: auto; min-width: 80px; padding-left: 14px; padding-right: 14px; font-size: 14px; position: relative; } .rsl-search .rs .btn-small14::before, .rc-search .rs-footer .btn-small14::before, .rsoz-search .rs-footer .btn-small14::before, .rcar-search .rs-footer .btn-small14::before { margin: 0; left: 10px; top: 50%; transform: translateY(-50%); position: absolute; } /* PC 전용: 푸터 초기화·검색 (높이 54px, 너비 100px, 글자 15px, 오른쪽 여백) */ @media (min-width: 768px) { .rsl-search .rs-footer .rs-footer__btns, .rc-search .rs-footer .rs-footer__btns, .rsoz-search .rs-footer .rs-footer__btns, .rcar-search .rs-footer .rs-footer__btns { padding-right: 20px; box-sizing: border-box; } .rsl-search .rs-footer .rs-footer__btns .btn-small14, .rsl-search .rs-footer .rs-footer__btns .btn-small15, section.rsl-search form.rs .rs-footer .rs-footer__btns button.btn-small14, section.rsl-search form.rs .rs-footer .rs-footer__btns button.btn-small15, .rc-search .rs-footer .rs-footer__btns .btn-small14, .rc-search .rs-footer .rs-footer__btns .btn-small15, .rsoz-search .rs-footer .rs-footer__btns .btn-small14, .rsoz-search .rs-footer .rs-footer__btns .btn-small15, .rcar-search .rs-footer .rs-footer__btns .btn-small14, .rcar-search .rs-footer .rs-footer__btns .btn-small15 { width: 100px !important; min-width: 100px !important; max-width: 100px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; font-size: 18px !important; letter-spacing: -0.6px !important; box-sizing: border-box !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 푸터: 검색조건 불러오기(초기화 왼쪽, .rs-footer 직계 자식) — 높이·세로 가운데 */ .rsl-search .rs-footer > .rs-footer__load, section.rsl-search form.rs .rs-footer > button.rs-footer__load { height: 54px !important; min-height: 54px !important; max-height: none !important; line-height: 1.25 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* PC 종합검색 푸터: 관심검색·저장요약(왼쪽) | 불러오기·초기화·검색(오른쪽) */ .rsl-search .rs-footer { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: nowrap; gap: 12px; } .rsl-search .rs-footer__left { flex: 1 1 auto; min-width: 0; padding-left: 20px; } .rsl-search .rs-footer > .rs-footer__load { flex: 0 0 auto; align-self: center; white-space: nowrap; } .rsl-search .rs-footer__btns { flex-shrink: 0; } } @media (max-width: 767px) { .rsl-search .rs-footer > .rs-footer__load, section.rsl-search form.rs .rs-footer > button.rs-footer__load { height: 51px !important; min-height: 51px !important; max-height: none !important; line-height: 1.25 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } .rsl-search .rs-footer button.rs-link, .rc-search .rs-footer button.rs-link, .rsoz-search .rs-footer button.rs-link, .rcar-search .rs-footer button.rs-link { padding-left: 8px; padding-right: 8px; font-size: 14px; border: none; background: none; font-weight: 500; color: #4e7ff0; text-decoration: none; } /* 검색지역·물건구분 등: 안내(placeholder)만 회색, 선택값·드롭다운 옵션은 검정 */ .rsl-search .rs select.addr-select, .rsl-search .rs select.rsl-ph-select, .rc-search select.rsl-ph-select, .rc-search select.rs-select, .rc-search select.addr-select, .rsoz-search select.rsl-ph-select, .rsoz-search select.rs-select, .rsoz-search select.addr-select, .rcar-search select.rsl-ph-select, .rcar-search select.rs-select, .rcar-search select.addr-select { color: #111; } .rsl-search .rs select.addr-select.is-placeholder, .rsl-search .rs select.rsl-ph-select.is-placeholder, .rc-search select.rsl-ph-select.is-placeholder, .rc-search select.rs-select.is-placeholder, .rc-search select.addr-select.is-placeholder, .rsoz-search select.rsl-ph-select.is-placeholder, .rsoz-search select.rs-select.is-placeholder, .rsoz-search select.addr-select.is-placeholder, .rcar-search select.rsl-ph-select.is-placeholder, .rcar-search select.rs-select.is-placeholder, .rcar-search select.addr-select.is-placeholder { color: #b5bccc; } .rsl-search .rs select.addr-select option, .rsl-search .rs select.rsl-ph-select option, .rc-search select.rsl-ph-select option, .rc-search select.rs-select option, .rc-search select.addr-select option, .rsoz-search select.rsl-ph-select option, .rsoz-search select.rs-select option, .rsoz-search select.addr-select option, .rcar-search select.rsl-ph-select option, .rcar-search select.rs-select option, .rcar-search select.addr-select option { color: #111; } /* 입력창 placeholder 색상(검색박스 공통) */ .rc-search input.rs-input::placeholder, .rcar-search input.rs-input::placeholder { color: #b5bccc; opacity: 1; } .rsoz-search input.rs-input::placeholder { color: #b5bccc; opacity: 1; } .rsl-search .rs-region-panel[data-rsl-panel="region"] input.rs-input[name^="bunji"]::placeholder { color: #b5bccc; opacity: 1; } .rsl-search .rs-region-panel[data-rsl-panel="region"] input.rs-input[name^="bunji"]:not(:placeholder-shown) { color: #111; } .rsl-search .rs input.rs-input[name="larea_min"]::placeholder, .rsl-search .rs input.rs-input[name="larea_max"]::placeholder, .rsl-search .rs input.rs-input[name="barea_min"]::placeholder, .rsl-search .rs input.rs-input[name="barea_max"]::placeholder { color: #b5bccc; opacity: 1; } .rsl-search .rs input.rs-input[name="larea_min"]:not(:placeholder-shown), .rsl-search .rs input.rs-input[name="larea_max"]:not(:placeholder-shown), .rsl-search .rs input.rs-input[name="barea_min"]:not(:placeholder-shown), .rsl-search .rs input.rs-input[name="barea_max"]:not(:placeholder-shown) { color: #111; } /* 토지면적 최소: placeholder·입력 시작 위치를 살짝 오른쪽으로 */ .rsl-search .rs input.rs-input[name="larea_min"] { padding-left: 15px; } /* 건물면적 최소: placeholder·입력 시작 위치 */ .rsl-search .rs input.rs-input[name="barea_min"] { padding-left: 15px; } .rsl-search .rs input[type="text"]::placeholder, .rsl-search .rs input[type="search"]::placeholder { color: #b5bccc; } .rs-form-row .rs-inline .input_effect{position:relative;} .rs-form-row .rs-inline .input_effect::after { content: "㎡"; position:absolute; color:#657088; font-weight:500; right:14px; top:8px; font-size:15px; } .rsl-search .rs-form-row .rs-inline .input_effect::after { top: 50%; transform: translateY(-50%); } .rsl-search .rs .w100 { width: 100%; } .rsl-search .rs .rs-tabs { flex-shrink: 0; } .rsl-search .rs .rs-tab { border: none; background: transparent; cursor: pointer; } .rsl-search .rs .rs-tab.rs-tab--on { background: #4e7ff0; color: #fff; } .rsl-search .rs-region--dynamic { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; } .rsl-search .rs-region-panel { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; } .rsl-search .rs-region-panel[hidden] { display: none !important; } .rsl-search .rs-region-panel select { flex: 1 1 118px; width: auto; min-width: 72px; max-width: 128px; } .rsl-search .rs-region-panel input[type="text"] { flex: 1 1 120px; min-width: 96px; max-width: 175px; } .rsl-search .rs-region-panel .rs-btn-add--region-donly { flex-shrink: 0; } /* 검색지역 +추가(addj 스타일) */ .rsl-search .rs-region-addj { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 760px); max-height: min(82vh, 640px); overflow: auto; margin: 0; padding: 20px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; z-index: 1002; } .rsl-search .rs-region-addj[hidden] { display: none !important; } .rsl-search .rs-region-addj-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.45); z-index: 1001; } .rsl-search .rs-region-addj-backdrop[hidden] { display: none !important; } .rsl-search .rs-region-addj__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; } .rsl-search .rs-region-addj__head > strong { font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .rsl-search .rs-region-addj__close { width: 28px; height: 28px; border: none; background: transparent; color: #657088; font-size: 24px; line-height: 1; cursor: pointer; } .rsl-search .rs-region-addj__rows { display: flex; flex-direction: column; gap: 8px; } .rsl-search .rs-region-addj__row { display: flex; align-items: center; gap: 8px; } .rsl-search .rs-region-addj__row[hidden] { display: none !important; } .rsl-search .rs-region-addj__label { flex: 0 0 52px; margin: 0; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.56px; color: #111; } .rsl-search .rs-region-addj__fields { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; } .rsl-search .rs-region-addj__fields select { flex: 1 1 118px; min-width: 72px; max-width: 128px; } .rsl-search .rs-region-addj__fields input[type="text"] { flex: 1 1 120px; min-width: 96px; max-width: 175px; } .rsl-search .rs-region-addj__remove { flex: 0 0 30px; width: 30px; height: 36px; border: none; border-radius: 8px; background: #d0d5e2; color: #fff; font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; cursor: pointer; } .rsl-search .rs-region-addj__add { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 39px; margin-top: 12px; border: none; border-radius: 8px; background: #f1f3f8; color: #657088; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.56px; cursor: pointer; } .rsl-search .rs-region-addj__footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .rsl-search .rs-region-addj__btn { width: 100px; height: 44px; border-radius: 8px; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; cursor: pointer; } .rsl-search .rs-region-addj__btn--reset { border: 1px solid #b5bccc; background: #fff; color: #b5bccc; } .rsl-search .rs-region-addj__btn--submit { border: none; background: #4e7ff0; color: #fff; } .rsl-search .rs-region-selected { flex: 1 0 100%; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f6f9ff; color: #505050; font-size: 13px; line-height: 19px; letter-spacing: -0.52px; } .rsl-search .rs-region-selected strong { color: #4e7ff0; font-weight: 600; margin-right: 6px; } .rsl-search .rs-region-selected .rs-region-summary__title { color: #4e7ff0; font-weight: 600; margin-right: 6px; } .rsl-search .rs-region-summary__items { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; vertical-align: middle; } .rsl-search .rs-region-summary__item { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; } .rsl-search .rs-region-summary__text { word-break: break-word; } .rsl-search .rs-region-summary__remove { flex-shrink: 0; width: 22px; height: 22px; padding: 0; margin: 0; border: none; border-radius: 4px; background: transparent; color: #b5bccc; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rsl-search .rs-region-summary__remove:hover { background: rgba(78, 127, 240, 0.12); color: #4e7ff0; } /* 물건용도 선택 칩 — 세부종류 선택 시 하단 1열에 누적 (지역 summary 와 동일 톤) */ .rsl-search .rs-yongdo-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f6f9ff; } .rsl-search .rs-yongdo-selected[hidden] { display: none; } .rsl-search .rs-yongdo-selected__chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 16px; background: #fff; border: 1px solid #d6e0fb; color: #4e7ff0; font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: -0.52px; } .rsl-search .rs-yongdo-selected__txt { word-break: keep-all; } .rsl-search .rs-yongdo-selected__x { flex-shrink: 0; width: 20px; height: 20px; padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent; color: #b5bccc; font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rsl-search .rs-yongdo-selected__x:hover { background: rgba(78, 127, 240, 0.12); color: #4e7ff0; } body.is-region-addj-open { overflow: hidden; } .rs-form-pair--top .rs-form-row--region .rs-region, .rs-form-grid .rs-form-row--region .rs-region { max-width: none; min-width: 0; } .rsl-yongdo-panel, .rsl-special-panel { margin: 3px 0 16px 0px; padding: 16px; /* border: 1px solid #d0d5e2;*/ border-radius: 8px; background: #fff; } .rsl-yongdo-panel[hidden], .rsl-special-panel[hidden] { display: none; } .rsl-yongdo-panel { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; } .rsl-yongdo-panel__menu { display: flex; flex-direction: column; gap: 8px; } .rsl-yongdo-panel__menu-btn { height: 40px; padding: 0 12px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; color: #505050; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; text-align: left; cursor: pointer; } .rsl-yongdo-panel__menu-btn.is-active { border-color: #4e7ff0; background: #e8f1ff; color: #4e7ff0; } .rsl-yongdo-panel__all { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-yongdo-panel__chips, .rsl-special-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; } /* (원복) 특수조건 복수선택 영역 상단 헤더 스타일 제거 */ .rsl-yongdo-chip, .rsl-special-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d0d5e2; border-radius: 999px; background: #fff; color: #505050; font-size: 13px; font-weight: 500; line-height: 19.5px; letter-spacing: -0.52px; cursor: pointer; } .rsl-yongdo-chip input, .rsl-special-chip input, .rsl-special-option input, .rsl-yongdo-panel__all input { margin-right: 8px; } .rsl-yongdo-chip.is-selected, .rsl-special-chip.is-selected { border-color: #4e7ff0; background: #e8f1ff; color: #4e7ff0; } .rsl-special-panel { display: grid; grid-template-columns: 220px 1px minmax(0, 1fr); gap: 16px; align-items: start; } .rsl-special-panel__side { display: flex; flex-direction: column; gap: 12px; } .rsl-special-option { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; cursor: pointer; } /* (원복) 특수조건 단일선택 select 스타일 제거 */ .rsl-special-panel__line { width: 1px; min-height: 100%; background: #d0d5e2; } .rsl-list .list-wrapper { max-width: 1200px; } .rsl-list .rsl-list__main { width: 1200px; min-height: 730px; position: relative; } .rsl-list .rsl-list__header { width: 100%; } .rsl-list .rsl-list__toolbar { width: 100%; } .rsl-list .rsl-list__count { padding: 4px 0 0 20px; } .rsl-list .rsl-list__controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 0 20px; min-height: 47px; } .rsl-list .rsl-list__controls .rsl-list__sort { margin-left: auto; margin-right: 12px; } .rsl-list .rsl-list__recommend { display: flex; align-items: center; gap: 8px; } .rsl-list .rsl-list__sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rsl-list .rsl-list__perpage { width: 89.33px; height: 39px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #b5bccc; border-radius: 8px; } .rsl-list .rsl-list__thead { display: flex; align-items: center; width: 100%; height: 56px; background: #f6f9ff; margin-top: 12px; padding: 0 15px; } .rsl-list .rsl-list__body { width: 100%; padding-left: 15px; } .rsl-list .rsl-list__pagination { display: flex; align-items: center; justify-content: center; gap: 40px; width: 1200px; height: 28px; margin-top: 40px; margin-bottom: 0; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .rsl-special-panel_innerop { display: flex; flex-direction: column; gap: 12px; width:100%; } .rsl-special-inneroption { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel-block { display: flex; flex-wrap: wrap; gap: 8px; } .rsl-special-panel { display:none; animation: fade-out 1s; animation-fill-mode: forwards; } .rsl-special-panel.show { display: grid; grid-template-columns: 220px 1px minmax(0, 1fr); gap: 16px; align-items: start; margin-top:32px; padding:0px 16px 0px 16px; animation: fade-in 1s; animation-fill-mode: forwards; } .rsl-special-panel__side { display: flex; flex-direction: column; gap: 12px; } .rsl-special-option { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel__line { width: 1px; min-height: 100%; background: #d0d5e2; } @media (max-width: 767px) { /* 기존 빈 ruleset 제거(린트 경고 방지) */ .rsl-page { gap: 16px; } .rsl-search { margin-top: 16px; padding: 0 16px; } .rsl-search .rs, .rsl-list .list-wrapper { max-width: 100%; } .rsl-search .rs select, .rsl-search .rs input[type="text"], .rsl-search .rs input[type="search"] { height: 36px; line-height: 19.5px; padding: 0 12px; font-size: 13px; letter-spacing: -0.52px; box-sizing: border-box; } .rsl-search .rs .rs-field--year select { height: 36px; line-height: 19.5px; padding: 0 12px; } .rsl-search .rs select, .rsl-search .rs input[type="text"], .rsl-search .rs input[type="search"] { border-radius: 6px; border-color: #d1d5db; } /* 모바일 검색지역: 그리드로 1행「라벨 | 탭 | 추가」/ 2행 패널은 탭과 같은 왼쪽 시작점(column 2) 첫 열 52px = 물건구분 라벨과 동일 → 시·도·동읍 열 시작 = 물건구분「전체」셀렉트와 왼쪽 정렬 */ .rsl-search .rs-form-row--region .rs-region--dynamic { display: grid; grid-template-columns: minmax(72px, 28%) 1fr auto; column-gap: 8px; row-gap: 10px; align-items: center; width: 100%; } .rsl-search .rs-region-mobile-head { display: contents; } .rsl-search .rs-label--region-mobile { grid-column: 1; grid-row: 1; margin: 0; align-self: center; justify-self: stretch; width: 100%; box-sizing: border-box; white-space: nowrap; display: flex !important; align-items: center; } .rsl-search .rs-tabs { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; } .rsl-search .rs-tab { width: auto; min-width: 48px; padding: 0 12px; font-weight: 500; color: #657088; } .rsl-search .rs-tab:not(.rs-tab--on) { color: #657088; } .rsl-search .rs-btn-add--region-monly { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; align-self: center; } /* 2행 패널: 탭 열(2)부터 추가 버튼 열(3) 끝까지 — 시·군·구·지번 오른쪽이 +추가와 같은 선상 */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]), .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) { grid-column: 2 / -1; grid-row: 2; width: 100%; min-width: 0; justify-self: stretch; } /* 지역 패널: DOM 순서 시도→시군구→읍면동→지번 → flex 50%로 2×2 (1행: 시·도+시·군·구 / 2행: 읍·면·동+지번) */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; gap: 8px; width: 100%; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > div, .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > span, .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > table { display: contents; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select.addr-select { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; max-width: none; box-sizing: border-box; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) .rs-btn-add--region-donly { flex: 1 1 100%; } .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) { display: flex; flex-direction: column; gap: 8px; } .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) select { width: 100%; flex: none; } .rsl-search .rs-region-panel .rs-btn-add--region-donly { display: none !important; } .rsl-search .rs-region-addj { width: min(94vw, 760px); max-height: 84vh; padding: 12px; } .rsl-search .rs-region-addj__row { align-items: stretch; gap: 6px; } .rsl-search .rs-region-addj__label { flex: 0 0 46px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-search .rs-region-addj__fields { flex-wrap: wrap; gap: 8px; } .rsl-search .rs-region-addj__fields > div, .rsl-search .rs-region-addj__fields > span, .rsl-search .rs-region-addj__fields > table { display: contents; } .rsl-search .rs-region-addj__fields select.addr-select, .rsl-search .rs-region-addj__fields input[type="text"] { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; } .rsl-search .rs-region-addj__remove { flex: 1 1 100%; width: 100%; height: 32px; } .rsl-search .rs-region-addj__btn { flex: 1 1 calc(50% - 4px); width: auto; height: 40px; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rsl-search .rs-region-selected { flex: 1 0 100%; width: 100%; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-region-selected--yongdo { max-width: 100%; align-self: stretch; } .rsl-yongdo-panel, .rsl-search .rsl-special-panel.show { margin: -4px 0 12px !important; padding: 12px !important; } .rsl-yongdo-panel { grid-template-columns: 1fr; gap: 12px; } .rsl-yongdo-panel__menu { flex-direction: row; overflow-x: auto; padding-bottom: 2px; } .rsl-yongdo-panel__menu::-webkit-scrollbar { display: none; } .rsl-yongdo-panel__menu-btn { flex: 0 0 auto; height: 36px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-yongdo-panel__all, .rsl-special-option { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-yongdo-chip, .rsl-special-chip { min-height: 32px; padding: 0 10px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-form-row__line--yongdo { flex-wrap: wrap; } .rs-yongdo-multi:not([hidden]) { margin: 0; padding: 0; max-height: none; } .rs-yongdo-multi__group { grid-template-columns: 86px 1fr; gap: 0 12px; padding: 10px 12px; --yongdo-left-col: 86px; --yongdo-side-pad: 12px; } .rs-yongdo-multi__group + .rs-yongdo-multi__group { margin-top: 0; padding-top: 0; } .rs-yongdo-multi__all { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-yongdo-multi__chip { flex: 0 0 auto; width: auto; min-height: 17px; padding: 0; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-yongdo-multi__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0px; row-gap: 5px; padding-top: 0; } /* 모바일에서 .show(PC용 3컬럼) 덮어쓰기 */ .rsl-search .rsl-special-panel.show { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 0 !important; } .rsl-search .rsl-special-panel__line { width: 100%; height: 1px; min-height: 1px; } /* 특수조건(복수선택) 모바일 칩: 고정 min-width 때문에 레이아웃이 깨져서 2열 그리드로 정리 */ .rsl-search .rsl-special-panel__chips { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; min-width: 0; } .rsl-search .rsl-special-panel__chips .checkboxopt { min-width: 0 !important; width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 32px !important; line-height: 18px !important; font-size: 12px !important; padding: 0 10px !important; box-sizing: border-box; white-space: normal; word-break: keep-all; } .rsl-list .list-wrapper { width: 100%; margin: 0 auto; padding: 0 16px; } .rsl-list .rsl-list__main { width: 100%; min-height: 0; } .rsl-list .rsl-list__count { padding: 0; margin-bottom: 8px; } .rsl-list .total-count { font-size: 16px; line-height: 24px; letter-spacing: -0.64px; } .rsl-list .rsl-list__controls { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0; min-height: 0; } /* listtmp 툴바: 정렬·개수순(order) 유지 — listtmp__right 래퍼 투명화 */ .rsl-list .rsl-list__controls.listtmp .listtmp__right { display: contents; } .rsl-list .rsl-list__recommend { order: 1; } .rsl-list .rsl-list__perpage { order: 2; width: 72px; height: 32px; margin-left: auto; border-radius: 6px; } .rsl-list .per-page { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } /* landlist listtmp: 모바일에서 정렬 버튼 행 숨김 */ .rsl-list .listtmp__sorts.rsl-list__sort { display: none !important; } .rsl-list .page-numbers::-webkit-scrollbar { display: none; } .rsl-list .sort-item, .rsl-list .recommend-label { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .sort-arrow { width: 12px; height: 14px; } .rsl-list .checkbox { width: 18px; height: 18px; } .rsl-list .rsl-list__thead { display: none; } .rsl-list .rsl-list__body { padding-left: 0; margin-top: 12px; } .rsl-list .list-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "photo prices" "body body" "status status"; gap: 8px 12px; min-height: 0; padding: 12px; border: 1px solid #d0d5e2; border-radius: 8px; } .rsl-list .item-photo { grid-area: photo; width: 120px; min-width: 0; height: 80px; } .rsl-list .btn-heart { top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; } .rsl-list .btn-heart::after { width: 16px; height: 16px; background-size: 16px 16px; } .rsl-list .item-prices { grid-area: prices; width: auto; min-width: 0; padding: 1px 0; gap: 0; } .rsl-list .price-row { justify-content: flex-start; align-items: flex-start; min-height: 23px; max-width: none; } .rsl-list .price-label { width: 40px; min-width: 40px; margin-right: 0; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; text-align: left; } .rsl-list .price-value { width: auto; min-width: 0; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; text-align: left; } .rsl-list .price-row.muted .price-value { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rsl-list .item-body { grid-area: body; width: auto; min-width: 0; padding: 0; gap: 4px; } .rsl-list .item-type { font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .item-meta { gap: 4px; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; flex-wrap: wrap; } .rsl-list .item-address { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rsl-list .item-spec { gap: 6px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; flex-wrap: wrap; } .rsl-list .item-tags { gap: 4px; } .rsl-list .tag { padding: 0 4px; font-size: 11px; line-height: 15.4px; letter-spacing: -0.44px; } .rsl-list .tag-more { font-size: 10px; line-height: 14px; } .rsl-list .item-status { grid-area: status; width: auto; min-width: 0; padding: 4px 0 0; border-top: 1px solid #d0d5e2; display: grid; grid-template-columns: auto auto 1fr; gap: 8px 12px; align-items: center; } .rsl-list .status-cell { width: auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0; justify-content: flex-start; } .rsl-list .status-cell:last-child { justify-content: flex-end; } .rsl-list .status-main, .rsl-list .status-sub { font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: -0.48px; white-space: nowrap; } .rsl-list .status-main { color: #505050; } .rsl-list .status-sub { color: #82b8ff; } .rsl-list .status-cell:last-child .status-main + .status-main::before { content: "/"; margin: 0 2px 0 1px; color: #505050; } .rsl-list .list-divider { display: none; } .rsl-list .rsl-list__pagination { width: 100%; gap: 12px; margin-top: 24px; } .rsl-list .page-arrow { width: 10px; height: 10px; flex-shrink: 0; } .rsl-list .page-numbers { gap: 2px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .rsl-list .page-num { width: 24px; height: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.56px; } } /* landsearch_box: 페이지 랩(법원별 .rc-page · 소재지 .rsoz-page 와 동일 역할) */ .rsl-page { width: 100%; max-width: 1200px; margin: 25px auto 0; box-sizing: border-box; } /* landsearch: 제목~검색 사이는 법원(.rc-heading)·소재지(.rsoz-heading)와 동일 — 공통 .rsl-page flex gap 제거 */ .rsl-page.rsl-page--landsearch { gap: 0; } .rsl-page > .rsl-search.rsl-search--landsearch { margin-top: 0; } /* landcar.html(.rcar-page): .rsl-search 기본 margin-top — 법원별·종합검색과 동일 간격 */ .rcar-page > .rsl-search.rsl-search--landsearch { margin-top: 0; } /* 종합/예정 등 rsl-search 상단 제목 (landsearch_box, wait/search_box) */ .rsl-search > .rsc-heading, .rsl-page > .rsc-heading { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 20px 16px; box-sizing: border-box; background: #ffffff; } .rsl-search > .rsc-heading .rsc-heading__title, .rsl-page > .rsc-heading .rsc-heading__title { margin: 0; font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } @media (max-width: 767px) { .rsl-search > .rsc-heading, .rsl-page > .rsc-heading { padding: 20px 16px 12px; } .rsl-search > .rsc-heading .rsc-heading__title, .rsl-page > .rsc-heading .rsc-heading__title { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; } } /* 예정물건 검색 wait/search_box.php — landsearch_box와 동일 룩, region/court 전환은 #region_bx / #court_bx .on 유지 */ .rsl-search.wait-yejung-search .rsc-heading__title a { color: inherit; text-decoration: none; } /* rs-form-grid는 자식을 2열로만 배치 — rs-form-pair 없이 행 단위로 맞춤 */ .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row.wait-yejung-row--date { min-width: 0; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date { flex: 1; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 8px 10px; max-width: none; } /* 날짜종류 셀렉트는 내용 너비만 (공통 width:100% 덮어씀) */ .rsl-search.wait-yejung-search .rs .wait-yejung-inline--date select#waitPDategubun { width: auto !important; flex: 0 0 auto; min-width: 132px; max-width: 200px; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row:not(.rs-form-row--case) .rs-inline { max-width: none; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-input.rs-input--full { max-width: none; width: 100%; min-width: 0; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row--case .rs-inline { max-width: 488px; } /* 예정물건 검색: 검색박스 내 text input · select 높이 40px */ .rsl-search.wait-yejung-search form.rs .rs-input, .rsl-search.wait-yejung-search form.rs .rs-select, .rsl-search.wait-yejung-search form.rs select.addr-select, .rsl-search.wait-yejung-search form.rs select.rsl-ph-select, .rsl-search.wait-yejung-search form.rs select.status-select { height: 40px; min-height: 40px; line-height: 38px; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row.rs-form-grid__full, .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-grid__full.wait-yejung-yongdo-chips { width: 100%; min-width: 0; } /* 물건용도 셀렉트: 물건구분과 같은 2열 그리드 칸(반줄) — 체크 목록만 다음 줄 전체 */ .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row.wait-yejung-yongdo-line { min-width: 0; margin-bottom: 8px; } .rsl-search.wait-yejung-search .wait-yejung-yongdo-line .wait-yejung-yongdo { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; } .rsl-search.wait-yejung-search .wait-yejung-yongdo-line .wait-yejung-yongdo select.rs-select { flex: 1; min-width: 0; width: auto; max-width: 100%; box-sizing: border-box; } .rsl-search.wait-yejung-search .wait-yejung-yongdo-line .wait-yejung-yongdo .rs-btn-add.wait-yejung-yongdo-add { flex-shrink: 0; white-space: nowrap; } .rsl-search.wait-yejung-search .wait-yejung-yongdo-chips.rs-yongdo-multi { margin-top: -11px; margin-bottom: 19px; min-width: 0; } .rsl-search.wait-yejung-search .wait-yejung-yongdo-chips[hidden] { display: none !important; margin: 0; } .rsl-search.wait-yejung-search #region_bx:not(.on), .rsl-search.wait-yejung-search #court_bx:not(.on) { display: none !important; } .rsl-search.wait-yejung-search #region_bx.on, .rsl-search.wait-yejung-search #court_bx.on { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1; width: 100%; } /* 예정검색: +추가를 읍·면·동 셀렉트 바로 옆(같은 줄)에 두기 — 모바일은 패널 내 donly만 표시 */ @media (max-width: 767px) { .rsl-search.wait-yejung-search .rs-region-mobile-head .rs-btn-add--region-monly { display: none !important; } .rsl-search.wait-yejung-search #region_bx.on .rs-btn-add--region-donly { display: inline-flex !important; } .rsl-search.wait-yejung-search .rs-region-panel[data-rsl-panel="region"] .rs-btn-add--region-donly { flex: 0 0 auto !important; width: auto !important; align-self: center; } } @media (min-width: 768px) { .rsl-search.wait-yejung-search #region_bx.on { flex-wrap: nowrap; } .rsl-search.wait-yejung-search #region_bx.on select.addr-select { flex: 1 1 118px; min-width: 72px; max-width: 128px; width: auto; } .rsl-search.wait-yejung-search #region_bx.on .rs-btn-add--region-donly { flex: 0 0 auto; margin-left: 2px; } } /* 예정검색: 지역 셀렉트·검색용 셀렉트 — 미선택 회색(#b5bccc) / 선택 후 검정(#111), landsearch와 동일 톤 */ .rsl-search.wait-yejung-search .rs select.addr-select, .rsl-search.wait-yejung-search .rs select.rsl-ph-select { color: #111; } .rsl-search.wait-yejung-search .rs select.addr-select.is-placeholder, .rsl-search.wait-yejung-search .rs select.rsl-ph-select.is-placeholder { color: #b5bccc; } .rsl-search.wait-yejung-search .rs select.addr-select option, .rsl-search.wait-yejung-search .rs select.rsl-ph-select option { color: #111; } .rsl-search.wait-yejung-search .wait-yejung-dates { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; } .rsl-search.wait-yejung-search .wait-yejung-dates input.calendar.w100, .rsl-search.wait-yejung-search .wait-yejung-inline--date input.calendar { width: auto; min-width: 108px; max-width: 150px; height: 40px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 1px solid #b5bccc; border-radius: 8px; font-size: 15px; font-weight: 500; line-height: 38px; letter-spacing: -0.6px; color: #111; } /* 날짜 구간: 값 없을 때만 안내색(회색) */ .rsl-search.wait-yejung-search .wait-yejung-inline--date input.calendar.is-placeholder, .rsl-search.wait-yejung-search .wait-yejung-dates input.calendar.w100.is-placeholder { color: #b5bccc; } @media (max-width: 767px) { .rsl-search.wait-yejung-search .wait-yejung-dates { flex-wrap: wrap; } .rsl-search.wait-yejung-search .wait-yejung-dates input.calendar.w100 { min-width: 100px; max-width: 100%; flex: 1 1 118px; } } /* 예정물건 검색 — 모바일만: 지역/법원 패널 가로 정렬(인라인 -8px 보정), 날짜선택을 다른 행과 동일한 필드 폭·간격 */ @media (max-width: 767px) { .rsl-search.wait-yejung-search #region_bx, .rsl-search.wait-yejung-search #court_bx { margin-left: 0 !important; } .rsl-search.wait-yejung-search .rs-form-row--region .rs-region--dynamic { min-width: 0; max-width: 100%; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row.wait-yejung-row--date > .rs-inline.wait-yejung-inline--date { flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date select#waitPDategubun { width: 100% !important; max-width: none; min-width: 0; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date > .rs-inline { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 8px; justify-content: flex-start; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date .rs-field.date { flex: 1 1 0; min-width: 0 !important; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date input.calendar { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; } .rsl-search.wait-yejung-search .rs-form-grid > .rs-form-row .rs-inline.wait-yejung-inline--date .rs-txt { flex-shrink: 0; } } /* 예정물건 검색 — 모바일: rs-footer 종합검색(landsearch · rsl-mosearch)과 동일 패턴 */ @media (max-width: 767px) { .rsl-search.wait-yejung-search .rs-footer { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: start; justify-items: stretch; width: 100%; max-width: 100%; margin-top: 0; padding: 12px 0 20px; box-sizing: border-box; gap: 0; row-gap: 0; flex-direction: unset; } .rsl-search.wait-yejung-search .rs-footer__left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding-left: 0; gap: 0; } .rsl-search.wait-yejung-search .rs-footer__save { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; flex-wrap: nowrap; } .rsl-search.wait-yejung-search .rs-footer__save button.rs-link { height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.5 !important; padding: 0 !important; align-items: center; } .rsl-search.wait-yejung-search .rs-footer__save .rs-label { font-size: 14px; font-weight: 500; color: #111111; letter-spacing: -0.52px; line-height: 1.5; padding: 0; } .rsl-search.wait-yejung-search .rs-footer__btns { grid-column: 1 / -1; grid-row: 2; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100% !important; max-width: 100%; justify-content: stretch !important; justify-items: stretch; align-items: stretch; flex-direction: unset !important; } .rsl-search.wait-yejung-search .rs-footer__btns .btn-small14, .rsl-search.wait-yejung-search .rs-footer__btns .btn-small15 { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: none !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.52px !important; line-height: 1.4 !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-left: 12px !important; padding-right: 12px !important; } .rsl-search.wait-yejung-search .rs-footer__btns .btn-small14 { border: 1px solid #b5bccc !important; background: #fff !important; color: #657088 !important; justify-content: center !important; gap: 6px !important; position: relative; } .rsl-search.wait-yejung-search .rs-footer__btns .btn-small14::before { position: static !important; display: block !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; margin: 0 !important; left: auto !important; top: auto !important; transform: none !important; background: url(/landimg/reset_icongray.svg) center center no-repeat !important; background-size: contain !important; } .rsl-search.wait-yejung-search .rs-footer__btns .btn-small14:hover::before { position: static !important; background: url(/landimg/reflush_white.svg) center center no-repeat !important; background-size: contain !important; } .rsl-search.wait-yejung-search .rs-footer__btns .btn-small15 { border: 1px solid #4e7ff0 !important; background: #4e7ff0 !important; color: #fff !important; } /* 종합검색과 동일: 푸터에 「검색조건 불러오기」가 있을 때 1행 2열 + 2행 요약 + 3행 버튼 */ .rsl-search.wait-yejung-search .rs-footer:has(> .rs-footer__load) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 8px; } .rsl-search.wait-yejung-search .rs-footer:has(> .rs-footer__load) .rs-footer__left { grid-column: 1; grid-row: 1 / 3; } .rsl-search.wait-yejung-search .rs-footer:has(> .rs-footer__load) > .rs-footer__load { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; flex-shrink: 0; margin: 0; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 0 0 4px; font-size: 14px; font-weight: 400; letter-spacing: -0.52px; white-space: nowrap; line-height: 1.5; } .rsl-search.wait-yejung-search .rs-footer:has(> .rs-footer__load) .rs-footer__btns { grid-row: 3; } .rsl-search.wait-yejung-search .rs-footer__save-stack .rs-footer__saved { margin-top: 4px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; letter-spacing: -0.52px; color: #b5bccc; word-break: break-word; } } /* ===== searchjo-pop.css ===== */ /* 종합검색 조건 저장 팝업(pop_favorite) — searchjo 시안 + 반응형 */ @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations"); } *, *::before, *::after { box-sizing: border-box; } /* 팝업 창 전체 중앙 정렬 */ body.pop-searchjo-save.searchjo { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #f1f3f8; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .searchjo-card { width: 100%; max-width: 460px; min-height: 0; background: #ffffff; border: 1px solid #d0d5e2; border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 4px 24px rgba(17, 17, 17, 0.06); } .searchjo-body { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 404px; margin: 0 auto; } .searchjo-header { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 23px; } .searchjo-title { margin: 0; font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; color: #111111; } .searchjo-close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; color: #111111; border-radius: 6px; } .searchjo-close:hover { background: #f1f3f8; } .searchjo-close:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .searchjo-close svg { display: block; width: 18.52px; height: 18.52px; } .searchjo-form { display: flex; flex-direction: column; width: 100%; gap: 4px; } .searchjo-label-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 24px; gap: 8px; } .searchjo-label { margin: 0; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color: #111111; } .searchjo-counter { margin: 0; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.56px; color: #657088; flex-shrink: 0; } .searchjo-input-wrap { width: 100%; min-height: 43px; background: #ffffff; border: 1px solid #d0d5e2; border-radius: 4px; padding: 0 10px; display: flex; align-items: center; } /* 클릭/포커스 시 파란 링·추가 테두리 없음 (기본 1px 테두리만 유지) */ .searchjo-input-wrap:focus-within { outline: none; box-shadow: none; border-color: #d0d5e2; } .searchjo-input { width: 100%; border: none; outline: none; box-shadow: none; background: transparent; font-family: inherit; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; color: #111111; -webkit-tap-highlight-color: transparent; } .searchjo-input:focus, .searchjo-input:focus-visible { outline: none; box-shadow: none; } .searchjo-input::placeholder { color: #b5bccc; opacity: 1; } .searchjo-hint { margin: 4px 0 0; width: 100%; max-width: 100%; font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: -0.56px; color: #657088; white-space: pre-line; } .searchjo-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 404px; margin: 0 auto; min-height: 51px; } .searchjo-btn { min-width: 100px; width: 120px; height: 51px; border-radius: 8px; font-family: inherit; font-weight: 500; font-size: 18px; line-height: 28px; letter-spacing: -0.72px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; } .searchjo-btn--cancel { background: #ffffff; border-color: #b5bccc; color: #657088; } .searchjo-btn--save { background: #4e7ff0; color: #ffffff; border-color: #4e7ff0; } .searchjo-btn--cancel:hover { background: #f8f9fc; } .searchjo-btn--save:hover { filter: brightness(0.96); } @media (max-width: 520px) { body.pop-searchjo-save.searchjo { align-items: flex-start; padding-top: 24px; } .searchjo-card { padding: 20px 16px; gap: 20px; } .searchjo-body { gap: 16px; } .searchjo-title { font-size: 17px; line-height: 25px; } .searchjo-btn { flex: 1 1 calc(50% - 6px); width: auto; min-width: 0; max-width: none; height: 48px; font-size: 16px; } .searchjo-actions { max-width: none; } } @media (max-width: 360px) { .searchjo-actions { flex-direction: column; } .searchjo-btn { width: 100%; flex: none; } } /* ----- 인페이지: 관심검색 저장 모달 (.rsl-msf 래퍼 필수, inc_member_search_favorite.php) ----- */ .rsl-msf .rsl-save-search-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.45); z-index: 1200; } .rsl-msf .rsl-save-search-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); max-height: min(90vh, 540px); overflow: auto; margin: 0; padding: 24px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; z-index: 1201; box-shadow: 0 8px 32px rgba(17, 17, 17, 0.12); -webkit-overflow-scrolling: touch; } .rsl-msf .rsl-save-search-modal[hidden], .rsl-msf .rsl-save-search-backdrop[hidden] { display: none !important; } .rsl-msf .rsl-save-search-modal.rsl-save-search-modal .searchjo-body { width: 100%; max-width: none; } .rsl-msf .rsl-save-search-modal .searchjo-actions { width: 100%; max-width: none; margin-top: 4px; } /* 저장 모달: .rs input 전역 스타일과 겹쳐 이중 테두리가 생김 — 내부 input은 무테두리(래퍼만 테두리) */ .rsl-msf .rsl-save-search-modal .searchjo-input-wrap input.searchjo-input[type="text"], .rsl-msf .rsl-save-search-modal .searchjo-input-wrap input[type="text"] { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.45 !important; padding: 8px 0 !important; } @media (max-width: 767px) { .rsl-msf .rsl-save-search-modal { width: calc(100vw - 32px); padding: 20px 16px; } .rsl-msf .rsl-save-search-modal .searchjo-btn { flex: 1 1 calc(50% - 6px); min-width: 0; } } @media (max-width: 360px) { .rsl-msf .rsl-save-search-modal .searchjo-actions { flex-direction: column; } .rsl-msf .rsl-save-search-modal .searchjo-btn { width: 100%; } } /* ----- 인페이지: 검색조건 불러오기 모달 (동일 .rsl-msf 스코프) ----- */ .rsl-msf .rsl-load-search-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.45); z-index: 1200; } .rsl-msf .rsl-load-search-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(96vw, 780px); max-height: min(92vh, 720px); overflow: auto; margin: 0; padding: 24px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; z-index: 1201; box-shadow: 0 8px 32px rgba(17, 17, 17, 0.12); -webkit-overflow-scrolling: touch; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } .rsl-msf .rsl-load-search-modal[hidden], .rsl-msf .rsl-load-search-backdrop[hidden] { display: none !important; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-card { max-width: none; width: 100%; margin: 0; padding: 0; border: none; border-radius: 0; gap: 16px; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-panel.sj2-scroll { max-height: min(52vh, 440px); overflow-y: auto; padding-right: 4px; } .rsl-msf .rsl-load-search-modal .rsl-load-empty { margin: 0; padding: 24px 8px; text-align: center; font-size: 15px; line-height: 1.5; color: #6b7280; } .rsl-msf .rsl-load-search-modal .rsl-load-error { color: #b91c1c; } .rsl-msf .rsl-load-search-modal .sj2-cell--query { word-break: break-word; } /* searchjo2.css 를 모달 안에 스코프 (body .sj2 제외) */ .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 23px; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-title { margin: 0; font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; color: #111111; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; color: #111111; border-radius: 6px; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-close:hover { background: #f1f3f8; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-close svg { display: block; width: 18.52px; height: 18.52px; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-panel { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-grid { --sj2-pad: 12px; --sj2-gap: 20px; --col-type: 128px; --col-query: minmax(140px, 1fr); --col-date: 84px; --col-actions: 108px; display: grid; grid-template-columns: var(--sj2-pad) var(--col-type) var(--sj2-gap) var(--col-query) var(--sj2-gap) var(--col-date) var(--sj2-gap) var(--col-actions) var(--sj2-pad); column-gap: 0; row-gap: 0; width: 100%; min-width: 0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-grid > * { min-width: 0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-thead { background: #f1f3f8; min-height: 31px; align-items: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-thead .sj2-th { font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; padding: 4px 0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-th--type { grid-column: 2; text-align: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-th--query { grid-column: 4; text-align: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-th--date { grid-column: 6; text-align: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-th--search { grid-column: 8; text-align: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-row { align-items: center; padding: 12px 0; border-bottom: 1px solid #d0d5e2; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell { font-weight: 400; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--type { grid-column: 2; text-align: center; align-self: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--query { grid-column: 4; text-align: left; align-self: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--date { grid-column: 6; text-align: center; align-self: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--actions { grid-column: 8; align-self: center; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-actions { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-btn { width: 52px; height: 40px; border-radius: 4px; font-family: inherit; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.64px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-btn--ghost { background: #ffffff; border: 1px solid #b5bccc; color: #b5bccc; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-btn--primary { background: #ffffff; border: 1px solid #4e7ff0; color: #4e7ff0; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-btn--ghost:hover { background: #f8f9fc; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-btn--primary:hover { background: #f3f7ff; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-footnote { margin: 12px 0 0; padding: 0; font-weight: 400; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-mobile-label { display: none; } @media (max-width: 720px) { .rsl-msf .rsl-load-search-modal { width: calc(100vw - 32px); padding: 20px 16px; max-height: min(92vh, 680px); } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-panel.sj2-scroll { max-height: min(50vh, 380px); } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-grid { display: flex; flex-direction: column; gap: 0; background: transparent; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-thead { display: none; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid #d0d5e2; align-items: start; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-row:first-of-type { border-top: 1px solid #d0d5e2; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-mobile-label { display: block; font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; color: #6b7280; margin-bottom: 2px; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--type, .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--query, .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--date, .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--actions { grid-column: auto; text-align: left; width: 100%; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-cell--type .sj2-mobile-label::after { content: none; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-actions { justify-content: flex-start; } } @media (min-width: 721px) { .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-scroll { overflow-x: visible; } .rsl-msf .rsl-load-search-modal .rsl-load-sj2-scope .sj2-thead { border-radius: 0; } } /* ===== rsl-mosearch.css ===== */ /* 종합검색(landsearch_box) 모바일 — mosearch 시안 (레이아웃 안정화) searchlist_style.css 이후 로드 */ @media (max-width: 767px) { .rsl-search--landsearch { --mo-text: #111111; --mo-placeholder: #b5bccc; --mo-muted: #657088; --mo-accent: #4e7ff0; --mo-bg: #ffffff; --mo-bg-quick: #e8f1ff; --mo-bg-segment: #f1f3f8; --mo-border: #b5bccc; /* 좌우 살짝만 — 필드 시작선은 라벨열(70px)+간격(8px)=78px로 통일 */ --mo-pad-x: 12px; --mo-label-w: 70px; --mo-label-gap: 8px; --mo-radius-input: 8px; --mo-radius-seg: 4px; --mo-radius-chip: 50px; --mo-row-gap: 8px; /* 라벨~필드 사이: 8px, 필드 내부(물결·입력 사이): 6px — 사건번호·매각기일과 동일 */ --mo-inline-gap: 6px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* 모바일: 검색 섹션 좌우만 살짝(searchlist .rsl-search 패딩 덮어씀) */ .rsl-search.rsl-search--landsearch { padding-left: var(--mo-pad-x) !important; padding-right: var(--mo-pad-x) !important; margin-top: 0 !important; } /* 종합검색 제목: 법원별(.rc-heading)·소재지(.rsoz-heading) 모바일과 동일 여백·타이포 (searchlist_style과 정합) */ .rsl-page > .rsc-heading { width: 100%; padding: 20px 16px 12px; box-sizing: border-box; background: #ffffff; display: block; } .rsl-page > .rsc-heading .rsc-heading__title { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: -0.8px; font-weight: 600; color: #111111; } .rsl-search--landsearch .rs-recommend { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 6px; min-height: 28px; height: auto; padding: 4px var(--mo-pad-x) 5px; background: var(--mo-bg-quick); } .rsl-search--landsearch .rs-recommend__title { flex-shrink: 0; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.04em; color: var(--mo-accent); } .rsl-search--landsearch .rs-recommend__pills { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; display: flex; flex-wrap: nowrap; gap: 0; align-items: center; } .rsl-search--landsearch .rs-recommend__pills::-webkit-scrollbar { display: none; } .rsl-search--landsearch .rs-recommend__pills .btn-small10.gray:first-child { } .rsl-search--landsearch .rs-recommend .btn-small10.gray { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; height: auto; padding: 0 4px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.04em; color: var(--mo-muted); background: transparent; border: 1px solid var(--mo-muted); border-radius: var(--mo-radius-chip); } .rsl-search--landsearch .rsl-search__card { border: none; border-radius: 0; background: var(--mo-bg); overflow: visible; } .rsl-search--landsearch form.rs--search-card { border: none; background: transparent; } .rsl-search--landsearch .rs-main { padding: 8px var(--mo-pad-x) 16px; border-top: none; } /* 1열 그리드 유지 (flex 대신 — 자식 grid-column·full 폭 정상화) */ .rsl-search--landsearch .rs-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mo-row-gap); padding: 0; align-content: start; } .rsl-search--landsearch .rs-form-grid > * { min-width: 0; } .rsl-search--landsearch .rs-form-grid > .rs-form-grid__full { grid-column: 1 / -1; width: 100%; } /* 그리드는 gap으로만 세로 간격 — .rs-form-row 기본 margin-bottom(12px) 제거 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row, .rsl-search--landsearch .rs-form-grid > .rsl-search__more-wrap { margin-top: 0 !important; margin-bottom: 0 !important; } /* 공통 행: 라벨 + 필드 (검색지역 그리드 1열·column-gap과 동일 선상) */ .rsl-search--landsearch .rs-form-grid > .rs-form-row:not(.rs-form-row--region):not(.rs-form-row--yongdo) { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; } .rsl-search--landsearch .rs-form-grid > .rs-form-row:not(.rs-form-row--region):not(.rs-form-row--yongdo) > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } /* 검색지역: 블록만 위 정렬(여러 줄) */ .rsl-search--landsearch .rs-form-row--region { align-items: flex-start !important; } .rsl-search--landsearch .rs-form-row--region > .rs-label--region-desktop { align-self: flex-start; } .rsl-search--landsearch .rs-form-row--region .rs-region { align-self: stretch; } .rsl-search--landsearch .rs-form-grid > .rs-form-row--case .rs-label, .rsl-search--landsearch .rs-form-grid > .rs-form-row--gamdb > .rs-label { padding-top: 0; align-self: center; } .rsl-search--landsearch .rs-form-grid > .rs-form-row--case .rs-inline { gap: var(--mo-inline-gap); } .rsl-search--landsearch .rs-form-row--yongdo > .rs-form-row__line--yongdo { align-items: center; gap: var(--mo-label-gap); } .rsl-search--landsearch .rs-form-row--yongdo > .rs-form-row__line--yongdo > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; padding-top: 0; } .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo > .rs-label { font-weight: 500; } /* 물건구분: 전체·세부·복수선택 한 줄 — .rs-form-row .rs-inline { flex-wrap: wrap } 보다 우선 */ .rsl-search--landsearch .rs-inline--yongdo { flex-wrap: nowrap !important; } /* 매각기일: 한 줄(줄바꿈 금지) — searchlist의 flex-wrap:wrap 무력화 */ .rsl-search--landsearch .rs-form-row--sale-date .rs-inline--sale-date { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--mo-inline-gap) !important; width: 100%; min-width: 0; } .rsl-search--landsearch .rs-form-row--sale-date .rs-field.date { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .rsl-search--landsearch .rs-form-row--sale-date .rs-txt { flex-shrink: 0; } .rsl-search--landsearch .rs select, .rsl-search--landsearch .rs input[type="text"], .rsl-search--landsearch .rs input[type="search"] { height: 39px; min-height: 39px; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-input); box-sizing: border-box; color: var(--mo-text); background: var(--mo-bg); } .rsl-search--landsearch .rs select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23b5bccc' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; -webkit-appearance: none; appearance: none; } .rsl-search--landsearch .rs .rs-field--year select { height: 39px; min-height: 39px; line-height: 1.5; padding: 0 12px; font-size: 13px; } .rsl-search--landsearch .rs-tabs { display: inline-flex; flex-shrink: 0; padding: 2px; background: var(--mo-bg-segment); border-radius: var(--mo-radius-seg); height: 36px; align-items: center; box-sizing: border-box; min-width: 0; } .rsl-search--landsearch .rs-tab { width: auto; min-width: 48px; height: 32px; padding: 0 10px; border: none; border-radius: var(--mo-radius-seg); font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-placeholder); background: transparent; cursor: pointer; flex-shrink: 0; } .rsl-search--landsearch .rs-tab.rs-tab--on { background: var(--mo-accent); color: #fff; } .rsl-search--landsearch .rs-tab:not(.rs-tab--on) { color: var(--mo-placeholder); } /* 검색지역: 1열 = 사건번호·물건구분·매각기일과 동일 라벨폭(--mo-label-w) → 셀렉트 시작선 일치 */ .rsl-search.rsl-search--landsearch .rs-form-row--region .rs-region--dynamic { grid-template-columns: var(--mo-label-w) minmax(0, 1fr) auto; column-gap: var(--mo-label-gap); row-gap: var(--mo-row-gap); align-items: center; } .rsl-search--landsearch .rs-label--region-mobile { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.04em; overflow: hidden; text-overflow: ellipsis; } .rsl-search--landsearch .rs-btn-add--region-monly { flex-shrink: 0; white-space: nowrap; } /* 검색지역 패널: 1행 시/도·시군구 / 2행 읍면동 + +추가 (mosearch grid-2 · grid-2-cta) */ .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"], .rsl-search--landsearch .rs-region-panel[data-rsl-panel="court"] { margin-left: 0 !important; } .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > script { position: absolute; width: 0; height: 0; overflow: hidden; clip: rect(0, 0, 0, 0); flex: 0 0 0; pointer-events: none; } .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select[name^="sido"], .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select[name^="gugun"] { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; } .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select[name^="dong"] { flex: 1 1 0; min-width: 0; width: auto; max-width: none; } .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) .rs-btn-add--region-donly { flex: 0 0 auto !important; width: auto; min-width: 64px; } .rsl-search--landsearch .rs-btn-add, .rsl-search--landsearch .rs-main .btn-small12, .rsl-search--landsearch .rs-main .btn-small13 { height: 39px; min-height: 39px; padding: 0 10px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border-radius: var(--mo-radius-input); box-sizing: border-box; } .rsl-search--landsearch .rs-main .btn-small12 { border: 1px solid var(--mo-accent); color: var(--mo-accent); background: var(--mo-bg); } /* 추가 조건: 용도지역(.rs-expand)과 동일 톤 — 전체 너비 행 + 하단 구분선 */ .rsl-search--landsearch .rsl-search__more-wrap { width: 100%; display: flex; justify-content: stretch; align-items: stretch; margin: 0; padding: 0; border-top: none; border-bottom: 1px solid #b5bccc; background: var(--mo-bg); } /* 진행상태 ↔ 추가 조건: 구분선은 유지하되 살짝 숨 쉴 간격(그리드 gap 일부만 상쇄) */ .rsl-search--landsearch .rs-form-row--status-combo + .rsl-search__more-wrap { margin-top: calc(-1 * var(--mo-row-gap) + 4px) !important; border-top: 1px solid #b5bccc; } .rsl-search--landsearch .rsl-search__more-btn.rs-expand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 31px; min-height: 31px; max-height: 31px; padding: 0; border: none; border-radius: 0; background: var(--mo-bg); font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: -0.52px; color: #111; cursor: pointer; box-sizing: border-box; } .rsl-search--landsearch .rsl-search__more-btn.rs-expand::before { content: "+"; flex-shrink: 0; color: #4e7ff0; font-weight: 500; font-size: 13px; line-height: 1.5; } .rsl-search--landsearch .rsl-search__more-btn.rs-expand.is-open { justify-content: flex-start; background: var(--mo-bg); } .rsl-search--landsearch .rsl-search__more-btn.rs-expand.is-open::before { content: "-"; font-weight: 800; color: #4e7ff0; } .rsl-search--landsearch .rsl-search__more-btn .rs-expand__icon { display: none; } .rsl-search--landsearch .rsl-search__more-btn.rs-expand:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } /* 용도지역·물건용도 등 펼침 행: 패딩 축소 (용도지역은 아래 .rs-expands--yongdo에서 추가조건 행과 동일하게 별도 지정) */ .rsl-search--landsearch .rs-expands:not(.rs-expands--yongdo) { padding: 6px 0; border-bottom: 1px solid #b5bccc; } /* 특수조건 복수 패널이 닫혀 있을 때: 빈 행(패딩·구분선) 제거 → 추가 조건·용도지역이 바로 이어짐 */ .rsl-search--landsearch .rs-expands--special:not(:has(#rslSpecialPanelBlock.show)) { display: none !important; } /* 용도지역: 추가 조건(.rsl-search__more-wrap)과 동일한 바깥 패딩·구분선 */ /* (+는 ::before만, 빈 아이콘 span 제거 — 타이포는 .rs-expand 규칙) */ .rsl-search--landsearch .rs-expands--yongdo { width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; margin: 0; padding: 0; border-top: none; border-bottom: 1px solid #b5bccc; background: var(--mo-bg); box-sizing: border-box; } .rsl-search--landsearch .rs-expands--yongdo .rs-expand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 !important; min-height: 31px; height: 31px; max-height: 31px; box-sizing: border-box; border: none; border-radius: 0; font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: -0.52px; color: #111; cursor: pointer; background: var(--mo-bg); } .rsl-search--landsearch .rs-expands--yongdo .rs-expand::before { content: "+"; flex-shrink: 0; font-weight: 500; font-size: 13px; line-height: 1.5; color: #4e7ff0; } .rsl-search--landsearch .rs-expands--yongdo .rs-expand.active { justify-content: flex-start; background: var(--mo-bg); } .rsl-search--landsearch .rs-expands--yongdo .rs-expand.active::before { content: "-"; font-weight: 800; color: #4e7ff0; } .rsl-search--landsearch .rs-expands--yongdo .rs-expand__icon { display: none !important; } /* 진행상태: 단일 셀렉트 전체 폭 */ .rsl-search--landsearch .rs-form-row--status-combo .rs-inline--status-combo { width: 100%; min-width: 0; } .rsl-search--landsearch .rs-form-row--status-combo .rs-field--status { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; } .rsl-search--landsearch .rs-form-row--status-combo .rs-field--status .status-select, .rsl-search--landsearch .rs-form-row--status-combo .rs-field--status select { width: 100%; font-size: 13px; } .rsl-search--landsearch .rs .nice-select { height: 39px; line-height: 37px; font-size: 15px; } .rsl-search--landsearch .rs .nice-select .list { z-index: 30; } /* 추가 조건 펼침: 그리드 안에 래퍼라 직계 자식 선택자가 안 먹음 → 동일 라벨·필드 정렬 */ .rsl-search--landsearch .rsl-search-extra:not(.is-open) { display: none !important; } .rsl-search--landsearch .rsl-search-extra.is-open { display: flex !important; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; grid-column: 1 / -1; min-width: 0; box-sizing: border-box; margin: 0 !important; padding: 0; } /* 모바일 추가조건만: 최저가 → 토지면적 앞으로 (PC는 .rsl-search-extra가 display:contents라 order 무관) */ .rsl-search--landsearch .rsl-search-extra.is-open > .rs-form-row--gamdb { order: 1; } .rsl-search--landsearch .rsl-search-extra.is-open > .rs-form-row:nth-child(2) { order: 2; } .rsl-search--landsearch .rsl-search-extra.is-open > .rs-form-row:nth-child(3) { order: 4; } .rsl-search--landsearch .rsl-search-extra.is-open > .rs-form-row:nth-child(4) { order: 3; } .rsl-search--landsearch .rsl-search-extra.is-open > .rs-form-row:nth-child(5) { order: 5; } .rsl-search--landsearch .rsl-search-extra.is-open > :nth-child(6) { order: 6; } .rsl-search--landsearch .rsl-search-extra > .rs-form-row { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; margin: 0 !important; flex-shrink: 0; } .rsl-search--landsearch .rsl-search-extra > .rs-form-row > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rsl-search--landsearch .rsl-search-extra > .rs-form-row > .rs-inline { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--mo-inline-gap); flex-wrap: nowrap; } /* 특수조건+필지/물건 래퍼: 직계 rs-form-row와 동일 정렬 (추가조건 직계 자식이 아님) */ .rsl-search--landsearch .rsl-extra-row--special-pilji { display: flex; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; box-sizing: border-box; } .rsl-search--landsearch .rsl-extra-row--special-pilji > .rs-form-row--special-shortcut { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; margin: 0 !important; flex-shrink: 0; } .rsl-search--landsearch .rsl-extra-row--special-pilji > .rs-form-row--special-shortcut > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rsl-search--landsearch .rsl-extra-row--special-pilji > .rs-form-row--special-shortcut > .rs-inline { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--mo-inline-gap); flex-wrap: nowrap; } .rsl-search--landsearch .rsl-extra-row--special-pilji > .rsl-pilji-mulgeon-wrap { display: flex; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; box-sizing: border-box; } .rsl-search--landsearch .rsl-search-extra .rs-txt { flex-shrink: 0; margin: 0; } .rsl-search--landsearch .rsl-search-extra .rs-field { flex: 1 1 0; min-width: 0; } .rsl-search--landsearch .rsl-search-extra .rs-inline--gamdb { flex-wrap: nowrap !important; } .rsl-search--landsearch .rsl-search-extra .rs-inline--gamdb select { flex: 1 1 0; min-width: 0; margin-left: 0 !important; } .rsl-search--landsearch .rsl-search-extra .rs-inline--special-shortcut { flex-wrap: nowrap !important; gap: var(--mo-inline-gap) !important; } .rsl-search--landsearch .rsl-search-extra .rs-inline--special-shortcut select { flex: 1 1 0; min-width: 0; } .rsl-search--landsearch .rsl-search-extra .rs-inline--special-shortcut .btn-small12 { flex-shrink: 0; white-space: nowrap; } .rsl-search--landsearch .rsl-search-extra .rs-inline .btn-small13 { flex-shrink: 0; } /* 필지 개수 / 물건번호: 래퍼 안 행이라 직계(.rsl-search-extra > .rs-form-row) 규칙이 안 먹음 → 동일하게 라벨 왼쪽·필드 오른쪽 */ .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--pilji-cnt, .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--mulgeon-no { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: var(--mo-label-gap) !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--pilji-cnt > .rs-label, .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--mulgeon-no > .rs-label { flex: 0 0 var(--mo-label-w) !important; width: var(--mo-label-w) !important; min-width: var(--mo-label-w) !important; max-width: var(--mo-label-w) !important; padding-top: 0 !important; align-self: center !important; text-align: left !important; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--pilji-cnt > .rs-inline--range-tilde, .rsl-search--landsearch .rsl-extra-row--special-pilji .rs-form-row--mulgeon-no > .rs-inline--range-tilde { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--mo-inline-gap) !important; } .rsl-search--landsearch .rsl-search-extra .rs-inline--range-tilde select.rs-select--range { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; } /* 푸터: 1행 [관심검색+저장 | 불러오기] / 2행 [인천>…] / 3행 [초기화|검색] — 불러오기는 DOM에서 .rs-footer 직계 */ .rsl-search--landsearch .rs-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: start; justify-items: stretch; width: 100%; max-width: 100%; margin-top: 0; padding: 12px 0 20px; box-sizing: border-box; gap: 0; column-gap: 8px; } .rsl-search--landsearch .rs-footer__left { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding-left: 0; gap: 0; } .rsl-search--landsearch .rs-footer__save-row { display: block; width: 100%; min-width: 0; } .rsl-search--landsearch .rs-footer__save-stack { min-width: 0; width: 100%; } .rsl-search--landsearch .rs-footer__save { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; } /* searchlist의 푸터 링크 height:40px 등 제거 — 관심검색·저장 한 줄 정렬 */ .rsl-search--landsearch .rs-footer__save-row button.rs-link { height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.5 !important; padding: 0 !important; align-items: center; } .rsl-search--landsearch .rs-footer__save .rs-label { font-size: 14px; font-weight: 500; color: var(--mo-text); letter-spacing: -0.52px; line-height: 1.5; padding: 0; } .rsl-search--landsearch .rs-footer > .rs-footer__load { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; flex-shrink: 0; margin: 0; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 0 0 4px; font-size: 14px; font-weight: 400; letter-spacing: -0.52px; white-space: nowrap; line-height: 1.5; } /* 인천>… 문구: 관심검색·저장 열 바로 아래 */ .rsl-search--landsearch .rs-footer__save-stack .rs-footer__saved { margin-top: 4px; margin-bottom: 12px; } .rsl-search--landsearch .rs-footer__saved { margin-top: 0; margin-bottom: 0; font-size: 13px; line-height: 1.45; letter-spacing: -0.52px; color: #b5bccc; word-break: break-word; } .rsl-search--landsearch .rs-footer__btns { grid-column: 1 / -1; grid-row: 3; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100% !important; max-width: 100%; justify-content: stretch; justify-items: stretch; align-items: stretch; } .rsl-search--landsearch .rs-footer__btns .btn-small14, .rsl-search--landsearch .rs-footer__btns .btn-small15 { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: none !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.52px !important; line-height: 1.4 !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-left: 12px !important; padding-right: 12px !important; } /* 초기화: 아이콘+글자를 한 그룹으로 가운데 (::before를 flex에 넣어 글자 바로 왼쪽에 붙음) */ .rsl-search--landsearch .rs-footer__btns .btn-small14 { border: 1px solid #b5bccc !important; background: #fff !important; color: #657088 !important; justify-content: center !important; gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; } .rsl-search--landsearch .rs-footer__btns .btn-small14::before { position: static !important; display: block !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; margin: 0 !important; left: auto !important; top: auto !important; transform: none !important; background: url(/landimg/reset_icongray.svg) center center no-repeat !important; background-size: contain !important; } .rsl-search--landsearch .rs-footer__btns .btn-small14:hover::before { position: static !important; background: url(/landimg/reflush_white.svg) center center no-repeat !important; background-size: contain !important; } .rsl-search--landsearch .rs-footer__btns .btn-small15 { border: 1px solid #4e7ff0 !important; background: #4e7ff0 !important; color: #fff !important; } /* ------------------------------------------------------------------------ 법원별 검색 landcourt.html — 모바일만, rc-date-panel 이후 검색 영역 (HTML/데이터 변경 없음 · 종합검색 mosearch 토큰·패턴 정렬) ------------------------------------------------------------------------ */ .rc-search .rc-main { --mo-text: #111111; --mo-placeholder: #b5bccc; --mo-muted: #657088; --mo-accent: #4e7ff0; --mo-bg: #ffffff; --mo-border: #b5bccc; --mo-label-w: 64px; --mo-label-gap: 8px; --mo-radius-input: 8px; --mo-row-gap: 8px; --mo-inline-gap: 6px; /* 추가 조건 블록 안: flex gap만으로 간격 통일 */ --mo-extra-block-gap: 12px; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair { display: flex; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 var(--mo-row-gap); padding: 0; grid-template-columns: 1fr !important; } .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair { margin-bottom: 0; gap: var(--mo-row-gap); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row__line, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row__line { margin-bottom: 0 !important; } /* 물건용도 행: HTML이 .rs-form-pair > .rs-form-row--yongdo > .rs-form-row__line--yongdo 구조라 직속 자식(>) 선택자로는 매치 안 됨 → 후손 선택자로 수정. 또한 18718줄의 `gap: 12px !important`가 다른 행(gap 8px)보다 더 밀어내므로 모바일에서는 mo-label-gap으로 통일 (label↔첫 select 시작점을 다른 행과 일치) */ .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row__line--yongdo, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row__line--yongdo { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap) !important; width: 100%; min-width: 0; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row__line--yongdo > .rs-label, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row__line--yongdo > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row__line--yongdo > .rs-inline, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row__line--yongdo > .rs-inline { flex: 1; min-width: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--mo-inline-gap); } /* 물건용도 행을 감싸는 .rs-form-row--yongdo 자체도 다른 행처럼 flex로 펼치기 (자식 .rs-form-row__line--yongdo가 100% 폭을 차지하도록) */ .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row--yongdo, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row--yongdo { display: flex; width: 100%; min-width: 0; } /* ───── 물건용도 ↔ 물건상태 모바일 정렬 통일 ───── [그룹 select | 세부종류 select | 액션] 폭을 [진행상태 select | 유찰 min select | 유찰 max select 영역] 과 맞춤 */ /* 물건용도: 세 컬럼 grid (group | detail | 복수선택 버튼) */ .rc-search .rs-form-row--yongdo .rs-inline--yongdo { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--mo-inline-gap); width: 100%; min-width: 0; } .rc-search .rs-form-row--yongdo .rs-inline--yongdo > .rs-select { width: 100%; min-width: 0; } /* 물건상태: 동일한 세 컬럼 grid 1열: 진행상태 select ── 물건용도 그룹과 동일 폭 2-3열: 유찰 영역(.rs-uchal-group: 라벨+min+~+max) ── 세부종류+버튼 위치에 정렬 */ .rc-search .rs-form-row--status-combo .rs-inline--status-combo { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--mo-inline-gap); width: 100%; min-width: 0; } .rc-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-field--eng { grid-column: 1; width: 100%; min-width: 0; } .rc-search .rs-form-row--status-combo .rs-field--eng > .rs-select { width: 100%; min-width: 0; } /* 유찰 wrapper를 2-3열 span (세부종류 + 복수선택 버튼 위치에 정렬) */ .rc-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-uchal-group { grid-column: 2 / 4; display: flex; align-items: center; gap: var(--mo-inline-gap); width: 100%; min-width: 0; } .rc-search .rs-uchal-group > .rs-label-inline { flex: 0 0 auto; margin: 0; } .rc-search .rs-uchal-group > select[name="uchal_min"], .rc-search .rs-uchal-group > select[name="uchal_max"] { flex: 1 1 0; min-width: 0; max-width: none; } .rc-search .rs-uchal-group > .rs-txt { flex: 0 0 auto; } } /* ═══════════════════════════════════════════════ PC (≥ 768px) — 물건용도 ↔ 물건상태 컬럼 정렬 yongdo: [group | detail | btn] status: [status | 유찰영역(라벨+min+~+max) span 2-3] → 세부종류 select 시작 위치에 유찰 min select 시작 위치를 정렬 ═══════════════════════════════════════════════ */ @media (min-width: 768px) { .rc-search .rs-form-row--yongdo .rs-inline--yongdo { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; width: 100%; max-width: none; } .rc-search .rs-form-row--yongdo .rs-inline--yongdo > .rs-select { width: 100%; min-width: 0; max-width: none; } .rc-search .rs-form-row--status-combo .rs-inline--status-combo { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%; max-width: none; } .rc-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-field--status { grid-column: 1; width: 100%; min-width: 0; max-width: none; flex: none; } .rc-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-field--status .rs-select { width: 100%; } .rc-search .rs-form-row--status-combo .rs-inline--status-combo > .rs-uchal-group { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .rc-search .rs-uchal-group > .rs-label-inline { flex: 0 0 auto; margin: 0; } .rc-search .rs-uchal-group > select[name="uchal_min"], .rc-search .rs-uchal-group > select[name="uchal_max"] { flex: 1 1 0; min-width: 0; max-width: none; } .rc-search .rs-uchal-group > .rs-txt { flex: 0 0 auto; } } /* ───── 아래는 원래 max-width:767px 미디어 쿼리에 속해 있던 모바일 룰들 (PC 영역 추가로 인해 분리되었으므로 다시 미디어 쿼리로 감쌈) ───── */ @media (max-width: 767px) { .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row:not(.rs-form-row--status-combo):not(.rs-form-row--gamdb), .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row--gamdb, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row--status-combo, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row:not(.rs-form-row--status-combo):not(.rs-form-row--gamdb), .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row--gamdb, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row--status-combo, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row > .rs-label, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row > .rs-label, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row > .rs-inline, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row > .rs-inline, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb > .rs-inline { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--mo-inline-gap); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-inline, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--mo-inline-gap) !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-field.date, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-field.date { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-txt, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-txt { flex-shrink: 0; } /* 물건상태: 종합검색 모바일과 동일 — 진행(eng)만, 유찰 회차 숨김 */ .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo { flex-direction: column; align-items: stretch; gap: 0; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-field--status, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-field--status .status-select, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-field--status select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status .status-select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status select { width: 100%; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-label-inline, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo select[name="uchal_min"], .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo select[name="uchal_max"], .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-label-inline, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo select[name="uchal_min"], .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo select[name="uchal_max"] { display: none !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt { display: none !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo { align-items: center; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--status-combo > .rs-label, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo > .rs-label { align-self: center; padding-top: 0; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb .rs-inline--gamdb { flex-wrap: nowrap !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb select, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb .rs-inline--gamdb select { flex: 1 1 0; min-width: 0; margin-left: 0 !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut { flex-wrap: nowrap !important; gap: var(--mo-inline-gap) !important; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut select { flex: 1 1 0; min-width: 0; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .rs-form-row--special-shortcut .btn-small12, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .btn-small12 { flex-shrink: 0; white-space: nowrap; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair select, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair input[type="text"], .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair input[type="text"], .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb select, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb input[type="text"], .rc-search .rc-main > form > .rc-date-panel ~ .rs-yongdo-multi select, .rc-search .rc-main > form > .rc-date-panel ~ .rs-yongdo-multi input[type="text"] { height: 39px; min-height: 39px; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-input); box-sizing: border-box; color: var(--mo-text); background: var(--mo-bg); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair select, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair select, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23b5bccc' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; -webkit-appearance: none; appearance: none; } /* 미선택(placeholder) 회색 → 선택 후 검정 */ .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair select.is-placeholder, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair select.is-placeholder, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb select.is-placeholder, .rc-search .rc-main > form > .rc-date-panel ~ .rs-yongdo-multi select.is-placeholder { color: var(--mo-placeholder); } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair input[type="text"]::placeholder, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair input[type="text"]::placeholder, .rc-search .rc-main > form > .rsl-search-extra > .rs-form-row--gamdb input[type="text"]::placeholder { color: var(--mo-placeholder); } .rc-search .rc-main > form > .rc-date-panel ~ * .nice-select { height: 39px; line-height: 37px; font-size: 15px; } .rc-search .rc-main > form > .rc-date-panel ~ * .nice-select .list { z-index: 30; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .btn-small12, .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .btn-small13, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .btn-small12, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .btn-small13 { height: 39px; min-height: 39px; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border-radius: var(--mo-radius-input); box-sizing: border-box; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-form-pair .btn-small12, .rc-search .rc-main > form > .rsl-search-extra .rs-form-pair .btn-small12 { border: 1px solid var(--mo-accent); color: var(--mo-accent); background: var(--mo-bg); } /* 토지·건물면적(㎡·평)·추가조건 간격: responnsive-court.css 후순위(landcourt 전용) */ /* 추가 조건: 접힘(모바일) — 종합검색과 동일 패턴 */ .rc-search .rsl-search-extra:not(.is-open) { display: none !important; } .rc-search .rsl-search-extra.is-open { display: flex !important; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; min-width: 0; margin: 0 !important; padding: var(--mo-row-gap) 0 var(--mo-row-gap); box-sizing: border-box; } .rc-search .rs-form-pair:has(> .rs-form-row--status-combo) + .rsl-search__more-wrap { margin-top: calc(-1 * var(--mo-row-gap) + 4px) !important; border-top: 1px solid #b5bccc; } .rc-search .rsl-search__more-wrap { width: 100%; display: flex; justify-content: stretch; align-items: stretch; margin: 0; padding: 0; border-top: none; border-bottom: 1px solid #b5bccc; background: var(--mo-bg); } .rc-search .rsl-search__more-btn.rs-expand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 31px; min-height: 31px; max-height: 31px; padding: 0; border: none; border-radius: 0; background: var(--mo-bg); font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: -0.52px; color: #111; cursor: pointer; box-sizing: border-box; } .rc-search .rsl-search__more-btn.rs-expand::before { content: "+"; flex-shrink: 0; color: #4e7ff0; font-weight: 500; font-size: 13px; line-height: 1.5; } .rc-search .rsl-search__more-btn.rs-expand.is-open { justify-content: flex-start; background: var(--mo-bg); } .rc-search .rsl-search__more-btn.rs-expand.is-open::before { content: "-"; font-weight: 800; color: #4e7ff0; } .rc-search .rsl-search__more-btn .rs-expand__icon { display: none; } .rc-search .rsl-search__more-btn.rs-expand:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rc-search .rc-main > form > .rc-date-panel ~ .rs-yongdo-multi { width: 100%; max-width: 100%; margin: 0 0 var(--mo-row-gap); box-sizing: border-box; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands { margin: 0; padding: 0; border-bottom: 1px solid #b5bccc; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands--special:not(:has(#rslSpecialPanelBlock.show)) { display: none !important; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands .rsl-special-panel.show { margin: 0 !important; padding: var(--mo-extra-block-gap) !important; grid-template-columns: 1fr !important; gap: var(--mo-extra-block-gap) !important; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands .rsl-special-panel__line { width: 100%; height: 1px; min-height: 1px; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands .rsl-special-panel__chips { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; min-width: 0; } .rc-search .rc-main > form > .rsl-search-extra .rs-expands .rsl-special-panel__chips .checkboxopt { min-width: 0 !important; width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 32px !important; line-height: 18px !important; font-size: 12px !important; padding: 0 10px !important; box-sizing: border-box; white-space: normal; word-break: keep-all; } .rc-search .rc-main > form > footer.rs-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: start; justify-items: stretch; width: 100%; max-width: 100%; margin-top: 0; padding: 12px 0 20px; box-sizing: border-box; gap: 0; column-gap: 8px; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__left { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding-left: 0; gap: 0; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__save { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__save .rs-label { font-size: 14px; font-weight: 500; color: var(--mo-text); letter-spacing: -0.52px; line-height: 1.5; padding: 0; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__save-row button.rs-link { height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.5 !important; padding: 0 !important; align-items: center; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__saved { margin-top: 4px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; letter-spacing: -0.52px; color: #b5bccc; word-break: break-word; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns { grid-column: 1 / -1; grid-row: 3; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100% !important; max-width: 100%; justify-content: stretch; justify-items: stretch; align-items: stretch; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small14, .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small15 { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: none !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.52px !important; line-height: 1.4 !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-left: 12px !important; padding-right: 12px !important; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small14 { border: 1px solid #b5bccc !important; background: #fff !important; color: #657088 !important; justify-content: center !important; gap: 6px !important; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small14::before { position: static !important; display: block !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; margin: 0 !important; left: auto !important; top: auto !important; transform: none !important; background: url(/landimg/reset_icongray.svg) center center no-repeat !important; background-size: contain !important; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small14:hover::before { position: static !important; background: url(/landimg/reflush_white.svg) center center no-repeat !important; background-size: contain !important; } .rc-search .rc-main > form > footer.rs-footer .rs-footer__btns .btn-small15 { border: 1px solid #4e7ff0 !important; background: #4e7ff0 !important; color: #fff !important; } /* ------------------------------------------------------------------------ 소재지 검색 landsozaezi.html — 모바일만, rsoz-subregion 이후 검색 영역 (법원별 rc-date-panel ~ … 패턴과 동일 · .rsoz-search-after-subregion 래퍼) ------------------------------------------------------------------------ */ .rsoz-search .rsoz-main { --mo-text: #111111; --mo-placeholder: #b5bccc; --mo-muted: #657088; --mo-accent: #4e7ff0; --mo-bg: #ffffff; --mo-border: #b5bccc; --mo-label-w: 70px; --mo-label-gap: 8px; --mo-radius-input: 8px; --mo-row-gap: 8px; --mo-inline-gap: 6px; /* 추가 조건 블록 안: flex gap만으로 간격 통일 */ --mo-extra-block-gap: 12px; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair { display: flex; flex-direction: column; align-items: stretch; gap: var(--mo-row-gap); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 var(--mo-row-gap); padding: 0; grid-template-columns: 1fr !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair { margin-bottom: 0; /* 추가 조건 안: 행 간격도 블록 간격과 동일(8px/12px 혼재 제거) */ gap: var(--mo-extra-block-gap); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row__line, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row__line { margin-bottom: 0 !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row__line--yongdo, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row__line--yongdo { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row__line--yongdo > .rs-label, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row__line--yongdo > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row__line--yongdo > .rs-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row__line--yongdo > .rs-inline { flex: 1; min-width: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--mo-inline-gap); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row:not(.rs-form-row--status-combo):not(.rs-form-row--gamdb), .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row--gamdb, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row--status-combo, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row:not(.rs-form-row--status-combo):not(.rs-form-row--gamdb), .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row--gamdb, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row--status-combo, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb { display: flex; flex-direction: row; align-items: center; gap: var(--mo-label-gap); width: 100%; min-width: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row > .rs-label, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row > .rs-label, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb > .rs-label { flex: 0 0 var(--mo-label-w); width: var(--mo-label-w); min-width: var(--mo-label-w); max-width: var(--mo-label-w); padding-top: 0; align-self: center; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--mo-text); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row > .rs-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row > .rs-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb > .rs-inline { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--mo-inline-gap); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--mo-inline-gap) !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-field.date, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-field.date { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-txt, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair > .rs-form-row:has(.rs-field.date) .rs-txt { flex-shrink: 0; } /* 소재지: 매각기일 — landsearch_box와 동일 클래스(rs-form-row--sale-date), searchlist flex-wrap·min-width 보정 */ .rsoz-search .rsoz-main > form .rs-form-row--sale-date .rs-inline--sale-date { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: var(--mo-inline-gap) !important; width: 100%; min-width: 0; } .rsoz-search .rsoz-main > form .rs-form-row--sale-date .rs-field.date { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .rsoz-search .rsoz-main > form .rs-form-row--sale-date .rs-txt { flex-shrink: 0; } /* 물건상태: 종합검색 모바일과 동일 — 진행(eng)만, 유찰 회차 숨김 */ .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo { flex-direction: column; align-items: stretch; gap: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-field--status, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-field--status .status-select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-field--status select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status .status-select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-field--status select { width: 100%; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-label-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo select[name="uchal_min"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo select[name="uchal_max"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-label-inline, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo select[name="uchal_min"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo select[name="uchal_max"] { display: none !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt { display: none !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo { align-items: center; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--status-combo > .rs-label, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--status-combo > .rs-label { align-self: center; padding-top: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb .rs-inline--gamdb { flex-wrap: nowrap !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--gamdb .rs-inline--gamdb select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb .rs-inline--gamdb select { flex: 1 1 0; min-width: 0; margin-left: 0 !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut { flex-wrap: nowrap !important; gap: var(--mo-inline-gap) !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .rs-inline--special-shortcut select { flex: 1 1 0; min-width: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .rs-form-row--special-shortcut .btn-small12, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .rs-form-row--special-shortcut .btn-small12 { flex-shrink: 0; white-space: nowrap; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair input[type="text"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair input[type="text"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb input[type="text"], .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-yongdo-multi select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-yongdo-multi input[type="text"] { height: 40px; min-height: 40px; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-input); box-sizing: border-box; color: var(--mo-text); background: var(--mo-bg); } /* 미선택(placeholder) 회색 → 선택 후 검정 */ .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair select.is-placeholder, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair select.is-placeholder, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb select.is-placeholder, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-yongdo-multi select.is-placeholder { color: var(--mo-placeholder); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair input[type="text"]::placeholder, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair input[type="text"]::placeholder, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb input[type="text"]::placeholder { color: var(--mo-placeholder); } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair select, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra > .rs-form-row--gamdb select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23b5bccc' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; -webkit-appearance: none; appearance: none; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion .nice-select { height: 39px; line-height: 37px; font-size: 15px; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion .nice-select .list { z-index: 30; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .btn-small12, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .btn-small13, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .btn-small12, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .btn-small13 { height: 39px; min-height: 39px; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; border-radius: var(--mo-radius-input); box-sizing: border-box; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-form-pair .btn-small12, .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-form-pair .btn-small12 { border: 1px solid var(--mo-accent); color: var(--mo-accent); background: var(--mo-bg); } /* 토지·건물면적(㎡·평)·추가조건 간격: responnsive-court.css 후순위(landcourt 전용) */ /* 추가 조건: 접힘(모바일) — 종합검색과 동일 패턴 */ .rsoz-search .rsl-search-extra:not(.is-open) { display: none !important; } .rsoz-search .rsl-search-extra.is-open { display: flex !important; flex-direction: column; align-items: stretch; gap: var(--mo-extra-block-gap); width: 100%; min-width: 0; margin: 0 !important; /* 상단: 추가조건 바↔첫 필드, 하단: 특수조건↔푸터(맨 아래 붙음 방지) */ padding: var(--mo-extra-block-gap) 0 var(--mo-extra-block-gap); box-sizing: border-box; } .rsoz-search .rs-form-pair:has(> .rs-form-row--status-combo) + .rsl-search__more-wrap { margin-top: calc(-1 * var(--mo-row-gap) + 4px) !important; border-top: 1px solid #b5bccc; } .rsoz-search .rsl-search__more-wrap { width: 100%; display: flex; justify-content: stretch; align-items: stretch; margin: 0; padding: 0; border-top: none; border-bottom: 1px solid #b5bccc; background: var(--mo-bg); } .rsoz-search .rsl-search__more-btn.rs-expand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 31px; min-height: 31px; max-height: 31px; padding: 0; border: none; border-radius: 0; background: var(--mo-bg); font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: -0.52px; color: #111; cursor: pointer; box-sizing: border-box; } .rsoz-search .rsl-search__more-btn.rs-expand::before { content: "+"; flex-shrink: 0; color: #4e7ff0; font-weight: 500; font-size: 13px; line-height: 1.5; } .rsoz-search .rsl-search__more-btn.rs-expand.is-open { justify-content: flex-start; background: var(--mo-bg); } .rsoz-search .rsl-search__more-btn.rs-expand.is-open::before { content: "-"; font-weight: 800; color: #4e7ff0; } .rsoz-search .rsl-search__more-btn .rs-expand__icon { display: none; } .rsoz-search .rsl-search__more-btn.rs-expand:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rs-yongdo-multi { width: 100%; max-width: 100%; margin: 0 0 var(--mo-row-gap); box-sizing: border-box; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands { margin: 0; padding: 0; border-bottom: 1px solid #b5bccc; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands--special:not(:has(#rslSpecialPanelBlock.show)) { display: none !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands .rsl-special-panel.show { margin: 0 !important; padding: var(--mo-extra-block-gap) !important; grid-template-columns: 1fr !important; gap: var(--mo-extra-block-gap) !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands .rsl-special-panel__line { width: 100%; height: 1px; min-height: 1px; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands .rsl-special-panel__chips { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; min-width: 0; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra .rs-expands .rsl-special-panel__chips .checkboxopt { min-width: 0 !important; width: 100% !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 32px !important; line-height: 18px !important; font-size: 12px !important; padding: 0 10px !important; box-sizing: border-box; white-space: normal; word-break: keep-all; } .rsoz-search .rsoz-main > form > footer.rs-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: start; justify-items: stretch; width: 100%; max-width: 100%; margin-top: 0; padding: 12px 0 20px; box-sizing: border-box; gap: 0; column-gap: 8px; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__left { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; padding-left: 0; gap: 0; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__save { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__save .rs-label { font-size: 14px; font-weight: 500; color: var(--mo-text); letter-spacing: -0.52px; line-height: 1.5; padding: 0; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__save-row button.rs-link { height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.5 !important; padding: 0 !important; align-items: center; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__saved { margin-top: 4px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; letter-spacing: -0.52px; color: #b5bccc; word-break: break-word; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns { grid-column: 1 / -1; grid-row: 3; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100% !important; max-width: 100%; justify-content: stretch; justify-items: stretch; align-items: stretch; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small14, .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small15 { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: none !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.52px !important; line-height: 1.4 !important; border-radius: 8px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-left: 12px !important; padding-right: 12px !important; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small14 { border: 1px solid #b5bccc !important; background: #fff !important; color: #657088 !important; justify-content: center !important; gap: 6px !important; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small14::before { position: static !important; display: block !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; margin: 0 !important; left: auto !important; top: auto !important; transform: none !important; background: url(/landimg/reset_icongray.svg) center center no-repeat !important; background-size: contain !important; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small14:hover::before { position: static !important; background: url(/landimg/reflush_white.svg) center center no-repeat !important; background-size: contain !important; } .rsoz-search .rsoz-main > form > footer.rs-footer .rs-footer__btns .btn-small15 { border: 1px solid #4e7ff0 !important; background: #4e7ff0 !important; color: #fff !important; } } /* ===== responnsive-list.css ===== */ /* ============================================ 리스트 부분 responnsive-search-list.html (360-598) ============================================ */ .rsl-list { padding: 32px 0 40px; } .rsl-list .list-wrapper { width: 1200px; max-width: 1200px; margin: 0 auto; } .rsl-list .rsl-list__main { width: 1200px; min-height: 730px; position: relative; } .rsl-list .rsl-list__header { width: 100%; } .rsl-list .rsl-list__toolbar { width: 100%; } .rsl-list .rsl-list__count { padding: 4px 0 0 20px; } .rsl-list .total-count { font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; color: #111111; } .rsl-list .rsl-list__controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 0 20px; min-height: 47px; } .rsl-list .rsl-list__controls .rsl-list__sort { margin-left: auto; margin-right: 12px; } .rsl-list .rsl-list__recommend { display: flex; align-items: center; gap: 8px; } .rsl-list .checkbox { width: 20px; height: 20px; background: #d0d5e2; border-radius: 4px; flex-shrink: 0; } .rsl-list .recommend-label { font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #505050; } .rsl-list .rsl-list__sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rsl-list .sort-item { font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #505050; cursor: pointer; } .rsl-list .sort-arrow { width: 14px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath fill='%23505050' d='M3.5 6L7 10l3.5-4H3.5z'/%3E%3C/svg%3E") no-repeat center; flex-shrink: 0; cursor: pointer; } .rsl-list .sort-arrow.sort-arrow--up { transform: scaleY(-1); } .rsl-list .rsl-list__perpage { width: 89.33px; height: 39px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #b5bccc; border-radius: 8px; } /* listtmp.html / listtmp.css — landlist 툴바 (.rsl-list__controls.listtmp) */ .rsl-list .rsl-list__controls.listtmp { padding: 12px 20px; gap: 12px 24px; flex-wrap: wrap; align-items: center; } .rsl-list .rsl-list__controls.listtmp .listtmp__left { display: flex; align-items: center; gap: 8px; min-height: 23px; } .rsl-list .listtmp__check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 0; } .rsl-list .listtmp__check input { position: absolute; opacity: 0; width: 0; height: 0; } .rsl-list .listtmp__check-box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px; background: #d0d5e2; transition: background 0.15s; } .rsl-list .listtmp__check input:focus-visible + .listtmp__check-box { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rsl-list .listtmp__check input:checked + .listtmp__check-box { background: #4e7ff0; box-shadow: inset 0 0 0 2px #fff; } .rsl-list .listtmp__check-text { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #505050; } .rsl-list .rsl-list__controls.listtmp .listtmp__right { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-left: auto; } .rsl-list .rsl-list__controls.listtmp .rsl-list__sort { margin-left: 0; margin-right: 0; } .rsl-list .listtmp__sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .rsl-list .listtmp__sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #505050; cursor: pointer; white-space: nowrap; } .rsl-list .listtmp__sort:hover { color: #111111; } .rsl-list .listtmp__sort:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; border-radius: 2px; } .rsl-list .listtmp__sort-icon { flex-shrink: 0; width: 14px; height: 16px; color: #505050; vertical-align: middle; object-fit: contain; } /* span/SVG/img 정렬 아이콘 — 기본 .sort-arrow(data URL 배경)와 충돌 방지 */ .rsl-list .listtmp__sort svg.sort-arrow, .rsl-list .listtmp__sort img.listtmp__sort-icon.sort-arrow { background: none !important; background-image: none !important; display: block; } .rsl-list .listtmp__sort-icon.sort-arrow--up { transform: scaleY(-1); } .rsl-list .rsl-list__perpage .listtmp__page { width: 100%; min-width: 89px; height: 39px; padding: 0 12px; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #505050; background: #ffffff; border: 1px solid #b5bccc; border-radius: 8px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23505050' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; box-sizing: border-box; } .rsl-list .rsl-list__perpage .listtmp__page:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rsl-list .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .rsl-list .rsl-list__controls.listtmp .listtmp__right { justify-content: space-between; width: 100%; } .rsl-list .listtmp__sorts { gap: 12px 16px; } } .rsl-list .per-page { font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #505050; } .rsl-list .rsl-list__thead { display: flex; align-items: center; width: 100%; height: 56px; background: #f6f9ff; margin-top: 12px; padding: 0 16px; } .rsl-list .th-photo { width: 220px; min-width: 220px; font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; text-align: center; } .rsl-list .th-info { width: 424px; min-width: 424px; font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; text-align: center; } .rsl-list .th-price { width: 256px; min-width: 256px; font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; text-align: center; } .rsl-list .th-status { width: 268px; min-width: 268px; display: flex; align-items: center; justify-content: flex-start; gap: 0; padding: 0 8px; box-sizing: border-box; } .rsl-list .th-status-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .rsl-list .th-status-col:nth-child(2) { flex: 1.4 1 0; } .rsl-list .th-status-title { font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rsl-list .th-status-sub { font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: -0.48px; color: #111111; } .rsl-list .rsl-list__body { width: 100%; padding-left: 16px; } .rsl-list .list-item { display: flex; align-items: center; width: 100%; min-height: 160px; /* rsl-list__body 좌측 16px + 여기 0 = thead(.rsl-list__thead) 좌측 16px 과 정렬 */ padding: 14px 16px 10px 0; cursor: pointer; } .rsl-list .item-photo { width: 220px; min-width: 220px; height: 160px; border-radius: 4px; overflow: hidden; position: relative; background: #e8e8e8; } .rsl-list .item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rsl-list .btn-heart { position: absolute; right: 14px; top: 6px; width: 34px; height: 34px; border: none; border-radius: 17px; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .rsl-list .btn-heart::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center; } .rsl-list .item-body { width: 424px; min-width: 424px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; } .rsl-list .item-body-head { display: flex; flex-direction: column; gap: 8px; } .rsl-list .item-body-detail { display: flex; flex-direction: column; gap: 8px; } .rsl-list .item-type { font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rsl-list .item-meta { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rsl-list .item-case { color: #111111; font-size: 16px; font-weight: 600; } .rsl-list .item-court, .rsl-list .item-divider { color: #767676; font-size: 16px; font-weight: 500; } .rsl-list .item-divider { font-weight: 400; } .rsl-list .item-address { font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -0.72px; color: #111111; } .rsl-list .item-spec { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 15px; line-height: 19.5px; letter-spacing: -0.52px; color: #767676; } .rsl-list .item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .rsl-list .tag { padding: 2px 4px; background: #fff5f5; border-radius: 4px; font-weight: 400; font-size: 15px; line-height: 19.5px; letter-spacing: -0.52px; color: #ff4141; } .rsl-list .tag-more { font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: -0.4px; color: #ff4141; text-decoration: none; } .rsl-list .item-prices { width: 256px; min-width: 256px; padding: 0 0 10px 20px; display: flex; flex-direction: column; gap: 0; justify-content: center; } .rsl-list .price-row { display: flex; align-items: center; justify-content: flex-end; min-height: 27px; width: 100%; max-width: 216px; } .rsl-list .price-label { width: 55px; min-width: 52px; margin-right: 24px; flex-shrink: 0; text-align: right; font-weight: 600; font-size: 16px; line-height: 19.5px; letter-spacing: -0.52px; color: #111111; } .rsl-list .price-value { width: 145px; min-width: 140px; flex-shrink: 0; text-align:right; font-weight: 600; font-size: 16px; line-height: 23px; letter-spacing: -0.72px; color: #111111; } .rsl-list .price-row.highlight .price-label, .rsl-list .price-row.highlight .price-value { color: #4e7ff0; } .rsl-list .price-row.muted .price-label, .rsl-list .price-row.muted .price-value { color: #c4c4c4; } .rsl-list .item-status { width: 268px; min-width: 268px; display: flex; align-items: center; justify-content: flex-start; gap: 0; /* .th-status 와 동일(0 8px) — 좌측 16px 들여쓰기 제거로 헤더와 세로 정렬 */ padding: 0 8px; box-sizing: border-box; } .rsl-list .status-cell { flex: 1 1 0; min-width: 0; width: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; } .rsl-list .status-cell:nth-child(2) { flex: 1.4 1 0; } .rsl-list .status-cell:last-child { width: auto; flex: 1 1 0; } .rsl-list .status-main { font-weight: 500; font-size: 16px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rsl-list .status-cell .status-main:first-child + .status-sub { margin-top: 0; } .rsl-list .status-sub { font-weight: 400; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rsl-list .status-cell:last-child .status-main { font-weight: 400; display: block; } .rsl-list .list-divider { width: 1160px; max-width: calc(100% - 40px); margin: 0 auto; border: none; border-top: 1px solid #b5bccc; } .rsl-list .rsl-list__pagination { display: flex; align-items: center; justify-content: center; gap: 40px; height: 28px; margin-top:15px; } .rsl-list .page-arrow { width: 12px; height: 12px; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23505050' d='M7.5 2.5L4 6l3.5 3.5V2.5z'/%3E%3C/svg%3E") no-repeat center; cursor: pointer; } .rsl-list .page-next { transform: scaleX(-1); } .rsl-list .page-numbers { display: flex; align-items: center; gap: 4px; } .rsl-list .page-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 300; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; color: #505050; border-radius: 30px; } .rsl-list .page-num.current { background: #d0d5e2; font-weight: 500; color: #111111; } @media (max-width: 767px) { .rsl-list { padding: 16px 0 24px; } .rsl-list .list-wrapper { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 16px; } .rsl-list .rsl-list__main { width: 100%; min-height: 0; } .rsl-list .rsl-list__count { padding: 0; margin-bottom: 8px; } .rsl-list .total-count { font-size: 16px; line-height: 24px; letter-spacing: -0.64px; } .rsl-list .rsl-list__controls { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0; min-height: 0; } .rsl-list .rsl-list__controls.listtmp .listtmp__right { display: contents; } .rsl-list .rsl-list__recommend { order: 1; } .rsl-list .rsl-list__perpage { order: 2; width: 72px; height: 32px; margin-left: auto; border-radius: 6px; } .rsl-list .per-page { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } /* landlist listtmp: 모바일에서 정렬 버튼 행(매각기일·감정가 …) 숨김 */ .rsl-list .listtmp__sorts.rsl-list__sort { display: none !important; } .rsl-list .page-numbers::-webkit-scrollbar { display: none; } .rsl-list .listtmp__check-text { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .listtmp__check-box { width: 18px; height: 18px; } .rsl-list .rsl-list__perpage .listtmp__page { height: 100%; min-height: 0; font-size: 13px; padding: 0 8px; padding-right: 22px; border-radius: 6px; } .rsl-list .sort-item, .rsl-list .recommend-label { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .sort-arrow { width: 12px; height: 14px; } .rsl-list .checkbox { width: 18px; height: 18px; } .rsl-list .rsl-list__thead { display: none; } .rsl-list .rsl-list__body { padding-left: 0; margin-top: 12px; } /* list-item--molist 가 아닌 카드(오늘/기타 리스트) — 기존 모바일 그리드 유지 */ .rsl-list .list-item:not(.list-item--molist) { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "photo prices" "body body" "status status"; gap: 8px 12px; min-height: 0; padding: 12px; border: 1px solid #d0d5e2; border-radius: 8px; } .rsl-list .list-item:not(.list-item--molist) .item-photo { grid-area: photo; width: 120px; min-width: 0; height: 80px; } .rsl-list .list-item:not(.list-item--molist) .btn-heart { top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; } .rsl-list .list-item:not(.list-item--molist) .btn-heart::after { width: 16px; height: 16px; background-size: 16px 16px; } .rsl-list .list-item:not(.list-item--molist) .item-prices { grid-area: prices; width: auto; min-width: 0; padding: 1px 0; gap: 0; } .rsl-list .list-item:not(.list-item--molist) .price-row { justify-content: flex-start; align-items: flex-start; min-height: 23px; max-width: none; } .rsl-list .list-item:not(.list-item--molist) .price-label { width: 40px; min-width: 40px; margin-right: 0; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; text-align: left; } .rsl-list .list-item:not(.list-item--molist) .price-value { width: auto; min-width: 0; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; text-align: left; } .rsl-list .list-item:not(.list-item--molist) .price-row.muted .price-value { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rsl-list .list-item:not(.list-item--molist) .item-body { grid-area: body; width: auto; min-width: 0; padding: 0; gap: 4px; } .rsl-list .list-item:not(.list-item--molist) .item-type { font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .list-item:not(.list-item--molist) .item-meta { gap: 4px; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; flex-wrap: wrap; } .rsl-list .list-item:not(.list-item--molist) .item-address { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rsl-list .list-item:not(.list-item--molist) .item-spec { gap: 6px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; flex-wrap: wrap; } .rsl-list .list-item:not(.list-item--molist) .item-tags { gap: 4px; } .rsl-list .list-item:not(.list-item--molist) .tag { padding: 0 4px; font-size: 11px; line-height: 15.4px; letter-spacing: -0.44px; } .rsl-list .list-item:not(.list-item--molist) .tag-more { font-size: 10px; line-height: 14px; } .rsl-list .list-item:not(.list-item--molist) .item-status { grid-area: status; width: auto; min-width: 0; padding: 4px 0 0; border-top: 1px solid #d0d5e2; display: grid; grid-template-columns: auto auto 1fr; gap: 8px 12px; align-items: center; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .item-status { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 10px 12px; align-items: center; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .status-wait-body--stack { display: flex; flex-direction: column; gap: 8px; width: 100%; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .status-wait-body--stack .status-wait-body__row { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .status-wait-body--stack .status-wait-body__label { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; flex-shrink: 0; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .status-wait-body--stack .status-wait-body__value { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; text-align: left; } .rsl-list--wait-yejung .list-item:not(.list-item--molist) .price-label { margin-right: 0; } .rsl-list .list-item:not(.list-item--molist) .status-cell { width: auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0; justify-content: flex-start; } .rsl-list .list-item:not(.list-item--molist) .status-cell:last-child { justify-content: flex-end; } .rsl-list .list-item:not(.list-item--molist) .status-main, .rsl-list .list-item:not(.list-item--molist) .status-sub { font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: -0.48px; white-space: nowrap; } .rsl-list .list-item:not(.list-item--molist) .status-main { color: #505050; } .rsl-list .list-item:not(.list-item--molist) .status-sub { color: #82b8ff; } .rsl-list .list-item:not(.list-item--molist) .status-cell:last-child .status-main + .status-main::before { content: "/"; margin: 0 2px 0 1px; color: #505050; } .rsl-list .list-divider { display: none; } .rsl-list .rsl-list__pagination { width: 100%; gap: 12px; margin-top: 24px; } .rsl-list .page-arrow { width: 10px; height: 10px; flex-shrink: 0; } .rsl-list .page-numbers { gap: 2px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .rsl-list .page-num { width: 24px; height: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.56px; } } /* 예정물건(wait/list): 툴바 셀렉트 · 관심 열만 사진 대신 중앙 배치 */ .rsl-list--wait-yejung .rsl-list__select { height: 39px; min-width: 148px; max-width: 100%; padding: 0 12px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; letter-spacing: -0.56px; color: #111; box-sizing: border-box; } .rsl-list--wait-yejung .rsl-list__perpage .rsl-list__select { min-width: 120px; } .rsl-list .btn-heart.btn-heart--active { background: rgba(78, 127, 240, 0.92); } /* 예정물건: 청구금액 라벨–값 간격 축소 */ .rsl-list--wait-yejung .price-label { margin-right: 8px; } .rsl-list--wait-yejung .price-row { max-width: 240px; } .rsl-list--wait-yejung .price-value { text-align: left; } /* 예정물건: 상태 — 개시/배당 가로 배치를 위해 상태열 확장, 물건정보 열을 동일 px만큼 축소(행 합 1200px 유지) */ .rsl-list--wait-yejung .th-info, .rsl-list--wait-yejung .item-body { width: 344px; min-width: 344px; max-width: 344px; } /* 예정물건: 상태 — item-body와 동일 타이포(라벨=item-type, 값=item-address), 행 합 1200px에 맞춤 */ .rsl-list--wait-yejung .th-status { width: 380px; min-width: 380px; max-width: 380px; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 6px; padding: 0 8px; box-sizing: border-box; /* thead에서 '개시결정/배당종기/결과/조회'가 본문보다 우측으로 보이는 현상 보정 */ margin-left: -8px; } /* thead: 개시결정 / 배당종기 세로로 쌓음(한 줄에 나란히 두지 않음) */ .rsl-list--wait-yejung .th-status-col--wait-body.th-status-col--wait-stack { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; } .rsl-list--wait-yejung .th-status-col--wait-body.th-status-col--wait-stack .th-status-title { line-height: 1.25; min-width: 0; text-align: center; width: 100%; } .rsl-list--wait-yejung .th-status > .th-status-col:nth-child(2) { flex: 0 0 78px; width: 78px; align-items: center; transform: translateX(-20px); } .rsl-list--wait-yejung .th-status > .th-status-col:nth-child(3) { flex: 0 0 52px; width: 52px; align-items: center; transform: translateX(-10px); } .rsl-list--wait-yejung .item-status { width: 357px; min-width: 357px; max-width: 354px; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 6px; /* thead .th-status 와 동일 좌우 패딩 */ padding: 0 7px; box-sizing: border-box; } .rsl-list--wait-yejung .status-cell-group--wait-body { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; } /* PC: 개시결정·날짜 → 다음 줄 배당종기·날짜 (세로 스택, 각 줄은 라벨+값 가로) */ .rsl-list--wait-yejung .status-wait-body--stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-width: 0; } .rsl-list--wait-yejung .status-wait-body--stack .status-wait-body__row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; } .rsl-list--wait-yejung .status-wait-body--stack .status-wait-body__label { flex-shrink: 0; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; white-space: nowrap; } .rsl-list--wait-yejung .status-wait-body--stack .status-wait-body__value { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0; color: #111111; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; overflow-wrap: normal; } .rsl-list--wait-yejung .item-status__overlay { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; min-width: 0; } .rsl-list--wait-yejung .item-status__overlay .status-cell { flex: 0 0 78px; width: 78px; min-width: 0; } .rsl-list--wait-yejung .item-status__overlay .status-cell:last-child { width: 52px; flex: 0 0 52px; } /* ── 리스트 유형 구분: 경매 · 예정 · 공매 ─────────────────── */ .rsl-list .rsl-list__pagination-wrapper { margin-top: 8px; } /* 경매 검색 리스트 (auction/list.html) */ .rsl-list--auction .rsl-list__count .total-count::before { content: "경매"; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: #4e7ff0; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: -0.48px; vertical-align: middle; } /* 예정물건 (wait/list.html) */ .rsl-list--wait-yejung .rsl-list__count .total-count::before { content: "예정"; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: #7c5cff; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: -0.48px; vertical-align: middle; } /* 공매 목록 (public/list.html) */ .rsl-list--gongmae .rsl-list__count .total-count::before { content: "공매"; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: #0d9b7a; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: -0.48px; vertical-align: middle; } .rsl-list--gongmae .rsl-list__thead--gongmae { background: #f2faf7; } .rsl-list--gongmae .rsl-list__controls--gongmae { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; margin-left: auto; } .rsl-list--gongmae .rsl-list__sort-wrap .rsl-list__select, .rsl-list--gongmae .rsl-list__perpage .rsl-list__select { height: 39px; min-width: 160px; max-width: 100%; padding: 0 12px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; letter-spacing: -0.56px; color: #111; box-sizing: border-box; } .rsl-list--gongmae .rsl-list__perpage .rsl-list__select { min-width: 120px; } .rsl-list--gongmae .list-item { cursor: pointer; } .rsl-list--gongmae .list-item.blueone { background: #f4f8ff; } .rsl-list--gongmae .list-item.redone { background: #fdf5f5; } .rsl-list--gongmae .item-spec--gongmae-bid { font-size: 14px; font-weight: 500; color: #1976d2; } .rsl-list--gongmae .gongmae-star-notes .star_rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; } .rsl-list--gongmae .gongmae-star-notes .star_rating span.on { color: #fe4240; } .rsl-list--gongmae .gongmae-memo { font-weight: 500; color: #4e7ff0; } .rsl-list--gongmae .price-row.highlight .price-label { width: auto; min-width: 52px; max-width: 120px; white-space: normal; text-align: right; line-height: 1.25; } /* 공매: 상태(3열) 헤더/본문 정렬 보정 */ .rsl-list--gongmae .item-status { justify-content: space-between; } .rsl-list--gongmae .status-cell { text-align: center; } /* 공매: '조회수' 헤더는 단일 라벨이므로, 본문 마지막 칸의 보조 라벨(조회) 숨김 */ .rsl-list--gongmae .status-cell:last-child .status-sub { display: none; } /* ===== molist-list.css ===== */ /* Frame 2612 — landallList 모바일 카드 (auction/molist.html · molist.css와 동일 톤) PC(768px↑) 스타일은 responnsive-list.css — 본 파일은 max-width:767px 만 */ @media (max-width: 767px) { :root { --molist-text: #111111; --molist-text-secondary: #505050; --molist-text-muted: #767676; --molist-border-card: #d0d5e2; --molist-border-pill: #b5bccc; --molist-badge-blue: #82b8ff; --molist-label-appraisal: #343d52; --molist-bg-appraisal: #f1f3f8; --molist-label-min: #4e7ff0; --molist-bg-min: #d3e4ff; --molist-tag-bg: #fff5f5; --molist-tag-text: #ff4141; } .rsl-list .rsl-list__body { display: flex; flex-direction: column; gap: 12px; } .rsl-list .list-item.list-item--molist { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "head" "prices" "detail"; gap: 0; padding: 0; margin: 0; min-height: 0; align-items: stretch; border: 1px solid var(--molist-border-card); border-radius: 8px; overflow: hidden; background: #ffffff; cursor: pointer; } /* 예정물건: 개시/배당 행(waitdates)을 청구금액(prices) 아래에 배치 */ .rsl-list .list-item.list-item--molist.list-item--wait-yejung { grid-template-areas: "photo" "head" "prices" "waitdates" "detail"; } .rsl-list .list-item.list-item--molist .item-body { display: contents; } .rsl-list .list-item.list-item--molist .item-body-head { grid-area: head; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 12px 0; } .rsl-list .list-item.list-item--molist .item-meta { order: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: clamp(0.8125rem, 3.6vw, 1rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; flex-wrap: wrap; } .rsl-list .list-item.list-item--molist .item-type { order: 2; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding: 0 8px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: var(--molist-badge-blue); background: #ffffff; border: 1px solid var(--molist-badge-blue); border-radius: 4px; } .rsl-list .list-item.list-item--molist .item-case { color: var(--molist-text); } .rsl-list .list-item.list-item--molist .item-court, .rsl-list .list-item.list-item--molist .item-divider { color: var(--molist-text-muted); } .rsl-list .list-item.list-item--molist .item-body-detail { grid-area: detail; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px; } .rsl-list .list-item.list-item--molist .item-photo { grid-area: photo; position: relative; width: 100%; min-width: 0; height: auto; aspect-ratio: 343 / 222; border-radius: 0; overflow: hidden; background: #e4e8f0; } .rsl-list .list-item.list-item--molist .item-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .rsl-list .list-item.list-item--molist .btn-heart { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; z-index: 3; } .rsl-list .list-item.list-item--molist .btn-heart::after { width: 24px; height: 24px; background-size: 24px 24px; } .rsl-list .list-item.list-item--molist .item-status { grid-area: photo; align-self: end; z-index: 2; width: 100%; min-width: 0; margin: 0; padding: 4px 8px; background: rgba(0, 0, 0, 0.5); border: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 31px; box-sizing: border-box; } /* 예정물건: item-status는 그리드에 흩어짐(display:contents) — 개시/배당은 본문, 결과·조회는 사진 오버레이 */ .rsl-list .list-item.list-item--molist.list-item--wait-yejung .item-status { display: contents; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .status-cell-group--wait-body { grid-area: waitdates; width: 100%; min-width: 0; padding: 10px 16px 0 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; background: #ffffff; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .item-status__overlay { grid-area: photo; align-self: end; z-index: 2; width: 100%; min-width: 0; margin: 0; padding: 4px 8px; background: rgba(0, 0, 0, 0.5); border: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 31px; box-sizing: border-box; } .rsl-list .list-item.list-item--molist .status-cell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 2px; justify-content: flex-start; } .rsl-list .list-item.list-item--molist .status-cell:last-child { justify-content: flex-end; flex: 0 1 auto; } .rsl-list .list-item.list-item--molist .status-main, .rsl-list .list-item.list-item--molist .status-sub { font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.04em; white-space: nowrap; color: #ffffff; } .rsl-list .list-item.list-item--molist .status-sub { color: #c8d9ff; } .rsl-list .list-item.list-item--molist .status-cell:last-child .status-main + .status-main::before { content: "/"; margin: 0 4px 0 2px; color: rgba(255, 255, 255, 0.7); } /* 경매 landall/all 리스트: 모바일에서 조회수 열 숨김, 매각기일·D- 블록을 오른쪽 */ .rsl-list .list-item.list-item--molist-auction-status .item-status .status-cell:last-child { display: none; } .rsl-list .list-item.list-item--molist-auction-status .item-status .status-cell:nth-child(2) { margin-left: auto; justify-content: flex-end; flex: 0 1 auto; text-align: right; } .rsl-list .list-item.list-item--molist .item-prices { grid-area: prices; width: 100%; min-width: 0; padding: 8px 12px 0; display: flex; flex-direction: column; gap: 0; } /* landall/all: 감정가·최저가 행 사이 간격 + 모서리 둥글게 */ .rsl-list .list-item.list-item--molist-auction-status .item-prices { gap: 2px; } .rsl-list .list-item.list-item--molist-auction-status .item-prices .price-row { border-radius: 6px; overflow: hidden; } .rsl-list .list-item.list-item--molist .price-row { display: flex; align-items: stretch; justify-content: stretch; min-height: 31px; width: 100%; max-width: none; margin: 0; } .rsl-list .list-item.list-item--molist .price-label { flex: 0 0 54px; width: 54px; min-width: 54px; margin: 0; padding: 4px 8px; display: flex; align-items: center; justify-content: flex-start; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; color: #ffffff; text-align: left; border: none; box-sizing: border-box; } .rsl-list .list-item.list-item--molist .price-row:not(.highlight):not(.muted) .price-label { background: var(--molist-label-appraisal); } .rsl-list .list-item.list-item--molist .price-row.highlight .price-label { background: var(--molist-label-min); } .rsl-list .list-item.list-item--molist .price-row.muted .price-label { background: var(--molist-label-appraisal); } .rsl-list .list-item.list-item--molist .price-value { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 8px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.04em; text-align: right; box-sizing: border-box; } .rsl-list .list-item.list-item--molist .price-row:not(.highlight):not(.muted) .price-value { background: var(--molist-bg-appraisal); color: var(--molist-text); } .rsl-list .list-item.list-item--molist .price-row.highlight .price-value { background: var(--molist-bg-min); color: var(--molist-label-min); } .rsl-list .list-item.list-item--molist .price-row.muted .price-value { background: var(--molist-bg-appraisal); color: var(--molist-text-muted); flex-wrap: wrap; justify-content: flex-end; } .rsl-list .list-item.list-item--molist .price-row.muted .price-label[style] { color: #fff !important; } .rsl-list .list-item.list-item--molist .price-row.muted .price-value[style] { color: inherit; } /* 실거래(그린) / KB(노란) — 모바일에서 구분 색 */ .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--realtrade .price-label { background: #0d8f55; color: #ffffff !important; } .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--realtrade .price-label[style] { color: #ffffff !important; } .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--realtrade .price-value { background: #e5f6ed; color: #14b155 !important; flex-wrap: nowrap !important; } .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--realtrade .price-value[style] { color: #14b155 !important; } .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--kb .price-label { flex: 0 0 54px; width: 54px; min-width: 54px; max-width: 54px; background: #d4a017; color: #ffffff !important; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: -0.07em; line-height: 1.2; padding: 4px 6px; justify-content: flex-start; } .rsl-list .list-item.list-item--molist.list-item--molist-auction-status .price-row--kb .price-value { background: #fff9e3; color: #7a5f00; flex-wrap: nowrap !important; white-space: nowrap; font-size: clamp(11px, 3.1vw, 14px); letter-spacing: -0.055em; line-height: 1.35; font-size: 15px; } .rsl-list .list-item.list-item--molist .item-address { margin: 0; font-size: clamp(1rem, 3.8vw, 1.25rem); font-weight: 600; line-height: 1.5; letter-spacing: -0.05em; color: var(--molist-text); font-size: 20px; } .rsl-list .list-item.list-item--molist .item-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; color: var(--molist-text-muted); } .rsl-list .list-item.list-item--molist .item-spec span { color: #767676; font-family: "Pretendard Variable", "Pretendard", sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%; letter-spacing: -0.6px; } .rsl-list .list-item.list-item--molist .item-spec .item-divider { width: 1px; height: 12px; background: var(--molist-text-muted); display: inline-block; overflow: hidden; font-size: 0; line-height: 0; color: transparent; margin: 0 2px; } .rsl-list .list-item.list-item--molist .item-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .rsl-list .list-item.list-item--molist .tag { display: inline-flex; align-items: center; padding: 0 4px; min-height: 23px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.04em; color: var(--molist-tag-text); background: var(--molist-tag-bg); border-radius: 4px; } .rsl-list .list-item.list-item--molist + .list-divider { display: none; } /* 예정물건(wait): 청구금액 — 공통 molist 라벨 54px 고정 때문에 '청구금액'이 2줄로 줄바꿈 → 1줄 */ .rsl-list .list-item.list-item--molist.list-item--wait-yejung .price-row { flex-wrap: nowrap; align-items: center; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .price-label { flex: 0 0 auto; width: auto; min-width: max-content; max-width: none; white-space: nowrap; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .price-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 예정물건(wait): 청구금액 아래 — 개시/배당 세로 스택 · 모바일은 오른쪽 정렬·글자 확대 */ .rsl-list .list-item.list-item--molist.list-item--wait-yejung .status-wait-body--stack { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%; align-items: flex-end; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .status-wait-body--stack .status-wait-body__row { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; width: 100%; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .status-wait-body--stack .status-wait-body__label { flex-shrink: 0; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -0.03em; color: #657088; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .status-wait-body--stack .status-wait-body__value { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -0.03em; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .item-status__overlay .status-cell { flex: 1 1 auto; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .item-status__overlay .status-cell:first-child { flex: 0 1 auto; } .rsl-list .list-item.list-item--molist.list-item--wait-yejung .item-status__overlay .status-cell:last-child { flex: 0 0 auto; margin-left: auto; } /* 공매: 최저가 라벨(비율 포함) 줄바꿈 · 타입 배지 내 상태색 유지 */ .rsl-list--gongmae .list-item.list-item--molist .price-row.highlight .price-label { flex: 0 1 42%; width: auto; min-width: 0; max-width: none; white-space: normal; line-height: 1.25; font-size: 12px; padding: 4px 6px; align-items: center; } .rsl-list--gongmae .list-item.list-item--molist .item-body-head .item-type { max-width: 100%; flex-wrap: wrap; align-content: flex-start; height: auto; min-height: 31px; border-color: var(--molist-border-pill); color: var(--molist-text); } .rsl-list--gongmae .list-item.list-item--molist .item-body-head .item-type span[style] { color: #fe4240 !important; } .rsl-list--gongmae .list-item.list-item--molist .status-cell:last-child .status-sub { display: none; } } /* ===== responnsive-schedule.css ===== */ .rsc-page { min-height: 100vh; margin-top: 25px; } .rsc-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 28px 20px 16px; background: #ffffff; } .rsc-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } /* === 입찰달력 공통 === */ .rsc-board-wrap { background:#f5f7fa; padding:60px 0 40px; } .rsc-board-wrap button { border:0; background:transparent; font:inherit; cursor:pointer; } /* === PC: 달력|현황별|종류별|법원 4컬럼 === */ .rsc-board { width:min(1200px,calc(100% - 40px)); margin:0 auto; min-height:387px; background:#fff; border:1px solid #d0d5e2; border-radius:10px; overflow:hidden; display:grid; grid-template-columns:29% 17% 17% 1fr; } .rsc-board > * { border-right:1px solid #e8ecf5; } .rsc-board > *:last-child { border-right:none; } /* 섹션 레이블 */ .rsc-sec-label { font-size:15px; font-weight:500; color:#111; letter-spacing:-.6px; margin-bottom:12px; } /* 달력 */ .rsc-cal-wrap { padding:20px 16px; } .rsc-cal-nav { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:12px; } .rsc-cal-nav-btn { width:20px; height:20px; color:#767676; display:flex; align-items:center; justify-content:center; } .rsc-cal-nav-btn:hover { color:#4E7FF0; } .rsc-cal-nav-btn svg { width:16px; height:16px; display:block; } .rsc-cal-month { font-size:15px; font-weight:500; color:#111; letter-spacing:-0.6px; } .rsc-calendar__grid { display:grid; grid-template-columns:repeat(7,44px); grid-auto-rows:48px; } .rsc-cal-head { display:flex; align-items:center; justify-content:center; height:48px; font-size:15px; font-weight:400; color:#111; letter-spacing:-0.6px; } .rsc-calendar__cell--date, .rsc-calendar__cell--off { display:flex; align-items:center; justify-content:center; height:48px; font-size:15px; font-weight:400; color:#111; letter-spacing:-0.6px; cursor:pointer; position:relative; transition:.12s; } .rsc-calendar__cell--off { font-weight:400; color:#c4c4c4; cursor:default; } .rsc-calendar__cell--date:hover { color:#4E7FF0; } .rsc-calendar__cell--active { color:transparent; } .rsc-calendar__cell--active::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:#4E7FF0; z-index:0; } .rsc-calendar__cell--active::after { content:attr(data-day); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; color:#fff; font-size:15px; font-weight:700; } /* 현황별/종류별 */ .rsc-stat-panel { padding:12px; } .rsc-stat-list { display:flex; flex-direction:column; gap:8px; } .rsc-stat-row { display:flex; justify-content:space-between; align-items:center; min-height:32px; padding:6px 8px; border-radius:4px; background:#f1f3f8; font-size:13px; cursor:pointer; } .rsc-stat-row span { color:#111; font-weight:500; letter-spacing:-0.52px; } .rsc-stat-row strong { font-weight:500; color:#111; letter-spacing:-0.52px; } .rsc-stat-row.blue { background:#4E7FF0; cursor:default; } .rsc-stat-row.blue span, .rsc-stat-row.blue strong { color:#fff; } .rsc-stat-row.red { background:#FFF2F2; } .rsc-stat-row.red span, .rsc-stat-row.red strong { color:#E03030; } .rsc-stat-row.is-active { background:#edf4ff; } .rsc-stat-row.is-active span, .rsc-stat-row.is-active strong { color:#4E7FF0; font-weight:700; } /* 법원 패널 */ .rsc-court-panel { padding:20px 16px; } .rsc-panel-head { display:flex; align-items:center; justify-content:space-between; height:31px; margin-bottom:0; padding-bottom:12px; border-bottom:1px solid #d0d5e2; } .rsc-panel-head__date { font-weight:600; font-size:18px; line-height:27px; letter-spacing:-0.72px; color:#111; } .rsc-legend { display:inline-flex; align-items:center; gap:16px; min-height:25px; padding:4px 12px; border-radius:4px; background:#f6f9ff; } .rsc-legend__item { position:relative; padding-left:12px; font-weight:400; font-size:12px; line-height:16.8px; letter-spacing:-0.48px; } .rsc-legend__item::before { content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:50%; transform:translateY(-50%); background:currentColor; } .rsc-legend__item--blue { color:#4e7ff0; } .rsc-legend__item--gray { color:#767676; } .rsc-legend__item--green { color:#14b155; } .rsc-legend__item--red { color:#ff4141; } .rsc-courts__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px 8px; margin-top:12px; } .rsc-court-item { font-size:15px; color:#333; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.12s; line-height:1.5; cursor:pointer; } .rsc-court-item:hover { color:#4E7FF0; } .rsc-court-item.is-active { color:#4E7FF0; font-weight:700; } /* 칩 섹션 (기본 숨김) */ .rsc-chip-section { display:none; padding:0 14px 14px; min-width:0; } .rsc-chip-section + .rsc-chip-section { padding-top:0; } .rsc-chip-section .rsc-sec-label { padding-top:14px; } .rsc-chip-row { display:flex; gap:7px; overflow-x:auto; width:100%; padding-bottom:3px; scrollbar-width:none; } .rsc-chip-row::-webkit-scrollbar { display:none; } .rsc-chip { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 14px; border-radius:9px; background:#f5f7fc; min-width:68px; cursor:pointer; } .rsc-chip-name { font-size:11px; color:#888; font-weight:500; } .rsc-chip-val { font-size:13px; font-weight:700; color:#222; } .rsc-chip.blue { background:#EEF3FF; } .rsc-chip.blue .rsc-chip-name, .rsc-chip.blue .rsc-chip-val { color:#4E7FF0; } .rsc-chip.red { background:#FFF2F2; } .rsc-chip.red .rsc-chip-name, .rsc-chip.red .rsc-chip-val { color:#E03030; } .rsc-chip.is-active { background:#edf4ff; } .rsc-chip.is-active .rsc-chip-name, .rsc-chip.is-active .rsc-chip-val { color:#4E7FF0; } /* === 1024px: 달력+현황+종류 위 / 법원 아래 === */ @media (max-width:1024px) { .rsc-board-wrap { padding:40px 0 30px; } .rsc-board { grid-template-columns:340px 1fr 1fr; grid-template-rows:auto auto; } .rsc-board > *:nth-child(3) { border-right:none; } .rsc-court-panel { grid-column:1/-1; border-right:none; border-top:1px solid #e8ecf5; } .rsc-courts__grid { grid-template-columns:repeat(4,1fr); } .rsc-calendar__cell--date, .rsc-calendar__cell--off { height:34px; font-size:14px; } .rsc-calendar__cell--active::before { width:30px; height:30px; } .rsc-calendar__cell--active::after { font-size:14px; } } /* === 768px↓: 세로 스택 + 칩 가로스크롤 === */ @media (max-width:768px) { .rsc-board-wrap { background:#fff; padding:24px 0; } .rsc-board { width:calc(100% - 32px); grid-template-columns:1fr; grid-template-rows:none; border-radius:10px; overflow:visible; } .rsc-board > * { border-right:none; border-bottom:1px solid #e8ecf5; } .rsc-board > *:last-child { border-bottom:none; } .rsc-court-panel { grid-column:auto; border-top:none; } .rsc-calendar__grid { grid-template-columns:repeat(7,1fr); } .rsc-cal-head { height:44px; } .rsc-calendar__cell--date, .rsc-calendar__cell--off { height:44px; } .rsc-calendar__cell--active::before { width:min(34px,74%); height:min(34px,74%); } .rsc-stat-panel { display:none; } .rsc-chip-section { display:block !important; } .rsc-courts__grid { grid-template-columns:repeat(3,1fr); } .rsc-court-item { font-size:13px; } .rsc-heading { width:100%; padding:20px 16px 12px; } .rsc-heading__title { font-size:20px; line-height:28px; letter-spacing:-0.8px; } } /* === 480px === */ @media (max-width:480px) { .rsc-board { width:calc(100% - 24px); } .rsc-cal-head { height:22px; font-size:10px; } .rsc-calendar__cell--active::before { width:min(28px,74%); height:min(28px,74%); } .rsc-calendar__cell--active::after { font-size:13px; } .rsc-courts__grid { grid-template-columns:repeat(2,1fr); } .rsc-chip { min-width:60px; padding:6px 10px; } .rsc-chip-name { font-size:10px; } .rsc-chip-val { font-size:12px; } .rsc-panel-head__date { font-size:15px; white-space:nowrap; } .rsc-legend { gap:8px; padding:4px 8px; } } @media (max-width:375px) { .rsc-courts__grid { grid-template-columns:repeat(2,1fr); } .rsc-panel-head__date { font-size:14px; } .rsc-legend { gap:6px; padding:4px 6px; } } /* ===== responnsive-court.css ===== */ button, input, select { font: inherit; } button { border: 0; background: none; cursor: pointer; } .rc-page { min-height: 100vh; padding-bottom: 40px; margin-top:25px; } .rc-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 28px 20px 16px; background: #ffffff; } .rc-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; } .rc-search__box { max-width: 1200px; margin: 0 auto; background: #ffffff; border: 1px solid #b5bccc; } .rc-recommend { display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 0 20px; background: #e8f1ff; } .rc-recommend__title { flex-shrink: 0; font-weight: 600; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rc-recommend__pills { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px; } .rc-pill { height: 36px; padding: 7px 12px; border: 1px solid #657088; border-radius: 50px; background: #ffffff; font-weight: 600; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; color: #657088; } .rc-region-pill { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 36px; padding: 0; border: 1.5px solid #c0c8d8; border-radius: 8px; background: #ffffff; font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: -0.4px; color: #657088; } .rc-main { padding: 20px 20px 3px; border-top: 1px solid #b5bccc; } .rc-region-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px; } .rc-region-pill--active { background: #4e7ff0; border-color: #4e7ff0; color: #ffffff; } .rc-court-strip { display: flex; align-items: center; gap: 28px; width: 100%; min-width: 0; min-height: 39px; margin-top: 12px; padding: 0 28px; border-radius: 8px; background: #f1f3f8; overflow-x: auto; overflow-y: hidden; } .rc-recommend__pills::-webkit-scrollbar, .rc-court-strip::-webkit-scrollbar, .rc-region-tabs::-webkit-scrollbar { display: none; } .rc-pill, .rc-region-pill { flex: 0 0 auto; white-space: nowrap; } .rc-court-chip { flex: 0 0 auto; white-space: nowrap; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rc-court-chip--active { color: #4e7ff0; text-decoration: underline; text-underline-offset: 4px; } /* PC·태블릿 가로(768px~): 4열 그리드 유지 — 모바일 전용 스타일은 아래 max-width:767px */ .rc-date-panel { margin-top: 12px; padding: 16px 28px; border: 1px solid #d0d5e2; border-radius: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 31px; margin-bottom:10px; } /* 매각기일 패널만: 네이티브 체크박스 1개 (커스텀 박스 제거) */ .rc-date-panel .rc-date-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; } .rc-date-panel .rc-date-item input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 0; border: 0; border-radius: 4px; background-color: #d0d5e2; cursor: pointer; -webkit-appearance: none; appearance: none; vertical-align: middle; } .rc-date-panel .rc-date-item input[type="checkbox"]:checked { background-color: #4e7ff0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M1 5l3 3 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 8px; } .rc-date-panel .rc-date-item input[type="checkbox"]:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rc-date-panel .rc-date-item__text { min-width: 0; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #505050; } .rc-date-panel .rc-date-item--alert .rc-date-item__text { color: #ff4141; } /* 데스크톱: 매각기일(전체) 한 줄 */ .rc-date-panel .rc-date-item__break-mobile { display: none; } .rsl-yongdo-chip, .rsl-special-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d0d5e2; border-radius: 999px; background: #fff; color: #505050; font-size: 13px; font-weight: 500; line-height: 19.5px; letter-spacing: -0.52px; cursor: pointer; } .rsl-yongdo-chip input, .rsl-special-chip input, .rsl-special-option input, .rsl-yongdo-panel__all input { margin-right: 8px; } .rsl-special-panel { display: grid; grid-template-columns: 220px 1px minmax(0, 1fr); gap: 16px; align-items: start; } .rsl-special-panel__side { display: flex; flex-direction: column; gap: 12px; } .rsl-special-option { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel__line { width: 1px; min-height: 100%; background: #d0d5e2; } .rc-line { border: 0; border-top: 1px solid #b5bccc; margin: 5px 0; } .rc-form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; } .rc-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .rc-form-pair .rc-form-row { margin-bottom: 16px; } .rc-label { flex-shrink: 0; width: 52px; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rc-label--auto { width: auto; } .rc-inline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .rc-field, .rc-input--full { flex: 1; min-width: 0; } .rc-input, .rc-select { width: 100%; height: 39px; padding: 0 12px; border: 1px solid #b5bccc; border-radius: 8px; background: #ffffff; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111111; } .rc-input::placeholder { color: #b5bccc; } .rc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath fill='%23b5bccc' d='M3.5 6L7 10l3.5-4H3.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .rc-input--date { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20'%3E%3Crect x='1.5' y='3.5' width='15' height='14.5' rx='2' fill='none' stroke='%23b5bccc' stroke-width='1.5'/%3E%3Cpath d='M5 1.75v4M13 1.75v4M1.5 7.5h15' fill='none' stroke='%23b5bccc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .rc-input--measure, .rc-input--money { text-align: right; } .rc-btn-outline { flex-shrink: 0; height: 39px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #ffffff; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rc-select--percent { flex: 0 0 89px; } .rc-txt { flex-shrink: 0; font-weight: 300; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rc-expands { margin-top: 16px; } .rc-expand { width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #b5bccc; color: #111111; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rc-expand:last-child { border-bottom: 1px solid #b5bccc; } .rc-expand__icon { color: #4e7ff0; } .rc-footer { margin-top: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .rc-footer__left { min-width: 0; } .rc-footer__save { display: flex; align-items: center; gap: 8px; } .rc-link { color: #4e7ff0; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rc-link--load { margin-left: auto; font-weight: 400; } .rc-footer__saved { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 12px; } .rc-saved-chip { position: relative; padding-right: 18px; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #b5bccc; } .rc-saved-chip::after { content: "×"; position: absolute; right: 0; top: 0; } .rc-footer__btns { display: flex; gap: 8px; flex-shrink: 0; } .rc-btn-reset, .rc-btn-search { width: 100px; height: 51px; border-radius: 8px; font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: -0.72px; } .rc-btn-reset { border: 1px solid #b5bccc; background: #ffffff; color: #b5bccc; } .rc-btn-search { background: #4e7ff0; color: #ffffff; } /* 매각기일 우측 컬럼 */ .rc-mday-col { display: flex; flex-direction: column; min-width: 0; } .rc-mday-label-row { margin-bottom: 6px; } .rc-mday-label-row .rs-label { width: auto; } /* 물건용도+매각기일 2열 페어 */ .rc-court-pair--yongdo-mday { align-items: start; margin-bottom: 12px; } .rc-court-pair--yongdo-mday .rc-date-panel { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; padding: 10px 14px; margin-top: 0; margin-bottom: 0; } @media (max-width: 1279px) { .rc-recommend { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 15px 20px 12px; } .rc-recommend__pills { width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; padding-bottom: 0; } .rc-region-tabs { flex-wrap: wrap; overflow: visible; white-space: normal; padding-bottom: 0; margin-right: 0; padding-right: 0; } .rc-court-strip { flex-wrap: wrap; gap: 12px 20px; min-height: 0; padding: 12px 20px; overflow: visible; } } @media (max-width: 767px) { body { background: #ffffff; } .rc-page { padding-bottom: 24px; } .rc-heading { width: 100%; padding: 20px 16px 12px; } .rc-heading__title { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; } .rc-search__box { max-width: 100%; border-left: 0; border-right: 0; } .rc-recommend { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px 16px 12px; } .rc-recommend__title { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-recommend__pills, .rc-region-tabs { width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; } .rc-main { padding: 16px 16px 24px; } .rc-pill { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rc-region-pill { width: 46px; height: 32px; font-size: 12px; border-radius: 7px; } .rc-court-strip { margin-top: 8px; padding: 12px; gap: 10px 16px; flex-wrap: wrap; overflow: visible; } .rc-court-chip { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } /* 모바일만: 한 줄에 2개씩(좌·우). flex로 고정 — columns 다단은 일부 환경에서 1열로만 보임 */ .rc-main .rc-date-panel { margin-top: 8px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-content: flex-start; align-items: flex-start; box-sizing: border-box; width: 100%; min-width: 0; overflow: visible; } .rc-main .rc-date-panel .rc-date-item { display: flex; align-items: center; gap: 8px; flex: 0 0 calc((100% - 12px) / 2); width: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); min-width: 0; box-sizing: border-box; margin: 0; cursor: pointer; } /* 모바일: 매각기일(전체) 1줄 */ .rc-date-panel .rc-date-item__break-mobile { display: none; } .rc-date-panel .rc-date-item--selected .rc-date-item__text { line-height: 1.35; } .rc-date-panel .rc-date-item__text { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-line { margin: 12px 0; } .rc-form-pair { grid-template-columns: 1fr; gap: 0; } .rc-form-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; } .rc-label { width: auto; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-inline, .rc-field, .rc-input--full { width: 100%; } .rc-inline { flex-wrap: wrap; } .rc-input, .rc-select, .rc-btn-outline { height: 36px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-form-row--type .rc-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rc-form-row--type .rc-btn-outline { grid-column: 1 / -1; width: 100%; } .rc-form-pair .rc-inline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .rc-form-pair:nth-of-type(3) .rc-inline, .rc-form-pair:nth-of-type(4) .rc-inline { grid-template-columns: 1fr auto 1fr auto; } .rc-select--percent { flex: none; width: 100%; } .rc-expands { margin-top: 12px; } .rc-expand { height: 47px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-footer { flex-direction: column; gap: 16px; } .rc-footer__save { flex-wrap: wrap; } .rc-link, .rc-saved-chip { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rc-footer__btns { width: 100%; } .rc-btn-reset, .rc-btn-search { flex: 1; width: auto; height: 47px; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } /* * 법원별 landcourt — 추가 조건: rsl-mosearch.css보다 후순위로 덮어씀 * (:has 미지원·캐스케이드 패배 대비, rc-court-row--area-pyeong는 landcourt.html만) */ .rc-search #rcCourtGamdbRow { margin-bottom: -1px; } /* 펼침 시: 추가조건 버튼 행 border-bottom + 블록 상단이 겹쳐 선이 두껍게 보임 → 한 줄만 유지 */ .rc-search .rc-main > form:has(.rsl-search-extra.rc-court-search-extra.is-open) .rsl-search__more-wrap.rc-court-more-wrap { border-bottom: none !important; } .rc-search .rsl-search-extra.rc-court-search-extra.is-open { gap: 10px !important; padding-top: 10px !important; padding-bottom: 20px !important; border-top: 1px solid #b5bccc !important; } .rc-search .rc-main > form > .rsl-search-extra.rc-court-search-extra .rs-form-pair { display: contents !important; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; max-width: none !important; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline .input_effect { flex: 1 1 0 !important; min-width: 0 !important; /* 38px → 18px: 최소·최대 입력칸 가로 확대(평 버튼·~ 자리는 flex로 유지) */ max-width: calc(50% - 18px) !important; overflow: hidden; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline .input_effect .rs-input { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding-right: 32px !important; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline .input_effect::after { right: 6px !important; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline .btn-small13 { flex: 0 0 auto !important; padding-left: 28px !important; } .rc-search .rsl-search-extra .rs-form-pair > .rc-court-row--area-pyeong > .rs-inline .rs-txt { flex-shrink: 0 !important; } } /* ===== responnsive-sozaezi.css ===== */ .rsoz-page { min-height: 100vh; padding-bottom: 40px; margin-top:25px; } .rsoz-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 28px 20px 16px; background: #ffffff; } .rsoz-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } .rsoz-search__box { max-width: 1200px; margin: 0 auto; background: #ffffff; border: 1px solid #b5bccc; } .rsoz-recommend { display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 0 20px; background: #e8f1ff; } .rsoz-recommend__title { flex-shrink: 0; font-weight: 600; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rsoz-recommend__pills { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px; } .rsoz-recommend__pills::-webkit-scrollbar, .rsoz-region-tabs::-webkit-scrollbar { display: none; } .rsoz-pill, .rsoz-region-pill { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 50px; background: #ffffff; font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; color: #657088; white-space: nowrap; } .rsoz-main { padding: 20px 20px 3px; border-top: 1px solid #b5bccc; } /* 범위/금액 입력 폭 통일(단, 매각기일(date range)은 제외) */ /* 감정가/최저가(select wrapper rs-field): 동일 폭 */ .rsoz-search .rs-form-pair .rs-field { width: 42%; } /* 매각기일(date range): 감정가용 42% 규칙과 분리 — 두 달력 칸 균등·좁은 화면에서도 줄어들 수 있게 */ .rsoz-search .rs-form-pair .rs-form-row--sale-date .rs-field.date { width: auto; flex: 1 1 0; min-width: 0; } /* 감정가대비(select): 동일 폭 */ .rsoz-search .rs-form-row--gamdb .rs-inline .rs-select { width: 42%; } /* 토지·건물면적(.rs-inline--area) 숫자 입력만 동일 폭 — 매각기일 달력(.rs-field.date)은 제외 */ .rsoz-search .rs-form-pair .rs-inline--area > input.rs-input { width: 42%; } .rsoz-search .rs-field.date .rs-input { width: 100%; max-width: 100%; box-sizing: border-box; } .rsoz-region-tabs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px; } .rsoz-region-pill--active { background: #4e7ff0; border-color: #4e7ff0; color: #ffffff; } .rsoz-loc-panel { margin-top: 12px; padding: 16px 28px; border: 1px solid #d0d5e2; border-radius: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 31px; } .rsoz-subregion { margin-top: 8px; border: 1px solid #d0d5e2; border-radius: 8px; overflow: hidden; margin-bottom:5px; } .rsoz-subregion__summary { min-height: 36px; padding: 8px 16px; background: #d0d5e2; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; color: #343d52; } .rsoz-loc-panel--sub { margin-top: 0; border: 0; border-top: 1px solid #d0d5e2; border-radius: 0; } .rsoz-check-item { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; } /* 네이티브 체크박스만 사용 (커스텀 박스 제거 — 이중 표시 방지) */ .rsoz-check-item input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 0; border: 0; border-radius: 4px; background-color: #d0d5e2; cursor: pointer; -webkit-appearance: none; appearance: none; vertical-align: middle; } .rsoz-check-item input[type="checkbox"]:checked { background-color: #4e7ff0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M1 5l3 3 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 8px; } .rsoz-check-item input[type="checkbox"]:focus-visible { outline: 2px solid #4e7ff0; outline-offset: 2px; } .rsoz-check-item__text { min-width: 0; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #657088; } .rsoz-check-item--active .rsoz-check-item__text, .rsoz-check-item:has(input:checked) .rsoz-check-item__text { color: #505050; } @media (max-width: 1279px) { .rsoz-recommend { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 15px 20px 12px; } .rsoz-recommend__pills, .rsoz-region-tabs { width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; padding-bottom: 0; } .rsoz-loc-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; } } @media (max-width: 767px) { .rsoz-page { padding-bottom: 24px; } .rsoz-heading { width: 100%; padding: 20px 16px 12px; } .rsoz-heading__title { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; } .rsoz-search__box { max-width: 100%; border-left: 0; border-right: 0; } .rsoz-recommend { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px 16px 12px; } .rsoz-recommend__title { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsoz-recommend__pills, .rsoz-region-tabs { width: 100%; flex-wrap: wrap; overflow: visible; white-space: normal; } .rsoz-main { padding: 16px 16px 24px; } .rsoz-pill, .rsoz-region-pill { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } /* 모바일만: 시군구·세부지역 체크 목록 세로 3줄(3열). PC·태블릿은 위 구간 그리드 유지 */ .rsoz-main .rsoz-loc-panel { margin-top: 8px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 8px; align-content: flex-start; align-items: flex-start; box-sizing: border-box; width: 100%; min-width: 0; overflow: visible; } .rsoz-main .rsoz-loc-panel .rsoz-check-item { display: flex; align-items: center; gap: 6px; flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); min-width: 0; box-sizing: border-box; margin: 0; cursor: pointer; } .rsoz-subregion { margin-top: 8px; } .rsoz-subregion__summary { min-height: 32px; padding: 6px 12px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rsoz-check-item__text { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } /* * 소재지 landsozaezi — 추가 조건: rsl-mosearch.css보다 후순위로 덮어씀 * (법원 landcourt · responnsive-court.css와 동일 패턴, rsoz-search-extra 전용) */ .rsoz-search #rsozGamdbRow { margin-bottom: -1px; } .rsoz-search .rsoz-main > form:has(.rsl-search-extra.rsoz-search-extra.is-open) .rsl-search__more-wrap.rsoz-more-wrap { border-bottom: none !important; } .rsoz-search .rsl-search-extra.rsoz-search-extra.is-open { gap: 10px !important; padding-top: 10px !important; padding-bottom: 20px !important; border-top: 1px solid #b5bccc !important; } .rsoz-search .rsoz-main > form > .rsoz-search-after-subregion > .rsl-search-extra.rsoz-search-extra .rs-form-pair { display: contents !important; } /* 토지·건물면적: 모바일 추가조건 안에서 한 줄 정렬 보강 */ .rsoz-search .rsl-search-extra .rs-form-pair .rs-inline--area { flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; row-gap: 0 !important; } .rsoz-search .rsl-search-extra .rs-form-pair .rs-inline--area > input.rs-input { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } .rsoz-search .rsl-search-extra .rs-form-pair .rs-inline--area > .rs-unit, .rsoz-search .rsl-search-extra .rs-form-pair .rs-inline--area > .rs-txt { flex-shrink: 0 !important; } .rsoz-search .rsl-search-extra .rs-form-pair .rs-inline--area > .btn-small13 { flex: 0 0 auto !important; padding-left: 28px !important; } } /* ===== responnsive-gongmae.css ===== */ /* ═══════════════════════════════════════════════ CSS 변수 ═══════════════════════════════════════════════ */ :root { --blue: #4e7ff0; --gray-line: #b5bccc; --gray-txt: #657088; --gray-ph: #b5bccc; --black: #111111; } button { cursor: pointer; font-family: inherit; } select { font-family: inherit; cursor: pointer; } input { font-family: inherit; } input:focus, select:focus { outline: none; } /* ═══════════════════════════════════════════════ 공매 페이지 래퍼·제목 (landcourt .rc-page / .rc-heading 와 동일 정렬) ═══════════════════════════════════════════════ */ .rgm-page { min-height: 100vh; padding-bottom: 40px; margin-top: 25px; } .rgm-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 28px 20px 16px; background: #ffffff; } .rgm-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } /* 검색 영역: searchlist_style.css 의 .rsl-search(가운데·max-width) + responnsive-court.css 의 .rc-search__box(테두리·배경) 와 동일 구조 */ .rgm-search.rsl-search { box-sizing: border-box; } /* 법원 landcourt(.rc-heading → .rc-search)와 동일: rsl-search 기본 margin-top 제거 */ .rgm-page .rgm-search.rsl-search { margin-top: 0; } .rgm-search .rc-search__box { box-sizing: border-box; } /* 외곽은 rc-search__box 테두리만 사용 — 안쪽 패널 이중 테두리 제거 */ .rgm-search .search-panel { border: none; background: #ffffff; } /* ═══════════════════════════════════════════════ 추천경매 탭바 (피그마 Frame 2563) ═══════════════════════════════════════════════ */ .rec-tabbar { width: 100%; height: 56px; background: #e8f1ff; display: flex; align-items: center; padding: 0 20px; gap: 20px; } /* 종합·법원 .rs-recommend / .rs-pill 과 동일 밀도 */ .rec-tabbar__title { flex-shrink: 0; color: var(--blue); font-weight: 600; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; white-space: nowrap; } .rec-tabbar__tabs { display: flex; align-items: center; gap: 8px; } .rec-tab { height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 50px; background: transparent; color: #657088; font-weight: 600; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; white-space: nowrap; } /* ═══════════════════════════════════════════════ 공매 검색 패널 (피그마 Frame 2562) ═══════════════════════════════════════════════ */ .search-panel { width: 100%; border: 1px solid var(--gray-line); display: flex; flex-direction: column; } /* ────────────────────────────────────────────── 필터 행 묶음 — list 페이지(.rs-form-grid gap: 12px) 기준 통일 ────────────────────────────────────────────── */ .filter-rows { display: flex; flex-direction: column; gap: 12px; } /* ────────────────────────────────────────────── .calendar.w90 박스 시각 통일 — list/공매/wait/npl 등 모든 검색 페이지 공통 (.calendar 클래스 단독으로는 박스 스타일이 없어, 페이지별로 plain하게 보이는 문제 해결) ─ 박스 폭: 부모 .rs-field.date의 flex:1로 자동 분할 ─ 달력 아이콘: jQuery UI가 .calendar input에 자동 attach한 ui-datepicker-trigger 버튼이 .rs-field.date(position:relative) 안에 absolute로 위치 (CSS line 701~의 SVG 배경 활용) ────────────────────────────────────────────── */ .rs-form-row--sale-date .rs-field.date, .rs-inline--sale-date .rs-field.date, .filter-ctrl--sday .rs-field.date { position: relative; flex: 1 1 0; min-width: 0; } input.calendar.w90 { width: 100%; height: 40px; padding: 0 32px 0 10px; /* 우측 32px 달력 아이콘 공간 */ border: 1px solid #b5bccc; border-radius: 8px; font-size: 15px; font-weight: 500; line-height: 38px; letter-spacing: -0.6px; color: #111; background: #fff; box-sizing: border-box; } input.calendar.w90::placeholder { color: #b5bccc; } /* 달력 트리거 버튼 — .rgm-search(공매)에서도 동일 표시 */ .rgm-search .rs-field.date button.ui-datepicker-trigger { margin-top: 0; width: 18px; height: 20px; text-indent: -9999em; background: url(/landimg/calendar_icon.svg) no-repeat; outline: 0; border: none; cursor: pointer; padding: 0; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } /* ────────────────────────────────────────────── 개별 필터 행 ────────────────────────────────────────────── */ .filter-row { display: flex; align-items: center; min-height: 36px; } /* 상단 행: 법원 .rc-form-row 여백에 가깝게 */ .filter-row--top { height: auto; min-height: 52px; border-bottom: 1px solid var(--gray-line); } /* 처분방식 열을 집행기관보다 넓게 (라디오·탭 영역 여유) */ .filter-row--top .filter-col:first-child { flex: 1 1 0; width: auto; max-width: none; min-width: 0; } .filter-row--top .filter-col:last-child { flex: 1 1 0; width: auto; min-width: 0; } /* ────────────────────────────────────────────── 필터 열 (좌/우 각 50%) ────────────────────────────────────────────── */ .filter-col { width: 50%; flex-shrink: 1; display: flex; align-items: center; padding: 0 20px; min-width: 0; } /* ────────────────────────────────────────────── 필터 항목 라벨 (72px 고정) ────────────────────────────────────────────── */ .filter-label { width: 72px; flex-shrink: 0; font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: -0.6px; line-height: 22.5px; margin-right: 8px; } /* ────────────────────────────────────────────── 필터 컨트롤 컨테이너 ────────────────────────────────────────────── */ .filter-ctrl { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } /* 공매: 종합검색 동일 검색지역(rs-region)·지역복수 모달 — 세로 스택·전체 너비 */ .rgm-search .filter-ctrl.filter-ctrl--region { flex-direction: column; align-items: stretch; flex: 1; min-width: 0; } .rgm-search .filter-ctrl.filter-ctrl--region .rs-region--dynamic { width: 100%; min-width: 0; } /* 공매 검색지역(탭 없음): landsearch용 -8px 보정 없음 — 다른 필터와 같은 시작선, 셀렉트 행 간격은 filter-ctrl(8px)과 맞춤 */ .rgm-search.rsl-search .rs-region--region-only .rs-region-panel[data-rsl-panel="region"] { margin-left: 0; box-sizing: border-box; gap: 8px; align-items: stretch; } .rgm-search .filter-ctrl.filter-ctrl--region .rgm-region-summary.rs-region-selected { width: 100%; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--gray-txt); box-sizing: border-box; } /* 물건용도: 종합검색(rs-form-row--yongdo) — 좌측은 .filter-label 만 사용, 인라인行 전체 폭 */ .rgm-search .filter-ctrl.filter-ctrl--yongdo-inner { flex-direction: column; align-items: stretch; gap: 8px; } .rgm-search .filter-ctrl--yongdo-inner .rs-form-row__line--yongdo { width: 100%; } .rgm-search .filter-ctrl--yongdo-inner .rs-inline--yongdo { flex: 1 1 auto; width: 100%; min-width: 0; } /* 물건용도 셀렉트: appearance none — 브라우저 기본 내부 패딩 제거로 다른 입력요소와 좌측 정렬 통일 */ .rgm-search .filter-ctrl--yongdo-inner select.rs-select { -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23b5bccc'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 5px; } /* 물건용도 셀렉트: 미선택(전체·세부종류 빈값) 시 회색 — 종합검색은 .rsl-search .rs select… 공매는 .rs 없어 동일 톡 명시 */ .rgm-search .filter-ctrl--yongdo-inner select.rsl-ph-select { color: var(--black); } .rgm-search .filter-ctrl--yongdo-inner select.rsl-ph-select.is-placeholder { color: var(--gray-ph); } .rgm-search .filter-ctrl--yongdo-inner select.rsl-ph-select option { color: var(--black); } /* 복수선택: 기본은 회색 계열(선택 전 행과 통일), 호버 시 포인트 색 */ .rgm-search .filter-ctrl--yongdo-inner .rs-btn-yongdo-multi.btn-small12 { border-color: var(--gray-line); color: var(--gray-txt); background: transparent; } .rgm-search .filter-ctrl--yongdo-inner .rs-btn-yongdo-multi.btn-small12:hover { border-color: var(--blue); color: var(--blue); background: transparent; } /* 물건용도 + 입찰기간 1행, 복수선택 패널은 그 아래 전체 너비(표·다열 그리드, 패널 스크롤 제거) */ .rgm-search .filter-col--yongdo-panel:has(> .rs-yongdo-multi[hidden]) { display: none !important; padding: 0; margin: 0; min-height: 0; } /* 물건용도 + 입찰기간: 태블릿 폭(≥768px)부터 grid 2열 한 줄 유지, 모바일에서만 세로 스택 */ /* minmax(0, 1fr): 컬럼이 컨텐츠 min-content를 넘어 트랙 밖으로 넘치는(겹치는) 현상 차단 */ @media (min-width: 768px) { .rgm-search .filter-row.filter-row--yongdo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "rgm-yongdo rgm-bid" "rgm-panel rgm-panel"; align-items: start; width: 100%; min-width: 0; min-height: 0; } /* 일반 filter-row 와 동일: 물건용도·입찰기간 열만 라벨 72px 그리드 */ .rgm-search .filter-row--yongdo-split > .filter-col--yongdo, .rgm-search .filter-row--yongdo-split > .filter-col--bid-period { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 8px; align-items: center; box-sizing: border-box; width: 100%; min-width: 0; } .rgm-search .filter-row--yongdo-split > .filter-col--yongdo .filter-label, .rgm-search .filter-row--yongdo-split > .filter-col--bid-period .filter-label { width: auto; max-width: 72px; margin-right: 0; justify-self: start; } .rgm-search .filter-row--yongdo-split > .filter-col--yongdo .filter-ctrl, .rgm-search .filter-row--yongdo-split > .filter-col--bid-period .filter-ctrl { width: 100%; min-width: 0; } .rgm-search .filter-row--yongdo-split > .filter-col--yongdo { grid-area: rgm-yongdo; } .rgm-search .filter-row--yongdo-split > .filter-col--bid-period { grid-area: rgm-bid; } .rgm-search .filter-row--yongdo-split > .filter-col--yongdo-panel { grid-area: rgm-panel; width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 0; padding-left: 0; padding-right: 0; } /* * 복수선택 패널이 닫혀 있을 때: 세 번째 컬럼(display:none)만 제거되면 * grid-template-areas 의 2행 자리는 남고 row-gap 만 물건용도 행 아래에 쌓임 → * 다음 filter-row(진행상태·유찰수)까지 간격이 넓어짐. * 패널 hidden 일 땐 1행 그리드만 쓴다. */ .rgm-search .filter-row.filter-row--yongdo-split:has(> .filter-col--yongdo-panel .rs-yongdo-multi[hidden]) { grid-template-rows: auto; grid-template-areas: "rgm-yongdo rgm-bid"; row-gap: 0; } /* 물건용도~입찰기간 행 과 진행상태 행 사이: flex gap(8px)만 두면 넓게 느껴져 한 줄만 당김 */ .rgm-search .filter-row--yongdo-split + .filter-row { margin-top: -4px; } } /* 태블릿 폭(768-1199px): 물건용도 인라인을 CSS Grid 로 전환 → 트랙 크기를 절대 강제 flex + 를 display:block; width:auto; float:left 인
로 교체하므로 flex 레이아웃에 참여하도록 강제 재정의 */ .rsl-search--landsearch .rs-form-grid .rs-inline--yongdo .nice-select, .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"] .nice-select, .rsl-search--landsearch .rs-inline--status-combo .nice-select, .rsl-search--landsearch .rs-inline--special-shortcut .nice-select, .rsl-search--landsearch .rs-form-row--gam .nice-select, .rsl-search--landsearch .rs-form-row--low .nice-select, .rsl-search--landsearch .rs-form-row--gamdb .nice-select, .rsl-search--landsearch .rs-form-row--barea .nice-select, .rsl-search--landsearch .rs-form-row--larea .nice-select, .rsl-search--landsearch .rs-form-row--pilji-cnt .nice-select, .rsl-search--landsearch .rs-form-row--mulgeon-no .nice-select { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; float: none !important; clear: none !important; box-sizing: border-box !important; height: 40px !important; line-height: 38px !important; } /* nice-select 내부 현재 선택 텍스트: 넘치면 말줄임 */ .rsl-search--landsearch .rs-form-grid .nice-select .current { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; display: block !important; max-width: 100% !important; } /* ── 복수선택 / +추가 버튼 ── */ .rsl-search--landsearch .rs-form-grid .btn-small12, .rsl-search--landsearch .rs-form-grid .rs-btn-yongdo-multi { height: 40px !important; padding: 0 12px !important; border: 1.5px solid #4e7ff0 !important; border-radius: 6px !important; background: #fff !important; color: #4e7ff0 !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; flex: 0 0 auto !important; } .rsl-search--landsearch .rs-form-grid .rs-btn-add { height: 40px !important; padding: 0 10px !important; border: 1px solid #d0d5dd !important; border-radius: 6px !important; background: #fff !important; color: #555 !important; font-size: 13px !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* 면적 평 버튼 */ .rsl-search--landsearch .rs-form-grid .btn-small13 { height: 40px !important; padding: 0 10px !important; border: 1px solid #d0d5dd !important; border-radius: 6px !important; background: #fff !important; color: #555 !important; font-size: 13px !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* ── 진행상태: flex-direction row 강제 (searchlist_style.css ≤767 column 덮어쓰기) ── */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo > .rs-inline--status-combo { flex-direction: row !important; flex-wrap: nowrap !important; } .rsl-search--landsearch .rs-form-row--status-combo .rs-inline--status-combo { flex-direction: row !important; } /* ── 매각기일 숨김 ── */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--sale-date, .rsl-search--landsearch .rs-form-row--sale-date { display: none !important; } /* ── 사건번호: 기본 숨김 / 상세검색 펼침 시 표시 ── */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--case, .rsl-search--landsearch .rs-form-row--case { display: none !important; } .rsl-search--landsearch .rs-form-grid:has(.rsl-search-extra.is-open) > .rs-form-row--case { display: flex !important; } /* ── 상세검색(펼치기) 버튼 ── */ .rsl-search--landsearch .rs-form-grid > .rsl-search__more-wrap { display: flex !important; justify-content: stretch !important; margin-top: 4px !important; } .rsl-search--landsearch .rsl-search__more-btn { width: 100% !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border: 1px solid #d0d5dd !important; border-radius: 6px !important; background: #f8f9fb !important; color: #555 !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: none !important; } .rsl-search--landsearch .rsl-search__more-btn:hover { background: #eef1f7 !important; } /* rsl-mosearch.css의 ::before "+" 제거 */ .rsl-search--landsearch .rsl-search__more-btn.rs-expand::before, .rsl-search--landsearch .rsl-search__more-btn.rs-expand.is-open::before { content: none !important; display: none !important; } /* 화살표 아이콘 */ .rsl-search--landsearch .rsl-search__more-btn .rs-detail-arrow { display: inline-block !important; width: 8px !important; height: 8px !important; border-right: 2px solid #888 !important; border-bottom: 2px solid #888 !important; transform: rotate(45deg) translateY(-3px) !important; transition: transform 0.2s !important; background: none !important; } .rsl-search--landsearch .rsl-search__more-btn[aria-expanded="true"] .rs-detail-arrow { transform: rotate(-135deg) translateY(2px) !important; } /* 기존 expand 아이콘 숨김 */ .rsl-search--landsearch .rsl-search__more-btn .rs-expand__icon { display: none !important; } /* ── row-gap: 행 간격 10px ── */ .rsl-search--landsearch .rs-form-grid { row-gap: 10px !important; } } /* ================================================================ ≤ 480px — 폰 가로 / 중소형 폰 ================================================================ */ @media (max-width: 480px) { /* 패딩 소폭 축소 */ .rsl-search.rsl-search--landsearch { padding-left: 10px !important; padding-right: 10px !important; } .rsl-search--landsearch .rs-main { padding-left: 10px !important; padding-right: 10px !important; } .rsl-search--landsearch .rs-recommend { padding-left: 10px !important; padding-right: 10px !important; } /* 검색지역: 시/도·시/군/구·읍/면/동 한 줄 유지 */ .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select, .rsl-search--landsearch .rs-region-panel[data-rsl-panel="region"]:not([hidden]) .nice-select { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } /* 진행상태: 줄1(진행물건) + 줄2(유찰 독립행) ─────────────────── display:contents로 rs-inline을 평탄화 결과: [진행상태 70px | 진행물건 셀렉트 ] [유찰 70px | 최소▾ ~ 최대▾ ] ← 독립 행 [특수조건 70px | ... ] */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo { flex-wrap: wrap !important; row-gap: 10px !important; } .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo > .rs-inline--status-combo { display: contents !important; } /* 진행물건 셀렉트 래퍼: 첫 줄, 라벨 옆 전폭 채움 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-field--status { flex: 0 0 calc(100% - 78px) !important; min-width: 0 !important; max-width: none !important; } .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-field--status .nice-select { width: 100% !important; max-width: none !important; } /* 유찰: 70px 라벨 — 다른 행 라벨과 동일 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-label-inline { flex: 0 0 70px !important; width: 70px !important; min-width: 70px !important; max-width: 70px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; font-size: 14px !important; font-weight: 500 !important; color: #111 !important; text-align: left !important; } /* uchal 셀렉트: 균등 분배 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo select[name="uchal_min"], .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo select[name="uchal_max"] { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; } /* ~ 구분자: 고정폭 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-inline--status-combo > .rs-txt { flex: 0 0 auto !important; } } /* ================================================================ ≤ 375px — 소형 폰 최적화 ================================================================ */ @media (max-width: 375px) { /* 패딩 최소화 */ .rsl-search.rsl-search--landsearch { padding-left: 8px !important; padding-right: 8px !important; } .rsl-search--landsearch .rs-main { padding-left: 8px !important; padding-right: 8px !important; } .rsl-search--landsearch .rs-recommend { padding-left: 8px !important; padding-right: 8px !important; } /* ── 공통 라벨: 70px → 60px (필드 공간 확보) ── */ .rsl-search--landsearch .rs-form-grid .rs-form-row > .rs-label, .rsl-search--landsearch .rs-form-grid .rs-form-row .rs-form-row__line--yongdo > .rs-label, .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo > .rs-label, .rsl-search--landsearch .rs-form-grid .rs-form-row--special-shortcut > .rs-label, .rsl-search--landsearch .rs-form-row--region > .rs-label--region-desktop { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; font-size: 12px !important; } /* 유찰 라벨도 60px 통일 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-label-inline { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; max-width: 60px !important; font-size: 12px !important; } /* 진행물건 셀렉트 래퍼: 라벨 60px + gap 8px = 68px */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--status-combo .rs-field--status { flex: 0 0 calc(100% - 68px) !important; } /* 물건용도 라벨: 56px (3열 레이아웃 최적화) */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--yongdo .rs-form-row__line--yongdo > .rs-label { flex: 0 0 56px !important; width: 56px !important; min-width: 56px !important; max-width: 56px !important; font-size: 12px !important; } /* 복수선택 버튼: 물건용도·특수조건 모두 숨김 */ .rsl-search--landsearch .rs-form-grid > .rs-form-row--yongdo .rs-inline--yongdo > .btn-small12, .rsl-search--landsearch .rs-form-grid .rs-form-row--special-shortcut .btn-small12 { display: none !important; } /* select·input: 폰트 13px, 패딩 축소 */ .rsl-search--landsearch .rs select, .rsl-search--landsearch .rs input[type="text"], .rsl-search--landsearch .rs input[type="search"] { font-size: 13px !important; padding-left: 8px !important; padding-right: 28px !important; } /* 초기화·검색 버튼: 44px */ .rsl-search--landsearch .rs-footer__btns .btn-small14, .rsl-search--landsearch .rs-footer__btns .btn-small15 { height: 44px !important; min-height: 44px !important; font-size: 15px !important; } /* 추가조건 더보기 버튼: 28px */ .rsl-search--landsearch .rsl-search__more-btn.rs-expand { height: 28px !important; min-height: 28px !important; max-height: 28px !important; } } /* ================================================================ ≤ 1199px — 태블릿·미드 데스크탑 반응형 PC 고정폭(1200px) 요소들의 가로 오버플로우 해소 ================================================================ */ @media (max-width: 1199px) { /* ── 전체 가로 스크롤 방지 ────────────────────────────────── */ html { overflow-x: hidden; } /* ── 헤더 계정(로그인/회원가입): 협소 뷰포트에서 숨김 ─────── */ /* 모바일 햄버거 메뉴가 로그인 진입점을 대체 */ .mv-header-account { display: none !important; } /* ── 푸터: 고정 grid(194px+103px+904px=1201px) → 유동 1열 ── */ .mv-footer__inner { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 20px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* 푸터 콘텐츠: 좌(정보) · 우(고객센터) 2열 유지 */ .mv-footer__content { grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important; gap: 24px !important; width: 100% !important; } .mv-footer__logo { width: 160px !important; } .mv-footer__right { min-height: auto !important; } .mv-footer__divider { height: auto !important; align-self: stretch !important; } /* ── 리스트 래퍼: 고정 1200px → 전폭 ────────────────────── */ .rsl-list .list-wrapper, .rsl-list .rsl-list__main { width: 100% !important; max-width: 100% !important; } /* ── 필지/물건번호 행: flex 줄바꿈으로 overflow 방지 ───────── */ /* rsl-pilji-mulgeon-wrap(flex row) 내 물건번호 행이 할당폭 초과 방지 */ .rsl-pilji-mulgeon-wrap { flex-wrap: wrap !important; gap: 8px !important; } .rsl-pilji-mulgeon-wrap > * { min-width: 0 !important; } /* 물건번호·필지개수 row: column-gap 줄여서 60px select 수용 */ .rs-form-row--mulgeon-no, .rs-form-row--pilji-cnt { column-gap: 4px !important; } /* 물건번호 내 select: min-width 제거해 flex 안에서 줄어들게 */ .rs-form-row--mulgeon-no .rs-select--range, .rs-form-row--pilji-cnt .rs-select--range { min-width: 0 !important; width: 60px !important; max-width: 60px !important; } /* ── 검색폼 래퍼 패딩 ─────────────────────────────────────── */ .rsl-search { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .rs { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ================================================================ ≤ 768px — 소형 태블릿: 푸터 콘텐츠 1열로 전환 ================================================================ */ @media (max-width: 768px) { .mv-footer__content { grid-template-columns: 1fr !important; gap: 20px !important; } } /* ===== landsearch2.css ===== */ /* ============================================ landsearch.css 경매검색 페이지 전용 스타일 추출일: 2026-05-04 ============================================ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BLOCK 1: GNB / LNB 레이아웃 레퍼런스(landdata_release/index.html) 기준 — 서브페이지 추가분 포함 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .gnb-wrapper { height: 64px; background: #fff; width: 100%; } .menu-item { position: static !important; display: inline-block; list-style: none; color: #000; } .menu-link { position: relative; display: flex; align-items: center; height: 64px; padding: 0 18px; font-size: 18px; font-weight: 600; color: #111; text-decoration: none; transition: color 0.2s; letter-spacing: 0; white-space: nowrap; } .menu-link::before { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: #1B4AEF; border-radius: 2px 2px 0 0; transition: left .2s, right .2s; } .menu-item.is-active .menu-link::before, .menu-item.is-clicked .menu-link::before { left: 14px; right: 14px; } .sub-panel { position: absolute; top: 100%; left: 0; width: 100%; height: 52px; background: #fff; border-bottom: 2px solid #e0e8ff; box-shadow: 0 4px 12px rgba(27,74,239,.08); display: none; align-items: center; z-index: 999; } .menu-item.is-active .sub-panel, .menu-item.is-clicked .sub-panel, .menu-item.is-open .sub-panel { display: flex !important; } .menu-item.is-active .menu-link, .menu-item.is-clicked .menu-link, .menu-item.is-hover .menu-link { color: #1B4AEF; } .gnb-wrapper > .sub-list-container { max-width: 1200px; margin: 0 auto; width: 100%; height: 64px; display: flex; justify-content: space-around; } .gnb-wrapper > .sub-list-container .main-menu-list { height: 64px; overflow: visible; display: flex; } .sub-panel .sub-inner { height: 52px; display: flex; align-items: center; flex-shrink: 0; padding: 0 8px; } .sub-panel .sub-list { display: flex; flex-direction: row; gap: 0; list-style: none; align-items: center; } .sub-panel .sub-list li { display: flex; align-items: center; } .sub-link { position: relative; display: block; padding: 0 18px; height: 52px; line-height: 52px; font-size: 16px; font-weight: 600; color: #222; text-decoration: none; white-space: nowrap; letter-spacing: 0; transition: color .12s; } .sub-link:hover { color: #1B4AEF; } .sub-link.is-active { color: #1B4AEF; font-weight: 700; } .sub-link.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#1B4AEF; border-radius:2px; } .mv-navrow.lnb-mode { height: 64px !important; } .mv-navrow.lnb-mode .gnb-wrapper { display: none !important; } .mv-navrow.lnb-mode .mv-navrow__icon { display: none !important; } .mv-navrow.lnb-mode .mv-navrow__btns { display: none !important; } #gnb-lnb-bar { display: none; height: 64px; align-items: center; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #fff; border-bottom: 2px solid #e4ebff; box-shadow: 0 2px 8px rgba(27,74,239,.06); } #gnb-lnb-bar::-webkit-scrollbar { display: none; } .mv-navrow.lnb-mode #gnb-lnb-bar { display: flex; } .gnb-pill { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 0 12px; flex-shrink: 0; padding: 0 10px; height: 34px; background: #EEF3FF; border: 1.5px solid #c5d4fb; border-radius: 20px; font-size: 14px; font-weight: 600; color: #1B4AEF; cursor: pointer; white-space: nowrap; transition: background .12s; user-select: none; text-decoration: none; } .gnb-pill:hover { background: #dce8ff; color: #1B4AEF; } .gnb-pill-arr { font-size: 14px; color: #1B4AEF; font-weight: 700; } .gnb-lnb-sep { width: 1px; height: 20px; background: #e4ebff; flex-shrink: 0; margin: 0 6px; } .gnb-lnb-items { display: flex; align-items: center; height: 64px; flex-shrink: 0; } .gnb-lnb-item { position: relative; padding: 0 16px; height: 64px; display: flex; align-items: center; flex-shrink: 0; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; white-space: nowrap; transition: color .12s; text-decoration: none; } .gnb-lnb-item::before { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: #1B4AEF; border-radius: 2px 2px 0 0; transition: left .15s, right .15s; } .gnb-lnb-item:hover { color: #1B4AEF; } .gnb-lnb-item:hover::before { left: 8px; right: 8px; } .gnb-lnb-item.active { color: #1B4AEF; font-weight: 700; } .gnb-lnb-item.active::before { left: 0; right: 0; } /* ══════════════════════════════════════════════ GNB 반응형 — 레퍼런스(landdata_release) 기준 1024px / 768px / 480px / 375px ══════════════════════════════════════════════ */ @media (max-width: 1024px) { .mv-navrow__btns { display: none !important; } .mv-navrow__icon { display: none !important; } .mv-navrow { display: flex !important; height: 64px; overflow: hidden; } .mv-navrow__inner { display: flex !important; height: 64px; width: 100% !important; max-width: 100% !important; padding: 0 !important; min-width: 0; } .gnb-wrapper { flex: 1; min-width: 0; height: 64px !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gnb-wrapper::-webkit-scrollbar { display: none; } .gnb-wrapper > .sub-list-container { width: max-content; height: 64px; justify-content: flex-start; } .gnb-wrapper > .sub-list-container .main-menu-list { height: 64px; flex-wrap: nowrap; } .menu-link { font-size: 16px; padding: 0 14px; height: 64px; } .menu-item.is-active .menu-link::before, .menu-item.is-clicked .menu-link::before { left: 8px; right: 8px; } .sub-panel { display: none !important; } .mv-navrow.lnb-mode { height: 64px !important; } #gnb-lnb-bar { height: 64px; } .gnb-lnb-items { height: 64px; } .gnb-lnb-item { font-size: 14px; height: 64px; padding: 0 14px; } .gnb-pill { font-size: 13px; height: 32px; padding: 0 10px; margin-left: 12px; } } @media (max-width: 768px) { .mv-navrow { display: flex !important; height: 54px; } .mv-navrow__inner { display: flex !important; height: 54px; width: 100%; } .gnb-wrapper { height: 54px !important; } .gnb-wrapper > .sub-list-container { height: 54px; } .gnb-wrapper > .sub-list-container .main-menu-list { height: 54px; } .menu-link { font-size: 15px; padding: 0 12px; height: 54px; } .mv-navrow.lnb-mode { height: 54px !important; } #gnb-lnb-bar { height: 54px; } .gnb-lnb-items { height: 54px; } .gnb-lnb-item { font-size: 14px; height: 54px; padding: 0 12px; } .gnb-pill { font-size: 13px; height: 32px; padding: 0 10px; margin-left: 12px; } } @media (max-width: 480px) { .mv-navrow { display: flex !important; height: 48px; } .mv-navrow__inner { display: flex !important; height: 48px; width: 100%; } .gnb-wrapper { height: 48px !important; } .gnb-wrapper > .sub-list-container { height: 48px; } .gnb-wrapper > .sub-list-container .main-menu-list { height: 48px; } .menu-link { font-size: 14px; padding: 0 10px; height: 48px; } .mv-navrow.lnb-mode { height: 48px !important; } #gnb-lnb-bar { height: 48px; } .gnb-lnb-items { height: 48px; } .gnb-lnb-item { font-size: 14px; height: 48px; padding: 0 10px; } .gnb-pill { font-size: 13px; height: 30px; padding: 0 8px; margin-left: 10px; } } @media (max-width: 375px) { .mv-navrow { display: flex !important; height: 42px; } .mv-navrow__inner { display: flex !important; height: 42px; width: 100%; } .gnb-wrapper { height: 42px !important; } .gnb-wrapper > .sub-list-container { height: 42px; } .gnb-wrapper > .sub-list-container .main-menu-list { height: 42px; } .menu-link { font-size: 14px; padding: 0 8px; height: 42px; } .sub-panel { top: 42px; height: 38px; } .sub-panel .sub-inner { height: 38px; } .sub-link { font-size: 13px; padding: 0 8px; height: 38px; line-height: 38px; } .mv-navrow.lnb-mode { height: 42px !important; } #gnb-lnb-bar { height: 42px; } .gnb-lnb-items { height: 42px; } .gnb-lnb-item { font-size: 13px; height: 42px; padding: 0 8px; } .gnb-pill { font-size: 12px; height: 28px; padding: 0 7px; margin-left: 8px; } } /* 서브페이지: sub-panel 전체 숨김 (rsl-lnb-bar 사용) */ .sub-panel, .menu-item.is-active .sub-panel, .menu-item.is-clicked .sub-panel, .menu-item.is-open .sub-panel, .mv-topmenubar-back { display: none !important; } /* 모바일(≤767px): 서브페이지 GNB 가로 스크롤 */ @media (max-width: 767px) { .mv-navrow .mv-navrow__inner { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mv-navrow .mv-navrow__inner::-webkit-scrollbar { display: none; } .mv-navrow .gnb-wrapper { height: auto; min-height: 44px; flex: 0 0 auto; width: max-content; max-width: none; min-width: 0; } .mv-navrow .gnb-wrapper > .sub-list-container { max-width: none; margin: 0; width: max-content; height: auto !important; min-height: 44px; display: block; padding: 0; } .mv-navrow .gnb-wrapper > .sub-list-container > .main-menu-list { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; width: max-content; min-width: min-content; max-width: none; height: auto !important; margin: 0; padding: 0 4px 0 0; overflow: visible; } .mv-navrow .gnb-wrapper .menu-item { flex: 0 0 auto; } .mv-navrow .menu-link { height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; } .mv-navrow .sub-panel { position: fixed; top: auto; left: 0; width: 100%; height: auto; min-height: 44px; padding: 6px 0; flex-wrap: nowrap; align-items: center; overflow: hidden; z-index: 998; } .mv-navrow .sub-panel::-webkit-scrollbar { display: none; } .mv-navrow .sub-panel .sub-list-container { height: auto !important; min-height: 0; min-width: 0; width: 100%; display: flex !important; justify-content: flex-start; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px; box-sizing: border-box; cursor: grab; } .mv-navrow .sub-panel .sub-list-container::-webkit-scrollbar { display: none; } .mv-navrow .sub-list { flex-wrap: nowrap; flex-shrink: 0; gap: 14px; padding: 4px 0; } .mv-navrow .sub-link { font-size: 13px; white-space: nowrap; } } /* ══ 용도지역 패널 ══ */ /* ── 패널 전체 ── */ #rslYongdoPanelBlock.show { display: flex !important; flex-direction: row !important; gap: 0 !important; max-width: none !important; padding: 0 !important; border: 1px solid #D0D5E2; border-radius: 4px; overflow: hidden; background: #fff; } /* ── 좌 사이드 ── */ #rslYongdoPanelBlock .rsl-special-panel__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; min-width: 150px; width: 150px; flex-shrink: 0; align-self: stretch; border-right: 1px solid #D0D5E2; background: #fff; box-sizing: border-box; } #rslYongdoPanelBlock .rsl-special-panel__line { display: none; } /* ── 우측 그룹 영역 ── */ #rslYongdoPanelBlock .rsl-special-panel__chips { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; gap: 0 !important; row-gap: 0 !important; } /* ── 각 그룹: 세로 (타이틀 위 + 칩 아래) ── */ #rslYongdoPanelBlock .rsl-yongdo-group { flex: none; width: 100%; display: flex; flex-direction: column; padding: 8px 20px 6px; border-bottom: 1px solid #F0F2F7; min-width: 0; box-sizing: border-box; } #rslYongdoPanelBlock .rsl-yongdo-group:last-child { border-bottom: none; } /* ── 그룹 헤더(타이틀): 체크박스 + 텍스트 라벨 ── */ #rslYongdoPanelBlock .rsl-yongdo-chip-label--header { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 0 4px 0; background: transparent; border: none; border-radius: 0; font-size: 14px; font-weight: 600; color: #111111; cursor: pointer; white-space: nowrap; width: auto; min-width: 0; box-sizing: border-box; letter-spacing: -0.03em; line-height: 1; transition: color .12s; } #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header { width: auto; min-width: 0; border: none; justify-content: flex-start; padding-bottom: 4px; } #rslYongdoPanelBlock .rsl-yongdo-chip-label--header:hover { color: #1B4AEF; } #rslYongdoPanelBlock .rsl-yongdo-chip-label--header.chip-on { color: #1B4AEF; } /* ── 아이템 영역 ── */ #rslYongdoPanelBlock .rsl-yongdo-group__items { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 !important; background: transparent; width: 100%; align-content: flex-start; align-items: flex-start; box-sizing: border-box; } #rslYongdoPanelBlock .rsl-yongdo-group__items[hidden] { display: flex !important; } /* ── 서브 칩 버튼 ── */ #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header) { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; line-height: 1 !important; padding: 0 16px !important; background: #fff !important; border: 1px solid #D0D5E2 !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 400 !important; color: #343D52 !important; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; letter-spacing: -0.03em; width: auto !important; box-sizing: border-box !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header):hover { background: #EEF4FF !important; border-color: #4E7FF0 !important; color: #1B4AEF !important; } /* ── 좌 사이드 전체/제외검색: 체크박스 라벨 스타일 ── */ #rslYongdoPanelBlock .rsl-special-option { display: flex !important; align-items: center; gap: 6px; background: transparent; border: none; border-radius: 0; font-size: 14px; font-weight: 500; color: #343d52; cursor: pointer; white-space: nowrap; text-align: left; line-height: 1.4; padding: 0; width: auto; box-sizing: border-box; transition: color .12s; } #rslYongdoPanelBlock .rsl-special-option:hover { color: #1B4AEF; } /* ── 체크박스 input 표시 ── */ #rslYongdoPanelBlock .rsl-special-option input, #rslYongdoPanelBlock .rsl-yongdo-chip-label--header input { display: inline-block !important; -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; border: 1.5px solid #B5BCCC !important; border-radius: 4px !important; background: #fff !important; cursor: pointer; flex-shrink: 0; position: relative; transition: border-color .12s, background .12s; vertical-align: middle; } #rslYongdoPanelBlock .rsl-special-option input:checked, #rslYongdoPanelBlock .rsl-yongdo-chip-label--header input:checked { background: #4E7FF0 !important; border-color: #4E7FF0 !important; } #rslYongdoPanelBlock .rsl-special-option input:checked::after, #rslYongdoPanelBlock .rsl-yongdo-chip-label--header input:checked::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg); } /* 칩 내부 input 숨김 (그룹 헤더 제외) */ #rslYongdoPanelBlock .rsl-yongdo-group__items .rsl-yongdo-chip-input { display: none !important; } /* 헤더 ::before 비활성화 (searchlist_style.css 충돌 해결 완료 후 단순화) */ #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header::before, #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header:has(.rsl-yongdo-chip-input:checked)::before { content: none; display: none; } /* 그룹 헤더 체크박스 */ #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header .rsl-yongdo-chip-input { display: inline-block; -webkit-appearance: none; appearance: none; opacity: 1; position: relative; width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: 1.5px solid #B5BCCC; border-radius: 4px; background: #fff; cursor: pointer; flex-shrink: 0; margin: 0; top: auto; left: auto; vertical-align: middle; } #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header .rsl-yongdo-chip-input:checked, #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header.chip-on .rsl-yongdo-chip-input { background: #4E7FF0 !important; border-color: #4E7FF0 !important; } #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header .rsl-yongdo-chip-input:checked::after, #rslYongdoPanelBlock .rsl-yongdo-group > label.rsl-yongdo-chip-label--header.chip-on .rsl-yongdo-chip-input::after { content: '' !important; display: block !important; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg); } /* ── on 상태 ── */ #rslYongdoPanelBlock .rsl-special-option.chip-on { color: #1B4AEF; } #rslYongdoPanelBlock .rsl-special-option.chip-on input { background: #4E7FF0 !important; border-color: #4E7FF0 !important; } #rslYongdoPanelBlock .rsl-special-option.chip-on input::after { content: '' !important; display: block !important; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg); } #rslYongdoPanelBlock .rsl-yongdo-chip-label.chip-on { background: #EEF4FF !important; border-color: #4E7FF0 !important; color: #1B4AEF !important; font-weight: 600 !important; } /* is-placeholder: 기본값 선택 시 회색 (design_overrides.css color !important 대응) */ .rsl-search .rs select.rsl-ph-select.is-placeholder { color: #B5BCCC !important; } /* ════ 상세검색 / 용도지역 버튼 B안: 아웃라인 칩형 통일 ════ */ /* PC: 용도지역 버튼 (상세검색은 PC에서 숨김) */ .rsl-search .rs-expands--yongdo { border-bottom: none; padding: 0; flex-direction: row; } .rsl-search #rslYongdoExpandBtn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 36px !important; padding: 0 !important; border: 1px solid #D0D5E2 !important; border-radius: 20px !important; background: #fff !important; font-size: 14px !important; font-weight: 500 !important; color: #343D52 !important; cursor: pointer; letter-spacing: -0.3px; } .rsl-search #rslYongdoExpandBtn::before { display: none !important; } .rsl-search #rslYongdoExpandBtn::after { content: "▾"; font-size: 13px; color: #999; transition: transform .2s; line-height: 1; } .rsl-search #rslYongdoExpandBtn[aria-expanded="true"] { border-color: #4E7FF0 !important; color: #4E7FF0 !important; background: #F0F4FF !important; } .rsl-search #rslYongdoExpandBtn[aria-expanded="true"]::after { transform: rotate(180deg); color: #4E7FF0; } .rsl-search #rslYongdoExpandBtn .rs-expand__icon { display: none !important; } /* ≤900px: 상세검색 버튼 B안 (landsearch-mo.css 덮어쓰기) */ @media (max-width: 900px) { /* 두 버튼 컨테이너 통일 */ .rsl-search--landsearch .rs-form-grid > .rsl-search__more-wrap { position: relative !important; border-top: none !important; border-bottom: none !important; padding: 10px 0 14px !important; margin: 0 !important; background: transparent !important; } /* rs-expands--yongdo: 그리드 좌우 패딩(12px) 맞춰 인셋 */ .rsl-search--landsearch .rs-expands--yongdo { position: relative !important; display: block !important; border: none !important; padding: 10px 12px 14px !important; margin: 0 !important; background: transparent !important; } /* D안: 그라디언트 페이드 구분선 */ .rsl-search--landsearch .rs-form-grid > .rsl-search__more-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, #C8CDD8 30%, #C8CDD8 70%, transparent); } .rsl-search--landsearch .rs-expands--yongdo::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(to right, transparent, #C8CDD8 30%, #C8CDD8 70%, transparent); } .rsl-search--landsearch .rsl-search__more-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border: 1px solid #D0D5E2 !important; border-radius: 20px !important; background: #fff !important; font-size: 14px !important; font-weight: 500 !important; color: #343D52 !important; letter-spacing: -0.3px; box-shadow: none !important; } .rsl-search--landsearch .rsl-search__more-btn::before { display: none !important; } .rsl-search--landsearch .rsl-search__more-btn::after { content: "▾" !important; font-size: 13px; color: #999; transition: transform .2s; line-height: 1; } .rsl-search--landsearch .rsl-search__more-btn.is-open { border-color: #4E7FF0 !important; color: #4E7FF0 !important; background: #F0F4FF !important; } .rsl-search--landsearch .rsl-search__more-btn.is-open::after { transform: rotate(180deg); color: #4E7FF0; } .rsl-search--landsearch .rsl-search__more-btn .rs-detail-arrow { display: none !important; } } /* ── 검색 푸터 버튼 세로 가운데 정렬 ── */ .rs-footer__btns .btn-small14, .rs-footer__btns .btn-small15 { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } /* ════ 반응형 브레이크포인트 ════ */ /* ── ≤1280px ── */ @media(max-width:1280px) { #rslYongdoPanelBlock .rsl-special-panel__side { min-width: 110px; width: 110px; padding: 14px 12px; } #rslYongdoPanelBlock .rsl-yongdo-group__items { gap: 6px; padding: 9px 12px; } } /* ── ≤1024px ── */ @media(max-width:1024px) { #rslYongdoPanelBlock .rsl-special-panel__side { min-width: 100px; width: 100px; padding: 12px 10px; gap: 8px; } #rslYongdoPanelBlock .rsl-special-option { font-size: 12px; padding: 7px 6px; } #rslYongdoPanelBlock .rsl-yongdo-chip-label--header { font-size: 12px !important; gap: 5px !important; } #rslYongdoPanelBlock .rsl-yongdo-group__items { gap: 6px !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header) { height: 30px !important; font-size: 12px !important; padding: 0 11px !important; } } /* ── ≤768px: 사이드를 상단으로 이동 ── */ @media(max-width:768px) { /* 패널 전체: column 방향 (사이드 위 → 칩 아래) */ .rsl-search #rslYongdoPanelBlock.show, #rslYongdoPanelBlock.show { flex-direction: column !important; border-radius: 8px; } /* 사이드 패널: 가로 1행으로 변경 */ .rsl-search #rslYongdoPanelBlock .rsl-special-panel__side, #rslYongdoPanelBlock .rsl-special-panel__side { width: 100% !important; min-width: 0 !important; flex-direction: row !important; border-right: none !important; border-bottom: 1px solid #e4e8f0 !important; padding: 10px 14px !important; gap: 10px !important; background: #F6F8FB !important; } /* 그룹 컨테이너: 세로 누적 */ .rsl-search #rslYongdoPanelBlock .rsl-special-panel__chips, #rslYongdoPanelBlock .rsl-special-panel__chips { flex-direction: column !important; flex-wrap: nowrap !important; } /* 그룹 전체 너비 확보 + 패딩 축소 */ .rsl-search #rslYongdoPanelBlock .rsl-yongdo-group, #rslYongdoPanelBlock .rsl-yongdo-group { width: 100% !important; padding: 8px 16px 6px !important; } .rsl-search #rslYongdoPanelBlock .rsl-special-option, #rslYongdoPanelBlock .rsl-special-option { width: auto !important; font-size: 12px !important; padding: 0; } .rsl-search #rslYongdoPanelBlock .rsl-yongdo-chip-label--header, #rslYongdoPanelBlock .rsl-yongdo-chip-label--header { font-size: 12px !important; gap: 5px !important; padding: 0 !important; } .rsl-search #rslYongdoPanelBlock .rsl-yongdo-group__items, #rslYongdoPanelBlock .rsl-yongdo-group__items { gap: 6px !important; } .rsl-search #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header), #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header) { height: 30px !important; font-size: 12px !important; padding: 0 10px !important; } } /* ── ≤480px ── */ @media(max-width:480px) { #rslYongdoPanelBlock .rsl-special-panel__side { gap: 8px !important; padding: 8px 10px !important; } #rslYongdoPanelBlock .rsl-yongdo-group { padding: 6px 12px 4px !important; } #rslYongdoPanelBlock .rsl-special-option { font-size: 11px !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label--header { font-size: 11px !important; gap: 5px !important; } #rslYongdoPanelBlock .rsl-yongdo-group__items { gap: 5px !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header) { height: 28px !important; font-size: 11px !important; padding: 0 9px !important; } } /* ── ≤375px ── */ @media(max-width:375px) { #rslYongdoPanelBlock .rsl-special-panel__side { padding: 8px !important; gap: 6px !important; } #rslYongdoPanelBlock .rsl-yongdo-group { padding: 6px 10px 4px !important; } #rslYongdoPanelBlock .rsl-special-option { font-size: 11px !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label--header { font-size: 11px !important; gap: 4px !important; } #rslYongdoPanelBlock .rsl-yongdo-group__items { gap: 4px !important; } #rslYongdoPanelBlock .rsl-yongdo-chip-label:not(.rsl-yongdo-chip-label--header) { height: 26px !important; font-size: 11px !important; padding: 0 7px !important; } } /* ── LNB 바 (서브메뉴 고정행) ── */ .rsl-lnb-bar { position: relative; top: auto; z-index: auto; background: #fff; border-bottom: 2px solid #e4ebff; box-shadow: 0 2px 8px rgba(27,74,239,.06); } .rsl-lnb-inner { display: flex; align-items: center; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .rsl-lnb-inner::-webkit-scrollbar { display: none; } .rsl-lnb-link { position: relative; display: flex; align-items: center; flex-shrink: 0; height: 44px; padding: 0 14px; font-size: 16px; font-weight: 600; color: #111; white-space: nowrap; text-decoration: none; transition: color .12s; } .rsl-lnb-link::after { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: #1B4AEF; border-radius: 2px 2px 0 0; transition: left .15s, right .15s; } .rsl-lnb-link:hover { color: #1B4AEF; } .rsl-lnb-link:hover::after { left: 8px; right: 8px; } .rsl-lnb-link--on { color: #1B4AEF; font-weight: 700; } .rsl-lnb-link--on::after { left: 0; right: 0; } @media (max-width: 767px) { .rsl-lnb-bar { display: none; } } /* sub-panel/topmenubar-back 차단 (gnb-lnb-bar 사용으로 불필요) */ .sub-panel, .menu-item.is-active .sub-panel, .menu-item.is-clicked .sub-panel, .mv-topmenubar-back { display: none !important; } /* rsl-lnb-bar: PC LNB 고정 바 */ /* ── lnb-mode: GNB → LNB 전환 ── */ .mv-navrow.lnb-mode .gnb-wrapper { display: none !important; } .mv-navrow.lnb-mode .mv-navrow__icon { display: none !important; } .mv-navrow.lnb-mode .mv-navrow__btns { display: none !important; } #gnb-lnb-bar { display: none; height: 64px; align-items: center; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #fff; border-bottom: 2px solid #e4ebff; box-shadow: 0 2px 8px rgba(27,74,239,.06); } #gnb-lnb-bar::-webkit-scrollbar { display: none; } .mv-navrow.lnb-mode #gnb-lnb-bar { display: flex; } .gnb-pill { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 0 20px; flex-shrink: 0; padding: 0 10px; height: 34px; background: #EEF3FF; border: 1.5px solid #c5d4fb; border-radius: 20px; font-size: 14px; font-weight: 600; color: #1B4AEF; cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none; } .gnb-pill:hover { background: #dce8ff; } .gnb-pill-arr { font-size: 14px; color: #1B4AEF; font-weight: 700; } .gnb-lnb-sep { width: 1px; height: 20px; background: #e4ebff; flex-shrink: 0; margin: 0 6px; } .gnb-lnb-items { display: flex; align-items: center; height: 64px; flex-shrink: 0; } .gnb-lnb-item { position: relative; padding: 0 16px; height: 64px; display: flex; align-items: center; flex-shrink: 0; font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; text-decoration: none; transition: color .12s; } .gnb-lnb-item::before { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: #1B4AEF; border-radius: 2px 2px 0 0; transition: left .15s, right .15s; } .gnb-lnb-item:hover { color: #1B4AEF; } .gnb-lnb-item:hover::before { left: 8px; right: 8px; } .gnb-lnb-item.active { color: #1B4AEF; font-weight: 700; } .gnb-lnb-item.active::before { left: 0; right: 0; } @media (max-width: 1024px) { #gnb-lnb-bar { height: 64px; } .gnb-lnb-items { height: 64px; } .gnb-lnb-item { font-size: 14px; height: 64px; padding: 0 14px; } .gnb-pill { font-size: 13px; height: 32px; padding: 0 10px; margin-left: 12px; } } @media (max-width: 768px) { #gnb-lnb-bar { height: 54px; } .gnb-lnb-items { height: 54px; } .gnb-lnb-item { height: 54px; padding: 0 12px; } } @media (max-width: 480px) { #gnb-lnb-bar { height: 48px; } .gnb-lnb-items { height: 48px; } .gnb-lnb-item { height: 48px; padding: 0 10px; } .gnb-pill { font-size: 13px; height: 30px; padding: 0 8px; margin-left: 10px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BLOCK 2: 네비게이션 드롭다운 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .mv-navrow { position: relative; } .tm-full-dropdown { display: none; position: absolute; left: 0; width: 100%; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.1); z-index: 9999; overflow-y: auto; max-height: 0; transition: max-height 0.3s ease; } .tm-full-dropdown.active { display: block; max-height: none; } .tm-full-header { display: none; } .tm-full-content { max-width: 1200px; margin: 0 auto; padding: 32px 20px; } .tm-full-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px 40px; } .tm-full-section { min-width: 140px; } .tm-full-title { font-weight: 600; font-size: 16px; color: #4E7FF0; margin-bottom: 12px; } .tm-full-links { display: flex; flex-direction: column; gap: 8px; } .tm-full-links a { font-size: 14px; color: #111; text-decoration: none; white-space: nowrap; } .tm-full-links a:hover { color: #4E7FF0; } /* 모바일 전용 계정/퀵링크 — PC에서는 숨김 */ .tm-mobile-top { display: none; } .totalmenu.tm-open .line1, .mobilemenu.tm-open .line1 { transform: translateY(8px) rotate(45deg); } .totalmenu.tm-open .line2, .mobilemenu.tm-open .line2 { opacity: 0; } .totalmenu.tm-open .line3, .mobilemenu.tm-open .line3 { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 767px) { .tm-full-dropdown { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-height: 100% !important; overflow-y: auto; z-index: 99999; padding-top: 0; box-sizing: border-box; } .tm-full-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 56px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; } .tm-full-header-title { font-size: 17px; font-weight: 600; color: #111; } .tm-full-close { background: none; border: none; padding: 4px; cursor: pointer; color: #111; display: flex; align-items: center; } .tm-mobile-top { display: block; padding: 16px; border-bottom: 1px solid #eee; } .tm-auth-section { display: flex; gap: 8px; margin-bottom: 16px; } .tm-auth-login, .tm-auth-signup { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; } .tm-auth-login { border: 1px solid #4E7FF0; color: #4E7FF0; } .tm-auth-signup { background: #4E7FF0; color: #fff; } .tm-quick-links { display: flex; gap: 12px; } .tm-quick-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; background: #f5f7fa; border-radius: 8px; font-size: 13px; color: #333; text-decoration: none; font-weight: 500; } .tm-quick-link:hover { background: #eaf0ff; color: #4E7FF0; } .tm-full-row { flex-direction: column; gap: 0; } .tm-full-content { padding: 8px 16px 32px; } .tm-full-section { margin-bottom: 0; border-bottom: 1px solid #eee; padding: 14px 0; } .tm-full-title { margin-bottom: 10px; font-size: 15px; } .tm-full-links { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } .tm-full-links a { font-size: 14px; color: #444; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BLOCK 3: 검색폼 + 용도지역 패널 + 반응형 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /*@import url("tmplist.css");*/ /* ============================================ merged from responsive-search.css PC: Frame 1910 (1200px) | 모바일: Frame 2230 (375px) ============================================ */ .rsl-heading { width: min(1200px, calc(100% - 40px)); margin: 0 auto; background: #ffffff; } .rsl-heading__title { font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: -0.96px; color: #111111; } .rs { max-width: 1200px; margin: 0 auto; background: #fff; border: 1px solid #b5bccc; } .rs-recommend { display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 20px; background: #e8f1ff; } .rs-recommend__title { flex-shrink: 0; font-weight: 600; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #4e7ff0; } .rs-recommend__pills { display: flex; align-items: center; gap: 8px; } .rs-pill { height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 50px; background: transparent; font-weight: 600; font-size: 13px; letter-spacing: -0.52px; color: #657088; cursor: pointer; } .rs-pill-more { display: inline-flex; align-items: center; height: 36px; font-weight: 500; font-size: 13px; letter-spacing: -0.52px; color: #657088; } .rs-main { padding: 0px 0px 10px; border-top: 1px solid #b5bccc; min-width: 0; } .rs-interest { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } .rs-interest__label { flex-shrink: 0; width: 51px; text-align: right; font-weight: 500; font-size: 14px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .rs-interest__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rs-chip { height: 36px; padding: 0 12px; border: 1px solid #657088; border-radius: 8px; background: transparent; font-weight: 500; font-size: 13px; letter-spacing: -0.52px; color: #657088; cursor: pointer; } .rs-line { border: none; border-top: 1px solid #b5bccc; margin: 0 0 16px; } .rs-form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; } .rs-label { flex-shrink: 0; width: 52px; font-weight: 500; font-size: 14px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; } .rs-inline { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .rs-input, .rs-select { height: 40px; padding: 0 12px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #111; min-width: 0; } .rs-input::placeholder { color: #b5bccc; } .rs-input--full { flex: 1; } .rs-input--unit { width: 90px; flex: none; } .rs-txt { font-weight: 300; font-size: 15px; color: #111; flex-shrink: 0; } .rs-unit { font-size: 15px; color: #657088; flex-shrink: 0; } .rs-btn-add { height: 39px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; } .rs-btn-link { height: 40px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; } #rslYongdoGroup { flex: 1 0 120px; } #rslYongdoDetail { flex: 1 0 120px; min-width: 0; } #rslBtnYongdoMulti { flex-shrink: 0; white-space: nowrap; } .rs-btn-pyeong { height: 31px; padding: 0 12px; border: 1px solid #4e7ff0; border-radius: 8px; background: #fff; font-weight: 500; font-size: 15px; color: #4e7ff0; cursor: pointer; flex-shrink: 0; } .rs-form-row--region .rs-region { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .rs-form-row--region .rs-region .rs-region-select { width: 128px; flex-shrink: 0; } .rs-form-row--region .rs-region .rs-region-input { flex: 1; min-width: 0; max-width: 185px; } .rs-form-row--region .rs-region .rs-btn-add { flex-shrink: 0; } /* 검색지역 — PC: 왼쪽 라벨 + 헤드(탭만) + 패널 / 모바일: 한 줄 「검색지역 | 지역·법원 | +추가」 + 2×2 그리드 */ .rs-label--region-mobile { display: none; margin: 0; width: auto; flex-shrink: 0; } .rs-region-mobile-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .rs-btn-add--region-monly { display: none; } .rs-btn-add--region-donly { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rs-region--dynamic[data-rsl-active-area="court"] .rs-btn-add--region-monly { display: none !important; } @media (min-width: 768px) { .rs-label--region-mobile { display: none !important; } .rs-btn-add--region-monly { display: none !important; } .rs-region-mobile-head { width: auto; } .rs-label--region-desktop { position: static; width: 52px; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; border: 0; } } .rs-tabs { display: flex; background: #f1f3f8; border-radius: 4px; padding: 2px; } .rs-tab { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; border-radius: 4px; color: #b5bccc; } .rs-tab--on { background: #4e7ff0; color: #fff; } .rs-form-row--region-grid { display: none; } .rs-form-row--region { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; } .rs-form-row--region .rs-region { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .rs-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-bottom:12px; } .rs-form-pair--top { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0 16px; min-width: 0; width: 100%; } .rs-form-pair .rs-form-row { margin-bottom: 0; } .rs-form-pair .rs-inline, .rs-form-pair .rs-input--full { max-width: 488px; } .rs-form-pair--top .rs-form-row--case .rs-inline, .rs-form-pair--top .rs-form-row--region .rs-region { max-width: 488px; } .rs-form-pair--top .rs-form-row--case .rs-inline { gap: 6px; } .rs-form-pair--top .rs-form-row--case .rs-field { flex: 0 0 76px; } /* .rs-expands .rs-expand:first-child { display: none; } .rs-expands { display: flex; flex-direction: column; margin-top: 16px; } .rs-expand { display: flex; align-items: center; justify-content: center; gap: 8px; height: 55px; border: none; border-bottom: 1px solid #b5bccc; background: #fff; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #111; cursor: pointer; } .rs-expand__icon { color: #4e7ff0; } */ .rs-footer { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 12px; } .rs-form-pair.foot{padding-bottom:16px;border-bottom:1px solid #B5BCCC;margin-bottom:0px;} .rs-form-contain.foot{padding-bottom:16px;border-bottom:1px solid #B5BCCC;} .rs-expands { display: flex; flex-direction: column; border-bottom: 1px solid #b5bccc; padding:16px 20px; } .rs-expands.underline {/*border-bottom: 1px solid #b5bccc;*/} .rs-expand { display: flex; align-items: center; justify-content: center; gap: 8px; /*height: 55px;*/ border: none; background: #fff; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #111; cursor: pointer; padding: } .rs-expand::before { content: "+"; color:#4E7FF0; } .rs-expand.active{justify-content: flex-start;} .rs-expand.active::before{ content: "-"; color:#4E7FF0;font-weight:800;} .rs-expand__icon { color: #4e7ff0; } .rs-footer__save { display: flex; align-items: center; gap: 8px; } .rs-footer__save-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 8px; flex-wrap: wrap; min-width: 0; } .rs-footer__save .rs-label { width: auto; } .rs-link { border: none; background: none; font-weight: 500; font-size: 15px; letter-spacing: -0.6px; color: #4e7ff0; cursor: pointer; } .rs-link--load { font-weight: 400; margin-left: auto; } .rs-footer__saved { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; color: #b5bccc; margin-top: 8px; } .rs-footer__btns { display: flex; gap: 8px; } .rs-btn-reset, .rs-btn-search { width: 100px; height: 51px; border-radius: 8px; font-weight: 500; font-size: 18px; letter-spacing: -0.72px; line-height: 27px; cursor: pointer; } .rs-btn-reset { border: 1px solid #b5bccc; background: #fff; color: #b5bccc; } .rs-btn-search { border: none; background: #4e7ff0; color: #fff; } .rs-form-pair.single { display: grid; grid-template-columns: 1fr; gap: 0 20px; padding:16px 0 0 0; margin-bottom: 19px; } @media (max-width: 767px) { .rs-txtsno {margin:0;} .rs-interest__chips2 .ts-txt{min-width:30px;} .btn-small10{margin-right:8px;white-space: nowrap;} .btn-small11{margin-right:8px;white-space: nowrap;} .rs-recommend__pills .inner{width:1000px;display: flex;} .rs-interest__chips .inner{width:1000px;display: flex;} .rs-interest__chips2 .inner{display: grid;grid-template-columns: 100px 40px 1fr;padding-right:8px;} .rs-interest__chips3 .inner{display: grid;grid-template-columns: 1fr 1fr 68px;padding-right:8px;} .rs-form-pair.single { display: grid; grid-template-columns: 1fr; gap: 0 20px; padding:16px 0 0 0; } .rs-pill-more { font-size: 12px; letter-spacing: -0.48px; min-width: 120px; } .rs-recommend__pills { overflow: hidden; overflow-x: scroll; } .rs-form-pair .rs-form-row { flex-direction: row; align-items: center; gap: 8px; } .rs-interest__chips { overflow: hidden; overflow-x: scroll; } .rsl-heading { width: 100%; padding: 20px 16px 12px; background: #ffffff; } .rsl-heading__title { font-size: 20px; line-height: 28px; letter-spacing: -0.8px; } .rs { max-width: 100%; min-width: 0; } .rs-recommend { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 50px; padding: 15px 16px 12px; gap: 8px; } .rs-recommend__title { font-weight: 500; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-pill { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-pill-more { font-size: 12px; letter-spacing: -0.48px; } .rs-main { padding: 16px 16px 24px; border-top: none; min-width: 0; } .rs-interest { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 0; padding: 12px 0 16px; } .rs-interest__label { width: auto; text-align: left; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-chip { height: 34px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rs-line { border-color: #d0d5e2; margin: 0 0 16px; } .rs-form-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; min-width: 0; } .rs-label { width: auto; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-inline { width: 100%; } .rs-input, .rs-select { height: 36px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-input--full { width: 100%; } .rs-input--unit { width: 100%; max-width: none; } .rs-btn-add, .rs-btn-link, .rs-btn-pyeong { height: 36px; font-size: 13px; } #rslYongdoGroup { flex: 0 0 36%; } #rslYongdoDetail { flex: 1; min-width: 0; } /* 물건구분: 모바일 한 줄 (물건구분 | 전체 | 세부종류 | 복수선택) */ .rs-form-row--yongdo { flex-direction: row; align-items: center; gap: 8px; } .rs-form-row--yongdo .rs-label { flex-shrink: 0; width: 52px; } .rs-form-row--yongdo .rs-inline { flex: 1; min-width: 0; width: auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; } .rs-form-row--yongdo #rslYongdoGroup { flex: 0 0 28%; min-width: 0; } .rs-form-row--yongdo #rslYongdoDetail { flex: 1; min-width: 0; } .rs-form-row--yongdo #rslBtnYongdoMulti { flex-shrink: 0; white-space: nowrap; } .rs-form-pair { min-width: 0; overflow: hidden; } .rs-form-pair .rs-form-row { flex-direction: row; align-items: center; gap: 8px; } .rs-form-pair .rs-form-row .rs-label { flex-shrink: 0; width: 52px; } .rs-form-pair .rs-form-row .rs-inline, .rs-form-pair .rs-form-row .rs-input--full { flex: 1; min-width: 0; overflow: hidden; } .rs-form-pair .rs-inline { flex-wrap: nowrap; } .rs-form-pair .rs-inline .rs-input, .rs-form-pair .rs-inline .rs-select { min-width: 0; flex: 1; } .rs-form-pair .rs-txt, .rs-form-pair .rs-unit, .rs-form-pair .rs-btn-pyeong { flex-shrink: 0; } .rs-form-pair .rs-input--unit { flex: 0 0 36px; min-width: 36px; max-width: 36px; } /* Frame 2226: 검색지역 셀렉트·지번 유지 (잘못된 display:none 제거) */ .rs-label--region-desktop { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 모바일 검색지역 상단: 피그마 — 라벨 + 토글 + 추가 한 줄 */ .rs-label--region-mobile { display: inline !important; } .rs-region-mobile-head { width: 100%; flex-wrap: nowrap; gap: 8px; margin-bottom: 2px; } .rs-region-mobile-head .rs-tabs { flex-shrink: 0; } .rs-btn-add--region-monly { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; } .rs-btn-add--region-donly { display: none !important; } .rs-region--dynamic[data-rsl-active-area="court"] .rs-btn-add--region-monly { display: none !important; } .rs-form-row--region { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; position: relative; } .rs-form-row--region .rs-region { width: 100%; flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 10px; } .rs-form-row--region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 0; margin-bottom: 12px; } .rs-form-row--region-grid .rs-input { grid-column: span 2; } .rs-form-pair { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; } .rs-form-pair .rs-form-row { margin-bottom: 0; } .rs-form-pair .rs-inline, .rs-form-pair .rs-input--full { max-width: none; } .rs-form-pair--top .rs-form-row { flex-direction: column; align-items: flex-start; gap: 8px; } .rs-form-pair--top .rs-form-row .rs-label { width: auto; } /* 사건번호: 피그마 — 라벨 왼쪽, 연도·타경·번호 한 줄 */ .rs-form-pair--top .rs-form-row--case { flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; } .rs-form-pair--top .rs-form-row--case .rs-label { width: 52px; flex-shrink: 0; } .rs-form-pair--top .rs-form-row--case .rs-inline { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .rs-form-pair--top .rs-form-row--case .rs-field--year { flex: 0 0 30%; max-width: 120px; min-width: 72px; } .rs-form-pair--top .rs-form-row--case .rs-field--year .rs-select, .rs-form-pair--top .rs-form-row--case .rs-field--year select { width: 100%; min-width: 0; } .rs-form-pair--top .rs-form-row--case .rs-txt { flex-shrink: 0; } .rs-form-pair--top .rs-form-row--case input[name="sno"] { flex: 1; min-width: 0; } .rs-form-pair--top .rs-form-row .rs-inline, .rs-form-pair--top .rs-form-row .rs-region { width: 100%; max-width: none; } .rs-form-pair--top .rs-form-row--case .rs-inline { width: auto; max-width: none; } .rs-expands .rs-expand:first-child { display: flex; } .rs-expand { height: 47px; font-size: 13px; letter-spacing: -0.52px; } .rsl-search .rs-expands > button.rs-expand:not(.rs-expand--sr-only) { height: 31px; min-height: 31px; max-height: 31px; } .rs-expand:first-child .rs-expand__icon + * { font-size: 13px; } .rs-footer { flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 16px; } .rs-footer__save { flex-wrap: wrap; } .rs-link { font-size: 13px; letter-spacing: -0.52px; } .rs-footer__saved { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rs-footer__btns { width: 100%; display: flex; gap: 8px; } .rs-btn-reset, .rs-btn-search { flex: 1; width: auto; height: 47px; font-size: 15px; letter-spacing: -0.6px; line-height: 22.5px; } } /* html, body { margin: 0; padding: 0; } body { font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; background: #ffffff; padding: 24px 0 40px; overflow-x: hidden; } */ .rsl-page { display: flex; flex-direction: column; gap: 24px; } .rsl-search .rs { margin: 0 auto; } .rsl-search .rs-field { flex: 1; min-width: 0; } .rsl-search .rs-inline > .rs-field { display: flex; min-width: 0; position: relative; } .rsl-search .rs-field--year select { height: 31px; padding: 0 10px; border: 1px solid #b5bccc !important; border-radius: 8px !important; background: #fff; /* -webkit-appearance: none; appearance: none; */ } .rsl-search .rs select, .rsl-search .rs input[type="text"], .rsl-search .rs input[type="search"] { width: 100%; height: 40px; box-sizing: border-box; padding: 0 10px; border: 1px solid #b5bccc; border-radius: 8px; background: #fff; font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 500; line-height: 29px; letter-spacing: -0.6px; color: #111; min-width: 0; } .rsl-search .rs .rs-btn-add, .rsl-search .rs .rs-tab, .rsl-search .rs-recommend .btn-small10, .rsl-search .rs-main .btn-small10, .rsl-search .rs-main .btn-small12, .rsl-search .rs-main .btn-small13, .rsl-search .rs-main .btn-small14, .rsl-search .rs-main .btn-small15, .rsl-search .rs-footer .btn-small14, .rsl-search .rs-footer .btn-small15, .rsl-search .rs-expands > button.rs-expand:not(.rs-expand--sr-only), .rsl-search .rs-footer button.rs-link { height: 40px; min-height: 31px; max-height: 40px; box-sizing: border-box; line-height: 29px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; } .rsl-search .rs-recommend .btn-small10, .rsl-search .rs-main .btn-small10 { padding-left: 12px; padding-right: 12px; } .rsl-search .rs .btn-small12, .rsl-search .rs .btn-small13 { padding-left: 10px; padding-right: 10px; position: relative; } .rsl-search .rs .btn-small13 { padding-left: 28px; } .rsl-search .rs .btn-small13::before { margin: 0; left: 8px; top: 50%; transform: translateY(-50%); position: absolute; } .rsl-search .rs .btn-small14, .rsl-search .rs .btn-small15 { width: auto; min-width: 80px; padding-left: 14px; padding-right: 14px; font-size: 14px; position: relative; } .rsl-search .rs .btn-small14::before { margin: 0; left: 10px; top: 50%; transform: translateY(-50%); position: absolute; } .rsl-search .rs-footer button.rs-link { padding-left: 8px; padding-right: 8px; font-size: 14px; border: none; background: none; font-weight: 500; color: #4e7ff0; text-decoration: none; } .rsl-search .rs input[type="text"]::placeholder, .rsl-search .rs input[type="search"]::placeholder { color: #b5bccc; } .rs-form-row .rs-inline .input_effect{position:relative;} .rs-form-row .rs-inline .input_effect::after { content: "㎡"; position:absolute; color:#657088; font-weight:500; right:14px; top:8px; font-size:15px; } .rsl-search .rs-form-row .rs-inline .input_effect::after { top: 50%; transform: translateY(-50%); } .rsl-search .rs .w100 { width: 100%; } .rsl-search .rs .rs-tabs { flex-shrink: 0; } .rsl-search .rs .rs-tab { border: none; background: transparent; cursor: pointer; } .rsl-search .rs .rs-tab.rs-tab--on { background: #4e7ff0; color: #fff; } .rsl-search .rs-region--dynamic { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; } .rsl-search .rs-region-panel { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; } .rsl-search .rs-region-panel[hidden] { display: none !important; } .rsl-search .rs-region-panel select { flex: 1 1 118px; width: auto; min-width: 72px; max-width: 128px; } .rsl-search .rs-region-panel input[type="text"] { flex: 1 1 120px; min-width: 96px; max-width: 175px; } .rsl-search .rs-region-panel .rs-btn-add--region-donly { flex-shrink: 0; } .rs-form-pair--top .rs-form-row--region .rs-region { max-width: none; min-width: 0; } .rsl-yongdo-panel, .rsl-special-panel { margin: 3px 0 16px 0px; padding: 16px; /* border: 1px solid #d0d5e2;*/ border-radius: 8px; background: #fff; } .rsl-yongdo-panel[hidden], .rsl-special-panel[hidden] { display: none; } .rsl-yongdo-panel { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; } .rsl-yongdo-panel__menu { display: flex; flex-direction: column; gap: 8px; } .rsl-yongdo-panel__menu-btn { height: 40px; padding: 0 12px; border: 1px solid #d0d5e2; border-radius: 8px; background: #fff; color: #505050; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; text-align: left; cursor: pointer; } .rsl-yongdo-panel__menu-btn.is-active { border-color: #4e7ff0; background: #e8f1ff; color: #4e7ff0; } .rsl-yongdo-panel__all { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-yongdo-panel__chips, .rsl-special-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; } .rsl-yongdo-chip, .rsl-special-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d0d5e2; border-radius: 999px; background: #fff; color: #505050; font-size: 13px; font-weight: 500; line-height: 19.5px; letter-spacing: -0.52px; cursor: pointer; } .rsl-yongdo-chip input, .rsl-special-chip input, .rsl-special-option input, .rsl-yongdo-panel__all input { margin-right: 8px; } .rsl-yongdo-chip.is-selected, .rsl-special-chip.is-selected { border-color: #4e7ff0; background: #e8f1ff; color: #4e7ff0; } .rsl-special-panel { display: grid; grid-template-columns: 220px 1px minmax(0, 1fr); gap: 16px; align-items: start; } .rsl-special-panel__side { display: flex; flex-direction: column; gap: 12px; } .rsl-special-option { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel__line { width: 1px; min-height: 100%; background: #d0d5e2; } .rsl-list .list-wrapper { max-width: 1200px; } .rsl-list .rsl-list__main { width: 1200px; min-height: 730px; position: relative; } .rsl-list .rsl-list__header { width: 100%; } .rsl-list .rsl-list__toolbar { width: 100%; } .rsl-list .rsl-list__count { padding: 4px 0 0 20px; } .rsl-list .rsl-list__controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 0 20px; min-height: 47px; } .rsl-list .rsl-list__controls .rsl-list__sort { margin-left: auto; margin-right: 12px; } .rsl-list .rsl-list__recommend { display: flex; align-items: center; gap: 8px; } .rsl-list .rsl-list__sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rsl-list .rsl-list__perpage { width: 89.33px; height: 39px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #b5bccc; border-radius: 8px; } .rsl-list .rsl-list__thead { display: flex; align-items: center; width: 100%; height: 56px; background: #f6f9ff; margin-top: 12px; padding: 0 15px; } .rsl-list .rsl-list__body { width: 100%; padding-left: 15px; } .rsl-list .rsl-list__pagination { display: flex; align-items: center; justify-content: center; gap: 40px; width: 1200px; height: 28px; margin-top: 40px; margin-bottom: 0; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .rsl-special-panel_innerop { display: flex; flex-direction: column; gap: 12px; width:100%; } .rsl-special-inneroption { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel-block { display: flex; flex-wrap: wrap; gap: 8px; } .rsl-special-panel { display:none; animation: fade-out 1s; animation-fill-mode: forwards; } .rsl-special-panel.show { display: grid; grid-template-columns: 220px 1px minmax(0, 1fr); gap: 16px; align-items: start; margin-top:10px; padding:0px 16px 0px 16px; max-width: 760px; animation: fade-in 1s; animation-fill-mode: forwards; } .rsl-special-panel__side { display: flex; flex-direction: column; gap: 3px; } .rsl-special-option { display: inline-flex; align-items: center; gap: 8px; color: #111; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.56px; } .rsl-special-panel__line { width: 1px; min-height: 100%; background: #d0d5e2; } @media (max-width: 767px) { /* body { padding: 0 0 24px; } */ .rsl-page { gap: 16px; } .rsl-search .rs, .rsl-list .list-wrapper { max-width: 100%; } .rsl-search .rs select, .rsl-search .rs input[type="text"], .rsl-search .rs input[type="search"] { height: 31px; line-height: 29px; padding: 0 10px; font-size: 13px; letter-spacing: -0.52px; } /* 모바일 검색지역: 그리드로 1행「라벨 | 탭 | 추가」/ 2행 패널은 탭과 같은 왼쪽 시작점(column 2) 첫 열 52px = 물건구분 라벨과 동일 → 시·도·동읍 열 시작 = 물건구분「전체」셀렉트와 왼쪽 정렬 */ .rsl-search .rs-form-row--region .rs-region--dynamic { display: grid; grid-template-columns: minmax(72px, 28%) 1fr auto; column-gap: 8px; row-gap: 10px; align-items: center; width: 100%; } .rsl-search .rs-region-mobile-head { display: contents; } .rsl-search .rs-label--region-mobile { grid-column: 1; grid-row: 1; margin: 0; align-self: center; justify-self: stretch; width: 100%; box-sizing: border-box; white-space: nowrap; display: flex !important; align-items: center; } .rsl-search .rs-tabs { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; } .rsl-search .rs-btn-add--region-monly { grid-column: 3; grid-row: 1; margin-left: 0; justify-self: end; align-self: center; } /* 2행 패널: 탭 열(2)부터 추가 버튼 열(3) 끝까지 — 시·군·구·지번 오른쪽이 +추가와 같은 선상 */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]), .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) { grid-column: 2 / -1; grid-row: 2; width: 100%; min-width: 0; justify-self: stretch; } /* 지역 패널: DOM 순서 시도→시군구→읍면동→지번 → flex 50%로 2×2 (1행: 시·도+시·군·구 / 2행: 읍·면·동+지번) */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; gap: 8px; width: 100%; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > div, .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > span, .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) > table { display: contents; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select.addr-select, .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) input[name="bunji"] { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; max-width: none; box-sizing: border-box; } .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) .rs-btn-add--region-donly { flex: 1 1 100%; } .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) { display: flex; flex-direction: column; gap: 8px; } .rsl-search .rs-region-panel[data-rsl-panel="court"]:not([hidden]) select { width: 100%; flex: none; } .rsl-search .rs-region-panel .rs-btn-add--region-donly { display: none !important; } .rsl-yongdo-panel, .rsl-special-panel { margin: -4px 0 12px; padding: 12px; } .rsl-yongdo-panel { grid-template-columns: 1fr; gap: 12px; } .rsl-yongdo-panel__menu { flex-direction: row; overflow-x: auto; padding-bottom: 2px; } .rsl-yongdo-panel__menu::-webkit-scrollbar { display: none; } .rsl-yongdo-panel__menu-btn { flex: 0 0 auto; height: 36px; font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-yongdo-panel__all, .rsl-special-option { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-yongdo-chip, .rsl-special-chip { min-height: 32px; padding: 0 10px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; } .rsl-special-panel { grid-template-columns: 1fr; gap: 12px; } .rsl-special-panel__line { width: 100%; height: 1px; min-height: 1px; } .rsl-list .list-wrapper { width: 100%; margin: 0 auto; padding: 0 16px; } .rsl-list .rsl-list__main { width: 100%; min-height: 0; } .rsl-list .rsl-list__count { padding: 0; margin-bottom: 8px; } .rsl-list .total-count { font-size: 16px; line-height: 24px; letter-spacing: -0.64px; } .rsl-list .rsl-list__controls { flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0; min-height: 0; } .rsl-list .rsl-list__recommend { order: 1; } .rsl-list .rsl-list__perpage { order: 2; width: 72px; height: 32px; margin-left: auto; border-radius: 6px; } .rsl-list .per-page { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .rsl-list__sort { order: 3; width: 100%; margin: 0; gap: 8px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: 2px; } .rsl-list .rsl-list__sort::-webkit-scrollbar, .rsl-list .page-numbers::-webkit-scrollbar { display: none; } .rsl-list .sort-item, .rsl-list .recommend-label { font-size: 13px; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .sort-arrow { width: 12px; height: 14px; } .rsl-list .checkbox { width: 18px; height: 18px; } .rsl-list .rsl-list__thead { display: none; } .rsl-list .rsl-list__body { padding-left: 0; margin-top: 12px; } .rsl-list .list-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "photo prices" "body body" "status status"; gap: 8px 12px; min-height: 0; padding: 12px; border: 1px solid #d0d5e2; border-radius: 8px; } .rsl-list .item-photo { grid-area: photo; width: 120px; min-width: 0; height: 80px; } .rsl-list .btn-heart { top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; } .rsl-list .btn-heart::after { width: 16px; height: 16px; background-size: 16px 16px; } .rsl-list .item-prices { grid-area: prices; width: auto; min-width: 0; padding: 1px 0; gap: 0; } .rsl-list .price-row { justify-content: flex-start; align-items: flex-start; min-height: 23px; max-width: none; } .rsl-list .price-label { width: 40px; min-width: 40px; margin-right: 0; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; text-align: left; } .rsl-list .price-value { width: auto; min-width: 0; font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; text-align: left; } .rsl-list .price-row.muted .price-value { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .rsl-list .item-body { grid-area: body; width: auto; min-width: 0; padding: 0; gap: 4px; } .rsl-list .item-type { font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; } .rsl-list .item-meta { gap: 4px; font-size: 13px; font-weight: 400; line-height: 19.5px; letter-spacing: -0.52px; flex-wrap: wrap; } .rsl-list .item-address { font-size: 15px; line-height: 22.5px; letter-spacing: -0.6px; } .rsl-list .item-spec { gap: 6px; font-size: 12px; line-height: 18px; letter-spacing: -0.48px; flex-wrap: wrap; } .rsl-list .item-tags { gap: 4px; } .rsl-list .tag { padding: 0 4px; font-size: 11px; line-height: 15.4px; letter-spacing: -0.44px; } .rsl-list .tag-more { font-size: 10px; line-height: 14px; } .rsl-list .item-status { grid-area: status; width: auto; min-width: 0; padding: 4px 0 0; border-top: 1px solid #d0d5e2; display: grid; grid-template-columns: auto auto 1fr; gap: 8px 12px; align-items: center; } .rsl-list .status-cell { width: auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0; justify-content: flex-start; } .rsl-list .status-cell:last-child { justify-content: flex-end; } .rsl-list .status-main, .rsl-list .status-sub { font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: -0.48px; white-space: nowrap; } .rsl-list .status-main { color: #505050; } .rsl-list .status-sub { color: #82b8ff; } .rsl-list .status-cell:last-child .status-main + .status-main::before { content: "/"; margin: 0 2px 0 1px; color: #505050; } .rsl-list .list-divider { display: none; } .rsl-list .rsl-list__pagination { width: 100%; gap: 12px; margin-top: 24px; } .rsl-list .page-arrow { width: 10px; height: 10px; flex-shrink: 0; } .rsl-list .page-numbers { gap: 2px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .rsl-list .page-num { width: 24px; height: 24px; font-size: 14px; line-height: 21px; letter-spacing: -0.56px; } } /* ── 모바일 검색지역: 지역/법원 탭 제거 + 1행 레이아웃 ── */ @media (max-width: 767px) { /* 지역/법원 탭 버튼 숨김 */ .rsl-search .rs-tabs { display: none !important; } /* 모바일 헤드(탭+모바일라벨+추가버튼) 완전 숨김 */ .rsl-search .rs-region-mobile-head { display: none !important; } /* 데스크탑 라벨 모바일에서 복원 */ .rsl-search .rs-label--region-desktop { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: nowrap !important; display: flex !important; flex-shrink: 0 !important; } /* 검색지역 행: 가로 1행 */ .rsl-search .rs-form-row--region { flex-direction: row !important; align-items: center !important; gap: 6px !important; margin-bottom: 0 !important; } /* 지역 동적 컨테이너: flex 1행 */ .rsl-search .rs-form-row--region .rs-region--dynamic { display: flex !important; flex-direction: row !important; align-items: center !important; flex: 1 !important; flex-wrap: nowrap !important; gap: 5px !important; width: auto !important; } /* 지역 패널: 셀렉트들 가로 flex */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; flex: 1 !important; gap: 5px !important; grid-column: unset !important; grid-row: unset !important; margin-left: 0 !important; width: auto !important; min-width: 0 !important; } /* 각 셀렉트: flex 균등 */ .rsl-search .rs-region-panel[data-rsl-panel="region"]:not([hidden]) select.addr-select { flex: 1 !important; min-width: 0 !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; } /* +추가 버튼: 모바일에서도 표시 */ .rsl-search .rs-btn-add--region-donly { display: inline-flex !important; flex-shrink: 0 !important; align-items: center !important; justify-content: center !important; } } /* ===== inline