@charset "utf-8";

:root {
    --main-color1: #302d90;
}

/*** main_banner **/
#main_content {
    word-break: keep-all;
    letter-spacing: -0.05em;

}

#bg_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}
#main_content .visual {
    position: relative;
    height: 100vh;
    /* background-image: url(../images/main1_1.png); */
    /* background-position: center center; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* background-attachment: fixed; */
    background-color: transparent;
    text-align: center;

}

#main_content .visual .slider1 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main_content .visual .slider1 .slide_box img {
    width: 100%;
}

#main_content .visual .main_banner img {
    margin-top: 10%;
}

#main_content .visual .main_banner {
    position: absolute;
    top: 33%;
    left: 31%;
    transform: translate(-50%, -50%);
}

#main_content .visual .main_banner2 {
    position: absolute;
    bottom: -0.5%;
    left: 31%;
    transform: translate(-50%);
}

#main_content .visual .main_banner3 {
    position: absolute;
    bottom: -0.5%;
    right: 25%;
    transform: translate(50%);
}


.m_main1_bottom{
    display: none;

}
.main1_bottom {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main1_bottom .clip_text {
    font-size: 150px;
    font-weight: 600;
    background-image: url(../images/main1_1.png);
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}

.main2_bottom {
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    background-color: #F5F5F5;

}

.main2_bottom .clip_text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 200px;
    font-weight: 700;
    background-image: url(../images/main_section3.png);
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0; /* 기존 letter-spacing 제거 */
}

.main2_bottom .clip_text span {
    display: inline-block;
}

.main_banner {
    color: white;
}

.main_banner .title .blue_box {
    display: inline-flex;
    letter-spacing: -5%;
    padding: 5px 15px;
    box-sizing: border-box;
    color: #FFFFFF;
    background-color: #0B84D1;

}

.main_banner .title .small {
}

.main_banner .title .small span {
    -webkit-text-stroke: 1px white;
    color: transparent;
}

.visual .arrow {
    color: white;
    position: absolute;
    left: 50%;
    top: 88%;
    transform: translate(-50%, -50%);
    width: 71%;
    display: flex;
    justify-content: left;
    cursor: pointer;
}


.visual .arrow .left_arrow:hover,
.visual .arrow .right_arrow:hover {
    opacity: 0.5;
}

.visual .left_arrow,
.visual .right_arrow {
    width: 70px;
}

.visual .left_arrow i,
.visual .right_arrow i {
    width: 60px;
    height: 60px;
    border: 0.5px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}


/* section1 */
.main_section .section1 {
    background-image: url(../images/main_section1.png);
    background-position: center center;
    background-repeat: no-repeat;
    /* background-size: cover; */

    text-align: center;
    min-height: 650px;
}


.main_section .section1 .line {
    width: 1px;
    height: 190px;
    background-color: #000;
    margin: 100px auto 50px;
}

.main_section .section1 .hospital_button {
    display: inline-flex;
    padding: 10px 30px;
    margin-bottom: 75px;
    text-align: center;
    border: 1px solid #162F59;
    background-color: #162F59;
    border-radius: 25px;
    color: white;
}


/* section2 */
.main_section .section2 .doctor-slider-wrap {
    position: relative;
}

.main_section .section2 .doc-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_section .section2 .doc-img {
    width: 35%;
    text-align: center;
    position: relative;
}

.main_section .section2 .doctor-slider-wrap .slick-dots {
    position: absolute;
    display: none;
    width: 88%;
    margin-top: 0;
    list-style: none;
    text-align: right;
}


.main_section .section2 .doc-img img {
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.main_section .section2 .doc-info {
    width: 65%;
}

.main_section .section2 .doc-info .history {
    display: flex;
    color: #777777;
    letter-spacing: -5%;
}

.main_section .section2 .doctor_button {
    display: inline-flex;
    padding: 10px 30px;
    text-align: center;
    border: 1px solid #162F59;
    background-color: #162F59;
    border-radius: 25px;
    color: white;
    cursor: pointer;
}

.doc-info .history li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: #ccc;
}

.main_section .section2 {
    padding: 0 0 130px;
    background-color: #F5F5F5;
}



/*
.sticky_logo {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    pointer-events: none;
    mix-blend-mode: overlay;
} */

/* section3 */
.main_section .section3 {
    position: relative;
    background-image: url('../images/main_section3.png');
    /* background-image: url('../images/main_section3_test.png'); */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 915px;
    background-color: #f5f5f5;
    text-align: center;
    background-attachment: fixed;
}


.main_section .section3 .box_list {
    /* background-image: url('../images/main_section3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; */

    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 915px;
    color: white;
    /* padding-bottom: 71px; */
}

.main_section .section3 .box {
    min-width: 300px;
    width: 300px;
    height: 450px;
    padding: 50px 0 0 0;
    border-radius: 20px;
    position: relative;
}

.main_section .section3 .box img{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.main_section .section3 .box .go {
    cursor: pointer;
}


.main_section .section3 .box4,
.main_section .section3 .box1 {
    background-color: #162F59;
}

.main_section .section3 .box2 {
    background-color: #0B84D1;
}

.main_section .section3 .box2 img {
    height: 300px;
}

.main_section .section3 .box3 {
    background-color: #00BAB8;
}

.main_section .section3 .go_to {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    gap: 10px;
}

.main_section .section3 .go_to i {
    font-size: 18px;
}

.main_section .section3 .title .prt-light {
    color: #555555;
    padding-top: 150px;
    margin-bottom: 35px;
}


/* section 4 */
.main_section .section4 {
    background-color: #F5F5F5;
    padding: 100px 0;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.main_section .section4 .content {
    color: #777777;
    letter-spacing: -5%;
}

.main_section .section4 .box_list {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.main_section .section4 .box {
    background-color: #FFFFFF;
    min-width: 180px;
    box-sizing: border-box;
    padding: 40px 0;
    cursor: pointer;
    border-radius: 15px;

}

/* section5 */
.main_section .section5 {
    background-color: #FFFFFF;
    padding: 100px 0;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.main_section .section5 .content {
    color: #777777;
    letter-spacing: -5%;
}

.main_section .section5 .hospital-silder-wrap {
    position: relative;
}

.main_section .section5 .hospital-silder-wrap .arrow .left_arrow .icon,
.main_section .section5 .hospital-silder-wrap .arrow .right_arrow .icon {
    display: flex;
    align-items: center;
}


.main_section .section5 .hospital-silder-wrap .arrow .right_arrow:hover,
.main_section .section5 .hospital-silder-wrap .arrow .left_arrow:hover {
    background-color: #D7D7D7;
    color: white;
}

.main_section .section5 .hospital-silder-wrap .arrow .right_arrow,
.main_section .section5 .hospital-silder-wrap .arrow .left_arrow {
    position: absolute;
    border: 1px solid #D7D7D7;
    border-radius: 65px;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;

}

.main_section .section5 .hospital-silder-wrap .arrow .left_arrow {
    top: 50%;
    left: -70px;
    transform: translateY(-70%);
}

.main_section .section5 .hospital-silder-wrap .arrow .right_arrow {
    top: 50%;
    right: -70px;
    transform: translateY(-70%);
}

.main_section .section5 .left .time {
    margin-top: 100px;
}

.main_section .section5 .left .time .timebox {
    display: flex;
    gap: 30px;
    margin: 0;
}

.main_section .section5 .left .time .timebox span {
    display: inline-block;
    width: 60px;
    text-align: justify;
    text-align-last: justify;

}

.main_section .section5 .right {
    position: relative;

    margin-right: calc((100% - 100vw) / 2);
    width: calc(50% + (100vw - 100%) / 2);
    margin-left: 95px;
}

.main_section .section5 .right .root_daum_roughmap .cont {
    display: none;
}

.main_section .section5 .right .map .wrap_controllers {
    display: none;
}


.main_section .section5 .left .path .pathbutton {
    display: inline-flex;
    padding: 10px 30px;
    margin-bottom: 45px;
    border: 1px solid black;
    border-radius: 60px;
}

.main_section .section5 .left .path .pathbutton:hover {
    background-color: black;
    color: white;
}


.main_section .section5 .slick-initialized .slick-slide {
    height: 65vh;
    object-fit: cover;
    border-radius: 15px;
}


/* 슬라이더 줌 효과 */
/* .slick-active .slide_box img{
    transform: scale(1.1);
    animation: zoom 5s;
    animation-fill-mode : forwards;
}

@keyframes zoom{
    0%{
        transform: scale(1.1);
    }

    100%{
        transform: scale(1);
    }
} */


/* 슬라이더 안 텍스트 아래에서 위로 등 효과 */
/* 
.text_animation1{
    height: 80px;
    overflow: hidden;

    margin-bottom: 30px;
}

.text_animation2{
    height: 45px;
    overflow: hidden;
}

.text_animation1 p,
.text_animation2 p{
    height: 100%;
}

.text_animation1 p{
    opacity: 0;
    animation: show-up 1.2s ease forwards;
}

.text_animation2 p{
    opacity: 0;
    animation: show-up2 1.2s ease forwards;
    animation-delay: .4s;
}

@keyframes show-up{
    0%{
        margin-top: 80px;
        opacity: 0.3;
    }

    100%{
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes show-up2{
    0%{
        margin-top: 45px;
        opacity: 0.3;
    }

    100%{
        margin-top: 0;
        opacity: 1;
    }
} */


/* 슬라이더 배너에 스크롤 다운 */
/* .scroll_down{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.scroll_down p{
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.progressbar{
    width: 1px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 10px auto 0;
    position: relative;
}

.progress_in{
    width: 1px;
    height: 0;
    background-color: #fff;
    top: 0;
    left: 0;
    animation: scroll_down infinite 2s ease-out;
}

@keyframes scroll_down{
    0%{
        height: 0%;
    }

    100%{
        height: 100%;
    }
} */


/* main_sect1 */
.section1 {
}

/* main_sect2 */
.section11 {
    /* background-image: url('../images/main_sec2_img1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 920px; */
}


/* main_sect3 */
.section2 {
}

/* main_sect4 */
.section3 {
}


/* mobile */
@media screen and (max-width: 767px) {


    /* main_banner */
    #main_content .visual .slider1,
    .slide_box {
        height: 75vh;
        width: 100%;
    }
    .slide_box video{
        width: 100% ;
        height: 100% ;
        object-fit: cover;
    }

    .main_section .section1 .line{
        height: 120px;
        margin: 50px auto 25px
    }
    /* 모바일 반응형 (768px 이하) */
    .doc-inner {
        flex-direction: column;
        /* 세로 배치로 변경 */
        text-align: center;
    }

    .doc-img,
    .doc-info {
        width: 100%;
    }

    .doc-img {
        margin-bottom: 30px;
    }

    .doc-info .history {
        text-align: left;
        /* 약력은 왼쪽 정렬 유지 */
        display: inline-block;
    }


    .visual .arrow {
        display: none;
    }


    /* main */
    #main_content {
        display: flex;
        flex-direction: column;
        height: 75vh;
    }

    #main_content .visual .slider1 .slide_box img {
        height: 75vh;
        object-fit: cover;

    }

    #main_content .main_banner .title {
        padding: 100px 0px 0px 30px;
        font-size: 25px;
    }

    .main_section .section1 .title {
        padding: 80px 0 50px;
    }

    .main_section .section1 .bottom .doctor {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .main_section .section1 .bottom .doctor img {
        height: 500px;
    }


    .main_section .section2 ul {
        width: 100%;
        flex-direction: column;
    }

    .main_section .section2 ul li {
        width: 100%;
    }


    .main_section .section2 ul li .title p {
        margin-bottom: 0;
        margin-top: 0px;
        text-align: left;
    }

    .main_section .section2 ul li .title p img {
        transform: translate(7px, -1px);
    }

    .main_section .section2 .clinic li .prt-light {
        position: absolute;
        bottom: 40px;
        left: 0;
        width: 70%;
        padding: 0 60px;
        margin: 0;
        text-align: left;
    }

    .main_section .section2 .clinic li {
        position: relative;
        width: 100%;
        height: auto;
    }


    /* main_sect1 */
    .section1 {
    }


    /* main_sect2 */
    .section2 {
    }

    /* main_sect3 */
    .section3 {
    }


    /* 서울수정형외과 css*/
    .main_section .section2 .doc-info{
        width: 100%;
    }
    #main_content .visual .main_banner3 img,
    #main_content .visual .main_banner2 img {
        width: 60%
    }

    #main_content .visual .main_banner3 {
        right: 25%;
    }

    #main_content .visual .main_banner2 {
        left: 25%;
    }

    .main_section .section2 .doc-info .history {
        flex-direction: column;
    }

    .main_section .section2 .doc-info .history .list {
        margin: 10px 0;
    }

    .main_section .section2 .doc-img {
        width: 100%;
    }

    .main_section .section2 .doctor_button {
        margin: 15px 0;
    }

    .main_section .section2 .doctor-slider-wrap .slick-dots {
        display: none !important;
    }

    .main_section .section3 {
        height: 100%;
    }


    .main_section .section3 .box_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 100%;
        padding: 50px 0;
    }

    .main_section .section3 .box {
        width: 100%;
        height: 300px;
        padding: 20px 10px 15px;
        box-sizing: border-box;
        min-width: 0;
    }

    .main_section .section3 .box img {
        height: 50%;
    }

    .main_section .section4 .box{
        min-width: 150px;
        padding: 20px 0;
    }
    .main_section .section4 .box_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: column;
        gap: 20px;
    }

    .main_section .section5 .slick-initialized .slick-slide {
        height: 40vh;
    }

    /* 글자 관련 */
    .m_main1_bottom {
        height: 57.5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .m_main1_bottom .clip_text{
        font-size: 55px;
        font-weight: 600;
        display: block;
        background-image: url(../images/main1_1.png);
        background-attachment: fixed;
        background-position: center center;
        background-size: cover;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-mask-size: 100% auto;
        mask-size: 100% auto;
        -webkit-text-fill-color: transparent;
        color: transparent;
        white-space: nowrap;
    }
    .main1_bottom{
        display: none;
    }

    .main2_bottom .clip_text,
    .main1_bottom .clip_text{
        font-size: 58px;
    }
    .main2_bottom,
    .main1_bottom{
        height: 50px;
    }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}