@charset "utf-8";

.page-common{font-size:16px;color:#777;line-height:1.5;font-family:var(--sub-font)}
.page-common *{word-break:keep-all}
.page-common .pl{white-space:pre-line}
.page-common .col-2{display:grid;grid-template-columns:repeat(2,1fr)}
.page-common .col-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.page-common .col-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.page-common .col-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.page-common h1{margin-bottom:50px;font-size:40px;font-weight:normal;text-align:left;color:#000;font-family:var(--bold-font)}
.page-common .cont-tit h2{font-size:27px;font-weight:normal;color:#000;font-family:var(--bold-font)}
.page-common .ntc{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:50px;font-size:13px;color:var(--primary);font-weight:700;background:rgba(3,29,59,.1)}
.page-common .bnr{display:flex;gap:20px;align-items:center;border-radius:var(--radius);padding:30px 40px;font-size:17px;font-weight:600;text-align:left;color:#fff;background:var(--primary)}
.page-common .bnr img{width:250px;opacity:.2}
.page-common .flex{display:flex}
.page-common .sub-tit{font-size:22px;color:#000;font-family:var(--bold-font)}
.page-common .check{text-align:left}
.page-common .check .sub-tit{width:40%}
.page-common .check li{display:flex;align-items:center;gap:15px;border-radius:var(--radius);padding:15px;background:#f5f5f5}
.page-common .check li span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50px;color:#fff;background:var(--primary)}
.page-common .check li svg{width:16px;stroke-width:2.5px}
.page-common .check li p{font-size:17px;font-weight:700;color:#000}
.page-common .check .col-2{width:80%;gap:10px}
.page-common .check li.full{grid-column:span 2}

.page-common .step-list li{padding:30px 20px;border-radius:var(--radius);text-align:center;background:#f5f5f5}
.page-common .step-list .icon{display:flex;align-items:center;justify-content:center;width:110px;height:110px;margin:0 auto;border-radius:var(--radius);background:#fff}
.page-common .step-list li .num{display:inline-block;margin-bottom:10px;padding:5px 15px;border-radius:50px;font-size:14px;font-weight:600;color:#fff;background:var(--primary)}
.page-common .step-list li .step-info{margin-top:15px}
.page-common .step-list li .step-info p{font-size:17px;font-weight:700;color:#000}

.type1 .img-box img{width:100%;border-radius:var(--radius)}
.type1 .border-box{position:relative;z-index:0;width:90%;margin:-100px auto 0;padding:50px;border-top:5px solid var(--primary);border-radius:var(--radius);text-align:center;background:#fff}
.type1 .border-box .cont-tit{margin-bottom:40px}
.type1 .sub-txt>div+div{margin-top:50px}

.type2 .img-box{gap:20px}
.type2 .img-box img{width:100%;border-radius:var(--radius)}
.type2 .cont-tit{margin:80px 0;text-align:center}
.type2 .cont-tit div{margin-top:30px}
.type2 .sub-txt>div+div{margin-top:100px}
.type2 .sub-tit{margin-bottom:20px}
.type2 .symptom li{overflow:hidden;display:flex;align-items:center;gap:50px;border-radius:var(--radius);border:1px solid #e1e1e1}
.type2 .symptom li+li{margin-top:20px}
.type2 .symptom li img{border-radius:var(--radius)}
.type2 .symptom dl dt{margin-bottom:5px;font-size:19px;font-weight:700;color:#000}
.type2 .check li+li{margin-top:10px}
.type2 .check li p{width:140px}

.clinic .cont-box .col-2{gap:30px;align-items:center}
.clinic .img-box img{width:100%;border-radius:var(--radius)}
.clinic .cont-tit{text-align:center}
.clinic .cont-tit p{margin:20px 0}
.clinic .sub-cont{margin-top:100px}
.clinic .sub-cont .cont+.cont{margin-top:100px}
.clinic .sub-cont .sub-tit{margin-bottom:15px}
.clinic .dot li{font-weight:500;color:#000}
.clinic .dot li:before{display:inline-block;content:'';width:3px;height:3px;margin-right:8px;vertical-align:3px;background:#777}
.clinic .clinic-step img{width:100%;border-radius:var(--radius)}
.clinic .clinic-step div{margin-top:-25px;text-align:center}
.clinic .clinic-step span{display:inline-block;padding:5px 20px;border:5px solid #fff;border-radius:50px;font-size:17px;font-weight:600;color:#fff;background:var(--primary)}
.clinic .clinic-step p{padding:10px 20px;font-size:17px;color:#000;font-weight:500}

/* 병원소개 */
#Intro .img-box{overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:30px;height:510px;background:url('/sh_page/img/intro-bg.jpg')}
#Intro .img-box img{width:545px}
#Intro .mean{padding:100px 0 150px;text-align:center}
#Intro .mean p{font-size:40px;color:var(--primary);font-family:var(--bold-font)}
#Intro .mean .desc{padding-top:30px}
#Intro .mean .desc div{margin-top:15px;font-size:20px;font-weight:600;color:#000}
#Intro .col-2{align-items:center;gap:80px}
#Intro .col-2 img{overflow:hidden;width:100%;border-radius:var(--radius)}
#Intro .col-2 .txt p{margin-bottom:10px;font-size:28px;color:#000;font-family:var(--bold-font)}
.gradient-line{position:relative;overflow:hidden;width:5px;height:80px;margin-top:30px;left:50%;border-radius:999px;background:#fff;transform:translateX(-50%)}
.gradient-line::after{content:'';position:absolute;left:50%;top:-100%;width:100%;height:100%;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(3,29,59,.5),rgba(3,29,59,.8));animation:shineDrop 1.7s linear infinite;transform:translateX(-50%)}
@keyframes shineDrop{0%{top:-100%}100%{top:100%}}

/* 의료진소개 */
#Team .cont-box .col-2+.col-2{margin-top:100px}
#Team .team-box{position:relative;align-items:end}
#Team .team-box:after{position:absolute;content:'';top:0;right:0;opacity:.1;width:390px;height:100px;background:url('/sh_page/img/illo-logo-on.png');background-size:cover}
#Team .img-box{overflow:hidden;width:80%;border-radius:13px}
#Team .img-box img{width:100%}
#Team .info{position:relative}
#Team .info .name span{font-weight:700;color:var(--primary)}
#Team .info .name p{font-size:28px;color:#000;font-family:var(--bold-font)}
#Team .txt{margin-top:30px;padding-bottom:80px;color:#000}
#Team .txt p{margin-bottom:7px;font-size:19px;font-weight:700}
#Team .txt .col-2{gap:3px 20px}
#Team .txt .list li:before{display:inline-block;content:'';width:3px;height:3px;margin-right:7px;border-radius:30px;vertical-align:3px;background:#777}

/* 진료안내 */
#Guide .list dl{display:flex;justify-content:space-between;padding:30px 40px;border-radius:13px;font-size:23px;font-weight:700;color:#000;background:#f5f5f5}
#Guide .list dl+dl{margin-top:15px}
#Guide .day{margin-top:100px;padding:70px 40px 40px;border-radius:30px;background:rgba(3,29,59,.05)}
#Guide .day .cont-tit{text-align:center}
#Guide .day .col-2{margin-top:80px;gap:50px 30px}
#Guide .day .col-2 .name span{font-weight:700;color:var(--primary)}
#Guide .day .col-2 .name p{font-size:20px;color:#000;font-family:var(--bold-font)}
#Guide .day .name{text-align:center}
#Guide .day .schedule-table{margin-top:10px}
#Guide .day .schedule-table table{overflow:hidden;width:100%;border-radius:13px;border-collapse:collapse;font-size:15px;text-align:center;background:#fff}
#Guide .day .schedule-table thead th{color:#fff;background:var(--primary)}
#Guide .day .schedule-table tbody th{color:var(--primary)}
#Guide .day .schedule-table tbody>*{font-weight:600}
#Guide .day .schedule-table td,#Guide .day .schedule-table th{padding:8px 10px;border-bottom:1px solid #eee}
#Guide .day .schedule-table span{display:inline-block;padding:2px 10px;border-radius:20px;font-size:14px}
#Guide .day .schedule-table .on{background:var(--primary);color:#fff}
#Guide .day .schedule-table .off{background:#ddd;color:#333}

/* 입원절차 */
#Step .sub-txt{text-align:center}
#Step .sub-tit{margin-bottom:0}
#Step .sub-txt ul{gap:20px;margin-top:50px}
#Step .sub-txt ul li{overflow:hidden;position:relative;border-radius:var(--radius)}
#Step .sub-txt ul li img{width:100%}
#Step .sub-txt ul li div{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;color:#fff;background:rgba(3,29,59,.1)}
#Step .sub-txt ul li span{display:flex;align-items:center;justify-content:center;width:40px;height:22px;border-radius:50px;font-weight:700;font-size:12px;color:#fff;background:var(--primary)}
#Step .sub-txt ul li p{color:var(--primary);font-family:var(--bold-font)}
#Step .procedures{margin-top:40px;text-align:center;}
#Step .step-line{margin-top:50px}
#Step .step-line li{display:flex;align-items:center;gap:30px;padding:20px;border-radius:var(--radius);border:1px solid #e1e1e1}
#Step .step-line li+li{margin-top:10px}
#Step .step-line li span{display:inline-block;padding:3px 15px;border-radius:50px;font-size:14px;font-weight:700;color:#fff;background:var(--primary)}
#Step .step-line li p{width:120px;font-size:18px;color:var(--primary);font-family:var(--bold-font)}
#Step .step-line li div{margin-left:10px;font-weight:500;color:#000}

/* 재활치료센터 */
#Center .sub-tit-box{display:flex;justify-content:space-between}
#Center .sub-tit-box .arrow{display:flex;align-items:center}
#Center .sub-tit-box .arrow div{display:flex;cursor:pointer;align-items:center;opacity:.5;transition:all .3s}
#Center .sub-tit-box .arrow div:hover{opacity:1}
#Center .sub-tit-box .arrow .next:before{display:inline-block;content:'';width:1px;height:15px;margin:0 5px;background:#ddd}
#Center .facility{overflow:hidden}
#Center .equipment-slider{padding-top:50px}
#Center .equipment-slider svg{width:20px}
#Center .equipment{overflow:hidden;margin-top:15px}
#Center .equipment li img{width:100%;border-radius:5px}
#Center .equipment li p{margin-top:5px;font-weight:600;color:#000}

/* 급·만성 통증치료 */
#Pain .bnr{width:80%;margin:0 auto}

/* 교통사고 휴유증 관리 */
#Accident .cont-tit .circle{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto 20px;border-radius:50px;font-size:35px;color:var(--primary);background:#f5f5f5;font-family:var(--bold-font)}
#Accident .cont-tit p{width:80%;margin:20px auto 0;padding:15px 20px;border-radius:var(--radius);font-size:17px;font-weight:600;color:#fff;background:var(--primary)}
#Accident .sub-txt{text-align:center}
#Accident .sub-tit{margin-bottom:0}
#Accident .sub-txt ul{gap:20px;margin-top:50px}
#Accident .sub-txt ul li{overflow:hidden;position:relative;border-radius:var(--radius)}
#Accident .sub-txt ul li img{width:100%}
#Accident .sub-txt ul li div{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;color:#fff;background:rgba(3,29,59,.1)}
#Accident .sub-txt ul li span{display:flex;align-items:center;justify-content:center;width:40px;height:22px;border-radius:50px;font-weight:700;font-size:12px;color:#fff;background:var(--primary)}
#Accident .sub-txt ul li p{color:var(--primary);font-family:var(--bold-font)}

/* 중풍 후유증/ 안면마비 */
#Face .cont-tit .red-box{padding:20px;border-radius:5px;background:#FEE6E6}
#Face .cont-tit .red-box span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 auto 10px;border-radius:50px;font-size:18px;font-weight:700;color:#fff;background:#F00000}
#Face .cont-tit .red-box div{font-weight:700;color:#F00000}
#Face .sub-cont .check{margin-top:20px}
#Face .clinic-step img{width:100%;border-radius:var(--radius)}
#Face .clinic-step div{margin-top:-25px;text-align:center}
#Face .clinic-step span{display:inline-block;padding:5px 20px;border:5px solid #fff;border-radius:50px;font-size:17px;font-weight:600;color:#fff;background:var(--primary)}
#Face .clinic-step p{padding:10px 20px;font-size:17px;color:#000;font-weight:500}

/* 성장클리닉 */
#Growth .sub-cont .bnr dt{font-size:19px;font-weight:normal;font-family:var(--bold-font)}
#Growth .factors li+li{margin-top:15px}
#Growth .factors>.flex{align-items:center}
#Growth .factors .txt{padding:0 50px}
#Growth .factors .txt .flex{align-items:center;gap:10px;margin-bottom:10px}
#Growth .factors .txt .ntc{margin-top:0}
#Growth .factors img{border-radius:var(--radius)}
#Growth .sub-cont-tit .num{display:inline-block;padding:1px 10px;border-radius:50px;font-size:12px;font-weight:600;color:#fff;background:var(--primary)}
#Growth .sub-cont-tit p{font-size:20px;color:var(--primary);font-family:var(--bold-font)}

/* 체형교정클리닉 */
#Correct .sub-cont .check{gap:10px}

#Onestop .sum{margin-bottom:50px;font-size:16px;text-align:center}
#Onestop .sum ul{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
#Onestop li{overflow:hidden;position:relative;height:auto;padding:30px;border-radius:13px;background:rgba(3,29,59,.1)}
#Onestop li .top span{display:inline-block;margin-bottom:15px;padding:3px 10px;border-radius:50px;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;background:var(--primary)}
#Onestop li .top dd{color:#111}
#Onestop li dd{font-size:18px;font-weight:500;white-space:pre-line;font-family:var(--bold-font)}
#Onestop .arrow{display:block;margin:50px auto}
#Onestop .all{padding:50px;border-radius:13px;text-align:center;border:1px solid #e1e1e1}
#Onestop .all{position: relative;z-index: 0;width: 90%;margin:0 auto;padding: 50px;border-top: 5px solid var(--primary);border-radius: var(--radius);text-align: center;background: #fff;}
#Onestop .all span{display:inline-block;padding:3px 10px;border-radius:50px;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;background:var(--primary)}

.p41 .cont-box{text-align:center;}
#Onestop.p41 .sum{margin-top:50px}
#Onestop.p41 .sum ul{grid-template-columns:repeat(5, 1fr);gap:20px}


/* 반응형 [s] */
@media (max-width:1300px){
#Intro .img-box{background-position:center top;height:464px}
#Intro .img-box img{background-size:auto 100%;}
}
@media (max-width:1230px){
.page-common h1{margin-bottom:46px;font-size:38px}
#Intro .img-box{height:418px}
#Intro .mean p{font-size:38px}
#Guide .day{padding:60px 20px 40px}

#Step .step-line li div{width:calc(100% - 400px);text-align:left}
}
@media (max-width:1024px){
.page-common h1{margin-bottom:42px;font-size:33px}
.page-common .col-3{grid-template-columns:repeat(2, 1fr);}
.page-common .col-4{grid-template-columns:repeat(2, 1fr);}
.page-common .col-5{grid-template-columns:repeat(2, 1fr);}
#Intro .img-box{height:372px}
#Intro .img-box img{width:60%}
#Intro .mean{padding:80px 0 130px}
#Intro .mean .desc div{font-size:19px}
#Intro .col-2{gap:5%}

#Team .team-box{align-items:start}
#Team .team-box:after{width:300px;height:75px}

#Guide .list{margin-top:30px}
#Guide .col-2{display:block;}
#Guide .col-2 li + li{margin-top:30px}

#Step .step-line li{gap:20px}
#Step .step-line li div{width:calc(100% - 300px)}

#Onestop .sum ul{grid-template-columns:repeat(2, 1fr);gap:20px}
#Onestop .all{width:100%}

#Onestop.p41 img{width:100%}
#Onestop.p41 .sum ul{grid-template-columns:repeat(2, 1fr);gap:20px}

.type2 .symptom li img{width:310px}
}
@media (max-width:768px){
.page-common h1{margin-bottom:38px;text-align:center;font-size:30px}
.page-common .col-2{grid-template-columns:repeat(1, 1fr)}
.page-common .cont-tit h2{font-size:24px}
.page-common .flex{flex-direction:column;}
.page-common .check .col-2{width:100%;display:flex;flex-direction:column}
.page-common .check .sub-tit{width:100%;margin-bottom:20px}
.page-common .bnr{flex-direction:column;}
.page-common .pl{white-space:normal;}
.page-common .col-3{grid-template-columns:repeat(1, 1fr);}
.page-common .col-5{grid-template-columns:repeat(1, 1fr);}

.clinic .sub-cont{margin-top:60px}

#Intro .img-box{height:326px}
#Intro .mean{padding:65px 0 110px}
#Intro .mean p{font-size:30px}
#Intro .mean .desc div{font-size:17px}
#Intro .col-2{grid-template-columns:repeat(1, 1fr)}
#Intro .col-2 .txt{text-align:center}
#Intro .col-2 .txt p{font-size:24px}

#Team .img-box{margin:0 auto}
#Team .info{margin-top:30px;text-align:center}
#Team .team-box:after{top:auto;bottom:0}

#Guide .cont-box{text-align:center}
#Guide .list dl{font-size:20px}
#Guide .day{padding:40px 20px 30px}
#Guide .day .col-2{margin-top:60px}

#Step .step-line li{flex-direction:column}
#Step .step-line li div{width:100%;text-align:center;}

#Onestop .sum ul{gap:15px}
#Onestop li{padding:24px}
#Onestop .all{padding:34px}
#Onestop .all p br{display:none;}
#Onestop.p41 .sum ul{grid-template-columns:repeat(1, 1fr);gap:15px}

.type1 .border-box{width:100%;margin:50px 0 0;padding:34px;border-radius:0}
#Pain .bnr{width:100%;text-align:center;}

.type2 .symptom li img{width:100%}
.type2 .symptom li{flex-direction:column;gap:20px;padding:20px;text-align:center;}

.type2 .sub-txt>div+div{margin-top:70px}

#Accident .cont-tit p{width:100%;}

#Growth .factors .txt{padding:20px 0}
}
@media (max-width:480px){
.page-common{font-size:15px}
.page-common h1{margin-bottom:34px;font-size:27px}
.page-common .cont-tit h2{font-size:22px}
.page-common .check .sub-tit{text-align:center;}
.page-common .check li{flex-direction:column;gap:4px;width:100%;text-align:center;}
.page-common .check li p{word-break: break-all;}
.page-common .check li.full{grid-column:auto}
.page-common .bnr{text-align:center;}
.page-common .col-4{grid-template-columns:repeat(1, 1fr)}

#Intro .img-box{height:280px}
#Intro .img-box img{width:70%}
#Intro .mean{padding:50px 0 90px}
#Intro .mean p{padding:0 20px;font-size:27px}
#Intro .mean .desc div{font-size:16px}
#Intro .col-2 .txt p{font-size:22px}

#Team .img-box{width:100%;}
#Team .info .name p{font-size:24px}

#Guide .list dl{padding:18px 20px;font-size:17px}
#Guide .list dl+dl{margin-top:10px}
#Guide .day{margin-top:50px;padding:40px 20px 30px}
#Guide .day .col-2{margin-top:50px}
#Guide .day .schedule-table{overflow-x:scroll}
#Guide .day .schedule-table table{min-width:480px;width:100%;font-size:14px}
#Guide .day .schedule-table span{font-size:13px}

#Step .step-line li{gap:10px}

#Onestop li{padding:20px}
#Onestop .all{padding:24px}
#Onestop .sum ul{grid-template-columns:repeat(1, 1fr);gap:10px}
#Onestop.p41 .sum ul{gap:10px}

.type1 .border-box{padding:24px 20px}

.type2 .cont-tit{margin:50px 0}
.type2 .sub-txt>div+div{margin-top:50px}

#Growth .factors .txt{text-align:center;}
}
@media (max-width:380px){
.page-common h1{font-size:24px}
}
/* 반응형 [e] */