.recruitList {cursor:pointer;} .promotionList {cursor:pointer;} /* *** 공통 */ .textOverEll a {display: block;width: 100%;max-width: 480px; } .nonScroll {overflow: hidden;} .postionR {position: relative; } /* 정렬 */ .textCenter {text-align: center; } /* 텍스트 스타일 */ .unLine {text-decoration: underline !important;} /* *** 유니크 비었을때 */ .noUniqueBox {height:580px; display:flex; flex-direction: column; align-items:center; justify-content:center;background: url("../images/noUniqueBox_bg.jpg") no-repeat top / cover;border: 0 !important;} .noUniqueBox img {height:50px; margin-bottom:30px;} .noUniqueBox .title {font-size:28px;font-family: "PretendardB";color:#494949; margin-bottom:10px;} .noUniqueBox .text {font-size:18px; font-family: "PretendardM";color:#728499;} /* 넓이 */ .cl_fullWidth{width: 100% !important;} .cl_attachFiles {padding:10px; background-color: #f5f5f5;} .cl_attachFiles ul {margin-bottom:0;} .cl_attachFiles ul li {margin-bottom:10px;} .cl_attachFiles ul li:last-child {margin-bottom:0;} /********************************************************************* * 공통 마진 *********************************************************************/ .cl_marginTopL {margin-top:100px !important;} .cl_marginTopM {margin-top:50px !important;} .cl_marginTopS {margin-top:20px !important;} .cl_marginBottomL {margin-bottom:100px !important;} .cl_marginBottomM {margin-bottom:50px !important;} .cl_marginBottomS {margin-bottom:20px !important;} /********************************************************************* * 회색 인포박스 *********************************************************************/ .cl_commonInfoBox {display: block;padding: 30px;flex-direction: column;align-items: flex-start;gap: 15px;border-radius: 10px;background: #F8F8F8;} .cl_commonInfoBox .headerTitle {font-size:18px;color:#000;font-style: normal;font-weight: 700;line-height: normal;} .cl_commonInfoBox .normalText {text-align: center;font-family: "PretendardM";font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;color: #272727;} .cl_commonInfoBox .textContainer {display:flex;padding-top:15px;padding-bottom:15px;color: #272727;font-family: "PretendardM";font-size: 16px;} .cl_commonInfoBox .textContainer a {color: #272727;} .cl_commonInfoBox .textContainer .required {color: #17A2E2;} .cl_commonInfoBox .textContainer.bottomLine {border-bottom:1px solid #D9D9D9;} .cl_commonInfoBox .textContainer:first-child {font-family: "PretendardSB"; font-size: 18px; color: #111;} .cl_commonInfoBox .textContainer.bottomLine:last-child {border-bottom:0;} .cl_commonInfoBox .textContainer.spaceBetween {justify-content: space-between;} /********************************************************************* * 흰색 쉐도우 인포박스 *********************************************************************/ .cl_whiteShadowInfoBox {box-sizing: border-box;display: block;padding: 30px;align-items: center;align-self: stretch;border-radius: 15px;background: #FFF;box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_whiteShadowInfoBox h3 {display:block; text-align: center; font-size:25px; color:#333; margin-bottom:30px;} .cl_whiteShadowInfoBox p {display:block; text-align: center; font-size:18px; color:#666; line-height:1.5;} /********************************************************************* * 체크박스 *********************************************************************/ input[type=checkbox] {display: none;} input[type=checkbox] + label {display: inline-flex;align-items: center;height: 25px;font-weight: normal;cursor: pointer;line-height: 17px;padding-left: 35px;background: url("/app/layout/web/images/chkbox.png") left / 25px no-repeat !important;gap: 5px;} input[type=checkbox]:checked + label {background-image: url("/app/layout/web/images/chkbox_on.png") !important;} /********************************************************************* * 공통 버튼 스타일 *********************************************************************/ .cl_commonButtonWrapper {display:flex;flex-direction: row;justify-content: center;} .cl_commonButton {display: flex;padding: 15px 40px;align-items: center;gap: 10px;border-radius: 5px;background: #17A2E2;color: #FFF !important;text-align: center;font-family: "PretendardB";font-size: 18px;line-height: normal;cursor:pointer;margin-left:10px;} .cl_commonButton:hover {background: #147eaf;} .cl_commonButton.basic {background-color:#fff !important;color:#17A2E2 !important;border: 1px solid #17A2E2;} .cl_commonButton.dark {background-color:#728499 !important;color:#fff !important;} .cl_commonButtonWrapper .cl_commonButton:first-child {margin-left:0;} /********************************************************************* * 공통 폼 스타일 *********************************************************************/ input::placeholder {color:#A1A1A1;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } .cl_commonForm .formGuideMessage {font-family: "PretendardSB"; font-size: 14px; color: #728499; margin-bottom: 20px; line-height:1.5;} .cl_commonForm .requiredMark {color: #17A2E2;} .cl_commonForm span.infoText, .cl_commonForm div.infoText {display:block; color:#17A2E2; font-size:12px; margin-top:5px;} .cl_commonForm .formBox {border-top: 1px solid #D9D9D9; /*border-bottom: 1px solid #D9D9D9;*/border-bottom: 0px !important;} .cl_commonForm table {width: 100%;} .cl_commonForm table tr {border-bottom: 1px solid #D9D9D9;} .cl_commonForm table td {font-family: "PretendardM"; font-size: 16px; color: #272727; padding: 17px;} .cl_commonForm table td:first-child {font-family: "PretendardSB"; font-size: 16px; color: #111; background: #F2F7FA; min-width: 185px !important; width: 185px; box-sizing: border-box; text-align: center;} .cl_commonForm .subThTxt {display: block;color: #728499;font-size: 14px; } .cl_commonForm .subTdTxt {color: #728499;font-size: 14px; } .cl_commonForm .subTdTxt span.strong {color: #17A2E2;} .cl_commonForm .subTdTxt.primaryColor {color: #17A2E2;} .cl_commonForm input[type="radio"] + label {display: inline-block;position: relative;padding-left: 35px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;margin-right: 20px;} .cl_commonForm .radioButton input[type="radio"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;} .cl_commonForm .radioButton input[type="radio"] + label:before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 25px;height: 25px;text-align: center;background: #ffffff;box-sizing: border-box;border: 2px solid #D9D9D9;border-radius: 100%;} .cl_commonForm .radioButton input[type="radio"]:checked + label:after {content: '';position: absolute;top: 50%;transform: translateY(-50%);left: 6px;width: 14px;height: 14px;background: #17A2E2;border-radius: 100%;} .cl_commonForm input[type=text],input[type=password], input[type=number] {height: 40px;font-family: "PretendardM";font-size: 16px;color: #111;border-radius: 5px;background: #F8F8F8;padding: 15px 10px;box-sizing: border-box;margin-right: 10px;} .cl_commonForm input[type=text].spaceNon {margin-right: 0;} .cl_commonForm .small {width: 200px;} .cl_commonForm .medium {width: 310px;} .cl_commonForm input.block {width:100% !important;box-sizing:border-box;} .cl_commonForm textarea {min-height: 250px;font-family: "PretendardM";font-size: 16px;color: #111;line-height: 1.5;border-radius: 5px;background: #F8F8F8;;padding: 15px 10px;box-sizing: border-box;margin-right: 10px;} .cl_commonForm textarea[placeholder] {color: #A1A1A1;} .cl_commonForm textarea[disabled] {color: #A1A1A1;} .cl_commonForm textarea:focus {outline: none;} .cl_commonForm textarea.block {width:100% !important;box-sizing:border-box;} .cl_commonForm .formChkBtn {display: inline-flex;align-items: center;justify-content: center;font-family: "PretendardM";height: 40px;font-size: 16px;color: #17A2E2;padding: 0 15px;border-radius: 5px;cursor: pointer;border: 1px solid #17A2E2;box-sizing: border-box;} .cl_commonForm select {height: 40px;font-family: "PretendardM";font-size: 16px;color: #111;border-radius: 5px;padding: 10px 10px;box-sizing: border-box;margin-right: 10px;cursor: pointer;appearance: none;background: #F8F8F8 url("/app/layout/web/images/selectArrow.png") no-repeat 95% 50%;} /* *** 글작성 Step nav */ .cl_subStep {position: fixed; /*top: 634px; */ bottom: 90px; left:50%; margin-left:700px; z-index: 10; } /* [수정] 20241201 */ .cl_subStep ul::before {content: ""; display: block; position: absolute; top: 12px; bottom: 10px; left: 6px; width: 1px; background: #8491a7; } .cl_subStep ul li:not(:first-of-type) {margin: 20px 0; } .cl_subStep ul li a {color: #111111;font-size: 14px;font-family: "PretendardSB";position: relative;background-color: transparent !important; } .cl_subStep ul li a.on {color: #17A2E2; } .cl_subStep ul li a.on::before {background-color: #17A2E2; } .cl_subStep ul li a::before {content: "";position: absolute;top: 9px;left: -26px;width: 5px;height: 5px;border-radius: 3px;background-color: #728499; } @media (max-width: 1600px) { .cl_subStep {left: auto; margin-left: 0; right: 2%;} } /********************************************************************* * 공통 목록 테이블, 게시판 상세 *********************************************************************/ .cl_commonTable {width:100%;} .cl_commonTable thead th {background-color:#f8f8f8;color: #111;font-family: "PretendardSB";font-size: 16px;font-weight:normal; line-height: normal;padding:20px;box-sizing: border-box;border-bottom:1px solid #D9D9D9;} .cl_commonTable thead th.centerAligned {text-align: center;} .cl_commonTable thead th.leftAligned {text-align: left;} .cl_commonTable thead th.rightAligned {text-align: right;} .cl_commonTable thead th.createdAt {color:#A1A1A1; text-align:center;} .cl_commonTable thead th.category {color:#728499; text-align:center;} .cl_commonTable tbody tr.fixed {background: rgba(23, 162, 226, 0.07);} .cl_commonTable tbody td {color: #272727;font-family: "PretendardM";font-size: 16px;line-height: normal;padding:20px;box-sizing: border-box;border-bottom:1px solid #D9D9D9;word-break: keep-all;} .cl_commonTable tbody td.centerAligned {text-align: center;} .cl_commonTable tbody td.leftAligned {text-align: left;} .cl_commonTable tbody td.rightAligned {text-align: right;} .cl_commonTable tbody td.empty {color:#a1a1a1; text-align:center;} .cl_commonTable tbody td.createdAt {color:#A1A1A1; text-align:center;} .cl_commonTable tbody td.category {color:#728499; text-align:center;} .cl_commonTable tbody td a {color:#272727;} .cl_commonBoardContent {box-sizing:border-box; padding:50px 20px; font-size:16px; color:#272727;} .cl_commonBoardContent.tableType {padding:50px 20px 50px 170px;} .cl_commonBoardContent p {font-size:16px; color:#272727;} .cl_boardHeader {display:flex; flex-direction: row; justify-content: space-between;} .cl_boardHeader .category {} .cl_boardHeader .category ul {list-style:none; margin:0; padding:0; display:flex; flex-direction: row;} .cl_boardHeader .category ul li a {display: flex;height: 40px;padding: 8px 25px;justify-content: center;align-items: center;gap: 5px;border: 1px solid #17A2E2;box-sizing: border-box;margin-right:5px;color:#17A2E2;} .cl_boardHeader .category ul li a.on {background: #17A2E2; color:#fff;} .cl_boardHeader .searchBox .searchButton {display:inline-block;height: 40px;padding: 8px 25px;gap: 5px;border: 1px solid #17A2E2;box-sizing: border-box;margin-right:5px;color:#17A2E2;vertical-align:middle;cursor:pointer;} /* 댓글 */ .cl_ReplyTable thead {border-top: 1px solid #D9D9D9;border-bottom: 1px solid #D9D9D9;background-color: #E8F6FD} .cl_ReplyTable tr th {background-color: #E8F6FD} .cl_ReplyTable:not(.cl_ReplyWaiting) thead tr {padding-left: 42px; box-sizing: border-box;} /*.cl_ReplyTable:not(.cl_ReplyWaiting) thead tr::before {content: ""; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 20px;height: 20px; background: url("../images/icon_reply.png") no-repeat top / 100% auto; }*/ .cl_ReplyTable:not(.cl_ReplyWaiting) thead tr th:first-of-type {padding-left: 60px;} .cl_commonTable.cl_ReplyTable thead th {border-bottom: 0;} .cl_ReplyCont {border-bottom: 1px solid #D9D9D9;background-color: #F2F7FA;} /* 이전글, 다음글 */ .viewNav .viewWrap {display: flex;align-items: center;padding: 20px;box-sizing: border-box;border-top: 1px solid #D9D9D9;border-bottom: 1px solid #D9D9D9; } .viewNav .viewWrap + .viewWrap {border-top: 0;} .viewNav .viewWrap .tit {width: 160px;color: #728499;font-family: "PretendardSB";text-align: center; } .viewNav .viewWrap .txt {color: #272727;font-family: "PretendardSB"; } /********************************************************************* * 페이지 공통 타이틀 *********************************************************************/ .cl_pageTitleWrap {margin-bottom: 20px;} .cl_pageTitle {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;} .cl_pageTitle.bottomLine {padding-bottom: 20px; border-bottom: 1px solid #D9D9D9;} .cl_pageTitle .titleName {font-family: "PretendardSB"; font-size: 34px; color: #000;} .cl_pageTitle .pageLocation {display: flex; align-items: center; gap: 10px;color: #A1A1A1;font-size: 14px;} .cl_pageTitle .pageLocation a {color: #A1A1A1;} .cl_pageTitle .pageLocation img {display: block;} .cl_pageTitle .locationName {font-family: "PretendardSB"; } .cl_subNaviTabs {display: flex; margin-bottom:50px; justify-content: space-between; border-bottom: 1px solid #D9D9D9;} .cl_subNaviTabs.leftAlign {justify-content: flex-start;} .cl_subNaviTabs.leftAlign a {width:auto !important; padding-left:40px; padding-right:40px;} .cl_subNaviTabs .headerTitle {font-size:26px; cursor:unset;} .cl_subNaviTabs a {position: relative;display: flex;align-items: center;justify-content: center;font-family: "PretendardSB";font-size: 18px;color: #272727;width: 100%;padding: 15px 0;} .cl_subNaviTabs a.on {color: #17A2E2;} .cl_subNaviTabs a.on::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #17A2E2;} .cl_quickBtn {position: fixed; left:50%; bottom: 20px; margin-left:700px; display: flex; flex-direction: column; gap: 5px;} .cl_quickBtn .quickBtn {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 2px;font-family: "PretendardSB";font-size: 14px;color: #fff;width: 70px;height: 70px;border-radius: 8px;cursor: pointer;} .cl_quickBtn .quickBtn:hover {text-decoration: none;} .cl_quickBtn .writingBtn {background: #17A2E2;} .cl_quickBtn .goTopBtn {background: #00BCD5;} .cl_quickBtn .writeOptions {display: none;} .cl_quickBtn .writeOptions .quickBtn{color: #111111; border: 1px solid #D9D9D9; background-color: #fff; } .cl_quickBtn .writeOptions:not(:last-child) .quickBtn{margin-bottom: 5px;} @media (max-width: 1600px) { .cl_quickBtn.writepage {left: auto; margin-left: 0; right: 5%;} } @media (max-width: 1360px) { .cl_quickBtn.writepage {left: auto; margin-left: 0; right: 5.8%;} } /* *** 서브 타이틀 */ .cl_subTitle {font-family: "PretendardSB"; font-size: 24px; color: #111; margin-bottom: 20px;} /* ********************************** 팝업 스타일 ********************************** */ /* *** 일반 팝업 */ .cl_popup {position:fixed; top:0; left:0; display:none; justify-content:center; align-items:center; width:100%; height:100%; background-color:rgba(0,0,0,0.51); z-index:10000;} .cl_popup.on {display:flex;} .cl_popup .popupWin {width:296px; border-radius:16px; overflow:hidden; background-color:#ffffff;} .cl_popup .popupWin .popupHeader {position:relative; display:flex; align-items:center; height:52px; padding:0 20px; background-color:#f5f5f5;} .cl_popup .popupWin .popupHeader .title {font-size:20px; color:#000000;} .cl_popup .popupWin .popupHeader .btnClosePopup {position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:24px; color:#000000; cursor:pointer;} /* [수정] 12/03 cursor:pointer 추가 */ .cl_popup .popupWin .popupContent {max-height:400px; padding:0 20px; margin:24px 0; overflow-y:auto;} .cl_popup .popupWin .popupFooter {height:70px; padding:0 20px;} .cl_popup .popupWin .popupFooter .buttonCell {padding:0 16px;} /* *** 컨펌팝업 */ .popupConfirm .popupHeader .title {color:#e34140 !important;} .popupConfirm .popupHeader .title .smallText {font-size:16px;} .popupConfirm .popupFooter .buttonCell {display:flex; padding:0 !important;} .popupConfirm .popupFooter .buttonCell .halfCell {flex:1;} .popupConfirm .popupFooter .buttonCell .halfCell:first-child {margin-right:12px;} .popupConfirm .popupFooter .buttonCell .halfCell .cl_flatButton {display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:18px; font-family:NotoSansR; line-height:1.2; padding:0 8px;} .popupConfirm .popupFooter .buttonCell .halfCell .cl_flatButton .smallText {font-size:12px; } .popupConfirm .popupContent {font-size:16px; text-align:center;} .popupConfirm .popupContent .redText {color:#e34140;} /* *** 메세지 팝업 */ .messagePopup .popupHeader .title {color:#000000 !important;} .messagePopup .popupHeader .title .smallText {font-size:16px;} .messagePopup .popupContent {font-size:16px; text-align:center;} .messagePopup .popupContent .redText {color:#e34140;} /* *** 일반 PC 팝업 */ .cl_PcPopup {position:fixed; top:0; left:0; display:none; justify-content:center; align-items:center; width:100%; height:100%; background-color:rgba(0,0,0,0.51); z-index:10000;} .cl_PcPopup.on {display:flex;} .cl_PcPopup .popupWin {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width:296px; padding: 30px 0; border-radius: 10px; overflow:hidden; background-color:#ffffff;} .cl_PcPopup .popupWin .popupHeader {position:relative; display:flex; align-items:center;} .cl_PcPopup .popupWin .popupHeader .title {font-size:20px; color:#111111;font-family: "PretendardSB";} .cl_PcPopup .popupWin .popupHeader .btnClosePopup {position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:28px; color:#979797;font-weight: 600; cursor:pointer;} .cl_PcPopup .popupWin .popupHeader .btnCheck {position:absolute; top:50%; right:70px; transform:translateY(-50%); font-size:24px; color:#000000; cursor:pointer;} /* [수정] 12/03 체크버튼 추가 */ .cl_PcPopup .popupWin .popupContent {max-height:400px; padding:0 20px; margin:24px 0; overflow-y:auto; color:#000000;} .cl_PcPopup .popupWin .popupContent .imgArea{text-align: center; margin-bottom: 15px;} /*.cl_PcPopup .popupWin .popupFooter {height:70px; padding:0 20px;}*/ .cl_PcPopup .popupWin .popupFooter .buttonCell {padding:0 16px;} .cl_PcPopup .guideText {padding:10px; border:1px solid #e2e2e2; border-radius: 5px; margin-bottom: 10px;} /* *** confirm 팝업 */ .cl_PcPopup.confirm_popup .popupWin {width: 500px; padding: 20px 0;} .cl_PcPopup.confirm_popup .popupWin .popupHeader {justify-content: center; text-align: center; padding: 20px;} .cl_PcPopup.confirm_popup .popupWin .popupHeader .title {color: #111111; font-size: 24px; font-family: "PretendardSB";} .cl_PcPopup.confirm_popup .popupWin .popupHeader .btnClosePopup{ top: 20px; right: 20px;} .cl_PcPopup.confirm_popup .popupWin .popupContent { padding: 0 20px;} .cl_PcPopup.confirm_popup .popupWin .popupContent .subTitle {color: #111111;font-size: 18px;font-family: "PretendardSB"; text-align: center; word-break: keep-all;} .cl_PcPopup.confirm_popup .popupWin .popupContent .list {max-width: 220px; margin: 0 auto 25px auto;} .cl_PcPopup.confirm_popup .popupWin .popupContent .list .txt::before{ content: ""; display:inline-block;position: absolute; top: 9px; left: -15px; width: 4px; height: 4px; margin-right: 10px;border-radius: 50%; background-color: #111111; } .cl_PcPopup.confirm_popup .popupWin .popupContent .list .txt{ color: #111111; font-family: "PretendardM"; display: flex; align-items: center; position: relative;} .cl_PcPopup.confirm_popup .popupWin .popupContent .cPoint{ color: #17A2E2; font-size: 18px; font-family: "PretendardSB"; text-align: center; } .cl_PcPopup.confirm_popup .popupWin .popupContent .checkboxWrap{height: auto; display: flex; align-items: center; margin-top: 20px;} .cl_PcPopup.confirm_popup .popupWin .popupContent .checkboxWrap input[type=checkbox] + label{display: block; height: auto; line-height: normal !important;} .cl_PcPopup.confirm_popup .popupWin .popupFooter{padding: 0 20px;} .cl_PcPopup.confirm_popup .popupWin .popupFooter .cl_commonButton{width: 100%; display: flex; justify-content: center;} .cl_PcPopup.confirm_popup.small .popupWin {width: 360px;} .cl_PcPopup.confirm_popup.small .popupWin {padding: 15px 0;} .cl_PcPopup.confirm_popup.small .popupWin .popupHeader {padding: 20px 20px 0 20px;} .cl_PcPopup.confirm_popup.small .popupWin .popupHeader .btnClosePopup {top: 12px;} /* *** 현장공유 팝업 */ .cl_PcPopup.share_popup .popupWin {width: 460px;height: auto;} .cl_PcPopup.share_popup .popupHeader {height: auto;background-color: #ffffff !important; padding: 0 30px;} .cl_PcPopup.share_popup .popupHeader .btnClosePopup {top: 5px;} .cl_PcPopup.share_popup .popupHeader .title{font-size: 24px; font-family: "PretendardB";} .cl_PcPopup.share_popup .popupHeader .popupHeaderInner {width: 100%;text-align: center; padding: 0 0 20px 0 !important;border-bottom: 1px solid #D9D9D9; } .cl_PcPopup.share_popup .popupContent {max-height: 100%; padding: 30px; margin: 0;} .cl_PcPopup.share_popup .popupContent .popupContentInner {padding: 10px 25px; box-sizing: border-box;} .cl_PcPopup.share_popup .popupContent .formGuideMessage{color: #111111; font-size: 18px; font-family: "PretendardB";} .cl_PcPopup.share_popup .popupContent .formBox{padding-bottom: 20px; box-sizing: border-box;} .cl_PcPopup.share_popup .popupContent input[type=text] {width: 100%; height:60px; font-size:20px; font-family: "PretendardM"; margin-top:15px; padding:0 15px; box-sizing: border-box; border-radius:5px; background-color: #F2F7FA;} .cl_PcPopup.share_popup .popupFooter {height: 100%; padding: 0 30px;} .cl_PcPopup.share_popup .popupFooter .cl_BtnWrap {flex-direction: column; gap: 10px;} .cl_PcPopup.share_popup .popupFooter .cl_BtnWrap .cl_commonButton {font-size: 16px; font-family: "PretendardM";width: 100%; height: 50px; display: flex; justify-content: center; margin-left:0;} .cl_PcPopup.share_popup .popupFooter .cl_commonButton::before{content: ""; display: inline-block; background-repeat: no-repeat; background-size: 100% auto;} .cl_PcPopup.share_popup .btnKakao{color: #392020 !important; background-color: #F6E44B;} .cl_PcPopup.share_popup .btnKakao::before{width: 31px; height: 30px; background-image: url("../images/iconKakao.png");} .cl_PcPopup.share_popup .btnCopy{color: #fff !important; background-color: #525252;} .cl_PcPopup.share_popup .btnCopy::before{width: 25px; height: 24px;background-image: url("../images/iconCopy.png");} /* *** 스크롤 팝업 */ .cl_PcPopup.scroll_descPopup .popupWin {width: 860px;height: 740px; padding: 20px;} .cl_PcPopup.scroll_descPopup .popupHeader .topArea {width: 100%;padding-bottom:20px;border-bottom: 1px solid #D9D9D9; } .cl_PcPopup.scroll_descPopup .popupHeader .topArea .box_title{font-size: 28px;} .cl_PcPopup.scroll_descPopup.bigSize .popupContent {height: 100%;max-height: 607px;padding: 10px;box-sizing: border-box;overflow-y: auto; } .cl_PcPopup.scroll_descPopup.bigSize .popupWin {width: 860px;height: 740px; padding: 20px;} .cl_PcPopup.scroll_descPopup.bigSize .popupHeader .btnClosePopup {top: calc(50% - 10px);} /* *** 빅사이즈 팝업 공통 */ .cl_PcPopup.bigSize .popupWin {width: 860px; padding: 30px; box-sizing: border-box;} .cl_PcPopup.bigSize .popupHeader {flex-direction: column; align-items: start; padding: 0; margin-bottom: 10px;} .cl_PcPopup.bigSize .popupHeader .btnClosePopup {right: 0;} .cl_PcPopup.bigSize .popupHeader {margin-bottom: 20px;} .cl_PcPopup.bigSize .popupHeader .topArea {position: relative; width: 100%;} .cl_PcPopup.bigSize .popupHeader .topArea .box_title{color: #111; font-size: 24px;font-family: "PretendardSB";} .cl_PcPopup.bigSize .popupHeader .topArea + .title {margin-top: 20px;} .cl_PcPopup.bigSize .popupHeader .title{color: #111; font-family: "PretendardM"; width: 100%; padding: 10px; box-sizing: border-box; background-color: #F2F7FA;} .cl_PcPopup.bigSize .popupContent {width: 100%; max-height: 600px; height: 100%; padding: 0; margin: 0 0 20px 0;} .cl_PcPopup.bigSize.mapType .popupContent{height: 500px;} .cl_PcPopup.bigSize .popupFooter {height: auto;} /* *** 검색결과 팝업 */ .cl_PcPopup.result_popup .popupWin {width: 460px;height: auto; padding: 30px;} .cl_PcPopup.result_popup .popupHeader .topArea .box_title{color: #111111; font-size: 24px; font-family: "PretendardSB";} .cl_PcPopup.result_popup .popupWin .popupHeader .btnClosePopup {right: 0;} .cl_PcPopup.result_popup .popupContent {padding: 0 !important; margin: 25px 0 0 0!important;} .cl_PcPopup.result_popup .popupContent .resultList {min-height: 126px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; margin-bottom: 20px; padding: 20px; box-sizing: border-box; border-radius: 4px; background-color: #F2F7FA;} .cl_PcPopup.result_popup .popupContent .resultList .textContainer{width: 100%; display: flex;gap: 8px;} .cl_PcPopup.result_popup .popupContent .resultList .textContainer .text_date{color: #728499; font-size: 14px;font-family: "PretendardM"; display: flex; align-items: center; gap: 5px;} .cl_PcPopup.result_popup .popupContent .resultList .textContainer .text_date span{ line-height: 1;} .cl_PcPopup.result_popup .popupContent .resultList .radioButton input[type="radio"] + label {color: #111111;font-family:"PretendardM"; display: inline-block;position: relative;padding-left: 35px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .cl_PcPopup.result_popup .popupContent .resultList .radioButton input[type="radio"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;} .cl_PcPopup.result_popup .popupContent .resultList .radioButton input[type="radio"] + label:before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 25px;height: 25px;text-align: center;background: #ffffff;box-sizing: border-box;border: 2px solid #D9D9D9;border-radius: 100%;} .cl_PcPopup.result_popup .popupContent .resultList .radioButton input[type="radio"]:checked + label:after {content: '';position: absolute;top: 50%;transform: translateY(-50%);left: 6px;width: 14px;height: 14px;background: #17A2E2;border-radius: 100%;} .cl_PcPopup.result_popup .popupFooter {margin-top: 10px;} /* *** 카카오 지도 관련 팝업 */ .cl_PcPopup#correctMapPopup .popupContent#correctMapWrapper {width: 100% !important; height: 500px !important; margin: 0 0 20px 0; padding: 0;} /* *** 리스트 하단 에디트버튼 영역 */ .cl_listEditButtonArea {padding:0 10px; margin-top:15px; margin-bottom:25px;} .cl_listEditButtonArea.noMargin {padding:0; margin-top:15px; margin-bottom:0;} .cl_listEditButtonArea .textInfoWrap {display:flex; margin-bottom:12px;} .cl_listEditButtonArea .textInfoWrap .pdtName {flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_listEditButtonArea .textInfoWrap .timeRemain {width:130px; font-size:12px; text-align:right;} .cl_listEditButtonArea .buttonWrap {display:flex; justify-content:space-between;} /* ********************************** 버튼 스타일 ************************************** */ /* *** 플랫 버튼 */ .cl_flatButton {display:inline-block;width: 100%;height: 44px;line-height: 44px;font-size: 18px;color: #ffffff;font-family: NotoSansR;white-space:nowrap;text-align:center;vertical-align:middle;border-radius: 6px;box-sizing:border-box;background-color: #cccccc;cursor:pointer;} /*플랫 버튼 컬러*/ .cl_flatButton.purple {border:solid 1px #5747ec; background-color:#5747ec;} .cl_flatButton.darkGary {border:solid 1px #666666; background-color:#666666;} .cl_flatButton.gary {border:solid 1px #cccccc; background-color:#cccccc;} .cl_flatButton.lightGary {border:solid 1px #f6f6f6; background-color:#f6f6f6;} .cl_flatButton.white {border:solid 1px #ffffff; background-color:#ffffff;} .cl_flatButton.orange {border:solid 1px #ff5803; background-color:#ff5803;} .cl_flatButton.red {border:solid 1px rgba(229, 22, 22, 0.8); background-color: rgba(229, 22, 22, 0.8);} /*플랫 버튼 크기*/ .cl_flatButton.extraMiniW {width:50px !important;} .cl_flatButton.miniW {width:60px !important;} .cl_flatButton.tinyW {width:64px !important;} .cl_flatButton.smallW {width:90px !important;} .cl_flatButton.mediumW {width:190px !important;} .cl_flatButton.largeW {width:220px !important;} .cl_flatButton.paddingMiniW {width:auto; padding-left:4px; padding-right:4px;} .cl_flatButton.miniH {height:24px !important; line-height:22px;} .cl_flatButton.tinyH {height:26px !important; line-height:24px;} .cl_flatButton.smallH {height:40px !important; line-height:38px;} .cl_flatButton.mediumH {height:44px !important; line-height:42px;} .cl_flatButton.largeH {height:50px !important; line-height:48px;} /*플랫버튼 글씨 색상*/ .cl_flatButton.fontWhite {color:#ffffff;} .cl_flatButton.fontGray {color:#666666;} .cl_flatButton.fontLightGray {color:#bfbfbf;} .cl_flatButton.fontBlack {color:#000000;} .cl_flatButton.fontPurple {color:#5747ec;} /*플랫버튼 글씨 크기*/ .cl_flatButton.fontSizeMini {font-size:11px;} .cl_flatButton.fontSizeT {font-size:12px;} .cl_flatButton.fontSizeT {font-size:12px;} .cl_flatButton.fontSizeS {font-size:14px;} .cl_flatButton.fontSizeM {font-size:16px;} .cl_flatButton.fontSizeL {font-size:18px;} /*추가 요소*/ .cl_flatButton.line {border:solid 1px #ffffff; background-color:transparent !important;} /*라인 버튼*/ .cl_flatButton.lineGray {border-color:#cccccc;} .cl_flatButton.lineLightGray {border-color:#bfbfbf;} .cl_flatButton.noRound {border-radius:0 !important;} /*모서리 각진 버튼*/ /* *** 하단 버튼 영역 */ .cl_bottomButtonArea {margin-top:50px; padding-top:24px; padding-bottom:24px; background-color:#ffffff;} /* ********************************** 그리드 ********************************** */ .cl_gridWrapper {overflow:hidden; margin-bottom:16px;} .cl_gridWrapper:last-child {margin-bottom:0;} .cl_gridWrapper .grid {display:flex; flex-wrap:wrap; padding:9px 0 0 9px; margin:-9px} .cl_gridWrapper .grid .gridCell { box-sizing:border-box; border:0 solid transparent; border-width:0 9px 9px 0; } .cl_gridWrapper.col1 .grid .gridCell {width:calc(100% / 1);} .cl_gridWrapper.col2 .grid .gridCell {width:calc(100% / 2);} .cl_gridWrapper.col3 .grid .gridCell {width:calc(100% / 3);} .cl_gridWrapper.col4 .grid .gridCell {width:calc(100% / 4);} .cl_gridWrapper.col8 .grid .gridCell {width:calc(100% / 8);} /* ********************************** 폼요소 스타일 ************************************** */ /* *** 폼 래퍼와 폼텍스트 */ .cl_formGridWrap {margin-bottom:24px;} .cl_formGridWrap:last-child {margin-bottom:0;} .cl_formGridWrap .formText {font-size:15px; color:#000000; margin-bottom:8px;} .cl_formGridWrap .formBottomInfoText {font-size:12px; color:#666666; margin-top:8px;} .cl_formGridWrap .formInput.halfColWrap {display:flex;} .cl_formGridWrap .formInput.halfColWrap .formCol {flex:1} .cl_formGridWrap .formInput.halfColWrap .formCol:first-child {margin-right:9px;} .cl_formGridWrap .formInput span.infoText {display:block; font-size:12px; color: rgba(229, 22, 22, 0.8); margin-top:5px;} .cl_formGridWrap .priceUnitGuide {font-size:12px; color:rgba(229, 22, 22, 0.8); margin-top:10px;} /* *** 텍스트박스와 오른쪽 버튼들 */ .cl_inputTextWithRightButtons {display:flex;} .cl_inputTextWithRightButtons .inputWrap {flex:1;} .cl_inputTextWithRightButtons .cl_input {margin-bottom:0;} .cl_inputTextWithRightButtons .inputRightButton {display: inline-block;height:40px;line-height:38px;font-size: 12px;color: #000000;font-family: NotoSansM;vertical-align:middle;white-space:nowrap;padding-left:9px;padding-right:9px;margin-left:4px;box-sizing:border-box;border:solid 1px #bfbfbf;border-radius:4px;background-color:#f6f6f6;cursor:pointer;} .cl_inputTextWithRightButtons .inputRightButton.on {color:#ffffff; border-color:#5545e6; background-color:#5545e6;} /* *** 범위 폼 */ .cl_rangeForm {display:flex; justify-content:space-between; align-items:center;} .cl_rangeForm .cl_input {flex:1;} .cl_rangeForm .range {width:30px; font-size:15px; color:#000000; text-align:center;} /* *** 폼 요소 기본설정 */ .cl_textarea, input[type=text].cl_input, input[type=number].cl_input, .cl_select {outline:none;} select.cl_required:required:invalid{color: #A1A1A1 !important;} select.cl_required option{color: #111 !important;} select option[disabled] {color: #A1A1A1 !important;} select:focus {outline: none !important;} /* *** 인풋텍스트 */ .cl_input {display:flex;align-items:center;width:100%;height:40px;box-sizing:border-box;border:solid 1px #bfbfbf;border-radius:4px;padding-left:7px;padding-right:7px;margin-bottom:12px;background-color:#ffffff;} .cl_input:last-child {margin-bottom:0;} .cl_input input {flex:1;width:100%;min-width:50px;font-size:14px;color:#000000;padding:0;padding-left:5px;padding-right:5px;box-sizing: border-box;} .cl_input.miniW {width:100px;} .cl_input.smallW {width:150px;} .cl_input.mediumW {width:200px;} .cl_input.largeW {width:340px;} .cl_input.flex1 {flex:1; width:auto;} .cl_input.bigH {height:50px;} .cl_input.bigH input {font-size:16px;} .cl_input.disabled {background-color:#f6f6f6;} .cl_input.disabled input {pointer-events:none; background-color:#f6f6f6;} .cl_input.borderBlack {border-color:#000000;} .cl_input input::placeholder {color: #bfbfbf;} .cl_input .inputInnerButton {margin-left:8px;} /* *** textarea */ .cl_textarea.type1 {width:100%; height:200px; font-size:14px; padding:8px; box-sizing:border-box; border:solid 1px #707070; background-color:#f6f6f6;} .cl_textarea.type2 {width:100%;height:80px;font-size:14px;box-sizing:border-box;border:solid 1px #bfbfbf;border-radius:4px;padding:8px;background-color:#ffffff;} /* *** 체크박스 */ .cl_check {display:none !important;} .cl_check + label {display: inline-block; height:22px; font-size:14px; color:#666666; line-height: 22px; padding-left: 26px; background: url('../images/check_off.png') left/22px no-repeat !important;} .cl_check:checked + label { background-image: url('../images/checkMark.svg') !important; } .cl_check.type2 + label {display: inline-block; height:24px; font-size:14px; color:#666666; line-height: 24px; padding-left: 28px; background: url('../images/check_off2.png') left/24px no-repeat !important;} .cl_check:checked.type2 + label { background-image: url('../images/checkMark.svg') !important; } .cl_check.type4 + label {display: inline-block; height:20px; font-size:14px; color:#666666; line-height: 20px; padding-left: 28px; background: url('../images/check_off3.png') left/20px no-repeat !important;} .cl_check:checked.type4 + label { background-image: url('../images/checkMark.svg') !important; } /*박스형태 체크박스*/ .cl_check.type3 + label {display: flex;justify-content:center;align-items:center;width:100%;height:40px;line-height:1.2;font-size:14px;color:#bfbfbf;text-align:center;vertical-align: middle;padding-left:0;border:solid 1px #bfbfbf;border-radius:4px;box-sizing: border-box;background-color:#ffffff;background-image:none !important;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .cl_check:checked.type3 + label {color:#17A2E2;border:solid 1px #17A2E2;background-image:none !important;} /* *** 라디오버튼 */ /*라디오버튼 스타일1 - 동그라미 스타일*/ .cl_radio {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} .cl_radio + label {display: inline-block;position: relative;font-size:14px;color:#666666;padding-left: 28px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .cl_radio + label:before {content: '';position: absolute;left: 0;top: 1px;width: 22px;height: 22px;text-align: center;background: #ffffff;box-sizing: border-box;border: 1px solid #bfbfbf;border-radius: 100%;} .cl_radio:checked + label:before {border-color:#5747ec;background-color:#5747ec;} .cl_radio:checked + label:after {content: '';position: absolute;top: 7px;left: 6px;width: 10px;height: 10px;background: #ffffff;border-radius: 100%;} .cl_radio.disabled {color:#bfbfbf !important; pointer-events:none;} .cl_radio.disabled + label {color:#bfbfbf !important; pointer-events:none;} .cl_radio.disabled + label:before {background-color:#f6f6f6;} .cl_radio.disabled + label i {color:#bfbfbf !important; pointer-events:none;} .cl_radio.disabled + label a {color:#bfbfbf !important; pointer-events:none;} /*라디오버튼 스타일2 - 네모박스 스타일*/ .cl_radio.type2 + label {display: inline-block;position: relative;width:100%;height:40px;line-height:38px;font-size:14px;color:#bfbfbf;text-align:center;vertical-align: middle;padding-left:0;border:solid 1px #bfbfbf;border-radius:4px;box-sizing: border-box;background-color:#ffffff;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .cl_radio.type2 + label:before {display:none;} .cl_radio.type2 + label:after {display:none;} .cl_radio:checked.type2 + label { color:#17A2E2; border:solid 1px #17A2E2; } /* ********************************** 정보박스 스타일 **************************************id */ /* *** 내용페이지 정보박스 */ .cl_infoBoxBasic {margin-bottom:12px; padding:24px 20px; box-sizing:border-box; background-color:#ffffff;} .cl_infoBoxBasic.noSidePadding {padding-left:0; padding-right:0;} .cl_infoBoxBasic.noBottomGap {margin-bottom:0;} .cl_infoBoxBasic.topLine {border-top:solid 1px #f0f0f0;} .cl_infoBoxBasic .boxTitle {position:relative; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #e9e9e9; font-size:18px; color:#111111; font-family:NotoSansB;} .cl_infoBoxBasic .boxTitle.small {font-size:16px;} .cl_infoBoxBasic .boxTitle .smallText {font-size:12px; font-family:NotoSansR;} .cl_infoBoxBasic .boxTitle .sideButton {position:absolute; top:50%; transform:translateY(-50%); right:0; width:24px;} .cl_infoBoxBasic .boxMidTitle {font-size:14px; color:#111111; font-family:NotoSansB; margin-bottom:10px;} .cl_infoBoxBasic .boxMidTitle.gray {color:#999;} .cl_infoBoxBasic .infoBoxContent {margin-bottom:24px; font-size:16px;} .cl_infoBoxBasic .infoBoxContent:last-child {margin-bottom:0;} .cl_infoBoxBasic .infoBoxContent .mainContentText {font-size:23px; color:#111111; margin-bottom:6px;} .cl_infoBoxBasic .infoBoxContent .mainContentText:last-child {margin-bottom:0;} .cl_infoBoxBasic .infoBoxContent .subContentText {font-size:14px; color:#797979;} .cl_infoBoxBasic .infoBoxContent .normalContentText {font-size:18px; color:#000000;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable {width:100%; border-collapse:collapse; margin-bottom:12px;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable:last-child {margin-bottom:0;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable th {width:70px; font-size:18px; color:#797979; font-family:NotoSansR; font-weight:normal; text-align:left; padding:5px;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable th.large {width:100px;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable td {font-size:16px; color:#000000; font-family:NotoSansR; padding:5px;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable tr:first-child th, .cl_infoBoxBasic .infoBoxContent .infoBoxTable tr:first-child td {padding-top:0;} .cl_infoBoxBasic .infoBoxContent .infoBoxTable tr:last-child th, .cl_infoBoxBasic .infoBoxContent .infoBoxTable tr:last-child td {padding-bottom:0;} .cl_infoBoxBasic .infoBoxContent .detailInfo {margin-bottom:12px; font-size:14px;} /* ***************************************************** 리스트 ***************************************************** */ /* *** 유니크 리스트 */ .cl_uniqueList {display:flex; flex-direction:column; border-radius:10px; overflow: hidden; /*border: 1px solid #00BCD5;*/ border: 1px solid #D9D9D9; box-sizing: border-box; background-color:#ffffff;} .cl_uniqueList:hover {box-shadow: 4px 4px 15px 0 rgba(92, 92, 92, 0.16);} .cl_uniqueList .photoCell {position:relative; width:100%; height:380px; cursor:pointer; background-repeat:no-repeat; background-size:cover;} .cl_uniqueList .photoCell > .badgeWrap {font-size:0; text-align:right; padding:13px; box-sizing:border-box;} .cl_uniqueList .listInfoCell {height:179px; padding:15px; box-sizing: border-box;} .cl_uniqueList .listInfoCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:7px;} .cl_uniqueList .listInfoCell .hashtagCell {font-size:16px; color:#17A2E2; font-family:PretendardM; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_uniqueList .listInfoCell .titleText {width:100%; cursor:pointer;} .cl_uniqueList .listInfoCell .titleText .mainText {font-size:22px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_uniqueList .listInfoCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_uniqueList .listInfoCell .infoText {font-size:16px; color:#728499; line-height: 1; margin-top:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .cl_uniqueList .listInfoCell > .labelWrap {display:flex; margin-top:15px;} /* *** 서포터즈 불꽃(구 서포터즈 포커스) 리스트 */ .cl_supportersFocusList {display:flex; flex-direction:column; border-radius:10px; overflow: hidden; border: 1px solid #00BCD5; box-sizing: border-box; background-color:#ffffff;} .cl_supportersFocusList:hover {box-shadow: 4px 4px 15px 0 rgba(92, 92, 92, 0.16);} .cl_supportersFocusList .photoCell {position:relative; width:100%; height:380px; cursor:pointer; background-repeat:no-repeat; background-size:cover;} .cl_supportersFocusList .photoCell > .badgeWrap {font-size:0; text-align:right; padding:13px; box-sizing:border-box;} .cl_supportersFocusList .listInfoCell {height:179px; padding:15px; box-sizing: border-box;} .cl_supportersFocusList .listInfoCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:7px;} .cl_supportersFocusList .listInfoCell .hashtagCell {font-size:16px; color:#17A2E2; font-family:PretendardM; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_supportersFocusList .listInfoCell .titleText {width:100%; cursor:pointer;} .cl_supportersFocusList .listInfoCell .titleText .mainText {font-size:22px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_supportersFocusList .listInfoCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_supportersFocusList .listInfoCell .infoText {font-size:16px; color:#728499; line-height: 1; margin-top:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .cl_supportersFocusList .listInfoCell > .labelWrap {display:flex; margin-top:15px;} /* *** 서포터즈 리스트 */ .cl_supportersList {display:flex; padding:13px; box-sizing: border-box; overflow:hidden; border-radius:10px; border: 1px solid #D9D9D9; margin-bottom:10px; background-color:#ffffff; cursor:pointer;} .cl_supportersList:last-child {margin-bottom:0;} .cl_supportersList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_supportersList .listInfo {position:relative; width:110px; height:100px; border-radius: 8px; margin-right:15px; background-repeat:no-repeat; background-size:cover;} .cl_supportersList .listInfo > .badgeWrap {font-size:0; text-align:right; padding:10px; box-sizing:border-box;} .cl_supportersList .listTitleCell {padding: 0; box-sizing: border-box;} .cl_supportersList .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_supportersList .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_supportersList .conditionInfo {width:calc(100% - 110px - 15px);} .cl_supportersList .conditionInfo .listTitleCell .titleText {width:100%;} .cl_supportersList .conditionInfo .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_supportersList .conditionInfo .listTitleCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_supportersList .conditionInfo .infoText {font-size:14px; color:#728499; line-height: 1; margin-top:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_supportersList .labelWrap {font-size:0; margin-top:12px;} .cl_supportersList .labelWrap .textLabel {font-size:14px; color:#418bca; font-family:PretendardM; line-height: 1; margin-right:5px; margin-left:5px;} .cl_supportersList .labelWrap .textLabel:first-child {margin-left:0;} /* *** 슈페리어 리스트 */ .cl_superiorList {display:flex; flex-direction:column; border-radius:10px; overflow: hidden; border: 1px solid #D9D9D9; box-sizing: border-box; background-color:#ffffff;} .cl_superiorList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_superiorList .photoCell {position:relative; width:100%; height:391px; cursor:pointer; background-repeat:no-repeat; background-size:cover;} .cl_superiorList .photoCell > .badgeWrap {font-size:0; text-align:right; padding:13px; box-sizing:border-box;} .cl_superiorList .listInfoCell {height:162px; padding:15px; box-sizing: border-box;} .cl_superiorList .listInfoCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_superiorList .listInfoCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_superiorList .listInfoCell .titleText {width:100%; cursor:pointer;} .cl_superiorList .listInfoCell .titleText .mainText {font-size:20px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_superiorList .listInfoCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_superiorList .listInfoCell .infoText {font-size:16px; color:#728499; line-height: 1; margin-top:10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .cl_superiorList .listInfoCell > .labelWrap {display:flex; margin-top:10px;} /* *** 전국 top 플래티넘 리스트 */ .cl_topPlatinumList {display:flex; padding:15px; box-sizing: border-box; border: 1px solid #D9D9D9; overflow:hidden; border-radius:10px; background-color:#ffffff;} .cl_topPlatinumList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_topPlatinumList .listInfo {position:relative; min-width: 125px; width:125px; height:125px; border-radius: 8px; margin-right:15px; background-repeat:no-repeat; background-size:cover;} .cl_topPlatinumList .listInfo > .badgeWrap {font-size:0; text-align:right; padding:5px; box-sizing:border-box;} .cl_topPlatinumList .listTitleCell {padding: 0; box-sizing: border-box;} .cl_topPlatinumList .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_topPlatinumList .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_topPlatinumList .conditionInfo {width:calc(100% - 125px - 10px);} .cl_topPlatinumList .conditionInfo .listTitleCell .titleText {width:100%;} .cl_topPlatinumList .conditionInfo .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_topPlatinumList .conditionInfo .listTitleCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_topPlatinumList .conditionInfo .infoText {font-size:14px; color:#728499; font-family:PretendardM; line-height: 1; word-wrap:break-word;word-break:break-all; margin-top:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_topPlatinumList .conditionInfo > .labelWrap {display:flex; margin-top:13px;} /* *** 지역 top 리스트 */ .cl_regionTopList {padding:15px; box-sizing: border-box; border: 1px solid #D9D9D9; overflow:hidden; border-radius:10px; background-color:#ffffff;} .cl_regionTopList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_regionTopList .listInfo {display:flex; align-items: center;} .cl_regionTopList .photoCell {position:relative; width:110px; min-width: 110px; height:110px; border-radius: 8px; margin-right:15px; background-repeat:no-repeat; background-size:cover;} .cl_regionTopList .photoCell > .badgeWrap {font-size:0; text-align:right; padding:5px; box-sizing:border-box;} .cl_regionTopList .listContentCell {width:calc(100% - 110px - 15px);} .cl_regionTopList .listContentCell .listTitleCell {padding: 0; box-sizing: border-box;} .cl_regionTopList .listContentCell .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_regionTopList .listContentCell .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionTopList .listContentCell .listTitleCell .titleText {width:100%;} .cl_regionTopList .listContentCell .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionTopList .listContentCell .listTitleCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_regionTopList .listContentCell .infoText {font-size:14px; color:#728499; font-family:PretendardM; line-height: 1; margin-top:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionTopList .labelWrap {display:flex; width:100%; margin-top:10px;} /* *** 일반상품 리스트 */ .cl_homeNormalList {display:flex; min-height:130px; padding:13px; box-sizing: border-box; overflow:hidden; border-radius:10px; border: 1px solid #D9D9D9; margin-bottom:10px; background-color:#ffffff;} .cl_homeNormalList:last-child {margin-bottom:0;} .cl_homeNormalList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_homeNormalList .listInfo {position:relative; width:100px; height:100px; border-radius: 8px; margin-right:15px; background-repeat:no-repeat; background-size:cover; background-position: center;} .cl_homeNormalList .listInfo > .badgeWrap {font-size:0; text-align:right; padding:10px; box-sizing:border-box;} .cl_homeNormalList .listTitleCell {padding: 0; box-sizing: border-box;} .cl_homeNormalList .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_homeNormalList .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_homeNormalList .conditionInfo {width:calc(100% - 100px - 15px);} .cl_homeNormalList .conditionInfo .listTitleCell .titleText {width:100%;} .cl_homeNormalList .conditionInfo .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_homeNormalList .conditionInfo .listTitleCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_homeNormalList .conditionInfo .infoText {font-size:14px; color:#728499; line-height: 1; margin-top:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_homeNormalList .labelWrap {color:#418bca;line-height: 1;margin-top:12px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-spacing: -4px;} .cl_homeNormalList .labelWrap .textLabel {font-size:14px; color:#418bca; font-family:PretendardM; line-height: 1; margin-left:5px;} .cl_homeNormalList .labelWrap .textLabel:first-child {margin-left:0;} .cl_homeNormalList.noImg .conditionInfo {width:100%;} /* *** 지도현장 지역상세 리스트 */ .cl_regionDetailList.unique {border: 1px solid #FF495E;} .cl_regionDetailList.superior {border: 1px solid #F18349;} .cl_regionDetailList.all_top_premium {border: 1px solid #7387F2;} .cl_regionDetailList.all_top_basic {border: 1px solid #47C932;} .cl_regionDetailList.local_top {border: 1px solid #00BCD5;} .cl_regionDetailList {position: relative; padding:15px; box-sizing: border-box; border: 1px solid #D9D9D9; overflow:hidden; border-radius:10px; background-color:#ffffff; cursor: pointer;} .cl_regionDetailList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_regionDetailList .badgeWrap {position: absolute; top: 10px; right:8px; width: 24px;} .cl_regionDetailList .badgeWrap img{width: 100%;} .cl_regionDetailList .conditionInfo {width:calc(100% - 75px);} .cl_regionDetailList .conditionInfo .listTitleCell {padding: 0; box-sizing: border-box;} .cl_regionDetailList .conditionInfo .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:3px;} .cl_regionDetailList .conditionInfo .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionDetailList .conditionInfo .listTitleCell .titleText {width:100%;} .cl_regionDetailList .conditionInfo .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionDetailList .conditionInfo .listTitleCell .cl_favorCell {display:flex; justify-content:center; align-items:center; width:24px; font-size:20px; margin-left:12px;} .cl_regionDetailList .conditionInfo .infoText {font-size:14px; color:#728499; font-family:PretendardM; line-height: 1; margin-top:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_regionDetailList .labelWrap {display:flex; flex-wrap: wrap; width:100%; margin-top:10px; gap: 10px;} .cl_regionDetailList .labelWrap .textLabel {color: #00BCD5; font-size: 14px; font-family:PretendardM; line-height: 1;} .cl_regionDetailList .labelWrap .textLabel:not(:last-of-type){border-right: 1px solid #AEBDCF; padding-right: 10px; box-sizing: border-box;} .cl_regionDetailList .dateText {color:#A1A1A1;font-size: 14px; font-family:PretendardM;position: absolute; right: 15px; bottom: 15px;} /* *** 검색상품 리스트 */ .cl_searchList {display:flex; min-height:130px; padding:13px; box-sizing: border-box; overflow:hidden; border-radius:10px; border: 1px solid #D9D9D9; margin-bottom:10px; background-color:#ffffff;} .cl_searchList:last-child {margin-bottom:0;} .cl_searchList:hover {box-shadow: 4px 4px 15px 0px rgba(92, 92, 92, 0.16);} .cl_searchList .listInfo {position:relative; width:100px; height:100px; border-radius: 8px; margin-right:15px; background-repeat:no-repeat; background-size:cover;} .cl_searchList .listInfo > .badgeWrap {font-size:0; text-align:right; padding:10px; box-sizing:border-box;} .cl_searchList .listTitleCell {padding: 0; box-sizing: border-box;} .cl_searchList .listTitleCell .titleTopInfo {display: flex; justify-content:space-between; align-items: center; width: 100%; margin-bottom:5px;} .cl_searchList .listTitleCell .hashtagCell {font-size:14px; color:#17A2E2; font-family:PretendardM; line-height: 1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_searchList .conditionInfo {position:relative; width:calc(100% - 100px - 15px);} .cl_searchList .conditionInfo .listTitleCell .titleText {width:100%;} .cl_searchList .conditionInfo .listTitleCell .titleText .mainText {font-size:18px; color:#111111; font-family:PretendardSB; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_searchList .conditionInfo .dateCell {position:absolute; top:50%; right:15px; transform:translateY(-50%); font-size:16px; color:#A1A1A1; font-family:PretendardM;} .cl_searchList .conditionInfo .infoText {font-size:14px; color:#728499; line-height: 1; margin-top:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_searchList .labelWrap {font-size:0; margin-top:12px;} .cl_searchList .labelWrap .textLabel {font-size:14px; color:#00BCD5; font-family:PretendardM; line-height: 1; margin-left:5px;} .cl_searchList .labelWrap .textLabel:first-child {margin-left:0;} .cl_searchList.type2 {flex-direction: column;} .cl_searchList.type2 .listInfo {height: 240px;width: 100%; margin-bottom: 18px;background-position: center;} /* ********************************** 리스트 타이틀 ************************************** */ .cl_listTitle {display:flex; justify-content: space-between; align-items: center; margin-bottom:20px;} .cl_listTitle .sPart {display:flex; /*width:100%;*/ box-sizing:border-box; align-items: center; justify-content: space-between;} .cl_listTitle .ePart {display:flex; justify-content: flex-end; align-items: center;} .cl_listTitle .btnPart {display:flex; justify-content: flex-end; align-items: center;} .cl_listTitle .btnPart .btnMore{color: #5988AA; font-size: 14px; font-family:PretendardSB; display: block; cursor: pointer;} .cl_listTitle .sPart .titleText {font-size:24px; color:#111111; font-family:PretendardSB;} .cl_listTitle .sPart .subText {color:#728499; font-size: 14px; font-family:PretendardM; margin-left: 12px;} .cl_listTitle .sPart > * {margin-left:15px;} .cl_listTitle .sPart > *:first-child {margin-left:0;} .cl_titleWrap {display: flex; flex-direction: column; gap: 20px; margin-bottom: 15px;} .cl_titleWrap .mainText {font-size:24px; color:#111111; font-family:PretendardSB;} .cl_titleWrap .subText {display: flex; align-items: center; gap: 10px;} .cl_titleWrap .subText .title{font-size:18px; color:#111111; font-family:PretendardSB;} .cl_titleWrap .subText .text{font-size:14px; color:#111111; font-family:PretendardM;} .cl_titleWrap .subText .text .count{color: #17A2E2;} /* *** 슬라이드 페이지 번호 */ .cl_slidePageNum {display:flex; align-items: center;} .cl_slidePageNum .pageNum {min-width:40px; font-size:16px; color:#333333; font-family:PretendardR; text-align:center; white-space: nowrap;} .cl_slidePageNum .pageNum .current {color:#17A2E2;} .cl_slidePageNum .btnSlidePrev {margin-right:10px; cursor:pointer;} .cl_slidePageNum .btnSlideNext {margin-left:10px; cursor:pointer;} /* *** 검색결과 리스트 타이틀 */ .cl_searchListTitle {font-size:20px; color:#272727; font-family:PretendardSB; margin-bottom:20px;} .cl_searchListTitle .highlight {color:#17A2E2;} .cl_searchListTitle .sideText {font-size:16px; margin-left:15px;} .cl_searchCountArea {font-size:34px; color:#000000; font-family:PretendardM; text-align:center; padding:40px 0; border-bottom:solid 1px #D9D9D9; margin-bottom:90px;} .cl_searchCountArea .highlight {color:#17A2E2;} /* ********************************** 페이지네이션 ************************************** */ .cl_pagination {display:flex; align-items: center; justify-content: center; margin-top:20px;} .cl_pagination > *:not(:nth-child(2)) {margin-right:5px;} .cl_pagination > *:last-child {margin-right:0;} .cl_pagination .pageNumWrap {display:flex; align-items: center; margin:0 15px;} .cl_pagination .pageNumWrap .pageNum {display:flex; justify-content:center; align-items:center; min-width:30px; height:30px; font-size:14px; color:#A6A6A6; font-family:PretendardM; margin-right:5px;} .cl_pagination .pageNumWrap .pageNum:last-child {margin-right:0;} .cl_pagination .pageNumWrap .pageNum.on {color:#00BCD5; font-family:PretendardSB;} /* ********************************** 탭 ************************************** */ /* *** 베이직 탭 */ .cl_basicTab {display:flex; flex-direction: row; justify-content: space-between; margin-bottom:30px;} .cl_basicTab .category {width:100%; border-bottom:solid 1px #17A2E2;} .cl_basicTab .category ul {list-style:none; margin:0; padding:0; display:flex; flex-direction: row;} .cl_basicTab .category ul li {margin-right:10px;} .cl_basicTab .category ul li a {display: flex;height: 40px;padding: 8px 25px;justify-content: center;align-items: center;gap: 5px;border: 1px solid #17A2E2;border-bottom:0;box-sizing: border-box;color:#17A2E2;} .cl_basicTab .category ul li a.on {background: #17A2E2; color:#fff;} /* ********************************** 뱃지, 라벨, 좋아요, 기타 스타일 ************************************** */ /* *** 뱃지 */ .cl_badgeLine {display:inline-flex; justify-content: center; align-items: center; height:24px; font-size:12px; color:#ff5803; font-family:PretendardR; vertical-align:middle; padding:0 6px; margin-right:5px; border-radius:4px; box-sizing:border-box; border:solid 1px #ff5803; background-color:#ffffff;} .cl_badgeLine:last-child {margin-right:0 !important;} .cl_badgeLine.purple {color:#5747ec; border-color:#5747ec;} .cl_badgeFlat {display:inline-flex; justify-content: center; align-items: center; height:20px; font-size:12px; color:#ffffff; font-family:PretendardM; vertical-align:middle; padding:5px; margin-right:4px; border-radius:4px; box-sizing:border-box; background-color:#A33FEF;} .cl_badgeFlat:last-child {margin-right:0 !important;} .cl_badgeFlat.green {background-color:#4DB057;} .cl_badgeFlat.orange {background-color: #FF5803;} .cl_badgeFlat.teal {background-color:#00BCD5;} .cl_badgeFlat.red {background-color:#E34140;} .cl_badgeFlat.large, .cl_badgeLine.large {font-size: 14px; height:27px; margin-right:7px; } /* *** 라벨 */ /*리스트 하단 라벨*/ .cl_labelSquareFlat {display:flex; justify-content:center; align-items:center; width:58px; height:40px; font-size:12px; text-align:center; color:#fff; font-family:PretendardSB; line-height:1.2; border-radius:8px; margin-right:5px; padding: 3px; box-sizing: border-box; background-color:#00BCD5;} .cl_labelSquareFlat.infoBoxType1 {background-color:#f18349;} .cl_labelSquareFlat.infoBoxType2 {background-color:#4db057;} .cl_labelSquareFlat.infoBoxType3 {background-color:#349af4;} .cl_labelSquareFlat.infoBoxType4 {background-color:#af79df;} .cl_labelSquareFlat.infoBoxType5 {background-color:#fd7494; align-content: center; text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .cl_labelSquareFlat.small.infoBoxType5 {line-height: 18px;} .cl_labelSquareFlat.infoBoxType6 {background-color:#4AB2C0;} .cl_labelSquareFlat.infoBoxType7 {background-color:#43A0AC;} .cl_labelSquareFlat.infoBoxType8 {background-color:#4A9FC0;} .cl_labelSquareFlat.infoBoxType9 {background-color:#5BB1D2;} .cl_labelSquareFlat.teal {background-color:#4ab2c0;} .cl_labelSquareFlat.yellow {background-color:#fdfbeb;} .cl_labelSquareFlat.gray {background-color:#f4f4f4;} .cl_labelSquareFlat.large {width:65px; height:45px; font-size:14px;} .cl_labelSquareFlat.small {font-size: 11px;} .cl_labelSquareFlat.small.wBig {width:58px;} .cl_labelSquareFlat.wBig {width:88px;} .cl_labelFlatBlueText {display:inline-block; height:26px; line-height:26px; font-size:11px; color:#5869cf; vertical-align:middle; padding:0 8px; border-radius:4px; background-color:#eceefd;} .cl_labelFlatLine {display:inline-block; height:22px; line-height:18px; font-size:11px; color:#666666; vertical-align:middle; padding:0 8px; box-sizing:border-box; border:solid 2px #dddddd; border-radius:4px;} .cl_labelFlatLine.purple {color:#5747ec; border-color:#5747ec;} /* 유니크, 슈페리어 하단 라벨 */ .uniqueSupporters .uniqueArea .cl_labelSquareFlat.large {width: auto; min-width:60px;} .superiorListWrap .cl_superiorList .cl_labelSquareFlat.large {width: auto; min-width:60px;} .premiumSectionArea .uniqueListSwiper .cl_labelSquareFlat.large {width: auto; min-width:60px;} .premiumSectionArea .superiorListWrap .cl_labelSquareFlat.large {width: auto; min-width:60px;} /*결제 페이지 선택용 라벨*/ .cl_labelColorRect {display:inline-block; width:60px; height:24px; line-height:22px; font-size:12px; color:#ffffff; text-align:center; border-radius:4px; box-sizing: border-box; margin-right:4px; border:solid 1px #797979; background-color:#797979;} .cl_labelColorRect.red {color:#e34140; border-color:#e34140; background-color:#e34140;} .cl_labelColorRect.blue {color:#00bcd5; border-color:#00bcd5; background-color:#00bcd5;} .cl_labelColorRect.purple {color:#a33fef; border-color:#a33fef; background-color:#a33fef;} .cl_labelColorRect.orange {color:#ff5803; border-color:#ff5803; background-color:#ff5803;} .cl_labelColorRect.off {background-color:#797979 !important;} .cl_labelColorRect:last-child {margin-right:0;} .cl_labelColorRect.line {background-color:#ffffff !important;} .cl_labelColorRect.line.red.on {color:#ffffff; border-color:#e34140; background-color:#e34140 !important;} .cl_labelColorRect.line.blue.on {color:#ffffff; border-color:#00bcd5; background-color:#00bcd5 !important;} .cl_labelColorRect.line.purple.on {color:#ffffff; border-color:#a33fef; background-color:#a33fef !important;} .cl_labelColorRect.line.orange.on {color:#ffffff; border-color:#ff5803; background-color:#ff5803 !important;} /*결제 페이지 선택용 뱃지*/ .cl_badgeColorRect {display:inline-block; width:60px; height:24px; line-height:24px; font-size:12px; color:#ffffff; text-align:center; border-radius:4px; margin-right:4px; background-color:#797979;} .cl_badgeColorRect.red {background-color:#e34140;} .cl_badgeColorRect.blue {background-color:#00bcd5;} .cl_badgeColorRect.purple {background-color:#a33fef;} .cl_badgeColorRect.orange {background-color:#ff5803;} .cl_badgeColorRect.off {background-color:#797979 !important;} .cl_badgeColorRect:last-child {margin-right:0;} /* *** 좋아요 */ .cl_favorCell {color:#bfbfbf; cursor:pointer;} .cl_favorCell i {font-size:24px;} .cl_favorCell .offIcon {display:block;} .cl_favorCell .onIcon {display:none;} .cl_favorCell.on {color:#00bcd5;} .cl_favorCell.on .offIcon {display:none;} .cl_favorCell.on .onIcon {display:block;} /* *** 전체보기 버튼 */ .cl_btnViewAll {font-size:14px; color:#5988AA !important; font-family: PretendardSB; cursor:pointer;} /* *** 실시간 레이아웃 */ .cl_newInfo {display: flex; flex-direction: column;gap: 30px; text-align: center; padding: 35px 20px 25px 20px;border: 1px solid #D9D9D9; width: calc(100% / 2); background-color: #fff;} .cl_newInfo .newInfoTit {font-family: "PretendardSB"; color: #728499; font-size: 18px; margin-bottom: 10px;} .cl_newInfo .newInfoNum {font-family: "PretendardSB"; color: #111; font-size: 34px;} .cl_newInfo .newInfoBox {display: flex; align-items: center; justify-content: center; width: 100%; font-family: "PretendardR"; font-size: 16px; color: #000; gap: 5px; background: #F2F7FA; border-radius: 10px; padding: 15px 0;} .cl_newInfo .newInfoBox .newInfoAll {font-family: "PretendardB";} /* *** 실시간 방문자 레이아웃 */ .cl_todayGraph {display: flex; flex-direction: column; gap: 25px; width: 100%; border: 1px solid #D9D9D9; background: #FFF; padding: 25px 20px; box-sizing: border-box;} .cl_todayGraph .graphTit {font-family: "PretendardSB"; font-size: 18px; color: #111;} .cl_todayGraph .graphCont {width: 100%; height: 324px; background: #F4FAFF;} /* *** 이벤트 리스트 레이아웃 */ .cl_eventList {display: flex; flex-direction: column; width: 100%;} .cl_eventList .eventImg {width: 100%; height: 230px; background: #EFEFEF; } .cl_eventList .eventImg img {object-fit: cover; width:100%; height:100%;} .cl_eventList .eventDesc {padding: 20px; border: 1px solid #D9D9D9; border-top: 0;} .cl_eventList .eventDesc .eventListTit {font-family: "PretendardSB"; font-size: 18px; color: #111; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom: 10px;} .cl_eventList .eventDesc .eventListDate {font-family: "PretendardM"; font-size: 16px; color: #728499; margin-bottom: 25px;} .cl_eventList .eventDesc .eventListObj {font-family: "PretendardM"; font-size: 16px; color: #494949;} /* *** 검색 결과 건수 */ .cl_searchCountArea {font-size:34px; color:#000000; font-family:PretendardM; text-align:center; padding:40px 0; border-bottom:solid 1px #D9D9D9; margin-bottom:50px;} .cl_searchCountArea .highlight {color:#17A2E2;} /* *** 게시물 없을때 */ .cl_emptyWrap {text-align: center; padding: 74px 0 !important; box-sizing: border-box;} .cl_emptyWrap .imgArea {display: inline-block; margin-bottom: 10px;} .cl_emptyWrap .imgArea img {width: 100%;} .cl_emptyWrap .textArea{color: #A1A1A1; font-family:PretendardM; } /* *** 프로그래스 */ .cl_loading.on::after{content: ""; width: 18px; height: 18px; margin-left: 5px; background: url("/app/layout/web/images/icon_progress.png") no-repeat top / 100% auto; animation: rotateIcon 2s linear infinite;} @keyframes rotateIcon { 100% { transform: rotate(360deg) } } /* *** 회원만 이용가능 박스 */ .cl_memberOnlyBox {display:flex; align-items:center; justify-content: center; flex-direction: column; height:calc(100vh - 700px); min-height:400px; text-align: center; margin-top: 25px; padding: 60px 0; box-sizing: border-box; background-color: #F2F7FA;} .cl_memberOnlyBox .boxArea .imgArea{width: 65px; height: 65px; display: inline-block; margin-bottom: 20px;} .cl_memberOnlyBox .boxArea .imgArea img{width: 100%;} .cl_memberOnlyBox .boxArea .title {color: #000; font-size: 22px; font-family: "PretendardM"; margin-bottom: 15px;} .cl_memberOnlyBox .boxArea .text {color: #728499; font-size: 18px; font-family: "PretendardSB";} /* *** 답변 대기중 박스 */ .cl_waitingForReply {text-align: center; padding: 50px 0; box-sizing: border-box; background-color: #F2F7FA;} .cl_waitingForReply .boxArea .imgArea{width: 40px; height: 40px; display: inline-block; margin-bottom: 20px;} .cl_waitingForReply .boxArea .imgArea img{width: 100%;} .cl_waitingForReply .boxArea .text {color: #728499; font-size: 16px; font-family: "PretendardM";} .cl_waitingForReply .link{color: #17A2E2; font-size: 16px; font-family: "PretendardM";border-bottom: 1px solid #17A2E2;} /* *** 지도 리스트 */ .cl_MapWrap .mapViewWrap {display: flex; align-items: start; gap: 10px; height: 650px;} .cl_MapWrap .mapList {width: 440px;height: 100%;padding-left: 0;box-sizing: border-box;background-color: #F8F8F8; } .cl_MapWrap .contentHWrap {position: relative; } .cl_MapWrap .recruitListWrapper {height: 100%;padding: 20px;box-sizing: border-box;} .cl_MapWrap .recruitListWrapper ul {padding-left: 0; } .cl_MapWrap .searchbarWrap {position: relative;} .cl_MapWrap .searchbar {display: flex; justify-content: space-between; padding: 10px 15px; border-radius: 5px;border: 2px solid #00BCD5; box-sizing: border-box; background-color: #fff;} .cl_MapWrap .searchbarWrap .searchbarCont {position: relative;} .cl_MapWrap .searchbarInnerWrap {display: flex; align-items: center; gap: 30px; width: 100%;} .cl_MapWrap .searchClk{cursor: pointer;} .cl_MapWrap .searchEnter {height: 100%; flex: 1;} .cl_MapWrap .searchEnter input{font-family: "PretendardM"; font-size: 18px; color: #111; width: 100%; height: 100%;} .cl_MapWrap .searchEnter input::placeholder{font-family: "PretendardM"; color: #ADBCC3; font-size: 18px; color: #ADBCC3;} .cl_MapWrap .badgeGuideWrap{max-width: 152px; width: 100%; position: absolute; top: 15px; left: 15px; z-index: 100;border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 4px 4px 2px 0;} .cl_MapWrap .badgeGuideWrap .btnGuide {color: #fff; font-size: 14px; font-family: "PretendardM"; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; box-sizing: border-box; background-color: #17A2E2; cursor: pointer;} .cl_MapWrap .badgeGuideWrap .btnGuide .imgArrow{transform: rotate(180deg);} .cl_MapWrap .badgeGuideWrap.on .btnGuide {border-radius: 10px 10px 0 0;} .cl_MapWrap .badgeGuideWrap.on .btnGuide .imgArrow{transform: rotate(0);} .cl_MapWrap .badgeGuideWrap .badgeGuideList {display: none; margin: 0; border: 1.5px solid #17A2E2; border-radius: 0 0 10px 10px; padding: 10px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.9);} .cl_MapWrap .badgeGuideWrap.on .badgeGuideList {display: block;} .cl_MapWrap .badgeGuideWrap .badgeGuideList li {display: flex; align-items: center; gap: 4px;} .cl_MapWrap .badgeGuideWrap .badgeGuideList li:not(:last-child){margin-bottom: 8px;} .cl_MapWrap .badgeGuideWrap .badgeGuideList li .imgArea{width: 19px; height: 24px;} .cl_MapWrap .badgeGuideWrap .badgeGuideList li .imgArea img{width: 100%;} .cl_MapWrap .badgeGuideWrap .badgeGuideList li .title{color: #111; font-size: 14px;} .cl_MapWrap .mapSectionWrap {display: flex; flex-direction: column; gap: 30px; padding-bottom: 70px;} /* *** 리스트 스타일 */ .listStyle p {display: flex;align-items: center;line-height: 2; } .listStyle p::before {content: "";display: inline-block;width: 6px;height: 6px;margin-right: 10px;border-radius: 50%;background-color: #595959; } /* *** 홈화면 배너 */ /*#mainPage .cl_homeFullBanner {margin-top:0;margin-bottom:0;}*/ /*.uniqueSupporters + .cl_homeFullBanner {margin-top:50px; margin-bottom: 0;}*/ /*.cl_homeFullBanner {margin-bottom: 50px;}*/ /*.cl_homeFullBanner img {display:block;}*/ /*.cl_homeFullBanner + .searchListArea {margin-top: 52px;}*/ .cl_homeFullBanner a {display: block;} .cl_homeFullBanner a img{object-fit: contain;width: 100%;height: 100%;} /* 일반 구인 글 내 상품 배너*/ .cl_productListBanner {margin-top: 35px;margin-bottom: 35px;} /* *** 배너 템플릿 */ .cl_bannerTemplate {margin-top:50px; margin-bottom:50px;} .cl_bannerTemplate .contentWrap{min-height: 200px; display: flex; align-items: center; padding: 20px 30px; box-sizing: border-box; } .cl_bannerTemplate .contentWrap .leftWrap { position: relative; width: 80%; min-width: 1000px; display: flex; flex-direction: column; justify-content: center; padding-right: 33px; box-sizing: border-box;} .cl_bannerTemplate .contentWrap .leftWrap::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; width: 3px; height: calc(100% - 25px)} .cl_bannerTemplate .contentWrap .leftWrap .title{font-size: 34px; font-family: "GmarketSansM"; margin-bottom: 8px;} .cl_bannerTemplate .contentWrap .leftWrap .desc{font-size: 22px; font-family: "GmarketSansM"; line-height: 1.4; /*min-height: 64px;*/ margin-bottom: 12px;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .cl_bannerTemplate .contentWrap .leftWrap .keywordWrap {display: flex; align-items: center; gap: 8px;} .cl_bannerTemplate .contentWrap .leftWrap .keyword{font-size: 15px; font-family: "GmarketSansM"; line-height: 1.2; padding: 9px 12px 5px 12px; box-sizing: border-box; border-radius: 40px;} .cl_bannerTemplate .contentWrap .rightWrap{width: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 14px 0 14px 33px; box-sizing: border-box;} .cl_bannerTemplate .contentWrap .rightWrap .title{font-size: 18px;font-family: "GmarketSansB"; margin-bottom: 15px;} .cl_bannerTemplate .contentWrap .rightWrap .keywordWrap {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px;} .cl_bannerTemplate .contentWrap .rightWrap .keyword{font-size: 14px; font-family: "GmarketSansM"; line-height: 1.2; display: flex; align-items: center; justify-content: center; padding: 6px 10px 2px 10px; box-sizing: border-box; border-radius: 100px; background-color: #fff;} /* type1 */ .cl_bannerTemplate.type1 .contentWrap{background-color: #454272;} .cl_bannerTemplate.type1 .contentWrap .leftWrap, .cl_bannerTemplate.type1 .contentWrap .rightWrap {color: #fff;} .cl_bannerTemplate.type1 .contentWrap .leftWrap::after{background-color: rgba(255, 255, 255, 0.1);} .cl_bannerTemplate.type1 .contentWrap .leftWrap .keyword{background-color: #E27B6F;} .cl_bannerTemplate.type1 .contentWrap .rightWrap .title{color: #FFF3BF;} .cl_bannerTemplate.type1 .contentWrap .rightWrap .keyword{color: #001260;} /* type2 */ .cl_bannerTemplate.type2 .contentWrap{background-color: #F1F0D7;} .cl_bannerTemplate.type2 .contentWrap .leftWrap, .cl_bannerTemplate.type2 .contentWrap .rightWrap {color: #252525;} .cl_bannerTemplate.type2 .contentWrap .leftWrap::after{background-color: rgba(37, 37, 37, 0.1);} .cl_bannerTemplate.type2 .contentWrap .leftWrap .keyword{color: #fff; background-color: #2A94B2;} .cl_bannerTemplate.type2 .contentWrap .rightWrap .title{color: #E96050;} .cl_bannerTemplate.type2 .contentWrap .rightWrap .keyword{color: #001260; border: 1px solid rgba(37, 37, 37, 0.3);} /* *** 헬퍼론 배너 */ .hlBanner {margin-bottom: 50px;} /* *** 상품 노출형태 */ .cl_productCardWrap {display: flex; gap: 30px; margin-top: 40px; padding: 25px; box-sizing: border-box; border-radius: 15px; background-color: #F2F7FA;} .cl_productCardWrap .productArea {min-width: 700px; height: auto; padding:30px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background-color: #fff; box-shadow: 4px 4px 15px 0 rgba(92, 92, 92, 0.16);} .cl_productCardWrap .productArea.noPadding {padding:0;} .cl_productCardWrap .productArea .cl_uniqueList .photoCell{height: 356px;} .cl_productCardWrap .infoArea {height: auto; padding: 30px; box-sizing: border-box; border-radius: 15px; background-color: #fff; box-shadow: 4px 4px 15px 0 rgba(92, 92, 92, 0.16);} .cl_productCardWrap .infoArea.noPadding {padding:0;} .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1{padding: 0 !important;} .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1:last-of-type {margin-bottom: 0 !important;} .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1 .boxTitle{font-size: 18px; font-family: "PretendardSB"; margin-bottom: 15px;} .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1 table.rowType td { line-height: 1rem;box-sizing: border-box;} .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1 table.rowType td:nth-child(odd) {min-width: 130px; width: 130px !important; padding: 11px 0 !important; } .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1 table.rowType td:nth-child(even) {color:#111; font-family: "PretendardSB" !important; width: auto !important; padding: 11px 15px !important; } .cl_productCardWrap .infoArea .cl_infoBoxBasic.type1 table.rowType.sizeL td:nth-child(odd) {min-width: 170px; width: 170px !important; padding: 11px 0 !important; } .cl_productCardWrap .infoArea .cPoint {color: #17A2E2 !important;} /* * 본인인증창 */ #certificatedPopup .guideText {margin-bottom:10px;} #certificatedPopup .guideText .strong {font-weight: bold; color:#17A2E2; font-size:18px; font-family: "PretendardM";} #certificatedPopup .guideText .certificateNoGuideButton {background-color:#17A2E2; color:#fff; padding:3px 5px; border-radius:3px; font-size:16px; font-family: "PretendardM"; cursor:pointer;} #certificatedPopup .container { position:relative; border:1px solid #e2e2e2; border-radius:3px; display:none; max-width: 100%; background: #fff; padding: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 15px; } #certificatedPopup .close-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 24px; font-weight: bold; color: #888; cursor: pointer; transition: color 0.2s; } #certificatedPopup .close-btn:hover { color: #d13434; } #certificatedPopup h2 { font-size: 1.3em; margin-top: 10px; color: #555; } #certificatedPopup ul { padding-left: 20px; line-height: 1.6; } #certificatedPopup a { color: #0077cc; text-decoration: none; } #certificatedPopup a:hover { text-decoration: underline; } #certificatedPopup .number { font-weight: bold; color: #d13434; } #certificatedPopup .highlight { background-color: #f2f2f2; padding: 6px 10px; border-radius: 6px; display: inline-block; margin: 5px 0; } #certificatedPopup .section { margin-bottom: 25px; } /* * 배경 홀짝색 */ .cl_striped.type1 .pageWrap > div:nth-of-type(odd){background-color: #fff !important;} .cl_striped.type1 .pageWrap > div:nth-of-type(even) {background-color: #F8F8F8 !important;} .cl_striped.type1 .pageWrap > div:nth-of-type(even) .noticeBoardArea .boardBox{background-color: #fff;} .cl_striped.type2 .pageWrap > div:nth-of-type(n+2):nth-of-type(odd) {background-color: #F8F8F8 !important;} .cl_striped.type2 .pageWrap > div:nth-of-type(2).mpSectionWrap {padding-top: 0 !important;} .cl_striped.type2 .pageWrap > div:nth-of-type(n+2):nth-of-type(odd) .noticeBoardArea .boardBox{background-color: #fff;} .cl_striped.type2 .pageWrap > div:nth-of-type(n+2):nth-of-type(odd) .cl_emptyCustomSiteBox {background-color: #fff;} .cl_striped.type3 .pageWrap > div:nth-of-type(even){background-color: #F8F8F8 !important;} .cl_striped.type3 .pageWrap > div:first-of-type.mpSectionWrap {padding-top: 0 !important;} /* * 상품 섹션안에 상품이 없을때 */ .cl_emptyProductBox {display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #D9D9D9; border-radius: 10px;} .cl_emptyProductBox .textArea {text-align: center; margin-bottom: 30px;} .cl_emptyProductBox .textArea .mainText{color: #595959;font-size: 22px; font-family: "PretendardSB"; margin-bottom: 10px; word-break: keep-all;} .cl_emptyProductBox .textArea .subText{color: #A1A1A1; font-size: 16px; font-family: "PretendardM"; line-height:1.375; word-break: keep-all;} .cl_emptyProductBox .btnArea a{color: #595959; font-size: 16px; font-family: "PretendardSB"; border-radius: 5px; display: block; padding: 10px 15px; box-sizing: border-box; background-color: #F2F7FA;} .cl_emptyProductBox .btnArea a::after{content: ""; display: inline-block;width: 7px; height: 12px; margin-left: 9px; background: url("/app/layout/web/images/btn_move_arrow.png") no-repeat top / 100% auto;} .cl_uniqueList.cl_emptyProductBox {height: 488px;} .cl_supportersFocusList.cl_emptyProductBox {height: 442px;} .cl_superiorList.cl_emptyProductBox {height: 442px;} /* * 맞춤현장 설정된 상품이 없을때 */ .cl_emptyCustomSiteBox{display: flex; align-items: center; justify-content: space-between; margin-top: 60px !important; border-radius: 10px; border: 1px solid #D9D9D9; padding: 61px 60px; box-sizing: border-box; background-color: #fff;} .cl_emptyCustomSiteBox .leftArea{display: flex; align-items: center;} .cl_emptyCustomSiteBox .leftArea .imgArea{width: 142px; margin-right: 55px;} .cl_emptyCustomSiteBox .leftArea .imgArea img{width: 100%;} .cl_emptyCustomSiteBox .leftArea .textArea{display: flex; flex-direction: column;gap:20px;} .cl_emptyCustomSiteBox .leftArea .textArea .title{color: #595959; font-size: 24px;font-family: "PretendardSB"; } .cl_emptyCustomSiteBox .leftArea .textArea .text{color: #728499; font-size: 18px;font-family: "PretendardSB"; line-height: 1.33;} .cl_emptyCustomSiteBox .btnArea a{color: #FFFFFF; font-size: 18px; font-family: "PretendardB"; border: 1px solid #17A2E2; border-radius: 5px; display: block; padding: 11px 25px; box-sizing: border-box; background-color:#17A2E2;} .cl_emptyCustomSiteBox .btnArea a::after{content: ""; display: inline-block;width: 7px; height: 12px; margin-left: 13px; background: url("/app/layout/web/images/btn_move_arrow.png") no-repeat top / 100% auto;filter: brightness(100);} /* **************************************** 내 맞춤현장 설정 *************************************** */ .cl_boxWrap {display: flex; align-items: center; border-radius: 10px; border: 1px solid #D9D9D9;} .cl_boxWrap .textWrap{min-width: 400px; width: 400px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px 0 0 10px; background-color: #F2F7FA;} .cl_boxWrap .textWrap .textArea .title{color: #111111; font-size: 24px; font-family: "PretendardSB"; margin-bottom: 25px;text-align: center;} .cl_boxWrap .textWrap .textArea .text{color: #728499; font-size: 18px; font-family: "PretendardSB"; margin-bottom: 30px; text-align: center;} .cl_boxWrap .textWrap .keywordArea {max-width: 300px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px;} .cl_boxWrap .textWrap .keywordArea .keyword{color: #FFFFFF; font-size: 14px; font-family: "PretendardM"; line-height: 1.42; border-radius: 40px; padding: 4px 10px; box-sizing: border-box;} .cl_boxWrap .textWrap .keywordArea .keyword.bgType1 {background-color: #4F8AFF;} .cl_boxWrap .textWrap .keywordArea .keyword.bgType2 {background-color: #66ADFF;} .cl_boxWrap .textWrap .keywordArea .keyword.bgType3 {background-color: #6971FF;} .cl_boxWrap .textWrap .keywordArea .keyword.bgType4 {background-color: #8370FF;} .cl_boxWrap .textWrap .keywordArea .keyword.bgType5 {background-color: #AA88FF;} .cl_boxWrap .textWrap .btnArea {margin-top: 40px;} .cl_boxWrap .textWrap .btnArea a{color: #17A2E2; font-size: 18px; font-family: "PretendardB"; border: 1px solid #17A2E2; border-radius: 5px; display: block; padding: 11px 25px; box-sizing: border-box; background-color: #fff;} .cl_boxWrap .textWrap .btnArea a::after{content: ""; display: inline-block;width: 7px; height: 12px; margin-left: 13px; background: url("/app/layout/web/images/btn_move_arrow_sky.png") no-repeat top / 100% auto;} .cl_boxWrap .boardWrap {height: 100%; border-radius: 0 10px 10px 0; padding: 20px 30px 30px 30px; box-sizing: border-box;background-color: #fff;} .cl_boxWrap .boardWrap .boardHeader{position: relative; display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid #D9D9D9; padding-bottom: 10px; box-sizing: border-box;} .cl_boxWrap .boardWrap .boardHeader .swiper-pagination {position: static; height: auto !important; display: flex; align-items: center; gap: 8px; margin-right: 20px;} .cl_boxWrap .boardWrap .boardHeader .swiper-pagination .swiper-pagination-bullet{width: 8px; height: 8px; margin: 0; background-color: #BCBCBC;} .cl_boxWrap .boardWrap .boardHeader .swiper-pagination .swiper-pagination-bullet-active{width: 30px; border-radius: 50px; background-color: #00BCD5;} .cl_boxWrap .boardWrap .boardHeader .cl_slidePageNum .btnSlidePrev{margin-right: 20px;} .cl_boxWrap .boardWrap .boardHeader .cl_slidePageNum .btnSlideNext{margin-left: 20px;} .cl_boxWrap .boardWrap .boardHeader .cl_slidePageNum .pageNum {min-width: auto;font-family: "PretendardM";} .cl_boxWrap .boardWrap .boardHeader .cl_slidePageNum .pageNum .current{color: #00BCD5;} .cl_boxWrap .boardWrap .boardHeader .btnMore{font-size:14px; color:#5988AA; font-family: "PretendardSB";} .cl_boxWrap .boardWrap .boardBody .boardSwiper {overflow: hidden;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list:not(:last-of-type) {border-bottom: 1px solid #D9D9D9;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list{display: block; padding: 20px 0; box-sizing: border-box;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .titleText {margin-bottom: 10px;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .titleText .mainText{color: #111111; font-size:20px; font-family:"PretendardSB"; line-height: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .infoText{font-size:16px; color:#728499; font-family: "PretendardM";line-height: 1; margin-bottom:10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .labelWrap {display: flex; align-items: center; gap: 15px;} .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .labelWrap .textLabel {font-size:16px; color:#418BCA; font-family: "PretendardM"; line-height: 1; } .cl_boxWrap .boardWrap .boardBody .swiper-slide .list .labelWrap .textLabel:not(:last-of-type){border-right: 1px solid #AEBDCF; padding-right: 10px; box-sizing: border-box;} .cl_boxWrap.customSite {height: 400px; margin-top: 50px !important;} .cl_boxWrap.customSite .boardWrap {width: 880px;} .cl_boxWrap.customSite .boardWrap .boardBody a.list {position:relative;} .cl_boxWrap.customSite .boardWrap .boardBody a.list .cl_favorCell {position:absolute; top:10px; right:10px;} .cl_boxWrap.customSite .noCustomSite {display:flex; flex-direction:column; justify-content: center; align-items: center; width:100%; height:300px; text-align: center;} .cl_boxWrap.customSite .noCustomSite .text {margin-top:15px; font-size:16px; color: #b7b9bb;} .contentWrap + .cl_boxWrap.noticeNews {margin-top: 60px;} .cl_boxWrap.noticeNews {height: 300px; margin-bottom: 50px !important;} .cl_boxWrap.noticeNews .textWrap{min-width: 413px; width: 413px;border-right: 1px solid #DBDFEB;} .cl_boxWrap.noticeNews .textWrap .title {position: relative; font-size: 32px; margin-bottom: 15px;} .cl_boxWrap.noticeNews .textWrap .title::before{content: ""; position: absolute; top: -40px; left: -80px; width: 80px; height: 77px; background: url("/app/layout/web/images/title_news.png") no-repeat top / 100% auto;} .cl_boxWrap.noticeNews .textWrap .textArea .text {margin-bottom: 0;} .cl_boxWrap.noticeNews .textWrap .btnArea {margin-top: 30px;} .cl_boxWrap.noticeNews .textWrap .btnArea a{color: #6971FF; border: 1px solid #6971FF;} .cl_boxWrap.noticeNews .textWrap .btnArea a::after{ background-image: url("/app/layout/web/images/btn_move_arrow_purple.png");} .cl_boxWrap.noticeNews .boardWrap {width: 866px; padding: 25px 30px 25px 30px;} .cl_boxWrap.noticeNews .boardWrap .boardListWrap .boardList{display: flex; align-items: center; justify-content: space-between; padding: 15px 0; box-sizing: border-box;} .cl_boxWrap.noticeNews .boardWrap .boardListWrap .boardList:not(:last-of-type) {border-bottom: 1px solid #D9D9D9;} .cl_boxWrap.noticeNews .boardWrap .boardListWrap .boardList .listContent{color: #111111; font-size: 16px; font-family: "PretendardM"; width: calc(100% - 100px);text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .cl_boxWrap.noticeNews .boardWrap .boardListWrap .boardList .date{color: #728499; font-size: 16px; font-family: "PretendardM";} .cl_boxWrap.noticeNews .boardWrap .boardListWrap .boardList .fixedBadge {display:inline-block; color: #fff; background-color:#6971FF; margin-right:5px; padding:3px 5px; border-radius:3px; font-size: 14px; font-family: "PretendardM";} .cl_badgeRank{position: relative;} .cl_badgeRank::after{content: ""; position: absolute; top: -9px; background-repeat: no-repeat; background-size: 100% auto;} .cl_badgeRank.rank01::after{right: 10px; width: 57px; height: 74px; background-image: url("/app/layout/web/images/badge_rank01.png");} .cl_badgeRank.rank02::after{right: 9px; width: 55px; height: 70px; background-image: url("/app/layout/web/images/badge_rank02.png");} .cl_badgeRank.rank03::after{right: 9px; width: 49px; height: 57px; background-image: url("/app/layout/web/images/badge_rank03.png");}