/* 지음치과 메인 SEO 보강 (2026-10-22) — index.php 전용 이미지 안에 박혀 있던 글자를 실제 HTML 글자(드래그·복사 가능)로 옮기면서 기존 디자인을 유지하기 위한 규칙. 이 파일은 style.css·responsive.css 보다 먼저 로드되므로 선택자 앞에 #mainwrap 을 붙여 우선순위를 높인다. 글자 크기·위치는 원본 이미지 픽셀을 기준으로 cqw(컨테이너 폭 %) 로 환산했다 → 이미지와 같은 비율로 줄어든다. */ /* 화면에는 안 보이고 검색엔진·스크린리더만 읽는 텍스트 (페이지 h1 전용) */ .jm_sr{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important;} /* 공통: 글자 선택 허용 + 링크 안 글자도 드래그로 선택되게 */ #mainwrap .jm_bn01_txt,#mainwrap .jm_card_deco,#mainwrap .jm_card_tit,#mainwrap .jm_outline,#mainwrap .jm_bw_txt,#mainwrap .jm_logo_txt,#mainwrap .jm_special_cap{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;} #mainwrap #sec03 .list a,#mainwrap #sec04 .jm_special_tit a{-webkit-user-drag:none;} /* 외곽선 글자: 폰트의 겹친 획 윤곽이 보이지 않도록 획을 먼저 그리고 배경색으로 채운다(paint-order) → 바깥 윤곽선만 남음 */ #mainwrap .jm_outline{color:#fff;-webkit-text-fill-color:#fff;paint-order:stroke fill;} /* ── sec01 노란 배너: 知音 ; 지음 / 마음을 알아주는 친구 (배경 960x362, 모바일 750x362) ── */ #mainwrap #sec01 .jm_bn01{position:relative;width:960px;max-width:100%;margin:0 auto;container-type:inline-size;} #mainwrap #sec01 .jm_bn01 img{width:100%;height:auto;} #mainwrap #sec01 .jm_bn01_txt{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;font-size:inherit;font-weight:400;} #mainwrap #sec01 .jm_bn01_txt > *{position:absolute;display:block;margin:0;line-height:1;white-space:nowrap;letter-spacing:0;font-family:'Noto Sans KR',sans-serif;font-style:normal;} #mainwrap #sec01 .jm_bn01_zh{left:21.96cqw;top:9.59cqw;font-size:16.77cqw;font-weight:700;letter-spacing:-0.047em;color:#fee100;-webkit-text-fill-color:#fee100;paint-order:stroke fill;-webkit-text-stroke:max(1.2px,0.21cqw) #000;} #mainwrap #sec01 .jm_bn01_semi{left:56.85cqw;top:16.26cqw;font-size:8.02cqw;font-weight:700;color:#474747;} #mainwrap #sec01 .jm_bn01_ko{left:64.17cqw;top:16.14cqw;font-size:8.27cqw;font-weight:900;letter-spacing:-0.042em;color:#000;} #mainwrap #sec01 .jm_bn01_sub{left:64.17cqw;top:26.73cqw;font-size:2.4cqw;font-weight:400;letter-spacing:-0.06em;color:#000;} /* ── sec03 진료과목 카드: 사진(글자 지운 배경) + 知音; + 진료명 (PC 487x711, 모바일 651x260) ── */ #mainwrap #sec03 .jm_card{position:relative;width:487px;max-width:100%;margin:0 auto;overflow:hidden;container-type:inline-size;} #mainwrap #sec03 .jm_card img{width:100%;height:auto;} #mainwrap #sec03 .jm_card_deco,#mainwrap #sec03 .jm_card_tit{position:absolute;display:block;margin:0;padding:0;line-height:1;white-space:nowrap;letter-spacing:0;font-family:'Noto Sans KR',sans-serif;} /* 원본 이미지의 知音; 은 사진을 1.38배 밝게 비추는 효과 → color-dodge(#464646) 로 같은 효과 */ #mainwrap #sec03 .jm_card_deco{font-size:16.3cqw;font-weight:700;letter-spacing:-0.043em;color:#464646;mix-blend-mode:color-dodge;} #mainwrap #sec03 .jm_card_tit{font-size:6.67cqw;font-weight:300;color:#fff;} #mainwrap #sec03 .jm_card01 .jm_card_deco{left:9.32cqw;top:79.18cqw;} #mainwrap #sec03 .jm_card02 .jm_card_deco{left:10.76cqw;top:86.57cqw;} #mainwrap #sec03 .jm_card03 .jm_card_deco{left:9.32cqw;top:79.18cqw;} #mainwrap #sec03 .jm_card01 .jm_card_tit{left:9.14cqw;top:101.31cqw;} #mainwrap #sec03 .jm_card02 .jm_card_tit{left:10.78cqw;top:108.73cqw;} #mainwrap #sec03 .jm_card03 .jm_card_tit{left:9.12cqw;top:101.36cqw;} /* ── sec04 '지음치과의 특별함' 제목 뒤 노란 외곽선 知音; (원본 sec03_bg01.png 390x194, #sec04 배경 95% top) ── */ #mainwrap #sec04{position:relative;background:url(/img/main/sec03_bg02.jpg) no-repeat left center / contain;} #mainwrap #sec04 .jm_sp_decowrap{position:static;margin:0;} #mainwrap #sec04 .jm_sp_deco{position:absolute;z-index:0;top:-14.6px;left:calc((100% - 390px) * 0.95 - 3.6px);margin:0;font-family:'Noto Sans KR',sans-serif;font-size:182px;font-weight:700;line-height:1;letter-spacing:-0.053em;white-space:nowrap;-webkit-text-stroke:3px #ffe100;} #mainwrap #sec04 .sec_tit .aft02_h4{position:relative;z-index:1;} /* sec04 '지음치과의 특별함' 슬라이드: 사진 + HTML 캡션 (원본 500x524 이미지의 회색 박스 재현) */ #sec04 .swiper-wrapper{-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;} #sec04 .swiper-slide{height:auto;} #sec04 .swiper-slide .imgdiv.jm_special{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:500px;margin-left:auto;margin-right:auto;background:#515151;} #sec04 .swiper-slide .jm_special img{width:100%;max-width:100%;height:auto;display:block;} #sec04 .jm_special_cap{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;background:#515151;color:#fff;text-align:center;padding:30px 16px 34px;box-sizing:border-box;min-height:151px;word-break:keep-all;cursor:text;} #sec04 .jm_special_cap .jm_special_no{display:block;font-size:18px;line-height:1.2;font-weight:300;letter-spacing:0;margin:0 0 8px;color:#fff;} #sec04 .jm_special_cap .jm_special_tit{font-size:24px;line-height:1.3;font-weight:700;margin:0 0 14px;color:#fff;} #sec04 .jm_special_cap .jm_special_tit a{color:#fff;text-decoration:none;} #sec04 .jm_special_cap .jm_special_tit a:hover{color:#ffe100;} #sec04 .jm_special_cap .jm_special_desc{font-size:16px;line-height:1.5;font-weight:300;margin:0;color:#fff;word-break:keep-all;} /* ── sec05 FAQ 큰 글자: JIEUM DENTAL CLINIC(#efefef) / ANSWER THE QUESTION(노랑→주황) ── */ #mainwrap #sec05 .jm_bw{display:block;max-width:100%;container-type:inline-size;} #mainwrap #sec05 .imgdiv01 .jm_bw{width:996px;margin:auto 50% 3% auto;} #mainwrap #sec05 .imgdiv02 .jm_bw{width:1097px;margin:3% -5% auto auto;} #mainwrap #sec05 .jm_bw_txt{display:block;margin:0;padding:0;box-sizing:border-box;font-family:'GmarketSansBold',sans-serif;font-weight:normal;line-height:1;white-space:nowrap;} #mainwrap #sec05 .jm_bw_jdc .jm_bw_txt{position:relative;top:0.025em;left:-0.01em;height:6.93cqw;font-size:8.01cqw;letter-spacing:-0.0285em;color:#efefef;} #mainwrap #sec05 .jm_bw_atq .jm_bw_txt{height:7.11cqw;padding-top:0.03em;font-size:7.26cqw;letter-spacing:-0.026em;color:#ffb400;background:-webkit-linear-gradient(left,#ffe100,#ffa000);background:linear-gradient(90deg,#ffe100,#ffa000);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* ── sec06 진료별 바로가기 마지막 칸: 로고 아이콘 + 지음치과의원 (원본 128x89, 모바일 156x35) ── */ #mainwrap #sec06 .jm_logo{position:relative;display:block;width:128px;height:89px;margin-left:auto;margin-right:auto;} #mainwrap #sec06 .jm_logo .jm_logo_icon{position:absolute;left:42px;top:0;width:42px;height:41px;} #mainwrap #sec06 .jm_logo .jm_logo_icon img{width:100%;height:auto;margin:0;} #mainwrap #sec06 .jm_logo_txt{display:block;} #mainwrap #sec06 .jm_logo_name,#mainwrap #sec06 .jm_logo_desc{position:absolute;display:block;margin:0;line-height:1;white-space:nowrap;letter-spacing:0;font-family:'Noto Sans KR',sans-serif;color:#ffb400;background:-webkit-linear-gradient(left,#ffe100,#ffa400);background:linear-gradient(90deg,#ffe100,#ffa400);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} #mainwrap #sec06 .jm_logo_name{left:-0.8px;top:52px;font-size:21px;font-weight:400;letter-spacing:0.15em;} #mainwrap #sec06 .jm_logo_desc{left:9.6px;top:81.4px;font-size:7.66px;font-weight:400;} /* ── sec07 오시는 길 아래 회색 외곽선 知音; + 로고 (원본 sec06_bg01.png 391x130) ── */ #mainwrap #sec07 .jm_loc_deco{position:relative;width:391px;max-width:100%;overflow:hidden;container-type:inline-size;} #mainwrap #sec07 .jm_loc_deco:before{content:'';display:block;padding-top:33.248%;} #mainwrap #sec07 .jm_loc_zh{position:absolute;left:-0.61cqw;top:-2.48cqw;margin:0;font-family:'Noto Sans KR',sans-serif;font-size:30.95cqw;font-weight:700;line-height:1;letter-spacing:-0.05em;white-space:nowrap;-webkit-text-stroke:max(1px,0.4cqw) #dcdcdc;} #mainwrap #sec07 .jm_loc_deco .jm_loc_icon{position:absolute;left:72.12%;top:8.46%;width:27.88%;height:auto;max-width:none;margin:0;} @media screen and (max-width:1400px){ #sec04 .jm_special_cap{padding:24px 12px 26px;} #sec04 .jm_special_cap .jm_special_no{font-size:16px;} #sec04 .jm_special_cap .jm_special_tit{font-size:21px;margin-bottom:10px;} #sec04 .jm_special_cap .jm_special_desc{font-size:15px;} } @media screen and (max-width:1024px){ #sec04 .jm_special_cap{padding:18px 10px 20px;min-height:0;} #sec04 .jm_special_cap .jm_special_no{font-size:14px;margin-bottom:6px;} #sec04 .jm_special_cap .jm_special_tit{font-size:18px;margin-bottom:8px;} #sec04 .jm_special_cap .jm_special_desc{font-size:13px;} } @media screen and (max-width:768px){ /* sec01 모바일 배너 (750x362) */ #mainwrap #sec01 .jm_bn01{width:750px;} #mainwrap #sec01 .jm_bn01_zh{left:5.84cqw;top:12.28cqw;font-size:21.47cqw;-webkit-text-stroke-width:max(1px,0.268cqw);} #mainwrap #sec01 .jm_bn01_semi{left:50.51cqw;top:20.81cqw;font-size:10.27cqw;} #mainwrap #sec01 .jm_bn01_ko{left:59.87cqw;top:20.65cqw;font-size:10.59cqw;} #mainwrap #sec01 .jm_bn01_sub{left:59.87cqw;top:34.21cqw;font-size:3.07cqw;} /* sec03 모바일 카드 (651x260) */ #mainwrap #sec03 .jm_card{width:651px;} #mainwrap #sec03 .jm_card .jm_card_deco{font-size:12.2cqw;} #mainwrap #sec03 .jm_card .jm_card_tit{font-size:4.99cqw;} #mainwrap #sec03 .jm_card01 .jm_card_deco{left:69.19cqw;top:6.54cqw;} #mainwrap #sec03 .jm_card02 .jm_card_deco{left:67.96cqw;top:6.39cqw;} #mainwrap #sec03 .jm_card03 .jm_card_deco{left:67.65cqw;top:5.78cqw;} #mainwrap #sec03 .jm_card01 .jm_card_tit{left:51.54cqw;top:25.25cqw;} #mainwrap #sec03 .jm_card02 .jm_card_tit{left:51.23cqw;top:25.27cqw;} #mainwrap #sec03 .jm_card03 .jm_card_tit{left:51.06cqw;top:24.33cqw;} /* sec04 모바일: 제목 위 오른쪽 35% 폭 (390x194 비율) */ #mainwrap #sec04{background:url(/img/main/sec03_bg02_m.jpg) no-repeat left center / contain;} #mainwrap #sec04 .jm_sp_decowrap{position:relative;width:35%;margin:0 0 20px auto;container-type:inline-size;} #mainwrap #sec04 .jm_sp_decowrap:before{content:'';display:block;padding-top:49.744%;} #mainwrap #sec04 .jm_sp_deco{left:-0.92cqw;top:-3.74cqw;font-size:46.67cqw;-webkit-text-stroke-width:max(1px,0.77cqw);} /* sec05 모바일: 두 줄 (523x121 / 512x129) */ #mainwrap #sec05 .imgdiv01 .jm_bw{width:523px;} #mainwrap #sec05 .imgdiv02 .jm_bw{width:512px;} #mainwrap #sec05 .jm_bw_txt span{display:block;} #mainwrap #sec05 .jm_bw_jdc .jm_bw_txt{top:-0.066em;left:0;height:23.14cqw;font-size:11.55cqw;line-height:1.142;letter-spacing:-0.035em;} #mainwrap #sec05 .jm_bw_atq .jm_bw_txt{position:relative;top:-0.0575em;height:auto;padding-top:0;margin-bottom:calc(25.2cqw - 2.33em);font-size:11.74cqw;line-height:1.165;letter-spacing:-0.03em;text-align:right;} /* sec06 모바일 로고 칸: 원본 img 높이 4.557vw 기준 (156x35 → 1px = 0.1302vw) */ #mainwrap #sec06 .jm_logo{width:20.31vw;height:4.557vw;margin:0;} #mainwrap #sec06 .jm_logo .jm_logo_icon{left:0;top:0;width:4.687vw;height:4.557vw;} #mainwrap #sec06 .jm_logo .jm_logo_icon img{width:100%;height:100%;} #mainwrap #sec06 .jm_logo_name{left:5.78vw;top:0.15vw;font-size:2.36vw;} #mainwrap #sec06 .jm_logo_desc{left:6.99vw;top:3.32vw;font-size:0.859vw;} /* sec07 모바일: 가운데 정렬 */ #mainwrap #sec07 .jm_loc_deco{margin:0 auto;} #sec04 .swiper-slide .imgdiv.jm_special{height:auto;margin:auto 0 auto auto;} #sec04 .jm_special_cap{padding:6% 4% 7%;} #sec04 .jm_special_cap .jm_special_no{font-size:3.4vw;} #sec04 .jm_special_cap .jm_special_tit{font-size:4.6vw;} #sec04 .jm_special_cap .jm_special_desc{font-size:3.2vw;} } /* ── 모바일 글자 크기 보정 (2026-10-22): 본문 14px·라벨 12px 이상, PC 는 그대로 ── */ @media screen and (max-width:768px){ /* sec01 바로가기 아이콘 라벨 */ #mainwrap #sec01 .aft02_h3.ft18{font-size:max(13px,3.3vw);} /* sec01 배너 부제 */ #mainwrap #sec01 .jm_bn01_sub{font-size:max(12px,3.07cqw);} /* sec02 진료철학 본문 */ #mainwrap #sec02 .listwrap .list .txtwrap{padding:0 16px;} #mainwrap #sec02 .listwrap .list .aft02_h3.ft18{font-size:14px;line-height:1.6;} /* sec03 '자세히 보기' */ #mainwrap #sec03 .aft02_h3.ft18{font-size:max(13px,3.3vw);} /* sec04 '지음치과의 특별함' 제목: 오른쪽에서 밀려 들어오는 애니메이션 때문에 화면 밖(right 404px)으로 나가던 것 → 제자리 페이드로 */ #mainwrap #sec04 .sec_tit .aft02_h4{max-width:100%;} #mainwrap #sec04 .sec_tit .aft02_h4.fadeInRight{-webkit-animation-name:fadeIn;animation-name:fadeIn;} #sec04 .jm_special_cap .jm_special_no{font-size:max(12px,3.4vw);} #sec04 .jm_special_cap .jm_special_tit{font-size:max(17px,4.6vw);} #sec04 .jm_special_cap .jm_special_desc{font-size:max(14px,3.2vw);line-height:1.55;word-break:keep-all;} /* sec05 FAQ 말풍선 */ #mainwrap #sec05 .swiper-slide .aft02_h3.ft20{font-size:max(14px,3.4vw);line-height:1.55;} #mainwrap #sec05 .swiper-slide .aft03_h3{font-size:max(12px,3.5vw);} /* sec06 진료별 바로가기 칸: 라벨 13px, 두 줄까지 허용 */ #mainwrap #sec06 .sec_cont .listwrap .ba_box .list{height:auto;min-height:12vw;padding-top:6px;padding-bottom:6px;box-sizing:border-box;} #mainwrap #sec06 .sec_cont .listwrap .ba_box .list .aft02_h3.ft15{font-size:13px;line-height:1.25;text-align:right;word-break:keep-all;} /* sec06 로고 칸: 이미지 비율 고정 배치 → 아이콘 + 글자 흐름 배치 (이름 13px, 설명 12px) */ #mainwrap #sec06 .jm_logo{display:flex;align-items:center;width:auto;height:auto;gap:6px;} #mainwrap #sec06 .jm_logo .jm_logo_icon{position:static;flex:0 0 auto;width:24px;height:auto;} #mainwrap #sec06 .jm_logo .jm_logo_icon img{height:auto;} #mainwrap #sec06 .jm_logo_txt{display:flex;flex-direction:column;align-items:flex-start;} #mainwrap #sec06 .jm_logo_name,#mainwrap #sec06 .jm_logo_desc{position:static;} #mainwrap #sec06 .jm_logo_name{font-size:13px;line-height:1.2;letter-spacing:0.08em;} #mainwrap #sec06 .jm_logo_desc{font-size:12px;letter-spacing:-0.03em;text-align:left;line-height:1.3;margin-top:2px;white-space:normal;word-break:keep-all;} /* sec07 진료안내/오시는 길 */ #mainwrap #sec07 .listwrap .list01 .aft02_h3.ft18{font-size:14px;line-height:1.6;} #mainwrap #sec07 .listwrap .list01 .txtwrap03 .txt03_listwrap01{width:18%;} #mainwrap #sec07 .listwrap .list01 .txtwrap03 .txt03_listwrap02{width:82%;padding-left:4%;box-sizing:border-box;} #mainwrap #sec07 .listwrap .list01 .txtwrap03 .txt03_listwrap .txt03_list .innerwrap .list.flexwrap_j{display:flex;justify-content:flex-start;align-items:flex-start;} #mainwrap #sec07 .listwrap .list01 .txtwrap03 .txt03_listwrap .txt03_list .innerwrap .list .inner01{flex:0 0 84px;width:84px;margin-right:8px;} #mainwrap #sec07 .listwrap .list01 .txtwrap03 .txt03_listwrap .txt03_list .innerwrap .list .inner02{flex:1 1 auto;width:auto;padding-left:0;white-space:nowrap;} #mainwrap #sec07 .aft01_h3.ft22{font-size:max(12px,3.5vw);} } /* 2026-10-26 GEO 보강: 제목 태그 전환 후 기존 굵기 유지 + 진료정보 감수 블록 */ #mainwrap #sec07 h2.jm_h5{font-weight:300;} #mainwrap #sec05{position:relative;} #mainwrap #sec05 .q_txt h3.aft02_h3{margin:0;} #mainwrap .jm_trust{background:#f7f7f5;border-top:1px solid #ececec;padding:56px 20px;} #mainwrap .jm_trust_in{max-width:1100px;margin:0 auto;color:#444;font-size:15px;line-height:1.75;letter-spacing:-0.3px;} #mainwrap .jm_trust_tit{margin:0 0 12px;font-size:22px;font-weight:700;color:#222;} #mainwrap .jm_trust_lead{margin:0 0 18px;} #mainwrap .jm_trust_quote{margin:0 0 18px;padding:2px 0 2px 16px;border-left:3px solid #ffe100;color:#333;} #mainwrap .jm_trust_quote p{margin:0;font-weight:500;} #mainwrap .jm_trust_quote footer{margin-top:4px;font-size:13px;color:#777;} #mainwrap .jm_trust_quote cite{font-style:normal;} #mainwrap .jm_trust a{color:#555;text-decoration:underline !important;text-underline-offset:3px;} #mainwrap .jm_trust a:hover{color:#ffa200;} #mainwrap .jm_trust_refs{margin:0 0 10px;font-size:13px;color:#777;} #mainwrap .jm_trust_refs span{font-weight:700;color:#555;margin-right:6px;} #mainwrap .jm_trust_meta{margin:0;font-size:13px;color:#777;} @media screen and (max-width:768px){ #mainwrap .jm_trust{padding:36px 16px;} #mainwrap .jm_trust_in{font-size:14px;} #mainwrap .jm_trust_tit{font-size:18px;} #mainwrap .jm_trust_refs a{word-break:break-all;} }