/*공통*/ #container{background:#f8f8f8;padding-bottom:170px;} .gw-bbs-con{margin:0 auto;width: 1200px;} .more_opt {display: none;position:absolute;top: 45px;right:0;background: #fff;border: 1px solid #ddd;z-index: 100;box-shadow: 70px 70px 130px rgb(39 49 108 / 20%);} .more_opt:before {content: "";position: absolute;top: -8px;right: 13px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #b8bfc4 transparent;} .more_opt:after {content: "";position: absolute;top: -6px;right: 13px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #fff transparent;} .more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:154px;margin:0;color:#666;text-align:left} .more_opt li:last-child {border-bottom:0} .more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#666;text-align: left;} .more_opt li:hover a, .more_opt li:hover button {color:#000} .more_opt li i {float:right;line-height:20px} /* 페이징 */ .pg_wrap {display: flex;align-items: center;place-content: center;font-family: "Outfit", sans-serif; font-weight: 600;} .pg {text-align:center;display: flex;} .pg_page,.pg_current { min-width: 20px;padding: 0 3px;margin: 0 6px;text-align: center;} .pg_page{color:#999 !important;} .pg_current{border-bottom:2px solid #000;} .pg a:focus, .pg a:hover {text-decoration:none} .pg_start {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-start.png') no-repeat 50% 50%;background-size: 100%;} .pg_prev {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-prev.png') no-repeat 50% 50%;background-size: 100%;} .pg_end {text-indent:-999px;overflow:hidden;padding:0;background: url("img/gw-bbs-end.png") no-repeat 50% 50%;background-size: 100%;} .pg_next {text-indent:-999px;overflow:hidden;padding:0;background: url('img/gw-bbs-next.png') no-repeat 50% 50%;background-size: 100%;} /*list*/ #gw-bo-list #gall_ul {display:flex;flex-wrap:wrap;margin:12px -12px 0;padding:0;list-style:none;zoom:1;} #gw-bo-list #gall_ul:after {display:block;visibility:hidden;clear:both;content:""} .gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10 {position:relative;min-height:1px;padding:12px;*padding-left:0;*padding-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0} .gall_row .col-gn-0,.gall_row .col-gn-1 {width:100%} .gall_row .col-gn-2 {width:50%} .gall_row .col-gn-3 {width:33.33333333%} .gall_row .col-gn-4 {width:25%} .gall_row .col-gn-5 {width:20%} .gall_row .col-gn-6 {width:16.66666667%} .gall_row .col-gn-7 {width:14.28571428%} .gall_row .col-gn-8 {width:12.5%} .gall_row .col-gn-9 {width:11.11111111%} .gall_row .col-gn-10 {width:10%} #gw-bo-list .search-container {padding:80px 0;position: relative;width: 700px;margin: 0 auto;display: flex;gap: 15px;} #gw-bo-list .search-container button {position: absolute;right: 17px;top:50%;transform:translateY(-50%);} #gw-bo-list .sch_input {padding:12px 17px;height:55px;border: 2px solid #ddd;border-radius: 5px;background: #fff;} #gw-bo-list .sch_input::placeholder{text-align: left;font-family: "Noto Sans KR", sans-serif; font-weight: 500; color:#666;} #gw-bo-list .sch_input:focus{text-align: left;border-color: #000;} input[type="text"]:not(:focus) {text-align: left;} #bo_cate_on{background: #fff;box-shadow: 0 15px 10px rgba(34, 34, 34, .02);color: var(--main-color);} #bo_cate ul {zoom:1;} #gw-bo-list .btn_bo_user > li {position: relative;} #gw-bo-list .btn_bo_user{place-content: center;align-items:flex-start;} #gw-bo-list .icon-wrap {position: absolute;right: 0;top: 0;font-size: 20px;color: #000;} #gw-bo-list .new_icon {font-size:14px;font-family: "Outfit", sans-serif; font-weight: 600;color: #fff;width: 20px;height: 20px;display: block;text-align: center;line-height: 20px;background: var(--main-color);} #gw-bo-list .icon-wrap .fa-download:before {content: "\eb7c";font-family: xeicon;} #gw-bo-list .icon-wrap .fa-link:before {content: "\e9c0";font-family: xeicon;} #gw-bo-list .fa-lock:before {content: "\e964";font-family: xeicon;} #gw-bo-list .cnt_cmt {color: var(--main-color);} #gw-bo-list .bo-list-wrap {flex-wrap: wrap;} #gw-bo-list .gallery{position:relative;cursor: pointer;} #gw-bo-list .gallery > a {display: block;width: 100%;height: 100%;} #gw-bo-list .gallery .gw-gall-line {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0px solid;transition: all .3s;} #gw-bo-list .gallery .gall_img > a:hover .gw-gall-line{border-width:10px;border-color: var(--main-color);} #gw-bo-list .gallery .gall_con{position:relative;border:1px solid #ddd;box-shadow:0 15px 10px rgba(34, 34, 34, .02);} #gw-bo-list .gallery .gall_img{position:relative;display: block;overflow: hidden;} #gw-bo-list .gallery .gall_img > a {display: block;width: 100%;} #gw-bo-list .gallery .gall_img > a > img {object-fit: cover;width: 100%;height: 100%;} #gw-bo-list .gallery .gall_chk {position: absolute;right: 20px;top: 20px;z-index: 1;} #gw-bo-list .gallery .content {position:relative;padding: 20px;background: #fff;border-top: 1px solid #ddd;min-height:185px;display:flex;flex-direction:column;place-content:center;} #gw-bo-list .gallery .bo_cate_link .sticky02{transition: all .3s;} #gw-bo-list .gallery:hover .bo_cate_link .sticky02{background: var(--main-color);color: #fff;} #gw-bo-list .bo_tit {position:relative;font-size: var(--main-title04);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;} #gw-bo-list .gall_info {border-top: 1px solid #ddd;gap: 5px;flex-wrap: wrap;} #gw-bo-list .gall_info > li{flex-shrink: 0;} #gw-bo-list .gall_info a {color: #666;} #gw-bo-list .gall_info .sv {display: none;} #gw-bo-list .profile_img{display: none;} #gw-bo-list .gw-empty-list{border-top: 2px solid #000;} #gw-bo-list .gw-empty-list {padding: 40px 0;border-bottom: 1px solid #ddd;border-top:2px solid #ddd;} #gw-bo-list .gw-empty-list > h3 {font-size: var(--main-title03);} #gw-bo-list .no_image {background: #ddd;} /*view*/ #gw-bo-v{padding-top: 120px;} #gw-bo-v .profile_img {display: none;} #bo_v_info .profile_info{text-align: center;padding-bottom: 40px;margin-bottom: 40px;border-bottom: 1px solid #ddd;} #bo_v_atc {padding: 0;border: 0;background: none;} #bo_v_con {text-align: center;padding: 24px 0;} /* 에디터가 넣는 인라인 font-family 를 무시하고 본문 전체를 Noto Sans KR 로 강제한다 */ #bo_v_con, #bo_v_con * {font-family: "Noto Sans KR", sans-serif !important;} #bo_v_img {text-align: center;margin: 64px 0;} #bo_v_img img {display: inline-block;margin: 0 auto;} #gw-bo-v .bo_v_nb{padding-top:60px;margin-bottom:60px;align-items:center;border-top: 1px solid #ddd;text-align: center;} #gw-bo-v .bo_v_nb > li > a {display: block;width: 100%;transition: all .3s;text-transform: uppercase;font-size: var(--main-title04);} #gw-bo-v .bo_v_nb > li > .list-btn {display:inline-block;width: 60px;height: 60px;background: #000;color: #fff;position: relative;box-shadow: 0 20px 30px rgba(0, 0, 0, .05);transition: all .3s;} #gw-bo-v .bo_v_nb > li > .list-btn:hover {background: var(--main-color);} #gw-bo-v .bo_v_nb > li > a.disabled-link {color: #ccc;} #gw-bo-v .btn_bo_user {place-content: center;align-items:flex-start;} #bo_v_link .gw-box01 {margin-bottom: 30px;} #bo_v_link .gw-box01 .gw-flex {align-items: center;gap: 10px;} .gw-empty-list {padding: 40px 0;border-bottom: 1px solid #ddd;border-top:2px solid #ddd;} .gw-empty-list > h3 {font-size: var(--main-title03);} #wr_content{background: #fff;} #bo_vc .cmt_contents {background: #fff;} #bo_vc .gw-box02 {border: 2px solid #ddd;margin-bottom: 20px;} #bo_v_sns{place-content: center;} #bo_v_sns > li {width: 40px;height: 40px;line-height:40px;border: 1px solid #ddd;} #bo_v_sns > li > a {display: block;width: 100%;height: 100%;color: #666;} #bo_v_sns > li > a.disabled {color: #ccc;} #bo_v_act {place-content: center;} #bo_vc_w .bo_vc_w_wr input{background: #fff;} #gw-bo-v .bo_v_nb > li > a{position: relative;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:before {content: "";display: block;width: 100%;height: 3px;background: var(--main-color);position: absolute;top: -80px;opacity: 0;transition: all .3s;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:hover:before{opacity: 1;} #gw-bo-v .bo_v_nb > li > .prev > i {transition: all .3s;} #gw-bo-v .bo_v_nb > li > .prev:hover{color: var(--main-color);} #gw-bo-v .bo_v_nb > li > .prev:hover > i {transform: translateX(-10px);} #gw-bo-v .bo_v_nb > li > .next > i {transition: all .3s;} #gw-bo-v .bo_v_nb > li > .next:hover{color: var(--main-color);} #gw-bo-v .bo_v_nb > li > .next:hover > i {transform: translateX(10px);} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a.disabled-link:before {opacity: 0;} #gw-bo-v .bo_v_nb > li > .disabled-link:hover > i {transform: translateX(0);} /* 게시판 쓰기 */ #char_count_desc {display:block;margin:0 0 5px;padding:0} #char_count_wrap {margin:5px 0 0;text-align:right} #char_count {font-weight:bold} #autosave_wrapper {position:relative} #autosave_wrapper .gw-btn03 {position: absolute;right: 17px;top: 50%;transform: translateY(-50%);} #autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #ddd;background:#fff;box-shadow:70px 70px 130px rgb(39 49 108 / 20%);} #autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent} #autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent} html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */ #autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden} #autosave_pop div {text-align:center;margin:0 !important} #autosave_pop button {margin:0;padding:0;border:0} #autosave_pop ul {padding:15px;border-top:1px solid #ddd;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #ddd} #autosave_pop li {padding:10px;border-bottom:1px solid #fff;background:#f3f3f3;zoom:1} #autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""} #autosave_pop a {display:block;float:left} #autosave_pop span {display:block;float:right;color:#999;font-family: 'Poppins_R', sans-serif;} .autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em} .autosave_close:hover {background:#f3f3f3;color:#3597d9} .autosave_content {display:none} .autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px} /*글쓰기*/ #gw-bo-w{padding-top: 120px;width: 1000px;} #gw-bo-w > h2 {padding-bottom: 40px;margin-bottom: 20px;border-bottom: 2px solid #000;} #gw-bo-w > form > div:not(:last-child) {border-bottom: 1px solid #ddd;} #gw-bo-w > form input {margin-top:10px;background: #fff;} #gw-bo-w .file-name {background: #fff;width: calc(80% - 3px);} #gw-bo-w .file-name .num {border-bottom: 1px solid #000;margin-left: 10px;} #gw-bo-w .gw-btn-wrap {margin: 0 auto;} #gw-bo-w .file_del {position: absolute;right: 17px;top: 50%;transform: translateY(-50%);} .btn_cke_sc{font-size:14px;} .cke_sc_def{font-size:14px;} @media screen and (max-width:1280px){ #container{padding-bottom:120px;} .gw-bbs-con{width: 100%;padding: 0 40px;} /*write*/ #gw-bo-w{width: 100%;} } @media screen and (max-width:1024px){ .gw-bbs-con{width: 100%;padding: 0 20px;} /*list*/ #gw-bo-list .search-container{padding: 60px 0;width:100%;} #gw-bo-list .gallery .gw-gall-line{display: none;} } @media screen and (max-width:768px){ #container{padding-bottom:60px;} /*list*/ .gall_row .col-gn-3 {width:50%} .gall_row .col-gn-4 {width:50%} .gall_row .col-gn-5 {width:50%} .gall_row .col-gn-6 {width:50%} .gall_row .col-gn-7 {width:50%} .gall_row .col-gn-8 {width:50%} .gall_row .col-gn-9 {width:50%} .gall_row .col-gn-10 {width:50%} /*write*/ #gw-bo-w{padding-top: 60px;} /*view*/ #gw-bo-v{padding-top: 60px;} } @media screen and (max-width:576px){ /*공통*/ .pg_page, .pg_current{height: 25px;} /*말풍선*/ #gw-bo-list .sv_wrap .sv{right: auto;} #gw-bo-list .sv_wrap .sv:before {left: 15px;right: auto;} #gw-bo-list .sv_wrap .sv:after {left: 15px;right: auto;} /*list*/ #gw-bo-list .search-container{padding: 40px 0;width: 100%;flex-wrap: wrap;} .gall_row .col-gn-0, .gall_row .col-gn-1, .gall_row .col-gn-2, .gall_row .col-gn-3, .gall_row .col-gn-4, .gall_row .col-gn-5, .gall_row .col-gn-6, .gall_row .col-gn-7, .gall_row .col-gn-8, .gall_row .col-gn-9, .gall_row .col-gn-10{padding-left: 0;padding-right: 0;} .gall_row .col-gn-2 {width:100%} .gall_row .col-gn-3 {width:100%} .gall_row .col-gn-4 {width:100%} .gall_row .col-gn-5 {width:100%} .gall_row .col-gn-6 {width:100%} .gall_row .col-gn-7 {width:100%} .gall_row .col-gn-8 {width:100%} .gall_row .col-gn-9 {width:100%} .gall_row .col-gn-10 {width:100%} #gw-bo-list .btn_bo_user{width: 100%;flex-direction:column;} #gw-bo-list .btn_bo_user > li{flex: 1;font-size: 12px;} #gw-bo-list #gall_ul{margin: 0;} #gw-bo-list .gallery .gall_img{height: 47vw;} #gw-bo-list .gallery .gall_img > a > img{height: 47vw !important;} #gw-bo-list .gallery .content{min-height:auto;} /*write*/ #gw-bo-w > form > div {flex-direction: column;} #gw-bo-w > form > div .gw-w-15 {width: 100% !important;margin-bottom: 10px;} #gw-bo-w > form > div .gw-w-85 {width: 100% !important;flex-wrap: wrap;} #gw-bo-w > form > div .gw-w-85 > li {width: 40%;} #gw-bo-w > form > div > .gw-w-50:first-child {border-bottom: 1px solid #ddd;padding-bottom: 10px;} #gw-bo-w .file-name{width: calc(75% - 3px);} .gw-file-input-button{width: 25% !important;} .btn_cke_sc{font-size:12px;} .cke_sc_def{font-size:12px;} .cke_sc_def dd{text-align:center;} /*view*/ #bo_vc .cm_wrap > .gw-flex-btw {flex-direction: column;gap: 10px;text-align:center;} #bo_vc .cmt_contents{margin-bottom: 0 !important;} #gw-bo-v .bo_v_nb{margin-bottom: 30px;} #gw-bo-v .gw-btn0102 {width: 100% !important;} #gw-bo-v .btn_bo_user{width: 100%;flex-direction:column;} #gw-bo-v .btn_bo_user > li{flex: 1;font-size: 12px;} #bo_v_info .profile_info{padding-bottom: 20px;margin-bottom: 20px;font-size: 12px;} #gw-bo-v .bo_v_nb {padding-top: 30px;} #gw-bo-v .bo_v_nb > li:not(:nth-of-type(2)) >a:before{top: -50px;} .more_opt li{width:122px;} } @media screen and (max-width:375px){ /*list*/ .pg_page, .pg_current{margin:0 3px;} /*view*/ #gw-bo-v .bo_v_nb > li > .list-btn{width:50px;height:50px;} } @media screen and (max-width:320px) { .gw-none-320{display: none;} .gw-file-input-button{font-size: 12px;} } /****************************************************************** 시공분야 카드 (bcm_service) 홈의 시공분야 카드와 같은 모양. 이미지 1:1, 3열, 메타정보 없음. 컬러 토큰은 theme/busanbcm/css/brand.css 에 정의되어 있다. ******************************************************************/ .bcm-board-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .bcm-board-item { display: flex; position: relative; } /* 관리자 리스트 체크박스 (선택삭제/복사/이동) — 카드 좌상단 오버레이 (bcm_review 와 동일) */ .bcm-board-chk { position: absolute; top: 14px; left: 14px; z-index: 3; margin: 0; line-height: 1; } .bcm-board-chk .check-label { display: inline-block; margin: 0; cursor: pointer; } .bcm-board-chk .check-label:before { margin-right: 0; } .bcm-board-link { display: flex; flex-direction: column; overflow: hidden; width: 100%; border: 1px solid #e8e8e8; background: #fff; transition: border-color .3s, box-shadow .3s, transform .3s; } .bcm-board-link:hover { box-shadow: 0 14px 34px rgba(46, 49, 99, .14); transform: translateY(-6px); } /* 썸네일 — 1:1 */ .bcm-board-thumb { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--gray-bg); } .bcm-board-thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1); } .bcm-board-link:hover .bcm-board-thumb > img { transform: scale(1.06); } /* 제목도 호버에 반응한다 */ .bcm-board-link:hover .bcm-board-title { color: var(--cta-orange); } .bcm-board-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--accent-bg); color: var(--brand-orange); } /* 본문 */ .bcm-board-body { flex: 1 1 auto; padding: 24px 16px; } .bcm-board-cate { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 4px; background: var(--accent-bg); color: var(--cta-orange); font-size: 13px; font-weight: 700; } .bcm-board-title { margin-bottom: 0; color: var(--navy); font-size: 18px; line-height: 1.4; transition: color .3s; } .bcm-board-desc { color: #555; font-size: 16px; line-height: 1.6; } @media screen and (max-width: 1024px) { .bcm-board-list { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media screen and (max-width: 768px) { .bcm-board-list { grid-template-columns: 1fr; } } /* ---------- 상세페이지 상품형 CTA (전화하기 / 문의하기) ---------- */ .bcm-svc-cta { display: flex; justify-content: center; gap: 12px; margin: 44px 0; } .bcm-svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 200px; min-height: 56px; padding: 16px 32px; border-radius: 0; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 17px; transition: background .3s, color .3s, border-color .3s; } .bcm-svc-btn.is-tel { background: var(--brand-orange, #e58058); color: #fff; } .bcm-svc-btn.is-tel:hover { background: var(--cta-orange, #b85228); color: #fff; } .bcm-svc-btn.is-quote { border: 1px solid var(--navy, #2e3163); background: #fff; color: var(--navy, #2e3163); } .bcm-svc-btn.is-quote:hover { background: var(--navy, #2e3163); color: #fff; } @media screen and (max-width: 640px) { .bcm-svc-cta { flex-direction: column; align-items: stretch; } .bcm-svc-btn { width: 100%; min-width: 0; } } /* ---------- 상세 하단 네비 (이전 / 목록 / 다음) — 새 형식 ---------- */ .bcm-svc-nav { display: flex; align-items: stretch; gap: 10px; margin: 50px 0; } .bcm-svc-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 24px; border: 1px solid #e2e2e2; background: #fff; color: var(--navy, #2e3163); font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 16px; transition: background .3s, color .3s, border-color .3s; } .bcm-svc-nav-btn.is-prev, .bcm-svc-nav-btn.is-next { flex: 1 1 0; } .bcm-svc-nav-btn > i { font-size: 18px; transition: transform .3s; } /* 이전/다음: 흰 버튼 → 호버 시 남색 채움, 화살표 이동 */ .bcm-svc-nav-btn.is-prev:not(.is-disabled):hover, .bcm-svc-nav-btn.is-next:not(.is-disabled):hover { border-color: var(--navy, #2e3163); background: var(--navy, #2e3163); color: #fff; } .bcm-svc-nav-btn.is-prev:not(.is-disabled):hover > i { transform: translateX(-6px); } .bcm-svc-nav-btn.is-next:not(.is-disabled):hover > i { transform: translateX(6px); } /* 목록(메뉴) 버튼: 남색 채움 그리드 아이콘 → 호버 시 포인트 컬러 */ .bcm-svc-nav-btn.is-list { flex: 0 0 auto; padding: 0 30px; border-color: var(--navy, #2e3163); background: var(--navy, #2e3163); color: #fff; } .bcm-svc-nav-btn.is-list:hover { border-color: var(--brand-orange, #e58058); background: var(--brand-orange, #e58058); color: #fff; } .bcm-svc-nav-btn.is-disabled { color: #ccc; cursor: default; } @media screen and (max-width: 640px) { .bcm-svc-nav-btn { padding: 0 14px; font-size: 15px; min-height: 52px; } .bcm-svc-nav-btn.is-list { padding: 0 20px; } } /* ---------- 상세 CTA 배너 ---------- */ .bcm-svc-band { margin: 56px 0; padding: 44px; background: var(--navy, #2e3163); color: #fff; } .bcm-svc-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; } .bcm-svc-band-text h3 { margin: 0 0 10px; color: #fff; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.35; } .bcm-svc-band-text p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 16px; } .bcm-svc-band-btns { display: flex; gap: 12px; flex-wrap: wrap; } .bcm-svc-band-tel, .bcm-svc-band-quote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 15px 28px; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 16px; transition: background .3s, color .3s, border-color .3s; } .bcm-svc-band-tel { background: var(--brand-orange, #e58058); color: #fff; } .bcm-svc-band-tel:hover { background: var(--cta-orange, #b85228); color: #fff; } .bcm-svc-band-quote { border: 1px solid #fff; color: #fff; background: transparent; } .bcm-svc-band-quote:hover { background: #fff; color: var(--navy, #2e3163); } /* 좌우 2단은 약 950px 아래에서 저절로 접힌다. 그냥 두면 버튼만 아래로 내려가면서 왼쪽에 붙어 문구와 어긋나 보이므로, 접히는 구간부터는 세로로 쌓고 전부 가운데 정렬한다. */ @media screen and (max-width: 1024px) { .bcm-svc-band-inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; } .bcm-svc-band-btns { justify-content: center; } } @media screen and (max-width: 640px) { .bcm-svc-band { padding: 32px 22px; } .bcm-svc-band-btns { width: 100%; justify-content: center; } /* flex:1 1 0 으로 두 버튼이 한 줄을 반씩 나눠 가지면, 폭이 좁을 때 "010-8187-5176" 이 세 줄로 쪼개진다. 세로로 쌓고 폭을 꽉 채운다. */ .bcm-svc-band-btns { flex-direction: column; align-items: stretch; } .bcm-svc-band-tel, .bcm-svc-band-quote { flex: 0 0 auto; width: 100%; padding: 15px 18px; white-space: nowrap; } } /* 글쓰기/수정: 첫 첨부가 목록 썸네일이라는 안내 문구 */ .bcm-thumb-guide { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 12px 14px; background: var(--accent-bg, #fdf1ea); border-left: 3px solid var(--brand-orange, #e58058); color: #6b5f56; font-size: 14px; line-height: 1.6; word-break: keep-all; } .bcm-thumb-guide > i { flex: 0 0 auto; margin-top: 2px; color: var(--brand-orange, #e58058); font-size: 16px; } .bcm-thumb-guide b { color: var(--cta-orange, #b85228); }