@charset "utf-8";

/* 메인비주얼 */
#mainVisual{position:relative;background-color:var(--pale);font-family:'Pretendard';color:#111;word-break:keep-all}
#mainVisual .sticky-container{position:sticky;top:0;height:100vh}

/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai{position:relative;height:200vh}
#mainVisual .sc-ai .inner{width:100%}
#mainVisual .sc-ai .sticky-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:url(./img/main_banner_bg.png);background-repeat:no-repeat;background-position:center;background-size:100% 690px}
#mainVisual .sc-ai h1{padding-bottom:55px;font-size:60px;font-weight:700;line-height:1.2;white-space:pre-line;text-align:center}
#mainVisual .sc-ai .visual{position:relative;width:100%}
#mainVisual .sc-ai .visual .chat-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
#mainVisual .sc-ai .chat-box{flex:1;max-width:640px;height:439px;padding:46px 94px 15px;background-color:#fff;border-radius:30px}
#mainVisual .sc-ai .chat-box .area-searchbar{display:flex;align-items:center;gap:15px;max-width:452px;height:60px;padding:18px 21px;border-radius:100px;background-color:var(--pale)}
#mainVisual .sc-ai .chat-box .area-searchbar .ic-star img{width:26px}
#mainVisual .sc-ai .chat-box .area-searchbar #typing{flex:1;font-size:16px;font-weight:500}
#mainVisual .sc-ai .chat-box .area-searchbar svg{width:16px;height:16px;stroke:#aaa}
#mainVisual .sc-ai .chat-box .area-searchbar .btn--search{display:flex;align-items:center;justify-content:center;width:97px;height:40px;border-radius:100px;background:var(--gradient);font-size:15px;font-weight:600;color:#fff}
#mainVisual .sc-ai .chat-box .area-answer{overflow:hidden;position:relative;max-width:452px;height:318px;padding:30px 0 0 38px}
#mainVisual .sc-ai .chat-box .area-answer img{width:100%;object-position:top}
#mainVisual .sc-ai .chat-box .area-answer::before{z-index:1;position:absolute;content:'';top:0;left:0;width:100%;height:36px;background:linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)}
#mainVisual .sc-ai .chat-box .area-answer::after{z-index:1;position:absolute;content:'';bottom:0;left:0;width:100%;height:56px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)}
#mainVisual .sc-ai .comment-box{z-index:1;position:absolute;height:max-content;padding:31px 48px;font-size:20px;line-height:1.4;white-space:pre-line;color:#fff;background-color:#2C5AE7}
#mainVisual .sc-ai .comment-box.right{top:48px;right:-55px;border-radius:24px 24px 24px 0}
#mainVisual .sc-ai .comment-box.left{bottom:128px;left:50px;border-radius:24px 24px 0 24px}
#mainVisual .sc-ai .notice{font-size:12px;font-weight:500;text-align:center;word-break:keep-all;color:#b4b4b4}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo .inner{height:400vh}
#mainVisual .sc-aeo .sticky-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#mainVisual .sc-aeo h2{padding-bottom:55px;font-size:55px;font-weight:700}
#mainVisual .sc-aeo .mask-box{display:grid;padding-bottom:70px}
#mainVisual .sc-aeo p.mask{grid-area:1/1;font-size:40px;font-weight:700;white-space:pre-line;word-break:keep-all}
#mainVisual .sc-aeo p.mask span{color:rgba(0,0,0,0.2);background-image:linear-gradient(#111, #111);background-clip:text;background-repeat:no-repeat;background-size:0% 100%;transition:background-size 0.1s linear}
#mainVisual .sc-aeo a.link{width:330px;height:60px}

/* 특허 */
#mainVisual .sc-patent{height:300vh}
#mainVisual .sc-patent .inner{position:relative;display:flex;align-items:center;justify-content:center;max-width:1034px !important;height:100%}
#mainVisual .sc-patent .inner > *{display:flex;height:564px}
#mainVisual .sc-patent .inner .fl-l{display:flex;justify-content:flex-end;max-width:399px;width:100%;padding-right:56px;box-sizing:content-box}
#mainVisual .sc-patent .inner .fl-r{align-items:center;padding-left:48px}
#mainVisual .sc-patent .img-box{z-index:1;position:absolute;max-width:399px;width:100%;box-shadow:0 0 20px 0 rgba(0,0,0,0.1)}
#mainVisual .sc-patent .img-box img{width:100%;height:100%;object-fit:cover}
#mainVisual .sc-patent h2{max-width:531px;font-size:40px;font-weight:700;line-height:1.25;white-space:pre-line}
#mainVisual .sc-patent h2 .gradient{background-image:linear-gradient(to left, #1698d9 0%, #17d5b6 100%)}

/* 반응형 [s] */
@media (max-width:1600px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai h1{font-size:52px}
#mainVisual .sc-ai .chat-box{padding:40px 70px 15px}
#mainVisual .sc-ai .comment-box{padding:28px 42px;font-size:17px;line-height:1.5}
#mainVisual .sc-ai .comment-box.right{right:40px}
#mainVisual .sc-ai .comment-box.left{left:125px}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo h2{font-size:52px}
#mainVisual .sc-aeo p.mask{font-size:38px}

/* 특허 */
#mainVisual .sc-patent .inner > *{height:523px}
#mainVisual .sc-patent .inner .fl-l{max-width:370px}
#mainVisual .sc-patent .img-box{max-width:370px}
#mainVisual .sc-patent h2{max-width:none;font-size:38px}
}

@media (max-width:1400px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai .chat-box{padding:30px 48px 15px;border-radius:24px}
#mainVisual .sc-ai .chat-box .area-searchbar{gap:12px;height:58px}
#mainVisual .sc-ai .chat-box .area-searchbar .ic-star img{width:22px}
#mainVisual .sc-ai .chat-box .area-searchbar .btn--search{width:85px;height:36px;font-size:14px}
#mainVisual .sc-ai .chat-box .area-answer{padding:15px 0 0 38px}
#mainVisual .sc-ai .chat-box .area-answer::after{height:40px}
#mainVisual .sc-ai .chat-box .area-answer img{transform:scale(0.95)}
#mainVisual .sc-ai .comment-box{padding:25px 36px;font-size:16px}
#mainVisual .sc-ai .comment-box.left{left:150px;border-radius:18px 18px 0 18px}
#mainVisual .sc-ai .comment-box.right{top:100px;right:70px;border-radius:18px 18px 18px 0}
}

@media (max-width:1300px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai .visual{display:flex;width:90%;height:465px;margin:0 auto}
#mainVisual .sc-ai .visual > *{display:flex;align-items:center}
#mainVisual .sc-ai .visual .fl-l{width:60%}
#mainVisual .sc-ai .visual .chat-wrap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:inherit}
#mainVisual .sc-ai .chat-box{width:100%;padding:30px 42px 15px;border-radius:20px}
#mainVisual .sc-ai .chat-box .area-searchbar{max-width:none;width:100%}
#mainVisual .sc-ai .chat-box .area-answer{max-width:470px}
#mainVisual .sc-ai .visual .fl-r{--x:-4vw;width:40%}
#mainVisual .sc-ai .visual .fl-r .comment-wrap{display:flex;flex-direction:column-reverse;gap:25px;width:100%;transform:translateX(var(--x))}
#mainVisual .sc-ai .comment-box{position:relative;white-space:pre-line}
#mainVisual .sc-ai .comment-box.left{left:unset;bottom:unset;width:max-content;border-radius:18px 18px 18px 0}
#mainVisual .sc-ai .comment-box.right{top:unset;right:unset;white-space:normal;width:calc(100% + (var(--x)*-1))}
}

@media (max-width:1200px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai h1{padding-bottom:40px;font-size:48px}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo h2{padding-bottom:45px;font-size:48px}
#mainVisual .sc-aeo .mask-box{padding-bottom:55px}
#mainVisual .sc-aeo p.mask{font-size:34px}

/* 특허 */
#mainVisual .sc-patent .inner{gap:80px}
#mainVisual .sc-patent .inner > *{height:494px}
#mainVisual .sc-patent .inner .fl-l{max-width:350px;padding-right:0}
#mainVisual .sc-patent .inner .fl-r{padding-left:0}
#mainVisual .sc-patent .img-box{max-width:350px}
#mainVisual .sc-patent h2{font-size:34px}
}

@media (max-width:1024px){
#mainVisual .sticky-container{padding:0 20px}

/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai .sticky-container{top:55px}
#mainVisual .sc-ai h1{font-size:44px}
#mainVisual .sc-ai .visual{width:100%}
#mainVisual .sc-ai .visual .fl-l{width:55%}
#mainVisual .sc-ai .chat-box{padding:25px 25px 15px}
#mainVisual .sc-ai .chat-box .area-searchbar{height:auto;padding:10px 20px}
#mainVisual .sc-ai .chat-box .area-searchbar #typing{font-size:clamp(13px,1.47vw,15px)}
#mainVisual .sc-ai .chat-box .area-searchbar .btn--search{width:80px;height:34px;font-size:13px}
#mainVisual .sc-ai .chat-box .area-answer{width:100%;height:auto;aspect-ratio:470 / 318}
#mainVisual .sc-ai .visual .fl-r{align-items:flex-start;width:45%;padding-top:9vw}
#mainVisual .sc-ai .visual .fl-r .comment-wrap{gap:18px}
#mainVisual .sc-ai .comment-box{padding:20px 30px;font-size:15px}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo h2{font-size:44px}
#mainVisual .sc-aeo p.mask{font-size:32px}

/* 특허 */
#mainVisual .sc-patent .inner > *{height:424px}
#mainVisual .sc-patent .inner .fl-l{max-width:300px}
#mainVisual .sc-patent .img-box{max-width:300px}
#mainVisual .sc-patent h2{font-size:32px}
}

@media (max-width:850px){
/* 특허 */
#mainVisual .sc-patent .inner{flex-direction:column;gap:50px}
#mainVisual .sc-patent .inner > *{height:auto}
#mainVisual .sc-patent .inner .fl-l{max-width:280px}
#mainVisual .sc-patent .img-box{position:static;max-width:none;width:100%}
#mainVisual .sc-patent .inner .fl-r{justify-content:center}
#mainVisual .sc-patent h2{max-width:85%;font-size:25px;text-align:center}
}

@media (max-width:768px){
#mainVisual .sticky-container{position:static;height:auto}

/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai{height:auto;padding:70px 0 80px}
#mainVisual .sc-ai .sticky-container{position:static;height:auto}
#mainVisual .sc-ai h1{padding-bottom:30px;font-size:32px}
#mainVisual .sc-ai .visual{flex-direction:column;height:auto}
#mainVisual .sc-ai .visual .fl-l, #mainVisual .sc-ai .visual .fl-r{width:100%}
#mainVisual .sc-ai .visual .chat-wrap{position:static;gap:15px;transform:none}
#mainVisual .sc-ai .chat-box{border-radius:15px}
#mainVisual .sc-ai .chat-box .area-searchbar #typing{font-size:15px}
#mainVisual .sc-ai .visual .fl-r{padding-top:25px}
#mainVisual .sc-ai .visual .fl-r .comment-wrap{align-items:center;gap:15px;transform:none}
#mainVisual .sc-ai .comment-box{width:100% !important;max-width:640px;border-radius:15px !important;text-align:center}
#mainVisual .sc-ai .comment-box.left{white-space:normal}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo{padding-bottom:80px}
#mainVisual .sc-aeo .inner{height:auto}
#mainVisual .sc-aeo h2{padding-bottom:30px;font-size:32px}
#mainVisual .sc-aeo .mask-box{padding-bottom:40px}
#mainVisual .sc-aeo p.mask{grid-area:unset;font-size:25px}
#mainVisual .sc-aeo p.mask:first-child{padding-bottom:10px}
#mainVisual .sc-aeo p.mask span{color:#111;background:none}
#mainVisual .sc-aeo a.link{width:300px;height:55px}

/* 특허 */
#mainVisual .sc-patent{height:auto;padding-bottom:80px}
#mainVisual .sc-patent .inner .fl-l{max-width:250px}
}

@media (max-width:480px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai{padding:40px 0 70px}
#mainVisual .sc-ai h1{font-size:26px}
#mainVisual .sc-ai .chat-box{padding:22px 18px 15px}
#mainVisual .sc-ai .comment-box{font-size:14px}
#mainVisual .sc-ai .chat-box .area-searchbar{padding:10px 14px}
#mainVisual .sc-ai .chat-box .area-searchbar svg{display:none}
#mainVisual .sc-ai .chat-box .area-searchbar .btn--search{width:65px;height:32px}


/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo h2{padding-bottom:20px;font-size:26px}
#mainVisual .sc-aeo p.mask{font-size:18px}
#mainVisual .sc-aeo a.link{width:284px;height:53px}
#mainVisual .sc-aeo .mask-box{padding-bottom:28px}

/* 특허 */
#mainVisual .sc-patent .inner .fl-l{max-width:220px}
#mainVisual .sc-patent h2{max-width:100%;font-size:20px}
}
@media (max-width:390px){
/* AI 검색 :믿을 수 있는 병원 홈페이지 제작 업체 찾고 계신가요? */
#mainVisual .sc-ai .chat-box .area-searchbar{padding:10px 12px 10px 14px}
#mainVisual .sc-ai .chat-box .area-searchbar .btn--search{width:60px;height:30px;font-size:12px}

/* 환자에게 선택받는 병원은 어디일까요? */
#mainVisual .sc-aeo a.link{width:auto;max-width:284px;min-height:52px}
}
/* 반응형 [e] */