/* main_banner */


/* sec1 */
.s1{position: relative; background: rgba(137, 137, 137, 0.05);}
.s1 h2{
    position: absolute;
    top: 10rem;
    left: 50%;
    transform: translate(-50%);

}
.s1_ul{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.s1_ul li:last-child {border-right: .3px solid rgba(137, 137, 137, 0.2);}
.s1_ul li {
    border-left: .3px solid rgba(137, 137, 137, 0.2);
    background: transparent;
    transition: .3s;
}
.s1_ul li:nth-child(1):hover{
    background: url('../img/s1_bg1.png') no-repeat 50% 50% / cover;
}
.s1_ul li:nth-child(2):hover{
    background: url('../img/s1_bg2.png') no-repeat 50% 50% / cover;
}
.s1_ul li:nth-child(3):hover{
    background: url('../img/s1_bg3.png') no-repeat 50% 50% / cover;
}
.s1_ul li:nth-child(4):hover{
    background: url('../img/s1_bg4.png') no-repeat 50% 50% / cover;
}
.s1_ul li a{
    padding: 250px 20px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    font-size: 3rem;
    font-weight: 700;
    color: #424242;
    transition: .3s;
}
.s1_ul li:hover a{
    color: #006cb8;
}
.s1_ul li:hover .img_box>img{
    transform: scale(1.1);    
}
.s1_ul .img_box>img{
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}
.s1_ul .img_box{
    width: 100%;
    max-width: 220px;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    margin: 0 1rem;
}
.s1_ani{
    max-width: 35px;
}
.s1_ul li:hover .s1_ani{
    animation: s1_ani .5s linear  1 ;
}

@keyframes s1_ani {
    0%, 100%{
        transform: translateX(0);
    }
    50%{transform: translateX(20px);}
}
/* s1_1 */
.s1_1{position: relative;}
.s1_1::before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 47%;
    background: rgba(0, 108, 184, 0.05);
    /* background: rgba(137, 137, 137, 0.05); */
    z-index: -1;
    border-radius:  0 330px 0 0;
}

.flex_wrap{display: flex;}
.flex_wrap > *{width: 100%;}
.doctor_img{line-height: 0;align-self: end;}
.doctor_txt{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.greeting{
    font-weight: 300;
    padding: 2rem 0;
    border-top: .5px solid rgba(0, 108, 184, 0.5);
    border-bottom: .5px solid rgba(0, 108, 184, 0.5);
}
.greeting i{
    font-weight: 500;
    color: #006cb8;
}
.doctor_txt .name{
    display: flex;
    align-items: end;
    gap: 1rem;
    line-height: 1;
}
.doctor_txt .name i{color: #006cb8;}
.doctor_txt .name em{
    font-size: 4rem;
    font-weight: 800;
}
.doctor_txt ul{
    font-size: 2rem;
}
.doctor_txt ul li:first-child{font-weight: 700;color: #006cb8;}

/* s2 */
.s2_flex.rightImg{flex-direction: row-reverse;}
.s2_flex{
    width: 100%;
    display: flex;
}
.img_wrap{line-height: 0;}
.s2_flex img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.s2_flex>*{
    width: 100%;
}
.s2_flex:first-child{
    background: rgba(0, 108, 184, 0.06);
}
.s2_flex.leftImg .txt_wrap .inner{ 
    margin-right :calc( calc(100vw - 1280px)/2);
    padding-left: 4rem;
}
.s2_flex.rightImg .txt_wrap .inner{ 
    margin-left :calc( calc(100vw - 1280px)/2);
    padding-right: 4rem;
}
.s2 h2{
    font-size: 3rem;
    text-align: left;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.s2 .txt{
    font-size: 2.5rem;
}







/* s3 둘러보기 */
.page.s3{
    background: rgba(137, 137, 137, 0.1);
}
/* s4 예약 및 진료시간 안내 */
.s4_wrap{
    display: flex;
    gap: 4rem;
}
.s4_wrap>*{
    width: 100%;
}
.con6{background: #fff;}
.con6_box{
    font-size: 25px;
    text-align: center;
    padding: 5rem;
}
.con6_box.box1{
    background:#004068 ;
    color: #fff;
}
.con6_box.box2{
    background:rgba(0, 108, 184, 0.1) ;
}
.box2 h5{color: #004068;}
.s4  h5{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
h5 img{width: 1.2em;}
.con6_box.box1 hr{margin: 3rem 0;opacity: 0.3;}
.con6_box.box2 li{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    font-weight: 500;
}
.con6_box.box2 li:not(:last-child){margin-bottom: 5px;}
.con6_box.box2 li span{
    width: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}
.night{
    color: #ffd527;
    position: relative;
}
.night span,
.night em
{z-index: 2;}
.night::before{
    background: #262626;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(110% + 2.5em);
    height: calc(100% + 5px);
    transform: translate(-50%, -50%);
}
.night em{position: relative;}
.night em::after{
    content: '';
    background: url('../img/night.png')no-repeat 50% 50% / contain;
    width: 1.2em;
    aspect-ratio: 1/1;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translate(100% , -50%);
}
.last_li{font-size: 18px;color:#424242;font-weight: 400;line-height: 1.7;}
.map_wrap{
    width: 100%;
    line-height: 0;
}
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap .wrap_map {
    height: 100%;
    position: relative;
    min-height: 400px;
}



/* 반응형 */


@media (min-width:0px) and (max-width:1280px){
    .s1 h2 {
        top: 7rem;
    }   
    .s1_ul li a {
        padding: 200px 20px 50px;
    }
    
    .s2_flex.rightImg .txt_wrap .inner {
        margin-left: 4rem;
    }
    .s2_flex.leftImg .txt_wrap .inner{
        margin-right: 4rem;
    }
    .con6_box {
        font-size: 20px;
        padding: 3rem;
    }
    .s4 h5 {
        gap: 0.8rem;
        font-size: 3rem;
        margin-bottom: 1rem;
    }



}
@media (min-width:0px) and (max-width:900px){
    .s1 h2 {
        position: relative;
        top: 0;
        padding-top: 5rem;
    }   
    .s1_ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .s1_ul li a {
        padding: 30px;
        gap: .5rem;
        font-size: 2.5rem;
    }
    .s1_ul li  {border: 0;}
    .s1_ul li:last-child  {border: 0;}
    .s1_ul li:nth-child(1)  ,
    .s1_ul li:nth-child(2)  {
        
        border-bottom: .3px solid rgba(137, 137, 137, 0.2);
    }
    .s1_ul li:nth-child(1) ,
    .s1_ul li:nth-child(3)  {
        border-right: .3px solid rgba(137, 137, 137, 0.2);
    }
    .s1_ani {
        max-width: 35px;
        line-height: 0;
    }
    .flex_wrap{flex-direction: column;justify-content: center;}
    .doctor_img{
        align-self: center;
        width: auto;
    }
    .s2_flex{
        flex-direction: column;
    }
    .s2_flex.rightImg{
        flex-direction: column;
    }
    .s2 .txt {
        font-size: 2rem;
    }
    .s2_flex.leftImg .txt_wrap .inner{
        padding: 0 20px;
        margin: 0;
    }
    .s2_flex.rightImg .txt_wrap .inner{
        padding: 0 20px;
        margin: 0;
    }
    .s4_wrap{
        flex-direction: column-reverse;
        max-width: 500px;
        margin: 0 auto;
    }


}
@media (min-width:0px) and (max-width:500px){
    
    .s1_ul li a {
        padding: 20px;
        gap: .5rem;
        font-size: 5.5vw;
    }
    .doctor_txt {
        gap: 2rem;
    }
    .doctor_txt .name em{font-size: 8vw;}
    .doctor_txt ul {
        font-size: 1.7rem;
    }
    .s2 h2 {
        margin-bottom: 1rem;
        font-size: 7vw;
    }  
    .s2 .txt {
        font-size: 4.5vw;
    }  
    .con6_box.box2 li span {
        width: 70px;
    }
    .s4 h5 {
        font-size: 5.5vw;
    }
    .con6_box.box1 hr {
        margin: 1rem 0;
    }
    .con6_box {
        font-size: 4.5vw;
    }   
    .root_daum_roughmap .wrap_map {
        height: 100%;
        position: relative;
        min-height: 300px;
    }
    .s4_wrap {
        gap: 2rem;
    }

}
@media (min-width:0px) and (max-width:310px){

    
}