@charset "utf-8"; /*팝업설정(필수)*/ @media screen and (max-width:768px) { .drag_pop{left:0 !important;top:0 !important;max-width:350px !important;height:auto !important;} } #main_visual{position:relative;} #main_visual .bg{height:655px;width:100%;} #main_visual .typo{position:absolute;top:130px;left:60px;} #main_visual .typo .t1{font-size:30px;color:#000;font-weight:500;line-height:40px;letter-spacing:0px;} #main_visual .typo .t2{font-size:48px;color:#000;font-weight:600;line-height:57px;letter-spacing:-2px;padding:10px 0 50px 0;} #main_visual .typo a{display:inline-block;font-size:16px;color:#111;font-weight:400;line-height:44px;letter-spacing:-0.5px;border:1px solid #222;padding:0 40px 0 20px;background:url(/img/icon_btn_arrow.png) no-repeat 90% center;} #main_visual .typo a:hover{opacity:0.5;} .slick-next{display: block;position:absolute;right:-55px;top:50%;margin-top:-22px;width:31px;height:44px;background:url(/img/main/slick_next.png) ;cursor:pointer;} .slick-next:hover{background-position:0 -44px;} .slick-prev{display: block;position:absolute;left:-55px;top:50%;margin-top:-22px;width:31px; height:44px;background:url(/img/main/slick_prev.png) ;cursor:pointer;} .slick-prev:hover{background-position:0 -44px;} /* 히어로가 res_wrap 폭이 된 뒤로는 뷰포트 중앙 기준 -600px 오프셋이 어긋난다 — typo와 같은 들여쓰기로 맞춤 */ #main_visual ul.slick-dots{position:absolute;left:60px;bottom:75px;text-align:left;z-index:11;} #main_visual ul.slick-dots li{display: inline-block;margin:0 4px;} #main_visual ul.slick-dots li button{font-size: 0;display: block;height:6px;width:20px;background:rgba(255,255,255,0.8);-webkit-transition:all 0.3s; /* Safari */transition: all 0.3s;cursor:pointer;opacity:0.65;} #main_visual ul.slick-dots li.slick-active button{background:rgba(0,0,0,1);} @media screen and (max-width:920px) { #main_visual .bg{height:400px;} #main_visual .typo{top:70px;left:40px;} #main_visual .typo .t1{font-size:18px;line-height:24px;} #main_visual .typo .t2{font-size:33px;line-height:40px;letter-spacing:-2px;padding:5px 0 30px 0;} #main_visual .typo a{font-size:16px;line-height:44px;padding:0 30px 0 15px;background:url(/img/icon_btn_arrow.png) no-repeat 92% center;} #main_visual ul.slick-dots{display:none !important;} } @media screen and (max-width:480px) { #main_visual .bg{height:210px;} #main_visual .typo{top:40px;left:20px;} #main_visual .typo .t1{font-size:12px;line-height:18px;letter-spacing:-1px;} #main_visual .typo .t2{font-size:16px;line-height:18px;letter-spacing:-1px;padding:5px 0 10px 0;} #main_visual .typo a{font-size:12px;line-height:27px;padding:0 18px 0 6px;letter-spacing:-1.5px;background:url(/img/icon_btn_arrow.png) no-repeat 94% center;background-size:auto 7px;} } #section1{padding:60px 0 0;} #section1 ul{font-size:0;text-align:center;border-bottom:2px solid #333;padding-bottom:55px;} #section1 ul li{display:inline-block;vertical-align:top;width:10.5%;margin:0 1%;} #section1 ul li a .icon{max-width:112px;margin:0 auto;border-radius:500px;overflow:hidden;} #section1 ul li a .icon1{background:url(/img/main/clinic_icon1.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon2{background:url(/img/main/clinic_icon2.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon3{background:url(/img/main/clinic_icon3.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon4{background:url(/img/main/clinic_icon4.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon5{background:url(/img/main/clinic_icon5.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon6{background:url(/img/main/clinic_icon6.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon7{background:url(/img/main/clinic_icon7.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a .icon8{background:url(/img/main/clinic_icon8.gif) no-repeat 0 0;background-size:100% auto;} #section1 ul li a p{font-size:21px;font-weight:600;color:#333;padding-top:15px;} #section1 ul li a:hover .icon{background-position:0 100%;} #section1 ul li a:hover p{color:#bc9d48;} @media screen and (max-width:1240px) { #section1 ul li a p{font-size:18px;letter-spacing:-1px;} } @media screen and (max-width:1040px) { #section1 ul li a p{font-size:16px;letter-spacing:-1.5px;} } @media screen and (max-width:920px) { #section1{padding:40px 0 0;} #section1 ul{padding-bottom:25px;} #section1 ul li{width:23%;margin:0 1% 1.5%;} #section1 ul li a p{font-size:18px;padding-top:12px;} } @media screen and (max-width:480px) { #section1{padding:25px 0 0;} #section1 ul{padding-bottom:15px;} #section1 ul li{width:23%;margin:0 1% 2%;} #section1 ul li a p{font-size:12px;font-weight:600;padding-top:8px;line-height:18px;} } #section2{padding:60px 0 70px;} #section2 .con_box{float:left;width:30.66666666666666%;margin-right:4%;position:relative;} #section2 .con_box:last-child{margin-right:0;} #section2 .con_box h3{display:block;position:relative;font-size:21px;font-weight:500;color:#222;letter-spacing:-0.4px;border-bottom:1px solid #d9d7d5;padding-bottom:13px;} #section2 .con_box h3 a{display:block;position:absolute;top:5px;right:0;} #section2 .latest ul.list{padding-top:22px;} #section2 .latest ul.list li{line-height:30px;position:relative;padding-right:55px;} #section2 .latest ul.list li a{font-size:18px;color:#444;display:block;background:url(/img/spot_ul.gif) no-repeat 0 center;padding-left:10px;overflow:hidden;text-overflow:ellipsis;} #section2 .latest ul.list li a:hover{opacity:0.5;} #section2 .latest ul.list li span{display:block;position:absolute;top:0;right:0;font-size:16px;color:#777;} #section2 .merit h3{border-bottom:none;} #section2 .merit li{height:168px;} #section2 .merit li a{display:block;width:100%;height:100%;} #section2 .merit li a img{display:none;} #merit ul.slick-dots{position:absolute;top:-41px;right:0;} #merit ul.slick-dots li{display: inline-block;margin-left:5px;} #merit ul.slick-dots li button{display: block;height:7px;width:7px;background:#d2d2d2;-webkit-transition:all 0.3s; /* Safari */transition: all 0.3s;cursor:pointer;opacity:0.65;} #merit ul.slick-dots li.slick-active button{background:#222;} @media screen and (max-width:1000px) { #section2 .con_box{width:28.66666666666666%;margin-right:4%;} #section2 .con_box:nth-child(2n){width:34.66666666666%;} #section2 .latest ul.list li{padding-right:0;} #section2 .latest ul.list li span{display:none;} } @media screen and (max-width:900px) { #section2{padding:40px 0 45px;} } @media screen and (max-width:800px) { #section2{padding:40px 0 25px;} #section2 .con_box{float:none;width:100%;margin:0 0 4% 0;} #section2 .con_box:nth-child(2n){width:100%;} #section2 .latest ul.list li{line-height:30px;padding-right:55px;} #section2 .latest ul.list li a{font-size:18px;color:#444;padding-left:10px;} #section2 .latest ul.list li span{display:block;font-size:16px;} #section2 .merit li{height:auto;} #section2 .merit li a img{display:inline;} } @media screen and (max-width:480px) { #section2{padding:25px 0 10px;} #section2 .con_box{margin:0 0 20px 0;} #section2 .con_box:nth-child(2n){margin-bottom:25px;} #section2 .con_box h3{font-size:18px;padding-bottom:10px;} #section2 .con_box h3 a{top:5px;width:17px;} #section2 .latest ul.list{padding-top:10px;} #section2 .latest ul.list li{line-height:25px;padding-right:50px;} #section2 .latest ul.list li a{font-size:14px;padding-left:8px;} #section2 .latest ul.list li span{font-size:14px;} } #section3{padding:55px 0 60px;text-align:center;block;background:url(/img/main/bg_section3.jpg) no-repeat center center;background-size:cover;} #section3 p{font-weight:400;line-height:42px;color:#fff;opacity:0.9;padding-bottom:30px;} #section3 a{display:inline-block;color:#fff;font-weight:300;line-height:44px;width:;letter-spacing:-0.5px;border:1px solid #fff;border-color:rgba(255,255,255,0.7); padding:0 0 0 20px;width:150px;text-align:left;background:url(/img/icon_btn_arrow2.png) no-repeat 90% center;margin:0 10px;} #section3 a:hover{opacity:0.5;} @media screen and (max-width:920px) { #section3 p{line-height:36px;} } @media screen and (max-width:480px) { #section3{padding:35px 0 40px;} #section3 p{line-height:26px;letter-spacing:-1px;padding-bottom:20px;} #section3 a{line-height:32px;letter-spacing:-1px;padding:0 0 0 10px;width:100px;background:url(/img/icon_btn_arrow2.png) no-repeat 90% center;background-size:auto 8px;margin:0 1px;} } #section4{padding:75px 0 90px;} #con_link{font-size:0;} #con_link>div{display:inline-block;vertical-align:top;width:48.5%;margin-right:3%;} #con_link .news{border:1px solid #e5e5e5;padding:30px;} #con_link .news .first_news{position:relative;padding-left:186px;min-height:195px;border-bottom:1px dotted #ccc;} #con_link .news .first_news .img{position:absolute;top:0;left:0;} #con_link .news .first_news .news_title{} #con_link .news .first_news .news_title h4{font-weight:600;color:#222;letter-spacing:-0.5px;} #con_link .news .first_news .news_title a.more{display:block;position:absolute;top:0;right:0;} #con_link .news .first_news .news_title a.more:hover{opacity:0.5;} #con_link .news .new_con a{display:block;padding-top:15px;} #con_link .news .new_con a:hover{opacity:0.5;} #con_link .news .new_con .subject{font-weight:400;color:#333;letter-spacing:-0.4px;overflow:hidden;text-overflow:ellipsis;padding-bottom:10px;} #con_link .news .new_con .comment{color:#555;letter-spacing:-0.4px;line-height:23px;height:46px;overflow:hidden;} #con_link .news .new_con .date{font-weight:400;letter-spacing:0px;padding-top:7px;} #con_link .news ul{margin-top:20px;} #con_link .news ul li{position:relative;padding-right:100px;line-height:30px;} #con_link .news ul li a{display:block;background:url(/img/spot_ul.gif) no-repeat 0 center;padding-left:10px;overflow:hidden;text-overflow:ellipsis;} #con_link .news ul li span{display:block;position:absolute;top:0;right:0;color:#777;} #con_link .link{margin-right:0;} #con_link .link .link1{margin-bottom:30px;position:relative;overflow:hidden;} #con_link .link .link1 a:hover{opacity:0.6;} #con_link .link .link1 img{max-width:none;} #con_link .link .link1 img.m1, #con_link .link .link1 img.m2{display:none;} #con_link .link .link1 .text{position:absolute;top:0;left:0;width:261px;text-align:center;} #con_link .link .link1 .text h4{color:#fff;font-weight:600;line-height:32px;letter-spacing:-0.4px;padding-top:42px;} #con_link .link .link1 .text p{color:#fff;letter-spacing:-0.4px;line-height:20px;padding:3px 0 17px;} #con_link .link .link1 .text span{display:inline-block;color:#fff;font-weight:300;line-height:32px;width:;letter-spacing:-0.5px;border:1px solid #fff;border-color:rgba(255,255,255,0.7); padding:0 0 0 10px;width:90px;text-align:left;background:url(/img/icon_btn_arrow3.png) no-repeat 90% center;} #con_link .link .link2{position:relative;background:url(/img/main/icon_cs.png) no-repeat 40px center #f3f3f3;padding:25px;height:174px;} #con_link .link .link2 a.more{display:block;position:absolute;top:15px;right:15px;} #con_link .link .link2 .text {margin-left:155px;border-left:1px solid #e5e5e5;padding-left:40px;margin-top:8px;} #con_link .link .link2 .text .phone{color:#2a1f1d;font-weight:600;letter-spacing:-1px;line-height:30px;padding:0 0 12px;} #con_link .link .link2 .text .t1{color:#444;letter-spacing:0;line-height:21px;} #con_link .link .link2 .text .t1 .time{overflow:hidden;text-overflow:ellipsis;} @media screen and (max-width:1140px) { #con_link .link .link2{background:none;background-color:#f3f3f3;padding:25px;} #con_link .link .link2 .text {margin-left:0;border-left:none;padding-left:0;} } @media screen and (max-width:1000px) { #con_link .news .first_news{padding-left:0;min-height:195px;border-bottom:1px dotted #ccc;} #con_link .news .first_news .img{display:none;} } @media screen and (max-width:920px) { #section4{padding:40px 0 40px;} #con_link .link .link2 .text .phone{line-height:26px;} } @media screen and (max-width:850px) { #con_link .news ul li{padding-right:0;} #con_link .news ul li span{display:none;} } @media screen and (max-width:700px) { #section4{padding:25px 0 25px;} #con_link>div{display:block;width:100%;margin-right:0;} #con_link .news{padding:15px;} #con_link .news .first_news{min-height:auto;padding-bottom:15px;} #con_link .news .first_news .news_title h4{line-height:24px;} #con_link .news .first_news .news_title a.more{width:17px;} #con_link .news .new_con a{display:block;padding-top:10px;} #con_link .news .new_con .subject{padding-bottom:0;} #con_link .news .new_con .comment{line-height:19px;height:38px;overflow:hidden;} #con_link .news .new_con .date{padding-top:5px;} #con_link .news ul{margin-top:10px;} #con_link .news ul li{line-height:26px;} #con_link .news ul li a{padding-left:8px;} #con_link .link{margin-top:20px;} #con_link .link .link1{margin-bottom:20px;} #con_link .link .link1 a:hover{opacity:0.6;} #con_link .link .link1 img{max-width:100%;} #con_link .link .link1 img.pc{display:none;} #con_link .link .link1 img.m1{display:inline;} #con_link .link .link1 img.m2{display:block;} #con_link .link .link1 .text{position:absolute;top:50%;left:0;width:100%;height:100px;margin-top:-50px;text-align:center;} #con_link .link .link1 .text h4{line-height:27px;padding-top:0} #con_link .link .link2{padding:20px;height:auto;} #con_link .link .link2 a.more{width:17px;top:15px;right:15px;} #con_link .link .link2 .text {margin-top:0;} #con_link .link .link2 .text .phone{padding:0 0 10px;} #con_link .link .link2 .text .t1{line-height:19px;} } /* --- vanilla redesign: 홈 section2/3/4 통합, 모바일-데스크톱 중복 제거 (2026-07-19) --- */ /* section2: 상담·예약 → 공지사항 → 원장에세이 3열. float 대신 flex라 세 카드가 같은 폭(1fr)· 같은 높이(stretch)로 맞고, 레거시의 폭 % 계산과 nth-child 예외가 전부 불필요해짐 */ #section2 .res_wrap{display:flex;flex-wrap:wrap;gap:4%;} #section2 .con_box{flex:1 1 0;min-width:0;width:auto;float:none;margin:0;background:#fff;border:1px solid #ececec;border-radius:8px;padding:26px 28px;box-sizing:border-box;box-shadow:0 2px 10px rgba(0,0,0,0.04);} #section2 .con_box h3{border-bottom-color:#ececec;} /* keep-all: 한글은 기본값(break-all 유사)이면 어절 중간에서 끊겨 '예약하세 / 요.'처럼 갈라진다 */ #section2 .con_box.consult .txt{font-size:16px;line-height:22px;color:#555;padding:18px 0 22px;word-break:keep-all;} /* 채널 4개를 항상 2+2로 — inline-block 줄바꿈은 카드 폭에 따라 3+1, 1+1+1+1로 제각각이 됨. 폭은 그리드 컬럼이 정하므로 좌우 padding 없이 가운데 정렬한다(좁은 카드에서 글자 잘림 방지) */ #section2 .con_box.consult .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #section2 .con_box.consult .btns a{display:block;text-align:center;font-size:14px;color:#f89828;line-height:38px;letter-spacing:-0.5px;border:1px solid #f89828;padding:0;border-radius:20px;margin:0;white-space:nowrap;} #section2 .con_box.consult .btns a:hover{background:#f89828;color:#fff;} /* 공지사항·원장에세이 최신 4건 미리보기 — 카드가 좁아 날짜 열(레거시 55px)을 넓히고 글자를 줄임 */ #section2 .latest ul.list li{padding-right:76px;} #section2 .latest ul.list li span{font-size:14px;color:#999;} /* 한 줄에 안 들어가는 제목은 잘라내고 말줄임표 */ #section2 .latest ul.list li a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 801~1000px 구간은 카드가 좁아 레거시가 날짜를 숨긴다 — 그 구간에서만 날짜 자리도 회수 */ @media screen and (max-width:1000px) and (min-width:801px) { #section2 .latest ul.list li{padding-right:0;} } @media screen and (max-width:800px) { #section2 .res_wrap{display:block;} #section2 .con_box{margin-bottom:4%;} } @media screen and (max-width:480px) { #section2 .con_box{padding:20px;margin-bottom:20px;} } /* section4: 원장에세이 카드는 section2로 이동 → .link 래퍼 제거, link1(시설안내)·link2(진료시간)를 con_link의 2열(48.5%/48.5%)로 직접 배치. link1은 정적 pc/m1/m2 이미지 스위칭 대신 #main_visual과 동일한 autoSlider() 크로스페이드 슬라이더로 시설 사진을 순환 노출 */ #con_link .link1{position:relative;overflow:hidden;border-radius:8px;} #con_link .link1_slider{position:relative;height:340px;} #con_link .link1_slider .bg{display:none;position:absolute;top:0;left:0;width:100%;height:100%;} #con_link .link1_slider .bg.on{display:block;animation:vfade 1.2s;} /* autoSlider()가 dots(