@charset "utf-8";
/* 렌즈삽입술 신규 페이지(lens_types / kpl / echo_ipcl) 공통.
   1) sub/icl_lens.php 인라인 스타일 복제 (섹션 패턴: .icl-intro .evo-process .sec_evo_diff .sec_evo_vs .clinical-data 등)
   2) 히어로 텍스트 순차 등장 딜레이 */
body { color: #393939; word-break: keep-all;}
	em { color: #862D27; font-weight: 700;}
    p { word-break: keep-all;}

    .smile_feature_wrap { margin-top: 4rem;}
    .feature_box.bottom { margin-top: 6rem;}
    .smile_feature_wrap .feature_box { transition: opacity 0.45s ease, transform 0.45s ease; opacity: 0.75; transform: scale(0.97); }
    .smile_feature_wrap .feature_box.is-filled { opacity: 1; transform: scale(1); }
    .smile_feature_wrap .feature_box .ko,
    .smile_feature_wrap .feature_box .en,
    .smile_feature_wrap .feature_box .desc,
    .smile_feature_wrap .feature_box .desc span,
    .smile_feature_wrap .feature_box .en b { transition: color 0.8s ease, opacity 0.8s ease, font-weight 0.8s ease; }
    .smile_feature_wrap .feature_box .ko { color: #D3D3D3; }
    .smile_feature_wrap .feature_box .en { color: #D3D3D3; }
    .smile_feature_wrap .feature_box .en b { color: #D3D3D3; font-weight: 300; }
    .smile_feature_wrap .feature_box .desc { color: #D3D3D3; } 
    .smile_feature_wrap .feature_box .desc span { color: #999; }
    .smile_feature_wrap .feature_box.is-filled .ko,
    .smile_feature_wrap .feature_box.is-filled .en,
    .smile_feature_wrap .feature_box.is-filled .desc { color: #393939; }
    .smile_feature_wrap .feature_box.is-filled .desc span { color: #666; }
    .smile_feature_wrap .feature_box.is-filled .en b { color: #832e29; font-weight: 800; }

    .icl-intro {padding: 0 0 6.5rem; background: #f8f8f8;}
    .icl-intro .inner {max-width: 83.38rem; margin: 0 auto; padding: 80px 2rem 0; text-align: center;}
    .icl-intro .s-main-ttl {text-align: center; font-size: 4.0625rem; font-weight: 800; color: #862D27; margin-bottom: 6.25rem; letter-spacing: -1.5px;}
    .icl-intro .circle-group {display: flex; justify-content: center; gap: 4.3rem; margin-top: 6.25rem;}
    .icl-intro .circle {width: 18.25rem; height: 18.25rem; border-radius: 50%; background: linear-gradient(180deg, #862D27 19.71%, #CD554D 100%);
 display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;}
    .icl-intro .circle .eng {font-size: 2.8125rem; line-height: 1.3;}
    .icl-intro .circle .kor {margin-top: 0.94rem; font-size: 1.4375rem; font-weight: 600;}
    .icl-intro .circle-desc {margin-top: 1.3rem; font-size: 1rem; line-height: 1.3;  }
    .icl-intro .anatomy-img {display: block; margin: 0 auto 0; max-width: 73.5625rem;}
    .icl-intro .anatomy-img img {max-width: 100%; display: inline-block;}
    .icl-intro .red-box {margin-top: 5.5rem; background: #862D27; padding: 1rem 1.75rem; color: #fff;}
    .icl-intro .red-box p {font-size: 1.75rem; line-height: 1.5; font-weight: 500;}
    .icl-intro .bottom-desc {margin-top: 3.5rem; font-size: 1.4375rem; line-height: 1.8; font-weight: 500; word-break: keep-all;}

	.s-main-ttl {text-align: center; font-size: 2.7rem; font-weight: 700; line-height: 1.4;}
	.sub-ttl {font-size: 1.1875rem; color: #929292; font-weight: 500; }
	.top-desc {margin-top: 3.5rem; font-size: 1.1875rem; line-height: 1.6;   }
	.sub-ttl + .s-main-ttl {margin-top: 1.5rem;  }
	.s-main-ttl + .top-desc {margin-top: 1.5rem;  }
    .top-desc + .top-desc { margin-top: 1rem;}

    .smile-pro-youtube-section { background : #fff;}
    .thumbnail-area.noBorder { border: none;}

    .evo-process {padding: 7.5rem 0; background: #F8F8F9;}
    .evo-process .inner {max-width: 83.38rem; margin: 0 auto; padding: 0 2rem; text-align: center;} 
    .evo-process .video-wrap {position: relative; max-width: 65rem; margin: 4.5rem auto 0;}
    .evo-process .video-wrap img {width: 100%; display: block;} 
    .evo-process .step-wrap {display: flex; justify-content: space-between; max-width: 65rem; margin: 4rem auto 0; gap: 1.5rem;}
    .evo-process .step-card {position: relative; width: 21.25rem; height: 11.125rem; background: #fff; padding: 2.8rem 1.5rem 2rem; border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.03);}
    .evo-process .step-badge {position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); padding: 0.5rem 1.4rem; border-radius: 2rem; color: #fff; font-size: 1.0625rem; white-space: nowrap; line-height: 1.7;}
    .evo-process .badge-gray {background: #A9A9A9;}
    .evo-process .badge-red {background: #862D27;}
    .evo-process .badge-dark {background: #393939;}
    .evo-process .step-card .tit {font-size: 1.4375rem; font-weight: 700; line-height: 1.3; }
    .evo-process .step-card .desc {margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; word-break: keep-all;}

    .sec_evo_diff {padding: 7.5rem 0; background: #F8F8F9;text-align: center;}
    .sec_evo_diff .inner {max-width: 83.8rem; margin: 0 auto; }  
    .sec_evo_diff .card-wrap {display: flex; justify-content: space-between; gap: 4.5rem; margin-top: 4.5rem;}
    .sec_evo_diff .card-item {width: calc(33.333% - 1rem); border: 2px solid #862D27; border-radius: 1.25rem ; overflow: hidden; background: #fff; display: flex; flex-direction: column; max-width: 26.0625rem;}
    .sec_evo_diff .card-item .img-box { flex: 1; display: flex; align-items: center; justify-content: center;}
    .sec_evo_diff .card-item .img-box img {width: 100%; display: block;}
    .sec_evo_diff .card-item .txt-box {background: #862D27; padding: 1.06rem 1rem; color: #fff; display: flex; align-items: center; justify-content: center; min-height: 5.625rem;}
    .sec_evo_diff .card-item .txt-box p {font-size: 1.1875rem; line-height: 1.5; word-break: keep-all;}

    .sec_evo_vs {padding: 7.5rem 0; background: #fff;}
    .sec_evo_vs .inner {max-width: 83.38rem; margin: 0 auto; padding: 0 2rem;} 
    .sec_evo_vs .vs-wrap {display: flex; justify-content: center; gap: 3.12rem; margin-top: 3.75rem;}
    .sec_evo_vs .vs-card {width: calc(50% - 1.25rem); max-width: 26.1875rem; padding: 2.56rem 2.6rem; border-radius: 1.25rem;}
    .sec_evo_vs .old-icl {background: #F6F6F6; border: 1px solid #CFCFCF;}
    .sec_evo_vs .evo-icl {background: #FFF7F6; border: 1.5px solid #862D27;}
    .sec_evo_vs .card-tit {text-align: center; font-size: 1.4375rem; font-weight: 700; line-height:1.3;}
    .sec_evo_vs .evo-icl .card-tit {color: #B30B00;}
    .sec_evo_vs .img-box { margin-top: 1.69rem; display: flex; justify-content: center; align-items: center;}
    .sec_evo_vs .img-box img {max-width: 100%; display: block;}
    .sec_evo_vs .card-sub-tit {text-align: center; margin-top: 1.69rem; font-size: 1.25rem; font-weight: 700;  padding-bottom: 1.12rem; border-bottom: 1px solid #CFCFCF;}
    .sec_evo_vs .evo-icl .card-sub-tit {color: #862D27; border-bottom-color: #EEDCD9;}
    .sec_evo_vs .vs-list {margin-top: 1.5rem;}
    .sec_evo_vs .vs-list li {display: flex; align-items: center; font-size:1.125rem; font-weight: 500; word-break: keep-all; line-height: 1.4;}
    .sec_evo_vs .vs-list li + li {margin-top: 1rem;}
    .sec_evo_vs .old-icl .vs-list li::before {content: ''; display: block; width: 1.25rem; height: 1.25rem; background: url('../sub/img/ico_x_circle_gray.png') no-repeat center/contain; margin-right: 0.62rem; flex-shrink: 0;}
    .sec_evo_vs .evo-icl .vs-list li::before {content: ''; display: block; width: 1.25rem; height: 1.25rem; background: url('../sub/img/ico_check_circle_red.png') no-repeat center/contain; margin-right: 0.62rem; flex-shrink: 0;}

    .dream-adv { position: relative; padding: 7.5rem 0; background: #862D27; text-align: center; color: #fff;}
    .dream-adv::before {content: ''; display: block; width: 10.2465rem; height: 83.3125rem; background: url('../sub/img/dream_adv_letter.png') no-repeat center center; background-size: cover; position: absolute; left: 0; top: 11.75rem; z-index: 0;}
    .dream-adv .inner {max-width: 85.125rem; margin: 0 auto; position: relative; z-index: 1; }
    .dream-adv .s-main-ttl {color: #fff;}
    .dream-adv .adv-grid {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 3.3rem; gap: 6.9rem 6.25rem;}
    .dream-adv .adv-item { max-width: calc(50% - 1rem);}
    .dream-adv .adv-item .img-box { }
    .dream-adv .adv-item .img-box img {width: 100%; display: block;}
    .dream-adv .adv-item .txt-box {margin-top: 2rem;}
    .dream-adv .adv-item .sub-tit { font-size: 1.375rem; line-height: 1.6; font-weight: 500;}
    .dream-adv .adv-item .tit {margin-top: 1rem; font-size: 2.0625rem; font-weight: 400; line-height: 1.4; }  

    .clinical-data {padding: 7.5rem 0; background: url('../sub/img/s_clinical_data_bg.jpg') 50% 50% / cover no-repeat; color: #fff;}
    .clinical-data .inner {max-width: 90rem; margin: 0 auto;  }
    .clinical-data .data-flex {display: flex; align-items: center; justify-content: center; gap: 8rem;}
    .clinical-data .img-box { width: 42%; max-width: 37.25rem;}
    .clinical-data .img-box img {width: 100%; display: block; }
    .clinical-data .txt-box { }
    .clinical-data .main-ttl {color: #fff; font-size: 2.0625rem; font-weight: 700; line-height: 1.4;}
    .clinical-data .sub-tit {margin-top: 2rem; font-size: 1.375rem; font-weight: 700; line-height: 1.6;  }
    .clinical-data .quote-txt {margin-top: 2rem; font-size: 1.1875rem; line-height: 1.65;  word-break: keep-all;}
    .clinical-data .source-txt {margin-top: 1.8rem; font-size: 1.1875rem; color:#CAB2B2; font-weight: 500; line-height: 1.4; }
 

    @media (max-width: 1024px) { 
  
        .icl-intro .circle {width: 11rem; height: 11rem;}
        .icl-intro .circle .eng {font-size: 1.3rem;}
        .icl-intro .circle .kor {font-size: 1rem;  }
        
        .evo-process .step-wrap {flex-direction: column; align-items: center; gap: 3.5rem; margin-top: 5rem;}
        .evo-process .step-card {width: 100%; max-width: 30rem;}

        .sec_evo_diff .card-wrap {flex-direction: column; align-items: center; gap: 2.5rem;}
        .sec_evo_diff .card-item {width: 100%;  }

        .sec_evo_vs .vs-wrap {flex-direction: column; align-items: center;}
        .sec_evo_vs .vs-card {width: 100%; max-width: 40rem;}

        .dream-adv .adv-grid {gap: 3.5rem 1.5rem;}
        .dream-adv .adv-item .tit {font-size: 1.15rem;}
        .dream-adv .adv-item .tit em {font-size: 1.35rem;}

        .clinical-data .data-flex {flex-direction: column;}
        .clinical-data .img-box {width: 80%; margin: 0 auto;}
        .clinical-data .txt-box {width: 90%;  text-align: center;}
        .clinical-data .main-ttl {text-align: center;}

    }
    @media (max-width: 768px) { 
        .pc{display: none !important;}
		.s-main-ttl {font-size: 1.9rem;}
		.top-desc {font-size: 1.1rem; }

        .feature_box.bottom { margin-top: 60px;}

        .icl-intro {padding: 0 0 21.4286vw}
        .icl-intro .s-main-ttl { font-size: 7.9286vw; margin-bottom:3rem;}
        .icl-intro .circle-group { gap: 0.5rem 1rem; align-items: center; margin-top: 3.5rem; flex-wrap: wrap;}
        .icl-intro .circle { width: 45%; max-width: 11rem; height: auto; aspect-ratio: 1 / 1;}
        .icl-intro .circle .kor {margin-top: 0.5rem;}
        .icl-intro .circle-desc {margin-top: 1.5rem; font-size: 0.95rem;}
        .icl-intro .anatomy-img {}
        .icl-intro .red-box {margin-top: 2.5rem; padding: 1.5rem 1rem;}
        .icl-intro .red-box p {font-size: 1rem;}
        .icl-intro .bottom-desc {margin-top: 2rem; font-size: 1rem;}

        .clinical-data .data-flex{gap: 4rem;}

        .evo-process {padding: 5.5rem 0;} 
        .evo-process .video-wrap {margin-top: 3rem;} 
        .evo-process .step-wrap {margin-top: 4.5rem; gap: 3rem;}
        .evo-process .step-card .tit {font-size: 1.125rem;}
        .evo-process .step-card .desc {font-size: 1rem; margin-top: 1rem;}
 
        .sec_evo_diff {padding: 2.5rem 0 5.5rem;} 
        .sec_evo_diff .card-wrap {margin-top: 3.5rem;}
        .sec_evo_diff .top-desc {font-size: 1.0625rem; line-height: 1.6;}
        .sec_evo_diff .card-item .txt-box p {font-size: 1rem;}

        .sec_evo_vs {padding: 5.5rem 0;} 
        .sec_evo_vs .vs-wrap {margin-top: 3.5rem; gap: 2rem;}
        .sec_evo_vs .vs-card {padding: 2.5rem 1.5rem;}
        .sec_evo_vs .card-tit {font-size: 1.25rem;}
        .sec_evo_vs .img-box {padding: 1.5rem; margin-top: 1.5rem;}
        .sec_evo_vs .card-sub-tit {font-size: 1.125rem; margin-top: 2rem; padding-bottom: 1.2rem;}
        .sec_evo_vs .vs-list {margin-top: 1.2rem;}
        .sec_evo_vs .vs-list li {font-size: 1rem;}

        .dream-adv {padding: 5.5rem 0;}
        .dream-adv .adv-grid {flex-direction: column; align-items: center; gap: 4rem;}
        .dream-adv .adv-item {width: 100%; max-width: 45rem;}
        .dream-adv .adv-item .txt-box {margin-top: 1.5rem;}
        .dream-adv .adv-item .desc {font-size: 1rem; margin-top: 1rem;}

        .clinical-data {padding: 5.5rem 0;}
        .clinical-data .main-ttl {font-size: 1.9rem;}
        .clinical-data .sub-tit {font-size: 1.2rem; margin-top: 1.5rem;}
        .clinical-data .quote-txt {font-size: 1rem; margin-top: 1.5rem;}
        .clinical-data .source-txt {margin-top: 1rem; font-size: 0.9rem;}

        .recommend-list .item { line-height: 1.4;}
    }

/* 히어로 텍스트 순차 등장 (sub.css .sub_text_ani 재사용) */
.sub_top_text div:nth-child(1) .sub_text_ani{animation-delay:.15s;-webkit-animation-delay:.15s;}
.sub_top_text div:nth-child(2) .sub_text_ani{animation-delay:.45s;-webkit-animation-delay:.45s;}
.sub_top_text div:nth-child(3) .sub_text_ani{animation-delay:.75s;-webkit-animation-delay:.75s;}
.sub_top_text div:nth-child(4) .sub_text_ani{animation-delay:1.05s;-webkit-animation-delay:1.05s;}
.sub_top_text div:nth-child(5) .sub_text_ani{animation-delay:1.35s;-webkit-animation-delay:1.35s;}
.sub_top_text div:nth-child(6) .sub_text_ani{animation-delay:1.65s;-webkit-animation-delay:1.65s;}

/* 허브에서 조각 하단에 노출되는 단독 페이지 링크 (단독 페이지에서는 출력되지 않음) */
.lens-solo-link {text-align: center; margin: 0 0 5rem; padding: 0 1rem;}
.lens-solo-link a {font-size: 1.0625rem; font-weight: 700; color: #862D27; border-bottom: 1px solid #862D27; padding-bottom: 2px;}