/* 헤더 */ #header {z-index: 90; padding: 1.5rem 5rem 1.9rem; transition: 0.4s;} #header .inner {max-width: 153.4rem; margin: 0 auto; transition: max-width 0.4s;} #header .logo {width: 26.6rem; height: 7.4rem; flex-shrink: 0;} #header .logo a {width: 100%; height: 100%;} #header .logo img {width: 100%; height: 100%; object-fit: contain; transition: opacity 0.4s;} #header .logo .on {opacity: 0;} #header .gnb {gap: 5rem;} #header .gnb a {display: block; color: #fff; line-height: 2.4rem; transition: color 0.4s;} /* 햄버거 버튼과 모바일 메뉴는 880 이하 전용 */ #header .menuBtn, .menuDim, .mMenu {display: none;} /* .sub = 서브페이지용. 스크롤과 무관하게 활성 컬러를 유지 .menuOn = 모바일 메뉴가 열린 상태. 패널이 흰색이라 헤더도 활성 컬러로 맞춥니다 */ #header.act, #header.sub, #header.menuOn {background-color: #fff;} #header.act .inner, #header.sub .inner {max-width: 167rem;} #header.act .logo .off, #header.sub .logo .off, #header.menuOn .logo .off {opacity: 0;} #header.act .logo .on, #header.sub .logo .on, #header.menuOn .logo .on {opacity: 1;} #header.act .gnb a, #header.sub .gnb a {color: #222;} @media all and (max-width: 880px){ /* 모바일은 로고만 중앙 배치 */ #header {padding: 2rem 0;} #header .inner {max-width: 100%; justify-content: center; transition: none;} #header.act {padding: 1rem 0;} #header.act .inner, #header.sub .inner {max-width: 100%;} #header .gnb {display: none;} #header .logo {width: 15.8rem; height: 4.4rem;} /* 햄버거 : 로고는 가운데 그대로 두고 오른쪽 끝에 겹쳐 놓습니다 */ #header .menuBtn { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: block; width: 2.8rem; height: 2rem; padding: 0; background: none; border: 0; cursor: pointer; } #header .menuBtn .bar { display: block; width: 100%; height: 0.2rem; border-radius: 0.1rem; background: #fff; transition: background-color 0.4s; } #header .menuBtn .bar + .bar {margin-top: 0.7rem;} /* 헤더가 흰 배경일 때는 막대도 어둡게 */ #header.act .menuBtn .bar, #header.sub .menuBtn .bar, #header.menuOn .menuBtn .bar {background: #222;} /* 딤 : 헤더(90) 아래, 퀵버튼(80) 위 */ .menuDim { display: block; z-index: 85; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } body.menuOpen .menuDim { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; } /* 패널 : 오른쪽에서 밀려 들어옵니다. --hdH 는 여는 순간 js 가 헤더 실제 높이를 넣어줍니다(스크롤 시 헤더가 줄어들기 때문). */ .mMenu { display: block; z-index: 88; right: 0; top: 0; width: 80%; height: 100%; padding: var(--hdH, 8.4rem) 0 4rem; background: #fff; transform: translateX(100%); /* 닫혀 있을 땐 visibility 로 완전히 빼둡니다 (탭 이동으로 들어가지 않게) */ visibility: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.35s; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.menuOpen .mMenu { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s; } .mMenu .closeBtn { position: relative; display: block; width: 2.4rem; height: 2.4rem; margin: 2.4rem 3rem 0 auto; padding: 0; background: none; border: 0; cursor: pointer; } .mMenu .closeBtn::before, .mMenu .closeBtn::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 0.2rem; margin-top: -0.1rem; background: #222; border-radius: 0.1rem; } .mMenu .closeBtn::before {transform: rotate(45deg);} .mMenu .closeBtn::after {transform: rotate(-45deg);} .mMenu .mGnb {padding: 3.6rem 3rem 0;} .mMenu .mGnb > li + li {margin-top: 3.4rem;} .mMenu .mGnb a {display: block; font-size: 1.8rem; font-weight: 700; color: #222; line-height: 2.4rem;} .mMenu .mGnb a:active {color: var(--fcp);} /* 로그인/회원가입(또는 로그인 후 사용자 메뉴)은 선으로 구분 */ .mMenu .mUser {display: flex; align-items: center; gap: 1.6rem; padding-top: 3rem; border-top: 1px solid #e5e5e5;} .mMenu .mUser .uname {font-size: 1.6rem; font-weight: 600; color: var(--fcp);} .mMenu .mUser a {font-size: 1.6rem; font-weight: 500; color: #666;} } /* 푸터 */ #footer {height: 20.8rem; background: #27312b;} #footer .inner {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 5rem;} #footer .info .row {gap: 2rem;} #footer .info .row + .row {margin-top: 1.5rem;} #footer .info .row span, #footer .info .row a {line-height: 1.6rem;} #footer .info .admin {color: #a3a3a3;} #footer .info .copy {margin-top: 3.5rem; line-height: 1.6rem;} #footer .logo {width: 25.4rem; margin-top: 1.9rem; flex-shrink: 0;} @media all and (max-width: 880px){ #footer {height: 26.7rem;} #footer .inner {max-width: var(--innerMo); flex-direction: column; align-items: center; padding-top: 3rem;} #footer .logo {order: -1; width: 16.6rem; margin-top: 0;} #footer .info {margin-top: 2rem; text-align: center;} #footer .info .row {flex-wrap: wrap; justify-content: center; gap: 1.2rem 1.5rem;} /* 1행은 PC와 달리 한 줄에 하나씩 */ #footer .info .row1 {flex-direction: column; align-items: center;} #footer .info .row + .row {margin-top: 1.2rem;} #footer .info .row span, #footer .info .row a {font-size: 1.4rem; line-height: 1.4rem;} #footer .info .copy {font-size: 1.3rem; line-height: 1.4rem; margin-top: 2.5rem;} } #s1 {overflow: hidden;} #s1 .vdoArea {height: 91rem;} #s1 .vdoArea .vdo {height: 100%} #s1 .vdoArea .vdo video {width: 100%; height: 100%; object-fit: cover; display: block;} #s1 .txtArea {top: 68.5rem;} #s1 .txtArea .subt {line-height: 5.5rem; text-shadow: 0 0 1rem rgba(0,0,0,0.25);} #s1 .txtArea .tit {line-height: 7rem; margin-top: 0.8rem; text-shadow: 0 0 1rem rgba(0,0,0,0.25);} @media all and (max-width: 880px){ #s1 {} #s1 .vdoArea {height: 66.6rem;} #s1 .txtArea {top: 35.5rem; max-width: var(--innerMo); left: 50%; transform: translateX(-50%); text-align: left;} #s1 .txtArea .subt {font-size: 2rem; line-height: 2.8rem; white-space: nowrap;} #s1 .txtArea .tit {font-size: 3.6rem; line-height: 4.52rem; margin-top: 1rem; white-space: nowrap;} } #s2 {background: #fff; overflow: hidden;} #s2 .bgIco {width: 34.14rem; right: 4.9rem; top: 30.1rem;} #s2 .inner {padding: 17rem 0 15rem;} #s2 .titArea .ico {width: 7rem;} #s2 .titArea .tit {margin-top: 3rem; line-height: 7rem;} #s2 .titArea .wrt {margin-top: 3rem; line-height: 3.8rem;} #s2 .s2Swiper {margin-top: 6rem; overflow: visible;} #s2 .s2Swiper .swiper-pagination {display: none;} #s2 .card {background: #fff; border: 1px solid #d6d6d6; border-radius: 2rem; width: 33.5rem; height: 47rem; padding: 0 3.5rem;} #s2 .card .num {position: absolute; top: 3rem; right: 3.5rem; font-size: 4.5rem; line-height: 4.5rem;} #s2 .card .ico {width: 10.8rem; margin-top: 12rem;} #s2 .card .label {margin-top: 4.7rem; font-size: 1.8rem; line-height: 1.8rem;} #s2 .card .tit {margin-top: 1.5rem; line-height: 2.8rem;} #s2 .card .wrt {margin-top: 1.5rem; line-height: 2.6rem;} @media all and (max-width: 880px){ #s2 {} #s2 .bgIco {width: 11.66rem; right: 0; top: 21.8rem;} #s2 .inner {max-width: var(--innerMo); padding: 8rem 0 7rem;} #s2 .titArea .ico {width: 4.3rem;} #s2 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s2 .titArea .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.5rem;} #s2 .s2Swiper {margin-top: 3rem; padding-bottom: 3rem;} #s2 .s2Swiper .swiper-pagination {display: flex; justify-content: center; gap: 0.6rem; bottom: 0;} #s2 .s2Swiper .swiper-pagination .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; opacity: 0.5; background: #BCBCBC; margin: 0;} #s2 .s2Swiper .swiper-pagination .swiper-pagination-bullet-active {background: var(--fcp); opacity: 1;} #s2 .card {border-radius: 1.5rem;} } #s3 {border-radius: 12rem 12rem 0 0; height: 115.3rem; overflow: hidden;} #s3 .bgTexture {opacity: 0.6; pointer-events: none;} #s3 .bgTexture img {width: 100%; height: 100%; object-fit: cover; display: block;} #s3 .bgTxt {display: flex; top: 94rem; left: 0; width: 100%; overflow: hidden; font-size: 13rem; line-height: 13rem; color: #535353; opacity: 0.05; letter-spacing: 0;} #s3 .bgTxt span {flex: 0 0 auto; white-space: nowrap; padding-right: 6rem; animation: bgTxtFlow 45s linear infinite;} @keyframes bgTxtFlow { from {transform: translateX(0);} to {transform: translateX(-100%);} } #s3 .inner {padding-top: 13rem; z-index: 4;} #s3 .titArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s3 .titArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s3 .txtArea {margin-top: 10.7rem;} #s3 .txtArea .ico {width: 6.2rem; height: 6.3rem;} #s3 .txtArea .wrt {margin-top: 2.5rem; line-height: 5rem;} #s3 .txtArea .qIco {margin-top: 6rem; width: 2.6rem; height: 2.4rem;} #s3 .txtArea .qWrt {margin-top: 3rem; line-height: 3.8rem;} #s3 .txtArea .ico img, #s3 .txtArea .qIco img {height: 100%; object-fit: contain; object-position: left;} #s3 .docArea.pc {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} #s3 .docArea.pc .doc {position: absolute; left: 50%; top: 34.6rem; width: 43.6rem;} #s3 .docArea.pc .doc1 {margin-left: -11rem;} #s3 .docArea.pc .doc1 img {z-index: 3;} #s3 .docArea.pc .doc2 {margin-left: 13rem;} #s3 .docArea.pc .doc2 img {z-index: 2;} #s3 .docArea.pc .doc3 {margin-left: 43.4rem;} #s3 .docArea.pc .doc3 img {z-index: 1;} #s3 .badge {position: absolute; left: 12.6rem; top: 42.1rem; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(74,133,55,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; z-index: 9;} #s3 .badge .pos {line-height: 2.2rem;} #s3 .badge .name {margin-top: 0.9rem; line-height: 3.8rem;} #s3 .badge .more {width: 9rem; height: 0; margin-top: 0; opacity: 0; overflow: hidden; background: #fff; border-radius: 1.2rem; transition: 0.35s;} #s3 .badge .more span {display: block; line-height: 2.4rem;} #s3 .doc:hover .badge .more {height: 2.4rem; margin-top: 1.5rem; opacity: 1;} #s3 .docArea.pc .doc1 .badge {left: 0;} #s3 .docArea.pc .doc2 .badge {background: rgba(65,66,65,0.8);} #s3 .docArea.pc .doc2 .badge .more span {color: #414241;} #s3 .docArea.pc .doc3 .badge {} @media all and (max-width: 880px){ #s3 {border-radius: 5rem 5rem 0 0; height: auto; padding-bottom: 2.5rem;} #s3 .bgTxt {display: none;} #s3 .inner {max-width: var(--innerMo); padding-top: 7rem; text-align: center;} #s3 .titArea .subt {font-size: 1.5rem; line-height: 1.5rem;} #s3 .titArea .tit {font-size: 2.8rem; line-height: 4rem; margin-top: 2rem;} #s3 .txtArea {margin-top: 3.5rem;} #s3 .txtArea .ico {width: 4.2rem; height: 4.3rem; margin: 0 auto;} #s3 .txtArea .wrt {font-size: 2.2rem; line-height: 3rem; margin-top: 1.5rem;} #s3 .txtArea .qIco {width: 2rem; height: 1.8rem; margin: 3rem auto 0;} #s3 .txtArea .qWrt {font-size: 1.6rem; line-height: 2.4rem; margin-top: 1.5rem;} #s3 .txtArea .ico img, #s3 .txtArea .qIco img {object-position: center;} #s3 .docArea.mo {margin-top: 5rem;} #s3 .s3Swiper {max-width: var(--innerMo); margin: 0 auto; overflow: hidden;} #s3 .s3Swiper .swiper-pagination {position: relative; bottom: 0; margin-top: 1.5rem; display: flex; justify-content: center; gap: 0.6rem;} #s3 .s3Swiper .swiper-pagination .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; opacity: 0.5; background: #BCBCBC; margin: 0;} #s3 .s3Swiper .swiper-pagination .swiper-pagination-bullet-active {background: var(--fcp); opacity: 1;} #s3 .badge {left: 18.5rem; top: 28rem; width: 15rem; height: 15rem;} #s3 .badge .pos {line-height: 1.8rem;} #s3 .badge .name {margin-top: 0.5rem; line-height: 3.2rem;} #s3 .badge .more {height: 2.4rem; margin-top: 1rem; opacity: 1;} } /* 의료진 팝업 */ #docPop {display: none; z-index: 100;} #docPop .popBg {background: #000; opacity: 0.5;} #docPop .pop {display: none; width: 130rem; height: 70rem; background: #fff; border-radius: 4rem; overflow: hidden;} #docPop .thumb {left: 69.4rem; top: 5.5rem; width: 51.6rem; height: 64.5rem; z-index: 1;} #docPop .thumb img {height: 100%; object-fit: cover; object-position: top;} #docPop .panel {left: 0; top: 28rem; width: 98rem; height: 42rem; background: #f5f8f4; border-radius: 0 25rem 0 4rem;} #docPop .watermark {left: 65.8rem; top: 36.5rem; width: 22.4rem;} #docPop .inn {z-index: 2;} #docPop .tit {left: 10rem; top: 9rem; line-height: 0; white-space: nowrap;} #docPop .tit span {line-height: 4.2rem;} #docPop .wrt {left: 10rem; top: 16.7rem; line-height: 3.6rem; white-space: nowrap;} #docPop .lstTit {left: 10rem; top: 32rem; line-height: 2.4rem; white-space: nowrap;} #docPop .lst {left: 10rem; top: 36.4rem; width: 67.8rem;} #docPop .lst li {padding-left: 1.6rem; line-height: 3.2rem;} #docPop .lst li:before {content: ''; position: absolute; left: 0; top: 1.4rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--fcp);} #docPop .closeBtn {left: 50%; top: -8.5rem; transform: translateX(-50%); width: 7rem; height: 7rem; border-radius: 50%; background: #fff; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.08);} #docPop .closeBtn span {position: absolute; left: 50%; top: 50%; width: 0.4rem; height: 3rem; background: #313131;} #docPop .closeBtn span:nth-child(1) {transform: translate(-50%,-50%) rotate(45deg);} #docPop .closeBtn span:nth-child(2) {transform: translate(-50%,-50%) rotate(-45deg);} @media all and (max-width: 880px){ #docPop .pop {width: 33.5rem; height: 58rem; border-radius: 1.5rem;} #docPop .thumb {left: 3.2rem; top: 8.3rem; width: 27.1rem; height: 33.9rem; z-index: auto;} #docPop .panel {left: 0; top: 32rem; width: 33.5rem; height: 26rem; border-radius: 0 5rem 1.5rem 1.5rem;} #docPop .watermark {left: 22.9rem; top: 34.1rem; width: 8.07rem;} #docPop .tit {left: 2.5rem; top: 3rem;} #docPop .tit span {line-height: 2.8rem;} #docPop .tit .nm {font-size: 3rem;} #docPop .tit .job {font-size: 2rem;} #docPop .wrt {left: 2.5rem; top: 34.2rem; font-size: 1.5rem; line-height: 2.2rem;} #docPop .lstTit {left: 2.5rem; top: 40.4rem; font-size: 1.8rem; line-height: 1.8rem;} #docPop .lst {left: 2.5rem; top: 43.2rem; width: 28.5rem; height: 12.4rem; overflow-y: auto; font-size: 1.5rem;} #docPop .lst li {padding-left: 1.2rem; line-height: 2.5rem;} #docPop .lst li:before {top: 1.05rem;} #docPop .lst::-webkit-scrollbar {width: 0.3rem;} #docPop .lst::-webkit-scrollbar-track {background: #e1e1e1; border-radius: 0.15rem;} #docPop .lst::-webkit-scrollbar-thumb {background: var(--fcp); border-radius: 0.15rem;} #docPop .closeBtn {left: auto; right: 2.07rem; top: 2rem; transform: none; width: 1.53rem; height: 1.53rem; border-radius: 0; background: none; box-shadow: none; z-index: 999;} #docPop .closeBtn span {width: 0.27rem; height: 1.9rem; background: #a6b4bb;} } #s4 {background-color: #61984f; background-image: url(../img/s4_bg.jpg); background-size: cover; background-position: center; padding: 29.6rem 0 15rem;} #s4 .banner {top: -6.5rem; left: 50%; transform: translateX(-50%); width: 140rem; height: 13rem; background: #163e09; border-radius: 6.5rem; z-index: 1;} #s4 .banner a {display: flex; align-items: center; justify-content: center; gap: 4rem; justify-content: space-between; padding: 0 8rem; height: 100%;} #s4 .banner a .arrow {width: 6rem; height: 6rem; border-radius: 50%; flex-shrink: 0; transition: 0.4s; right: 0;} #s4 .banner a:hover .arrow {right: -1rem;} #s4 .cont {padding-left: 26rem;} #s4 .txtArea {width: 52rem; flex-shrink: 0;} #s4 .txtArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s4 .txtArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s4 .txtArea .wrt {margin-top: 2.5rem; line-height: 3.8rem;} #s4 .txtArea .nav {margin-top: 6rem; gap: 1.5rem;} #s4 .txtArea .nav > div {width: 6rem;} #s4 .s4Swiper {flex: 1; overflow: hidden;} #s4 .s4Swiper .swiper-slide {width: 40rem;} #s4 .s4Swiper .card {background: #fff; border-radius: 2rem; text-align: center; padding: 2rem 0 3rem;} #s4 .s4Swiper .card .img {width: 36rem; height: 24rem; border: 1px solid #ddd; border-radius: 1.5rem; overflow: hidden; margin: 0 auto;} #s4 .s4Swiper .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s4 .s4Swiper .card .tit {margin-top: 4rem; line-height: 3.8rem;} #s4 .s4Swiper .card .subt {width: 34rem; margin: 2.3rem auto 1.3rem; line-height: 2.8rem;} #s4 .s4Swiper .card .wrt {width: 34rem; margin: 0 auto; line-height: 2.6rem;} @media all and (max-width: 880px){ #s4 {padding: 12.5rem 0 8rem;} #s4 .banner {top: -5.5rem; width: 33.5rem; height: 11rem; border-radius: 1.5rem; gap: 1.5rem; padding: 0 2rem;} #s4 .banner a {padding: 0;} #s4 .banner a .tit {font-size: 2.2rem; line-height: 2.8rem; text-align: left;} #s4 .banner a .arrow {width: 4rem; height: 4rem;} #s4 .cont {flex-direction: column; padding-left: 0;} #s4 .txtArea {width: var(--innerMo); max-width: var(--innerMo); margin: 0 auto; text-align: center;} #s4 .txtArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s4 .txtArea .tit {font-size: 3.5rem; line-height: 4.5rem; margin-top: 1.5rem;} #s4 .txtArea .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.5rem;} #s4 .txtArea .nav {justify-content: center; margin-top: 3rem;} #s4 .txtArea .nav > div {width: 5.2rem;} #s4 .s4Swiper {width: 100%; margin-top: 4.2rem;} #s4 .s4Swiper .swiper-slide {width: 33.5rem;} #s4 .s4Swiper .card {border-radius: 1.5rem; padding: 2rem 0 3rem;} #s4 .s4Swiper .card .img {width: 29.5rem; height: 19.7rem;} #s4 .s4Swiper .card .tit {font-size: 3.5rem; margin-top: 3.5rem; line-height: 3.5rem;} #s4 .s4Swiper .card .subt {width: 29.5rem; font-size: 1.8rem; margin-top: 2.3rem; line-height: 2.6rem; margin-bottom: 2.3rem;} #s4 .s4Swiper .card .subt.aa {margin-top: 1rem; margin-bottom: 1rem;} #s4 .s4Swiper .card .wrt {width: 29.5rem; font-size: 1.5rem; line-height: 2.5rem;} } #s5 {height: 60rem; display: flex; align-items: center; justify-content: center; background-image: url(../img/s5_bg_pc.jpg); background-size: cover; background-position: center; overflow: hidden;} #s5 .txtArea {position: relative; z-index: 1;} #s5 .txtArea .ico {width: 7rem;} #s5 .txtArea .subt {margin-top: 2.2rem; letter-spacing: 0.1em;} #s5 .txtArea .tit {margin-top: 4rem; line-height: 8.5rem;} @media all and (max-width: 880px){ #s5 {height: 43rem; background-image: url(../img/s5_bg_mo.jpg);} #s5 .txtArea .ico {width: 4.5rem;} #s5 .txtArea .subt {font-size: 1.5rem; margin-top: 2rem;} #s5 .txtArea .tit {font-size: 3rem; line-height: 4rem; margin-top: 2rem; white-space: nowrap;} } #s6 {padding: 16rem 0 15rem; overflow: hidden;} #s6 .titArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s6 .titArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s6 .tab {justify-content: center; margin: 0 auto; margin-top: 5rem; background: #f2f2f2; border-radius: 4rem; padding: 1.2rem; width: fit-content;} #s6 .tab li {color: #737373; font-size: 1.6rem; font-weight: 500; line-height: 1.6rem; cursor: pointer; white-space: nowrap; padding: 2rem 4rem;} #s6 .tab li.on {background: var(--fcp); color: #fff; font-weight: 700; border-radius: 4rem;} #s6 .s6Swiper {margin-top: 4rem;} #s6 .s6Swiper .swiper-slide {width: 85rem;} #s6 .card {position: relative;} #s6 .card .img {width: 85rem; height: 56rem; border-radius: 2rem; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);} #s6 .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s6 .card .txts {position: absolute; left: 3rem; bottom: 3rem; width: 50rem; background: #fff; border-radius: 1.5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.35); padding: 3rem 4rem;} #s6 .card .txts .tit {line-height: 2.8rem;} #s6 .card .txts .wrt {margin-top: 1.5rem; line-height: 2.6rem;} @media all and (max-width: 880px){ #s6 {padding: 8rem 0 8rem;} #s6 .inner {max-width: var(--innerMo);} #s6 .titArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s6 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s6 .tab {background: none; border-radius: 0; padding: 0; gap: 0.7rem; margin-top: 3.5rem; width: 100%; display: flex; flex-wrap: wrap;} #s6 .tab li {background: #f2f2f2; border-radius: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; text-align: center; padding: 0; width: calc((100% - 0.7rem) / 2);} #s6 .tab li.on {padding: 0;} #s6 .s6Swiper {margin-top: 2rem;} #s6 .s6Swiper .swiper-slide {width: 33.5rem;} #s6 .card {background: #fff; border-radius: 1.5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.35); overflow: hidden;} #s6 .card .img {width: 100%; height: 22.1rem; border-radius: 0; box-shadow: none;} #s6 .card .txts {position: static; width: auto; background: none; border-radius: 0; box-shadow: none; padding: 2.5rem;} #s6 .card .txts .tit {font-size: 2.4rem; line-height: 2.4rem;} #s6 .card .txts .wrt {font-size: 1.5rem; line-height: 2.5rem; margin-top: 2rem;} } #s7 {padding: 2rem 0 15rem; overflow: hidden;} #s7 .titArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s7 .titArea .tit1 {margin-top: 2.5rem; line-height: 6.8rem;} #s7 .titArea .tit2 {line-height: 6.8rem;} #s7 .stepList {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 5.6rem;} #s7 .step {background: #f5f5f5; border-radius: 1.5rem; height: 25rem; padding: 4.1rem 0 0 5rem;} #s7 .step .badge {width: 10.4rem; height: 3rem; line-height: 3rem; background: #a4c19a; border-radius: 1.5rem;} #s7 .step .tit {margin-top: 2rem; line-height: 3.5rem;} #s7 .step .wrt {margin-top: 2rem; line-height: 3.2rem; white-space: nowrap;} #s7 .step .ico {right: 3.5rem; top: 3rem; width: 7.8rem;} @media all and (max-width: 880px){ #s7 {padding: 0 0 7rem;} #s7 .inner {max-width: var(--innerMo);} #s7 .titArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s7 .titArea .tit1 {font-size: 2rem; line-height: 2.8rem; margin-top: 2rem;} #s7 .titArea .tit2 {font-size: 3.2rem; line-height: 3.2rem; margin-top: 1.5rem;} #s7 .stepList {display: none;} #s7 .stepSlide {margin-top: 4rem;} #s7 .s7Swiper .swiper-slide {width: 33.5rem;} #s7 .step {height: 25.3rem; padding: 3.5rem 0 0 2.5rem;} #s7 .step .badge {line-height: 3rem;} #s7 .step .tit {margin-top: 2rem; line-height: 3.5rem;} #s7 .step .wrt {margin-top: 2rem; width: 28.5rem; line-height: 2.6rem; white-space: normal;} #s7 .step .ico {right: 2.5rem; top: 3.5rem; width: 6.3rem;} #s7 .swiper-pagination {position: relative; bottom: 0; margin-top: 2rem; display: flex; justify-content: center; gap: 0.6rem;} #s7 .swiper-pagination .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; opacity: 0.5; background: #BCBCBC; margin: 0;} #s7 .swiper-pagination .swiper-pagination-bullet-active {background: var(--fcp); opacity: 1;} } #s8 {height: 89.4rem; border-radius: 12rem 12rem 0 0; overflow: hidden; background-color: #163d09; background-image: url(../img/s8_bg_pc.jpg); background-size: cover; background-position: center;} #s8 .cont {padding-top: 17rem; justify-content: space-between;} #s8 .txtArea {width: 74rem; flex-shrink: 0;} #s8 .txtArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s8 .txtArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s8 .txtArea .wrt {margin-top: 2.5rem; line-height: 3.8rem;} #s8 .cardArea {width: 66rem;} #s8 .s8Swiper .swiper-wrapper {flex-direction: column; gap: 2rem;} #s8 .card {width: 60rem; height: 12.6rem; background: #2c4d21; border-radius: 1.5rem; padding: 2.8rem 0 0 7.8rem;} #s8 .card:nth-child(even) {margin-left: 6rem;} #s8 .card .ico {left: 2.5rem; top: 2.7rem; width: 3.5rem;} #s8 .card .tit {line-height: 3.3rem;} #s8 .card .wrt {margin-top: 1.5rem; line-height: 1.8rem;} @media all and (max-width: 880px){ #s8 {height: 68rem; border-radius: 5rem 5rem 0 0; background-image: url(../img/s8_bg_mo.jpg);} #s8 .cont {max-width: 100%; flex-direction: column; padding-top: 7rem;} #s8 .txtArea {width: var(--innerMo); margin: 0 auto; text-align: center;} #s8 .txtArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s8 .txtArea .tit {font-size: 3.2rem; line-height: 4rem; margin-top: 2rem;} #s8 .txtArea .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 2rem;} #s8 .cardArea {width: 100%; margin-top: 3rem;} #s8 .s8Swiper .swiper-wrapper {flex-direction: row; gap: 0;} #s8 .card {width: 33.5rem; height: 13rem; padding: 2.5rem 0 0 5.4rem; margin-left: 0;} #s8 .card:nth-child(even) {margin: 0;} #s8 .card .ico {left: 2rem; top: 2.5rem; width: 2.2rem;} #s8 .card .tit {font-size: 2.2rem; line-height: 2.2rem;} #s8 .card .wrt {font-size: 1.6rem; line-height: 2.4rem; margin-top: 1rem;} #s8 .s8pg {display: flex; justify-content: center; gap: 0.6rem; position: relative; bottom: 0; margin-top: 1.5rem;} #s8 .s8pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; opacity: 0.4; background: #fff; margin: 0;} #s8 .s8pg .swiper-pagination-bullet-active {background: #fff; opacity: 1;} } #s9 {padding: 17rem 0 15rem; overflow: hidden;} #s9 .titArea .ico {width: 7rem;} #s9 .titArea .subt {margin-top: 2.2rem; line-height: 2.8rem; letter-spacing: 0.1em;} #s9 .titArea .tit {margin-top: 4rem; line-height: 8.5rem;} #s9 .s9Swiper {margin-top: 6rem; overflow: hidden;} #s9 .item {gap: 8rem;} #s9 .item > .img {width: 70rem; height: 45rem; flex-shrink: 0; border: 1px solid #ddd; border-radius: 2rem; overflow: hidden;} #s9 .item > .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s9 .txts {flex: 1; padding-top: 6.1rem;} #s9 .txts .point {line-height: 2.5rem; letter-spacing: 0.05em;} #s9 .txts .tit {margin-top: 2.5rem; line-height: 5rem;} #s9 .txts .line {margin-top: 3rem; height: 2px; background: #e2e2e2;} #s9 .txts .wrt {margin-top: 3rem; line-height: 3.8rem;} #s9 .counter {margin-top: 5rem; height: 4rem;} #s9 .counter .page {align-items: baseline; gap: 0.6rem;} #s9 .counter .total {color: #a1a1a1;} #s9 .counter .navs {margin-left: 3.6rem; gap: 0.8rem;} #s9 .counter .navs > div {width: 4rem;} @media all and (max-width: 880px){ #s9 {padding: 7rem 0 8rem;} #s9 .inner {max-width: var(--innerMo);} #s9 .titArea .ico {width: 4.7rem;} #s9 .titArea .subt {font-size: 1.6rem; line-height: 1.6rem; margin-top: 2rem;} #s9 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s9 .s9Swiper {margin-top: 3rem;} #s9 .item {flex-direction: column; gap: 3.5rem;} #s9 .item > .img {width: 100%; height: 21.5rem; border-radius: 1.5rem;} #s9 .txts {padding-top: 0;} #s9 .txts .point {font-size: 1.8rem; line-height: 1.8rem;} #s9 .txts .tit {font-size: 3.5rem; line-height: 3.5rem; margin-top: 2rem;} #s9 .txts .line {margin-top: 1.5rem;} /* 3번 슬라이드만 본문이 3줄이라, 시안처럼 카운터 위치를 고정 */ #s9 .txts .wrt {font-size: 1.5rem; line-height: 2.5rem; margin-top: 1.5rem; height: 7.5rem;} #s9 .counter {margin-top: 0;} } #s10 {height: 70.6rem; overflow: hidden;} #s10 .band {left: 0; top: 27.7rem; width: 100%; height: 36.4rem; background: #f5f5f5;} #s10 .photo {left: 50%; margin-left: 6rem; top: 0; width: 90rem; height: 64.1rem; border-radius: 5rem 0 0 0; overflow: hidden;} #s10 .photo img {width: 100%; height: 100%; object-fit: cover; display: block;} #s10 .bgIco {left: 5rem; top: 45.3rem; width: 16.4rem;} #s10 .txtArea {padding-top: 6rem;} #s10 .txtArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s10 .txtArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s10 .txtArea .wrt1 {margin-top: 10rem; line-height: 3.8rem;} #s10 .txtArea .wrt2 {margin-top: 2.5rem; line-height: 3.8rem;} #s10 .banner {top: 57.6rem; left: 0; width: 140rem; height: 13rem; background: #163e09; border-radius: 6.5rem; z-index: 1;} #s10 .banner a {display: flex; align-items: center; justify-content: space-between; padding: 0 8rem; height: 100%;} #s10 .banner a .arrow {width: 6rem; height: 6rem; border-radius: 50%; flex-shrink: 0; transition: 0.4s; right: 0;} #s10 .banner a:hover .arrow {right: -1rem;} @media all and (max-width: 880px){ #s10 {height: 65.2rem;} #s10 .band {top: 13rem; height: 45.3rem;} #s10 .photo {left: 0; margin-left: 0; top: 33rem; width: 100%; height: 26.7rem; border-radius: 5rem 0 0 0;} #s10 .bgIco {left: 24.5rem; top: 16.1rem; width: 10.96rem;} #s10 .inner {max-width: var(--innerMo);} #s10 .txtArea {padding-top: 0;} #s10 .txtArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s10 .txtArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s10 .txtArea .wrt1 {font-size: 1.6rem; line-height: 2.6rem; margin-top: 4.5rem;} #s10 .txtArea .wrt2 {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1rem;} #s10 .banner {top: 54.2rem; width: 33.5rem; height: 11rem; border-radius: 1.5rem;} #s10 .banner a {padding: 0 2rem;} #s10 .banner a .tit {font-size: 2.2rem; line-height: 2.8rem; text-align: left;} #s10 .banner a .arrow {width: 4rem; height: 4rem;} } #s11 {padding: 17rem 0 15rem; overflow: hidden;} #s11 .titArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s11 .titArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s11 .titArea .wrt {margin-top: 2.5rem; line-height: 3.8rem;} #s11 .s11Swiper {max-width: 140rem; margin: 6rem auto 0;} #s11 .s11Swiper .swiper-wrapper {gap: 4rem;} #s11 .card {width: 44rem;} #s11 .card .img {width: 100%; height: 28rem; border-radius: 1.5rem; overflow: hidden;} #s11 .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s11 .card .badge {width: 10.4rem; height: 3rem; line-height: 3rem; margin: 3.5rem auto 0; background: #a4c19a; border-radius: 1.5rem;} #s11 .card .tit {margin-top: 2rem; line-height: 3.5rem;} #s11 .card .wrt {margin-top: 2rem; line-height: 3.2rem;} @media all and (max-width: 880px){ #s11 {padding: 7rem 0 8rem;} #s11 .inner {max-width: var(--innerMo);} #s11 .titArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s11 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 1.5rem;} #s11 .titArea .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.5rem;} #s11 .s11Swiper {max-width: 100%; margin-top: 3rem;} #s11 .s11Swiper .swiper-wrapper {gap: 0;} #s11 .card {width: 33.5rem;} #s11 .card .img {height: 21.3rem;} #s11 .card .badge {font-size: 1.6rem; margin-top: 3rem;} #s11 .card .tit {font-size: 3.2rem; line-height: 3.2rem; margin-top: 1.8rem;} #s11 .card .wrt {margin-top: 1.7rem;} } #s12 {height: 119rem; border-radius: 12rem 12rem 0 0; overflow: hidden; background-color: #292929; background-image: url(../img/s12_bg_pc.jpg); background-size: cover; background-position: center;} #s12 .inner {padding-top: 13rem;} #s12 .titArea .ico {width: 7rem;} #s12 .titArea .subt {margin-top: 2.2rem; line-height: 2.8rem; letter-spacing: 0.1em;} #s12 .titArea .tit {margin-top: 4rem; line-height: 8.5rem;} #s12 .accoList {margin-left: 80rem; width: 60rem; margin-top: 10rem;} #s12 .accoList .item {background: #313131; border-radius: 1.5rem; padding: 2.9rem 4rem;} #s12 .accoList .item + .item {margin-top: 2rem;} #s12 .accoList .head {} #s12 .accoList .head .tit {line-height: 3.3rem;} #s12 .accoList .head .arr {right: 0; top: 1.1rem; width: 2rem; transition: 0.3s;} #s12 .accoList .item.on .head .arr {transform: scaleY(-1);} #s12 .accoList .body {display: none;} #s12 .accoList .item.on .body {display: block;} #s12 .accoList .body .wrt {padding-top: 2rem; line-height: 3.2rem;} @media all and (max-width: 880px){ #s12 {height: 92rem; border-radius: 5rem 5rem 0 0; background-image: url(../img/s12_bg_mo.jpg);} #s12 .inner {max-width: var(--innerMo); padding-top: 7rem;} #s12 .titArea .ico {width: 4.8rem;} #s12 .titArea .subt {font-size: 1.4rem; line-height: 1.4rem; margin-top: 2.05rem;} #s12 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s12 .accoList {margin-left: 0; width: 100%; margin-top: 3.55rem;} #s12 .accoList .item {padding: 2.5rem 3rem;} #s12 .accoList .item + .item {margin-top: 1rem;} #s12 .accoList .head .tit {font-size: 2.4rem; line-height: 2.4rem;} #s12 .accoList .head .arr {top: 0.8rem; width: 1.6rem;} #s12 .accoList .body .wrt {font-size: 1.6rem; padding-top: 2rem; line-height: 2.6rem;} } #s13 {padding: 15rem 0 15rem; overflow: hidden;} #s13 .titArea .tit {line-height: 6.5rem;} #s13 .s13Swiper {max-width: 140rem; margin: 5rem auto 0;} #s13 .s13Swiper .swiper-wrapper {gap: 2rem;} #s13 .card {width: 33.5rem; height: 45rem; border-radius: 2rem; overflow: hidden;} #s13 .card .img {width: 100%; height: 100%;} #s13 .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s13 .card .tit {left: 0; top: 33rem; line-height: 4rem;} @media all and (max-width: 880px){ #s13 {padding: 8rem 0 8rem;} #s13 .inner {max-width: var(--innerMo);} #s13 .titArea .tit {font-size: 3.2rem; line-height: 3.2rem;} #s13 .s13Swiper {max-width: 100%; margin-top: 3.5rem;} #s13 .s13Swiper .swiper-wrapper {gap: 0;} } #s14 {height: 98.7rem; overflow: hidden;} #s14 .band {left: 0; top: 35.7rem; width: 100%; height: 63rem; background: #608c52;} #s14 .bgIco {right: 3.3rem; top: 67.2rem; width: 26.6rem;} #s14 .titArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s14 .titArea .tit {margin-top: 2.5rem; line-height: 6.5rem;} #s14 .s14Swiper {margin-top: 6rem;} #s14 .s14Swiper .swiper-wrapper {flex-wrap: wrap; gap: 3rem;} #s14 .card {display: flex; width: 68.5rem; height: 28rem; background: #f6f6f6; border: 1px solid #ddd; border-radius: 2rem; overflow: hidden;} #s14 .card .img {width: 29.9rem; height: 100%; flex-shrink: 0;} #s14 .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s14 .card .txts {padding: 5.4rem 0 0 4rem; width: 34rem;} #s14 .card .txts .tit {line-height: 3rem;} #s14 .card .txts .wrt {margin-top: 2rem; line-height: 3rem;} @media all and (max-width: 880px){ #s14 {height: 69.7rem;} #s14 .inner {max-width: var(--innerMo);} #s14 .band {top: 24.5rem; height: 45.2rem;} #s14 .bgIco {display: none;} #s14 .titArea .subt {font-size: 1.4rem; line-height: 1.4rem;} #s14 .titArea .tit {font-size: 2.8rem; line-height: 3.8rem; margin-top: 2rem;} #s14 .s14Swiper {margin-top: 3.5rem;} #s14 .s14Swiper .swiper-wrapper {flex-wrap: nowrap; gap: 0;} #s14 .card {flex-direction: column; width: 33.5rem; height: 45.4rem; border-radius: 1.5rem;} #s14 .card .img {width: 100%; height: 23rem;} #s14 .card .txts {width: 100%; padding: 3.5rem 2.5rem 0;} #s14 .card .txts .tit {font-size: 2.8rem; line-height: 2.8rem;} #s14 .card .txts .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.6rem;} #s14 .s14pg {display: flex; justify-content: center; gap: 0.6rem; position: relative; bottom: 0; margin-top: 2rem;} #s14 .s14pg .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; opacity: 1; background: #fff; margin: 0;} #s14 .s14pg .swiper-pagination-bullet-active {background: #9CC78E; opacity: 1;} } #s15 {padding: 17rem 0 17rem; overflow: hidden;} #s15 .titArea .ico {width: 7rem;} #s15 .titArea .subt {margin-top: 2.2rem; line-height: 2.8rem; letter-spacing: 0.1em;} #s15 .titArea .tit {margin-top: 4rem; line-height: 8.5rem;} #s15 .titArea .notice {margin-top: 2.5rem; line-height: 3.2rem;} #s15 .guide {margin-top: 5.4rem; gap: 2rem;} #s15 .guide .txt {line-height: 2.6rem;} #s15 .guide .tri {width: 0; height: 0; border-left: 1.3rem solid transparent; border-right: 1.3rem solid transparent; border-top: 2.25rem solid #285a18; flex-shrink: 0;} #s15 .s15Swiper {margin-top: 4rem;} #s15 .s15Swiper .swiper-wrapper {gap: 4rem;} #s15 .card {display: block; width: 44rem;} #s15 .card .img {width: 100%; height: 28rem; border: 1px solid #ddd; overflow: hidden;} #s15 .card .img img {width: 100%; height: 100%; object-fit: cover; display: block;} #s15 .card .tit {margin-top: 2.5rem; line-height: 3.6rem;} #s15 .card .date {margin-top: 1.5rem; line-height: 1.8rem;} @media all and (max-width: 880px){ #s15 {padding: 8rem 0 8rem;} #s15 .inner {max-width: var(--innerMo);} #s15 .titArea .ico {width: 3.8rem;} #s15 .titArea .subt {font-size: 1.6rem; line-height: 1.6rem; margin-top: 1.5rem;} #s15 .titArea .tit {font-size: 3rem; line-height: 3rem; margin-top: 2rem;} #s15 .titArea .notice {font-size: 1.6rem; line-height: 2.6rem; margin-top: 2rem;} #s15 .guide {margin-top: 3.5rem; gap: 1.2rem;} #s15 .guide .txt {font-size: 2rem; line-height: 2.6rem;} #s15 .guide .tri {border-left-width: 1rem; border-right-width: 1rem; border-top-width: 1.65rem;} #s15 .s15Swiper {margin-top: 2.6rem;} #s15 .s15Swiper .swiper-wrapper {gap: 0;} #s15 .card {width: 33.5rem;} #s15 .card .img {height: 21.3rem;} #s15 .card .tit {font-size: 2.2rem; line-height: 3.2rem; margin-top: 2rem;} #s15 .card .date {font-size: 1.6rem; line-height: 1.6rem; margin-top: 2rem;} /* .mo 가 .flex 를 덮어써서 세로로 쌓이는 것 방지 */ #s15 .navs {display: flex; margin-top: 2rem; gap: 0.9rem;} #s15 .navs > div {width: 4rem;} } #s16 {height: 70rem; background: #f6f6f6; overflow: hidden;} #s16 .photo {left: 50%; top: 10rem; width: 91rem; height: 50rem; border-radius: 3rem; overflow: hidden;} #s16 .photo img {width: 100%; height: 100%; object-fit: cover; display: block;} #s16 .txtArea {padding-top: 14rem;} #s16 .txtArea .subt {line-height: 2.2rem; letter-spacing: 0.1em;} #s16 .txtArea .tit {margin-top: 3rem; line-height: 8rem;} #s16 .txtArea .wrt {margin-top: 3rem; line-height: 3.8rem;} #s16 .btn {width: 32.7rem; height: 8rem; margin-top: 6rem; padding-left: 5rem; gap: 1.8rem; background: var(--fcp); border-radius: 4.5rem;} #s16 .btn .ico {display: block; width: 3.9rem; flex-shrink: 0;} #s16 .btn .txt {line-height: 2.8rem;} @media all and (max-width: 880px){ #s16 {height: 58.3rem;} #s16 .inner {max-width: var(--innerMo);} #s16 .photo {left: 50%; transform: translateX(-50%); top: 32.9rem; width: 33.5rem; height: 18.4rem; border-radius: 1rem;} #s16 .txtArea {padding-top: 7rem; text-align: center;} #s16 .txtArea .subt {font-size: 1.6rem; line-height: 1.6rem;} #s16 .txtArea .tit {font-size: 3.2rem; line-height: 4.2rem; margin-top: 2rem;} #s16 .txtArea .wrt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.5rem;} #s16 .btn {width: 23.5rem; height: 5.4rem; margin: 3rem auto 0; padding-left: 3.8rem; gap: 1rem;} #s16 .btn .ico {width: 2.8rem;} #s16 .btn .txt {font-size: 2rem; line-height: 2rem;} } #s17 {height: 60rem; display: flex; align-items: center; justify-content: center; background-image: url(../img/s17_bg_pc.jpg); background-size: cover; background-position: center; overflow: hidden;} #s17 .txtArea .ico {width: 7rem;} #s17 .txtArea .subt {margin-top: 2.2rem; line-height: 2.8rem; letter-spacing: 0.1em;} #s17 .txtArea .tit {margin-top: 4rem; line-height: 8.5rem;} @media all and (max-width: 880px){ #s17 {height: 43rem; background-image: url(../img/s17_bg_mo.jpg);} #s17 .txtArea .ico {width: 4.5rem;} #s17 .txtArea .subt {font-size: 1.5rem; line-height: 1.5rem; margin-top: 2rem;} #s17 .txtArea .tit {font-size: 3rem; line-height: 4rem; margin-top: 2rem;} } #contact {height: 99.3rem; background: #f6f6f6; overflow: hidden;} #contact .photo {right: 0; top: 0; width: 50%; height: 100%;} #contact .photo img {width: 100%; height: 100%; object-fit: cover; display: block;} #contact .inner {padding-top: 11rem;} #contact .info {width: 62rem;} #contact .info .tit {line-height: 2.4rem;} #contact .info .tit2 {margin-top: 6rem;} #contact .info .line {margin-top: 2rem; height: 1px; background: #d1d1d1;} #contact .info .addr {margin-top: 3rem; line-height: 2.8rem;} #contact .info .tel {margin-top: 1.5rem; line-height: 5rem;} #contact .info .timeList {margin-top: 3rem;} #contact .info .timeList li {line-height: 3.5rem;} #contact .info .timeList .lb {width: 12.6rem; flex-shrink: 0;} #contact .info .maps {margin-top: 3rem; width: 62rem; border-radius: 1rem; overflow: hidden;} #contact .info .maps img {width: 100%; height: 100%; object-fit: cover; display: block;} .root_daum_roughmap .wrap_controllers {display: none} .root_daum_roughmap .cont {display: none} @media all and (max-width: 880px){ #contact {height: 110rem;} #contact .photo {position: static; width: 100%; height: 38.8rem;} #contact .inner {max-width: var(--innerMo); padding-top: 6rem;} #contact .info {width: 100%;} #contact .info .tit2 {margin-top: 4.5rem;} #contact .info .line {margin-top: 1.5rem;} #contact .info .addr {font-size: 2rem; line-height: 2rem; margin-top: 2rem;} #contact .info .tel {font-size: 3.5rem; line-height: 3.5rem; margin-top: 1rem;} #contact .info .timeList {margin-top: 2rem;} #contact .info .timeList li {line-height: 2.8rem;} #contact .info .timeList span {font-size: 1.8rem;} #contact .info .timeList .lb {width: 9.4rem;} #contact .info .maps {margin-top: 2rem; width: 100%;} } /* ======================== 서브페이지 ======================== */ /* 진료이야기 목록 */ #board {padding: 25rem 0 17rem;} #board .tit .icon {width: 7rem; height: 3.5rem;} #board .tit .icon img {width: 100%; height: 100%; object-fit: contain;} #board .tit h2 {margin-top: 4rem; line-height: 8.5rem;} #board .tit .subt {margin-top: 3.5rem; line-height: 3.5rem;} #board .boardList {margin-top: 8rem; gap: 6rem 4rem;} #board .boardList li {width: calc((100% - 4rem) / 2);} #board .boardList .thumb {position: relative; height: 40rem; overflow: hidden;} #board .boardList .thumb img {width: 100%; height: 100%; object-fit: cover; display: block;} /* 회원전용 뱃지 */ #board .boardList .badge {top: 3.1rem; right: 2.3rem; height: 4.5rem; padding: 0 1.9rem; border-radius: 5rem; background: #8b8b8b; line-height: 2.4rem;} #board .boardList .txt {margin-top: 4rem; line-height: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #board .boardList .date {margin-top: 2rem; line-height: 2.4rem;} #board .btmArea {margin-top: 12.3rem; height: 4.2rem;} #board .paging {gap: 2rem;} #board .paging .arw {width: 0.7rem; height: 1.2rem;} #board .paging .arw img {width: 100%; height: 100%;} #board .paging .num {gap: 0.4rem;} #board .paging .num a {width: 4rem; height: 4rem; border-radius: 50%; line-height: 2.56rem;} #board .paging .num li.on a {background: #e8ebed;} #board .writeBtn {right: 0; top: 0; width: 10rem; height: 4.2rem; border-radius: 0.6rem; background: #4a8537; line-height: 2.7rem; color: #fff;} @media all and (max-width: 880px){ #board {padding: 12rem 0 13.2rem;} #board .inner {max-width: var(--innerMo);} #board .tit .icon {width: 4rem; height: 2rem;} #board .tit h2 {font-size: 3rem; line-height: 3rem; margin-top: 2rem;} #board .tit .subt {font-size: 1.6rem; line-height: 2.6rem; margin-top: 1.5rem;} #board .boardList {margin-top: 5rem; gap: 4rem 0;} #board .boardList li {width: 100%;} #board .boardList .thumb {height: 19.7rem;} #board .boardList .badge {top: 1.5rem; right: 1.5rem; height: 3rem; padding: 0 1.2rem; font-size: 1.6rem; line-height: 1.6rem;} #board .boardList .txt {font-size: 2.2rem; line-height: 2.2rem; margin-top: 2rem;} #board .boardList .date {font-size: 1.8rem; line-height: 1.8rem; margin-top: 1.5rem;} /* 모바일은 페이징 아래로 글작성 버튼이 내려옴 */ #board .btmArea {flex-direction: column; height: auto; margin-top: 8rem;} #board .writeBtn {position: static; margin-top: 2.5rem; width: 6.9rem; height: 2.9rem; border-radius: 0.4rem; font-size: 1.4rem; line-height: 2.1rem;} } /* 진료이야기 상세 */ #view {padding: 25rem 0 22rem;} #view .titArea .icon {width: 7rem; height: 3.5rem;} #view .titArea .icon img {width: 100%; height: 100%; object-fit: contain;} #view .titArea .label {margin-top: 2.5rem; line-height: 2.6rem;} #view .titArea .bar {margin-top: 3rem; width: 3.2rem; height: 0.2rem; background: #4a8537;} #view .titArea .tit {margin-top: 4rem; line-height: 5.2rem;} #view .titArea .date {margin-top: 3rem; line-height: 2rem;} /* 목차 */ #view .toc {margin-top: 8rem; padding: 4rem 6rem; background: #f2f2f2; border-radius: 2rem;} #view .toc .tocTit {line-height: 2.8rem;} #view .toc .line {margin-top: 2rem; height: 1px; background: #c9c9c9;} #view .toc .tocList {margin-top: 3rem;} #view .toc .tocList > li + li {margin-top: 2rem;} #view .toc .tocList > li > a {display: block; line-height: 2.4rem;} #view .toc .tocList .sub {margin-top: 1.5rem; padding-left: 2rem;} #view .toc .tocList .sub li {line-height: 3.2rem;} /* 본문 */ #view .cont {margin-top: 4rem;} #view .cont p {line-height: 3.2rem;} #view .toc + .cont {margin-top: 6rem;} /* 소제목 */ #view .secTit {display: flex; align-items: center; margin-top: 8rem; min-height: 8rem; padding: 2.6rem 0 2.6rem 4.5rem; background: #e8f2e4; border-left: 0.6rem solid #4a8537; border-radius: 1rem; line-height: 2.8rem; scroll-margin-top: 12rem;} /* 본문 이미지 */ #view .figure {margin-top: 4rem; height: 50rem; border-radius: 2rem; overflow: hidden;} #view .figure img {width: 100%; height: 100%; object-fit: cover; display: block;} /* 강조 문구 */ #view .point {margin-top: 6rem; padding-left: 1.2rem; border-left: 0.4rem solid #4a8537; line-height: 2.6rem;} /* 상담 배너 */ #view .banner {margin-top: 12rem; padding: 6.5rem 0; background: #163e09; border-radius: 2rem;} #view .banner .bTit {line-height: 3rem;} #view .banner .btns {margin-top: 3rem; gap: 2rem;} #view .banner .btn {width: 24rem; height: 6rem; border-radius: 3rem; gap: 1.2rem;} #view .banner .btn .ico {width: 2rem; height: 2rem;} #view .banner .btn .ico img {width: 100%; height: 100%; object-fit: contain;} #view .banner .btn span {line-height: 2.2rem;} #view .banner .btn.reserv {background: #fff; color: #123007;} #view .banner .btn.call {background: #4a8537;} /* 작성자 */ #view .writer {margin-top: 4rem; height: 22rem; padding-left: 7rem; background: #f5f9f3; border-radius: 2rem;} #view .writer .photo {width: 11rem; height: 11rem; border-radius: 50%; overflow: hidden; flex-shrink: 0;} #view .writer .photo img {width: 100%; height: 100%; object-fit: cover; display: block;} #view .writer .txt {margin-left: 4rem;} #view .writer .txt .lb {line-height: 1.5rem;} #view .writer .txt .name {margin-top: 2rem; line-height: 3.2rem;} #view .writer .txt .addr {margin-top: 2rem; line-height: 1.8rem;} #view .writer .txt .addr .pc {display: inline;} /* 다른 칼럼 */ #view .related {margin-top: 4rem; padding: 5rem 6rem; background: #f5f9f3; border-radius: 2rem;} #view .related .rTit {line-height: 2.8rem;} #view .related .rList {margin-top: 3rem;} #view .related .rList li + li {margin-top: 2rem;} #view .related .rList a {height: 16rem; padding-left: 3.4rem; background: #fff; border: 1px solid #ddd; border-radius: 1.5rem;} #view .related .thumb {width: 18.7rem; height: 11rem; border-radius: 1rem; overflow: hidden; flex-shrink: 0;} #view .related .thumb img {width: 100%; height: 100%; object-fit: cover; display: block;} #view .related .txt {margin-left: 3rem; overflow: hidden;} #view .related .txt .tit {line-height: 2.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #view .related .txt .meta {margin-top: 1.5rem; line-height: 1.8rem;} @media all and (max-width: 880px){ #view {padding: 12rem 0 8rem;} #view .inner {max-width: var(--innerMo);} #view .titArea .icon {width: 3.5rem; height: 1.75rem;} #view .titArea .label {margin-top: 1.25rem; font-size: 1.5rem; line-height: 1.5rem;} #view .titArea .bar {margin-top: 1.5rem; width: 2rem;} #view .titArea .tit {margin-top: 2rem; font-size: 2.2rem; line-height: 3rem;} #view .titArea .date {margin-top: 2rem; font-size: 1.5rem; line-height: 1.5rem;} #view .toc {margin-top: 4rem; padding: 2.5rem 2rem; border-radius: 1rem;} #view .toc .tocTit {font-size: 1.8rem; line-height: 1.8rem;} #view .toc .line {margin-top: 1.2rem;} #view .toc .tocList {margin-top: 2rem;} #view .toc .tocList > li + li {margin-top: 1.5rem;} #view .toc .tocList > li > a {font-size: 1.6rem; line-height: 1.6rem;} #view .toc .tocList .sub {margin-top: 1rem; padding-left: 1rem; font-size: 1.4rem;} #view .toc .tocList .sub li {line-height: 2.2rem;} #view .cont {margin-top: 3rem;} #view .cont p {font-size: 1.5rem; line-height: 2.5rem;} #view .toc + .cont {margin-top: 4rem;} /* 강조 문구 바로 뒤 본문은 간격을 좁게 */ #view .point + .cont {margin-top: 2rem;} #view .secTit {margin-top: 4rem; min-height: 4.5rem; padding: 1.05rem 0 1.05rem 2rem; border-left-width: 0.4rem; border-radius: 0.8rem; font-size: 1.8rem; line-height: 2.4rem; scroll-margin-top: 8rem;} #view .figure {margin-top: 3rem; height: 14rem; border-radius: 1.5rem;} /* 모바일 강조 문구는 자간이 좁아야 한 줄에 들어감 */ #view .point {margin-top: 4rem; padding-left: 0.9rem; border-left-width: 0.3rem; font-size: 1.7rem; line-height: 1.9rem; letter-spacing: -0.04em;} #view .figure + .point {margin-top: 3rem;} #view .banner {margin-top: 8rem; padding: 5rem 0; border-radius: 1.5rem;} #view .banner .bTit {font-size: 2.2rem; line-height: 2.2rem;} #view .banner .btns {flex-direction: column; margin-top: 2.5rem; gap: 0.8rem;} #view .banner .btn {width: 20rem; height: 4.2rem; gap: 0.8rem;} #view .banner .btn .ico {width: 1.6rem; height: 1.6rem;} #view .banner .btn span {font-size: 1.8rem; line-height: 1.8rem;} #view .writer {align-items: flex-start; margin-top: 2rem; height: 17.5rem; padding: 3.5rem 2rem; border-radius: 1.5rem;} #view .writer .photo {width: 7rem; height: 7rem;} #view .writer .txt {margin-left: 1.8rem;} #view .writer .txt .lb {font-size: 1.3rem; line-height: 1.3rem;} #view .writer .txt .name {margin-top: 1.2rem; font-size: 2.4rem; line-height: 2.4rem;} #view .writer .txt .addr {margin-top: 1.2rem; font-size: 1.4rem; line-height: 2.2rem;} #view .writer .txt .addr .pc {display: none;} #view .related {margin-top: 2rem; padding: 3rem 2rem; border-radius: 1.5rem;} #view .related .rTit {font-size: 1.8rem; line-height: 1.8rem;} #view .related .rList {margin-top: 2.5rem;} #view .related .rList li + li {margin-top: 1rem;} /* 모바일은 썸네일 없이 텍스트만 */ #view .related .rList a {height: auto; padding: 1.9rem 1.9rem 2.4rem; border-radius: 1rem;} #view .related .txt {margin-left: 0;} #view .related .txt .tit {font-size: 1.6rem; line-height: 2.4rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #view .related .txt .meta {margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.3rem;} } /* 플로팅 퀵버튼 */ /* 빈 여백이 본문 클릭을 가로채지 않도록 컨테이너는 통과시키고 버튼만 받습니다 */ .quick_btn {z-index: 80; right: 5rem; top: calc(50% + 2.5rem); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; pointer-events: none;} .quick_btn .qList a, .quick_btn .qToggle, .quick_btn .qTop {pointer-events: auto;} .quick_btn .qList {width: 9rem; padding: 1.2rem 1rem; background: var(--fcp); border-radius: 4.5rem;} /* 시안의 구분선 = 흰색 20% (좌우 1rem 씩 들어와 7rem 폭) */ .quick_btn .qList li + li {border-top: 1px solid rgba(255,255,255,0.2);} .quick_btn .qList a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; height: 8rem; transition: opacity 0.2s;} .quick_btn .qList a:hover {opacity: 0.75;} .quick_btn .qList .ico {display: flex; align-items: center; justify-content: center; height: 2.8rem;} .quick_btn .qList .ico img {width: auto; height: 2.6rem; display: block;} .quick_btn .qList .youtube .ico img {height: 2.8rem;} .quick_btn .qList .lb {font-size: 1.2rem; font-weight: 700; line-height: 1.2rem; color: #fff; white-space: nowrap;} .quick_btn .qTop {display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; background: #fff; border-radius: 50%; box-shadow: 0 0 0.5rem rgba(0,0,0,0.15); transition: 0.2s;} .quick_btn .qTop:hover {box-shadow: 0 0 0.5rem rgba(0,0,0,0.25);} .quick_btn .qTop img {width: auto; height: 3.4rem; display: block;} /* + 버튼은 모바일에서만 */ .quick_btn .qToggle {display: none;} @media all and (max-width: 880px){ /* 모바일은 시안대로 우측 하단 고정. + 를 누르면 목록이 위로 펼쳐집니다 */ .quick_btn {right: 2rem; top: auto; bottom: 3rem; transform: none; align-items: flex-end; gap: 0.8rem;} /* 펼친 상태 시안 기준 : 바 6rem x 35.4rem, 구분선 4.6rem, 라벨 1rem 평소엔 숨겨 두고 + 를 누르면 아래에서 위로 스르륵 올라옵니다 */ .quick_btn .qList { width: 6rem; padding: 0.9rem 0.7rem; border-radius: 4.5rem; transform-origin: 50% 100%; transform: translateY(2rem) scale(0.92); opacity: 0; visibility: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s 0.35s; } .quick_btn.on .qList { transform: none; opacity: 1; visibility: visible; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s 0s; } .quick_btn .qList a {height: 5.6rem; gap: 0.6rem;} .quick_btn .qList .ico {height: 2rem;} .quick_btn .qList .ico img {height: 2rem;} .quick_btn .qList .blog .ico img, .quick_btn .qList .insta .ico img, .quick_btn .qList .map .ico img {height: 1.8rem;} .quick_btn .qList .youtube .ico img {height: 2rem;} .quick_btn .qList .lb {font-size: 1rem; line-height: 1rem;} .quick_btn .qToggle {position: relative; display: block; width: 6rem; height: 6rem; padding: 0; background: var(--fcp); border: 0; border-radius: 50%; cursor: pointer;} .quick_btn .qToggle .bar {position: absolute; left: 50%; top: 50%; width: 0.2rem; height: 1.8rem; margin: -0.9rem 0 0 -0.1rem; background: #fff; border-radius: 0.1rem; transition: transform 0.3s;} .quick_btn .qToggle .bar:last-child {transform: rotate(90deg);} /* 열리면 + 가 × 로 바뀝니다 */ .quick_btn.on .qToggle .bar {transform: rotate(45deg);} .quick_btn.on .qToggle .bar:last-child {transform: rotate(135deg);} .quick_btn .qTop {width: 6rem; height: 6rem;} .quick_btn .qTop img {height: 1.8rem;} }