@charset "utf-8";

/* 
 * content CSS Document
 *
 */


/* 서브비주얼 */
.area-subVisual{position:relative; height:450rem; width:100%; overflow:hidden;}
.area-subVisual:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; animation:subVisual 2s both;}
.area-subVisual[data-subLayout="car"]:before{background:url('/images/content/subVisual_car.jpg')no-repeat center/cover;}
.area-subVisual[data-subLayout="chuna"]:before{background:url('/images/content/subVisual_chuna.jpg')no-repeat center/cover;}
.area-subVisual[data-subLayout="pain"]:before{background:url('/images/content/subVisual_pain.jpg')no-repeat center/cover;}
.area-subVisual .inr{display:flex; align-items:flex-end; height:100%;}
.area-subVisual h2{margin-bottom:100rem; color:#fff; font-weight:600; font-size:55rem; opacity:0; animation:subTit 1.5s both;}
@keyframes subVisual{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}
@keyframes subTit{
    0%{transform:translateX(-30rem); opacity:0;}
    100%{transform:translateX(0); opacity:1;}
}
@media(max-width:768px){
    .area-subVisual{height:360rem;}
    .area-subVisual h2{margin-bottom:60rem; font-size:50rem;}
}
@media(max-width:480px){
    .area-subVisual{height:200rem;}
    .area-subVisual h2{margin-bottom:35rem; font-size:28rem;}
}


/* sub common */
:root{
    --fs40 : 40rem;
    --fs35 : 35rem;
    --fs22 : 22rem;
    --fs20 : 20rem;
    --fs18 : 18rem;
    
    --p120 : 120rem 0 120rem;
}
#container{overflow:hidden;}
article{position:relative;}
section{padding:var(--p120);}
@media(max-width:1024px){}
@media(max-width:768px){
    :root{
        --fs40 : 32rem;
        --fs35 : 28rem;
        
        --p120 : 100rem 0 100rem;
    }
}
@media(max-width:480px){
    :root{
        --fs40 : 24rem;
        --fs35 : 22rem;
        --fs22 : 20rem;
        --fs20 : 16rem;
        --fs18 : 15rem;
        
        --p120 : 60rem 0 60rem;
    }
}


/* 서브 공통 디자인 */
.sec_intro{position:relative;}
.sec_intro em{display:block; font-size:var(--fs18); color:var(--color-point); font-weight:bold;}
.sec_intro h2{margin:30rem 0 45rem; font-size:var(--fs40); font-family:var(--font-serifK); font-weight:600; color:#000; line-height:1.5;}
.sec_intro p{font-size:var(--fs20); font-weight:300; color:#333; line-height:1.6;}

.bgDark{background:url('/images/content/bg_dark.jpg')no-repeat center/cover;}
.bgLight{background:url('/images/content/bg_light.jpg')no-repeat center/cover;}

.secTit{margin-bottom:50rem; font-size:0;}
.secTit span{display:block; margin-bottom:20rem; width:50rem; height:5rem; border-radius:5rem; background:var(--color-point);}
.secTit span.span_txt{display:block; padding:4rem 18rem; width:max-content; height:auto; border-radius:30rem; font-size:var(--fs18); color:#fff;}
.secTit h2{font-size:var(--fs35); font-weight:600; color:#111; line-height:1.5;}
.secTit p{margin-top:30rem; font-size:var(--fs18); font-weight:300; color:#333; line-height:1.6;}
.secTit_w h2{color:#fff;}
.secTit_w p{color:rgba(255,255,255,0.9);}

.checkList li{display:flex; align-items:center; padding:20rem; background:#fff; border-radius:8rem;}
.checkList li img{display:block; width:30rem;}
.checkList li p{padding-left:15rem; width:calc(100% - 30rem); font-size:var(--fs18); font-weight:500; color:#222; line-height:1.6;}

.list_st1{display:grid; gap:40rem;}
.list_st1.grid2{grid-template-columns:repeat(2,1fr);}
.list_st1.grid3{grid-template-columns:repeat(3,1fr);}
.list_st1 li{border-radius:10rem; overflow:hidden; background:#fff; text-align:center;}
.list_st1 .img{display:block; width:100%;}
.list_st1 img{display:block; width:100%;}
.list_st1 em{display:block; margin:auto; padding:30rem 0 20rem; width:calc(100% - 40rem); font-size:var(--fs22); color:#111; font-weight:bold; border-bottom:1px dashed #ddd;}
.list_st1 p{margin:auto; padding:20rem 0 30rem; width:calc(100% - 40rem); font-size:var(--fs18); font-weight:300; color:#333; line-height:1.6;}

@media(max-width:1024px){
    .list_st1{gap:20rem;}
}
@media(max-width:768px){
    .sec_intro h2{margin:20rem 0 35rem;}
    
    .secTit span{margin-bottom:18rem;}
    .secTit p{margin-top:20rem;}
    .secTit p > br{display:none;}
    
    .list_st1.grid3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
    .sec_intro h2{margin:15rem 0 30rem;}
    .sec_intro h2 > br{display:none;}
    
    .secTit{margin-bottom:35rem;}
    .secTit span{margin-bottom:15rem;}
    .secTit p{margin-top:15rem;}
    
    .checkList li{padding:12rem 10rem;}
    .checkList li img{width:25rem;}
    .checkList li p{padding-left:10rem; width:calc(100% - 30rem);}
    
    .list_st1{display:block;}
    .list_st1 li+li{margin-top:20rem;}
    .list_st1 em{padding:20rem 0 15rem;}
    .list_st1 p{padding:15rem 0 25rem;}
    .list_st1 p > br{display:none;}
}


/* 교통사고 치료 */
[data-sub="car"] *{box-sizing:border-box; word-break:keep-all;}
[data-sub="car"] .checkWrap{display:flex; justify-content:space-between;}
[data-sub="car"] .checkList{width:50%;}
[data-sub="car"] .checkList li+li{margin-top:10rem;}
[data-sub="car"] .checkImg{display:block; width:calc(50% - 50rem); border-radius:10rem; overflow:hidden;}
[data-sub="car"] .checkImg img{display:block; width:100%; height:100%; object-fit:cover;}
[data-sub="car"] .checkImg img{display:block; width:100%; height:100%; object-fit:cover;}
[data-sub="car"] .causeImg{display:flex; justify-content:space-between; padding-top:20rem;}
[data-sub="car"] .causeImg li{overflow:hidden; height:320rem;}
[data-sub="car"] .causeImg li:nth-child(1){width:38%; border-radius:10rem 160rem 160rem 10rem;}
[data-sub="car"] .causeImg li:nth-child(2){width:320rem; border-radius:50%;}
[data-sub="car"] .causeImg li:nth-child(3){width:33%; border-radius:20rem;}
[data-sub="car"] .causeImg li span{display:block; overflow:hidden; width:100%; height:100%;}
[data-sub="car"] .causeImg img{display:block; width:100%; height:100%; object-fit:cover;}
[data-sub="car"] .insuranceImg{display:block; border-radius:10rem; overflow:hidden;}
[data-sub="car"] .insuranceImg img{display:block; width:100%; height:100%; object-fit:cover;}
@media(max-width:1024px){
    [data-sub="car"] .sec_intro p > br{display:none;}
    [data-sub="car"] .checkImg{width:calc(50% - 20rem);}
    [data-sub="car"] .causeImg{padding-top:0;}
    [data-sub="car"] .causeImg li{height:250rem;}
    [data-sub="car"] .causeImg li:nth-child(1){width:36%;}
    [data-sub="car"] .causeImg li:nth-child(2){width:250rem;}
    [data-sub="car"] .causeImg li:nth-child(3){width:33%;}
    [data-sub="car"] .list_st1 p > br{display:none;}
}
@media(max-width:768px){
    [data-sub="car"] .checkWrap{display:block;}
    [data-sub="car"] .checkList{width:100%;}
    [data-sub="car"] .checkImg{margin-top:40rem; width:100%;}
    [data-sub="car"] .causeImg li{height:200rem;}
    [data-sub="car"] .causeImg li:nth-child(2){width:200rem;}
    [data-sub="car"] .insuranceImg{height:300rem;}
}
@media(max-width:480px){
    [data-sub="car"] .checkImg{margin-top:30rem;}
    [data-sub="car"] .causeImg{flex-wrap:wrap;}
    [data-sub="car"] .causeImg li{height:auto;}
    [data-sub="car"] .causeImg li:nth-child(1){margin-bottom:10rem; width:100%;}
    [data-sub="car"] .causeImg li:nth-child(2){width:150rem; height:150rem;}
    [data-sub="car"] .causeImg li:nth-child(3){width:calc(100% - 160rem);}
    [data-sub="car"] .insuranceImg{height:220rem;}
}


/* 추나요법 */
[data-sub="chuna"] *{box-sizing:border-box; word-break:keep-all;}
[data-sub="chuna"] .disease .inr{display:flex; justify-content:space-between;}
[data-sub="chuna"] .diseaseTxt{width:50%;}
[data-sub="chuna"] .diseaseImg{display:block; width:calc(50% - 50rem); border-radius:10rem; overflow:hidden;}
[data-sub="chuna"] .diseaseImg img{display:block; width:100%; height:100%; object-fit:cover;}
[data-sub="chuna"] .checkList{display:grid; grid-template-columns:1fr 1fr; gap:10rem;}
[data-sub="chuna"] .sec3 .inr{display:flex; align-items:center; flex-direction:row-reverse; justify-content:space-between;}
[data-sub="chuna"] .sec3 .secTit{margin-top:50rem; width:calc(50% - 50rem);}
[data-sub="chuna"] .sec3 .sec3Img{display:block; width:calc(50% - 50rem); border-radius:10rem; overflow:hidden;}
[data-sub="chuna"] .sec3 .sec3Img img{display:block; width:100%; height:100%; object-fit:cover;}
@media(max-width:1024px){
    [data-sub="chuna"] .sec_intro p > br{display:none;}
    [data-sub="chuna"] .sec3 .secTit{width:calc(50% - 25rem);}
    [data-sub="chuna"] .sec3 .secTit p > br{display:none;}
    [data-sub="chuna"] .sec3 .sec3Img{width:calc(50% - 25rem);}
}
@media(max-width:768px){
    [data-sub="chuna"] .disease .inr{display:block;}
    [data-sub="chuna"] .diseaseTxt{width:100%;}
    [data-sub="chuna"] .diseaseImg{margin-top:40rem; width:100%;}
    [data-sub="chuna"] .sec3 .inr{display:block;}
    [data-sub="chuna"] .sec3 .secTit{margin-top:0; width:100%;}
    [data-sub="chuna"] .sec3 .secTit h2 > br{display:none;}
    [data-sub="chuna"] .sec3 .sec3Img{width:100%;}
}
@media(max-width:480px){
    [data-sub="chuna"] .diseaseImg{margin-top:30rem;}
}


/* 통증치료 */
[data-sub="pain"] *{box-sizing:border-box; word-break:keep-all;}
[data-sub="pain"] .sec_intro h2 > br{display:none;}
[data-sub="pain"] .cause .inr{display:flex; align-items:center; justify-content:space-between;}
[data-sub="pain"] .cause .secTit{margin-top:50rem; width:calc(50% - 50rem);}
[data-sub="pain"] .cause .causeImg{display:block; width:calc(50% - 50rem); border-radius:10rem; overflow:hidden;}
[data-sub="pain"] .cause .causeImg img{display:block; width:100%; height:100%; object-fit:cover;}
@media(max-width:1320px){
    [data-sub="pain"] .cause .secTit p > br{display:none;}
}
@media(max-width:1024px){
    [data-sub="pain"] .cause .secTit{width:calc(50% - 25rem);}
    [data-sub="pain"] .cause .causeImg{width:calc(50% - 25rem);}
}
@media(max-width:768px){
    [data-sub="pain"] .sec_intro p > br{display:none;}
    [data-sub="pain"] .cause .inr{display:block;}
    [data-sub="pain"] .cause .secTit{margin-top:0; width:100%;}
    [data-sub="pain"] .cause .causeImg{width:100%;}
}
@media(max-width:480px){
    [data-sub="pain"] .sec_intro h2 > br{display:block;}
}

















