#visual{position: relative; z-index: 0;}
#visual::after{content: '';  background: url(/page/sokchooffice/postpartum/images/main/bg_wave.png)no-repeat; width: 1920px; height: 121px; position: absolute; left: 0; bottom: 0; z-index: 3; pointer-events: none;}

#visual h2.visual-title{position: absolute; left: 20px; top: 203px; z-index: 5; opacity: 0 !important; transition: opacity .3s ease;  display: flex; flex-direction: column; font-family: 'ONE-Mobile-Title';}
#visual h2.visual-title.active{opacity: 1 !important;  animation: gnb2 1s ease-out forwards;}
#visual h2 em{font-size: 36px; font-family: 'ONE-Mobile-OTF'; font-weight: 500;}
#visual h2 span{font-size: 52px;}
#visual h2 strong{font-size: 54px; color: #fe6c0b;}
#visual .slick-wrap{position: relative;}
#visual .slick{position: relative; width: 1920px; left: 50%; top: 0;  margin-left: -960px; z-index: 2;}
#visual .slick .slick-dots{display: flex; gap: 9px; position: absolute; left: 50%; bottom: 60px; transform: translate(-50%);  z-index: 1000;}
#visual .slick .slick-dots li{width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff;}
#visual .slick .slick-dots li.slick-active{background: #fff;}
#visual .slick .slick-dots li a{width: 10px; height: 10px;}
#visual .slick img{object-fit: cover; height: 756px; transform:scale(1.15); transition-delay:1s; image-rendering:-webkit-optimize-contrast; filter:brightness(1); transform-origin:70% 30%;}
#visual .slick img.slick-zoom{transition:transform 10s linear, filter .5s ease-out;  transform:scale(1); filter:brightness(1);}

#visual .information{font-family: 'ONE-Mobile-Title'; box-shadow: 1px 3px 10px rgba(0,0,0,.2); position: absolute; left: 20px; bottom: 115px; z-index: 5; display: flex; height: 249px; background: rgba(255,255,255,.8); border-radius: 5px;}
#visual .information > div{display: flex; flex-direction: column;  align-items: center; position: relative; justify-content: flex-start; padding: 42px;}
#visual .information > div::before{content: ''; width: 1px; height: 200px; background: #d4d2cf; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#visual .information > div:last-child::before{display: none;}
#visual .information > div span{font-size: 22px; padding-top: 31px;}
#visual .information > div span.week{margin-top: 2px;}
#visual .information > div strong{font-size: 28px; font-family:'Pretendard'; color: #fe6c0b; font-weight: 700;}
#visual .information > div em{font-size: 15px; color: #7d7c7c; font-family: 'ONE-Mobile-OTF'; font-weight: 500;}

@media (max-width:1440px) {
    #visual::before{left: 50%; margin-left: -70px;}
    #visual h2.visual-title em{font-size: 35px;}
    #visual h2.visual-title span,
    #visual h2.visual-title strong{font-size: 45px;}
}

@media (max-width:991px) {
    #visual .slick{width: 1200px; margin-left: -600px;}
    #visual .slick .slick-dots{bottom: 56px;}
    #visual .slick img{height: 500px;  }
    #visual h2.visual-title{top: 40px;}
    #visual h2.visual-title em{font-size: 30px;}
    #visual h2.visual-title span, #visual h2.visual-title strong{font-size: 35px;}
    #visual .information{padding: 15px; bottom: 100px; height: 230px;}
    #visual .information > div{padding: 20px;}
    #visual .information > div span{font-size: 20px;}
    #visual .information > div strong{font-size: 24px;}
    
}

@media (max-width:760px) {
    #visual .slick{width: 1000px; margin-left: 0; transform: translate(-50%);}
    #visual .slick img{height: 400px;  transform-origin: 100% 30%;}

    #visual h2.visual-title{top: 25px;}
    #visual h2.visual-title em{font-size: 22px;}
    #visual h2.visual-title span, #visual h2.visual-title strong{font-size: 25px;}

    #visual .information{height: auto; padding: 0; justify-content: center; bottom: 110px; right: 15px; left: 15px;}
    #visual .information > div{padding: 15px; width: 100%;}
    #visual .information > div::before{height: 130px;}
    #visual .information > div img{width: 25px;}
    #visual .information > div span{padding-top: 15px; font-size: 15px;}
    #visual .information > div strong{font-size: 17px;}
    #visual .information > div em{font-size: 13px;}
}

@media (max-width:412px) {
    #visual .slick{width: 600px; margin-left: 0; transform: translate(-65%);}
    #visual .slick .slick-dots{left: 65%;}
    #visual h2.visual-title em{font-size: 19px;}
    #visual h2.visual-title span, #visual h2 strong{font-size: 22px;}
}

@media (max-width:360px) {
    #visual h2.visual-title em{font-size: 18px;}
    #visual h2.visual-title span, #visual h2 strong{font-size: 20px;}
}

#main h3{font-size: 40px; color: #fe6c0b;  position: relative; text-align: center; font-family: 'ONE-Mobile-Title';}

#process{position: relative; z-index: 10; padding: 50px 0 80px;}
#process::before{content: ''; width: 140px; height: 140px; background: #fef5f7; border-radius: 50%; position: absolute; left: 800px; top: -20px; z-index: -1;}

#process .bg01{width: 518px; position: absolute; left: -257px; top: -60px; z-index: -1;}
#process .item-bx{display: grid; grid-template-columns: repeat(4 , 1fr);  padding: 40px 47px 0;}
#process .item-bx a{display: flex; flex-direction: column; align-items: center; position: relative;}
#process .item-bx a > div{position: relative; width: 180px; height: 180px; background: #f3f3f3; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 5px 5px 10px 1px rgba(0,0,0,.1);}
#process .item-bx a > div::after{content: ''; background: url(/page/sokchooffice/postpartum/images/main/arrow01.png)no-repeat; width: 31px; height: 23px;
position: absolute; right: -92px; top: 50%; transform: translateY(-50%);}
#process .item-bx a:last-child > div::after{display: none;}
#process .item-bx a > div em{width: 52px; height: 52px; background: #ff9f80; border-radius: 50%; display: flex; align-items: center; justify-content: center;
position: absolute; left: -10px; top: -10px; z-index: -1; font-size: 22px; font-weight: 700; color: #fff;}
#process .item-bx a strong{font-size: 28px; font-weight: 700; padding-top: 27px;}
#process .item-bx a span{font-size: 20px; font-weight: 500; color: #5e5e5e;}

#process .shortcut{margin-top: 40px; display: flex; justify-content: space-between;  box-shadow: 5px 6px 8px 1px rgba(0,0,0,.06); padding: 50px 77px; background: linear-gradient(80deg,rgba(254, 245, 233, 1) 60%, rgba(241, 235, 252, 1) 100%); border-radius: 20px;}
#process .shortcut > div img{display: block; animation: down1 1s infinite alternate ease-in-out;}
#process .shortcut em{font-family: 'ONE-Mobile-OTF'; font-size: 22px;}
#process .shortcut .shortcut_txt{display: flex; flex-direction: column; align-items: flex-start;}
#process .shortcut span{font-family: 'ONE-Mobile-OTF'; font-weight: 500; font-size: 30px;}
#process .shortcut strong{color: #f0236a;}
#process .shortcut a{height: 51px; padding: 0 35px;  box-shadow: 2px 2px 8px rgba(0,0,0,.3); display: flex; font-size: 19px; color: #fff; margin-top: 30px; font-weight: 600; align-items: center; border-radius: 25px; justify-content: center; background: #f0236a;}
#process .shortcut a:hover{background: #fe6c0b;}

@media (max-width:1440px) {
    #process::before{left: 450px; top: 0;}
    #process .shortcut{padding: 40px;}
    #process .item-bx a > div::after{right: -57px;}
}

@media (max-width:991px) {
    #main h3{font-size: 35px;}
    
    #process{padding: 50px 0;}
    #process::before{left: 280px; top: 0; width: 100px; height: 100px;}
    #process .bg01{left: -20px;}
    #process .bg01 img{display: block; width: 318px; }
    #process .item-bx{padding: 40px 0 0;}
    #process .item-bx a > div{width: 120px; height: 120px;}
    #process .item-bx a > div em{width: 35px; height: 35px;}
    #process .item-bx a > div img{width: 45px;}
    #process .item-bx a strong{font-size: 20px; padding-top: 15px;}
    #process .item-bx a span{font-size: 18px;}

    #process .shortcut{margin-top: 30px;}
    #process .shortcut em{font-size: 20px;}
    #process .shortcut span{font-size: 25px; line-height: 1.3;}
    #process .shortcut > div img{width: 200px;}
    #process .shortcut a{font-size: 17px; padding: 0 30px;}
}

@media (max-width:760px) {
     #main h3{font-size: 25px;}

    #process{padding: 30px 0;}
    #process{padding: 30px 0;}
    #process::before{width: 100px; height: 100px; left: 172px; top: -5px;}
     #process .bg01{top: -60px;}
     #process .bg01 img{width: 200px;}

     #process .item-bx{grid-template-columns: repeat(2 , 1fr); gap: 30px;}
     #process .item-bx a:nth-child(2) > div::after{display: none;}
     #process .item-bx a strong{font-size: 16px;}
     #process .item-bx a span{font-size: 14px;}
     #process .item-bx a > div{width: 100px; height: 100px;}
     #process .item-bx a > div::after{width: 27px; height: 20px; background-size: cover; right: -87px;}
     #process .item-bx a > div img{width: 35px;}
     #process .item-bx a > div em{width: 25px; height: 25px; font-size: 15px; left: 0;}

     #process .shortcut{flex-direction: column; padding: 15px;}
     #process .shortcut em{font-size: 15px; line-height: 1.3;}
     #process .shortcut span{font-size: 20px;}
     #process .shortcut .shortcut_txt{order: 2; padding-top: 30px;}
     #process .shortcut a{font-size: 14px; padding: 0 20px; height: 45px; margin-top: 20px; width: 100%;}
     #process .shortcut > div img{width: 130px; margin: 0 auto;}
}

@media (max-width:414px) {
     #process .item-bx a > div::after{width: 27px; height: 20px; background-size: cover; right: -62px;}

}


#service{position: relative; padding-bottom: 84px;}
#service::before{content: ''; width: 496px; height: 496px; background: #fef7f9; position: absolute; right: 300px; top: -221px; border-radius: 50%;}
#service .box-wrap{display: flex; gap: 66px; padding-top: 67px;}
#service .box a{padding: 15px 15px 33px; width: 300px; box-shadow: 5px 6px 8px 1px rgba(0,0,0,.06); background: #eae0d6; border-radius: 20px; display: flex; align-items: center; flex-direction: column;}
#service .box:nth-child(2) a{background: #dccfc1;}
#service .box:nth-child(3) a{background: #f5d4c5;}
#service .box:last-child a{background: #f7c2b6;}
#service .box a > div{position: relative;}
#service .box a > div::after{content:'';display:block;width:0px;transition:all .7s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);aspect-ratio:1 / 1;background:url(/page/sokchooffice/postpartum/images/main/plus.png) no-repeat center center /cover;position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#service .box a:hover > div::after{width:78px} 
#service .box a > div img{display: block; width: 274px; height: 252px; border-radius: 20px; object-fit: cover;}
#service .box a strong{display: block; font-size: 22px; font-weight: 700; padding-top: 19px;}
#service .box a span{font-size: 15px; color: #5e5e5e; width: 260px; text-align: center; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

@media (max-width:1440px) {
    #service .inner{margin-right: -20px;}
    #service::before{right: 0; top: -333px;}
    #service .box-wrap{width: 100%; gap: 50px; overflow-x: auto; padding-bottom: 20px;}
    #service .box-wrap::-webkit-scrollbar {width: 8px;}
    #service .box-wrap::-webkit-scrollbar-thumb {background: #fe6c0b;border-radius: 10px;}
}

@media (max-width:991px) {
    #service{padding-bottom: 0;}
    #service .box-wrap{padding-top: 27px; gap: 30px;}
    #service .box a{width: 260px;  padding: 15px 15px 20px}
    #service .box a > div img{width: 230px; height: 230px;}
    #service .box a strong{font-size: 20px;}
    #service .box-wrap::-webkit-scrollbar{height: 6px;}
    #service .box a span{font-size: 15px; width: 200px;}
}


@media (max-width:760px) {
    #service::before{width: 200px; height: 200px; top: 0;}
    #service .box-wrap{gap: 20px; padding-bottom: 15px;}
    #service .box a{width: 180px;}
    #service .box a > div img{width: 150px; height: 150px;}
    #service .box a:hover > div::after{width: 50px; height: 50px;}
    #service .box a strong{padding-top: 10px; font-size: 18px;}
    #service .box a span{font-size: 14px; width: 145px;}
}


#facilities{padding-top: 84px; position: relative;}
#facilities::before{content: ''; position: absolute; left: 0; bottom: -190px; width: 970px; height: 970px; background: #fbf3e9; border-radius: 50%;}
#facilities .thum_wrap{position: relative; display: flex; justify-content: flex-end; width: 1664px; margin-top: 63px;}
#facilities .thum_wrap::before{content: ''; background: url(/page/sokchooffice/postpartum/images/main/facilities_bg.png) 50% 50% no-repeat; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-top-left-radius: 75px;}
#facilities .thum{width: 714px; height: 607px; background: rgba(180,164,149,.9); position: relative; padding: 153px 0 0 48px;}
#facilities .thum strong{font-size: 32px; font-weight: 700; color: #2a251f;}
#facilities .thum > div{display: flex; gap: 24px; flex-direction: column; align-items: flex-start; margin-top: 59px;}
#facilities .thum > div a{ border: 1px solid #fff; font-weight: 600; color: #151515; width: 245px; height: 62px; display: flex; justify-content: center; align-items: center; font-size: 22px; font-weight: 700;  border-radius: 8px;}
#facilities .thum > div a.road{background: transparent; }
#facilities .thum > div a:hover {background: #fe6c0b; color: #fff;  transition: all .3s; font-weight: 700; border: none;}


@media (max-width:1440px) {
    #facilities .inner{margin-right: -20px;}
    #facilities::before{width: 500px; height: 500px; top: 0;}
    #facilities .thum{width: 614px;}
    #facilities .thum_wrap{width: 100%;}
}

@media (max-width:991px) {
    #facilities{padding-top: 50px;}
    #facilities .thum_wrap{margin-top: 27px;}
    #facilities .thum{width: 480px; height: 500px; padding: 80px 0 0 35px;}
    #facilities .thum strong{font-size: 30px;}
    #facilities .thum > div{margin-top: 39px;}
    #facilities .thum > div a{font-size: 20px; width: 200px; height: 55px;}
}

@media (max-width:760px) {
    #facilities{padding-top: 30px;}
    #facilities::before{width: 200px; height: 200px; top: 20px;}
    #facilities .thum{width: 270px; height: 250px; padding: 20px 0 0 20px;}
    #facilities .thum strong{font-size: 18px;}
    #facilities .thum > div{margin-top: 26px; gap: 15px;}
    #facilities .thum > div a{width: 110px; font-size: 14px; height: 45px; padding: 0 10px;}
}
@keyframes gnb2 {
    0%{opacity: 0; transform: rotateX(90deg);}
    100%{opacity: 1; transform: rotateX(0deg);}
}

@keyframes down1{ 
  0%{transform:translateY(0%)}
  100%{transform:translateY(15%)} 
}