@charset "utf-8";

#inc01{overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:115px 20px 170px;font-family:var(--k-font);word-break:keep-all;background-color:var(--bg-color)}
#inc01 .atc__inner{position:relative;z-index:1}
#inc01 .link--primary{padding:10px 30px;font-size:15px}
/* 인사말 */
#inc01 .group-greeting{display:flex;flex-direction:column;align-items:center;margin-bottom:160px;white-space:pre-line;text-align:center}
#inc01 .group-greeting h2{padding-bottom:40px;font-family:var(--k-font) !important;font-size:35px;font-weight:300;color:#333;line-height:1.15}
#inc01 .group-greeting .desc{padding-bottom:50px;font-size:17px;line-height:1.5;word-break:keep-all}
#inc01 .group-greeting .btn-wrap{display:flex;gap:13px}

/* 진료과목 */
#inc01 .group-clinic{display:flex;justify-content:center;margin-bottom:145px}
#inc01 .group-clinic .area-tit{padding-top:70px}

#inc01 .group-clinic .fl-l{flex:1;max-width:620px;padding-top:70px}
#inc01 .group-clinic .tab-list{display:flex;flex-direction:column;gap:34px;counter-reset:clinic}
#inc01 .group-clinic .tab-item{cursor:pointer}
#inc01 .group-clinic .tab-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:65px}
#inc01 .group-clinic .tab-item::before{position:absolute;top:0;left:0;content:counter(clinic, decimal-leading-zero);counter-increment:clinic;margin-top:-4px;font-size:15px;opacity:0;visibility:hidden;transition:opacity .2s;will-change:opacity}
#inc01 .group-clinic .tab-item .clinic__tit{font-size:20px;font-weight:400;line-height:100%;color:rgba(51,51,51,.4);transition:color 0.2s;will-change:color}
#inc01 .group-clinic .tab-item .info{display:flex;flex-direction:column;height:0;overflow:hidden;transition:height 0.2s;will-change:height}
#inc01 .group-clinic .tab-item .clinic__desc{padding-top:10px;padding-bottom:20px;font-size:15px;line-height:1.6;color:rgba(54,47,45,0.7)}
#inc01 .group-clinic .tab-item .link--more{margin-bottom:12px;width:70px;height:30px;padding:0;font-size:14px;line-height:1.6}
#inc01 .group-clinic .tab-item .link--more:last-child{margin-bottom:0}
#inc01 .group-clinic .tab-item .thumb-box{display:none}
#inc01 .group-clinic .tab-item.on::before{opacity:1;visibility:visible}
#inc01 .group-clinic .tab-item.on .clinic__tit{color:#362f2d}
#inc01 .group-clinic .tab-item.on  .info{height:auto}

#inc01 .group-clinic .fl-r{position:relative;max-width:640px;width:100%;height:536px}
#inc01 .group-clinic .fl-r .tab-con{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.1s}
#inc01 .group-clinic .fl-r .tab-con.view{opacity:1;visibility:visible}
#inc01 .group-clinic .fl-r .tab-con img{width:100%;opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.4s}
#inc01 .group-clinic .fl-r .tab-con.view img{opacity:1;visibility:visible}
#inc01 .group-clinic .fl-r .btn-wrap{position:absolute;bottom:0;right:0;width:100%}
#inc01 .group-clinic .fl-r .link--moreicon{position:absolute;bottom:0;right:0;display:none;align-items:center;justify-content:center;width:123px;height:123px;border-radius:100px;background-color:#362f2d}
#inc01 .group-clinic .fl-r .link--moreicon svg{width:32px;height:32px;stroke:#9b9796;transition:stroke .2s}
#inc01 .group-clinic .fl-r .link--moreicon:hover svg{stroke:#fff;animation:arrow 0.6s}
#inc01 .group-clinic .fl-r .link--moreicon.view{display:flex}
@keyframes arrow {0%{transform:translateX(0)} 50%{transform:translateX(10px)} 100%{transform:translateX(0)}}

/* 대표원장 */
#inc01 .group-dct{display:grid;align-items:center;grid-template-columns:repeat(2,1fr)}
#inc01 .group-dct .fl-l .thumb-box{overflow:hidden;height:362px;border-radius:10px;background-color:#ccc;background-image:url(./img/doctor.png);background-repeat:no-repeat;background-size:cover;background-position:center -100px}
#inc01 .group-dct .fl-r{padding:0 85px}
#inc01 .group-dct .fl-r .cmt{font-size:28px;font-weight:500;line-height:1.36;color:#333;word-break:keep-all}
#inc01 .group-dct .fl-r .desc{padding:25px 0 60px;font-size:18px;line-height:1.4;word-break:keep-all}

#inc01 .bg{position:absolute;top:-100px;right:-7px;pointer-events:none}

/* 반응형 [s] */
@media (max-width:1440px){
#inc01 .group-greeting{margin-bottom:100px}
#inc01 .group-greeting h2{font-size:32px}
#inc01 .group-clinic{padding-top:70px;margin-bottom:100px}
#inc01 .group-clinic .area-tit{position:absolute;top:0;left:50%;transform:translateX(-50%);padding-top:0}
#inc01 .group-clinic .fl-l{flex:none;flex-shrink:0;max-width:630px}
#inc01 .group-clinic .tab-item{padding-left:40px}
#inc01 .group-clinic .fl-r{max-width:570px}
#inc01 .group-clinic .fl-r .tab-con{top:50%;transform:translateY(-50%)}
#inc01 .group-clinic .fl-r .link--moreicon{width:clamp(100px,8.54vw,123px);height:auto;aspect-ratio:1}
#inc01 .group-clinic .fl-r .link--moreicon svg{width:30px;height:30px}#inc01 .group-dct .fl-r{padding:0 0 0 45px}
#inc01 .group-dct .fl-r .cmt{font-size:24px}
#inc01 .group-dct .fl-r .desc{font-size:17px}
#inc01 .bg{opacity:0.3}
}
@media (max-width:1200px){
#inc01{padding:100px 20px}
#inc01 .group-greeting h2{font-size:30px}
#inc01 .group-dct .fl-l .thumb-box{background-position:center -65px}
#inc01 .bg{opacity:0.25}
}
@media (max-width:1024px){
#inc01{padding:85px 20px}
#inc01 .link--primary{padding:7px 26px}
#inc01 .group-greeting{margin-bottom:85px}
#inc01 .group-greeting h2{padding-bottom:28px;font-size:28px;line-height:1.3}
#inc01 .group-greeting .desc{padding-bottom:38px;font-size:16px}
#inc01 .group-clinic{padding-top:0;margin-bottom:85px;flex-direction:column;align-items:center}
#inc01 .group-clinic .area-tit{position:static;transform:none}
#inc01 .group-clinic .fl-l{padding-top:40px}
#inc01 .group-clinic .tab-list{align-items:center;gap:22px}
#inc01 .group-clinic .tab-item .clinic__tit{font-weight:300}
#inc01 .group-clinic .tab-item.on .clinic__tit{font-weight:400}
#inc01 .group-clinic .tab-item::before{display:none}
#inc01 .group-clinic .tab-item{align-items:center;padding-left:0}
#inc01 .group-clinic .tab-item .clinic__tit{font-size:18px;text-align:center}
#inc01 .group-clinic .tab-item .clinic__desc{padding-bottom:16px;text-align:center}
#inc01 .group-clinic .tab-item .info{align-items:center}
#inc01 .group-clinic .tab-item .link--more{margin-bottom:25px}
#inc01 .group-clinic .tab-item .thumb-box{display:block;max-width:380px;margin-bottom:15px}
#inc01 .group-clinic .tab-item .thumb-box img{width:100%}
#inc01 .group-clinic .fl-r{display:none}
#inc01 .bg{right:-57px}
#inc01 .group-dct{grid-template-columns:repeat(1,1fr);gap:60px}
#inc01 .group-dct .fl-l{display:flex;justify-content:center}
#inc01 .group-dct .fl-l .thumb-box{max-width:500px;width:100%;height:325px;background-position:center -65px}
#inc01 .group-dct .fl-r{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
#inc01 .group-dct .fl-r .cmt{font-size:22px}
#inc01 .group-dct .fl-r .desc{padding:25px 0;font-size:16px}
}
@media (max-width:768px){
#inc01{padding:65px 15px}
#inc01 .link--primary{font-size:14px}
#inc01 .group-greeting{margin-bottom:65px}
#inc01 .group-greeting h2{padding-bottom:24px;font-size:24px}
#inc01 .group-greeting .desc{padding-bottom:32px;font-size:15px;white-space:normal}
#inc01 .group-greeting .btn-wrap{gap:10px}
#inc01 .group-clinic{margin-bottom:65px}
#inc01 .group-clinic .fl-l{padding-top:30px}
#inc01 .group-clinic .tab-list{gap:20px}
#inc01 .group-clinic .tab-item .clinic__tit{font-size:17px}
#inc01 .group-clinic .tab-item .thumb-box{max-width:320px;margin-bottom:0px}
#inc01 .group-dct{gap:30px}
#inc01 .group-dct .fl-r .cmt{font-size:20px}
#inc01 .group-dct .fl-r .desc{padding:20px 0;font-size:15px}
#inc01 .bg{display:none}
}
@media (max-width:480px){
#inc01{padding:45px 15px}
#inc01 .group-greeting{margin-bottom:45px}
#inc01 .group-greeting h2{padding-bottom:16px;font-size:22px;white-space:normal}
#inc01 .group-greeting .desc{padding-bottom:24px}
#inc01 .group-greeting .btn-wrap{flex-direction:column;width:100%}
#inc01 .group-clinic{margin-bottom:45px}
#inc01 .group-clinic .fl-l{padding-top:25px}
#inc01 .group-clinic .tab-item .clinic__tit{font-size:16px}
#inc01 .group-clinic .tab-item .clinic__desc{font-size:14px;line-height:1.5}
#inc01 .group-clinic .tab-item .thumb-box{max-width:280px}
#inc01 .group-dct .fl-l .thumb-box{height:270px;background-position:center}
#inc01 .group-dct .fl-r .cmt{font-size:18px}
#inc01 .group-dct .fl-r .desc{padding:12px 0}
}
@media (max-width:390px){
#inc01 .group-greeting h2{font-size:20px}
#inc01 .group-dct .fl-l .thumb-box{height:215px}
}
/* 반응형 [e] */