@charset "utf-8";
@import url(reset.css);


#main{position: relative; width: 100%; height: auto;}
/* ###################################################################
########################## S E C T I O N 1 ###########################
################################################################### */
#sec1{
    width: 100%;
    height: 100vh;
    position: relative;
    position: sticky;
    top: 0;
}

#sec1 .sec1_left{
    float: left;
    width: 50%;
    height: 100%;
    background: #2f3a4e;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#sec1 .sec1_left .main_title{
}
#sec1 .sec1_left .main_title img{
    display: block;
    margin: 0 auto;
}
#sec1 .sec1_left .main_title img:nth-of-type(1){
    width: 1.5vw;
}
#sec1 .sec1_left .main_title img:nth-of-type(2){
    margin: 1.5vw auto 1vw;
    width: 16vw;
}
#sec1 .sec1_left .main_title img:nth-of-type(3){
    margin-top: 40px;
    width: 1.5vw;
}
#sec1 .sec1_left .main_title p{
    text-align: center;
    /* font-size: 4.375rem; */
    font-size: 3.7vw;
    color: #fff;
    font-weight: 400;
    position: relative;
}
#sec1 .sec1_left .main_title p::before{
    content: "";
    width: 48%;
    height: 20px;
    background: rgba(208,224,253,.3);
    position: absolute;
    bottom: 0;
    right: 0;
}

#sec1 .sec1_left .surgery_info_wrap{
    display: flex;
    flex-wrap: wrap;
    margin-top: 88px;
    justify-content: center;
    width: 50%;
}

#sec1 .sec1_left .surgery_info_wrap li{
    width: 33.3%;
    box-sizing: border-box;
    position: relative;
}
#sec1 .sec1_left .surgery_info_wrap li::before{
    content: "";
    width: 1px;
    height: 100%;
    background: #333;
    position: absolute;
    top: 0;
    right: 0;
}
#sec1 .sec1_left .surgery_info_wrap li:nth-of-type(-n+2){
    margin-bottom: 40px;
}
#sec1 .sec1_left .surgery_info_wrap li:nth-of-type(3n)::before{
    display: none;
}
#sec1 .sec1_left .surgery_info_wrap li:last-of-type::before{
    display: none;
}

#sec1 .sec1_left .surgery_info_wrap li img{
    display: block;
    margin: 0 auto;
    height: 2.4vw;
}

#sec1 .sec1_left .surgery_info_wrap li span{
    display: block;
    text-align: center;
    font-weight: 600;
}
#sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(1){
    /* margin-top: 35px; */
    margin-top: 1.8vw;
    /* font-size: 1.125rem; */
    font-size: 0.95vw;
    color: #d1ada0;
}
#sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(2){
    /* margin-top: 15px; */
    margin-top: 0.75vw;
    /* font-size: 1.4375rem; */
    font-size: 1.2vw;
    color: #fff;
}

#sec1 .sec1_right{
    float: left;
    width: 50%;
    height: 100%;
    background: url(/imgs/s04_01/sec1_bg2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

#sec1 .copyright{
    font-size: 0.6875rem;
    color: #fff;
    position: absolute;
    left: -4rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}


/* ###################################################################
########################## S E C T I O N 2 ###########################
################################################################### */
#sec2{
    background: url(/imgs/s04_01/sec2_bg.png) #fff;
    background-repeat: no-repeat;
    background-position: 100% 0;
    position: relative;
    overflow: hidden;
}
#sec2 svg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    opacity: 0.3;
    stroke-dasharray: 2547;
    stroke-dashoffset: 2547;
}
#sec2.motion svg{
    animation: draw 2s linear forwards;
}
@keyframes draw {
    0% {
    }

    95% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


#sec2 .sec_title{
    width: 73.5%;
    margin: 0 auto;
    font-size: 1.875rem;
    font-weight: 300;
    color: #333;
    line-height: 1.7;
    transition: 1s;
    padding-top: 120px;
    padding-left: 65px;
}

#sec2 .sec2_content{
    margin-top: 180px;
    margin-bottom: 180px;
}
#sec2 .sec2_content .sc_left{
    float: left;
    width: 30%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 100px 0 100px 12vw;
}
#sec2 .sec2_content .sc_left::before{
    content: "";
    background: #2f3a4e;
    /* width: 125%; */
    width: 36.5vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0 50px 50px 0;
}
#sec2 .sec2_content .sc_left img{
    width: 1.46vw;
}
#sec2 .sec2_content .sc_left p{
    /* font-size: 2.03rem; */
    font-size: 1.7vw;
    font-weight: 100;
    line-height: 1.5;
    color: #fff;
    /* margin-top: 30px; */
    margin-top: 1.6vw;
}
#sec2 .sec2_content .sc_left p span{
    /* font-size: 2.03rem; */
    font-size: 1.7vw;
    font-weight: 700;
    display: block;
    color: #fff;
}
#sec2 .sec2_content .sc_left > span{
    display: inline-block;
    color: #fff;
    /* font-size: 1.125rem; */
    font-size: 0.94vw;
    line-height: 2;
    /* margin-top: 30px; */
    margin-top: 1.6vw;
}

#sec2 .sec2_content .sc_right{
    float: right;
    /* width: 59%; */
    width: 58vw;
    background: #fff;
    box-shadow: 0px 30px 21px rgba(59,59,59,.1);
    position: relative;
    z-index: 1;
    margin-top: 100px;
    border-radius: 50px 0 0 50px;
    /* padding: 70px 100px 0; */
    padding: 70px 5.6vw 0;
    overflow: auto;
}
#sec2 .sec2_content .sc_right .swiper{}

#sec2 .sec2_content .sc_right .swiper-slide{
    padding-bottom: 115px;
}
#sec2 .sec2_content .sc_right .sc_right_slider{
    display: flex;
    
}
#sec2 .sec2_content .sc_right .sc_right_slider div{
    width: 33.3%;
}
#sec2 .sec2_content .sc_right h3{
    color: #2f3a4e;
    font-weight: 900;
    /* font-size: 3.75rem; */
    font-size: 3.2vw;
}
#sec2 .sec2_content .sc_right p{
    margin-top: 1.6vw;
    margin-bottom: 1.1vw;
    color: #333;
    line-height: 1.5;
    /* font-size: 1.25rem; */
    font-size: 1.1vw;
}
#sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(1) p {
    margin-bottom: 2.7vw;
}
#sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(3) p {
    margin-bottom: 2.7vw;
}
#sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(4) p {
    margin-bottom: 2.7vw;
}
#sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(5) p {
    margin-bottom: 2.7vw;
}
#sec2 .sec2_content .sc_right img{
    width: 100%;
}
#sec2 .sec2_content .sc_right .swiper-horizontal>.swiper-scrollbar{
    height: 1px;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: #e8e8e8;
    bottom: 60px;
}
#sec2 .sec2_content .sc_right .swiper-scrollbar-drag{
    background: transparent;
}
#sec2 .sec2_content .sc_right .swiper-scrollbar-drag::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #2f3a4e;
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

#sec2 .surgery_wrap{
    background: url(/imgs/s04_01/sec3_bg.jpg) no-repeat;
    background-position: bottom  center;
    background-size: 100vw;
    /* padding-bottom: 295px; */
    padding-bottom: 13vw;
}
#sec2 .surgery_title{
    margin-top: 170px;
    text-align: center;
}
#sec2 .surgery_title img{
    width: 9.5vw;
}
#sec2 .surgery_title p{
    color: #4e4c4c;
    font-weight: 200;
    /* font-size: 2.5rem; */
    font-size: 2.1vw;
    /* margin-top: 25px; */
    margin-top: 1.3vw;
}
#sec2 .surgery_title p span{
    display: block;
    /* font-size: 1.125rem; */
    font-size: 1vw;
    letter-spacing: 0.375rem;
    font-weight: 400;
    /* margin-top: 20px; */
    margin-top: 1vw;
}
#sec2 .surgery_img_wrap{
    width: 57%;
    margin: 140px auto 0;
}
#sec2 .surgery_img_wrap img,#sec2 .surgery_img_wrap video, #sec2 .surgery_img_wrap iframe{
    width: 100%;
}











/* ###################################################################
########################## 퀵메뉴 fix메뉴 ###########################
################################################################### */
.quick_fixMenu{
    height: 340px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 16vw;
    z-index: 9999;
    background: #fff;
    padding: 20px 15px;
    border-radius: 50px 0 0 50px;
}
.quick_fixMenu ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.quick_fixMenu ul li{
    padding: 20px 0;
    position: relative;
}
.quick_fixMenu ul li::before{
    content: "";
    width: 30px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.quick_fixMenu ul li:last-of-type::before{
    display: none;
}
.quick_fixMenu ul li a{
    display: block;
    text-align: center;
}
.quick_fixMenu ul li a img{}
.quick_fixMenu ul li a span{
    display: block;
    font-size: 0.875rem;
    margin-top: 10px;
}



/* #########################################################################
############################ R E S P O N S I V E ###########################
######################################################################### */

/* tablet */

@media screen and (min-width: 601px) and (max-width: 1024px){
    #sec1 .sec1_left .main_title img:nth-of-type(1) {
        width: 2.2vw;
    }

    #sec1 .sec1_left .main_title img:nth-of-type(2) {
        margin: 1.8vw auto 1.3vw;
        width: 24vw;
    }

    #sec1 .sec1_left .main_title img:nth-of-type(3){
        width: 2.2vw;
        margin-top: 1.9vw;
    }
    #sec1 .sec1_left .main_title p{
        font-size: 3.9vw;
    }

    #sec1 .sec1_left .surgery_info_wrap li img{
        height: 4.4vw;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(1){
        font-size: 1.5vw;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(2){
        font-size: 1.8vw;
    }

    #sec1 .copyright{
        left: -6rem;
    }

    #sec2{
        overflow: hidden;
        background-position: 59vw 0;
        background-size: 35vw;
    }
    

    #sec2 svg{
        width: 130%;
    }


    #sec2 .sec_title{
        width: 90%;
        padding-top: 80px;
        padding-left: 20px;
        font-size: 2.7vw;
    }

    #sec2 .sec2_content{
        margin-top: 18vw;
        margin-bottom: 18vw;
    }
    #sec2 .sec2_content .sc_left {
        width: 30%;
        padding: 100px 0 100px 7vw;
    }
    #sec2 .sec2_content .sc_left img{
        width: 2.2vw;
    }
    #sec2 .sec2_content .sc_left p{
        font-size: 2.2vw;
    }
    #sec2 .sec2_content .sc_left p span{
        font-size: 2.2vw;
    }
    #sec2 .sec2_content .sc_left > span{
        font-size: 1.3vw;
    }

    #sec2 .sec2_content .sc_right .swiper-slide h3{
        font-size: 3.7vw;
    }

    #sec2 .sec2_content .sc_right .swiper-slide p{
        font-size: 1.5vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(1) p br{
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(1) p {
        margin-bottom: 3.4vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(3) p {
        margin-bottom: 3.4vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(4) p {
        margin-bottom: 3.4vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(5) p {
        margin-bottom: 3.4vw;
    }

    #sec2 .surgery_wrap{
        padding-bottom: 20vw;
    }
    #sec2 .surgery_title{
        margin-top: 18vw;
    }
    #sec2 .surgery_title img {
        width: 20vw;
    }
    #sec2 .surgery_title p{
        font-size: 3.9vw;
        margin-top: 2.5vw;
    }
    #sec2 .surgery_title p span{
        font-size: 2.2vw;
        margin-top: 2.2vw;
    }
    #sec2 .surgery_img_wrap {
        width: 70%;
        margin: 105px auto 0;
    }


    .quick_fixMenu {
        height: 300px;
        top: 40vw;
        padding: 25px 10px;
        border-radius: 35px 0 0 35px;
    }
    .quick_fixMenu ul li a img{
        height: 25px;
    }
}


/* mobile */

@media screen and (max-width: 600px){
    #sec1{
        display: flex;
        flex-direction: column-reverse;
        height: 100vh;
        position: inherit;
    }
    #sec1 .sec1_left {
        float: none;
        width: 100%;
        height: 20vh;
        background-size: cover;
        background-position: center;
        padding-bottom: 135px;
        align-items: inherit;
    }
    #sec1 .sec1_left .main_title{
        position: absolute;
        top: 46vh;
        text-align: left;
        padding-left: 22px;
    }
    #sec1 .sec1_left .main_title img:nth-of-type(1) {
        display: none;
    }
    #sec1 .sec1_left .main_title img:nth-of-type(2) {
        width: 200px;
        margin: 15px auto 10px 0px;
    }
    #sec1 .sec1_left .main_title p{
        font-size: 2.6rem;
    }
    #sec1 .sec1_left .main_title img:nth-of-type(3){
        display: none;
    }

    #sec1 .sec1_left .surgery_info_wrap{
        width: 100%;
    }

    #sec1 .sec1_left .surgery_info_wrap li img{
        height: 27px;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(1){
        font-size: 1rem;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(2){
        font-size: 1.2rem;
    }

    #sec1 .sec1_right{
        float: none;
        width: 100%;
        background: linear-gradient( rgba(101, 72, 38, 0.0) 50%, rgba(47, 58, 78, 1)),   url(/imgs/s04_01/sec1_bg2.jpg);
        background-size: cover;
    }
    #sec1 .copyright{
        display: none;
    }
    #sec2{
        background-size: 70vw;
        overflow: hidden;
    }
    #sec2 svg{
        width: 200%;
        stroke-width: 3px;
        top: 45px;
    }
    #sec2 .sec_title{
        width: 95%;
        word-break: keep-all;
        font-size: 1.3rem;
        padding-left: 20px;
        padding-top: 70px;
    }

    #sec2 .sec2_content {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    #sec2 .sec2_content .sc_left{
        float: none;
        width: 100%;
        background: #2f3a4e;
        text-align: center;
        padding: 30px 0;
    }
    #sec2 .sec2_content .sc_left::before{
        display: none;
    }
    #sec2 .sec2_content .sc_left img{
        width: 20px;
    }
    #sec2 .sec2_content .sc_left p{
        font-size: 1.6rem;
    }
    #sec2 .sec2_content .sc_left p br{
        display: none;
    }
    #sec2 .sec2_content .sc_left p span{
        font-size: 1.6rem;
    }
    #sec2 .sec2_content .sc_left p span br{
        display: none;
    }
    #sec2 .sec2_content .sc_left > span{
        font-size: 1rem;
    }
    #sec2 .sec2_content .sc_left > span br{
        display: none;
    }

    #sec2 .sec2_content .sc_right{
        float: none;
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        box-shadow: 0 5px 18px rgba(59,59,59,.2);
        padding: 45px 25px;
    }
    #sec2 .sec2_content .sc_right .swiper-slide h3{
        font-size: 3rem;
    }
    #sec2 .sec2_content .sc_right .swiper-slide p{
        font-size: 1.1rem;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(1) p {
        margin-bottom: 7vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(3) p {
        margin-bottom: 7vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(4) p {
        margin-bottom: 7vw;
    }
    #sec2 .sec2_content .sc_right .swiper-slide:nth-of-type(5) p {
        margin-bottom: 7vw;
    }


    #sec2 .surgery_wrap{
        padding-bottom: 80px;
    }
    #sec2 .surgery_title{
        margin-top: 130px;
    }
    #sec2 .surgery_title img {
        width: 130px;
        margin: 90px auto 0;
    }
    #sec2 .surgery_title img:nth-of-type(1){
        margin-top: 0;
    }
    #sec2 .surgery_title p{
        font-size: 2.1rem;
    }
    #sec2 .surgery_title p span{
        font-size: 1.125rem;
    }
    #sec2 .surgery_img_wrap{
        width: 85%;
        margin: 110px auto 0;
    }
}



/* galaxy fold */

@media screen and (max-width: 280px){
    #sec1 .sec1_left .main_title img:nth-of-type(2) {
        width: 150px;
    }
    #sec1 .sec1_left .main_title p {
        font-size: 1.7rem;
    }

    #sec1 .sec1_left .surgery_info_wrap li img {
        height: 22px;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(1) {
        font-size: .5rem;
    }
    #sec1 .sec1_left .surgery_info_wrap li span:nth-of-type(2) {
        font-size: 1rem;
    }
    

    #sec2 .sec_title{
        font-size: 1.1rem;
        padding-top: 100px;
    }

    #sec2 .sec2_content .sc_left img {
        width: 15px;
    }
    #sec2 .sec2_content .sc_left p {
        font-size: 1.2rem;
    }
    #sec2 .sec2_content .sc_left p span{
        font-size: 1.2rem;
    }
    #sec2 .sec2_content .sc_left > span {
        font-size: 0.8rem;
    }

    #sec2 .sec2_content .sc_right .swiper-slide h3 {
        font-size: 2.5rem;
    }

    #sec2 .surgery_title {
        margin-top: 110px;
    }
    #sec2 .surgery_title img {
        width: 100px;
        margin: 90px auto 0;
    }
    #sec2 .surgery_title p {
        font-size: 1.8rem;
    }
    #sec2 .surgery_title p span {
        font-size: 1rem;
    }

    #sec2 .surgery_img_wrap {
        width: 90%;
        margin: 90px auto 0;
    }

    .quick_fixMenu {
        height: 275px;
        top: 30vw;
        padding: 20px 10px;
        border-radius: 35px 0 0 35px;
    }

    
    
    
}